responsive: wip navbar

static/style.css

@@ -20,11 +20,12 @@ body {
   background-image: url(assets/images/tiledbgpink.webp);
   background-size: cover;
   background-position: center;
-  height: 100lvh;
+  min-height: 100lvh;
   width: 100lvw;
   overflow: auto;
   font-family: "DotGothic16",
     sans-serif;
+  font-size: 16px;
 
   main {
     padding-top: 8rem;
@@ -92,17 +93,57 @@ miniplayer-container {
 /* Navbar */
 navbar {
   font-family: "VT323", monospace;
-  font-size: 1.5rem;
+  font-size: clamp(1.25rem, 4svw, 1.5rem);
   display: flex;
   flex-direction: column;
   width: 100%;
+  position: relative;
+
+  #nav-toggle-checkbox {
+    display: none;
+  }
+
+  navbar-toggle {
+    display: none;
+    padding: 0.5rem;
+    background-color: var(--win-bg-grey);
+
+    .hamburger {
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+      cursor: pointer;
+      width: 30px;
+
+      span {
+        display: block;
+        height: 3px;
+        background: #000;
+        transition: all 0.3s ease;
+      }
+    }
+
+    &:has(#nav-toggle-checkbox:checked) {
+      .hamburger span:nth-child(1) {
+        transform: translateY(7px) rotate(45deg);
+      }
+
+      .hamburger span:nth-child(2) {
+        opacity: 0;
+      }
+
+      .hamburger span:nth-child(3) {
+        transform: translateY(-7px) rotate(-45deg);
+      }
+    }
+  }
 
   navbar-content {
     display: flex;
     gap: 0.3rem;
-    padding: 0.5rem 0;
-    padding-left: 0.5rem;
+    padding: 0.5rem;
     background-color: var(--win-bg-grey);
+    flex-wrap: wrap;
 
     input {
       opacity: 0;
@@ -199,12 +240,13 @@ mini-player {
   display: block;
   position: relative;
   z-index: 100;
-  width: min(240px, 100svw);
+  width: min(240px, 90svw);
   background-color: var(--win-bg-grey);
   border: 2px solid;
   border-color: #ffffff #808080 #808080 #ffffff;
   box-shadow: 2px 2px 0 #000;
   transition: opacity 0.3s, translate 0.3s;
+  font-size: clamp(0.625rem, 2svw, 0.75rem);
 
   ominous-message {
     display: block;
@@ -366,4 +408,82 @@ mini-player {
   audio {
     display: none;
   }
+}
+
+/* Responsive... */
+@media (max-width: 480px) {
+  body {
+    main {
+      padding-top: 6rem;
+    }
+  }
+
+  navbar {
+    font-size: 1.125rem;
+
+    navbar-toggle {
+      display: block;
+    }
+
+    #nav-toggle-checkbox {
+      display: none;
+    }
+
+    navbar-content {
+      display: none;
+      flex-direction: column;
+      gap: 0;
+      padding: 0;
+      width: 100%;
+      position: absolute;
+      top: 100%;
+      left: 0;
+      background-color: var(--win-bg-grey);
+      border-top: 2px solid #000;
+      z-index: 101;
+
+      a {
+        padding: 1rem 0.5rem;
+        border-bottom: 1px solid #808080;
+        width: 100%;
+        box-sizing: border-box;
+      }
+
+      input {
+        display: none;
+      }
+    }
+
+    &:has(#nav-toggle-checkbox:checked) {
+      navbar-content {
+        display: flex;
+        z-index: 999;
+      }
+    }
+
+    pink-statusbar {
+      display: none;
+    }
+  }
+
+  mini-player {
+    width: 95svw;
+    max-width: 280px;
+
+    title-bar {
+      track-info {
+        max-width: 50%;
+      }
+    }
+
+    controls-bar {
+      volume-controls {
+        display: none;
+      }
+    }
+  }
+
+  .progress-input {
+    width: 85%;
+  }
 }

templates/base.html

@@ -53,12 +53,18 @@
         }
       }
 
+      function closeMobileMenu() {
+        const checkbox = document.getElementById('nav-toggle-checkbox');
+        if (checkbox) checkbox.checked = false;
+      }
+
       updateMiniplayerVisibility();
       updateNavState();
 
       document.body.addEventListener('htmx:afterSwap', () => {
         updateMiniplayerVisibility();
         updateNavState();
+        closeMobileMenu();
         window.scrollTo(0, 0);
       });
     </script>

templates/partials/header.html

@@ -1,11 +1,19 @@
 <navbar>
+  <input type="checkbox" id="nav-toggle-checkbox">
+  <navbar-toggle>
+    <label for="nav-toggle-checkbox" class="hamburger">
+      <span></span>
+      <span></span>
+      <span></span>
+    </label>
+  </navbar-toggle>
   <navbar-content>
     <a href="/">Home</a>
     <input type="radio" name="nav" id="nav-home" checked>
     <a href="/about">About me</a>
-    <input type="radio" name="nav" id="nav-home" checked>
+    <input type="radio" name="nav" id="nav-about">
     <a href="/projects">Projects</a>
-    <input type="radio" name="nav" id="nav-home" checked>
+    <input type="radio" name="nav" id="nav-projects">
     <a href="/music">Music</a>
     <input type="radio" name="nav" id="nav-music">
   </navbar-content>