/* Desktop, for apps that were built phone-first. * * Measured before this existed: DataViz used 60% of a 1440px window, Friction * 44%, Trip Planner 47% - and DataViz and Friction had no min-width media * query at all. Trip Planner's header overlapped its own banner up there. * All five read as a phone app someone had opened in a browser. * * The rules, in order of how much they matter: * * 1. A bottom tab bar is a phone idiom. Above 900px it becomes a left * sidebar. This single change does more than everything else here. * 2. Use the width for something. A wider column is not a desktop layout; * showing two things at once is. Apps opt into that per-view with * .dk-split, because only the app knows what belongs side by side. * 3. Keep the reading measure. Body text still wraps at a sane width even * when the shell is 1400px - a 1400px-wide paragraph is worse, not * better. * * Opt in by adding class="dk" to and loading this after the app's own * styles. Everything below is scoped to .dk and to min-width, so a phone is * untouched. * * COPY. The source is eriks-projects/shared/desktop.css - edit it there and * run `node scripts/sync-shared.js`. CI fails if a copy drifts. */ @media (min-width: 900px) { :root { --dk-rail: 232px; --dk-gutter: 32px; --dk-max: 1180px; --dk-measure: 68ch; } /* ---- the shell ---------------------------------------------------- */ .dk body, body.dk { padding-left: var(--dk-rail); padding-bottom: 40px; /* the bottom bar is gone; reclaim its space */ } /* The tab bar becomes the rail. Four of these apps wrap their buttons in a .tabbar-inner, so both the wrapper and the inner are handled - the app only has to add .dk-tabbar to the