mobile pass: responsive masthead (wrap + scrollable nav), 2-col grid on phones (layout-aware: ledger 1 / wall 4 / vitrine 1), full-width search, popup 96vw + 2-col works + full-width CTA, game stage + choices sized for phones, murals header/ctrls compact (verified at 390x844)

0faa6c25b54d8f386acd2999b62b105f7aba06fb · 2026-08-03 12:58:50 -0700 · Steve Abrams

Files touched

M public/game.html
M public/index.html
M public/murals.html

Diff

commit 0faa6c25b54d8f386acd2999b62b105f7aba06fb
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Mon Aug 3 12:58:50 2026 -0700

    mobile pass: responsive masthead (wrap + scrollable nav), 2-col grid on phones (layout-aware: ledger 1 / wall 4 / vitrine 1), full-width search, popup 96vw + 2-col works + full-width CTA, game stage + choices sized for phones, murals header/ctrls compact (verified at 390x844)
---
 public/game.html   | 12 ++++++++++++
 public/index.html  | 26 ++++++++++++++++++++++++++
 public/murals.html | 11 +++++++++++
 3 files changed, 49 insertions(+)

diff --git a/public/game.html b/public/game.html
index 69f62ec..230c8dd 100644
--- a/public/game.html
+++ b/public/game.html
@@ -68,6 +68,18 @@
   .best { text-align:center; font-size:13px; color:var(--muted); margin-top:14px; }
   .again { display:block; margin:20px auto 0; padding:12px 34px; border-radius:999px; border:none; background:var(--ink); color:#fff; font:600 15px 'Playfair Display',Georgia,serif; cursor:pointer; }
   @media (max-width:560px){ .choices{grid-template-columns:1fr} .games{grid-template-columns:1fr} }
+  @media (max-width:700px){
+    .masthead { height:auto; flex-wrap:wrap; padding:10px 14px; gap:8px 14px; }
+    .wordmark { font-size:19px; }
+    .gnav { margin-left:0; width:100%; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
+    .gnav a { font-size:12.5px; white-space:nowrap; }
+    main { padding:18px 12px 60px; }
+    h1 { font-size:24px; }
+    .panel { padding:18px 16px; border-radius:12px; }
+    .stage img { max-height:190px; }
+    .choice.art img { height:96px; }
+    .duo .d img { max-width:78vw; }
+  }
 </style>
 </head>
 <body>
diff --git a/public/index.html b/public/index.html
index 7bdf26a..d598806 100644
--- a/public/index.html
+++ b/public/index.html
@@ -131,6 +131,32 @@
     body[data-layout] .meta .name { opacity:1 !important; transform:none !important; }
   }
   .layout-chips .chip { font-size:12px; padding:4px 11px; }
+  /* ── mobile ── */
+  @media (max-width:700px) {
+    .masthead { height:auto; flex-wrap:wrap; padding:10px 14px; gap:8px 14px; }
+    .wordmark { font-size:19px; }
+    .gnav { margin-left:0; width:100%; gap:14px; overflow-x:auto; -webkit-overflow-scrolling:touch; }
+    .gnav a { font-size:12.5px; white-space:nowrap; }
+    header { padding:14px 16px 12px; }
+    h1 { font-size:20px; }
+    .valueprop { font-size:12.5px; }
+    main { padding:14px 12px 60px; }
+    .grid { grid-template-columns:repeat(2,1fr) !important; gap:10px; }
+    body[data-layout="ledger"] .grid { grid-template-columns:1fr !important; }
+    body[data-layout="ledger"] .sig { width:44%; }
+    body[data-layout="wall"] .grid { grid-template-columns:repeat(4,1fr) !important; }
+    body[data-layout="vitrine"] .grid { grid-template-columns:1fr !important; }
+    .sig { height:96px; padding:10px; }
+    .controls { gap:10px 14px; }
+    .search input { width:100%; }
+    .density { display:none; } /* columns are fixed on phones */
+    .ap-card { width:96vw; max-height:92vh; border-radius:10px; }
+    .ap-inner { padding:16px 16px 84px; }
+    .ap-name { font-size:22px; }
+    .works { grid-template-columns:repeat(2,1fr); }
+    .ap-cta { padding:10px 14px; }
+    .ap-cta a { width:100%; }
+  }
   /* artist details popup */
   #artistPop { position:fixed; inset:0; z-index:50; display:flex; align-items:center; justify-content:center; }
   #artistPop[hidden] { display:none; }
diff --git a/public/murals.html b/public/murals.html
index 005536c..48e54e3 100644
--- a/public/murals.html
+++ b/public/murals.html
@@ -82,6 +82,17 @@
   .msg.ok{color:var(--accent)} .msg.err{color:#b3261e}
   footer{max-width:1180px;margin:0 auto;padding:0 30px 50px;color:var(--muted);font-size:12.5px;line-height:1.7}
   @media(max-width:620px){.order form{grid-template-columns:1fr}.order label.wide,.order .summary,.msg{grid-column:1}}
+  @media(max-width:700px){
+    header{padding:12px 14px;gap:8px 12px}
+    header h1{font-size:19px}
+    header nav{margin-left:0;width:100%;gap:14px;overflow-x:auto;-webkit-overflow-scrolling:touch}
+    header nav a{white-space:nowrap;font-size:12.5px}
+    main{padding:18px 14px 60px}
+    .intro h2{font-size:23px}
+    .ctrls{gap:12px}
+    .ctrls .f{font-size:11px}
+    .readout{gap:12px;font-size:12px}
+  }
   /* — name finder (consensus component) — */
   .finder{margin-top:18px;background:#fff;border:1px solid var(--line);border-radius:12px;padding:15px 17px}
   .finder .lab{font-size:11.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);margin:0 0 8px}

← 133e8ee The Signature Games: 5-game arcade at /game — Whose Hand? (s · back to CelebritySignatures · Elegant front page: Photoshop Snell-Roundhand script logo (t aeefcc5 →