winkekatze.tv/assets/scss/_header.scss

header {
    margin: -25px -25px 0px -25px;
    background: $background_accent_1;
    padding: 20px 30px;
    box-shadow: 5px 5px 5px 10px $background_accent_1;
    h1 a, h1 a:hover, h1 a:link, h1 a:visited {
        font-family: $headline_font, sans-serif;
        color: $font_accent_1;
        margin: 0;
        font-weight: bold;
        font-size: $font_size_h1;
        text-decoration: none;
    }
    nav ul {
        font-size: $font_size_default;
        list-style: none;
        margin: 0;
        padding: 0;
        a, a:link, a:visited {
            color: $font_accent_2;
            text-decoration: none;
            background: $shadow_accent_1;
            padding: 6px 18px;
            border-radius: 5px;
            text-transform: $menu_text_transform;
        }
        a:hover, a:active {
            color: $font_accent_2_hover;
            box-shadow: 0px 0px 1px 1px $shadow_accent_1;
        }
        li {
            display: inline;
            margin: 0 8px 0 0;
            padding: 0;
        }
    }
}

@media (min-width: $large_view) {
    header {
        max-width: $large_min_width;
        margin: auto;
        box-shadow: 0px -10000px 0px 10000px $background_accent_1;
        h1 a, h1 a:hover, h1 a:link {
            font-size: $font_size_h1_large;
        }
        nav ul {
            font-size: $font_size_default_large;
        }
    }
}

@media (max-width: $mobile_view) {
    header {
        h1 a, h1 a:hover, h1 a:link {
            font-size: $font_size_h1_mobile;
        }
        nav ul {
            font-size: $font_size_default_mobile;
        }
    }
}

@media (max-width: $tiny_view) {
    header {
        h1 a, h1 a:hover, h1 a:link {
            font-size: $font_size_h1_tiny;
        }
        nav ul {
            font-size: $font_size_default_tiny;
        }
    }
}

@media (max-width: $pico_view) {
    header {
        h1 a, h1 a:hover, h1 a:link {
            font-size: $font_size_h1_pico;
        }
    }
}