Changeset 7cf8144 in Klonkt for src/assets/css/style.css

Timestamp:

08/18/2026 06:47:58 PM (3 weeks ago)

Author:

Bart <bart@…>

Branches:

main

Children:

9da8027

Parents:

2d2fd8c

git-author:

Bart <bart@…> (08/18/2026 05:28:31 AM)

git-committer:

Bart <bart@…> (08/18/2026 06:47:58 PM)

Message:

Lezen is een weergave van de feed, geen eigen plek

/read was een route met een eigen shell: eigen pagina, eigen chrome-gedrag, en
op een site zonder berichten een 404 -- een dode knop in de switcher. Nu is het
wat het altijd had moeten zijn: een derde waarde van body[data-feed-view], naast
timeline en grid. Dezelfde berichten, andere vorm.

De feed stuurt ze alledrie mee en CSS kiest, precies zoals timeline/grid dat al
deden. Het lijf loopt door PostAccessService, dus een gesloten poort levert ook
hier geen tekst op. "Meer laden" vult de leesstroom OOB mee aan, net als de
tegels.

DE LEGE STAAT zit in de :has(.feed-reader) op de verbergregel. Zonder berichten
rendert de leessectie niet, en dan blijft de tijdlijn staan -- want daar staat
"nog niets geschreven" met de knop om te beginnen. Zonder die voorwaarde was
Lezen op een verse site een wit scherm. Feeds zonder leessectie (cirkel,
archief) houden om dezelfde reden gewoon hun tijdlijn.

Wat weg kon, en dat is de winst:

• de route, pages/read.ejs, en 'on-read' als page-class;
• mod/read.js van 222 naar 51 regels. Het ophalen van buren, het corrigeren van de scrollpositie bij invoegen en het onderbreken van het snappen zijn niet opgelost maar OVERBODIG: de feed levert de berichten al. Wat blijft is de tik.
• read.end en read.load_error: het script plaatst geen zinnen meer.

De balken schuiven niet meer weg. Dat was mooi op een eigen scherm, maar hier
zou het de switcher verbergen waarmee je net koos -- en dan kun je niet terug.

MOD_V naar 4, style.css naar v70.

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

File:

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

src/assets/css/style.css

@@ -2353 +2353 @@
     padding: .35rem 0;
 }
-.view-switch-btn,
-.view-switch-link {
+.view-switch-btn {
     display: inline-flex;
     align-items: center;
@@ -2369 +2368 @@
     transition: all .15s;
 }
-.view-switch-btn:hover,
-.view-switch-link:hover {
+.view-switch-btn:hover {
     color: var(--ink);
     border-color: var(--ink-muted);
@@ -2400 +2398 @@
 body.on-home[data-feed-view="grid"]    .feed-grid,
 body.on-cirkel[data-feed-view="grid"]  .feed-grid { display: block; }
+
+/* -------- LEESWEERGAVE (data-feed-view="reader") --------
+   Dezelfde berichten als de tijdlijn, maar heel: één per scherm, grenzen door
+   scroll-snapping. GEEN eigen route en geen eigen shell -- de balken blijven
+   staan, want je bent nog op de feed en moet terug kunnen schakelen.
+   Pagina's zonder .feed-reader (cirkel, archief, post) negeren de keuze en
+   houden hun tijdlijn: er is hieronder simpelweg geen regel die die daar
+   verbergt. Zo is Lezen nooit een leeg scherm. */
+.feed-reader { display: none; }
+body.on-home[data-feed-view="reader"] .feed-reader { display: block; }
+/* :has(.feed-reader) is hier de LEGE STAAT, niet een truc. Zonder berichten
+   rendert de leessectie niet, en dan mag de tijdlijn niet verborgen worden --
+   want dáár staat "nog niets geschreven" met de knop om te beginnen. Zonder deze
+   voorwaarde is Lezen op een verse site een wit scherm. Hetzelfde geldt voor
+   feeds die (nog) geen leessectie hebben. */
+body.on-home[data-feed-view="reader"]:has(.feed-reader) .feed-timeline,
+body.on-home[data-feed-view="reader"]:has(.feed-reader) .feed-grid,
+body.on-home[data-feed-view="reader"]:has(.feed-reader) .pagination,
+body.on-home[data-feed-view="reader"]:has(.feed-reader) .related-posts,
+body.on-home[data-feed-view="reader"]:has(.feed-reader) .article-footer {
+    display: none !important;
+}
+
+/* Snappen doet de SCROLLCONTAINER, en dat is het document -- niet .read-stream,
+   die heeft overflow: visible en scrollt zelf niet. Proximity en geen mandatory:
+   in een bericht dat langer is dan het scherm moet je rustig door kunnen lezen. */
+html:has(body.on-home[data-feed-view="reader"]) { scroll-snap-type: y proximity; }
+/* En de browser niet óók laten compenseren als Load more er berichten bij zet:
+   Chrome en Firefox schuiven bij invoegen zelf mee (scroll anchoring), en dat
+   vecht met het snappen. */
+html:has(body.on-home[data-feed-view="reader"]),
+.feed-reader .read-stream { overflow-anchor: none; }
+
+.feed-reader .read-post {
+    scroll-snap-align: start;
+    scroll-snap-stop: normal;
+    min-height: 100svh;
+    max-width: 46rem;
+    margin: 0 auto;
+    /* De onderrand loopt achter de vaste tabbalk door; deze padding houdt de
+       TEKST erboven. */
+    padding: 2rem 1.2rem 4rem;
+    box-sizing: border-box;
+}
+/* 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); }
+
+.feed-reader .read-head { padding-bottom: .5rem; }
+.feed-reader .read-title { font-size: clamp(1.6rem, 4vw, 2.4rem); line-height: 1.15; margin: 0 0 .3rem; }
+/* De titel is een link, maar mag er niet als een link uitzien: dit is een
+   leesscherm, geen index. */
+.feed-reader .read-title a { color: inherit; text-decoration: none; }
+.feed-reader .read-title a:hover,
+.feed-reader .read-title a:focus-visible { text-decoration: underline; }
+.feed-reader .read-when { font-size: .85rem; opacity: .6; margin: 0; }
+
+.feed-reader .read-foot { margin-top: 2rem; }
+.feed-reader .read-open {
+    display: inline-block; font-size: .9rem; opacity: .75;
+    text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px;
+}
+.feed-reader .read-open:hover,
+.feed-reader .read-open:focus-visible { opacity: 1; }
+
+@media (prefers-reduced-motion: reduce) {
+    html:has(body.on-home[data-feed-view="reader"]) { scroll-snap-type: none; }
+}
 
 /* -------- GRID VIEW TILES (Instagram-stijl) -------- */