Phase 2: mobile-ready + tap-to-reveal

32fcf2fbcc9cad08ec831c34b33a1802023349c6 · 2026-05-19 11:27:36 -0700 · Steve Abrams

Files touched

M public/index.html

Diff

commit 32fcf2fbcc9cad08ec831c34b33a1802023349c6
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Tue May 19 11:27:36 2026 -0700

    Phase 2: mobile-ready + tap-to-reveal
---
 public/index.html | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index da2be3d..253d75a 100644
--- a/public/index.html
+++ b/public/index.html
@@ -118,7 +118,17 @@ h1.headline .accent-italic { color:var(--accent); font-style:italic }
 .card .sample-btn:hover { background:var(--accent); color:#fff }
 
 @media (max-width:1024px) { .grid { grid-template-columns:repeat(min(var(--cols), 4), 1fr) } }
-@media (max-width:720px) { .grid { grid-template-columns:repeat(2, 1fr) } .toolbar .density { display:none } }
+@media (max-width:720px) {
+  .grid { grid-template-columns:repeat(2, 1fr) }
+  /* keep sort visible on mobile — only the column-density slider is meaningless at a fixed 2-col layout */
+  .toolbar .density { display:none }
+  .card .sample-btn { padding:12px 10px }   /* ≥44px touch target */
+}
+/* Touch devices have no hover — reveal the card overlay so the title +
+   sample button are reachable without a hover state. */
+@media (hover: none) {
+  .card .overlay { transform:translateY(0); opacity:1 }
+}
 
 .loading { text-align:center; color:var(--muted); padding:32px; font-size:10px; letter-spacing:0.3em; text-transform:uppercase; font-weight:700 }
 .stat-line { font-size:10px; letter-spacing:0.3em; text-transform:uppercase; font-weight:600; color:var(--muted); margin-bottom:18px }

← c7101ed stage2: wire bleachresistantfabrics onto shared catalog (han · back to Bleachresistantfabrics · Phase 2b: harden .card .pat against long-token title clippin 36a208d →