From 813c403fcc4e85bdf2a18c4d137accf66f3cb0bf Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 18 Oct 2026 20:34:46 +0000 Subject: [PATCH] Make the background seals a little stronger in light mode A --gk-ghost token scales the faint edge seals, panel seals and banners: 1 in dark, 1.6 in light, so their lines read on Starlight. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx --- packages/ui/src/components/EdgeSeals.astro | 4 ++-- packages/ui/src/components/SiteHeader.astro | 2 +- packages/ui/src/styles/tokens.css | 3 +++ services/site/src/components/blog/LeadPost.astro | 2 +- services/site/src/components/blog/SidePanel.astro | 2 +- services/site/src/components/work/FeaturedStudy.astro | 2 +- services/site/src/pages/index.astro | 2 +- services/site/src/pages/now.astro | 2 +- services/site/src/pages/resume.astro | 2 +- services/site/src/pages/store/index.astro | 2 +- 10 files changed, 13 insertions(+), 10 deletions(-) diff --git a/packages/ui/src/components/EdgeSeals.astro b/packages/ui/src/components/EdgeSeals.astro index 4ff44d3..465ec21 100644 --- a/packages/ui/src/components/EdgeSeals.astro +++ b/packages/ui/src/components/EdgeSeals.astro @@ -39,7 +39,7 @@ const other = second === false ? null : (second ?? first); top: 760px; width: 620px; height: 620px; - opacity: 0.07; + opacity: calc(0.07 * var(--gk-ghost)); transform: rotate(-10deg); } .right { @@ -47,7 +47,7 @@ const other = second === false ? null : (second ?? first); top: 64%; width: 560px; height: 560px; - opacity: 0.06; + opacity: calc(0.06 * var(--gk-ghost)); transform: rotate(8deg); } @media (max-width: 640px) { diff --git a/packages/ui/src/components/SiteHeader.astro b/packages/ui/src/components/SiteHeader.astro index 0588d5e..9bdd19a 100644 --- a/packages/ui/src/components/SiteHeader.astro +++ b/packages/ui/src/components/SiteHeader.astro @@ -132,7 +132,7 @@ const decs = [60, 30, 0, -30].map((d, i) => ({ at: (i / 4) * 100, label: `${d > top: -40px; width: 900px; max-width: none; - opacity: 0.22; + opacity: calc(0.22 * var(--gk-ghost)); } .nav { max-width: var(--gk-page-max); diff --git a/packages/ui/src/styles/tokens.css b/packages/ui/src/styles/tokens.css index 8961fd2..3dca937 100644 --- a/packages/ui/src/styles/tokens.css +++ b/packages/ui/src/styles/tokens.css @@ -48,6 +48,8 @@ --gk-wash: 1; /* The star chart grid behind the page; off in dark, faint ink lines in light. */ --gk-chart: none; + /* How strong the faint seals behind pages and panels are; light mode lifts them. */ + --gk-ghost: 1; --gk-filament: linear-gradient(90deg, transparent, var(--gk-gold) 25%, var(--gk-teal-bright) 75%, transparent); @@ -111,6 +113,7 @@ --gk-midnight-rgb: 255, 255, 255; --gk-dust-accent-rgb: 106, 47, 224; --gk-wash: 0.5; + --gk-ghost: 1.6; --gk-chart: repeating-linear-gradient(0deg, rgba(19, 28, 43, 0.032) 0 1px, transparent 1px 44px), repeating-linear-gradient(90deg, rgba(19, 28, 43, 0.032) 0 1px, transparent 1px 44px); diff --git a/services/site/src/components/blog/LeadPost.astro b/services/site/src/components/blog/LeadPost.astro index f33cfbf..ffe3941 100644 --- a/services/site/src/components/blog/LeadPost.astro +++ b/services/site/src/components/blog/LeadPost.astro @@ -105,7 +105,7 @@ const now = nowStatuses(s, post); position: absolute; width: 150%; max-width: none; - opacity: 0.32; + opacity: calc(0.32 * var(--gk-ghost)); pointer-events: none; } .art :global(.path) { diff --git a/services/site/src/components/blog/SidePanel.astro b/services/site/src/components/blog/SidePanel.astro index 659b17e..94d3f5a 100644 --- a/services/site/src/components/blog/SidePanel.astro +++ b/services/site/src/components/blog/SidePanel.astro @@ -37,7 +37,7 @@ const { title, seal, as: H = "h2" } = Astro.props; position: absolute; right: -26px; top: -26px; - opacity: 0.14; + opacity: calc(0.14 * var(--gk-ghost)); pointer-events: none; } .head { diff --git a/services/site/src/components/work/FeaturedStudy.astro b/services/site/src/components/work/FeaturedStudy.astro index 327c19d..4b5c57b 100644 --- a/services/site/src/components/work/FeaturedStudy.astro +++ b/services/site/src/components/work/FeaturedStudy.astro @@ -92,7 +92,7 @@ const facts = d.facts ?? []; position: absolute; right: -60px; bottom: -80px; - opacity: 0.12; + opacity: calc(0.12 * var(--gk-ghost)); pointer-events: none; } .main { diff --git a/services/site/src/pages/index.astro b/services/site/src/pages/index.astro index 2b1ef37..42c3629 100644 --- a/services/site/src/pages/index.astro +++ b/services/site/src/pages/index.astro @@ -227,7 +227,7 @@ const listFormat = new Intl.ListFormat("en", { style: "long", type: "conjunction position: absolute; right: -90px; top: -90px; - opacity: 0.14; + opacity: calc(0.14 * var(--gk-ghost)); pointer-events: none; } .work > :not(:global(.work-seal), :global(.gk-corner)) { diff --git a/services/site/src/pages/now.astro b/services/site/src/pages/now.astro index 201482c..c9ee208 100644 --- a/services/site/src/pages/now.astro +++ b/services/site/src/pages/now.astro @@ -209,7 +209,7 @@ const wrapped = s top: -26px; width: 104px; height: 104px; - opacity: 0.14; + opacity: calc(0.14 * var(--gk-ghost)); pointer-events: none; } .panel-kicker { diff --git a/services/site/src/pages/resume.astro b/services/site/src/pages/resume.astro index ca0f29b..13f9e7e 100644 --- a/services/site/src/pages/resume.astro +++ b/services/site/src/pages/resume.astro @@ -402,7 +402,7 @@ const isCore = (group: { core?: string[] }, item: string) => group.core?.some((c position: absolute; right: -30px; top: -30px; - opacity: 0.12; + opacity: calc(0.12 * var(--gk-ghost)); pointer-events: none; } .panel-head { diff --git a/services/site/src/pages/store/index.astro b/services/site/src/pages/store/index.astro index 540aa1b..d509c84 100644 --- a/services/site/src/pages/store/index.astro +++ b/services/site/src/pages/store/index.astro @@ -328,7 +328,7 @@ const colorStrips = selling.flatMap((l) => position: absolute; right: -40px; bottom: -60px; - opacity: 0.08; + opacity: calc(0.08 * var(--gk-ghost)); pointer-events: none; } summary {