Style: Make header adaptive by intro. a hamburg. menu for mobile viewp.

Co-authored-by: c6ristian <c6ristian@christian.moe>

themes/ccchh/assets/sass/main.scss

@@ -128,6 +128,7 @@ body>main {
   line-height: 1.0em;
   max-width: 8em;
   padding: 5px;
+  white-space: nowrap;
 
   color: $roomstate_color_unknown;
 
@@ -144,7 +145,7 @@ body>main {
   }
 }
 
-// CCCHH Icon in Menu
+// CCCHH icon & hamburger menu in header
 @media only screen and (prefers-color-scheme: light) {
   .invert-on-light {
     filter: invert(1);
@@ -253,6 +254,167 @@ body>main {
   box-shadow: var(--card-box-shadow);
   padding: 0;
   margin: 0;
+
+  --main-header-content-height: calc(var(--font-size) * var(--line-height));
+
+  .container {
+    display: block flex;
+    position: relative;
+    flex-direction: row;
+    justify-content: start;
+    align-items: center;
+    column-gap: var(--spacing);
+  }
+
+  .menu-button,
+  .hamburger,
+  .in-nav-home {
+    // Don't display, when not in mobile mode.
+    display: none;
+  }
+
+  .menu {
+    // Set this to 100% to force the roomstate to "right-align".
+    width: 100%;
+  }
+
+  .ccchh-logo {
+    padding-top: var(--nav-element-spacing-vertical);
+    padding-bottom: var(--nav-element-spacing-vertical);
+
+    img {
+      height: var(--main-header-content-height);
+    }
+  }
+
+
+  // When the header content doesn't display nicely anymore, switch to mobile mode.
+  @import "../pico-1.5.11/scss/variables";
+
+  @media (max-width: map-get($breakpoints, md)) {
+    .hamburger-button {
+      display: unset;
+      position: absolute;
+      top: calc(var(--nav-element-spacing-vertical));
+      right: var(--spacing);
+      height: var(--main-header-content-height);
+      // To have an attempt at a good-looking cross, when converting the burger
+      // stack to one, set the width to the height / sin(45).
+      width: calc(var(--main-header-content-height) / 0.707106781);
+    }
+
+    .menu-button {
+      z-index: 3;
+      opacity: 0%;
+      border: 0;
+      margin: 0;
+    }
+
+    .hamburger {
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+
+      .hamburger-line {
+        height: 4px;
+        width: 100%;
+        background-color: white;
+      }
+    }
+
+    .in-nav-home {
+      display: unset;
+    }
+
+    // Don't display the menu per default in mobile mode.
+    .menu {
+      display: none;
+    }
+
+    .menu-button:checked~.menu {
+      display: unset;
+      position: fixed;
+      width: 100%;
+      height: 100%;
+      top: calc(var(--main-header-content-height) + (var(--nav-element-spacing-vertical) * 2) + 3px);
+      left: 0;
+      background-color: var(--background-color);
+
+      ul,
+      li {
+        display: block;
+        padding-top: calc(var(--nav-element-spacing-vertical) * 0.5);
+        padding-bottom: calc(var(--nav-element-spacing-vertical) * 0.5);
+      }
+
+      ul {
+        padding-left: var(--spacing);
+        padding-right: var(--spacing);
+      }
+
+      li {
+        padding-left: 0;
+        padding-right: 0;
+        border-bottom: 0.2em solid var(--muted-border-color);
+        display: flex;
+
+        // borrowed form pico css for li
+        margin-bottom: calc(var(--typography-spacing-vertical) * .25);
+      }
+
+      a {
+        flex-grow: 1;
+      }
+
+      .main-nav {
+        margin: auto;
+      }
+
+      // Use the media queries, which we need, from here:
+      @if map-get($breakpoints, "sm") {
+        @media (min-width: map-get($breakpoints, "sm")) {
+          ul {
+            padding-left: 0;
+            padding-right: 0;
+          }
+
+          .main-nav {
+            max-width: map-get($viewports, "sm");
+          }
+        }
+      }
+    }
+
+    .hamburger-line-top {
+      transform-origin: top right;
+      transition: all 0.4s ease-in-out;
+    }
+
+    .hamburger-line-middle {
+      transition: all 0.2s ease-in-out;
+    }
+
+    .hamburger-line-bottom {
+      transform-origin: bottom right;
+      transition: all 0.4s ease-in-out;
+    }
+
+    .menu-button:checked~.hamburger {
+      .hamburger-line-top {
+        // After some adjustments to make the cross look decent, rotate -45deg.
+        transform: translateX(-1.5px) translateY(-1.5px) rotate(-45deg);
+      }
+
+      .hamburger-line-middle {
+        transform: scaleY(0);
+      }
+
+      .hamburger-line-bottom {
+        // After some adjustments to make the cross look decent, rotate 45deg.
+        transform: translateX(-1.5px) translateY(1.5px) rotate(45deg);
+      }
+    }
+  }
 }