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

Timestamp:

08/22/2026 09:54:51 AM (3 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

8bb3b09

Parents:

16fd4fe

Message:

Het bandje speelt als bandje: een cassette, een object, spoelen in seconden

Robins correctie (21-8): vooruit en achteruit deden hier next()/prev(), en dat
is een playlistgebaar. Dan is het een lijst met een cassetteplaatje erboven.
Een cassette kent geen "volgend nummer" -- je houdt de knop ingedrukt, de band
loopt door, en je laat los waar je bent.

Dat kan omdat audio-player.js een wachtrij al in EEN doorlopende
MediaSource-tijdlijn giet: "een trackwissel is een positie, geen omschakeling".
Een bandje IS die tijdlijn. Dus:

• seekBy(seconden) op de speler, over de nummergrenzen heen. Op de blob-motor (iOS, geen MSE) bestaat die tijdlijn niet; daar loopt spoelen tot de rand van het nummer en stapt dan naar de buur. Grover, maar eerlijker dan doen alsof.
• Bandmodus: de speler toont het BANDJE als titel met het lopende nummer eronder, en de teller loopt over de hele band in plaats van per nummer. Dat is wat "een object, geen losse tracks" betekent op het scherm.
• Vasthouden versnelt (4x tot 16x), loslaten stopt -- ook als je buiten de knop loslaat. Een korte tik spoelt vijf seconden, want vasthouden is met een spatiebalk geen gebaar.

Een echte cassette, als SVG. Verhouding 100,4 x 63,8 mm, de maat van een
compact cassette, dus viewBox 314x200: behuizing, labelvlak met de titel erop,
venster, twee spoelen met tandjes die meedraaien, de bandpakketten, vier
schroefjes en de openingen voor de kop en de capstans. De vorige versie waren
twee CSS-schijfjes.

Twee dingen die alleen door het echt te draaien boven kwamen:

• audio-player.js kiest zijn knoppen met een lijst KLASSENAMEN (PLAY_SELECTOR), niet met een regel over data-attributen. De cassetteknop droeg alle juiste data-pcms-* en deed niets. Er staat nu een test op.
• De sessie sloeg displayTimes().cur op als trackpositie. In bandmodus is dat de bandteller, dus een hersteld bandje sprong naar een plek die in dat nummer niet bestaat. Daarvoor is trackTijd() afgesplitst.

MOD_V 53, style.css v107, audio-player v35.

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

File:

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

src/assets/css/style.css

@@ -5078 +5078 @@
 
 /* ── Het bandje (mixtape) ──────────────────────────────────────────────
-   Zelfde familie als .post-album hierboven: dezelfde rand, dezelfde radius,
-   dezelfde papierkleur. Het verschil zit in wat je ziet draaien, niet in een
-   ander jasje -- een mixtape is een soort uitgave binnen Klonkt, geen ander
-   product.
-
-   Alles hieronder gebruikt de bestaande variabelen (--rule, --paper-2, --ink,
-   --accent), dus het volgt licht en donker en het accent van de site vanzelf. */
+   Een cassette, getekend als SVG op de echte maat: 100,4 x 63,8 mm, dus een
+   viewBox van 314x200. De vorige versie tekende twee schijfjes met CSS; dit is
+   een replica -- behuizing, labelvlak, venster, twee spoelen met tandjes, de
+   schroefjes in de hoeken en de openingen voor de kop en de capstans onderin.
+
+   Alle kleuren komen uit de bestaande variabelen, dus licht, donker en het
+   accent van de site volgen vanzelf. */
 .post-tape {
     position: relative;
@@ -5094 +5094 @@
 }
 
-/* De cassette zelf. De verhouding is die van een echt bandje (ongeveer 10:6),
-   zodat hij ook op een telefoon als cassette leest en niet als balk. */
-.tape-shell {
-    display: grid;
-    grid-template-rows: auto auto;
-    gap: .5rem;
-    padding: .8rem .8rem .4rem;
-}
-.tape-window {
-    position: relative;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 12%;
-    padding: .9rem 1.2rem;
-    border-radius: 10px;
-    background: color-mix(in srgb, var(--ink) 8%, transparent);
-    border: 1px solid var(--rule, rgba(0,0,0,.12));
-}
-/* De band tussen de spoelen. Een dun lijntje is genoeg: het gaat om de twee
-   draaiende schijven, dat is wat een cassette een cassette maakt. */
-.tape-band {
+.tape-shell { position: relative; padding: .8rem .8rem .3rem; }
+.tape-svg { display: block; width: 100%; height: auto; }
+
+/* De behuizing. Twee lagen zodat er een randje omheen zit, zoals bij een echt
+   doosje waar de bovenschaal iets uitsteekt. */
+.tape-body { fill: color-mix(in srgb, var(--ink) 82%, var(--paper, #fff)); }
+.tape-body-inner { fill: color-mix(in srgb, var(--ink) 70%, var(--paper, #fff)); }
+.tape-labelplate { fill: color-mix(in srgb, var(--paper, #fff) 92%, var(--accent)); }
+.tape-glass {
+    fill: color-mix(in srgb, var(--ink) 88%, transparent);
+    stroke: color-mix(in srgb, var(--paper, #fff) 25%, transparent);
+    stroke-width: 1.5;
+}
+.tape-pack { fill: color-mix(in srgb, var(--ink) 55%, var(--paper, #fff)); }
+.tape-ribbon { fill: color-mix(in srgb, var(--ink) 45%, var(--paper, #fff)); }
+.tape-hub { fill: var(--paper, #fff); }
+.tape-tooth { fill: color-mix(in srgb, var(--ink) 60%, var(--paper, #fff)); }
+.tape-screw { fill: color-mix(in srgb, var(--ink) 55%, var(--paper, #fff)); }
+.tape-slot { fill: color-mix(in srgb, var(--ink) 92%, transparent); }
+.tape-slot--capstan { fill: color-mix(in srgb, var(--ink) 96%, transparent); }
+
+/* Draaien. De tandjes zitten in dezelfde groep als de naaf, dus de hele spoel
+   draait als een geheel -- daar gaat het om, want aan die tandjes zie je pas
+   DAT hij draait. Het label blijft stil, anders wordt de titel onleesbaar. */
+.post-tape.is-playing .tape-reel { animation: tape-spin 3s linear infinite; }
+.post-tape.is-playing .tape-reel--right { animation-duration: 2.2s; }
+/* Spoelen: veel sneller, en achteruit ook echt achteruit. */
+.post-tape.is-winding .tape-reel { animation-duration: .45s; }
+.post-tape.is-winding-back .tape-reel { animation-direction: reverse; }
+@keyframes tape-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+    .post-tape.is-playing .tape-reel,
+    .post-tape.is-winding .tape-reel { animation: none; }
+}
+
+/* De tekst staat OP het labelvlak van de cassette. Percentages volgen de
+   viewBox, dus het blijft kloppen op elke breedte. */
+.tape-label {
     position: absolute;
-    left: 22%; right: 22%;
-    height: 3px;
-    background: color-mix(in srgb, var(--ink) 35%, transparent);
-    border-radius: 2px;
-}
-.tape-reel {
-    position: relative;
-    width: clamp(48px, 16vw, 76px);
-    aspect-ratio: 1;
-    border-radius: 50%;
-    background:
-      repeating-conic-gradient(from 0deg,
-        color-mix(in srgb, var(--ink) 22%, transparent) 0deg 12deg,
-        transparent 12deg 24deg);
-    border: 2px solid color-mix(in srgb, var(--ink) 30%, transparent);
-    display: grid;
-    place-items: center;
-}
-.tape-reel-hub {
-    width: 34%;
-    aspect-ratio: 1;
-    border-radius: 50%;
-    background: var(--paper, #fff);
-    border: 2px solid color-mix(in srgb, var(--ink) 40%, transparent);
-}
-/* Draaien doet hij alleen als hij speelt. De animatie staat op de spoel en niet
-   op de hele cassette: het label hoort stil te blijven, anders wordt de titel
-   onleesbaar. */
-.post-tape.is-playing .tape-reel { animation: tape-spin 2.4s linear infinite; }
-.post-tape.is-playing .tape-reel--right { animation-duration: 3.2s; }
-@keyframes tape-spin { to { transform: rotate(360deg); } }
-/* Wie liever geen beweging ziet, krijgt geen beweging. De cassette blijft dan
-   gewoon staan; de statusregel eronder vertelt nog steeds wat er speelt. */
-@media (prefers-reduced-motion: reduce) {
-    .post-tape.is-playing .tape-reel { animation: none; }
-}
-
-.tape-label {
-    padding: .5rem .6rem;
-    border-radius: 8px;
-    background-size: cover;
-    background-position: center;
-    position: relative;
-}
-/* Staat er een hoes achter het label, dan moet de tekst leesbaar blijven. */
-.tape-label[style] { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.7); }
+    left: 8.4%; right: 8.4%;
+    top: calc(.8rem + 11%);
+    height: 31%;
+    padding: .1rem .4rem;
+    color: color-mix(in srgb, var(--ink) 92%, transparent);
+    overflow: hidden;
+}
 .tape-kind {
     margin: 0;
-    font-size: .7rem;
-    letter-spacing: .06em;
+    font-size: clamp(.55rem, 1.6vw, .68rem);
+    letter-spacing: .14em;
     text-transform: uppercase;
-    opacity: .75;
-}
-.tape-title { margin: .1rem 0 0; font-size: 1.05rem; line-height: 1.25; }
-.tape-artist { margin: .05rem 0 0; font-size: .85rem; opacity: .8; }
-.tape-meta { margin: .15rem 0 0; font-size: .75rem; opacity: .65; }
-
-/* De knoppen: terugspoelen, spelen, vooruitspoelen. Meer heeft een bandje niet,
-   en dat is de bedoeling -- er is geen zoekbalk omdat je op een cassette niet
-   kunt zoeken. */
+    opacity: .7;
+}
+.tape-title {
+    margin: 0;
+    font-size: clamp(.85rem, 2.6vw, 1.1rem);
+    line-height: 1.15;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+.tape-artist { margin: 0; font-size: clamp(.65rem, 1.9vw, .8rem); opacity: .8; }
+.tape-meta { margin: 0; font-size: clamp(.6rem, 1.7vw, .72rem); opacity: .6; }
+
+/* De knoppen: terugspoelen, spelen, vooruitspoelen. Meer heeft een cassette
+   niet, en dat is de bedoeling -- er is geen zoekbalk omdat je op een bandje
+   niet kunt zoeken, alleen spoelen. */
 .tape-controls {
     display: flex;
@@ -5182 +5166 @@
     justify-content: center;
     gap: .6rem;
-    padding: .3rem 0 .7rem;
+    padding: .5rem 0 .6rem;
 }
 .tape-btn {
@@ -5194 +5178 @@
     cursor: pointer;
     padding: 0;
+    touch-action: manipulation;   /* vasthouden mag geen zoom of scroll worden */
+    user-select: none;
 }
 .tape-btn svg { width: 18px; height: 18px; }
@@ -5205 +5191 @@
 }
 .tape-btn--play svg { width: 22px; height: 22px; }
-/* Speelt hij, dan is dezelfde knop de pauzeknop. Twee knoppen zou een bandje
-   niet hebben. */
-.post-tape.is-playing .tape-btn--play svg path { d: path("M7 5h4v14H7zM13 5h4v14h-4z"); }
+.post-tape.is-winding .tape-btn--back,
+.post-tape.is-winding .tape-btn--fwd { border-color: var(--accent); color: var(--accent); }
 
 .tape-now {