drwily/Pete
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: the muted text that was never muted, and the stylesheet fetched every time

Browse Source 
Every text-[color:var(--ink)]/50, border-[color:var(--ink)]/10 and
bg-[color:var(--ink)]/5 in the templates compiled to nothing. Tailwind v3
cannot put an opacity on an arbitrary var() colour, so all 538 of them were
dropped from output.css without a word. Meta text rendered at full ink, card
borders fell back to Tailwind's default grey (bright white rings at night),
and the washes, backdrops and hover pills simply weren't there, on the news
site, the casino and the adventure pages alike.

The palette is now written once per phase and casino room as bare rgb
channels (--ink-rgb and friends), the plain vars are built from them, and
tailwind.config.js exposes ink, muted, accent, warn and card as real colours.
The classes are text-ink/80, border-ink/10, bg-accent/20 now, and they compile.

Restoring the intended opacities as-is would have traded flat for illegible:
ink at 50% measures 2.7 to 2.9:1 on the lit phases. So secondary text gets
its own colour, --muted, per phase and per casino room, taken as faint as it
can go while still clearing 4.5:1 on both the card and the page. Everything
that was ink at 35 to 70% is text-muted. The 20-30% ones are separators and
empty-cell dashes and stay faint.

The bg-theme-* chips carry white text everywhere they appear, and eight of
them measured 2.5 to 3.2:1. Same hues, taken just dark enough to pass (4.6 to
4.7:1). eu, lego and adventure already passed and are unchanged, and the
underline and border colours keep the old pastels since they carry no text.

