Music room: mobile-friendly pass — shrink + fluid-scale text, keep panels in the viewport (Steve)

8769b6ffffab2a327b6a929538482b06a64fb948 · 2026-09-03 12:43:21 -0700 · Steve Abrams

- Phone media blocks (<=640px, <=400px): title h1 drops to clamp(17px,6vw,28px) then
  clamp(15px,6.4vw,24px); eyebrow/subtitle/panel/dock/museum text all shrunk; Controls
  button moved to right:12 so it isn't clipped; Videos + Music Room panels pinned
  left/right:10 width:auto so they stay inside the viewport; movie screen 92vw on phones.

Note: the room has NO background PNG to convert to SVG — its backdrop is the live generative
canvas. canyon-backdrop.png is unused; cover.png is only the ROOT landing's card thumbnail.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

Files touched

M room/index.html

Diff

commit 8769b6ffffab2a327b6a929538482b06a64fb948
Author: Steve Abrams <steve@designerwallcoverings.com>
Date:   Thu Sep 3 12:43:21 2026 -0700

    Music room: mobile-friendly pass — shrink + fluid-scale text, keep panels in the viewport (Steve)
    
    - Phone media blocks (<=640px, <=400px): title h1 drops to clamp(17px,6vw,28px) then
      clamp(15px,6.4vw,24px); eyebrow/subtitle/panel/dock/museum text all shrunk; Controls
      button moved to right:12 so it isn't clipped; Videos + Music Room panels pinned
      left/right:10 width:auto so they stay inside the viewport; movie screen 92vw on phones.
    
    Note: the room has NO background PNG to convert to SVG — its backdrop is the live generative
    canvas. canyon-backdrop.png is unused; cover.png is only the ROOT landing's card thumbnail.
    
    Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
---
 room/index.html | 27 +++++++++++++++++++++++++++
 1 file changed, 27 insertions(+)

diff --git a/room/index.html b/room/index.html
index dfe5441..3fe47fe 100644
--- a/room/index.html
+++ b/room/index.html
@@ -347,6 +347,33 @@
     .musicroom{top:auto;bottom:148px;left:12px;right:12px;width:auto}
     .musicroom .mr-tracks{max-height:96px}
   }
+  /* ---- Phones (Steve: mobile-friendly · shrink text · scale it) — fluid, smaller type;
+     panels kept inside the viewport; controls reachable. ---- */
+  @media (max-width:640px){
+    .titleplate{max-width:76vw;top:14px;left:14px}
+    .titleplate .kicker{font-size:9px;letter-spacing:.22em}
+    .titleplate h1{font-size:clamp(17px,6vw,28px);line-height:1.02}
+    .titleplate .chap{font-size:11px}
+    .chrome-toggle{top:12px;right:12px;font-size:12px;padding:7px 12px}
+    .videoroom,.musicroom{left:10px;right:10px;width:auto;font-size:11px}
+    .videoroom>header,.musicroom>header{font-size:12.5px;padding:9px 12px}
+    .vr-hint,.mr-hint,.mr-sub{font-size:10px}
+    .vr-row,.mr-result,.mr-year,.mr-search{font-size:10.5px}
+    .vr-list{max-height:32vh}
+    .dock{gap:8px;padding:8px 10px}
+    .field label{font-size:9px}
+    .field .val{font-size:10.5px}
+    .cams .btn,.chapters button,.btn,.mr-show,.mr-allbtn{font-size:10.5px;padding:6px 9px}
+    .museum{font-size:11.5px;padding:14px 16px;left:10px;right:10px}
+    .museum h2{font-size:15px}
+    .museum p{font-size:10.5px;line-height:1.55}
+    #stage.movie-on #venueVideo{width:calc(92vw * var(--movie-scale,1));top:28%}
+  }
+  /* ---- Very small phones — one more step down ---- */
+  @media (max-width:400px){
+    .titleplate h1{font-size:clamp(15px,6.4vw,24px)}
+    .videoroom,.musicroom{font-size:10.5px}
+  }
   @media (prefers-reduced-motion: reduce){
     .museum,.chapters button,.btn,.skip{transition:none}
     /* also silence the always-on keyframe loops (live-dot pulse, loading tiles) */

← a7cda26 Music room: adjustable movie screen (drag+scale) + optional · back to Dead Agentabrams · Videos panel: add Prev/Next concert + 30s back/fwd seek butt 20eefcf →