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);