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>
271 lines
7.2 KiB
CSS
271 lines
7.2 KiB
CSS
/* site.css — the landing page. Loaded after base.css, which owns the tokens.
|
|
*
|
|
* The page is a single column of sections separated by rules, not a stack of
|
|
* floating cards. Nothing animates on scroll, nothing glows, and the only
|
|
* saturated colour on the page is inside a code block. */
|
|
|
|
section { padding: 56px 0 }
|
|
section + section { border-top: 1px solid var(--rule) }
|
|
|
|
/* ---------- hero ---------- */
|
|
|
|
.hero { padding: 64px 0 56px }
|
|
.hero-grid { display: grid; gap: 40px; align-items: start }
|
|
@media (min-width: 940px) {
|
|
.hero-grid { grid-template-columns: 1fr 1fr; gap: 52px; align-items: center }
|
|
}
|
|
|
|
.hero h1 {
|
|
font-size: clamp(34px, 5.2vw, 52px);
|
|
line-height: 1.08;
|
|
letter-spacing: -0.02em;
|
|
margin: 0 0 18px;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.lead {
|
|
font-size: 17.5px;
|
|
color: var(--ink-2);
|
|
max-width: 54ch;
|
|
margin: 0 0 28px;
|
|
}
|
|
.lead b { color: var(--ink); font-weight: 600 }
|
|
.lead code { font-size: 0.88em }
|
|
|
|
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
|
|
|
|
.btn {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
font-family: inherit;
|
|
font-size: 15px;
|
|
font-weight: 500;
|
|
padding: 10px 18px;
|
|
border-radius: var(--radius);
|
|
border: 1px solid transparent;
|
|
cursor: pointer;
|
|
}
|
|
.btn:hover { text-decoration: none }
|
|
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent) }
|
|
.btn-primary:hover { background: var(--accent-ink); border-color: var(--accent-ink) }
|
|
@media (prefers-color-scheme: dark) {
|
|
.btn-primary { color: #10202e }
|
|
}
|
|
.btn-ghost { border-color: var(--rule-2); color: var(--ink); background: var(--panel) }
|
|
.btn-ghost:hover { border-color: var(--muted) }
|
|
|
|
/* ---------- code cards ---------- */
|
|
|
|
.code-card {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--code-rule);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
.code-top {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 9px 14px;
|
|
border-bottom: 1px solid var(--code-rule);
|
|
background: var(--paper-2);
|
|
}
|
|
.code-name {
|
|
font-family: var(--mono);
|
|
font-size: 12px;
|
|
color: var(--muted);
|
|
}
|
|
.code-card pre {
|
|
margin: 0;
|
|
border: none;
|
|
border-radius: 0;
|
|
background: none;
|
|
}
|
|
|
|
/* ---------- pipeline ---------- */
|
|
|
|
.pipeline {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 10px;
|
|
padding: 22px 0 0;
|
|
}
|
|
.stage {
|
|
font-family: var(--mono);
|
|
font-size: 12.5px;
|
|
color: var(--ink-2);
|
|
border: 1px solid var(--rule-2);
|
|
border-radius: var(--radius);
|
|
padding: 5px 11px;
|
|
background: var(--panel);
|
|
}
|
|
.stage.hl { color: var(--accent); border-color: var(--accent); background: var(--accent-bg) }
|
|
.arrow { color: var(--muted); font-size: 13px }
|
|
|
|
/* ---------- section headings ---------- */
|
|
|
|
.sec-head { max-width: 62ch; margin-bottom: 34px }
|
|
.kicker {
|
|
font-family: var(--mono);
|
|
font-size: 11.5px;
|
|
letter-spacing: 0.09em;
|
|
text-transform: uppercase;
|
|
color: var(--muted);
|
|
margin-bottom: 10px;
|
|
}
|
|
.sec-head h2 {
|
|
font-size: clamp(24px, 3.4vw, 32px);
|
|
letter-spacing: -0.015em;
|
|
margin: 0 0 12px;
|
|
}
|
|
.sec-head p { margin: 0; color: var(--muted); font-size: 16px }
|
|
|
|
/* ---------- features ---------- */
|
|
|
|
/* The container draws the top and left edges and each cell draws its own right
|
|
and bottom, so a final row with fewer cards than columns simply stops — the
|
|
bleed-through trick (a ruled background behind gaps) leaves a grey block in
|
|
the hole instead, and the card count is not a multiple of the column count at
|
|
any breakpoint. Same construction for .editors, .idx-grid and .swatch-row. */
|
|
.feat-grid {
|
|
display: grid;
|
|
border-top: 1px solid var(--rule);
|
|
border-left: 1px solid var(--rule);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
}
|
|
@media (min-width: 620px) { .feat-grid { grid-template-columns: 1fr 1fr } }
|
|
@media (min-width: 940px) { .feat-grid { grid-template-columns: 1fr 1fr 1fr } }
|
|
|
|
.feat {
|
|
padding: 22px 22px 24px;
|
|
border-right: 1px solid var(--rule);
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
.feat h3 {
|
|
font-family: var(--sans);
|
|
font-size: 15px;
|
|
font-weight: 600;
|
|
letter-spacing: 0;
|
|
margin: 0 0 7px;
|
|
}
|
|
.feat p { margin: 0; font-size: 14.5px; color: var(--muted) }
|
|
.feat code { font-size: 0.87em }
|
|
|
|
/* ---------- showcase ---------- */
|
|
|
|
.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 16px }
|
|
.tab {
|
|
font-family: var(--mono);
|
|
font-size: 12.5px;
|
|
color: var(--muted);
|
|
background: none;
|
|
border: 1px solid transparent;
|
|
border-radius: var(--radius);
|
|
padding: 6px 12px;
|
|
cursor: pointer;
|
|
}
|
|
.tab:hover { color: var(--ink) }
|
|
.tab.active {
|
|
color: var(--accent);
|
|
border-color: var(--rule-2);
|
|
background: var(--panel);
|
|
}
|
|
|
|
.panel-code { display: none }
|
|
.panel-code.active { display: block }
|
|
.panel-code pre { max-height: 62vh }
|
|
|
|
.showcase-note {
|
|
display: flex;
|
|
gap: 10px;
|
|
margin-top: 16px;
|
|
font-size: 14.5px;
|
|
color: var(--muted);
|
|
max-width: 74ch;
|
|
}
|
|
.showcase-note .b { color: var(--rule-2) }
|
|
|
|
/* ---------- philosophy ---------- */
|
|
|
|
.banner { display: grid; gap: 28px }
|
|
@media (min-width: 860px) { .banner { grid-template-columns: 1.5fr 1fr; gap: 48px } }
|
|
.banner h2 { font-size: clamp(22px, 3vw, 28px); margin: 0 0 14px }
|
|
.banner p { color: var(--muted); font-size: 15.5px; max-width: 60ch }
|
|
|
|
.stat-row { display: grid; gap: 18px; align-content: start }
|
|
.stat { border-left: 2px solid var(--rule-2); padding-left: 14px }
|
|
.stat .big {
|
|
font-family: var(--serif);
|
|
font-size: 26px;
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
line-height: 1.1;
|
|
}
|
|
.stat .lbl { font-size: 13.5px; color: var(--muted); margin-top: 2px }
|
|
|
|
/* ---------- get started ---------- */
|
|
|
|
.steps { display: grid; gap: 34px }
|
|
@media (min-width: 940px) { .steps { grid-template-columns: 1fr 1fr; gap: 48px; align-items: start } }
|
|
|
|
.step { display: flex; gap: 14px; padding: 16px 0; border-top: 1px solid var(--rule) }
|
|
.step:first-child { border-top: none; padding-top: 0 }
|
|
.step .n {
|
|
flex: none;
|
|
width: 22px; height: 22px;
|
|
display: grid; place-items: center;
|
|
border-radius: 50%;
|
|
border: 1px solid var(--rule-2);
|
|
font-family: var(--mono);
|
|
font-size: 11.5px;
|
|
color: var(--muted);
|
|
margin-top: 2px;
|
|
}
|
|
.step h4 { font-family: var(--sans); font-size: 15px; font-weight: 600; margin: 0 0 4px }
|
|
.step p { margin: 0; font-size: 14.5px; color: var(--muted) }
|
|
|
|
.term {
|
|
background: var(--code-bg);
|
|
border: 1px solid var(--code-rule);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
position: sticky;
|
|
top: calc(var(--hdr) + 20px);
|
|
}
|
|
.term pre { margin: 0; border: none; border-radius: 0; background: none }
|
|
.term .prompt { color: var(--muted); user-select: none }
|
|
.term .out { color: var(--c-type) }
|
|
|
|
/* ---------- editors ---------- */
|
|
|
|
.editors {
|
|
display: grid;
|
|
border-top: 1px solid var(--rule);
|
|
border-left: 1px solid var(--rule);
|
|
border-radius: var(--radius);
|
|
overflow: hidden;
|
|
grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
|
|
}
|
|
.ed {
|
|
padding: 13px 16px;
|
|
font-size: 14.5px;
|
|
color: var(--ink-2);
|
|
border-right: 1px solid var(--rule);
|
|
border-bottom: 1px solid var(--rule);
|
|
}
|
|
.ed .k { color: var(--rule-2); margin-right: 4px }
|
|
|
|
/* the second half of the headline, set back so the first clause carries it */
|
|
.accent { color: var(--muted) }
|
|
|
|
.pipe-note {
|
|
text-align: center;
|
|
color: var(--muted);
|
|
font-size: 13.5px;
|
|
margin: 12px auto 0;
|
|
max-width: 62ch;
|
|
}
|
|
.ed-note { margin-top: 18px; color: var(--muted); font-size: 14.5px }
|