/* Layout for the Temperature sketch, keyed by the mode class shared/Modes.js puts on (mode-presentation | mode-desktop | mode-mobile). Only layout lives here; colours, fonts and radii stay in src/. The canvas keeps its 800×800 drawing coordinates — these rules only choose its on-screen size (p5 1.9 rescales mouse and touch to match). */ body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; } canvas { display: block; height: auto; /* the element's own 1:1 ratio; width is chosen per mode below */ } /* ---- Stand-alone controls: hidden in presentation, shown per mode below ---- */ /* ---- Presentation: the canvas alone, fitted to the viewport and centred ---- */ body.mode-presentation { height: 100vh; justify-content: center; } body.mode-presentation canvas { width: min(100vw, 100vh); } /* ---- Desktop stand-alone: the ‹ › row above the canvas ---- */ body.mode-desktop #preset_prev, body.mode-desktop #preset_next { min-width: 36px; font-size: 18px; line-height: 1; } body.mode-desktop canvas { width: min(100vw - 32px, 100vh - 56px); } /* ---- Mobile stand-alone: full-width canvas under a tappable row ---- */ body.mode-mobile #preset_prev, body.mode-mobile #preset_next { flex: 1; min-width: 44px; min-height: 34px; font-size: 20px; line-height: 1; } body.mode-mobile canvas { width: 100vw; }