add mobile header / collapsible nav menu

_includes/header.css

@@ -2,9 +2,9 @@ header {
   display: flex;
   position: sticky;
   top: 0;
-  min-height: 9rem;
   padding: 2rem 0;
   backdrop-filter: blur(5px);
+  -webkit-backdrop-filter: blur(5px);
   background-color: var(--color-background-header);
   box-shadow: 0 3px 15px hsla(0,0%,39.2%,.12);
 }
@@ -12,7 +12,12 @@ header {
 .header-container {
   display: flex;
   justify-content: space-between;
-  align-items: center;
+}
+
+@media (width >= 1024px) {
+  .header-container {
+    align-items: center;
+  }
 }
 
 #header-logo img {
@@ -20,6 +25,15 @@ header {
   display: block;
 }
 
+@media (width < 1024px) {
+  header {
+    padding: 1.5rem 0;
+  }
+  #header-logo img {
+    max-height: 48px;
+  }
+}
+
 #mainNav ul {
   margin: 0;
   padding: 0;
@@ -53,15 +67,7 @@ header {
   transition: opacity .3s ease-out;
 }
 
-.nav-item:hover::after,
-.nav-item.active::after {
-  opacity: 1;
-}
-
 .nav-item-stream {
-  padding: .75rem 1.4rem;
-  border: 2px solid var(--color-primary);
-  border-radius: 3rem;
   color: var(--color-primary);
   font-family: Aileron;
   font-weight: 500;
@@ -72,7 +78,100 @@ header {
   transition-property: color, background-color;
 }
 
-.nav-item-stream:hover {
-  color: var(--color-livestream-active);
-  background-color: var(--color-primary);
+@media (width >= 1024px) {
+  .nav-item:hover::after,
+  .nav-item.active::after {
+    opacity: 1;
+  }
+  .nav-item-stream {
+    padding: .75rem 1.4rem;
+    border: 2px solid var(--color-primary);
+    border-radius: 3rem;
+  }
+  .nav-item-stream:hover {
+    color: var(--color-livestream-active);
+    background-color: var(--color-primary);
+  }
+}
+
+#menu-toggle {
+  display: none;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: .7rem;
+  /* same height as logo */
+  width: 48px;
+  height: 48px;
+}
+
+#menu-toggle .icon {
+  fill: var(--color-text);
+  transition: fill .2s ease-out;
+}
+
+#mainNav.open #menu-toggle .icon,
+#menu-toggle:hover .icon {
+  fill: var(--color-primary);
+}
+
+#header-veil {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  right: 0;
+  height: 100vh;
+  background-color: rgba(0,0,0,.5);
+  opacity: 0;
+  transition: opacity .4s ease;
+  pointer-events: none;
+}
+
+@media (width < 1024px) {
+  #menu-toggle {
+    display: block;
+  }
+  #mainNav {
+    display: flex;
+    flex-direction: column;
+    align-items: end;
+    overflow: hidden;
+  }
+  #mainNav ul {
+    transition: .4s ease;
+    transition-property: max-height, visibility;
+    max-height: 0;
+    visibility: hidden;
+  }
+  #mainNav.open ul {
+    max-height: 100vh;
+    visibility: visible;
+    transition-property: max-height;
+  }
+  #mainNav li {
+    display: block;
+    text-align: right;
+  }
+  .nav-item,
+  .nav-item-stream {
+    padding: .7rem .7rem;
+    display: block;
+    transition: text-decoration-color .3s ease-out;
+    text-decoration: 2px underline rgba(0,0,0,0);
+  }
+  .nav-item.active {
+    color: var(--color-primary);
+  }
+  .nav-item:hover,
+  .nav-item-stream:hover {
+    text-decoration-color: var(--color-primary);
+  }
+  /* prevent page scrolling */
+  .noscroll {
+    overflow: hidden;
+  }
+  #header-veil:has(+ .header-container #mainNav.open) {
+    opacity: 1;
+    pointer-events: auto;
+  }
 }