Add header

Signed-off-by: Nikolaos Karaolidis <nick@karaolidis.com>
2025-08-06 09:14:59 +02:00
parent 94733181ba
commit 44e00b55cf
9 changed files with 330 additions and 0 deletions
--- a/assets/sass/header.scss
+++ b/assets/sass/header.scss
@@ -0,0 +1,130 @@
+.header {
+  padding: 2rem;
+
+  .header-container {
+    max-width: $maxwidth;
+    width: 100%;
+    margin: 0 auto;
+
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    align-items: center;
+
+    .site-title {
+      font-size: 1.5rem;
+
+      a {
+        text-decoration: none;
+        color: inherit;
+      }
+    }
+
+    .nav {
+      ul {
+        display: flex;
+        gap: 2.5rem;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+
+        li a {
+          font-size: 0.85rem;
+          text-decoration: none;
+          color: inherit;
+          display: block;
+        }
+      }
+    }
+
+    .nav-toggle {
+      display: none;
+    }
+
+    .nav-toggle-label {
+      display: none;
+    }
+  }
+}
+
+@media (max-width: $mobilewidth) {
+  $nav-toggle-label-height: 0.75rem;
+  $nav-toggle-label-width: 1.5rem;
+  $nav-toggle-span-height: 0.125rem;
+
+  .header {
+    padding: 1rem;
+
+    .header-container {
+      .site-title {
+        z-index: 1;
+      }
+
+      .nav {
+        position: fixed;
+        inset: 0;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+
+        opacity: 0;
+        background: $color-bg;
+        transition: opacity 0.3s ease;
+
+        pointer-events: none;
+
+        ul {
+          flex-direction: column;
+          align-items: center;
+          gap: 2rem;
+
+          li a {
+            font-size: 1.25rem;
+          }
+        }
+      }
+
+      .nav-toggle-label {
+        z-index: 1;
+
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+
+        width: $nav-toggle-label-width;
+        height: $nav-toggle-label-height;
+        cursor: pointer;
+
+        span {
+          display: block;
+          height: $nav-toggle-span-height;
+          width: 100%;
+          border-radius: 1px;
+          background: currentColor;
+          transition:
+            transform 0.3s ease,
+            opacity 0.3s ease;
+        }
+      }
+
+      .nav-toggle:checked + .nav-toggle-label + .nav {
+        opacity: 1;
+        pointer-events: auto;
+      }
+
+      $translate-distance: (
+          $nav-toggle-label-height - $nav-toggle-span-height
+        ) /
+        2;
+
+      .nav-toggle:checked + .nav-toggle-label span:nth-child(1) {
+        transform: translateY($translate-distance) rotate(45deg);
+      }
+
+      .nav-toggle:checked + .nav-toggle-label span:nth-child(2) {
+        transform: translateY(-$translate-distance) rotate(-45deg);
+      }
+    }
+  }
+}