fix(theme): dark/light readability + alignment fixes across lessons and interview banks#35
Merged
dineshbyte merged 3 commits intoJun 22, 2026
Conversation
…om A Two DRY fixes in public/assets/lesson.css that reach every lesson and interview page from one place: 1. .lvltop numbered section header — the badge and <h2> share a flex row (align-items:center), but the default h2 margin (2.4rem/.5rem) is not collapsed inside a flex item, so centering pivots on the margin-box and the heading text dropped ~0.95rem below the badge. Zero the heading margin inside .lvltop so it centers on the badge. 2. Interview <details class="iq"> — the bold summary (question) and the .a div (answer) were both --ink with no gap, so in dark mode the two fused. Add a theme-aware var(--line) divider under the open summary so question and answer read distinctly in both themes.
The shared .myth pattern (used by most lessons) only tinted the card background, with plain --ink text. In dark mode that tint is too faint to signal bad-vs-good, so myth and truth cards read identically. The per-lesson _0005/_0003 variant already adds a colored left border; bring the shared rule up to match — .myth .m gets var(--bad), .myth .t gets var(--good) — so the distinction is scannable in both themes. Scoped to .myth so the .miscon callout is unaffected.
The Tufte interview layout pinned the Q&A panel to cream paper (--card:#fcfbf2 plus a hardcoded background:#fcfbf2) for its light look, but never pinned --ink. In dark mode the global theme flips --ink light, so the card text rendered light-on-cream — effectively invisible (the questions and answers were unreadable). Fix in src/layouts/InterviewLayout.astro (one place, every bank): - card background now follows the --card token instead of hardcoded cream - add `html[data-theme="dark"] [data-interview]` override mapping the panel onto the dark surface tokens (--surface / --bg-soft / --surface-elevated / --text-muted), so dark mode gives dark cards with light text — consistent with the lesson interview cards. - --ink stays unpinned so card text follows the theme. Light/default keeps the exact cream Tufte paper look.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What & why
Four DRY theme/alignment fixes, each applied in one place so the pattern is
corrected everywhere it appears.
.lvltopbadge alignment (lesson.css) — the defaulth2margin isn'tcollapsed inside the
align-items:centerflex row, so the heading text sat~0.95rem below the numbered badge. Zero the heading margin inside
.lvltop.lesson.css) — opendetails.iqsummary and answerwere the same colour with no gap, fusing in dark mode. Add a theme-aware
var(--line)divider under the open summary.lesson.css) — the shared.mythpattern only tinted thebackground, too faint in dark mode. Add the semantic left border
(
var(--bad)/var(--good)) to match the per-lesson variant.InterviewLayout.astro) — theQ&A panel was pinned to cream paper but
--inkwasn't, so dark-mode text wentlight-on-cream (invisible). Card bg now follows
--card; ahtml[data-theme="dark"] [data-interview]override maps the panel onto the darksurface tokens. Light/default keeps the cream Tufte look exactly.
Checklist
pnpm build— 98 pages, greennode scripts/validate-content.cjs— all content checks passednode scripts/check-broken-links.cjs— no broken internal linksTwo notes before you merge: