Add light mode that follows the device setting

Dark stays the default. A device set to light gets the picks from the
light motif board: the Dawn chart sky (dawn wash over faint star chart
lines, atlas marks in the hero), deep gold line seals, Midnight, violet and
gold dust, the deep gold to teal filament and the morning sky placeholder.
Large standalone seals (404, Inquiries, Inquiry sent, the blog's lead) are
gold foil in both modes.

Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_012aSbo2D1qP8cMFQCykf7kx
This commit is contained in:
Claude
2026-10-18 18:54:56 +00:00
parent 8e5e5cbef8
commit 7aa2910b12
101 changed files with 541 additions and 161 deletions
+8 -5
View File
@@ -35,8 +35,9 @@ const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`;
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="color-scheme" content="dark" />
<meta name="theme-color" content="#0E1522" />
<meta name="color-scheme" content="dark light" />
<meta name="theme-color" content="#0E1522" media="(prefers-color-scheme: dark)" />
<meta name="theme-color" content="#F4F2ED" media="(prefers-color-scheme: light)" />
<link rel="icon" href="/favicon.ico" sizes="48x48" />
<link rel="icon" href="/favicon.svg" type="image/svg+xml" />
<link rel="apple-touch-icon" href="/apple-touch-icon.png" />
@@ -64,10 +65,12 @@ const fullTitle = title === "Greg Kilmer" ? title : `${title} · Greg Kilmer`;
position: relative;
min-height: 100vh;
overflow-x: clip;
/* The page's nebula: violet from the top right, teal from the bottom left. */
/* The page's nebula: violet from the top right, teal from the bottom left.
In light mode it is the dawn wash over faint star chart lines. */
background:
radial-gradient(ellipse at 100% 0%, rgba(106, 47, 224, 0.28), transparent 50%),
radial-gradient(ellipse at 0% 100%, rgba(20, 163, 154, 0.2), transparent 55%),
radial-gradient(ellipse at 100% 0%, rgba(var(--gk-violet-rgb), calc(0.28 * var(--gk-wash))), transparent 50%),
radial-gradient(ellipse at 0% 100%, rgba(var(--gk-teal-deep-rgb), calc(0.2 * var(--gk-wash))), transparent 55%),
var(--gk-chart),
var(--gk-sky);
}
.gk-main {