header/nav layout shifts

src/assets/styles/components/_header.scss

@@ -1,35 +1,40 @@
 header {
-  min-width: 100%;
+    min-width: 100%;
 }
 
 #header--container {
-  width: 90%;
-  max-width: var(--max-width);
-  padding: var(--s0) 0;
-  margin: 0 auto;
-  
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: space-between;
-  align-items: center;
-  
-  color: var(--text);
+    width: 90%;
+    max-width: var(--max-width);
+    padding: var(--s1) 0;
+    margin: 0 auto;
+
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    align-items: left;
 
-  & a {
     color: var(--text);
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
   }
+  
+  #header--title a {
+    font-size: var(--s3);
+    font-weight: 200;
+    background: linear-gradient(
+      to right,
+      var(--text),
+      var(--text) 63%,
+      var(--link-color) 63%
+      );
+      background-clip: text;
+      -webkit-background-clip: text;
+      -webkit-text-fill-color: transparent;
+      text-decoration: none;
 }
 
-#header--title a {
-  font-size: var(--s2);
-  font-weight: 500;
-  &:hover {
-    text-decoration: none;
-
-  }
-}
+@media screen and (min-width: 48rem) {
+    #header--container {
+        flex-direction: row;
+        justify-content: space-between;
+        align-items: center;
+    }
+}

src/assets/styles/components/_nav.scss

@@ -1,10 +1,30 @@
-nav {
-  & ul {
-    list-style-type: none;
+nav ul {
+    padding: 0;
+    display: block;
     display: flex;
     flex-direction: row;
-    gap: var(--s0);
+    flex-wrap: wrap;
+    list-style-type: none;
+    gap: var(--s0) var(--s2);
+    font-size: var(--s0);
+    & li::before {
+        content: '\200B';
+    }
+    & li a {
+        color: var(--text);
+        text-decoration: none;
+        &:hover {
+            text-decoration: underline;
+        }
+    }
+}
 
-    font-size: var(--s1);
-  }
-}
+.nav--active {
+    text-decoration: underline;
+}
+
+@media screen and (min-width: 48rem) {
+    nav ul {
+        font-size: var(--s1);
+    }
+}

src/includes/partials/nav.njk

@@ -1,11 +1,15 @@
 <nav>
     <ul>
         {%- for item in nav.items -%}
-        <a href="{{ item.url }}" title="{{ item.title }}">
+        {%- if item.url -%}
+            {%- set Current = (item.url == page.url) -%}
+            {%- set Parent = item.url != '/' and item.url in page.url -%}
             <li>
-                {{ item.name }}
+                <a class="{% if Current or Parent %}nav--active{% endif %}" href="{{ item.url }}" title="{{ item.title }}">
+                    {{ item.name }}
+                </a>
             </li>
-        </a>
+            {%- endif -%}
         {%- endfor -%}
     </ul>
 </nav>