Changeset fdd0d61 in Klonkt for src/views/pages

Timestamp:

06/26/2026 02:31:53 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

c0e00a2

Parents:

79d1281

Message:

style(tijdlijn): show full images (no crop/letterbox) + more headroom above fedi tabs

Timeline images now render at their natural ratio (width 100%, height auto) stacked, on
white — never cropped and no letterbox bars. Added top margin to the fedi tab bar for
breathing room below the top nav.

File:

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

src/views/pages/timeline.ejs

@@ -33 +33 @@
           %>
           <% if (imgs.length) { %>
-            <div class="tl-media-grid<%= imgs.length === 1 ? ' is-single' : '' %>" data-n="<%= imgs.length %>">
-              <% imgs.slice(0, 4).forEach(function(m){ %>
+            <div class="tl-media">
+              <% imgs.forEach(function(m){ %>
                 <a class="tl-media-img" href="<%= m.url %>" target="_blank" rel="noopener"><img src="<%= m.url %>" alt="" loading="lazy" decoding="async"></a>
               <% }); %>
@@ -94 +94 @@
   .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;
-    border-radius: 14px; overflow: hidden; }
-  .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: #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; }
-  .tl-media-img:hover img { transform: scale(1.03); }
+  /* Always show the FULL image at its natural ratio — never cropped, no letterbox. */
+  .tl-media { display: flex; flex-direction: column; gap: .4rem; margin: .75rem 0 0; }
+  .tl-media-img { display: block; border-radius: 12px; overflow: hidden; background: #fff; }
+  .tl-media-img img { width: 100%; height: auto; display: block; }
 
   .tl-media-video, .tl-media-audio { width: 100%; margin: .75rem 0 0; border-radius: 12px; display: block; }