/* * Grilled Cheese docs site. * * This REPLACES Asciidoctor's bundled stylesheet (:linkcss: + :stylesheet:), * so it has to cover everything the HTML5 backend can emit, headings, the * TOC, admonitions, listings, tables, footnotes, not just the parts the * current pages happen to use. A new page that reaches for an unstyled block * is the failure mode to watch for. * * The palette is the app's: toasted-cheddar accent on warm cream in light, * warm brown in dark. Values are lifted from lib/theme/app_theme.dart in the * dissipate repo so the docs and the product read as one thing. */ /* ---------------------------------------------------------------- tokens */ :root { --gc-accent: #b26a0c; --gc-accent-bright: #e8951c; --gc-surface: #fdf6e7; --gc-page: #f7edd9; --gc-hairline: #eadbbe; --gc-ink: #2a2012; --gc-ink-muted: #7c6f57; --gc-code-bg: #f2e6cd; --gc-measure: 46rem; /* The height of the fixed site nav, and the space reserves for it. Both read this one token, and so do the TOC rail's offset and the scroll-margin on headings, so the two-row narrow header below only has to redefine the token and everything that depends on the header's height follows. A hard-coded height anywhere else is a bug waiting for the next breakpoint. */ --gc-nav-height: 5.5rem; /* The two stacks a theme can select between, and the one in force. themes.css reassigns --gc-font per theme (Hacker is monospace, Merriweather serif); everything else reads --gc-font and does not care which. */ --gc-font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --gc-font-mono: "SF Mono", ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace; --gc-font: var(--gc-font-sans); /* Wireframes are monochrome renders on a light ground, so a dark theme inverts them rather than leaving a glaring white rectangle mid-page. See the .imageblock.wireframe rule. */ --gc-wf-invert: 0; } /* The header collapses to a single row once there is room for the brand, the nav links and both controls side by side. The breakpoint is deliberately generous rather than tuned to English: the nav labels are translated, and "Benutzerhandbuch" next to "KI-Werkzeuge" is half as wide again as "User Guide" next to "AI Tools". It is the same 62rem the TOC rail uses, so the wide layout arrives all at once. */ @media (min-width: 62rem) { :root { --gc-nav-height: 3.5rem; } } @media (prefers-color-scheme: dark) { :root { --gc-accent: #f0be43; --gc-accent-bright: #f0be43; --gc-surface: #241a12; --gc-page: #1a130d; --gc-hairline: #3a2e22; --gc-ink: #ede8de; --gc-ink-muted: #98917f; --gc-code-bg: #2f2419; --gc-wf-invert: 1; } } /* ------------------------------------------------------------------ base */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; padding-top: var(--gc-nav-height); background: var(--gc-page); color: var(--gc-ink); font-family: var(--gc-font); font-size: 17px; line-height: 1.65; text-rendering: optimizeLegibility; } a { color: var(--gc-accent); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } img { max-width: 100%; height: auto; } /* ------------------------------------------------------------- site nav */ /* * The bar carries four things: the brand, three translated nav links, the * theme picker and the language menu. Below 62rem that is more than fits on * one line of a phone, so the bar becomes two rows rather than wrapping at * whatever point the current locale's words happen to run out of room: * * narrow wide (>= 62rem) * [mark Grilled Cheese] [th][ln] [mark Grilled Cheese] [links] [th] [ln] * [User Guide AI Tools About ] * * Two rows rather than a hamburger because the site has three nav links, and * hiding three links behind a button that needs JavaScript to open would cost * more than the 2rem of screen it saves. Everything stays visible, and * everything except the theme picker works with JavaScript off. * * The row heights add up to --gc-nav-height exactly, at both layouts, which is * what keeps 's reservation honest. Change one, change the token. * * New rules here use logical properties (margin-inline-start, inset-inline-end) * rather than the physical left/right the rest of this file uses. The chrome * is the part that has to mirror in Arabic, and a property that mirrors itself * cannot fall out of step with css/rtl.css. */ .site-nav { position: fixed; inset: 0 0 auto 0; z-index: 20; height: var(--gc-nav-height); display: flex; flex-wrap: wrap; align-items: center; align-content: center; gap: 0 1rem; padding: 0 0.9rem; background: var(--gc-surface); border-bottom: 1px solid var(--gc-hairline); } /* The brand is the flexible one. It shrinks and clips before the controls next to it are pushed onto a line of their own, which is what stops row one ever becoming two rows and leaving the page's top reservation short. */ .site-nav__brand { display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; flex: 0 1 auto; min-width: 0; font-weight: 650; color: var(--gc-ink); text-decoration: none; letter-spacing: -0.01em; } .site-nav__brand img { flex: none; } .site-nav__brand span { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } /* On the narrowest phones the wordmark goes entirely: the mark alone still says whose site this is, and the row has a theme picker and a language menu to fit as well. */ @media (max-width: 24rem) { .site-nav__brand span { display: none; } } /* Row two on a phone: full-basis, so it wraps below the brand and the controls whatever the locale's labels measure. It scrolls rather than wraps in the extreme case, because a wrapped third row would leave content hidden under a bar taller than the space reserved for it. */ .site-nav__links { order: 2; flex: 1 1 100%; display: flex; align-items: center; height: 2.5rem; gap: 1rem; margin: 0; padding: 0; list-style: none; font-size: 0.85rem; overflow-x: auto; scrollbar-width: none; } .site-nav__links::-webkit-scrollbar { display: none; } .site-nav__links li { white-space: nowrap; } .site-nav__links a { color: var(--gc-ink-muted); text-decoration: none; } .site-nav__links a:hover { color: var(--gc-accent); } /* The theme picker and the language menu, as one group. The group is what the auto margin pushes to the end of the row, so the two controls stay together at every width and the language menu is always the last thing in the bar. */ .site-nav__controls { display: inline-flex; align-items: center; gap: 0.5rem; height: 3rem; margin-inline-start: auto; } @media (min-width: 62rem) { .site-nav__links { order: 0; flex: 0 1 auto; height: auto; gap: 1.25rem; font-size: 0.9rem; margin-inline-start: auto; overflow-x: visible; } .site-nav { flex-wrap: nowrap; gap: 0 1.5rem; padding: 0 1.25rem; } .site-nav__brand, .site-nav__controls { height: auto; } .site-nav__controls { margin-inline-start: 0; } } /* The theme picker, injected by js/themes.js. Styled here rather than in themes.css because it is chrome, not a theme, and because it has to look right before a theme is chosen. */ .theme-picker { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.85rem; color: var(--gc-ink-muted); } /* The word is decoration next to an obvious control; below the nav's crowding point the select alone carries the meaning. The select keeps an aria-label with the same word, set in js/themes.js, so hiding this costs nothing to a reader who is not looking at it. */ @media (max-width: 34rem) { .theme-picker__label { display: none; } /* A