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

src/assets/styles/base/index.css

@@ -239,13 +239,14 @@ a {
   transition: color var(--transition-duration-default) var(--transition-ease-in-out),
     text-underline-offset var(--transition-duration-default) var(--transition-ease-in-out);
 
-  img {
+  img:not(.icon) {
     border: var(--border-default);
     filter: var(--filter-image-default);
     transition: filter var(--transition-duration-default) var(--transition-ease-in-out);
   }
 
-  svg {
+  svg,
+  .icon {
     transform: var(--transform-icon-default);
   }
 
@@ -266,7 +267,7 @@ a {
     color: var(--link-color-hover);
     text-underline-offset: var(--underline-offset-hover);
 
-    img {
+    img:not(.icon) {
       filter: var(--filter-image-light);
 
       @media (prefers-color-scheme: dark) {
@@ -274,7 +275,8 @@ a {
       }
     }
 
-    svg {
+    svg,
+    .icon {
       transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
       transform: var(--transform-icon-tilt);
     }
@@ -341,6 +343,7 @@ hr {
 time {
   color: var(--gray-dark);
   font-size: var(--font-size-sm);
+  line-height: var(--sizing-sm);
 }
 
 article {
@@ -453,40 +456,9 @@ td:first-of-type,
   border-inline-start: none;
 }
 
-/* header */
-.main-title {
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-base);
-  width: var(--sizing-full);
-  padding-top: var(--spacing-3xl);
-
-  @media screen and (min-width: 768px) {
-    flex-direction: row;
-    align-items: center;
-    justify-content: space-between;
-    gap: 0;
-  }
-
-  h1 {
-    margin: 0;
-    padding: 0;
-    white-space: nowrap;
-  }
-}
-
-/* nav */
-.active,
-.active svg {
-  --icon-color: var(--accent-color-active);
-
-  cursor: not-allowed;
-  color: var(--accent-color-active);
-}
-
 /* 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);
@@ -59,7 +59,7 @@
   --music: light-dark(#3d7099, #76b8cc);
   --newsletter: light-dark(#37b0b0, #91fffa);
   --now: light-dark(#cc1076, #ff82d5);
-  --search: light-dark(#6b5e3a, #c0b594);
+  --search: light-dark(#007c9d, #3fd9ff);
   --tattoo: light-dark(#951b1b, #ff7373);
   --tv: light-dark(#cc3600, #d65f2b);
   --warning: light-dark(#cc6f00, #ffbf66);
@@ -94,6 +94,7 @@
 
   --underline-offset-default: 3px;
   --underline-offset-hover: 5px;
+  --button-offset-hover: 2px;
 
   /* sizing */
   --sizing-xs: 0.25rem;

src/assets/styles/components/buttons.css

@@ -4,23 +4,27 @@
 button:not([data-modal-button]),
 .button {
   appearance: none;
-  border: 2px solid var(--accent-color);
-  border-radius: var(--border-radius-full);
+  border: 2px solid var(--section-color, var(--accent-color));
+  border-radius: var(--border-radius-slight);
   padding: var(--spacing-xs) var(--spacing-md);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
-  line-height: var(--line-height-base);
+  line-height: var(--line-height-md);
+  text-align: center;
+  text-decoration: none;
   white-space: nowrap;
+  text-overflow: ellipsis;
+  overflow: hidden;
   color: var(--text-color-inverted);
-  background-color: var(--accent-color);
-  transition: color var(--transition-duration-default) var(--transition-ease-in-out);
+  background-color: var(--section-color, var(--accent-color));
+  transition: var(--transition-duration-default) var(--transition-ease-in-out);
 
   &:not(.active):is(:hover, :active, :focus, :focus-within) {
-    background-color: var(--accent-color-hover);
-    border: 2px solid var(--accent-color-hover);
-    transition:
-      background-color var(--transition-duration-default) var(--transition-ease-in-out),
-      border var(--transition-duration-default) var(--transition-ease-in-out),
-      color var(--transition-duration-default) var(--transition-ease-in-out);
+    transform: translateY(var(--button-offset-hover));
+  }
+
+  &.active {
+    background: transparent;
+    color: var(--accent-color);
   }
 }

src/assets/styles/components/forms.css

@@ -26,6 +26,10 @@ textarea {
 
 textarea {
   resize: vertical;
+
+  &:has(+ button) {
+    margin-bottom: var(--sizing-md);
+  }
 }
 
 .search__form {

src/assets/styles/components/header.css

@@ -0,0 +1,40 @@
+.main-title {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  gap: 0;
+  align-items: center;
+  width: var(--sizing-full);
+  padding-top: var(--spacing-3xl);
+
+  h1,
+  h1 a {
+    margin: 0;
+    padding: 0;
+    white-space: nowrap;
+    display: flex;
+    align-items: center;
+    gap: var(--spacing-sm);
+
+    img {
+      max-width: calc(var(--sizing-3xl) * 1.25);
+    }
+
+    span {
+      display: none;
+    }
+
+    @media screen and (min-width: 280px) {
+      span:first-of-type {
+        display: inline;
+      }
+    }
+
+    @media screen and (min-width: 480px) {
+      span:last-of-type {
+        display: inline;
+      }
+    }
+  }
+}

src/assets/styles/components/nav.css

@@ -0,0 +1,65 @@
+nav {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  gap: var(--spacing-md);
+  padding: 0;
+  margin: 0;
+
+  .icon > span,
+  .active > span {
+    display: none;
+  }
+
+  .active,
+  .active svg {
+    --icon-color: var(--accent-color-active);
+
+    cursor: not-allowed;
+    color: var(--accent-color-active);
+  }
+
+  &.primary {
+    margin-top: var(--spacing-base);
+    display: grid;
+    grid-template-columns: var(--grid-columns-three);
+
+    @media screen and (min-width: 768px) {
+      grid-template-columns: var(--grid-columns-six);
+    }
+  }
+
+  &.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/components/tab-buttons.css

@@ -32,3 +32,7 @@ input[id="tracks-chart"] ~ .tracks-chart {
 #tracks-chart:not(:checked) ~ [for="tracks-chart"]:is(:hover, :active) {
   color: var(--accent-color-hover);
 }
+
+[for="tracks-recent"] {
+  margin-right: var(--sizing-xs);
+}

src/assets/styles/index.css

@@ -27,9 +27,9 @@
 @import url("./components/banners.css") layer(components);
 @import url("./components/buttons.css") layer(components);
 @import url("./components/forms.css") layer(components);
+@import url("./components/header.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

@@ -1,13 +1,23 @@
+{%- capture headerContent -%}
+  <img class="icon" src="{{ globals.cdn_url }}{{ globals.avatar_header }}?class=w200&v={% appVersion %}" alt"{{ globals.site_name }}" />
+  <span>Cory</span> <span>Dransfeldt</span>
+{%- endcapture -%}
 <section class="main-title">
   <h1>
     {%- if page.url == "/" -%}
-      {{ globals.site_name }}
+      {{ headerContent }}
     {%- else -%}
-      <a href="/" tabindex="0">{{ globals.site_name }}</a>
+      <a href="/" tabindex="0">{{ headerContent }}</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"
+%}

src/includes/nav/link.liquid

@@ -1,8 +1,12 @@
 {%- assign categoryUrl = link.permalink | downcase -%}
 {%- assign isHttp = categoryUrl contains "http" -%}
 {%- if categoryUrl | isLinkActive:page.url -%}
+{%- capture linkClass -%}
+  {%- if link.section -%}button{%- endif -%}
+  {%- if link.icon -%}icon{%- endif -%}
+{%- endcapture -%}
   <span
-    class="active {{ link.class }}"
+    class="active {{ linkClass }}"
     aria-current="page"
   >
     {%- if link.icon -%}
@@ -14,7 +18,7 @@
   </span>
 {%- else -%}
   <a
-    class="{% if link.icon %}{{ link.icon | downcase }} icon {% endif %}{{ link.class }}"
+    class="{% if link.section %}{{ link.section | downcase }} button {% endif %}{% if link.icon %}{{ link.icon | downcase }} icon {% endif %}"
     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>