feat(nav): add image/icon to header

src/assets/styles/base/index.css

@@ -454,38 +454,6 @@ td:first-of-type,
   border-inline-start: none;
 }
 
-/* header */
-.main-title {
-  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: 360px) {
-    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-base);

src/assets/styles/components/header.css

@@ -0,0 +1,48 @@
+.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);
+      transform: var(--transform-icon-default);
+      border: none;
+      filter: none;
+    }
+
+    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;
+      }
+    }
+  }
+
+  h1 a:is(:hover, :focus, :active) img {
+    transition: transform var(--transition-duration-default) var(--transition-ease-in-out);
+    transform: var(--transform-icon-tilt);
+  }
+}

src/assets/styles/components/nav.css

@@ -11,6 +11,14 @@ nav {
     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);
   }

src/assets/styles/index.css

@@ -27,6 +27,7 @@
 @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.css") layer(components);
 @import url("./components/modal.css") layer(components);