From 4676b8de32435e13e6f789beb624d041bd8a394e Mon Sep 17 00:00:00 2001 From: Graham Hall Date: Sat, 30 Aug 2025 22:09:31 -0400 Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20More=20visual=20tweaks=20for=20h?= =?UTF-8?q?eader?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/svg/bars.svg | 2 +- src/assets/svg/bluesky.svg | 2 +- src/assets/svg/xmark.svg | 2 +- src/components/Header/Drawer.astro | 61 ++++++++++++++++-------------- src/components/Header/Header.astro | 2 +- src/components/Header/Nav.astro | 29 +++++++++++--- src/global.css | 5 --- 7 files changed, 60 insertions(+), 43 deletions(-) diff --git a/src/assets/svg/bars.svg b/src/assets/svg/bars.svg index 998b141..42e6ae2 100644 --- a/src/assets/svg/bars.svg +++ b/src/assets/svg/bars.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/svg/bluesky.svg b/src/assets/svg/bluesky.svg index 0f25b8b..d6de3e8 100644 --- a/src/assets/svg/bluesky.svg +++ b/src/assets/svg/bluesky.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/assets/svg/xmark.svg b/src/assets/svg/xmark.svg index b3c5fe5..66a568d 100644 --- a/src/assets/svg/xmark.svg +++ b/src/assets/svg/xmark.svg @@ -1 +1 @@ - \ No newline at end of file + diff --git a/src/components/Header/Drawer.astro b/src/components/Header/Drawer.astro index 02e671d..b433cfb 100644 --- a/src/components/Header/Drawer.astro +++ b/src/components/Header/Drawer.astro @@ -31,32 +31,24 @@ import { navLinks } from '../../data/nav-links'; x-transition:leave-start="visible-drawer" x-transition:leave-end="hidden-drawer" > - -
- +
+ +
+ diff --git a/src/components/Header/Header.astro b/src/components/Header/Header.astro index 26fbcf3..b355b38 100644 --- a/src/components/Header/Header.astro +++ b/src/components/Header/Header.astro @@ -31,7 +31,7 @@ import Drawer from './Drawer.astro'; align-items: center; max-width: var(--max-page-width); margin: auto; - padding: 0 10px; + padding: 0 16px; height: 100%; } diff --git a/src/components/Header/Nav.astro b/src/components/Header/Nav.astro index a067ccd..1bfe8fe 100644 --- a/src/components/Header/Nav.astro +++ b/src/components/Header/Nav.astro @@ -10,10 +10,12 @@ const pathComponents = pathname.split('/').slice(1); { navLinks.map((link) => (
  • - - {link.label} + + {link.label} - {pathComponents[0] === link.path ?
    : null}
    • )) } @@ -24,13 +26,21 @@ const pathComponents = pathname.split('/').slice(1); display: flex; flex-direction: row; list-style: none; - gap: 20px; + gap: 10px; font-size: 1.15rem; font-weight: 600; } + a { + color: var(--text); + padding: 5px 10px; + border-radius: var(--radius); + transition: background-color 0.2s ease-in-out; + } + a:hover { - text-decoration: none; + background-color: rgba(0, 0, 0, 0.04); + opacity: 1; } .selected { @@ -42,9 +52,16 @@ const pathComponents = pathname.split('/').slice(1); background-color: var(--orange); } - @media screen and (max-width: 600px) { + @media screen and (max-width: 768px) { nav { display: none; } } + + @media (prefers-color-scheme: dark) { + a:hover { + background-color: rgba(231, 237, 255, 0.1); + opacity: 1; + } + } diff --git a/src/global.css b/src/global.css index 092a42b..492f29d 100644 --- a/src/global.css +++ b/src/global.css @@ -18,7 +18,6 @@ --text: #4c4f69; --background: #fcfcfc; --radius: 5px; - --shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; --border: 1px solid #ced3f1; --max-page-width: 800px; } @@ -70,16 +69,12 @@ main p { article img { border-radius: var(--radius); - box-shadow: var(--shadow); display: block; margin: auto; max-width: var(--max-page-width); height: auto; } -.no-shadow { - box-shadow: none; -} .footnotes { font-size: 1rem; }