diff --git a/Docs/CHANGELOG-electrum-gate.md b/Docs/CHANGELOG-electrum-gate.md index 0dd77f2..3e3c1c4 100644 --- a/Docs/CHANGELOG-electrum-gate.md +++ b/Docs/CHANGELOG-electrum-gate.md @@ -8,6 +8,21 @@ Wat er nog moet gebeuren staat **niet** hier maar in de plannen; zie [CONTINUE_H Een lijst met geplande features op twee plekken loopt uit elkaar, en dan is geen van beide meer te vertrouwen. +## [0.0.21] - 2026-08-27 + +### Changed + +- **Eén lettergrootte voor de waarde van alle vijf de widgets.** Er waren er drie: 1,9rem voor een getal, + 1,5rem voor `unknown` en 1,3rem voor een woord. Naast elkaar op één rij viel dat op, en terecht: + `964 307` oogde belangrijker dan `Fulcrum` of `Answering` ernaast, terwijl ze even belangrijk zijn. Nu + 1,55rem voor alle drie de gevallen. Dat is de maat waarop `Wrong certificate` op een vijfde van de + breedte binnen twee regels blijft en een blokhoogte zijn gewicht houdt. + +- **De dialoog sluit met een kruisje in plaats van het woord `Close`.** Het maalteken (U+00D7) en geen + letter x, en niet rood: er gaat niets kapot van sluiten, en rood is op deze pagina voor het geval waar + je iets aan moet doen. Het `aria-label` blijft `Close`, want een schermlezer die "maalteken" voorleest + zegt niets over wat de knop doet. + ## [0.0.20] - 2026-08-27 ### Changed diff --git a/whatsnext-electrum-gate/index.html.template b/whatsnext-electrum-gate/index.html.template index 6cac130..c3e8524 100644 --- a/whatsnext-electrum-gate/index.html.template +++ b/whatsnext-electrum-gate/index.html.template @@ -228,12 +228,22 @@ body { op 20-08-2026 op zijn telefoon zag. Met min(420px, 100%) mag de track krimpen tot de schermbreedte. */ .clients { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 1.2rem 2.4rem; } -.stat-val { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.1; } -.stat-val.unknown { color: var(--text-ter); font-size: 1.5rem; } -/* Twee widgets tonen een woord in plaats van een getal, en op 1,9rem loopt - "Wrong certificate" over drie regels. Kleiner, en met een afbreekpunt, want - afkappen met puntjes zou hier de betekenis wegnemen. */ -.stat-val.text { font-size: 1.3rem; line-height: 1.25; overflow-wrap: anywhere; } +/* Eén maat voor alle vijf de widgets (27-08-2026). Hier stonden er drie: 1,9rem + voor een getal, 1,5rem voor "unknown" en 1,3rem voor een woord. Op de rij naast + elkaar viel dat op, en terecht: "964 307" oogde groter dan "Fulcrum" ernaast, + terwijl het even belangrijk is. + + 1,55rem is de maat waarop allebei werkt. Groter en "Wrong certificate" loopt op + een vijfde van de breedte over drie regels; kleiner en een blokhoogte verliest + het gewicht dat hem het eerste maakt waar je naar kijkt. */ +.stat-val { font-size: 1.55rem; font-weight: 700; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.2; } +/* Alleen de kleur, geen eigen maat meer: onbekend is een andere toestand van + dezelfde waarde en hoort niet ook nog van formaat te verschillen. */ +.stat-val.unknown { color: var(--text-ter); } +/* Twee widgets tonen een woord in plaats van een getal. Die hoeven geen eigen + maat, wel een afbreekpunt: afkappen met puntjes zou hier de betekenis + wegnemen. */ +.stat-val.text { overflow-wrap: anywhere; } /* Rood is voor het geval waar je iets aan moet doen. Bewust niet voor "off": geen certificaat gekozen is de normale begintoestand van een verse installatie, en daar staat de melding bovenaan al voor. */ @@ -509,6 +519,20 @@ body { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.3rem 1.5rem; border-bottom: 1px solid var(--border); } +/* Kaal, met een accent bij hover, net als het menu en de chevron. Niet rood: er + gaat niets kapot van sluiten, en rood is op deze pagina voor het geval waar je + iets aan moet doen. */ +.sheet-close { + display: inline-flex; align-items: center; justify-content: center; + flex-shrink: 0; width: 2rem; height: 2rem; + font-family: inherit; font-size: 1.5rem; line-height: 1; + color: var(--text-sec); background: transparent; border: 0; + border-radius: var(--radius-sm); cursor: pointer; + transition: color 0.2s var(--ease-out); +} +.sheet-close:hover { color: var(--accent); } +.sheet-close:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } + /* Alleen dit deel scrollt, zodat de sluitknop in beeld blijft bij twintig certificaten. */ .sheet-body { @@ -828,7 +852,11 @@ body { terwijl je op "Settings…" klikte, en dan lijkt het even of je ergens anders bent uitgekomen dan je dacht. -->