Changeset a64d705 in Klonkt for src/views/partials/post-card.ejs

Timestamp:

06/28/2026 05:25:46 PM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

600fbf3

Parents:

201ec06

Message:

feat(images): accent-gradient placeholder while covers load + fade-in

Cover tiles/cards now show an accent-coloured gradient placeholder while the image loads
(instead of a white flash), and the cover fades in once loaded. Cached images stay instant.
Makes image-heavy pages feel responsive even before thumbnails finish.

• assets/css/style.css — grid-tile gradient placeholder; grid-tile-img white moved to img + fade
• views/partials/post-card.ejs — post-list-cover gradient placeholder + img fade
• views/shell.ejs — cover fade-in script (hide-while-loading, instant for cached); buster v=61

File:

• src/views/partials/post-card.ejs (modified) (2 diffs)

src/views/partials/post-card.ejs

@@ -138 +138 @@
     margin-right: calc(-1 * clamp(1.25rem, 4vw, 2rem));
     width: calc(100% + 2 * clamp(1.25rem, 4vw, 2rem)) !important;
-    background: var(--paper-2);
+    /* Accent-gradient placeholder shown while the cover loads (the image fades in over it). */
+    background-image: linear-gradient(135deg,
+        color-mix(in srgb, var(--accent, #888) 22%, var(--paper-2)) 0%,
+        color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2)) 100%);
   }
   .post-list-cover img {
@@ -144 +147 @@
     object-fit: cover;
     display: block;
-  }
+    transition: opacity .4s ease;
+  }
+  .post-list-cover img.is-loading { opacity: 0; }
 
   /* Re-apply rounded corners on slightly larger phones */