Een tegel leek uitgelijnd en vier niet, en dat lag aan waar de tekst begon
De sparkline is precies even hoog als het vak dat stat-sub reserveert, dus die raakte de onderrand. Een regel tekst in datzelfde vak begon bovenaan en liet er leegte onder. Vandaar dat de reactietijd uitgelijnd oogde en de rest niet. Opgelost met grid plus align-items: end, en niet met flex: dan blijft de tekst een gewoon blok dat afbreekt zoals het hoort, ook de mono-variant met een lange domeinnaam erin. De hoogte van de bovenste rij is niet verder vergroot. Dat was de andere weg naar hetzelfde beeld en die wilde de gebruiker uitdrukkelijk niet. De chevron van het instelkader staat links voor de titel in plaats van rechts aan de rand, en kleurt mee bij hover zoals het menu rechtsboven. Links is waar het driehoekje van de browser ook gestaan zou hebben, en het staat bij het woord waar het iets over zegt. De zelfcontrole is op het apparaat bevestigd: Answering, handdruk in 10 ms. Daarmee klopte de verklaring uit 0.0.18 en is open punt 5 helemaal rond. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
This commit is contained in:
@@ -238,8 +238,20 @@ body {
|
||||
.stat-sub.mono { font-family: var(--font-mono); overflow-wrap: anywhere; }
|
||||
/* Even hoog als de sparkline hieronder, en met dezelfde bovenmarge. Anders staat
|
||||
het getal van "Backend response" hoger dan de andere twee, want daar hangt een
|
||||
grafiekje onder in plaats van een regel tekst. */
|
||||
.stat-sub { font-size: 0.75rem; color: var(--text-sec); margin-top: 0.5rem; min-height: 34px; }
|
||||
grafiekje onder in plaats van een regel tekst.
|
||||
|
||||
De tekst staat onderin dat vak en niet bovenin (27-08-2026). Dat was het
|
||||
verschil dat de gebruiker zag: de sparkline is precies 34 pixels hoog en raakt
|
||||
dus de onderrand, terwijl een regel tekst van 34 pixels ruimte bovenaan begon
|
||||
en er leegte onder overliet. Nu liggen ze op dezelfde lijn.
|
||||
|
||||
Met grid en niet met flex: de tekst blijft dan een gewoon blok en breekt af
|
||||
zoals hij hoort, ook de mono-variant met lange domeinnamen. */
|
||||
.stat-sub {
|
||||
font-size: 0.75rem; color: var(--text-sec);
|
||||
margin-top: 0.5rem; min-height: 34px;
|
||||
display: grid; align-items: end;
|
||||
}
|
||||
|
||||
/* ── Badges ─────────────────────────────────────────────────────────────── */
|
||||
/* Zonder stip, op verzoek van de gebruiker (20-08-2026). De kleur van de badge
|
||||
@@ -513,13 +525,28 @@ body {
|
||||
.setup > summary::-webkit-details-marker { display: none; }
|
||||
.setup > summary::marker { content: ''; }
|
||||
/* Een chevron die meedraait, want zonder het driehoekje van de browser is er
|
||||
verder niets dat zegt dat dit open kan. */
|
||||
.setup > summary::after {
|
||||
content: ''; margin-left: auto; width: 0.5rem; height: 0.5rem;
|
||||
verder niets dat zegt dat dit open kan.
|
||||
|
||||
Links vóór de titel (27-08-2026, gebruiker). Hij stond rechts aan de rand, en
|
||||
dat is ver weg van het woord waar hij iets over zegt; links staat hij waar het
|
||||
driehoekje van de browser ook gestaan zou hebben.
|
||||
|
||||
Dicht wijst hij naar rechts, open naar beneden. align-self houdt hem op de
|
||||
hoogte van de titel, want de regel eromheen lijnt op de basislijn uit en een
|
||||
gedraaid vierkantje heeft er geen. */
|
||||
.setup > summary::before {
|
||||
content: ''; align-self: center; flex-shrink: 0;
|
||||
width: 0.5rem; height: 0.5rem;
|
||||
border-right: 2px solid var(--text-sec); border-bottom: 2px solid var(--text-sec);
|
||||
transform: rotate(45deg); transition: transform 0.2s var(--ease-out);
|
||||
transform: rotate(-45deg);
|
||||
transition: transform 0.2s var(--ease-out), border-color 0.2s var(--ease-out);
|
||||
}
|
||||
.setup[open] > summary::after { transform: rotate(-135deg); }
|
||||
.setup[open] > summary::before { transform: rotate(45deg); }
|
||||
/* Accent bij hover, net als het menu rechtsboven: dit zijn de twee dingen op deze
|
||||
pagina die opengaan als je erop klikt, en dan horen ze zich hetzelfde te
|
||||
gedragen. */
|
||||
.setup > summary:hover { color: var(--accent); }
|
||||
.setup > summary:hover::before { border-color: var(--accent); }
|
||||
.setup-form { min-width: 0; }
|
||||
.setup-value {
|
||||
display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
|
||||
|
||||
Reference in New Issue
Block a user