Restyled the desktop header once more.

assets/less/classes/header.less

@@ -1,13 +1,9 @@
 .header {
     --header-image-px: 60px;
     --header-link-margin: 14px;
+    --header-background-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
 
     flex: 0 0 auto;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    z-index: 500;
 
     &__background {
         position: absolute;
@@ -22,35 +18,13 @@
         -webkit-mask-image: var(--header-background-mask-image); // fuck chrome
     }
 
-    --header-background-mask-image: linear-gradient(180deg, var(--background-colour) 0, transparent 100%);
-
-    @media (min-width: @site-mobile-width) {
-        &--floating {
-            position: fixed;
-            --header-background-mask-image: linear-gradient(180deg, var(--background-colour) 90%, transparent 100%);
-            --header-image-px: 40px;
-            --header-link-margin: 4px;
-            --header-height: var(--header-height-floating);
-        }
-
-        &:hover,
-        &:focus,
-        &:focus-within,
-        &:active {
-            --header-background-mask-image: linear-gradient(180deg, var(--background-colour) calc(var(--header-height-open) - 10px), transparent 100%);
-            --header-height: var(--header-height-open);
-        }
-    }
-
     &__desktop {
         margin: 0 auto;
         display: flex;
         align-items: flex-start;
-        padding: 5px 4px 4px;
+        padding: 4px;
         max-width: var(--site-max-width);
-        height: var(--header-height);
+        height: var(--header-height-desktop);
-        transition: height .1s;
-        overflow: hidden;
 
         @media (max-width: @site-mobile-width) {
             display: none;
@@ -76,27 +50,15 @@
             height: 100%;
         }
 
-        &__menu {
-            height: 100%;
-            margin: 0 5px;
-        }
-
         &__link {
             color: inherit;
             text-decoration: none;
             display: block;
             min-width: 100px;
-            padding: 4px 10px;
             cursor: pointer;
-            opacity: .4;
             border-radius: 2px;
-            transition: background-color .2s, margin .1s, opacity .1s;
+            padding: 4px 10px;
-
+            transition: background-color .2s;
-            &--primary {
-                margin: var(--header-link-margin) 0;
-                font-size: 1.2em;
-                padding: 6px 10px;
-            }
 
             &:hover,
             &:focus {
@@ -108,12 +70,55 @@
             }
         }
 
-        &__menu:hover &__link,
+        &__menu {
-        &__menu:active &__link,
+            margin: 0 5px;
-        &__menu:focus &__link,
+
-        &__menu:focus-within &__link,
+            &__link {
-        &__menus:not(:hover) &__link--primary {
+                margin: var(--header-link-margin) 0;
-            opacity: 1;
+                font-size: 1.2em;
+                padding: 6px 10px;
+                text-align: center;
+            }
+
+            &:focus-within &__link {
+                background-color: fade(#fff, 30%);
+            }
+        }
+
+        &__submenu {
+            position: absolute;
+            z-index: 100;
+            overflow: hidden;
+            max-height: 0;
+            transition: max-height .2s;
+            left: -5px;
+            top: 50px;
+            box-shadow: 0 1px 2px #000A;
+
+            &__link {
+                margin: 5px;
+            }
+
+            &__background {
+                background: var(--header-accent-colour);
+                position: absolute;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+            }
+
+            &__content {
+                background: var(--background-colour-translucent-9);
+                overflow: hidden;
+            }
+        }
+
+        &__menu:hover &__submenu,
+        &__menu:focus &__submenu,
+        &__menu:focus-within &__submenu,
+        &__menu:active &__submenu {
+            max-height: 200px;
         }
 
         &__user {
@@ -185,7 +190,7 @@
             justify-content: space-between;
             height: var(--header-height-mobile);
             padding: 5px;
-            z-index: 500;
+            z-index: 100;
 
             -webkit-touch-callout: none !important;
             -webkit-user-select: none !important;
@@ -240,7 +245,7 @@
             position: absolute;
             left: 0;
             right: 0;
-            z-index: 499;
+            z-index: 99;
             padding: var(--header-height-mobile) 5px 5px;
             background: var(--background-pattern);
             background-color: var(--header-accent-colour);

assets/less/classes/headerv1.less

@@ -2,10 +2,6 @@
     --header-image-px: 60px;
     flex: 0 0 auto;
     transition: height .2s;
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
     z-index: 500;
 
     &__background {
@@ -27,12 +23,13 @@
         align-items: center;
         padding: 4px;
         max-width: var(--site-max-width);
-        height: var(--header-height);
+        height: var(--header-height-desktop);
         transition: height .2s;
 
         @media (max-width: @site-mobile-width) {
             flex-direction: column;
             height: 100%;
+            height: var(--header-height-mobile);
         }
     }
 

assets/less/main.less

@@ -8,11 +8,8 @@
     --site-max-width: 1200px;
     --site-logo: url('/images/logos/imouto-default.png');
 
-    --header-height-static: 70px;
+    --header-height-desktop: 70px;
-    --header-height-floating: 50px;
+    --header-height-mobile: 50px;
-    --header-height-open: 240px;
-    --header-height: var(--header-height-static);
-    --header-height-mobile: 50px; // functionally different from -floating
 
     --background-image: initial;
 
@@ -72,11 +69,6 @@ html {
         width: 100%;
         margin: 0 auto;
         flex: 1 0 auto;
-        padding-top: var(--header-height);
-
-        @media (max-width: @site-mobile-width) {
-            padding-top: var(--header-height-mobile);
-        }
     }
 
     &--bg-blend {

assets/typescript/misuzu.ts

@@ -43,26 +43,8 @@ window.addEventListener('load', () => {
     }
 
     commentsInit();
-
-    const siteHeader: HTMLDivElement = document.querySelector('.js-header');
-
-    if (siteHeader) {
-        window.addEventListener('scroll', () => updateHeader(siteHeader));
-        updateHeader(siteHeader); // initial call to bring it in the right state
-    }
 });
 
-function updateHeader(element: HTMLDivElement): void
-{
-    const floating: string = 'header--floating';
-
-    if (scrollY > 0 && !element.classList.contains(floating)) {
-        element.classList.add(floating);
-    } else if (scrollY <= 0 && element.classList.contains(floating)) {
-        element.classList.remove(floating);
-    }
-}
-
 function loginFormUpdateAvatar(avatarElement: HTMLElement, usernameElement: HTMLInputElement, force: boolean = false): void {
     if (!force) {
         if (loginFormAvatarTimeout)

templates/_layout/header.twig

@@ -86,7 +86,7 @@
     ]
 %}
 
-<nav class="header header--new js-header">
+<nav class="header">
     <div class="header__background"></div>
 
     <div class="header__desktop">
@@ -97,12 +97,17 @@
         <div class="header__desktop__menus">
             {% for item in site_menu %}
                 <div class="header__desktop__menu">
-                    {{ item.url|html_link(item.title, {'class': 'header__desktop__link header__desktop__link--primary'})|raw }}
+                    {{ item.url|html_link(item.title, {'class': 'header__desktop__link header__desktop__menu__link'})|raw }}
 
                     {% if item.menu is defined and item.menu is iterable %}
-                        {% for subitem in item.menu %}
+                        <div class="header__desktop__submenu">
-                            {{ subitem.url|html_link(subitem.title, {'class': 'header__desktop__link'})|raw }}
+                            <div class="header__desktop__submenu__background"></div>
-                        {% endfor %}
+                            <div class="header__desktop__submenu__content">
+                                {% for subitem in item.menu %}
+                                    {{ subitem.url|html_link(subitem.title, {'class': 'header__desktop__link header__desktop__submenu__link'})|raw }}
+                                {% endfor %}
+                            </div>
+                        </div>
                     {% endif %}
                 </div>
             {% endfor %}