From c4dc0feb2305d74e2bbdfaf9ff9e752defa075bc Mon Sep 17 00:00:00 2001 From: Paul Bakaus Date: Wed, 8 Apr 2026 09:03:13 -0700 Subject: [PATCH] Polish the site header based on user feedback - Kill double underlines on nav items and brand: scope '.site-header a { text-decoration: none }' more specifically so the page-level 'a' rule in main.css can't bleed through - Add an inline SVG logo mark next to the 'Impeccable' wordmark (reuses the favicon.svg glyph, inlined so Bun's HTML loader doesn't try to bundle '/favicon.svg' from a non-relative path) - Add a subtle GitHub star pill (icon + 17k + small star) at the far right of the header; replaces the bare 'GitHub' nav text link - Remove the duplicate .github-link floater from the hero on the landing page; the header pill is the single place for the stars signal now - Mobile: stop nav items from wrapping mid-word; lower the breakpoint to 820px; enable horizontal scroll with a mask fade on the right; hide the 'Home' link on mobile (the brand is already the home link); hide the brand wordmark below 480px (logo glyph alone); hide the 17k label inside the github pill on mobile (keep the icon + star) --- content/site/partials/header.html | 23 ++++--- public/cheatsheet.html | 23 ++++--- public/css/sub-pages.css | 110 +++++++++++++++++++++++++++--- public/gallery.html | 23 ++++--- public/index.html | 27 ++++---- public/privacy.html | 23 ++++--- 6 files changed, 176 insertions(+), 53 deletions(-) diff --git a/content/site/partials/header.html b/content/site/partials/header.html index 1d1e1b4bd..2a9963836 100644 --- a/content/site/partials/header.html +++ b/content/site/partials/header.html @@ -1,14 +1,21 @@
+ Impeccable - +
+ + + + 17k + + +
diff --git a/public/cheatsheet.html b/public/cheatsheet.html index 9d60822e6..f49521c72 100644 --- a/public/cheatsheet.html +++ b/public/cheatsheet.html @@ -168,16 +168,23 @@
+ Impeccable - +
+ + + + 17k + + +
diff --git a/public/css/sub-pages.css b/public/css/sub-pages.css index 02f027229..f9c3108e8 100644 --- a/public/css/sub-pages.css +++ b/public/css/sub-pages.css @@ -42,20 +42,27 @@ a { display: flex; align-items: center; justify-content: space-between; - gap: var(--spacing-lg); - padding: 18px clamp(var(--spacing-md), 4vw, var(--spacing-2xl)); + gap: var(--spacing-md); + padding: 14px clamp(var(--spacing-md), 4vw, var(--spacing-2xl)); background: color-mix(in oklch, var(--color-paper) 94%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); border-bottom: 1px solid var(--color-mist); } +/* Kill any inherited text-decoration from page-level `a` rules. */ +.site-header a, +.site-header a:hover { + text-decoration: none; + text-decoration-thickness: 0; +} + .site-header-brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-display); - font-size: 1.375rem; + font-size: 1.25rem; font-weight: 600; letter-spacing: -0.01em; color: var(--color-ink); @@ -67,21 +74,38 @@ a { color: var(--color-accent); } +.site-header-brand-logo { + width: 26px; + height: 26px; + border-radius: 6px; + flex-shrink: 0; +} + .site-header-brand-name { display: inline-block; } +.site-header-right { + display: flex; + align-items: center; + gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md)); + min-width: 0; +} + .site-header-nav { display: flex; align-items: center; - gap: clamp(var(--spacing-sm), 2vw, var(--spacing-lg)); + gap: clamp(var(--spacing-sm), 2vw, var(--spacing-md)); font-family: var(--font-body); font-size: 0.9375rem; font-weight: 500; + min-width: 0; } .site-header-nav a { position: relative; + display: inline-block; + white-space: nowrap; color: var(--color-charcoal); padding: 4px 0; transition: color var(--duration-fast) var(--ease-out); @@ -101,20 +125,68 @@ a { position: absolute; left: 0; right: 0; - bottom: -6px; + bottom: -4px; height: 2px; background: var(--color-accent); border-radius: 2px; } -@media (max-width: 720px) { +/* GitHub star pill — subtle, inviting nudge without shouting */ +.site-header-github { + display: inline-flex; + align-items: center; + gap: 6px; + padding: 4px 10px 4px 8px; + border-radius: 99px; + background: var(--color-cream); + border: 1px solid var(--color-mist); + font-family: var(--font-mono); + font-size: 0.8125rem; + font-weight: 500; + color: var(--color-charcoal); + flex-shrink: 0; + transition: + background var(--duration-fast) var(--ease-out), + border-color var(--duration-fast) var(--ease-out), + color var(--duration-fast) var(--ease-out); +} + +.site-header-github svg { + width: 14px; + height: 14px; + flex-shrink: 0; +} + +.site-header-github:hover { + background: var(--color-paper); + border-color: var(--color-ink); + color: var(--color-ink); +} + +.site-header-github-star { + color: #f59e0b; + width: 12px; + height: 12px; + flex-shrink: 0; +} + +@media (max-width: 820px) { .site-header { - padding: 14px var(--spacing-md); + padding: 12px var(--spacing-md); gap: var(--spacing-sm); } .site-header-brand { - font-size: 1.125rem; + font-size: 1.0625rem; + } + + .site-header-brand-logo { + width: 22px; + height: 22px; + } + + .site-header-right { + gap: var(--spacing-sm); } .site-header-nav { @@ -122,13 +194,33 @@ a { gap: var(--spacing-sm); overflow-x: auto; scrollbar-width: none; + -webkit-overflow-scrolling: touch; + /* fade the right edge so users see there's more to scroll */ + mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%); + -webkit-mask-image: linear-gradient(to right, black 0%, black calc(100% - 24px), transparent 100%); } .site-header-nav::-webkit-scrollbar { display: none; } - .site-header-nav a[data-nav="github"] { + .site-header-nav a[data-nav="home"] { + /* Brand already acts as home link on mobile */ + display: none; + } + + .site-header-github { + padding: 4px 8px; + } + + .site-header-github-label { + display: none; + } +} + +@media (max-width: 480px) { + .site-header-brand-name { + /* Logo alone on narrow screens */ display: none; } } diff --git a/public/gallery.html b/public/gallery.html index c2fcc61e4..730ccd3c0 100644 --- a/public/gallery.html +++ b/public/gallery.html @@ -190,16 +190,23 @@
+ Impeccable - +
+ + + + 17k + + +
diff --git a/public/index.html b/public/index.html index c75846492..b057e6abc 100644 --- a/public/index.html +++ b/public/index.html @@ -51,16 +51,23 @@
+ Impeccable - +
+ + + + 17k + + +
@@ -76,10 +83,6 @@
- - - 16k -
diff --git a/public/privacy.html b/public/privacy.html index 7785d5fdc..1d54d2cea 100644 --- a/public/privacy.html +++ b/public/privacy.html @@ -26,16 +26,23 @@
+ Impeccable - +
+ + + + 17k + + +