External/hallmark
1
0
Fork 0
mirror of https://github.com/Nutlope/hallmark.git synced 2026-08-14 12:35:33 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix · interlude + diptych: contrast bug from --color-accent-ink misuse

Browse Source 
The "The page is the demo" interlude rendered with white-on-light text
on Coral, Violet, Plume, Editorial — and dark-on-dark on Aurora, Halo
— because .interlude__phrase em was reaching for --color-accent-ink.
That token is "text laid over the accent fill" (paper-coloured on
most themes), so it disappears on the paper-2 band.

Use --color-accent directly. The accent itself is mid-L on every
theme (40-78% L), so it has the right contrast against either light
or dark paper.

Same root cause caught in two more places:
- .diptych__half[data-state="after"] .diptych__cap (the small label
  under the "after" diptych panel — same paper background)
- [data-theme="midnight"] .opening__title em (works visually on
  Midnight because its accent and accent-ink are equal, but the token
  usage was semantically wrong; aligning for consistency)

Six themes specifically affected by the visible bug: Coral, Violet,
Plume, Editorial (light, near-white em on light paper) and Aurora,
Halo (dark, near-black em on dark paper). All six now read clean.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Youssef
2026-05-07 17:58:10 +01:00
co-authored by Claude Opus 4.7
parent 32c02f1775
commit 9c4827687e
1 changed files with 6 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/css/sections.css
+6 -3
View File
@@ -1105,7 +1105,7 @@
}
.diptych__half[data-state="after"] .diptych__cap {
color: var(--color-accent-ink, var(--color-accent));
color: var(--color-accent);
}
@media (max-width: 48rem) {
@@ -1696,7 +1696,7 @@ html[data-theme="almanac"] body {
[data-theme="midnight"] .opening__title em {
font-family: var(--font-serif);
font-style: italic;
color: var(--color-accent-ink);
color: var(--color-accent);
}
/* — 04 · Anti-patterns — Slop, by name ——————————————————
@@ -2006,7 +2006,10 @@ html[data-theme="almanac"] body {
.interlude__phrase em {
font-style: italic;
color: var(--color-accent-ink, var(--color-accent));
/* Accent itself, not accent-ink: this <em> sits on the paper band,
not on an accent fill. --color-accent-ink is "text over accent",
which is paper-coloured on most themes and disappears here. */
color: var(--color-accent);
font-weight: 500;
}