From 08df07f221ce4df5f873149793461fc007d46124 Mon Sep 17 00:00:00 2001 From: Claude Date: Sun, 18 Oct 2026 20:30:32 +0000 Subject: [PATCH] Give the GK monogram a light mode version In light mode the header, footer and post placeholders show the monogram on a pale disc with deep gold rings and ink letters, with a soft edge so it sits apart from the Starlight page. The light file is written by the light motifs script. Co-Authored-By: Claude Opus 5.5 (1M context) Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx --- packages/ui/scripts/light-motifs.mjs | 15 ++++++++++++++- .../ui/src/assets/brand/light/gk-monogram.svg | 2 ++ packages/ui/src/components/SiteFooter.astro | 9 ++++++++- packages/ui/src/components/SiteHeader.astro | 8 ++++++-- packages/ui/src/components/seals.ts | 12 +++++++++--- services/site/src/components/blog/PostThumb.astro | 3 ++- services/site/src/components/home/StatusRow.astro | 3 ++- 7 files changed, 43 insertions(+), 9 deletions(-) create mode 100644 packages/ui/src/assets/brand/light/gk-monogram.svg diff --git a/packages/ui/scripts/light-motifs.mjs b/packages/ui/scripts/light-motifs.mjs index 938daf6..c2753bb 100644 --- a/packages/ui/scripts/light-motifs.mjs +++ b/packages/ui/scripts/light-motifs.mjs @@ -1,7 +1,8 @@ /** * Writes the light and foil versions of the motif SVGs from the dark originals * in src/assets/motifs, using the inks Greg picked on the light motif board - * (2026-10-18). Run after a motif changes: node packages/ui/scripts/light-motifs.mjs + * (2026-10-18), and the light GK monogram in src/assets/brand/light. Run after + * a motif or the monogram changes: node packages/ui/scripts/light-motifs.mjs * * light/ deep gold line: the dark inks swapped for Starlight-page inks, glow removed * foil/ the dark seal with its gold as foil, glow kept @@ -63,3 +64,15 @@ for (const f of files) { } } console.log(`${files.length} motifs written`); + +// The GK monogram on Starlight: a pale disc, deep gold rings and ink letters. +const MONOGRAM = { + ...LIGHT, + "#131C2B": "#FFFFFF", + "#1F3B49": "#ECE6D8", + "#15232F": "#FBF9F4", +}; +const brand = join(dir, "../brand"); +mkdirSync(join(brand, "light"), { recursive: true }); +writeFileSync(join(brand, "light", "gk-monogram.svg"), recolor(readFileSync(join(brand, "gk-monogram.svg"), "utf8"), MONOGRAM)); +console.log("monogram written"); diff --git a/packages/ui/src/assets/brand/light/gk-monogram.svg b/packages/ui/src/assets/brand/light/gk-monogram.svg new file mode 100644 index 0000000..dded08a --- /dev/null +++ b/packages/ui/src/assets/brand/light/gk-monogram.svg @@ -0,0 +1,2 @@ + + \ No newline at end of file diff --git a/packages/ui/src/components/SiteFooter.astro b/packages/ui/src/components/SiteFooter.astro index a1abca7..624ad58 100644 --- a/packages/ui/src/components/SiteFooter.astro +++ b/packages/ui/src/components/SiteFooter.astro @@ -2,12 +2,13 @@ /** The site footer: the header divider again, then the monogram line and links. */ import monogram from "../assets/brand/gk-monogram.svg?url"; import Divider from "./Divider.astro"; +import Motif from "./Motif.astro"; const year = new Date().getFullYear(); ---