refactor(docs): rebuild the site around reading, not launching
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>
This commit is contained in:
parent
583783449a
commit
2f3833a295
12 changed files with 1046 additions and 571 deletions
|
|
@ -1,205 +1,271 @@
|
|||
:root{
|
||||
--bg:#0a0d18; --bg2:#0d1122; --panel:#12172b; --panel2:#151b32;
|
||||
--line:#232b47; --line2:#2c3660; --text:#c9d2ea; --head:#f2f5ff; --muted:#8290b4;
|
||||
--mint:#7cf5c4; --coral:#ff5d73; --violet:#c792ea; --blue:#82aaff; --amber:#f6c177; --peri:#a6b8ff;
|
||||
--c-bg:#0b0f20; --c-comment:#5b6788; --c-key:#ff7eb6; --c-type:#7cf5c4;
|
||||
--c-str:#f6c177; --c-num:#a6b8ff; --c-annot:#c792ea; --c-fn:#82aaff; --c-punc:#9aa6cc;
|
||||
--radius:14px; --max:1120px; --hdr:60px;
|
||||
}
|
||||
*{box-sizing:border-box}
|
||||
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
|
||||
body{margin:0;overflow-x:hidden;
|
||||
background:
|
||||
radial-gradient(900px 500px at 82% -8%, rgba(124,245,196,.10), transparent 60%),
|
||||
radial-gradient(700px 520px at 6% 4%, rgba(255,93,115,.09), transparent 55%),
|
||||
var(--bg);
|
||||
color:var(--text);
|
||||
font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
|
||||
line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
|
||||
a{color:inherit;text-decoration:none}
|
||||
code,pre,.mono{font-family:"JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace}
|
||||
.wrap{max-width:var(--max);margin:0 auto;padding:0 16px}
|
||||
/* 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. */
|
||||
|
||||
/* ---------- nav (mobile-first: hamburger) ---------- */
|
||||
header.nav{position:sticky;top:0;z-index:50;backdrop-filter:blur(10px);
|
||||
background:rgba(10,13,24,.92);border-bottom:1px solid var(--line)}
|
||||
.nav-in{display:flex;align-items:center;gap:12px;min-height:var(--hdr)}
|
||||
.brand{display:flex;align-items:center;gap:9px;font-weight:700;color:var(--head);font-size:17px;letter-spacing:.2px}
|
||||
.logo{width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;
|
||||
background:linear-gradient(135deg,var(--mint),#3fd7a6);color:#06231a;font-weight:700;font-size:15px;
|
||||
box-shadow:0 0 0 1px rgba(124,245,196,.3), 0 6px 20px -6px rgba(124,245,196,.5)}
|
||||
.nav-toggle{margin-left:auto;display:inline-flex;align-items:center;justify-content:center;
|
||||
width:42px;height:42px;border-radius:10px;border:1px solid var(--line2);background:var(--panel);
|
||||
color:var(--head);font-size:20px;cursor:pointer;line-height:1}
|
||||
.nav-links{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;
|
||||
background:rgba(10,13,24,.98);border-bottom:1px solid var(--line);padding:4px 16px 10px;
|
||||
box-shadow:0 20px 40px -24px rgba(0,0,0,.8)}
|
||||
header.nav.open .nav-links{display:flex}
|
||||
.nav-links a{color:var(--text);font-size:16px;font-weight:500;padding:14px 4px;border-top:1px solid var(--line)}
|
||||
.nav-links a:first-child{border-top:none}
|
||||
.nav-links a:active{color:var(--mint)}
|
||||
.nav-links .nav-cta{background:none;text-align:left;color:var(--text)!important}
|
||||
section { padding: 56px 0 }
|
||||
section + section { border-top: 1px solid var(--rule) }
|
||||
|
||||
/* ---------- hero ---------- */
|
||||
.hero{padding:40px 0 40px;position:relative;overflow:hidden}
|
||||
.pill{display:inline-flex;align-items:center;gap:9px;font-size:12.5px;color:var(--mint);
|
||||
border:1px solid rgba(124,245,196,.28);background:rgba(124,245,196,.06);
|
||||
padding:6px 12px;border-radius:999px;font-weight:500;margin-bottom:22px}
|
||||
.pill .dot{width:7px;height:7px;border-radius:50%;background:var(--mint);box-shadow:0 0 8px var(--mint)}
|
||||
h1{font-size:clamp(32px,9vw,68px);line-height:1.05;margin:0 0 18px;color:var(--head);font-weight:700;letter-spacing:-1px}
|
||||
h1 .accent{background:linear-gradient(120deg,var(--mint),var(--blue));-webkit-background-clip:text;
|
||||
background-clip:text;-webkit-text-fill-color:transparent}
|
||||
.lead{font-size:clamp(16px,4.5vw,21px);color:var(--muted);max-width:640px;margin:0 0 28px}
|
||||
.lead b{color:var(--text);font-weight:600}
|
||||
.cta-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
|
||||
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;font-weight:600;font-size:15.5px;
|
||||
padding:13px 20px;border-radius:11px;transition:transform .12s, box-shadow .15s, border-color .15s;font-family:inherit;cursor:pointer;border:1px solid transparent}
|
||||
.btn:active{transform:translateY(1px)}
|
||||
.btn-primary{background:linear-gradient(135deg,var(--mint),#43dcae);color:#06231a;box-shadow:0 10px 30px -10px rgba(124,245,196,.6)}
|
||||
.btn-ghost{border:1px solid var(--line2);color:var(--head);background:var(--panel)}
|
||||
@media (hover:hover){.btn-primary:hover{box-shadow:0 14px 38px -10px rgba(124,245,196,.75)}.btn-ghost:hover{border-color:var(--mint)}}
|
||||
.hero-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:center}
|
||||
.hero-grid>*{min-width:0}
|
||||
/* ---------- hero ---------- */
|
||||
|
||||
/* window chrome for code */
|
||||
.code-card{background:var(--c-bg);border:1px solid var(--line);border-radius:var(--radius);
|
||||
overflow:hidden;min-width:0;box-shadow:0 24px 50px -30px rgba(0,0,0,.7)}
|
||||
.code-top{display:flex;align-items:center;gap:8px;padding:11px 14px;border-bottom:1px solid var(--line);
|
||||
background:linear-gradient(180deg,var(--panel),rgba(18,23,43,.4))}
|
||||
.tl{width:11px;height:11px;border-radius:50%;flex:none}
|
||||
.tl.r{background:#ff5f57}.tl.y{background:#febc2e}.tl.g{background:#28c840}
|
||||
.code-name{margin-left:8px;font-size:12.5px;color:var(--muted)}
|
||||
pre{margin:0;padding:16px;overflow:auto;-webkit-overflow-scrolling:touch;font-size:12.5px;line-height:1.7;tab-size:2;max-width:100%}
|
||||
pre::-webkit-scrollbar{height:8px;width:8px}
|
||||
pre::-webkit-scrollbar-thumb{background:var(--line2);border-radius:6px}
|
||||
.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(--amber)}
|
||||
pre a.tok{border-radius:3px;transition:background .12s, outline-color .12s}
|
||||
pre a.tok:hover{background:rgba(124,245,196,.14);outline:1px solid rgba(124,245,196,.35)}
|
||||
.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 }
|
||||
}
|
||||
|
||||
/* ---------- pipeline ---------- */
|
||||
.pipeline{display:flex;flex-direction:column;align-items:center;gap:8px;
|
||||
margin:8px 0 0;padding:18px 16px;border:1px dashed var(--line2);border-radius:var(--radius);background:rgba(18,23,43,.4)}
|
||||
.stage{font-family:"JetBrains Mono",monospace;font-size:13px;font-weight:500;color:var(--head);text-align:center;
|
||||
background:var(--panel);border:1px solid var(--line2);padding:9px 13px;border-radius:9px;white-space:nowrap}
|
||||
.stage.hl{color:var(--mint);border-color:rgba(124,245,196,.35)}
|
||||
.arrow{color:var(--muted);font-size:16px;line-height:1;transform:rotate(90deg)}
|
||||
.hero h1 {
|
||||
font-size: clamp(34px, 5.2vw, 52px);
|
||||
line-height: 1.08;
|
||||
letter-spacing: -0.02em;
|
||||
margin: 0 0 18px;
|
||||
text-wrap: balance;
|
||||
}
|
||||
|
||||
/* ---------- sections ---------- */
|
||||
section{padding:48px 0}
|
||||
.sec-head{max-width:680px;margin-bottom:30px}
|
||||
.kicker{font-size:12.5px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--mint);margin-bottom:12px}
|
||||
h2{font-size:clamp(25px,6.5vw,40px);margin:0 0 12px;color:var(--head);letter-spacing:-.6px;font-weight:700;line-height:1.12}
|
||||
.sec-head p{font-size:16px;color:var(--muted);margin:0}
|
||||
.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 }
|
||||
|
||||
/* feature grid */
|
||||
.feat-grid{display:grid;grid-template-columns:1fr;gap:14px}
|
||||
.feat{background:linear-gradient(180deg,var(--panel),var(--bg2));border:1px solid var(--line);
|
||||
border-radius:var(--radius);padding:20px 18px;transition:transform .16s, border-color .16s}
|
||||
.feat .ico{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;margin-bottom:14px;
|
||||
background:rgba(124,245,196,.09);border:1px solid rgba(124,245,196,.2);font-size:20px}
|
||||
.feat h3{margin:0 0 8px;font-size:17px;color:var(--head);font-weight:600}
|
||||
.feat p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.6}
|
||||
.feat p code{color:var(--mint);font-size:12.5px;background:rgba(124,245,196,.08);padding:1px 5px;border-radius:5px;overflow-wrap:anywhere}
|
||||
.cta-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center }
|
||||
|
||||
/* showcase tabs */
|
||||
.tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
|
||||
.tab{font-family:"JetBrains Mono",monospace;font-size:13px;color:var(--muted);background:var(--panel);
|
||||
border:1px solid var(--line);padding:9px 15px;border-radius:9px;cursor:pointer;transition:all .14s;font-weight:500}
|
||||
.tab.active{color:#06231a;background:var(--mint);border-color:var(--mint);font-weight:600}
|
||||
.panel-code{display:none}
|
||||
.panel-code.active{display:block}
|
||||
.showcase-note{margin-top:16px;font-size:14px;color:var(--muted);display:flex;gap:10px;align-items:flex-start}
|
||||
.showcase-note .b{color:var(--mint);font-weight:700;flex:none}
|
||||
.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) }
|
||||
|
||||
/* steps */
|
||||
.steps{display:grid;grid-template-columns:1fr;gap:24px;align-items:start}
|
||||
.step{display:flex;gap:14px;margin-bottom:20px}
|
||||
.step .n{flex:none;width:32px;height:32px;border-radius:9px;display:grid;place-items:center;font-weight:700;
|
||||
font-family:"JetBrains Mono",monospace;font-size:14px;color:var(--mint);
|
||||
background:rgba(124,245,196,.08);border:1px solid rgba(124,245,196,.25)}
|
||||
.step h4{margin:2px 0 6px;color:var(--head);font-size:16px;font-weight:600}
|
||||
.step p{margin:0;color:var(--muted);font-size:14.5px}
|
||||
.step p code{color:var(--text);background:var(--panel);padding:1px 6px;border-radius:5px;font-size:12.5px;border:1px solid var(--line);overflow-wrap:anywhere}
|
||||
.term{background:var(--c-bg);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;min-width:0}
|
||||
.term pre{font-size:12.5px}
|
||||
.term .prompt{color:var(--mint)}
|
||||
.term .out{color:var(--muted)}
|
||||
/* ---------- code cards ---------- */
|
||||
|
||||
/* editors strip */
|
||||
.editors{display:flex;flex-wrap:wrap;gap:10px}
|
||||
.ed{font-family:"JetBrains Mono",monospace;font-size:13.5px;color:var(--text);background:var(--panel);
|
||||
border:1px solid var(--line);border-radius:10px;padding:10px 14px;display:flex;align-items:center;gap:9px}
|
||||
.ed .k{color:var(--mint)}
|
||||
.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;
|
||||
}
|
||||
|
||||
/* philosophy banner */
|
||||
.banner{background:linear-gradient(120deg,rgba(124,245,196,.08),rgba(130,170,255,.06));
|
||||
border:1px solid var(--line2);border-radius:18px;padding:26px 22px;display:grid;grid-template-columns:1fr;gap:26px;align-items:center}
|
||||
.banner h2{font-size:clamp(22px,5.5vw,32px)}
|
||||
.banner p{color:var(--muted);margin:0 0 6px;font-size:15px}
|
||||
.stat-row{display:flex;gap:12px;flex-wrap:wrap}
|
||||
.stat{background:var(--c-bg);border:1px solid var(--line);border-radius:12px;padding:14px 16px;flex:1 1 120px;min-width:120px}
|
||||
.stat .big{font-family:"JetBrains Mono",monospace;font-size:24px;color:var(--mint);font-weight:700;line-height:1}
|
||||
.stat .lbl{font-size:12.5px;color:var(--muted);margin-top:8px}
|
||||
/* ---------- pipeline ---------- */
|
||||
|
||||
/* footer */
|
||||
footer{border-top:1px solid var(--line);padding:34px 0 48px;margin-top:16px}
|
||||
.foot-in{display:flex;flex-direction:column;justify-content:space-between;gap:20px;flex-wrap:wrap}
|
||||
.foot-in .muted{color:var(--muted);font-size:14px}
|
||||
.foot-links{display:flex;gap:18px;flex-wrap:wrap}
|
||||
.foot-links a{color:var(--muted);font-size:14px}
|
||||
.foot-links a:hover{color:var(--mint)}
|
||||
.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 }
|
||||
|
||||
.reveal{opacity:0;transform:translateY(16px);transition:opacity .6s ease, transform .6s ease}
|
||||
.reveal.in{opacity:1;transform:none}
|
||||
/* ---------- section headings ---------- */
|
||||
|
||||
/* hover-card + kind badges (shared with the reference; hover-devices only) */
|
||||
.hovercard{position:fixed;z-index:100;max-width:min(340px,calc(100vw - 24px));background:var(--panel2);
|
||||
border:1px solid var(--line2);border-radius:12px;padding:12px 14px;box-shadow:0 20px 50px -18px rgba(0,0,0,.8);
|
||||
pointer-events:auto;cursor:pointer}
|
||||
.hovercard:hover{border-color:var(--mint)}
|
||||
.hc-top{display:flex;align-items:center;gap:9px;margin-bottom:8px}
|
||||
.hc-name{font-family:"JetBrains Mono",monospace;color:var(--head);font-weight:700;font-size:14px;overflow-wrap:anywhere}
|
||||
.hc-sig{display:block;color:var(--c-fn);background:var(--c-bg);border:1px solid var(--line);border-radius:7px;
|
||||
padding:6px 9px;font-size:12px;margin-bottom:8px;white-space:pre-wrap;overflow-wrap:anywhere}
|
||||
.hc-tip{color:var(--text);font-size:13.5px;line-height:1.5}
|
||||
.hc-foot{color:var(--mint);font-size:11.5px;margin-top:9px;letter-spacing:.3px}
|
||||
.kind-badge{font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;padding:3px 7px;
|
||||
border-radius:6px;border:1px solid var(--line2);color:var(--muted);background:var(--panel)}
|
||||
.kind-keyword{color:var(--c-key)}.kind-type{color:var(--c-type)}.kind-phase{color:var(--blue)}
|
||||
.kind-method,.kind-builtin{color:var(--c-fn)}.kind-annotation{color:var(--c-annot)}.kind-namespace{color:var(--amber)}
|
||||
.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 }
|
||||
|
||||
/* ============ tablet / desktop ============ */
|
||||
@media (min-width:600px){
|
||||
.feat-grid{grid-template-columns:repeat(2,1fr);gap:16px}
|
||||
.cta-row .btn{min-width:0}
|
||||
}
|
||||
@media (min-width:720px){
|
||||
:root{--hdr:64px}
|
||||
.wrap{padding:0 24px}
|
||||
.nav-toggle{display:none}
|
||||
.nav-links{display:flex;position:static;flex-direction:row;gap:24px;margin-left:auto;align-items:center;background:none;border:none;padding:0;box-shadow:none}
|
||||
.nav-links a{color:var(--muted);font-size:14.5px;padding:0;border-top:none}
|
||||
.nav-links a:hover{color:var(--head)}
|
||||
.nav-links .nav-cta{padding:8px 15px;border-radius:9px;border:1px solid var(--line2);
|
||||
background:var(--panel);color:var(--head)!important}
|
||||
.nav-links .nav-cta:hover{border-color:var(--mint)}
|
||||
.pipeline{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:4px}
|
||||
.stage{font-size:12.5px;padding:8px 12px}
|
||||
.arrow{transform:none;padding:0 6px;font-size:14px}
|
||||
}
|
||||
@media (min-width:900px){
|
||||
.hero{padding:72px 0 52px}
|
||||
section{padding:68px 0}
|
||||
.hero-grid{grid-template-columns:1.02fr .98fr;gap:44px}
|
||||
.feat-grid{grid-template-columns:repeat(3,1fr);gap:18px}
|
||||
.steps{grid-template-columns:1.1fr 1fr;gap:40px}
|
||||
.term{position:sticky;top:88px}
|
||||
.banner{grid-template-columns:1.2fr 1fr;padding:36px 32px;gap:34px}
|
||||
.foot-in{flex-direction:row;align-items:center}
|
||||
}
|
||||
@media (hover:hover){
|
||||
.feat:hover{transform:translateY(-3px);border-color:var(--line2)}
|
||||
.tab:hover{color:var(--text);border-color:var(--line2)}
|
||||
}
|
||||
/* ---------- 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 }
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue