/* Sets · home-streak.css Stijl voor het bijbehorende home-blok. Zie js/home-streak.js. */ /* ─── Kleuren: het THEMA kiest de waarde, de STAAT kiest het token ──── Waarom deze omweg. Hiervoor stond de lichte variant als `html:not(.dark) .home-streak-chip` — specificiteit (0,2,1) — terwijl de staatsvarianten `.home-streak-chip.is-protected` en `.is-record` op (0,2,0) zitten. In lichte modus won de basisregel dus altijd van de staat: een beschermde chip was in Chrome pixel-identiek aan een gewone. Een tweeklassenselector wint níét "sowieso"; dat was een denkfout. De oplossing is niet nóg meer specificiteit stapelen, maar de botsing weghalen: het thema zet alleen tokens op de root (waar geen staatsregel mee concurreert) en elke staatsregel kiest welk token de chip leest. Zo blijft de laagste specificiteit werken en is de -volgorde tussen home-streak.css en streak-guard.css irrelevant. De waarden zelf zijn AA-gecontroleerd tegen de eigen chipachtergrond boven --sets-bg: lime licht 5,2:1 en goud licht 4,8:1 (was 3,2:1 en 3,9:1 — allebei onder de 4,5:1 die AA vraagt voor deze 9–10px tekst). Zodra styles/polish.css een accent-als-tekst-token levert horen deze twee lichte hexen daardoor vervangen te worden; zie html-f4.md §8. */ :root { --home-streak-fg: #c6f432; --home-streak-bg: rgba(198, 244, 50, 0.1); --home-streak-border: rgba(198, 244, 50, 0.32); --home-streak-record-fg: #d4af37; --home-streak-record-bg: rgba(212, 175, 55, 0.14); --home-streak-record-border: rgba(212, 175, 55, 0.45); } html:not(.dark) { --home-streak-fg: #53680d; --home-streak-bg: rgba(168, 208, 32, 0.14); --home-streak-border: rgba(138, 172, 26, 0.38); --home-streak-record-fg: #8a5407; --home-streak-record-bg: rgba(180, 83, 9, 0.1); --home-streak-record-border: rgba(180, 83, 9, 0.38); } /* De chip staat naast #dash-date in de header: even klein en even mono als de datum, zodat hij die regel niet uit balans trekt. */ .home-streak-chip { display: inline-flex; align-items: center; gap: 0.2rem; padding: 0.1rem 0.4rem 0.12rem; border-radius: 9999px; border: 1px solid var(--home-streak-border); background: var(--home-streak-bg); color: var(--home-streak-fg); font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; font-size: 9px; font-weight: 700; line-height: 1.5; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; transition: transform 0.12s ease, background-color 0.2s ease, border-color 0.2s ease; } /* Tailwind's .hidden is één klasse en zou hier kunnen verliezen van de volgorde in de . Een samengestelde selector wint altijd. */ .home-streak-chip.hidden { display: none; } .home-streak-chip:active { transform: scale(0.94); } /* Een gemaskeerd Lucide-icoon in plaats van een emoji: het erft `currentColor`, dus de vlam kleurt mee met de chip in plaats van in elk platform zijn eigen kleurtje mee te brengen. */ .home-streak-flame, .home-streak-shield { width: 11px; height: 11px; } .home-streak-count { /* Het getal is de reden dat de chip bestaat — iets groter dan de rand. */ font-size: 10px; } /* Streak evenaart het persoonlijk record: goud, net als PR's en badges. Eén regel voor beide thema's — de tokens hierboven wisselen zelf mee. */ .home-streak-chip.is-record { border-color: var(--home-streak-record-border); background: var(--home-streak-record-bg); color: var(--home-streak-record-fg); } /* Wie beweging uitzet, wil ook geen indruk-animatie. */ @media (prefers-reduced-motion: reduce) { .home-streak-chip { transition: none; } .home-streak-chip:active { transform: none; } } /* Milestone: de streak ging net omhoog. De vlam wiegt kort op en de chip flitst richting goud; js/home-streak.js haalt de klasse na ~1,5s weg. */ .home-streak-chip.is-milestone { animation: streakChipGlow 1.4s ease-out; } .home-streak-chip.is-milestone .home-streak-flame, .home-streak-chip.is-tick .home-streak-flame { animation: streakFlamePulse 1.1s var(--sets-ease-spring); } /* Dezelfde tik, maar voor een reeks die door een vrije week of vakantie overeind bleef: lime in plaats van goud. Goud claimt "zeldzaam en verdiend" (designregel G3) en dat is hier niet waar. */ .home-streak-chip.is-tick { animation: streakChipTick 1.4s ease-out; } @keyframes streakChipTick { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--sets-accent) 45%, transparent); } 100% { box-shadow: 0 0 0 12px transparent; } } @keyframes streakFlamePulse { 0% { transform: scale(1); } 30% { transform: scale(1.65) rotate(-8deg); } 55% { transform: scale(1.2) rotate(6deg); } 100% { transform: scale(1) rotate(0deg); } } @keyframes streakChipGlow { 0% { box-shadow: 0 0 0 0 rgba(229, 189, 75, 0.55); border-color: rgba(229, 189, 75, 0.8); } 100% { box-shadow: 0 0 0 12px rgba(229, 189, 75, 0); } } @media (prefers-reduced-motion: reduce) { .home-streak-chip.is-milestone, .home-streak-chip.is-tick, .home-streak-chip.is-milestone .home-streak-flame, .home-streak-chip.is-tick .home-streak-flame { animation: none; } }