design: visuele refresh Mode-select (Brok 4b) #114

New issue

Closed

opened 2026-04-21 23:16:07 +02:00 by Ghost · 1 comment

Ghost commented

2026-04-21 23:16:07 +02:00

(Migrated from codeberg.org)

Na #101 (Quiz Routekaart-refresh) en #99 (Home) blijft `#mode-select` (het "Meerkeuze / Typen / Map-klik" scherm) nog in de legacy donkerblauwe stijl. Valt uit de toon tussen Home en Quiz.

Scope

`#mode-select` card: paper bg + border-hero + chunky shadow (zelfde RkDialog-look als `#question-box`).
`#mode-select h2`: Luckiest Guy display-font in ink.
`#mode-select p` (beschrijving): font-body, ink-soft.
`#mode-select .mode-btn`: chunky paper route-node cards (`border-hero`, `shadow-sm`, radius-10, fs-16, hover lift).
`.mode-btn .mode-title` + `.mode-btn .mode-desc`: display + body fonts.
Back-button in zelfde stijl.

Out of scope

Functioneel gedrag — SCREEN_VISIBILITY en routing ongewijzigd.
Hamburger (#113).

Tests

`tests/navigation.spec.js` "level kiezen toont modus-keuze" blijft groen.

Follow-up na #99/#101 — sluit de visuele cirkel vóór het end-scherm (#102).

Na #101 (Quiz Routekaart-refresh) en #99 (Home) blijft \`#mode-select\` (het \"Meerkeuze / Typen / Map-klik\" scherm) nog in de legacy donkerblauwe stijl. Valt uit de toon tussen Home en Quiz. ## Scope - \`#mode-select\` card: paper bg + border-hero + chunky shadow (zelfde RkDialog-look als \`#question-box\`). - \`#mode-select h2\`: Luckiest Guy display-font in ink. - \`#mode-select p\` (beschrijving): font-body, ink-soft. - \`#mode-select .mode-btn\`: chunky paper route-node cards (\`border-hero\`, \`shadow-sm\`, radius-10, fs-16, hover lift). - \`.mode-btn .mode-title\` + \`.mode-btn .mode-desc\`: display + body fonts. - Back-button in zelfde stijl. ## Out of scope - Functioneel gedrag — SCREEN_VISIBILITY en routing ongewijzigd. - Hamburger (#113). ## Tests - \`tests/navigation.spec.js\` "level kiezen toont modus-keuze" blijft groen. Follow-up na #99/#101 — sluit de visuele cirkel vóór het end-scherm (#102).

Ghost commented

2026-04-21 23:40:46 +02:00

(Migrated from codeberg.org)

Fixed in v2.22.0 — mode-select refresh (paper-card, chunky buttons, body.on-mode-select scope).