refactor/design: CSS-extractie per scherm (shared #86 + #89) #98

New issue

Closed

opened 2026-04-21 15:09:11 +02:00 by Ghost · 1 comment

Ghost commented

2026-04-21 15:09:11 +02:00

(Migrated from codeberg.org)

Part of #86 AND #89. Shared issue omdat AUDIT.md §1.2 en REFINE-89.md Brok 2 hetzelfde voorstellen.

Context

`index.html:31-604` bevat 574 regels CSS in één `

Part of #86 AND #89. Shared issue omdat AUDIT.md §1.2 en REFINE-89.md Brok 2 hetzelfde voorstellen. ## Context \`index.html:31-604\` bevat 574 regels CSS in één \`<style>\`-blok. 14 CSS-subsecties zijn mechanisch splitsbaar (AUDIT §1.2). Splitsing maakt: - Monoliet ~574 LOC kleiner - Design-brokken 3-6 eenvoudiger (per scherm één stylesheet editen) - Geen cascade-risico want CSS is al ID-based ## Scope - 574 CSS-regels → \`app.css\`, \`screens/start.css\`, \`screens/quiz.css\`, \`screens/end.css\`, \`screens/feedback.css\`, \`map.css\`, \`animations.css\` - Tokens uit #97 naar \`tokens.css\` apart - \`index.html\` linkt naar elke file - \`.github/workflows/e2e.yml\` rsync-allowlist uitbreiden met nieuwe \`.css\`-paden (anders niet live) - **Geen styling-wijziging** — puur verplaatsing ## Verificatie - [ ] Pixel-diff tussen voor/na op alle schermen: zero - [ ] \`npx playwright test\` 166 groen - [ ] CF-preview: alle CSS-files laden zonder 404 - [ ] Productie-rsync zet alle CSS-files op Uberspace ## Effort/Impact/Risico 2-3 uur / 2 / 1 (laag, moderne CSS is niet cascade-gevoelig bij goede IDs) ## Afhankelijkheid #97 (tokens) liever eerst zodat \`tokens.css\` de eerste extracte is. ## Kan starten zonder user-beslissing? **Ja.**

Ghost commented

2026-04-21 22:06:30 +02:00

(Migrated from codeberg.org)

Al geland: commit 64fbd66 ("refactor(#98): extract

Al geland: commit 64fbd66 ("refactor(#98): extract <style> block to css/ files") + 1dde90b (desktop-layout load-order fix). 574 CSS-regels uit index.html `<style>`-blok naar 8 files in `css/`: tokens, app, animations, map, start, quiz, end, feedback. rsync-allowlist bijgewerkt, Playwright groen, live sinds v2.18.6. Dit issue was blijven openstaan — nu administratief gesloten.