From fc3a133df4a26ea5cc33a9e458d62560fd9d6e0d Mon Sep 17 00:00:00 2001
From: Craig Jennings <c@cjennings.net>
Date: Sun, 12 Jul 2026 19:51:43 -0500
Subject: feat(gallery): linked reference photos in spec sheets; steady the
 slide toggle
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Reference photos now live in docs/prototypes/reference/ named after their widget, and a spec sheet links its photo via a ref field — one line per future card. The slide toggle also stops jumping on click (the order flip changed which flex item supplied the inline baseline; vertical-align middle pins it) and the thumb keeps one color — the revealed track signals the state, like the hardware.
---
 docs/prototypes/panel-widget-gallery.html | 14 +++++++++-----
 1 file changed, 9 insertions(+), 5 deletions(-)

(limited to 'docs/prototypes/panel-widget-gallery.html')

diff --git a/docs/prototypes/panel-widget-gallery.html b/docs/prototypes/panel-widget-gallery.html
index f3a23bd..410e559 100644
--- a/docs/prototypes/panel-widget-gallery.html
+++ b/docs/prototypes/panel-widget-gallery.html
@@ -106,6 +106,8 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 .igrid .ik{color:var(--steel);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;padding-top:1px}
 .igrid .iv{color:var(--dim);font-size:.82rem;line-height:1.45}
 .igrid .iv b{color:var(--silver);font-weight:400}
+.igrid .iv a{color:var(--gold);text-decoration:none;border-bottom:1px dotted var(--gold)}
+.igrid .iv a:hover{color:var(--gold-hi);border-color:var(--gold-hi)}
 
 /* ---- shared primitives ---- */
 .lamp{width:9px;height:9px;border-radius:50%;background:var(--pass);box-shadow:0 0 6px 1px rgba(116,147,47,.55)}
@@ -118,19 +120,19 @@ h2::after{content:"";height:1px;background:var(--wash);flex:1}
 
 /* slide toggle — after the iPod-hold-switch pill: dome thumb, revealed state engraving.
    Flex layout with fixed px only: absolute insets and stretched widths misrender under stage zoom. */
-.switch{display:inline-flex;align-items:center;justify-content:space-between;width:52px;height:23px;
-  border-radius:12px;padding:2px 7px 2px 2px;cursor:pointer;
+.switch{display:inline-flex;vertical-align:middle;align-items:center;justify-content:space-between;
+  width:52px;height:23px;border-radius:12px;padding:2px 7px 2px 2px;cursor:pointer;
   background:linear-gradient(180deg,#15130f,#242019);border:1px solid var(--slate);
   box-shadow:inset 0 1.5px 3px rgba(0,0,0,.55)}
 .switch::before{content:"OFF";order:2;font-size:7px;letter-spacing:.06em;font-weight:700;
   font-family:var(--mono);color:var(--dim)}
 .switch::after{content:"";order:1;width:17px;height:17px;border-radius:50%;
-  background:radial-gradient(circle at 35% 28%,#a8a396,#55524a);
+  background:radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a);
   box-shadow:0 1px 2.5px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.25)}
 .switch.on{background:linear-gradient(180deg,var(--amber-grad-top),var(--gold));border-color:var(--gold-hi);
   padding:2px 2px 2px 7px;box-shadow:inset 0 1.5px 3px rgba(0,0,0,.3)}
 .switch.on::before{content:"ON";order:1;color:var(--panel)}
-.switch.on::after{order:2;background:radial-gradient(circle at 35% 28%,#f6f2e8,#b0aa9a)}
+.switch.on::after{order:2}
 .switch.red{background:linear-gradient(180deg,#d98a6f,var(--fail));border-color:var(--fail);padding:2px 2px 2px 7px}
 .switch.red::before{content:"OFF";order:1;color:var(--cream)}
 .switch.red::after{order:2}
@@ -778,7 +780,8 @@ const INFO={
   limits:'Two states only. Ambiguous if the on-direction is not marked.',
   origin:'Slide switches (transistor radios, Walkman hold) → the iPod hold switch with its orange reveal → the iOS toggle (2007). This card wears the hardware skin of that lineage.',difficulty:'Intuitive.',
   prefer:'The state persists and gets glanced at more than changed. For period consoles use R03 or N01 instead.',
-  period:'The pill rendering is modern (iPod/iOS era); the slide-switch mechanism underneath is 1950s+.'},
+  period:'The pill rendering is modern (iPod/iOS era); the slide-switch mechanism underneath is 1950s+.',
+  ref:'reference/slide-toggle.jpg'},
 '02':{input:'Click one key to engage it; the others release. Click-only.',
   solves:'One-of-few mode selection where the active mode must glow.',
   use:'Common on consoles. Shines for 2-4 modes switched often.',
@@ -1492,6 +1495,7 @@ function card(host, no, name, html, note){
   if(inf){const d=document.createElement('details'); d.className='winfo';
     let rows='';
     for(const [k,lbl] of INFO_FIELDS) if(inf[k]) rows+=`<div class="ik">${lbl}</div><div class="iv">${inf[k]}</div>`;
+    if(inf.ref) rows+=`<div class="ik">reference</div><div class="iv"><a href="${inf.ref}" target="_blank">photo</a></div>`;
     d.innerHTML=`<summary>spec sheet</summary><div class="igrid">${rows}</div>`;
     c.appendChild(d);}
   host.appendChild(c); return c;
-- 
cgit v1.2.3