/* The strip above a tool page. * * The tool pages - Explorer, Components, DCIM export - do NOT load site.css. * shell.js and these pages style body, header and main directly, and loading * the site stylesheet as well would mean two of them fighting over each of * those elements. So this file is the whole of what the site imposes on a tool: * one bar, written against the tool's own dark palette rather than ours. * * The pages used to be pinned to data-theme="dark", because a light masthead * over a dark tool is the one combination that cannot work. They are not any * more: site/tool-theme.css maps the shell's own tokens onto ours, so the tool * follows the site's theme and the bar can follow it too. */ .site-bar { display: flex; align-items: center; gap: 1rem; padding: 0 0.9rem; height: 42px; flex: none; /* --pt-surface, not --pt-ground: the shell's own header uses --panel, and the bar sits directly above it. Matching the ground instead made the two read as one undifferentiated slab. */ background: var(--pt-surface); border-bottom: 1px solid var(--pt-line); font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif; } .site-bar a { text-decoration: none; } .site-bar .brand { display: flex; align-items: center; gap: 0.45rem; color: var(--pt-ink); } .site-bar .brand img { display: block; } .site-bar .brand span { font-family: Archivo, ui-sans-serif, system-ui, sans-serif; font-weight: 700; font-size: 0.92rem; letter-spacing: -0.03em; } .site-bar .tld { color: var(--pt-brass); } .site-bar nav { margin-left: auto; display: flex; gap: 1.1rem; flex-wrap: wrap; } .site-bar nav a { color: var(--pt-ink-muted); font-size: 0.82rem; } .site-bar nav a:hover { color: var(--pt-ink); } .site-bar nav a[aria-current="page"] { color: var(--pt-brass); } /* Pages that hand the rest of the viewport to a tool. shell.js sizes itself from `main { flex: 1 }` inside its mount, so the mount has to be a flex column that fills what the bar leaves. */ body.tool { margin: 0; height: 100vh; display: flex; flex-direction: column; } body.tool > .fill { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* A PHONE MUST NOT SCROLL SIDEWAYS. The shell's side panel is `width: 23rem` (the Annotator adds a second, `#marks`, at 28rem), and a flex item will not shrink below its min-content - and the tree's rows are `nowrap`, so that is the longest row. At 360px the panel stayed 366px wide and the whole page scrolled. Letting it shrink hands the long rows to the tree's own `overflow: auto`. Below 720px only, so the desktop layout is untouched; the selector outranks shell.js's bare `aside` whatever order the two load in. */ @media (max-width: 719.98px) { body.tool main > aside { min-width: 0; } } /* ON A PHONE THE DRAWING GOES ON TOP. Beside a 23rem panel - two, on the Annotator - the stage was left 7px wide at 375px and nothing at 360px, so the drawing, the point of both tools, could not be seen at all. Below 720px the tool stacks: the stage full width on top with the larger share of the height, each panel full width underneath, scrolling on its own. shell.js fits the drawing to the stage's box, so it fills whatever this leaves it. The panels' `width` would be a height in a column, so the basis is set outright; the border moves from their left edge to their top. */ @media (max-width: 719.98px) { body.tool main { flex-direction: column; } body.tool main > #stage { flex: 3 1 0; min-height: 0; } body.tool main > aside { flex: 2 1 0; width: auto; min-height: 0; overflow: auto; border-left: none; border-top: 1px solid var(--line); } } /* THE BAR GROWS WHEN ITS LINKS WRAP. On a phone the nav no longer fits beside the brand and wraps onto a second row, and a bar held at `height: 42px` left that row hanging over the page underneath - Export, Docs and GitHub drawn on top of the tool's heading. `min-height` instead of `height`, so a bar with one row is exactly as tall as before - on the border-box tool pages and the content-box ones alike. The breathing room for two rows is padding on the nav, not the bar: one row plus that padding is still under 42px, so it only counts once the nav has wrapped. The rows sit closer than the links do side by side, or the bar would be mostly gap. */ @media (max-width: 719.98px) { .site-bar { height: auto; min-height: 42px; } .site-bar nav { row-gap: 0.3rem; padding: 0.35rem 0; } /* A menu hangs from its own button's right edge, and on a phone Export starts the second row - so its panel opened past the left of the screen, the first words of every item cut off. Hang it from the nav instead, whose right edge is the bar's. */ .site-bar nav { position: relative; } .site-bar nav .navmenu { position: static; } .site-bar nav .navmenu-items { max-width: calc(100vw - 1.8rem); } } /* Pages that just scroll - the component browser, the export viewer. */ /* The ported pages carry their own `body { ... }` rule with margins in it, and it loads after this file. Reset the margin on the class instead of fighting over the element, and let the wrapper do the padding. */ body.doc { margin: 0 !important; background: var(--pt-ground); color: var(--pt-ink); } body.doc .wrap-tool { padding: 0.9rem 1.2rem 2rem; } /* ── Export menu ─────────────────────────────────────────────────────────── * One nav item instead of one per format. Two exports already crowded the bar * and there are more coming - Visio, Lucidchart - so the bar cannot grow a slot * each time. * *
rather than a scripted menu: it opens on click and on Enter, closes * on Escape, and is reachable by keyboard and screen reader without a line of * JavaScript. A