feat(nav): refactor primary navigation to split labels + icons; remove redundant nav code

src/assets/styles/base/index.css

@@ -341,6 +341,7 @@ hr {
 time {
   color: var(--gray-dark);
   font-size: var(--font-size-sm);
+  line-height: var(--sizing-sm);
 }
 
 article {
@@ -458,10 +459,11 @@ td:first-of-type,
   display: flex;
   flex-direction: column;
   gap: var(--spacing-base);
+  align-items: start;
   width: var(--sizing-full);
   padding-top: var(--spacing-3xl);
 
-  @media screen and (min-width: 768px) {
+  @media screen and (min-width: 360px) {
     flex-direction: row;
     align-items: center;
     justify-content: space-between;
@@ -486,7 +488,7 @@ td:first-of-type,
 
 /* layout */
 .default-wrapper {
-  padding-top: var(--spacing-2xl);
+  padding-top: var(--spacing-base);
 }
 
 .main-wrapper {

src/assets/styles/base/vars.css

@@ -45,7 +45,7 @@
   --brand-mastodon: light-dark(#563acc, #858afa);
   --brand-npm: #cb3837;
   --brand-rss: light-dark(#c24f19, #f26522);
-  --brand-stalwart: light-dark(#db2c53, #d999a7);
+  --brand-stalwart: light-dark(#db2c53, #ff4c6a);
 
   --article: light-dark(#007272, #00ffff);
   --about: light-dark(#e4513a, #ff967d);

src/assets/styles/components/nav.css

@@ -0,0 +1,51 @@
+nav {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  padding: 0;
+  margin: 0;
+
+  .icon > span,
+  .active > span {
+    display: none;
+  }
+
+  &.primary {
+    margin-top: var(--spacing-base);
+  }
+
+  &.icons {
+    justify-content: end;
+  }
+
+  &.primary,
+  &.sub-pages {
+    gap: var(--sizing-sm);
+  }
+
+  &.social,
+  &.sub-pages {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.icons,
+  &.social {
+    gap: var(--spacing-md);
+  }
+
+  &.social {
+    margin-bottom: var(--spacing-lg);
+  }
+
+  &.primary,
+  &.social {
+    width: var(--sizing-full);
+  }
+
+  &.sub-pages {
+    font-size: var(--font-size-sm);
+    padding-bottom: var(--spacing-3xl);
+  }
+}

src/assets/styles/components/nav/footer.css

@@ -1,31 +0,0 @@
-nav {
-  &.social,
-  &.sub-pages {
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: center;
-  }
-
-  &.social {
-    gap: var(--spacing-md);
-    margin-bottom: var(--spacing-lg);
-    width: var(--sizing-full);
-
-    .icon > span,
-    .active > span {
-      display: none;
-    }
-
-    .active {
-      display: flex;
-    }
-  }
-
-  &.sub-pages {
-    font-size: var(--font-size-sm);
-    padding-bottom: var(--spacing-3xl);
-    gap: var(--sizing-sm);
-  }
-}

src/assets/styles/components/nav/primary.css

@@ -1,25 +0,0 @@
-.nav-list {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  list-style: none;
-  gap: var(--spacing-md);
-  padding: 0;
-  margin: 0;
-
-  @media screen and (min-width: 768px) {
-    justify-content: center;
-  }
-
-  & > li {
-    margin-bottom: 0;
-
-    :is(.icon, .active) svg {
-      display: block;
-    }
-
-    :is(.icon, .active) span {
-      display: none;
-    }
-  }
-}

src/assets/styles/index.css

@@ -28,8 +28,7 @@
 @import url("./components/buttons.css") layer(components);
 @import url("./components/forms.css") layer(components);
 @import url("./components/media-grid.css") layer(components);
-@import url("./components/nav/primary.css") layer(components);
-@import url("./components/nav/footer.css") layer(components);
+@import url("./components/nav.css") layer(components);
 @import url("./components/modal.css") layer(components);
 @import url("./components/music-chart.css") layer(components);
 @import url("./components/paginator.css") layer(components);

src/data/nav.js

@@ -24,6 +24,7 @@ const fetchAllNavigation = async () => {
         title: item.title || item.page_title,
         permalink: item.permalink || item.page_permalink,
         icon: item.icon,
+        section: item.section,
         sort: item.sort,
       };
 

src/includes/home/recent-activity.liquid

@@ -3,12 +3,6 @@
     {% tablericon "activity" %}
     Recent activity
   </h2>
-  <p>
-    <a href="/posts" class="article">Posts</a> •
-    <a href="/links" class="link">Links</a> •
-    <a href="/watching" class="movies">Watching</a> •
-    <a href="/books" class="books">Books</a>
-  </p>
     {%- for item in items -%}
     <article class="{{ item.type }}">
       <aside>

src/includes/layout/footer.liquid

@@ -8,12 +8,15 @@
   {%- if updateTime -%}
     <p class="updated"><em>This page was last updated on {{ updateTime | strip }}.</em></p>
   {%- endif -%}
-  {% render "nav/social.liquid",
+  {% render "nav/menu.liquid",
     page:page,
-    links:nav.footer_icons
+    nav:nav.footer_icons
+    class:"social"
   %}
-  {% render "nav/secondary.liquid",
+  {% render "nav/menu.liquid",
     page:page,
-    links:nav.footer_text
+    nav:nav.footer_text
+    class:"sub-pages"
+    separator:true
   %}
 </footer>

src/includes/layout/header.liquid

@@ -6,8 +6,15 @@
       <a href="/" tabindex="0">{{ globals.site_name }}</a>
     {%- endif -%}
   </h1>
-  {% render "nav/primary.liquid",
+  {% render "nav/menu.liquid",
     page:page,
-    nav:nav
+    nav:nav.primary_icons
+    class:"icons"
   %}
 </section>
+{% render "nav/menu.liquid",
+  page:page,
+  nav:nav.primary
+  class:"primary"
+  separator:true
+%}

src/includes/nav/link.liquid

@@ -14,7 +14,7 @@
   </span>
 {%- else -%}
   <a
-    class="{% if link.icon %}{{ link.icon | downcase }} icon {% endif %}{{ link.class }}"
+    class="{% if link.section %}{{ link.section | downcase }} {% endif %}{% if link.icon %}{{ link.icon | downcase }} icon {% endif %}{{ link.class }}"
     href="{{ categoryUrl }}"
     {% if isHttp -%} rel="me" {%- endif %}
     title="{{ link.title }}"

src/includes/nav/menu.liquid

@@ -0,0 +1,11 @@
+<nav class="{{ class }}">
+  {%- for link in nav -%}
+    {% render "nav/link.liquid",
+      page:page,
+      link:link
+    %}
+    {%- if separator -%}
+      {% unless forloop.last %}<span>•</span>{% endunless %}
+    {%- endif -%}
+  {%- endfor -%}
+</nav>

src/includes/nav/primary.liquid

@@ -1,12 +0,0 @@
-<nav class="primary-navigation">
-  <ul class="nav-list">
-    {%- for link in nav.primary -%}
-      <li>
-        {% render "nav/link.liquid",
-          page:page,
-          link:link
-        %}
-      </li>
-    {%- endfor -%}
-  </ul>
-</nav>

src/includes/nav/secondary.liquid

@@ -1,9 +0,0 @@
-<nav aria-label="Secondary site navigation" class="sub-pages">
-  {%- for link in links -%}
-    {% render "nav/link.liquid",
-      page:page,
-      link:link
-    %}
-    {% unless forloop.last %}<span>•</span>{% endunless %}
-  {%- endfor -%}
-</nav>

src/includes/nav/social.liquid

@@ -1,8 +0,0 @@
-<nav aria-label="Social icons" class="social">
-  {%- for link in links -%}
-    {% render "nav/link.liquid",
-      page:page,
-      link:link
-    %}
-  {%- endfor -%}
-</nav>