minor design adjustments

assets/scss/_header.scss

@@ -4,7 +4,10 @@ header {
     background: $background_accent_1;
     top: 0;
     box-shadow: 0px -10000px 0px 10000px $background_accent_1;
-    h1 a, h1 a:hover, h1 a:link, h1 a:visited {
+    .sitetitle {
+        text-align: justify;
+        display: inline-block;
+        a, a:hover, a:link, a:visited {
             font-family: $headline_font, sans-serif;
             color: $font_accent_1;
             margin: 0;
@@ -12,6 +15,15 @@ header {
             font-size: $font_size_h1;
             text-decoration: none;
         }
+    }
+    .sitesubtitle {
+        text-align: justify;
+        display: inline-block;
+        font-family: $subline_font, sans-serif;
+        color: $font_default;
+        font-weight: bold;
+        font-size: $font_size_h2;
+    }
     nav {
         grid-template-rows: auto 1fr auto;
         padding: 0 1rem;
@@ -36,7 +48,7 @@ header {
                     text-decoration: none;
                     text-align: center;
                     display: inline-block;
-                    color: $font_submenu;
+                    color: $font_menu;
                     font-size: $font_size_default;
 
                     &:focus {
@@ -102,7 +114,7 @@ header {
             box-shadow: 0 0.15em 0.25em rgba(black, 0.25);
 
             a {
-                color: $font_menu;
+                color: $font_submenu;
                 display: block;
                 padding: 0.5em;
                 opacity: 0;
@@ -188,14 +200,29 @@ header {
 
 @media (max-width: $mobile_view) {
     header {
-        h1 a, h1 a:hover, h1 a:link {
+        .sitetitle {
+            margin-top: 0px;
+            a, a:hover, a:link {
                 font-size: $font_size_h1_mobile;
             }
+        }
+        .sitesubtitle {
+            display: block;
+            font-size: $font_size_h2_mobile;
+            margin-top: 0px;
+        }
         @if $show_mobile_menu == true {
             nav {
+                > ul > li a,
+                > ul > li .title_dropdown {
+                    font-size: $font_size_default_mobile;
+                }
+                > ul > li > a,
+                > ul > li .title_dropdown {
+                    padding: 0.3rem 0.2rem;
+                }
                 ul {
                     display: table;
-
                 }
                 .dropdown {
                     .dropdown__menu {
@@ -213,10 +240,40 @@ header {
 
 @media (max-width: $tiny_view) {
     header {
-        h1 a, h1 a:hover, h1 a:link {
+        .sitetitle {
+            margin-top: 0px;
+            a, a:hover, a:link {
                 font-size: $font_size_h1_tiny;
             }
         }
+        .sitesubtitle {
+            font-size: $font_size_h2_tiny;
+        }
+        @if $show_mobile_menu == true {
+            nav {
+                > ul > li a,
+                > ul > li .title_dropdown {
+                    font-size: $font_size_default_tiny;
+                }
+                > ul > li > a,
+                > ul > li .title_dropdown {
+                    padding: 0.3rem 0.2rem;
+                }
+                ul {
+                    display: table;
+                }
+                .dropdown {
+                    .dropdown__menu {
+                        left: 180%;
+                    }
+                    &:after {
+                        content: none;
+                        opacity: 1;
+                    }
+                }
+            }
+        }
+    }
 }
 
 @media (max-width: $pico_view) {

assets/scss/_laend_variables.scss

@@ -15,7 +15,6 @@ $font_menu: white;
 $font_submenu: white;
 $font_default_inverted: white;
 
-$shadow_accent_1: rgba(0,0,0,1);
 $font_size_default: 1.3em;
 $font_size_default_large: 2.2em;
 $font_size_default_mobile: 1em;
@@ -37,6 +36,7 @@ $font_size_h2_pico: 0.75em;
 
 $headline_font: 'EB Garamond';
 $main_font: 'Epilogue';
+$subline_font: 'Epilogue';
 
 $large_min_width: 1800px;
 

assets/scss/_variables.scss

@@ -10,11 +10,10 @@ $font_accent_2: maroon;
 $font_accent_2_hover: orangered;
 $font_accent_3: orangered;
 $font_accent_4: rgb(247, 196, 24);
-$font_menu: black;
+$font_submenu: black;
-$font_submenu: red;
+$font_menu: red;
 $font_default: white;
 
-$shadow_accent_1: rgba(255, 190, 14, 0.5);
 $font_size_default: 1.3em;
 $font_size_default_large: 2.2em;
 $font_size_default_mobile: 1em;
@@ -35,6 +34,7 @@ $font_size_h2_tiny: 0.9em;
 $font_size_h2_pico: 0.75em;
 
 $headline_font: 'Mochiy Pop One';
+$subline_font: 'Lato';
 $main_font: 'Lato';
 
 $large_min_width: 2200px;

templates/layout.html

@@ -34,7 +34,7 @@
 </head>
 <body>
   <header>
-    <h1 id="top"><a href="/">
+    <h1 id="top" class="sitetitle"><a href="/">
       {%- block sitetitle -%}
         winkekatze.tv
       {%- endblock -%}