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 {