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

Timestamp:

08/20/2026 02:27:56 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

88838bc

Parents:

d8f8f07

Message:

Lezen: Lenis voor het snappen op desktop, plus twee kleine dingen

WAAROM LENIS, en dat is niet het vloeiende scrollen: de DUUR van een snap is
met native scroll-snap niet in te stellen -- die zit in de browser. Robin
vroeg om een snellere snap, en dat was declaratief onmogelijk. Lenis' snap-
pakket geeft ons duration, easing, distanceThreshold en debounce.

distanceThreshold 12% de vangzone (native: browsereigen, ~200-300px)
duration 0.4s in totaal onder de halve seconde
easing easeOutQuart -- op de helft van de tijd is 94% van de

weg af, daarna zacht uitdempen. Bewust niet
Lenis' standaard easeOutExpo: die schiet weg
en kruipt zo lang na dat het lijkt of hij niet
afmaakt.

debounce 60ms niet de standaard 500; dat voelt als te laat

ALLEEN OP DESKTOP (hover: hover en pointer: fine). Op touch doet Lenis van
zichzelf niets -- syncTouch staat uit -- en is het systeem-scrollen al
soepel. Daar blijft de native CSS-snap staan die er nu is, inclusief het
anker van nul hoog en de richtingsschakelaar. Robins keuze: "enkel voor
desktop, dat is prima, logisch dat het niet op mobiel kan".

Omhoog niet snappen gaat met Lenis via snap.stop()/start(), een stuk
schoner dan de CSS-eigenschap omzetten. Beide wegen delen dezelfde
richtingsdetectie uit wiel, vinger en toets.

NOG NIET UIT: smoothWheel. Dat kwam er na het snappen bij, en het is de kant
die oppassen vraagt -- een Mac-trackpad heeft zijn EIGEN momentum en Lenis'
demping komt daar bovenop. Vandaar lerp 0.2 in plaats van de standaard 0.1.
Robin vond dat op 20-8 nog steeds te zweverig, dus dat getal moet nog omhoog
of smoothWheel moet terug naar false. Die tweede stand werkte ook; dan doet
Lenis alleen de snap. Dat staat zo in het commentaar bij de instellingen,
zodat de volgende sessie niet hoeft te raden waar de knop zit.

Gevendored in src/assets/js/vendor (Lenis 1.3.26, MIT, 43KB samen), want de
CSP staat geen CDN toe. Dynamisch geimporteerd, dus mobiel haalt het niet
op. VENDOR_V ophogen als die bestanden wijzigen. De CSP hoefde niet aan:
strict-dynamic staat een import vanuit een vertrouwde module toe.

TWEE KLEINE DINGEN uit dezelfde ronde:

• De terug-naar-boven-knop wijkt voor de mini-speler. Die kwam er anders bovenop te liggen (schermafbeelding). body.has-audio-player bestond al en wordt door audio-player.js gezet, dus dit volgt vanzelf.
• Vastgepind is nu zichtbaar in de leestitel, met hetzelfde pin-icoon als in de tijdlijn. In de leesstroom staat een gepind bericht bovenaan zonder dat je ziet waarom. Nagekeken met een echte pin op dev.

style.css naar v82, MOD_V naar 19.

Suite 1169/1169.

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

File:

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

src/assets/css/style.css

@@ -2587 +2587 @@
 .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; }
+/* Het pin-icoon voor de titel: meeschalend met de kop, maar duidelijk kleiner --
+   het is een markering en geen deel van de titel. */
+.feed-reader .read-pin {
+    display: inline-block;
+    vertical-align: baseline;
+    width: .62em; height: .62em;
+    margin-right: .35em;
+    color: var(--ink-muted);
+}
+.feed-reader .read-pin svg { width: 100%; height: 100%; display: block; }
 /* De titel is een link, maar mag er niet als een link uitzien: dit is een
    leesscherm, geen index. */
@@ -2635 +2645 @@
 @media (min-width: 768px) {
     .read-top { bottom: 1.5rem; right: 1.5rem; }
+}
+/* Staat de mini-speler onderin, dan wijkt de knop daarvoor -- anders komt hij er
+   bovenop te liggen (Robins schermafbeelding, 20-8). body.has-audio-player wordt
+   door audio-player.js gezet zodra de speler zichtbaar is, en weer weggehaald
+   als hij verdwijnt, dus dit volgt vanzelf.
+   Op mobiel staat de speler BOVEN de tabbalk gestapeld, dus daar komt zijn
+   hoogte bovenop de ruimte die er al gereserveerd was. */
+body.has-audio-player .read-top { bottom: calc(env(safe-area-inset-bottom, 0) + 4.75rem + 4.25rem); }
+@media (min-width: 768px) {
+    body.has-audio-player .read-top { bottom: calc(1.5rem + 4.25rem); }
 }
 @media (prefers-reduced-motion: reduce) {