card grid: universal hover-preview — stamp --card-bg on card-img inline + ::after 3×3 tile-repeat shows seamless structure on hover. Matches wallco-ai pattern (reference: wallco-ai/public/css/site.css:347-385)

d6aa8dfd735a689fbf9cb17173e34a491a280b58 · 2026-05-28 12:11:41 -0700 · SteveStudio2

Files touched

M public/catalog.html
M server.js

Diff

commit d6aa8dfd735a689fbf9cb17173e34a491a280b58
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date:   Thu May 28 12:11:41 2026 -0700

    card grid: universal hover-preview — stamp --card-bg on card-img inline + ::after 3×3 tile-repeat shows seamless structure on hover. Matches wallco-ai pattern (reference: wallco-ai/public/css/site.css:347-385)
---
 public/catalog.html | 2 +-
 server.js           | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/public/catalog.html b/public/catalog.html
index 0a3efc2..da79e40 100644
--- a/public/catalog.html
+++ b/public/catalog.html
@@ -541,7 +541,7 @@
       return `<a class="card${selCls}" data-id="${it.id}" href="#" aria-label="${escapeHtml(it.title)} by ${escapeHtml(it.artist)}" style="position:relative">
         ${adminCb}
         ${adminX}
-        <div class="card-img" style="background-color:${fallbackHex}">
+        <div class="card-img" style="background-color:${fallbackHex}${imgUrl ? `;--card-bg:url('${imgUrl}')` : ''}">
           ${srcBadge}
           ${imgUrl ? `<img loading="lazy" decoding="async" src="${imgUrl}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">` : ''}
         </div>
diff --git a/server.js b/server.js
index b83bc50..d1dbf9f 100644
--- a/server.js
+++ b/server.js
@@ -209,7 +209,7 @@ app.get(['/catalog.html', '/catalog'], (req, res, next) => {
       const imgUrl = esc(it.image_url || '');
       const fallbackHex = esc(it.palette_primary_hex || '#222');
       return `<a class="card" data-id="${esc(it.id)}" href="#" aria-label="${esc(it.title)} by ${esc(it.artist)}">` +
-             `<div class="card-img" style="background-color:${fallbackHex}">` +
+             `<div class="card-img" style="background-color:${fallbackHex}${imgUrl ? `;--card-bg:url('${imgUrl}')` : ''}">` +
                srcBadge +
                (imgUrl ? `<img loading="lazy" decoding="async" src="${imgUrl}" alt="" style="position:absolute;inset:0;width:100%;height:100%;object-fit:cover">` : '') +
              `</div>` +

← 6204dd3 card grid: universal hover-preview — stamp --card-bg on card · back to Thesetdecorator · fix(pm2): raise thesetdecorator max_memory_restart 1G->2G to d2e84d0 →