Static files came out of the embedded FS with no Last-Modified, no ETag and
no Cache-Control, so every page view downloaded the stylesheet and every
script in full, and the service worker's "cheap 304" never happened. Each
file is hashed once now. Templates link through {{asset}}, which appends
?v=<hash>; a request naming the current hash is served immutable for a year,
and everything else gets the hash as its ETag and revalidates to a 304. The
service worker serves versioned URLs cache-first, drops older versions of the
same file as new ones land, and moves to cache v6.
This commit is contained in:
prosolis
2026-09-22 22:54:50 -07:00
parent 4eaf8ae366
commit a15d67e210
40 changed files with 900 additions and 676 deletions
Download Patch File Download Diff File Expand all files Collapse all files
internal/web/static/css/input.css
+67 -31
View File
@@ -17,41 +17,68 @@
amber-400 on cream at 1.55:1 — half of the four combinations unreadable, and
which half depends on a setting outside the page. Only night has a dark card;
dusk and dawn are lit despite their names. */
/* Each colour is written once, as bare rgb channels (--ink-rgb), and the plain
var (--ink) is built from it. Tailwind needs the channels: tailwind.config.js
maps ink/muted/accent/warn/card to rgb(var(--x-rgb) / <alpha-value>), which is
what makes text-ink/80 or border-ink/10 actually compile. The old spelling,
text-[color:var(--ink)]/80, never did: Tailwind v3 cannot put an opacity on
an arbitrary var() colour, so all 538 of those classes silently produced no
rule at all.
--muted is the secondary-text colour: ink mixed into the card, as faint as it
can go while still clearing 4.5:1 on both the card and the page background.
It exists because ink-at-50% looks right but measures 2.7–2.9:1 on the lit
phases. Use text-muted for meta text, not text-ink/50. */
:root,
html[data-phase="day"] {
--bg: #fff7e4; /* warm cream */
--bg-grad: #ffeec2; /* soft sun wash */
--card: #ffffff;
--ink: #3a2e1f;
--accent: #f2a541; /* sunshine yellow */
--warn: #b45309;
--card-rgb: 255 255 255;
--ink-rgb: 58 46 31;
--muted-rgb: 119 111 100; /* 4.95:1 card, 4.64:1 bg */
--accent-rgb: 242 165 65; /* sunshine yellow */
--warn-rgb: 180 83 9;
}
html[data-phase="dawn"] {
--bg: #ffe7d6;
--bg-grad: #ffc9c9;
--card: #fff4ea;
--ink: #4a2e2a;
--accent: #ff8a65;
--warn: #b45309;
--card-rgb: 255 244 234;
--ink-rgb: 74 46 42;
--muted-rgb: 123 99 94; /* 5.12:1 card, 4.66:1 bg */
--accent-rgb: 255 138 101;
--warn-rgb: 180 83 9;
}
html[data-phase="dusk"] {
--bg: #ffd6a8;
--bg-grad: #f7a07e;
--card: #fff1de;
--ink: #3d2417;
--accent: #e6553a;
--warn: #b45309;
--card-rgb: 255 241 222;
--ink-rgb: 61 36 23;
--muted-rgb: 113 91 77; /* 5.71:1 card, 4.67:1 bg */
--accent-rgb: 230 85 58;
--warn-rgb: 180 83 9;
}
html[data-phase="night"] {
--bg: #1a1f3a;
--bg-grad: #2a3358;
--card: #2d365a;
--ink: #f1ecd8; /* moonlight */
--accent: #f9d976; /* lantern */
--warn: #fbbf24; /* the only dark card, so the only light amber */
--card-rgb: 45 54 90;
--ink-rgb: 241 236 216; /* moonlight */
--muted-rgb: 163 163 166; /* 4.67:1 card, 6.42:1 bg */
--accent-rgb: 249 217 118; /* lantern */
--warn-rgb: 251 191 36; /* the only dark card, so the only light amber */
}
/* The plain vars, built from the channels. Declared on html alongside every
palette block (phase and casino room alike), so a block that only swaps the
channels still gets matching plain vars. */
html {
--card: rgb(var(--card-rgb));
--ink: rgb(var(--ink-rgb));
--muted: rgb(var(--muted-rgb));
--accent: rgb(var(--accent-rgb));
--warn: rgb(var(--warn-rgb));
}
@layer base {
@@ -81,16 +108,23 @@ html[data-phase="night"] {
.shadow-pete-lg { box-shadow: 0 6px 0 rgba(60,40,20,0.12), 0 16px 32px rgba(60,40,20,0.12); }
/* Per-channel theme colors. Kept as plain utilities so Tailwind doesn't
need to know to safelist them. */
.bg-theme-gaming { background-color: #4caf7d; }
.bg-theme-tech { background-color: #5aa9e6; }
.bg-theme-politics { background-color: #e07a5f; }
need to know to safelist them.
Every bg-theme-* carries white text (chips, the active nav pill, channel
heroes), so each one has to clear 4.5:1 against white. The original pastels
measured 2.5–3.2:1; these are the same hues taken just dark enough to pass
(4.6–4.7:1). eu, lego and adventure already passed and are untouched. The
decoration-theme-* underlines below keep the original pastels: they carry
no text. */
.bg-theme-gaming { background-color: #38815c; } /* was #4caf7d */
.bg-theme-tech { background-color: #1d79c0; } /* was #5aa9e6 */
.bg-theme-politics { background-color: #cb4a27; } /* was #e07a5f */
.bg-theme-eu { background-color: #003399; }
.bg-theme-music { background-color: #b079d6; }
.bg-theme-anime { background-color: #ec5e8a; }
.bg-theme-foss { background-color: #d97706; }
.bg-theme-kids { background-color: #14b8a6; }
.bg-theme-finance { background-color: #10b981; }
.bg-theme-music { background-color: #9a54cb; } /* was #b079d6 */
.bg-theme-anime { background-color: #e01a58; } /* was #ec5e8a */
.bg-theme-foss { background-color: #af6005; } /* was #d97706 */
.bg-theme-kids { background-color: #0e8376; } /* was #14b8a6 */
.bg-theme-finance { background-color: #0c855d; } /* was #10b981 */
.bg-theme-lego { background-color: #d01012; }
.bg-theme-adventure { background-color: #6d4bd8; }
@@ -2285,9 +2319,10 @@ html[data-phase="night"] {
html[data-room="casinopolis"] {
--bg: #16211c; /* the room, lights low */
--card: #23342b; /* a table in it */
--ink: #f6ecd8; /* warm cream, not white */
--accent: #f2b53d; /* honey */
--card-rgb: 35 52 43; /* a table in it */
--ink-rgb: 246 236 216; /* warm cream, not white */
--muted-rgb: 153 155 140; /* 4.65:1 card, 5.85:1 bg */
--accent-rgb: 242 181 61; /* honey */
--felt-a: #2f7d5b;
--felt-b: #24614a;
--felt-c: #1c4d3c;
@@ -2296,9 +2331,10 @@ html[data-room="casinopolis"] {
html[data-room="casino-night"] {
--bg: #140f2e; /* the machine's cabinet */
--card: #241a4d;
--ink: #f2ecff;
--accent: #ffcc2f; /* the jackpot bulb */
--card-rgb: 36 26 77;
--ink-rgb: 242 236 255;
--muted-rgb: 143 135 170; /* 4.67:1 card, 5.46:1 bg */
--accent-rgb: 255 204 47; /* the jackpot bulb */
--felt-a: #4a2fa8; /* the table is a pinball table now */
--felt-b: #351f80;
--felt-c: #241659;