Changeset 2f919c0 in Klonkt

Timestamp:

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

Author:

Robin Genis <roboburr@…>

Branches:

main

Children:

f1ee40e

Parents:

69a10e7

Message:

fix(grid): restore pinned/boosted accent ring over the new cover <img>

The is-pinned highlight was a tile outline, which the absolute cover <img> now paints over →
boosted tiles in the Cirkel lost their accent border. Redrawn as a ::after overlay above the
image (below badges + nsfw veil).

• assets/css/style.css — .grid-tile.is-pinned::after ring (replaces outline)
• views/shell.ejs — style.css cache buster v60

Location:

src

Files:

• assets/css/style.css (modified) (1 diff)
• views/shell.ejs (modified) (1 diff)

src/assets/css/style.css

@@ -2486 +2486 @@
     margin-top: -1px;
 }
-/* Pinned-tile overall highlight: accent border + subtle inner glow */
-.grid-tile.is-pinned {
-    outline: 3px solid var(--accent);
-    outline-offset: -3px;
+/* Pinned/boosted tile: accent ring. An outline on the tile is painted UNDER the absolute
+   cover <img>, so draw the ring as a pseudo-element overlay ABOVE the image (z-index above
+   the img, below the corner badges + nsfw veil). */
+.grid-tile.is-pinned { position: relative; z-index: 1; }
+.grid-tile.is-pinned::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border: 3px solid var(--accent);
+    border-radius: inherit;
+    pointer-events: none;
     z-index: 1;
-}
-.grid-tile.is-pinned:hover {
-    outline-offset: -2px;
 }
 .grid-tile-type {

src/views/shell.ejs

@@ -198 +198 @@
 
 <!-- v9 stylesheet (full palette system) -->
-<link rel="stylesheet" href="/assets/css/style.css?v=59">
+<link rel="stylesheet" href="/assets/css/style.css?v=60">
 <script>
 /* iOS safe-area, built by hand. env(safe-area-inset-top) resolves to 0 on this iOS in