Orkuncakilkaya
2f3833a295
The generated site had the shape of a product launch page: a near-black navy ground with mint/coral radial glows, a gradient-clipped headline, a glowing pill badge, nine emoji feature cards and scroll-reveal animations. None of it told a reader anything about the language. It is now typographic and light-first — a warm paper ground, a serif display face, one ink-blue accent used only where it means something, and rules instead of floating cards. Colour is reserved for code. Dark mode is the same design with the ground inverted, defined once as tokens under a single prefers-color-scheme block. Structurally: - base.css holds the tokens and shared chrome; site.css and docs.css hold what is specific to the landing page and the reference pages. They ship as linked files rather than being inlined into all 900+ pages, which takes the site from 16 MB to 5 MB and means a design change no longer needs a regenerate to be seen. - api.css was dead — the generator never referenced it, rendering the API index with item.css — and is gone. docs.css replaces item.css and covers all four reference page kinds. - Grids draw their separators as cell borders instead of bleeding a ruled background through gaps, so a final row with fewer cards than columns stops cleanly instead of leaving a grey hole. The feature card count is not a multiple of the column count at any breakpoint. - Inline code loses its tinted chip; in a language reference, a box behind every keyword turns a paragraph into confetti. - Fonts are the platform's own, so the site makes no webfont request. Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
268 lines
6.7 KiB
CSS
268 lines
6.7 KiB
CSS
/* base.css — the design tokens and shared chrome for every generated page.
|
|
*
|
|
* The site is deliberately typographic and light-first: a warm paper ground, a
|
|
* serif display face for headings, one ink-blue accent used only where it means
|
|
* something (links, the current page, a focused control), and colour otherwise
|
|
* reserved for code. Dark mode is the same design with the ground inverted, not
|
|
* a second theme — every colour below is a token, redefined once under
|
|
* prefers-color-scheme and nowhere else.
|
|
*
|
|
* Fonts are the platform's own. A language reference should render instantly
|
|
* and identically offline; a webfont round-trip buys nothing here. */
|
|
|
|
:root {
|
|
/* ground and ink */
|
|
--paper: #fcfcfa;
|
|
--paper-2: #f5f4f0;
|
|
--panel: #ffffff;
|
|
--ink: #17171a;
|
|
--ink-2: #3d3d44;
|
|
--muted: #67676f;
|
|
--rule: #e3e2dc;
|
|
--rule-2: #cfcec6;
|
|
|
|
/* the single accent */
|
|
--accent: #0f4c81;
|
|
--accent-ink: #0b3a63;
|
|
--accent-bg: #eaf1f8;
|
|
|
|
/* code surface and tokens */
|
|
--code-bg: #f7f6f2;
|
|
--code-rule: #e3e2dc;
|
|
--c-comment: #7a7a70;
|
|
--c-key: #8f2d56;
|
|
--c-type: #0f6b5c;
|
|
--c-str: #9a5518;
|
|
--c-num: #1d4f8c;
|
|
--c-annot: #6b3fa0;
|
|
--c-fn: #0f4c81;
|
|
--c-punc: #6a6a72;
|
|
--c-arg: #9a5518;
|
|
|
|
--radius: 6px;
|
|
--max: 1080px;
|
|
--hdr: 58px;
|
|
|
|
--sans: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
|
--serif: ui-serif, "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, "Times New Roman", serif;
|
|
--mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
|
|
}
|
|
|
|
@media (prefers-color-scheme: dark) {
|
|
:root {
|
|
--paper: #16161a;
|
|
--paper-2: #1c1c21;
|
|
--panel: #1a1a1f;
|
|
--ink: #e6e5e0;
|
|
--ink-2: #c2c1bb;
|
|
--muted: #8f8f98;
|
|
--rule: #2b2b32;
|
|
--rule-2: #3d3d46;
|
|
|
|
--accent: #7fb0dd;
|
|
--accent-ink: #a8ccec;
|
|
--accent-bg: #1b2733;
|
|
|
|
--code-bg: #1b1b21;
|
|
--code-rule: #2b2b32;
|
|
--c-comment: #7b7b84;
|
|
--c-key: #e08aa8;
|
|
--c-type: #64c9b4;
|
|
--c-str: #d9a066;
|
|
--c-num: #8fb8e8;
|
|
--c-annot: #b596e0;
|
|
--c-fn: #7fb0dd;
|
|
--c-punc: #8b8b94;
|
|
--c-arg: #d9a066;
|
|
}
|
|
}
|
|
|
|
*, *::before, *::after { box-sizing: border-box }
|
|
|
|
html {
|
|
-webkit-text-size-adjust: 100%;
|
|
scroll-behavior: smooth;
|
|
}
|
|
@media (prefers-reduced-motion: reduce) {
|
|
html { scroll-behavior: auto }
|
|
}
|
|
|
|
body {
|
|
margin: 0;
|
|
background: var(--paper);
|
|
color: var(--ink-2);
|
|
font-family: var(--sans);
|
|
font-size: 16px;
|
|
line-height: 1.65;
|
|
-webkit-font-smoothing: antialiased;
|
|
text-rendering: optimizeLegibility;
|
|
}
|
|
|
|
h1, h2, h3, h4 {
|
|
font-family: var(--serif);
|
|
color: var(--ink);
|
|
font-weight: 600;
|
|
line-height: 1.2;
|
|
letter-spacing: -0.005em;
|
|
margin: 0;
|
|
}
|
|
|
|
a { color: var(--accent); text-decoration: none }
|
|
a:hover { text-decoration: underline; text-underline-offset: 2px }
|
|
|
|
:focus-visible {
|
|
outline: 2px solid var(--accent);
|
|
outline-offset: 2px;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 24px }
|
|
.muted { color: var(--muted) }
|
|
.mono, code, pre, kbd { font-family: var(--mono) }
|
|
|
|
/* Inline code carries no chip: the mono face plus the darker ink is already a
|
|
clear enough break from running text, and a tinted box behind every keyword
|
|
in a language reference turns a paragraph into confetti. */
|
|
code {
|
|
font-size: 0.905em;
|
|
color: var(--ink);
|
|
}
|
|
pre code { font-size: inherit }
|
|
|
|
pre {
|
|
margin: 14px 0 0;
|
|
padding: 15px 17px;
|
|
overflow-x: auto;
|
|
font-size: 13px;
|
|
line-height: 1.7;
|
|
tab-size: 2;
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--code-rule);
|
|
border-radius: var(--radius);
|
|
color: var(--ink);
|
|
}
|
|
pre::-webkit-scrollbar { height: 9px }
|
|
pre::-webkit-scrollbar-thumb { background: var(--rule-2); border-radius: 5px }
|
|
|
|
/* syntax tokens, shared by the highlighter and the hand-written terminal block */
|
|
.t-com { color: var(--c-comment); font-style: italic }
|
|
.t-key { color: var(--c-key) }
|
|
.t-type { color: var(--c-type) }
|
|
.t-str { color: var(--c-str) }
|
|
.t-num { color: var(--c-num) }
|
|
.t-annot { color: var(--c-annot) }
|
|
.t-fn { color: var(--c-fn) }
|
|
.t-punc { color: var(--c-punc) }
|
|
.t-arg { color: var(--c-arg) }
|
|
|
|
/* ---------- header ---------- */
|
|
|
|
header.nav {
|
|
position: sticky;
|
|
top: 0;
|
|
z-index: 50;
|
|
background: color-mix(in srgb, var(--paper) 92%, transparent);
|
|
backdrop-filter: saturate(1.4) blur(8px);
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
.nav-in { display: flex; align-items: center; gap: 14px; min-height: var(--hdr) }
|
|
|
|
.brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 9px;
|
|
font-family: var(--serif);
|
|
font-weight: 600;
|
|
font-size: 18px;
|
|
color: var(--ink);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.brand:hover { text-decoration: none }
|
|
.logo {
|
|
width: 23px; height: 23px;
|
|
flex: none;
|
|
display: grid;
|
|
place-items: center;
|
|
border: 1px solid var(--rule-2);
|
|
border-radius: 4px;
|
|
background: var(--panel);
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
font-weight: 500;
|
|
color: var(--accent);
|
|
}
|
|
|
|
.nav-toggle {
|
|
margin-left: auto;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 38px; height: 38px;
|
|
border: 1px solid var(--rule-2);
|
|
border-radius: var(--radius);
|
|
background: var(--panel);
|
|
color: var(--ink);
|
|
font-size: 17px;
|
|
line-height: 1;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.nav-links {
|
|
display: none;
|
|
position: absolute;
|
|
top: 100%; left: 0; right: 0;
|
|
flex-direction: column;
|
|
background: var(--paper);
|
|
border-bottom: 1px solid var(--rule);
|
|
padding: 0 24px 8px;
|
|
}
|
|
header.nav.open .nav-links { display: flex }
|
|
.nav-links a {
|
|
color: var(--ink-2);
|
|
font-size: 15px;
|
|
padding: 13px 2px;
|
|
border-top: 1px solid var(--rule);
|
|
}
|
|
.nav-links a:first-child { border-top: none }
|
|
|
|
@media (min-width: 760px) {
|
|
.nav-toggle { display: none }
|
|
.nav-links {
|
|
display: flex;
|
|
position: static;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
gap: 26px;
|
|
margin-left: auto;
|
|
padding: 0;
|
|
border: none;
|
|
background: none;
|
|
}
|
|
.nav-links a {
|
|
color: var(--muted);
|
|
font-size: 14.5px;
|
|
padding: 0;
|
|
border: none;
|
|
}
|
|
.nav-links a:hover { color: var(--ink); text-decoration: none }
|
|
.nav-links .nav-cta { color: var(--ink) }
|
|
}
|
|
|
|
/* ---------- footer ---------- */
|
|
|
|
footer {
|
|
margin-top: 84px;
|
|
border-top: 1px solid var(--rule);
|
|
padding: 32px 0 44px;
|
|
}
|
|
.foot-in {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 22px;
|
|
align-items: flex-start;
|
|
justify-content: space-between;
|
|
}
|
|
.foot-in .muted { font-size: 14px; max-width: 42ch }
|
|
.foot-links { display: flex; flex-wrap: wrap; gap: 20px }
|
|
.foot-links a { color: var(--muted); font-size: 14px }
|
|
.foot-links a:hover { color: var(--ink) }
|