← back to CelebritySignatures
signature-edit: click any icon opens a lightbox of the full in-outfit look
d2c95734461deb2a283bf78e7fa8bbcf9ca2cf09 · 2026-09-09 13:24:38 -0700 · Steve
Clicking a card image or name opens a modal showing the full campaign image
(person in the signature outfit) + their real signature + shop/source links.
Keeps the crawlable /a/Q link for SEO (JS intercepts the click).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U2uvgXWs4FjLd6eDBDNUxP
Files touched
M public/signature-edit.html
Diff
commit d2c95734461deb2a283bf78e7fa8bbcf9ca2cf09
Author: Steve <steve@designerwallcoverings.com>
Date: Wed Sep 9 13:24:38 2026 -0700
signature-edit: click any icon opens a lightbox of the full in-outfit look
Clicking a card image or name opens a modal showing the full campaign image
(person in the signature outfit) + their real signature + shop/source links.
Keeps the crawlable /a/Q link for SEO (JS intercepts the click).
Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01U2uvgXWs4FjLd6eDBDNUxP
---
public/signature-edit.html | 132 +++++++++++++++++++++++++++++++++------------
1 file changed, 98 insertions(+), 34 deletions(-)
diff --git a/public/signature-edit.html b/public/signature-edit.html
index c258426..6254e74 100644
--- a/public/signature-edit.html
+++ b/public/signature-edit.html
@@ -35,12 +35,13 @@
.intro p { color:var(--muted); font-size:15.5px; line-height:1.7; max-width:56ch; margin:18px auto 0; }
.grid { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(14px,2vw,34px); max-width:1400px; margin:0 auto; padding:0 clamp(16px,3vw,40px) 80px; }
.ec { background:#fff; border:1px solid var(--line); border-radius:6px; overflow:hidden; display:flex; flex-direction:column; box-shadow:0 1px 3px rgba(0,0,0,.05),0 8px 30px rgba(0,0,0,.04); }
- .ec-img { display:block; background:#cdbb90; aspect-ratio:3/2; overflow:hidden; }
+ .ec-img { display:block; background:#cdbb90; aspect-ratio:3/2; overflow:hidden; cursor:pointer; }
.ec-img img { width:100%; height:100%; object-fit:cover; transition:transform .7s cubic-bezier(.2,.8,.2,1); }
.ec:hover .ec-img img { transform:scale(1.04); }
.ec-body { padding:22px 24px 24px; display:flex; flex-direction:column; gap:8px; }
.ec-no { font-size:11px; letter-spacing:.2em; color:var(--muted); }
- .ec-name { font:400 clamp(24px,2.6vw,32px)/1.05 'Playfair Display',Georgia,serif; margin:0; }
+ .ec-name { font:400 clamp(24px,2.6vw,32px)/1.05 'Playfair Display',Georgia,serif; margin:0; cursor:pointer; }
+ .ec-name:hover { color:var(--green); }
.ec-life { font-size:12px; color:var(--muted); margin:0; }
.ec-sig { height:52px; width:auto; max-width:230px; object-fit:contain; margin:8px 0 4px; }
.ec-cta { display:flex; align-items:baseline; gap:18px; flex-wrap:wrap; margin-top:6px; }
@@ -51,6 +52,27 @@
footer { border-top:1px solid var(--line); background:#fff; padding:40px 24px; text-align:center; color:var(--muted); font-size:13px; }
footer a { color:var(--green); }
.note { max-width:820px; margin:0 auto 40px; padding:0 24px; color:var(--muted); font-size:12.5px; line-height:1.7; text-align:center; }
+ /* lightbox */
+ .lb { position:fixed; inset:0; z-index:80; background:rgba(15,13,11,.82); display:flex; align-items:center; justify-content:center; padding:clamp(14px,3vw,48px);
+ opacity:0; visibility:hidden; transition:opacity .28s ease, visibility 0s linear .28s; }
+ body.lb-open .lb { opacity:1; visibility:visible; transition:opacity .28s ease; }
+ body.lb-open { overflow:hidden; }
+ .lb-card { background:#141210; color:#f4f1ea; border-radius:8px; overflow:hidden; max-width:1080px; width:100%; max-height:92vh;
+ display:grid; grid-template-columns:1.25fr .9fr; transform:translateY(10px); transition:transform .28s ease; }
+ body.lb-open .lb-card { transform:none; }
+ .lb-img { background:#cdbb90; }
+ .lb-img img { width:100%; height:100%; object-fit:cover; max-height:92vh; }
+ .lb-txt { padding:clamp(24px,3vw,46px); display:flex; flex-direction:column; justify-content:center; gap:14px; }
+ .lb-no { font-size:12px; letter-spacing:.26em; text-transform:uppercase; opacity:.55; }
+ .lb-name { font:400 clamp(28px,3.4vw,44px)/1.03 'Playfair Display',Georgia,serif; margin:0; }
+ .lb-life { font-size:12.5px; opacity:.6; margin:0; }
+ .lb-sig { height:60px; width:auto; max-width:260px; object-fit:contain; background:#fff; border-radius:6px; padding:8px 12px; margin:4px 0; }
+ .lb-cta { display:flex; gap:20px; align-items:baseline; flex-wrap:wrap; margin-top:6px; }
+ .lb-shop { font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:#f4f1ea; border-bottom:1px solid rgba(244,241,234,.6); padding-bottom:5px; }
+ .lb-src { font-size:12px; opacity:.6; color:#f4f1ea; }
+ .lb-close { position:absolute; top:18px; right:22px; z-index:2; background:none; border:0; color:#f4f1ea; font-size:15px; letter-spacing:.15em; text-transform:uppercase; cursor:pointer; opacity:.85; }
+ .lb-rend { font-size:11px; opacity:.45; margin:2px 0 0; }
+ @media(max-width:820px){ .lb-card { grid-template-columns:1fr; overflow-y:auto; } .lb-img img { max-height:52vh; } }
@media(max-width:720px){ .grid { grid-template-columns:1fr; } }
</style>
</head>
@@ -65,13 +87,13 @@
<section class="intro">
<span class="kick">The Signature Edit</span>
<h1>Ten icons. <em>One</em> signature each.</h1>
- <p>History's most recognizable hands, styled in the signature apparel — the hat, the tee, the socks — each piece carrying that icon's own authentic autograph. Every signature is traced to a real public-domain archive; never invented.</p>
+ <p>History's most recognizable hands, styled in the signature apparel — the hat, the tee, the socks — each piece carrying that icon's own authentic autograph. Every signature is traced to a real public-domain archive; never invented. <em>Click any icon to see the full look.</em></p>
</section>
<div class="grid">
- <article class="ec">
- <a class="ec-img" href="/a/Q91" aria-label="Abraham Lincoln — view the source signature">
- <img src="/assets/campaign-lincoln.jpg" alt="Abraham Lincoln seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="lincoln" data-name="Abraham Lincoln" data-q="Q91" data-death="1865" data-lic="Public domain" data-sig="https://upload.wikimedia.org/wikipedia/commons/c/c0/Abraham_Lincoln_1862_signature.svg" data-last="Lincoln">
+ <a class="ec-img" href="/a/Q91" aria-label="See Abraham Lincoln in the Signature Edit">
+ <img src="/assets/campaign-lincoln.jpg" alt="Abraham Lincoln in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 001</span>
@@ -84,9 +106,9 @@
</div>
</div>
</article>
- <article class="ec">
- <a class="ec-img" href="/a/Q937" aria-label="Albert Einstein — view the source signature">
- <img src="/assets/campaign-einstein.jpg" alt="Albert Einstein seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="einstein" data-name="Albert Einstein" data-q="Q937" data-death="1955" data-lic="Public domain" data-sig="https://upload.wikimedia.org/wikipedia/commons/d/d7/Albert_Einstein_signature_1934.svg" data-last="Einstein">
+ <a class="ec-img" href="/a/Q937" aria-label="See Albert Einstein in the Signature Edit">
+ <img src="/assets/campaign-einstein.jpg" alt="Albert Einstein in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 002</span>
@@ -99,9 +121,9 @@
</div>
</div>
</article>
- <article class="ec">
- <a class="ec-img" href="/a/Q5582" aria-label="Vincent van Gogh — view the source signature">
- <img src="/assets/campaign-vangogh.jpg" alt="Vincent van Gogh seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="vangogh" data-name="Vincent van Gogh" data-q="Q5582" data-death="1890" data-lic="Public domain" data-sig="https://upload.wikimedia.org/wikipedia/commons/c/cd/Vincent_van_Gogh_signature_%28Vincent%29.svg" data-last="Gogh">
+ <a class="ec-img" href="/a/Q5582" aria-label="See Vincent van Gogh in the Signature Edit">
+ <img src="/assets/campaign-vangogh.jpg" alt="Vincent van Gogh in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 003</span>
@@ -114,9 +136,9 @@
</div>
</div>
</article>
- <article class="ec">
- <a class="ec-img" href="/a/Q5593" aria-label="Pablo Picasso — view the source signature">
- <img src="/assets/campaign-picasso.jpg" alt="Pablo Picasso seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="picasso" data-name="Pablo Picasso" data-q="Q5593" data-death="1973" data-lic="Public domain" data-sig="https://upload.wikimedia.org/wikipedia/commons/6/6c/Picasso_Signatur-DuMont_1977.svg" data-last="Picasso">
+ <a class="ec-img" href="/a/Q5593" aria-label="See Pablo Picasso in the Signature Edit">
+ <img src="/assets/campaign-picasso.jpg" alt="Pablo Picasso in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 004</span>
@@ -129,9 +151,9 @@
</div>
</div>
</article>
- <article class="ec">
- <a class="ec-img" href="/a/Q5588" aria-label="Frida Kahlo — view the source signature">
- <img src="/assets/campaign-frida.jpg" alt="Frida Kahlo seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="frida" data-name="Frida Kahlo" data-q="Q5588" data-death="1954" data-lic="CC BY-SA 4.0" data-sig="https://upload.wikimedia.org/wikipedia/commons/8/87/Frida_Kahlo_signature_firma.svg" data-last="Kahlo">
+ <a class="ec-img" href="/a/Q5588" aria-label="See Frida Kahlo in the Signature Edit">
+ <img src="/assets/campaign-frida.jpg" alt="Frida Kahlo in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 005</span>
@@ -144,9 +166,9 @@
</div>
</div>
</article>
- <article class="ec">
- <a class="ec-img" href="/a/Q517" aria-label="Napoleon Bonaparte — view the source signature">
- <img src="/assets/campaign-napoleon.jpg" alt="Napoleon Bonaparte seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="napoleon" data-name="Napoleon Bonaparte" data-q="Q517" data-death="1821" data-lic="Public domain" data-sig="https://upload.wikimedia.org/wikipedia/commons/3/30/Napoleon_signature.svg" data-last="Bonaparte">
+ <a class="ec-img" href="/a/Q517" aria-label="See Napoleon Bonaparte in the Signature Edit">
+ <img src="/assets/campaign-napoleon.jpg" alt="Napoleon Bonaparte in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 006</span>
@@ -159,9 +181,9 @@
</div>
</div>
</article>
- <article class="ec">
- <a class="ec-img" href="/a/Q34969" aria-label="Benjamin Franklin — view the source signature">
- <img src="/assets/campaign-franklin.jpg" alt="Benjamin Franklin seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="franklin" data-name="Benjamin Franklin" data-q="Q34969" data-death="1790" data-lic="Public domain" data-sig="https://upload.wikimedia.org/wikipedia/commons/4/49/Benjamin_Franklin_Signature.svg" data-last="Franklin">
+ <a class="ec-img" href="/a/Q34969" aria-label="See Benjamin Franklin in the Signature Edit">
+ <img src="/assets/campaign-franklin.jpg" alt="Benjamin Franklin in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 007</span>
@@ -174,9 +196,9 @@
</div>
</div>
</article>
- <article class="ec">
- <a class="ec-img" href="/a/Q7245" aria-label="Mark Twain — view the source signature">
- <img src="/assets/campaign-twain.jpg" alt="Mark Twain seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="twain" data-name="Mark Twain" data-q="Q7245" data-death="1910" data-lic="Public domain" data-sig="https://upload.wikimedia.org/wikipedia/commons/d/df/Mark_Twain_Signatures-2.svg" data-last="Twain">
+ <a class="ec-img" href="/a/Q7245" aria-label="See Mark Twain in the Signature Edit">
+ <img src="/assets/campaign-twain.jpg" alt="Mark Twain in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 008</span>
@@ -189,9 +211,9 @@
</div>
</div>
</article>
- <article class="ec">
- <a class="ec-img" href="/a/Q1035" aria-label="Charles Darwin — view the source signature">
- <img src="/assets/campaign-darwin.jpg" alt="Charles Darwin seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="darwin" data-name="Charles Darwin" data-q="Q1035" data-death="1882" data-lic="Public domain" data-sig="https://upload.wikimedia.org/wikipedia/commons/b/b1/Charles_Darwin_Signature.svg" data-last="Darwin">
+ <a class="ec-img" href="/a/Q1035" aria-label="See Charles Darwin in the Signature Edit">
+ <img src="/assets/campaign-darwin.jpg" alt="Charles Darwin in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 009</span>
@@ -204,9 +226,9 @@
</div>
</div>
</article>
- <article class="ec">
- <a class="ec-img" href="/a/Q5592" aria-label="Michelangelo — view the source signature">
- <img src="/assets/campaign-michelangelo.jpg" alt="Michelangelo seated in the Celebrity Signatures products" loading="lazy">
+ <article class="ec" data-slug="michelangelo" data-name="Michelangelo" data-q="Q5592" data-death="1564" data-lic="Public domain" data-sig="https://upload.wikimedia.org/wikipedia/commons/2/2b/Michelangelo_Signature2.svg" data-last="Michelangelo">
+ <a class="ec-img" href="/a/Q5592" aria-label="See Michelangelo in the Signature Edit">
+ <img src="/assets/campaign-michelangelo.jpg" alt="Michelangelo in the Celebrity Signatures products" loading="lazy">
</a>
<div class="ec-body">
<span class="ec-no">№ 010</span>
@@ -225,7 +247,49 @@
<footer>
© <span id="yr"></span> Celebrity Signatures · <a href="/">the full archive of 7,000+ signatures →</a>
- <script>document.getElementById('yr').textContent=new Date().getFullYear();</script>
</footer>
+
+ <!-- lightbox -->
+ <div class="lb" id="lb" role="dialog" aria-modal="true" aria-label="Signature Edit look">
+ <button class="lb-close" id="lbClose" aria-label="Close">Close ✕</button>
+ <div class="lb-card">
+ <div class="lb-img"><img id="lbImg" src="" alt=""></div>
+ <div class="lb-txt">
+ <span class="lb-no" id="lbNo"></span>
+ <h2 class="lb-name" id="lbName"></h2>
+ <p class="lb-life" id="lbLife"></p>
+ <img class="lb-sig" id="lbSig" src="" alt="">
+ <div class="lb-cta"><a class="lb-shop" id="lbShop" href="#">Shop the Edit →</a><a class="lb-src" id="lbSrc" href="#">the source →</a></div>
+ <p class="lb-rend">Artistic rendering — a stylized depiction, not a photograph.</p>
+ </div>
+ </div>
+ </div>
+
+ <script>
+ document.getElementById('yr').textContent = new Date().getFullYear();
+ const body=document.body, lb=document.getElementById('lb');
+ const q=id=>document.getElementById(id);
+ function openLook(el){
+ const d=el.dataset;
+ q('lbImg').src='/assets/campaign-'+d.slug+'.jpg'; q('lbImg').alt=d.name+' in the Signature Edit';
+ q('lbNo').textContent='The '+d.last+' Edit';
+ q('lbName').textContent=d.name;
+ q('lbLife').textContent='d. '+d.death+' · signature '+d.lic+' · Wikimedia Commons';
+ q('lbSig').src=d.sig; q('lbSig').alt='Signature of '+d.name;
+ q('lbShop').href='/wear?qid='+d.q+'&name='+encodeURIComponent(d.name);
+ q('lbShop').textContent='Shop the '+d.last+' Edit →';
+ q('lbSrc').href='/a/'+d.q;
+ body.classList.add('lb-open');
+ }
+ function closeLook(){ body.classList.remove('lb-open'); }
+ document.querySelectorAll('.ec').forEach(card=>{
+ const open=e=>{ e.preventDefault(); openLook(card); };
+ card.querySelector('.ec-img').addEventListener('click', open);
+ card.querySelector('.ec-name').addEventListener('click', open);
+ });
+ q('lbClose').addEventListener('click', closeLook);
+ lb.addEventListener('click', e=>{ if(e.target===lb) closeLook(); });
+ document.addEventListener('keydown', e=>{ if(e.key==='Escape' && body.classList.contains('lb-open')) closeLook(); });
+ </script>
</body>
</html>
← 936d27e signature-edit: regenerate the 9 figures with distinct poses
·
back to CelebritySignatures
·
auto-data-snapshot: 2026-09-09T13:56:45 (1 data files) — ver 6140aaa →