GreasyFork Header Style Fix

To fix GreasyFork Header Style

Per 17-08-2023. Zie de nieuwste versie.

Installeren als gebruikersscript ? Installeren als gebruikersstijl ?

Stel een vraag, plaats een beoordeling of rapporteer dit script.

Regels afbreken

/* ==UserStyle==
@name           GreasyFork Header Style Fix
@namespace      github.com/openstyles/stylus
@version        1.0.0
@description    To fix GreasyFork Header Style
@author         CY Fung
@license        MIT
==/UserStyle== */
@-moz-document domain("greatest.deepsurf.us") {
    /* Insert code here... */
    html {
        --main-header-scale: 1.0;
    }

    #site-nav {
        font-size: min(16px, calc(20px * var(--main-header-scale)));
    }

    #site-name {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        margin: 0;
    }
    #site-name-text h1 {

        font-size: calc(38pt * var(--main-header-scale));
        white-space: nowrap;
        margin: 0;
    }

    #site-name-text {
        margin: 0;
    }

    #main-header > .width-constraint:only-child {
        display: flex;
        place-items: center;
        padding-top: calc(8px * var(--main-header-scale));
        padding-bottom: calc(8px * var(--main-header-scale));
        padding-right: calc(24px * var(--main-header-scale));
        padding-left: calc(24px * var(--main-header-scale));
        flex-direction: row;
        margin: 0;
    }
    #site-nav > nav,
    #nav-user-info {
        position: static;
        margin: 0;
    }

    #site-nav {

        display: flex;
        row-gap: 4px;
        flex-direction: column;
        margin: 0;
    }
    #main-header > .width-constraint:only-child > #site-nav:last-child {
        flex-grow: 1;
        margin: 0;
    }

    html #site-name img {
        width: calc(58px * var(--main-header-scale));
        height: calc(58px * var(--main-header-scale));
        margin: 0;
    }


    @media screen and (max-width: 768px) {

        html {
            --main-header-scale: 0.74;
        }
    }



    @media screen and (max-width: 672px) {

        html {
            --main-header-scale: 0.62;
        }
    }
}