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

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

themes/ccchh/layouts/partials/header.html

@@ -1,8 +1,21 @@
 
   <header class="main-header header">
     <div class="container">
+      {{ $image := resources.Get "images/logo.svg" }}
+      <a href="{{ .Site.Home.RelPermalink }}" class="ccchh-logo">
+        <img src="{{ $image.RelPermalink }}" class="invert-on-light" alt="CCCHH Icon">
+      </a>
+      <input class="menu-button hamburger-button" type="checkbox">
+      <div class="hamburger hamburger-button invert-on-light">
+        <div class="hamburger-line hamburger-line-top"></div>
+        <div class="hamburger-line hamburger-line-middle"></div>
+        <div class="hamburger-line hamburger-line-bottom"></div>
+      </div>
       <nav class="menu">
       {{- partial "menu.html" (dict "menuID" "main" "page" . ) -}}
       </nav>
+      <div class="roomstate" id="roomstate">
+        <span class="state">unbekannt</span><br><span class="duration">(seit&nbsp;)</span>
+      </div>
     </div>
   </header>

themes/ccchh/layouts/partials/menu.html

@@ -2,10 +2,9 @@
 {{- $menuID := .menuID -}}
 {{- $menuContent := index site.Menus .menuID -}}
 
-    <ul>
+    <ul class="main-nav">
       {{- if compare.Eq $menuID "main" -}}
-      {{- $image := resources.Get "images/logo.svg" }}
-      <li><a href="/{{ .Site.Home.URL }}"><img src="{{ $image.RelPermalink }}" class="invert-on-light" width="150px" alt="CCCHH Icon"></a></li>
+      <li><a href="/{{ .Site.Home.RelPermalink }}" class="in-nav-home">Home</a></li>
       {{- end }}
       {{- range $menuContent }}
       <li>
@@ -22,10 +21,3 @@
         >{{ or (T .Identifier) .Name | safeHTML }}</a></li>
       {{- end }}
     </ul>
-    {{ if compare.Eq $menuID "main" -}}
-    <ul>
-      <li class="roomstate" id="roomstate">
-        <span class="state">unbekannt</span><br><span class="duration">(seit&nbsp;)</span>
-      </li>
-    </ul>
-    {{- end -}}