/* 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; --dk-stream: 900px; /* a conversation's column */ /* The shell is the rail plus the content column, and it is centred as ONE unit. Getting this wrong is what an ultrawide monitor exposes: pin the rail to the viewport edge and centre the content in what is left, and at 3440px the nav ends up a thousand pixels away from the thing it controls, with a void on either side. Measured, before this existed: rail at 0..232, content at 1246..2426. --dk-bleed is what sits outside the shell on each side. It uses vw, so the rail (fixed, positioned against the viewport) and the body padding agree with each other; the content box is narrower than the viewport by the scrollbar, which makes the right-hand gutter a scrollbar wider than the left and nothing else. No overflow: the padding adds up to 100vw - --dk-max, which is always less than the body's own width. */ --dk-bleed: max(0px, (100vw - var(--dk-rail) - var(--dk-max)) / 2); } /* Wide monitors are common enough to deserve more than a 1180px column with a desert around it. The reading measure does not grow with it - prose is held by .dk-measure, chat by .bubble and .msg-row - so this buys room for the things that do use it: grids, splits, tables. */ @media (min-width: 1600px) { :root { --dk-max: 1320px; } } @media (min-width: 2100px) { :root { --dk-max: 1460px; } } /* ---- the shell ---------------------------------------------------- */ .dk body, body.dk { padding-left: calc(var(--dk-bleed) + var(--dk-rail)); padding-right: var(--dk-bleed); padding-bottom: 40px; /* the bottom bar is gone; reclaim its space */ } /* Not every app has a tab bar to turn into a rail - DataViz is one page with no nav at all - and reserving the rail's width for one that is not there is just a 232px hole down the left of the screen. Written as a removal rather than an addition on purpose: a browser without :has() ignores this rule and keeps the old behaviour, instead of dropping the padding on the apps that DO have a rail and letting it cover their content. `:not([hidden])` matters as much as `:has`. Trip Planner has a tab bar in its markup at all times and hides it until a trip is open, so its trips list - the first screen anyone sees - was pushed 232px right of centre by a rail that was not on screen. The list looked shoved sideways for no visible reason, which is most of what "it still feels like a phone app" meant. This is live: opening a trip unhides the bar and the shell shifts to make room for it, with no JavaScript involved. */ body.dk:not(:has(.dk-tabbar:not([hidden]))) { --dk-bleed: max(0px, (100vw - var(--dk-max)) / 2); padding-left: var(--dk-bleed); } /* 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