From b50c6f94b6a0161ecd83de4128d56108106e1e8d Mon Sep 17 00:00:00 2001 From: Cory Dransfeldt Date: Sun, 13 Apr 2025 17:39:46 -0700 Subject: [PATCH] feat(nav): add image/icon to header --- package-lock.json | 4 +-- package.json | 2 +- queries/views/globals/index.psql | 4 ++- src/assets/styles/base/index.css | 32 ----------------- src/assets/styles/components/header.css | 48 +++++++++++++++++++++++++ src/assets/styles/components/nav.css | 8 +++++ src/assets/styles/index.css | 1 + src/includes/layout/header.liquid | 8 +++-- 8 files changed, 69 insertions(+), 38 deletions(-) create mode 100644 src/assets/styles/components/header.css diff --git a/package-lock.json b/package-lock.json index 328f00a..4d816a4 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 436211b..f1bb264 100644 --- a/package.json +++ b/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": { diff --git a/queries/views/globals/index.psql b/queries/views/globals/index.psql index 312b691..bc7cef8 100644 --- a/queries/views/globals/index.psql +++ b/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 diff --git a/src/assets/styles/base/index.css b/src/assets/styles/base/index.css index 95ecaff..fd9d809 100644 --- a/src/assets/styles/base/index.css +++ b/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); diff --git a/src/assets/styles/components/header.css b/src/assets/styles/components/header.css new file mode 100644 index 0000000..f381c75 --- /dev/null +++ b/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); + } +} diff --git a/src/assets/styles/components/nav.css b/src/assets/styles/components/nav.css index 1fc8ba0..2ebc6e9 100644 --- a/src/assets/styles/components/nav.css +++ b/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); } diff --git a/src/assets/styles/index.css b/src/assets/styles/index.css index 2d74a03..cbf8125 100644 --- a/src/assets/styles/index.css +++ b/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); diff --git a/src/includes/layout/header.liquid b/src/includes/layout/header.liquid index 1bfabca..e547b88 100644 --- a/src/includes/layout/header.liquid +++ b/src/includes/layout/header.liquid @@ -1,9 +1,13 @@ +{%- capture headerContent -%} + + Cory Dransfeldt +{%- endcapture -%}

{%- if page.url == "/" -%} - {{ globals.site_name }} + {{ headerContent }} {%- else -%} - {{ globals.site_name }} + {{ headerContent }} {%- endif -%}

{% render "nav/menu.liquid",