/* ============================================================ THE SIGNED-IN SHELL — one panel, one bar, one phone strip. Loaded by every page that is INSIDE the product: /home, the store, the conversations, publishing, a profile, the account page. Loaded by nothing else. It is written LAST in the head, after assets/site.css or assets/app.css, so that where the two describe the same box this one wins and there is exactly one description of the shell on the whole site. ## Why this file exists at all There were two signed-in shapes, and moving between them swapped the whole chrome: "If I click on community, it takes me back to the top header view. If I click on home, I goes back to side panel. If I click common, I go back to this view. … There is no consistency of type of view." /home drew a panel from assets/app.css; every other signed-in address drew a top bar from assets/site.css. Two stylesheets described two shells, so the two shells drifted — which is what "no consistency" is, in files. The shell now lives in ONE file that both of them load, and the markup that goes with it in ONE generator (scripts/build-header.mjs). There is no second copy left to disagree. The two page stylesheets stay as they were: site.css draws the marketing pages and the content of the store, app.css draws the content of /home. They are two bodies of content with two jobs. This is only the frame. ## FIXED, not sticky "Now if I scroll, even my side panel goes up. See? Look at this. Why it's not sticky properly, not fixed properly." `position: fixed` on all three, and is padded clear of them. A sticky box is still in the flow and still owned by whatever scrolls above it; a fixed box has no scroll position at all. The measure is applied to the content inside the padding, so the panel stays flush to the left edge of the window at 2560px exactly as it does at 1024. ## Tokens Every custom property below is defined by BOTH page stylesheets, in both themes, with the same values — --ink, --ink-2/3/4, --bg, --rail-bg, --surface, --line, --line-soft, --line-strong, --accent, --accent-soft, --shadow-1/2/3, --s-*, --t-*, --r-*, --dur, --ease, --font-mono. Nothing here defines a colour, so nothing here can disagree with the page it is framing, in either theme. The two that are the shell's own — how wide the panel is and how tall the bar is — are set here, and only here. ============================================================ */ :root { --rail-w: 236px; --topbar-h: 56px; --tabs-h: 58px; } /* ------------------------------------------------------------- on and off -- The shell is in the markup of every product page and drawn on none of them until says somebody is signed in. `data-session` is written before the first paint — by the server on a page a function rendered, by the flag cookie's script on a static one — so the correct frame is the first thing painted and the wrong one is never on screen for a frame. `display: none` rather than `hidden`: a panel that is not being used has to leave the accessibility tree as well as the picture, or a signed-out visitor reading a listing is offered a workspace they are not in. With JavaScript off and no cookie, nothing is set, and a product page is the marketing page it is to a stranger. That is the right way round: it is what every crawler gets, and it is the state the whole site works in. */ .rail, .appbar, .apptabs { display: none; } [data-session='in'] .in-app .rail, [data-session='in'] .in-app .appbar { display: flex; } /* One search box per screen. The bar's box is how you reach the store from anywhere else on the site. The store page has its own, sitting with the filters whose counts it changes, and for a while both were on screen at once — same name, same job, and they disagreed: search from the top and the top box emptied while the one below kept your words. So on the page that owns a search, the bar does not draw one. `:has()` rather than a class on the body, because the body's classes are written by the header generator for every page at once. The rule names the situation instead of the page: any page that already carries a search field of its own does not get a second one in the bar. The store and the community were both doing it — on /community the two were searching the SAME list under two different placeholders. */ [data-session='in'] .in-app:has(input[name='q']:not(#shell-q)) .appsearch { display: none; } /* With the box gone the bar had nothing holding its right-hand end, so the theme control and the avatar sat marooned beside the panel with 900px of empty bar to their right. They belong at the end of the bar either way. */ [data-session='in'] .in-app:has(input[name='q']:not(#shell-q)) .appbar-right { margin-left: auto; } /* The marketing header and the five-column marketing footer, on a page inside the product. "Then on home page, I mean the footer, here we have again a footer. This page is not meant to be having a footer at all." "Like marketing page side, things should stay at marketing page. I mean, you know, all of these things, docs and kind of stuff, this is not meant to be like this." Both go. The panel is the navigation and the bar is the account; a workspace does not need a sitemap at the bottom of every screen. The one door back to the pages that sell the app is the quiet link at the foot of the panel. Scoped to `.in-app` on purpose. A marketing page keeps its header and its footer whether or not the reader is signed in — /features.html is the site that sells the app, and a workspace frame around it would be the same confusion pointing the other way. */ [data-session='in'] .in-app > .site-head, [data-session='in'] .in-app > .site-foot { display: none; } [data-session='in'] .in-app { padding-left: var(--rail-w); padding-top: var(--topbar-h); background: var(--bg); } /* ------------------------------------------------------------- the panel -- */ .rail { position: fixed; left: 0; top: 0; bottom: 0; z-index: 60; width: var(--rail-w); flex-direction: column; gap: var(--s-5); margin: 0; padding: var(--s-4) var(--s-3) var(--s-3); border-right: 1px solid var(--line); border-radius: 0; background: var(--rail-bg); overflow-y: auto; overscroll-behavior: contain; } .rail-brand { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-md); color: inherit; text-decoration: none; transition: background var(--dur) var(--ease); } .rail-brand:hover { background: var(--line-soft); text-decoration: none; } .rail-brand-mark { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 7px; background: var(--accent); color: var(--accent-fg); } .rail-brand-name { min-width: 0; font-size: var(--t-md); font-weight: 600; letter-spacing: -0.02em; line-height: 1.2; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-group { display: flex; flex-direction: column; gap: 2px; } .rail-label { padding: 0 var(--s-2) var(--s-2); font-size: var(--t-2xs); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-4); } .rail-item { position: relative; display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 36px; padding: 0 var(--s-2); border-radius: var(--r-md); font-size: var(--t-md); text-align: left; text-decoration: none; color: var(--ink-2); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .rail-item svg { flex: none; color: var(--ink-4); transition: color var(--dur) var(--ease); } .rail-item:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; } .rail-item:hover svg { color: var(--ink-2); } .rail-item:active { background: var(--line); } .rail-item[aria-current='page'] { background: var(--surface); color: var(--ink); font-weight: 600; box-shadow: var(--shadow-1); } .rail-item[aria-current='page'] svg { color: var(--accent); } /* The marker sits in the panel's own left padding, not inside the row, so the selected place reads as attached to the edge of the window. */ .rail-item[aria-current='page']::before { content: ''; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: var(--accent); } .rail-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--s-1); padding-top: var(--s-3); border-top: 1px solid var(--line-soft); } /* THE ONE PROFILE ENTRY. "Then if I click on profile, we have profile here. We have profile here too." It was in the panel and in the account menu at the same time. It is here, and the menu in the bar leads to settings and out — never back to a place the panel or the phone strip is already the way to. Served pointing at /account#profile — a page that exists and works with the scripts switched off — and upgraded by assets/site-account.js to the person's own /@handle, with their face and name on it, the moment /api/store/me answers. Neither state is a control that does nothing. */ .rail-you { display: flex; align-items: center; gap: var(--s-3); width: 100%; padding: var(--s-2); border-radius: var(--r-md); text-align: left; text-decoration: none; color: inherit; transition: background var(--dur) var(--ease); } .rail-you:hover { background: var(--line-soft); text-decoration: none; } .rail-face { display: grid; place-items: center; flex: none; width: 28px; height: 28px; overflow: hidden; border: 1px solid var(--line); border-radius: 999px; background: var(--surface-3); color: var(--ink-3); font-size: var(--t-xs); font-weight: 600; } .rail-face img { width: 100%; height: 100%; object-fit: cover; } .rail-you-text { min-width: 0; } .rail-you-name { display: block; overflow: hidden; font-size: var(--t-sm); font-weight: 500; line-height: 1.25; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; } .rail-you-handle { display: block; overflow: hidden; font-family: var(--font-mono); font-size: var(--t-2xs); line-height: 1.4; color: var(--ink-3); text-overflow: ellipsis; white-space: nowrap; } /* The one door back to the site that sells the app. Its header lists Features, Docs, Changelog, Roadmap, About and GitHub, so one link reaches all six and the workspace does not carry a marketing menu of its own. */ .rail-away { display: flex; align-items: center; gap: var(--s-3); padding: var(--s-2); border-radius: var(--r-md); font-size: var(--t-xs); text-decoration: none; color: var(--ink-4); transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } .rail-away:hover { background: var(--line-soft); color: var(--ink-2); text-decoration: none; } .rail-away svg { flex: none; } /* --------------------------------------------------------------- the bar -- */ .appbar { position: fixed; top: 0; right: 0; left: var(--rail-w); z-index: 50; align-items: center; gap: var(--s-3); min-height: var(--topbar-h); padding: 0 var(--s-5); border-bottom: 1px solid var(--line-soft); background: var(--bg); } /* The brand belongs to the panel. When the panel has gone, the bar carries it. */ .appbar-brand { display: none; align-items: center; gap: var(--s-2); color: inherit; text-decoration: none; } .appbar-brand-name { font-size: var(--t-md); font-weight: 600; letter-spacing: -0.02em; color: var(--ink); } /* ONE SEARCH BOX, ONE TARGET. It searches the store, on every page, because the store is where most of this site's searchable text is and because a box that searches something different depending on which page you happen to be standing on is the same inconsistency in miniature. The conversations have their own search field on their own page. `assets/site-account.js` retargets this one to /community on the conversation pages, where the other answer is the obvious one, and moves the label with it so the words never say something the form does not do. A plain GET form: it works with the scripts switched off, and what it does is exactly what is written in it. */ .appsearch { display: flex; align-items: center; gap: var(--s-2); flex: 0 1 22rem; min-width: 0; height: 2rem; margin-left: auto; padding: 0 var(--s-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); color: var(--ink-3); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); } .appsearch:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .appsearch svg { flex: none; color: var(--ink-4); } .appsearch input { width: 100%; min-width: 0; border: 0; outline: none; background: none; font: inherit; font-size: var(--t-sm); color: var(--ink); } /* Safari draws its own clear button inside a search field and it collides with the border radius at this height. */ .appsearch input::-webkit-search-decoration, .appsearch input::-webkit-search-cancel-button { -webkit-appearance: none; } .appbar-right { display: flex; align-items: center; gap: var(--s-2); } /* The theme button, hidden until the theme script announces itself by putting `data-theme-choice` on . A control that cannot work is not drawn. */ .shell-theme { display: none; align-items: center; justify-content: center; flex: none; width: 2rem; height: 2rem; padding: 0; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink-3); cursor: pointer; transition: background var(--dur) var(--ease), color var(--dur) var(--ease); } :root[data-theme-choice] .shell-theme { display: inline-flex; } .shell-theme:hover { background: var(--line-soft); color: var(--ink); } .shell-theme svg { display: none; } :root[data-theme-choice='system'] .shell-theme svg[data-icon='system'], :root[data-theme-choice='light'] .shell-theme svg[data-icon='light'], :root[data-theme-choice='dark'] .shell-theme svg[data-icon='dark'] { display: block; } /* ------------------------------------------------------ the account menu -- */ /* A
, so it opens with no script, and signing out is a real form post the server answers with a redirect. The marketing header's account control is drawn by a script into an empty slot; this one is served with the page, because a menu that appears a beat after everything else is the thing that control was already criticised for. The script fills in the name and the face. It does not create the menu. */ .appmenu { position: relative; flex: none; } .appmenu-btn { display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 999px; cursor: pointer; list-style: none; } .appmenu-btn::-webkit-details-marker { display: none; } .appmenu[open] .appmenu-btn .rail-face { border-color: var(--accent); } .appmenu-panel { position: absolute; top: calc(100% + var(--s-2)); right: 0; z-index: 70; min-width: 13rem; padding: var(--s-1); border: 1px solid var(--line-strong); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-3); } .appmenu-who { display: flex; flex-direction: column; gap: 1px; padding: var(--s-2) var(--s-3) var(--s-3); border-bottom: 1px solid var(--line-soft); margin-bottom: var(--s-1); } .appmenu-name { overflow: hidden; font-size: var(--t-sm); font-weight: 600; color: var(--ink); text-overflow: ellipsis; white-space: nowrap; } .appmenu-handle { overflow: hidden; font-family: var(--font-mono); font-size: var(--t-2xs); color: var(--ink-4); text-overflow: ellipsis; white-space: nowrap; } .appmenu-item { display: flex; align-items: center; gap: var(--s-3); width: 100%; min-height: 2.25rem; padding: 0 var(--s-3); border: 0; border-radius: var(--r-sm); background: none; font: inherit; font-size: var(--t-sm); text-align: left; text-decoration: none; color: var(--ink-2); cursor: pointer; } .appmenu-item svg { flex: none; color: var(--ink-4); } .appmenu-item:hover { background: var(--line-soft); color: var(--ink); text-decoration: none; } .appmenu-panel form { margin: 0; } /* ------------------------------------------------------- the phone strip -- */ /* Below 860px a 236px panel is a quarter of the screen spent on navigation, so the panel goes and the same four places come back along the bottom — the place a thumb reaches. They are the same four addresses, in the same order, marked the same way, from the same list in scripts/build-header.mjs, so the phone is the desktop with the frame moved rather than a second design. What the panel's second group holds is not lost with it: "Your posts" and "Watching" are the tabs across /home's own feed, and "Your listings" is a heading on /account, which the account menu in the bar still opens. */ .apptabs { position: fixed; right: 0; bottom: 0; left: 0; z-index: 60; align-items: stretch; height: calc(var(--tabs-h) + env(safe-area-inset-bottom, 0px)); padding-bottom: env(safe-area-inset-bottom, 0px); border-top: 1px solid var(--line); background: var(--rail-bg); } .apptab { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; font-size: var(--t-2xs); text-decoration: none; color: var(--ink-4); } .apptab svg { flex: none; } .apptab[aria-current='page'] { color: var(--accent); font-weight: 600; } /* -------------------------------------------------------------- the sweep -- 1180 is where the labels stop fitting beside a readable column, so the panel keeps its rows and drops its words. 860 is where it goes entirely and the strip takes over. Both numbers are the ones the approved workspace design came with; the only change here is that a fixed panel narrows without the grid it used to be a column of. */ @media (max-width: 1180px) { :root { --rail-w: 68px; } .rail { padding-left: var(--s-2); padding-right: var(--s-2); align-items: stretch; } /* The group heading really does go: "Workspace" and "Yours" are decoration beside icons, and each group's