Changeset a64d705 in Klonkt

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

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/partials/post-card.ejs (modified) (2 diffs)
• views/shell.ejs (modified) (2 diffs)

src/assets/css/style.css

@@ -2377 +2377 @@
 }
 
-/* Transparent covers (PNG logos etc.) sit on white everywhere so they don't blend
-   into a dark theme. Opaque covers fully cover the white — no visible change. */
+/* Transparent covers (PNG logos etc.) sit on white so they don't blend into a dark
+   theme. The white is on the IMG, so the tile's accent-gradient placeholder shows
+   while the image is still loading. */
 .post-cover img,
 .post-list-cover img,
-.grid-tile:not(.grid-tile-gradient) { background-color: #fff; }
+.grid-tile-img { background-color: #fff; }
+/* Accent-gradient placeholder shown while the cover image loads (the image fades in
+   over it), instead of a white flash on cover tiles. */
+.grid-tile:not(.grid-tile-gradient) {
+    background-image: linear-gradient(135deg,
+        color-mix(in srgb, var(--accent, #888) 22%, var(--paper-2, var(--paper))) 0%,
+        color-mix(in srgb, var(--accent, #888) 6%, var(--paper-2, var(--paper))) 100%);
+}
 /* Cover as a real <img> (not background-image): browsers downsample <img> with the
-   high-quality image pipeline, so high-res line-art covers don't go jagged when shrunk. */
-.grid-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: blur(.4px); }
+   high-quality image pipeline, so high-res line-art covers don't go jagged when shrunk.
+   Fades in on load (.is-loading removed) so the placeholder shows meanwhile. */
+.grid-tile-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; filter: blur(.4px); transition: opacity .4s ease; }
+.grid-tile-img.is-loading { opacity: 0; }
 .grid-tile:hover { transform: scale(0.98); }
 .grid-tile-overlay {

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 */

src/views/shell.ejs

@@ -200 +200 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=60">
+<link rel="stylesheet" href="/assets/css/style.css?v=61">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in
@@ -737 +737 @@
      click reveals instead of following the card link or firing htmx navigation. -->
 <script>
+// Cover fade-in: a cover image that's still loading is hidden so the accent-gradient
+// placeholder behind it shows; it fades in once loaded. Cached/complete images stay
+// visible (no flash). Runs on load + htmx swaps.
+(function () {
+  if (window.__coverFadeWired) return; window.__coverFadeWired = true;
+  function scan(root) {
+    (root || document).querySelectorAll('.grid-tile-img, .post-list-cover img').forEach(function (img) {
+      if (img.dataset.fade) return; img.dataset.fade = '1';
+      if (img.complete && img.naturalWidth > 0) return;   // already loaded → leave visible
+      img.classList.add('is-loading');
+      var done = function () { img.classList.remove('is-loading'); };
+      img.addEventListener('load', done, { once: true });
+      img.addEventListener('error', done, { once: true });
+    });
+  }
+  scan(document);
+  document.body.addEventListener('htmx:afterSettle', function (e) { scan(e.target); });
+})();
+</script>
+
+<script>
 (function () {
   if (window.__nsfwWired) return; window.__nsfwWired = true;