← back to CelebritySignatures
6 switchable shopping layouts (View chips), all info-on-hover: Gallery (refined default), Float (chromeless ink on cream), Plaque (dark plate slides over on hover), Ledger (auction-catalog rows), Vitrine (large tiles, glass caption fade), Wall (dense signature texture, hover lifts + floating name plate); persisted per visitor, touch devices keep info visible (TK-10181)
d1e72838bad147229e9fdcf5099619f4ee54506a · 2026-08-03 12:39:43 -0700 · Steve Abrams
Files touched
Diff
commit d1e72838bad147229e9fdcf5099619f4ee54506a
Author: Steve Abrams <steve@designerwallcoverings.com>
Date: Mon Aug 3 12:39:43 2026 -0700
6 switchable shopping layouts (View chips), all info-on-hover: Gallery (refined default), Float (chromeless ink on cream), Plaque (dark plate slides over on hover), Ledger (auction-catalog rows), Vitrine (large tiles, glass caption fade), Wall (dense signature texture, hover lifts + floating name plate); persisted per visitor, touch devices keep info visible (TK-10181)
---
public/index.html | 70 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 file changed, 70 insertions(+)
diff --git a/public/index.html b/public/index.html
index 6ae43a0..407a000 100644
--- a/public/index.html
+++ b/public/index.html
@@ -75,6 +75,62 @@
.info-chip:hover { background:var(--ink); color:#fff; border-color:var(--ink); }
/* touch / no-hover devices can't reveal on hover — keep the chip visible there */
@media (hover: none) { .info-chip { opacity:1; transform:none; pointer-events:auto; } }
+ /* ── 6 shopping layouts — signature only; ALL info reveals on hover ──
+ switched via body[data-layout]; persisted in prefs.layout */
+ /* L1 gallery (refined default): name+chip hidden until hover */
+ body[data-layout] .meta .name { transition:opacity .18s ease, transform .18s ease; }
+ body[data-layout="gallery"] .meta .name,
+ body[data-layout="float"] .meta .name { opacity:0; transform:translateY(3px); }
+ body[data-layout="gallery"] .card:hover .name, body[data-layout="gallery"] .card:focus-within .name,
+ body[data-layout="float"] .card:hover .name, body[data-layout="float"] .card:focus-within .name { opacity:1; transform:none; }
+ /* L2 float: no chrome at all — ink floating on cream */
+ body[data-layout="float"] .card { background:transparent; border:none; box-shadow:none; }
+ body[data-layout="float"] .sig { background:transparent; border:none; }
+ body[data-layout="float"] .meta { padding:6px 4px 10px; text-align:center; }
+ body[data-layout="float"] .card:hover .sig { background:#fff; border-radius:8px; }
+ /* L3 plaque: dark plate slides up over the signature on hover */
+ body[data-layout="plaque"] .card { position:relative; }
+ body[data-layout="plaque"] .sig { height:150px; border-bottom:none; }
+ body[data-layout="plaque"] .meta { position:absolute; left:0; right:0; bottom:0; background:rgba(20,18,14,.88); color:#fff;
+ transform:translateY(101%); transition:transform .22s ease; padding:10px 13px 12px; }
+ body[data-layout="plaque"] .meta .name { color:#fff; opacity:1; transform:none; }
+ body[data-layout="plaque"] .card:hover .meta, body[data-layout="plaque"] .card:focus-within .meta { transform:none; }
+ body[data-layout="plaque"] .info-chip { color:#e8e4dc; border-color:rgba(255,255,255,.4); }
+ /* L4 ledger: auction-catalog rows; details column fades in on hover */
+ body[data-layout="ledger"] .grid { grid-template-columns:1fr !important; gap:0; max-width:880px; }
+ body[data-layout="ledger"] .card { flex-direction:row; align-items:center; border:none; border-bottom:1px solid var(--line);
+ border-radius:0; box-shadow:none; background:transparent; }
+ body[data-layout="ledger"] .sig { height:84px; width:300px; flex:none; background:transparent; border:none; padding:10px 16px; justify-content:flex-start; }
+ body[data-layout="ledger"] .meta { flex-direction:row; align-items:center; gap:16px; opacity:0; transition:opacity .18s; }
+ body[data-layout="ledger"] .card:hover .meta, body[data-layout="ledger"] .card:focus-within .meta { opacity:1; }
+ body[data-layout="ledger"] .meta .name { opacity:1; transform:none; margin:0; }
+ body[data-layout="ledger"] .card:hover { background:#fff; }
+ /* L5 vitrine: large airy tiles, caption fades over glass */
+ body[data-layout="vitrine"] .grid { grid-template-columns:repeat(3,1fr) !important; gap:26px; }
+ body[data-layout="vitrine"] .card { position:relative; border-radius:6px; }
+ body[data-layout="vitrine"] .sig { height:230px; border-bottom:none; transition:transform .25s ease; }
+ body[data-layout="vitrine"] .card:hover .sig { transform:scale(1.05); }
+ body[data-layout="vitrine"] .meta { position:absolute; left:0; right:0; bottom:0; padding:12px 15px;
+ background:linear-gradient(transparent, rgba(255,255,254,.96) 45%); opacity:0; transition:opacity .2s; }
+ body[data-layout="vitrine"] .card:hover .meta, body[data-layout="vitrine"] .card:focus-within .meta { opacity:1; }
+ body[data-layout="vitrine"] .meta .name { opacity:1; transform:none; font:600 17px/1.2 'Playfair Display', Georgia, serif; }
+ /* L6 wall: dense texture of pure signatures; hovered one lifts with a floating name plate */
+ body[data-layout="wall"] .grid { grid-template-columns:repeat(8,1fr) !important; gap:8px; }
+ body[data-layout="wall"] .card { border:none; box-shadow:none; background:transparent; overflow:visible; }
+ body[data-layout="wall"] .sig { height:74px; padding:8px; background:transparent; border:none; transition:transform .15s; }
+ body[data-layout="wall"] .card:hover { z-index:5; }
+ body[data-layout="wall"] .card:hover .sig { transform:scale(1.6); background:#fff; border-radius:8px; box-shadow:0 10px 30px rgba(0,0,0,.18); }
+ body[data-layout="wall"] .meta { position:absolute; left:50%; transform:translateX(-50%) translateY(4px); top:100%;
+ background:#fff; border:1px solid var(--line); border-radius:8px; padding:7px 12px; box-shadow:0 8px 24px rgba(0,0,0,.15);
+ opacity:0; pointer-events:none; transition:opacity .15s; white-space:nowrap; z-index:6; }
+ body[data-layout="wall"] .card:hover .meta, body[data-layout="wall"] .card:focus-within .meta { opacity:1; pointer-events:auto; }
+ body[data-layout="wall"] .meta .name { opacity:1; transform:none; font-size:13px; }
+ /* touch devices: no hover — keep info visible in every layout */
+ @media (hover: none) {
+ body[data-layout] .meta { opacity:1 !important; transform:none !important; position:static !important; }
+ body[data-layout] .meta .name { opacity:1 !important; transform:none !important; }
+ }
+ .layout-chips .chip { font-size:12px; padding:4px 11px; }
/* artist details popup */
#artistPop { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; }
#artistPop[hidden] { display:none; }
@@ -160,6 +216,8 @@
<div class="density"><label>Density</label>
<input id="density" type="range" min="3" max="9" value="5">
</div>
+ <div><label>View</label></div>
+ <div class="chips layout-chips" id="layoutChips"></div>
</div>
</header>
<main>
@@ -247,6 +305,18 @@ function buildChips() {
document.querySelectorAll('.chip').forEach(x=>x.classList.toggle('on', x.dataset.c===c)); render(); };
}
$('#density').oninput = (e) => { prefs.density=+e.target.value; save(); render(); };
+// ── 6 switchable shopping layouts (signature-only; info on hover) ──
+const LAYOUTS = [
+ ['gallery','Gallery'], ['float','Float'], ['plaque','Plaque'],
+ ['ledger','Ledger'], ['vitrine','Vitrine'], ['wall','Wall'],
+];
+function applyLayout(){
+ document.body.dataset.layout = prefs.layout || 'gallery';
+ document.querySelectorAll('#layoutChips .chip').forEach(x=>x.classList.toggle('on', x.dataset.l===(prefs.layout||'gallery')));
+}
+$('#layoutChips').innerHTML = LAYOUTS.map(([k,label]) => `<span class="chip" data-l="${k}">${label}</span>`).join('');
+$('#layoutChips').onclick = (e) => { const c=e.target.closest('.chip'); if(!c) return; prefs.layout=c.dataset.l; save(); applyLayout(); };
+applyLayout();
// name search — debounced, transient (not persisted)
let qTimer=null;
$('#q').oninput = (e) => { clearTimeout(qTimer); qTimer=setTimeout(()=>{ prefs.q=e.target.value; render(); },150); };
← 5a07275 'Whose Hand?' signature-ID game at /game: 10 rounds, 4 fame-
·
back to CelebritySignatures
·
Gallery layout: names always visible below the details chip 21c7dea →