Changeset c27c945 in Klonkt

Timestamp:

06/26/2026 02:16:44 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

2e45a369

Parents:

297c77d

Message:

fix(tijdlijn): white background behind images (transparent PNGs), not black

Timeline media images now sit on white (matching the rule that transparent images get a
white bg) instead of the black letterbox I used. Video keeps black (letterboxing, not a
transparent image).

File:

• src/views/pages/timeline.ejs (modified) (2 diffs)

src/views/pages/timeline.ejs

@@ -92 +92 @@
   .tl-content p { margin: .4rem 0; } .tl-content p:first-child { margin-top: 0; } .tl-content p:last-child { margin-bottom: 0; }
   .tl-content a { color: var(--accent, #06c); }
-  .tl-content img { max-width: 100%; height: auto; border-radius: 10px; }
+  .tl-content img { max-width: 100%; height: auto; border-radius: 10px; background: #fff; }
 
   .tl-media-grid { display: grid; gap: .3rem; margin: .75rem 0 0; grid-template-columns: 1fr 1fr;
@@ -98 +98 @@
   .tl-media-grid.is-single { grid-template-columns: 1fr; }
   .tl-media-grid[data-n="3"] .tl-media-img:first-child { grid-row: span 2; }
-  .tl-media-img { display: block; aspect-ratio: 16/11; background: var(--paper-2, #111); overflow: hidden; }
-  .tl-media-grid.is-single .tl-media-img { aspect-ratio: auto; max-height: 480px; background: #000; }
+  .tl-media-img { display: block; aspect-ratio: 16/11; background: #fff; overflow: hidden; }
+  .tl-media-grid.is-single .tl-media-img { aspect-ratio: auto; max-height: 480px; background: #fff; }
   .tl-media-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s ease; }
   .tl-media-grid.is-single .tl-media-img img { object-fit: contain; max-height: 480px; }