Changeset 2eca083 in Klonkt for src/assets/css

Timestamp:

06/28/2026 11:05:58 AM (2 months ago)

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

69a10e7

Parents:

73cffc3

Message:

fix(images): render grid + related covers as <img> (no jagged downscaling)

High-res line-art covers went jagged when shrunk into the small grid tiles / related cards
because they were CSS background-images (lower-quality GPU downscaling, worse on the
transform:scale(0.98) hover layer). Switched both to a real <img object-fit:cover>, which
browsers downsample with the high-quality image pipeline.

• views/partials/post-tile.ejs — grid cover = <img class=grid-tile-img>
• views/pages/post.ejs — related cover = <img class=post-related-img>
• assets/css/style.css — .grid-tile-img (absolute, object-fit:cover)
• views/shell.ejs — style.css cache buster v58

File:

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

src/assets/css/style.css

@@ -2381 +2381 @@
 .post-list-cover img,
 .grid-tile:not(.grid-tile-gradient) { background-color: #fff; }
+/* 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; }
 .grid-tile:hover { transform: scale(0.98); }
 .grid-tile-overlay {