From 32c6db337716ffc1905c5ee823443b07a19c23ed Mon Sep 17 00:00:00 2001
From: Alexis Fourmaux <fourmaux.alexis.perso@ungol.fr>
Date: Fri, 16 May 2025 18:04:24 +0200
Subject: [PATCH] feat: improve header for responsive design

---
 sass/parts/_navbar.scss | 83 ++++++++++++++++++++++++-----------------
 1 file changed, 48 insertions(+), 35 deletions(-)

diff --git a/sass/parts/_navbar.scss b/sass/parts/_navbar.scss
index 07c9a7a..fd328cb 100644
--- a/sass/parts/_navbar.scss
+++ b/sass/parts/_navbar.scss
@@ -19,16 +19,21 @@ header {
 }
 
 nav {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    flex-wrap: wrap;
-    flex-direction: row;
     max-width: var(--main-width);
     margin: 0 auto;
 
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    ul {
+        list-style: none;
+        padding: 0;
+    }
+
     .home-title {
         flex: 3 auto;
+        text-transform: uppercase;
         font-size: 2.5rem;
         font-weight: 100;
         text-transform: uppercase;
@@ -37,39 +42,47 @@ nav {
 
     .nav-bar {
         flex: 1 auto;
-        @include header_link(var(--text), var(--subtext0));
+        @include header_link(var(--subtext1), var(--subtext0));
+        font-size: 1.2rem;
+        text-transform: lowercase;
+    }
 
-        ul {
-            padding: 0;
-            display: flex;
-            align-items: center;
-            list-style: none;
+    .nav-links {
+        display: flex;
+        justify-content: space-between;
+        flex-wrap: wrap;
+        margin-top: 0;
+        margin-bottom: 0;
+
+        li {
+            flex: 2 auto;
+            text-align: center;
+        }
+    }
+
+    li.menu-icons-container {
+        flex: 1 auto;
+    }
+
+    .menu-icons-group {
+        display: flex;
+        justify-content: space-between;
+    }
+}
+
+@media only screen and (max-width: 600px) {
+    nav {
+        max-width: 100%;
+        flex-direction: column;
+        align-items: normal;
+        margin: 0;
+
+        .nav-bar {
+            background-color: var(--mantle);
         }
 
-        .nav-links {
-            margin-top: 0;
-            margin-bottom: 0;
-            font-size: 1.2rem;
-            text-transform: lowercase;
-
-            flex-wrap: wrap;
-            flex-direction: row;
-            justify-content: space-between;
-
-            li {
-                flex: 2 auto;
-                text-align: center;
-            }
-
-            .menu-icons-container {
-                flex: 1 auto;
-            }
-
-            .menu-icons-group {
-                color: var(--text);
-                justify-content: space-around;
-            }
+        .home-title {
+            text-align: center;
         }
-
     }
 }
\ No newline at end of file