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 + + +