feat(nav): add image/icon to header

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "coryd.dev",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "coryd.dev",
-      "version": "1.4.0",
+      "version": "1.5.0",
       "license": "MIT",
       "dependencies": {
         "minisearch": "^7.1.2",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "coryd.dev",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "The source for my personal site. Built using 11ty (and other tools).",
   "type": "module",
   "engines": {

queries/views/globals/index.psql

@@ -16,8 +16,10 @@ SELECT
   g.webfinger_username,
   g.webfinger_hostname,
   CONCAT('/', df.filename_disk) AS avatar,
-  CONCAT('/', df2.filename_disk) AS avatar_transparent
+  CONCAT('/', df2.filename_disk) AS avatar_transparent,
+  CONCAT('/', df3.filename_disk) AS avatar_header
 FROM
   globals g
   LEFT JOIN directus_files df ON g.avatar = df.id
   LEFT JOIN directus_files df2 ON g.avatar_transparent = df2.id
+  LEFT JOIN directus_files df3 ON g.avatar_header = df3.id

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

src/includes/layout/header.liquid

@@ -1,9 +1,13 @@
+{%- capture headerContent -%}
+  <img 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/menu.liquid",