Add burger menu

assets/css/main.css

@@ -12,6 +12,8 @@ header {
     height: 520px;
     background-image: url(/chapelle.png);
     background-position: center;
+    background-color: rgba(244, 244, 244, 0.286);
+    background-blend-mode: overlay;
 }
 
 header > div {
@@ -27,6 +29,10 @@ header > div {
     max-width: 760px;
 }
 
+.burger-menu {
+    display: none;
+}
+
 .menu ul {
     list-style-type: none;
     display: flex;
@@ -35,6 +41,10 @@ header > div {
     padding: 1em 0;
 }
 
+a {
+    color: #da1e2c;
+}
+
 .menu a {
     margin: 0.6em;
     padding: 0 1.5em;
@@ -75,14 +85,131 @@ header > div {
     header {
         height: 200px;
     }
+
     .menu {
         display: none;
     }
 
+    .navbar {
+        width: 100%;
+        box-shadow: 0 1px 4px rgb(146 161 176 / 15%);
+    }
+
+    .nav-container {
+        max-width: 1050px;
+        width: 100%;
+        margin: auto;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        height: 62px;
+    }
+
+    .navbar .menu-items {
+        display: flex;
+    }
+
+    .navbar .nav-container li {
+        list-style: none;
+    }
+
+    .menu-entry {
+        padding-bottom: 1.5em;
+    }
+
+    .menu-entry a {
+        text-decoration: none;
+        color: #0e2431;
+        font-weight: 700;
+        font-size: 1.5rem;
+        padding: 0.7rem;
+    }
+
+    .nav-container {
+        display: block;
+        position: relative;
+        height: 60px;
+    }
+
+    .nav-container .checkbox {
+        position: absolute;
+        display: block;
+        height: 32px;
+        width: 32px;
+        top: 20px;
+        left: 20px;
+        z-index: 5;
+        opacity: 0;
+        cursor: pointer;
+    }
+
+    .nav-container .hamburger-lines {
+        display: block;
+        height: 26px;
+        width: 32px;
+        position: absolute;
+        top: 17px;
+        left: 20px;
+        z-index: 2;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .nav-container .hamburger-lines .line {
+        display: block;
+        height: 4px;
+        width: 100%;
+        border-radius: 10px;
+        background: #fff;
+    }
+
+    .nav-container .hamburger-lines .line1 {
+        transform-origin: 0% 0%;
+        transition: transform 0.4s ease-in-out;
+    }
+
+    .nav-container .hamburger-lines .line2 {
+        transition: transform 0.2s ease-in-out;
+    }
+
+    .nav-container .hamburger-lines .line3 {
+        transform-origin: 0% 100%;
+        transition: transform 0.4s ease-in-out;
+    }
+
+    .navbar .menu-items {
+        padding-top: 120px;
+        background-color: rgba(255, 255, 255, 0.9);
+        height: 100vh;
+        width: 100%;
+        transform: translate(-150%);
+        display: flex;
+        flex-direction: column;
+        transition: transform 0.5s ease-in-out;
+        text-align: center;
+    }
+
+    .nav-container input[type="checkbox"]:checked ~ .menu-items {
+        transform: translateX(0);
+    }
+
+    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line1 {
+        transform: rotate(45deg);
+    }
+
+    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line2 {
+        transform: scaleY(0);
+    }
+
+    .nav-container input[type="checkbox"]:checked ~ .hamburger-lines .line3 {
+        transform: rotate(-45deg);
+    }
+
     #header-title {
-        font-size: 0.9em;
+        font-size: 0.8em;
         max-width: 310px;
-        margin-top: 0.7em;
+        margin-top: 0em;
     }
 }
 
@@ -95,7 +222,6 @@ main {
 
 .concerts {
     display: grid;
-    /*overflow: hidden;*/
 }
 
 .concert-entry-small {

layouts/partials/menu.html

@@ -16,6 +16,21 @@
             {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
         </ul>
     </nav>
+    <nav class="burger-menu">
+        <div class="navbar">
+            <div class="container nav-container">
+                <input class="checkbox" type="checkbox" name="" id="" />
+                <div class="hamburger-lines">
+                    <span class="line line1"></span>
+                    <span class="line line2"></span>
+                    <span class="line line3"></span>
+                </div>
+                <div class="menu-items">
+                    {{- partial "inline/menu/walk.html" (dict "page" $page "menuEntries" .) }}
+                </div>
+            </div>
+        </div>
+    </nav>
 {{- end }}
 
 {{- define "partials/inline/menu/walk.html" }}
@@ -33,7 +48,7 @@
                 {{- $name = . }}
             {{- end }}
         {{- end }}
-        <li>
+        <li class="menu-entry">
             <a
                 {{- range $k, $v := $attrs }}
                     {{- with $v }}