← back to Crazy News Channel
p24: remove per-category mood palette swap and per-strip dark toggle from style.css
d12e5a29fbd9e176a1f5869d9beef6c352363037 · 2026-09-25 09:05:26 -0700 · Steve
Clicking a category filter set body[data-mood="politics|weather|..."], and a
whole block redefined --bg/--panel/--accent/--text/etc per category, so every
click repainted the entire site's colors. Same problem for the per-strip
"Dark mode" toggle, which swapped --bg/--panel/--text via html[data-theme].
Removed both blocks; kept only the single default ("all") mint-green palette
in :root. JS still sets body[data-mood] on click (for the mood-readout text
and the independent per-card --cat-accent dots) and pages still carry
data-theme, but nothing in style.css keys colors/fonts off either anymore.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
Files touched
Diff
commit d12e5a29fbd9e176a1f5869d9beef6c352363037
Author: Steve <steve@designerwallcoverings.com>
Date: Fri Sep 25 09:05:26 2026 -0700
p24: remove per-category mood palette swap and per-strip dark toggle from style.css
Clicking a category filter set body[data-mood="politics|weather|..."], and a
whole block redefined --bg/--panel/--accent/--text/etc per category, so every
click repainted the entire site's colors. Same problem for the per-strip
"Dark mode" toggle, which swapped --bg/--panel/--text via html[data-theme].
Removed both blocks; kept only the single default ("all") mint-green palette
in :root. JS still sets body[data-mood] on click (for the mood-readout text
and the independent per-card --cat-accent dots) and pages still carry
data-theme, but nothing in style.css keys colors/fonts off either anymore.
Co-Authored-By: Claude Opus 5.5 (1M context) <noreply@anthropic.com>
---
assets/style.css | 149 ++++++++++++++++++-------------------------------------
1 file changed, 49 insertions(+), 100 deletions(-)
diff --git a/assets/style.css b/assets/style.css
index 3ce99c5..9dfba5f 100644
--- a/assets/style.css
+++ b/assets/style.css
@@ -3,16 +3,27 @@
Extracted from index.html (TK-12151) so the front page, the
cartoon gallery (cartoons/index.html), and all cartoon strip
pages (cartoons/2026*.html) share ONE mint-green/sans-serif
- design system with per-category data-mood theming, instead of
- copy-pasted/drifting inline <style> blocks. Pure CSS, no
- fetch()/build step — safe for offline file:// use.
+ design system, instead of copy-pasted/drifting inline <style>
+ blocks. Pure CSS, no fetch()/build step — safe for offline
+ file:// use.
+
+ TK-12226 (2026-09-25): removed the per-category "mood" palette
+ swap and the per-strip light/dark toggle — Steve's ruling was
+ "fix ux so onclick, all fonts and colors do not change. Keep
+ entire site 1 style sheet on p24." There is now exactly ONE
+ fixed palette (the former "all"/default mint-green) and ONE
+ font stack, declared once in :root, used everywhere. Category
+ filter clicks still set body[data-mood] (kept for the mood
+ text readout + per-card accent dots below) but nothing in this
+ file keys the palette/fonts off it anymore.
PART 1 — site-wide (verbatim from the former index.html inline
- stylesheet: reset, mood palettes, chrome, story grid,
+ stylesheet: reset, palette, chrome, story grid,
ticker, admin panel, article view, chaos index, etc.)
PART 2 — cartoon gallery (cartoons/index.html) additions
- PART 3 — cartoon strip pages: legacy token aliases + the
- per-file light/dark toggle, layered on top of Part 1
+ PART 3 — cartoon strip pages: legacy token aliases, and (new)
+ shared cartoon-page layout rules scoped under
+ body.cartoon-page so they never leak into index.html
============================================================ */
/* ============================================================
@@ -71,9 +82,18 @@ img, svg { max-width: 100%; display: block; }
border: 0;
}
-/* ---------- 2. Mood theming — CSS custom properties ----------
- Default ("all") is the pale mint/green salvaged from the original
- seed attempt. Every other category swaps the whole palette. */
+/* ---------- 2. Theming — CSS custom properties ----------
+ TK-12226: this used to be per-category ("mood") theming — clicking a
+ category filter/chip set body[data-mood="politics|weather|..."] and a
+ whole different block below redefined --bg/--panel/--accent/--text/etc,
+ so every click repainted the entire site's palette. Steve's ruling:
+ "keep entire site 1 style sheet on p24" — one fixed palette, full stop.
+ The JS still sets `document.body.dataset.mood` on category click (see
+ index.html) for the `body[data-mood="all"]` selector below and for the
+ `.card[data-cat="..."]` per-card accent dots further down, but no other
+ `body[data-mood="..."]` block exists anymore, so nothing in this file
+ keys the palette off it. --mood-label was only ever read by the block
+ removed here, so it is dropped too (nothing referenced it via var()). */
:root, body[data-mood="all"] {
--bg: #cdf5e0;
--bg2: #f2fff2;
@@ -85,42 +105,6 @@ img, svg { max-width: 100%; display: block; }
--text-dim: #12352499;
--chrome: #ffffff;
--focus: #0b3d91;
- --mood-label: "Calm-ish (Default)";
-}
-body[data-mood="politics"] {
- --bg: #2a0b0b; --bg2: #4a0f0f; --panel: #3a1212; --panel-border: #ff3b3b55;
- --accent: #ff3b3b; --accent2: #ffb703; --text: #ffe9e9; --text-dim: #ffd7d7aa;
- --chrome: #220808; --focus: #ffd166;
-}
-body[data-mood="weather"] {
- --bg: #071a33; --bg2: #0c2b52; --panel: #0e2340; --panel-border: #4fd1ff55;
- --accent: #4fd1ff; --accent2: #a0e9ff; --text: #eaf6ff; --text-dim: #cfeeffaa;
- --chrome: #05132c; --focus: #ffe066;
-}
-body[data-mood="sports"] {
- --bg: #2b1400; --bg2: #4a2200; --panel: #3a1c00; --panel-border: #ff980055;
- --accent: #ff9800; --accent2: #ffd166; --text: #fff3e0; --text-dim: #ffe0b3aa;
- --chrome: #200f00; --focus: #4fd1ff;
-}
-body[data-mood="entertainment"] {
- --bg: #2a0a2e; --bg2: #4a0f52; --panel: #3a1140; --panel-border: #ff5fd155;
- --accent: #ff5fd1; --accent2: #b388ff; --text: #fbe9ff; --text-dim: #eecbffaa;
- --chrome: #210822; --focus: #ffe066;
-}
-body[data-mood="business"] {
- --bg: #08210f; --bg2: #0e3a1c; --panel: #0d2c16; --panel-border: #2ecc7155;
- --accent: #2ecc71; --accent2: #f1c40f; --text: #eafff0; --text-dim: #c9f5d6aa;
- --chrome: #06180c; --focus: #f1c40f;
-}
-body[data-mood="scitech"] {
- --bg: #0a0a23; --bg2: #170b3d; --panel: #140c33; --panel-border: #00f0ff55;
- --accent: #00f0ff; --accent2: #ff00e6; --text: #eafcff; --text-dim: #c9f3ffaa;
- --chrome: #08081c; --focus: #ff00e6;
-}
-body[data-mood="uncategorized"] {
- --bg: #e9edf0; --bg2: #ffffff; --panel: #ffffff; --panel-border: #54657833;
- --accent: #546578; --accent2: #2f3b47; --text: #20272d; --text-dim: #20272d99;
- --chrome: #ffffff; --focus: #0b3d91;
}
/* ---------- 3. Chrome (header / nav) ---------- */
@@ -860,10 +844,10 @@ main { max-width: 1200px; margin: 0 auto; padding: 20px; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(var(--card-w), 1fr)); gap: 18px; }
/* ---------- Per-category card accent ----------
- Each card carries data-cat, which sets --cat-accent to that category's
- mood --accent (see Part 1's body[data-mood] blocks). Keeps cards
- multicolored in the "All Categories" view regardless of the page's
- current mood. */
+ Each card carries data-cat, which sets --cat-accent to a fixed
+ per-category color (independent of the single site-wide palette
+ above). Keeps cards multicolored in the "All Categories" view; this
+ does not change on click and is not affected by TK-12226. */
.card[data-cat="politics"] { --cat-accent: #ff3b3b; }
.card[data-cat="weather"] { --cat-accent: #4fd1ff; }
.card[data-cat="sports"] { --cat-accent: #ff9800; }
@@ -903,27 +887,21 @@ footer { max-width: 1200px; margin: 30px auto; padding: 0 20px 30px; color: var(
/* ============================================================
PART 3 — CARTOON STRIP PAGES (cartoons/2026*.html)
- The 18 individual strip pages were built against an older
+ The 22 individual strip pages were built against an older
"parchment newspaper" token set (--ink, --ink-dim, --rule,
- --seal) and a per-file light/dark toggle. Rather than rewrite
- every strip's markup/JS (several draw their SVG panels by
- reading these var() names directly at render time), these
- names are aliased onto the shared mint-green token system so
- the strips automatically re-theme with it — including the
- per-category body[data-mood] palettes in Part 1.
-
- IMPORTANT: this alias block is declared on the bare `body`
- selector (NOT `:root`/html). Custom-property var() references
- are substituted using the referenced property's cascaded value
- on the SAME element where the alias is declared — declaring it
- on :root would freeze --ink-dim etc. using html's own (default
- "all" mood) --text-dim, which does not update when a specific
- body[data-mood="..."] block further down overrides --text-dim
- only on <body>. Declaring the alias directly on `body` makes it
- resolve using body's own final cascaded --text/--text-dim/
- --accent/--accent2 (whichever mood block — or the dark/light
- toggle override below — won), so it repaints correctly. */
-body {
+ --seal). These names are aliased onto the shared token system
+ so the strips render with the site's one fixed palette without
+ rewriting every strip's markup/JS (several draw their SVG
+ panels by reading these var() names directly at render time).
+
+ TK-12226: this block used to sit on bare `body` specifically so
+ a per-category body[data-mood="..."] block (removed above) and
+ a per-page light/dark toggle (removed below, along with each
+ strip's toggle button/script — see individual page diffs) could
+ both win the cascade over :root. Neither exists anymore, so the
+ alias is declared on :root directly — one palette, no toggle,
+ nothing to repaint on click. */
+:root {
--ink: var(--text);
--ink-dim: var(--text-dim);
--rule: var(--accent);
@@ -934,41 +912,12 @@ body {
links per-context instead, so this was missing from Part 1). */
a { color: var(--accent2); }
-/* Each strip ships its own "Dark mode: on/off" toggle button that sets
- data-theme on <html> (see each file's inline script). IMPORTANT: 17
- of the 18 strips default to explicitly setting data-theme="light"
- on load (only one has a true 3-state auto/dark/light toggle) — so
- "light" is each page's normal/default state, not a user opt-in. It
- must stay a NO-OP here (no bg/panel/text override) so the active
- body[data-mood="..."] palette from Part 1 is what actually renders
- by default. Only the explicit "dark" state (reached by the user
- clicking the toggle button, or a real OS dark preference on the one
- auto-capable strip) dims things further, as a night-viewing variant
- layered on top of whichever mood is active. These overrides target
- the BODY element directly (not :root) so they win over the
- per-category body[data-mood="..."] blocks in Part 1 that also
- declare these same custom properties directly on <body>. Only bg/
- panel/text are touched — --accent/--accent2 stay mood-colored so a
- politics strip in dark mode still reads as politics-red, just on a
- darker backdrop. */
-html[data-theme="dark"] body {
- --bg: #0a0f0c; --bg2: #10201780; --panel: #141f18; --panel-border: #2c3d3255;
- --text: #eef7f0; --text-dim: #c3d4c9aa;
-}
-@media (prefers-color-scheme: dark) {
- html:not([data-theme="light"]):not([data-theme="dark"]) body {
- --bg: #0a0f0c; --bg2: #10201780; --panel: #141f18; --panel-border: #2c3d3255;
- --text: #eef7f0; --text-dim: #c3d4c9aa;
- }
-}
-
/* ============================================================
PART 4 — TAGS (TK-12165)
Shared tag-chip/filter-bar/cloud styling for the front page
(story cards + article view), the cartoon gallery, and every
- individual cartoon strip page. Reuses the existing mood tokens
- so tag chips retheme with body[data-mood="..."] like everything
- else, instead of carrying their own fixed palette.
+ individual cartoon strip page. Reuses the shared site tokens
+ instead of carrying its own fixed palette.
============================================================ */
.tag-chips, .tag-cloud-list {
list-style: none;
← e22509c auto-data-snapshot: 2026-09-25T07:42:43 (4 data files) — dai
·
back to Crazy News Channel
·
p24: move index.html's 9 inline style="..." attrs into style 455c6ee →