Changeset 1f640ff in Klonkt for src/assets/css/style.css

Timestamp:

07/30/2026 12:04:21 PM (6 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

f9b1c5c

Parents:

6dd26e5

Message:

Audio-tegel: golfvorm en titel elk hun eigen band, en balkjes ipv de rauwe golf

De titel stond dwars door de golfvorm heen (Robins schermafdruk): de
golfvorm hing absoluut gecentreerd en de flex-tegel centreerde de titel
er bovenop. Nu heeft elk zijn eigen band: golfvorm in de bovenhelft
(8-54 procent), titel op 60 procent, bronregel op 76. De maten staan
expliciet: een absoluut gepositioneerde img valt bij width/height auto
terug op zijn intrinsieke maat en de band klapte dicht.

En de golfvorm zelf is mooier (Robins tweede vraag): geen harige rauwe
golf meer maar balkjes in SoundCloud-stijl. Peak en average worden op 57
kolommen gesampled (zachte piek-top over heldere kern), nearest-neighbor
opgeblazen tot balkjes van 14px, en drawgrid wist er transparante
spleetjes van 5px tussen (c=black@0 met replace=1 schrijft echte
transparantie).

Changed files:
src/routes/activitypub.js

• het showwavespic-recept vervangen door de gelaagde balkjes-graph

src/views/partials/post-tile.ejs

• grid-tile-audio-klasse op de anchor als er een golfvorm is

src/assets/css/style.css

• grid-tile-wave: expliciete band (top 8, hoogte 46, breedte 84)
• grid-tile-audio: titel op 60 procent, bronregel op 76

remarks: geometrie numeriek geverifieerd in een browser-preview (golf
17.6-44.4 procent, titel 60-65.2, 58px ruimte, gradient intact) en het
balkjes-recept visueel beoordeeld op een tegel-gradient-compositie. De
bestaande audiopost houdt zijn oude dunne golfvorm-png; een verse upload
krijgt de balkjes. 345 tests groen.

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

File:

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

src/assets/css/style.css

@@ -2423 +2423 @@
 /* Audio tile (Shaer, Robins vraag 30-7): the waveform PNG is white on
    transparent and floats OVER the tile's own hue gradient, so every audio
-   post keeps its color and gets its shape. Contain + padding leaves the
-   centered title readable. */
+   post keeps its color and gets its shape. Wave and title each get their
+   own band (wave upper, title lower): centering both stacked them right
+   through each other (Robins schermafdruk). */
 .grid-tile-img.grid-tile-wave {
     background-color: transparent;
     object-fit: contain;
-    padding: 26% 10%;
+    /* explicit box, not auto: an absolutely positioned img falls back to its
+       intrinsic size when width/height are auto, collapsing the band */
+    top: 8%; left: 8%; right: auto; bottom: auto;
+    width: 84%; height: 46%;
     opacity: .85;
 }
+.grid-tile-audio .grid-tile-title { position: absolute; left: 10%; right: 10%; top: 60%; }
+.grid-tile-audio .grid-tile-gradient-src { position: absolute; left: 10%; right: 10%; top: 76%; }
 /* Cover videos are decorative, not players: let clicks + right-click pass through to the
    tile link so you get the normal link menu (not the browser's <video> menu/controls).