header/nav layout shifts

src/assets/styles/components/_header.scss

@@ -5,31 +5,36 @@ header {
 #header--container {
     width: 90%;
     max-width: var(--max-width);
-  padding: var(--s0) 0;
+    padding: var(--s1) 0;
     margin: 0 auto;
 
     display: flex;
-  flex-direction: row;
+    flex-direction: column;
     flex-wrap: wrap;
-  justify-content: space-between;
+    align-items: left;
-  align-items: center;
 
     color: var(--text);
-
-  & a {
-    color: var(--text);
-    text-decoration: none;
-    &:hover {
-      text-decoration: underline;
-    }
-  }
   }
   
   #header--title a {
-  font-size: var(--s2);
+    font-size: var(--s3);
-  font-weight: 500;
+    font-weight: 200;
-  &:hover {
+    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;
+}
 
+@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 {
+nav ul {
-  & ul {
+    padding: 0;
-    list-style-type: none;
+    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;
+        }
+    }
+}
 
+.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>
+                <a class="{% if Current or Parent %}nav--active{% endif %}" href="{{ item.url }}" title="{{ item.title }}">
                     {{ item.name }}
-            </li>
                 </a>
+            </li>
+            {%- endif -%}
         {%- endfor -%}
     </ul>
 </nav>