Changeset d9f60f4 in Klonkt for src/assets/css/style.css

Timestamp:

08/20/2026 11:12:07 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

3ccca13

Parents:

96a99bf

Message:

Reader: only snap forward, and give posts twice the top margin

Top margin doubled (2rem -> 4rem on .read-post, with .read-anker's
scroll-margin-top kept in lockstep so the separator line still lands
exactly on the top edge after a snap — that line is the whole point).

Snapping now obeys one rule: only while scrolling DOWN, only to a point
still AHEAD, only within the catch zone. A post you already scrolled
into is never pulled back. Fixes a real bug on the way: the catch zone
was compared as the string '55%' against a number, so the forward
fallback never fired — it is a computed number now. Direction comes
from remembering the last non-zero velocity, because lenis' own
direction is already zero by the time the debounced snap fires.

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

File:

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

src/assets/css/style.css

@@ -2510 +2510 @@
     margin: 0 auto;
     /* De onderrand loopt achter de vaste tabbalk door; deze padding houdt de
-       TEKST erboven. */
-    padding: 2rem 1.2rem 4rem;
+       TEKST erboven. De BOVENmarge is verdubbeld (Robin, 21-8: 2rem -> 4rem):
+       na een snap staat de scheidingslijn op de bovenrand, en de tekst
+       daaronder krijgt meer lucht. MOET GELIJK BLIJVEN aan scroll-margin-top
+       op .read-anker hieronder -- lopen die uit elkaar, dan landt de lijn niet
+       meer precies op de bovenrand. */
+    padding: 4rem 1.2rem 4rem;
     box-sizing: border-box;
 }
@@ -2536 +2540 @@
     height: 0;
     scroll-snap-align: start;
-    /* Het anker staat BINNEN de padding van het artikel, dus 2rem onder de
-       streep. Zonder deze correctie landt de snap 32px te laag en staat de
-       scheidingslijn net boven beeld -- gemeten: 733 waar 700 hoort.
+    /* Het anker staat BINNEN de padding van het artikel, dus een padding-top
+       onder de streep. Zonder deze correctie landt de snap net zoveel te laag
+       en staat de scheidingslijn boven beeld -- gemeten: 733 waar 700 hoort.
        scroll-margin verschuift alleen het SNAPPUNT en niet de opmaak, dus het
        anker blijft waar het staat en de uitlijning klopt met de lijn.
-       Blijft in de pas met de padding-top van .read-post hierboven. */
-    scroll-margin-top: 2rem;
+       GELIJK aan de padding-top van .read-post hierboven; die ging 21-8 van
+       2rem naar 4rem, dus deze ook. */
+    scroll-margin-top: 4rem;
 }
 /* HET LAATSTE BERICHT SNAPT OOK (Robin, 21-8). Dat kon eerst niet: zijn