Changeset 8c91ed3 in Klonkt for src/assets

Timestamp:

08/19/2026 06:43:41 PM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

5869b1f

Parents:

3a3a882

Message:

Covers in de leesweergave

Een bericht in de leesstroom begon met kale tekst: de cover ontbrak,
terwijl hij op de berichtpagina, in de tijdlijn en in Grid gewoon staat.
Nu staat hij er ook, boven de titel, in dezelfde volgorde als post.ejs.

Twee dingen komen van post-card en niet van post.ejs. De SLUIER: op de
berichtpagina hangt de NSFW-waarschuwing als banner boven de pagina,
want daar staat een bericht -- in een stroom kan dat niet, want de buren
rollen voorbij en dan is het beeld onderweg al te zien. En thumb(), want
hier staan er meerdere onder elkaar in een stroom die dooraanvult.

De hoogte is begrensd op 45svh. Een paneel is min-height:100svh en snapt;
een staande foto op volle breedte zou titel en eerste alinea onder de
vouw duwen, en dan begint elk bericht met een plaat waar je langs moet
scrollen om te zien wat het is.

Nagekeken en niet aangenomen: beide voedingen van readerItems() halen
SELECT p.* op, dus cover_image_url, cover_video_url, cover_alt, nsfw en
content_warning komen mee. Een versmalde kolommenlijst zou hier niets
opleveren zonder ergens te klagen.

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

File:

• src/assets/css/style.css (modified) (1 diff)

src/assets/css/style.css

@@ -2453 +2453 @@
 /* Een lijn tussen twee berichten: zonder grens is een stroom een lange brij. */
 .feed-reader .read-post + .read-post { border-top: 1px solid color-mix(in srgb, currentColor 12%, transparent); }
+
+/* De cover vult de leeskolom. Eigen regel, niet .post-cover hergebruikt: die
+   heeft een marge van 2rem die hier tegen de scroll-snap aan duwt.
+   De hoogtebegrenzing is er met opzet. Een paneel is min-height:100svh en snapt,
+   dus een staande foto op volle breedte zou de titel en de eerste alinea onder
+   de vouw duwen -- dan begint elk bericht met een plaat waar je langs moet
+   scrollen om te zien wat het IS. */
+.feed-reader .read-cover {
+    margin: 0 0 1.2rem;
+    border-radius: 10px;
+    overflow: hidden;
+}
+.feed-reader .read-cover img,
+.feed-reader .read-cover video {
+    display: block;
+    width: 100%;
+    height: auto;
+    max-height: 45svh;
+    object-fit: cover;
+}
 
 .feed-reader .read-head { padding-bottom: .5rem; }