Changeset 598f090 in Klonkt for src/assets/css/style.css

Timestamp:

08/19/2026 10:46:28 PM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

e46ebaa

Parents:

58cad21

Message:

De cover in de leesweergave: niet opblazen, niet bijsnijden

Barts melding (20-8): het plaatje bij een post in Lezen mag netter, zoals
het in de tijdlijn was. Nagemeten in de browser op dev, twee gevallen:

geen-koffie-wel-thee 221x165 natuurlijk -> 505x378 getoond (2,28x)
strike-homerun 553x464 natuurlijk -> 505x400 getoond (bijgesneden)

Allebei kwamen ze uit width:100% met object-fit:cover. De kleine werd ruim
twee keer opgeblazen en dus wazig; de grote verloor zijn onderkant tegen
de hoogtegrens. De tijdlijn deed dat nooit -- daar zat een cover in een
vakje van 120px, dus klein bleef klein.

Nu: width/height auto met max-width en max-height, zodat de browser de
verhouding zelf houdt en het beeld HEEL in het vak past. De figure krimpt
eromheen (fit-content) en staat gecentreerd, in plaats van een klein
plaatje in een veel te grote lijst te zetten. Wit erachter voor logo's met
doorzichtige achtergrond, dezelfde keuze als .post-list-cover.

De hoogtegrens van 45svh blijft: die houdt titel en eerste alinea boven de
vouw. Zonder het bijsnijden krimpt een staande foto nu netjes mee in
plaats van dat er een stuk af gaat.

style.css naar v72 -- /assets staat buiten development op max-age=1y, dus
zonder bump krijgt wie hier eerder was de oude opmaak bij de nieuwe pagina.

Co-Authored-By: Claude Opus 5 <noreply@…>

File:

• src/assets/css/style.css (modified) (2 diffs)

src/assets/css/style.css

@@ -2461 +2461 @@
    scrollen om te zien wat het IS. */
 .feed-reader .read-cover {
-    margin: 0 0 1.2rem;
+    /* Krimpt om het beeld heen en staat gecentreerd, in plaats van de kolom vol
+       te trekken. Anders staat een klein plaatje in een veel te grote lijst. */
+    width: fit-content;
+    max-width: 100%;
+    margin: 0 auto 1.2rem;
     border-radius: 10px;
     overflow: hidden;
@@ -2468 +2472 @@
 .feed-reader .read-cover video {
     display: block;
-    width: 100%;
+    /* GEEN width:100%. Dat blies een cover van 221x165 op tot 505x378 -- ruim
+       twee keer zo groot als hij is, en dus wazig. De tijdlijn deed dat nooit:
+       daar zat een cover in een vakje van 120px, dus klein bleef klein. Met
+       auto + max-width vult een grote afbeelding de kolom en blijft een kleine
+       op ware grootte staan.
+       En GEEN object-fit:cover: samen met de hoogtegrens sneed dat de onderkant
+       eraf (553x464 kwam er als 505x400 uit). Met max-width en max-height houdt
+       de browser de verhouding zelf en past het beeld HEEL in het vak. */
+    width: auto;
     height: auto;
+    max-width: 100%;
     max-height: 45svh;
-    object-fit: cover;
+    /* Een logo met doorzichtige achtergrond zweeft anders op de paginakleur;
+       dezelfde keuze als bij .post-list-cover in de tijdlijn. */
+    background-color: #fff;
 }