/* pages.css — Styles for the static mirror generated by scripts/build-pages.js.
*
* Deliberately NOT css/styles.css: that file sets `html, body { height: 100%;
* overflow: hidden }` for the fixed-viewport terminal shell, which would make
* these long documents unscrollable.
*
* Colors match what the terminal actually renders — #2c2c2c from styles.css,
* and xterm.js's default bright ANSI palette, which is what colorText() in
* js/terminal.js emits (1;35 magenta, 1;34 blue, 1;33 yellow, 1;32 green).
*
* The Source Code Pro + preconnect hints live in layout()'s in
* scripts/build-pages.js rather than an @import here: @import serializes the
* font request behind this stylesheet's own download and parse, where a
* preconnected can start immediately in parallel.
*/
:root {
--bg: #2c2c2c;
--surface: #000;
--txt: #e5e5e5;
--txt-bright: #fff;
--muted: #9a9a9a;
--rule: #444;
--magenta: #d670d6; /* colorText "command" */
--blue: #3b8eea; /* colorText "hyperlink" */
--yellow: #f5f543; /* colorText "user" */
--green: #23d18b; /* colorText "prompt" */
}
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px 12px;
background: var(--bg);
color: var(--txt);
font-family: "Source Code Pro", ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 15px;
line-height: 1.6;
/* Long URLs in the fact lists must not force the page to scroll sideways. */
overflow-wrap: break-word;
}
.window {
max-width: 76ch;
margin: 0 auto;
padding: 20px 16px;
background: var(--surface);
border: 1px solid var(--rule);
}
/* ── Nav ──────────────────────────────────────────────────────────────────── */
header {
padding-bottom: 12px;
border-bottom: 1px solid var(--rule);
}
nav a,
nav [aria-current] {
color: var(--blue);
text-decoration: none;
}
nav [aria-current] {
color: var(--yellow);
font-weight: 700;
}
nav a:hover,
nav a:focus {
text-decoration: underline;
}
nav .sep {
color: var(--muted);
}
/* ── Prompt line ──────────────────────────────────────────────────────────── */
.prompt {
margin: 20px 0 0;
color: var(--muted);
}
.prompt .user {
color: var(--green);
font-weight: 700;
}
.prompt .path {
color: var(--blue);
font-weight: 700;
}
.prompt .punct {
color: var(--txt);
}
.prompt .cmd {
color: var(--magenta);
font-weight: 700;
}
/* ── Type ─────────────────────────────────────────────────────────────────── */
h1 {
margin: 4px 0 16px;
font-size: 1.6rem;
line-height: 1.25;
color: var(--txt-bright);
}
h2 {
margin: 32px 0 12px;
padding-top: 12px;
border-top: 1px solid var(--rule);
font-size: 1.05rem;
color: var(--yellow);
}
p {
margin: 0 0 14px;
}
.lede {
color: var(--txt-bright);
}
.role {
color: var(--yellow);
}
.desc {
color: var(--muted);
}
a {
color: var(--blue);
}
a:hover,
a:focus {
color: var(--txt-bright);
}
code {
color: var(--magenta);
font-family: inherit;
font-weight: 700;
}
/* ── Lists ────────────────────────────────────────────────────────────────── */
ul {
margin: 0 0 14px;
padding-left: 2ch;
}
li {
margin-bottom: 6px;
}
.listing {
list-style: none;
padding-left: 0;
}
.listing > li {
margin-bottom: 12px;
padding-left: 2ch;
text-indent: -2ch;
}
.listing > li::before {
content: "> ";
color: var(--green);
}
.listing .role,
.listing .desc {
display: block;
padding-left: 2ch;
text-indent: 0;
}
/* ── Definition lists ─────────────────────────────────────────────────────── */
.facts {
margin: 0 0 14px;
}
.facts dt {
color: var(--green);
}
.facts dd {
margin: 0 0 10px 2ch;
}
/* ── Footer ───────────────────────────────────────────────────────────────── */
footer {
margin-top: 32px;
padding-top: 12px;
border-top: 1px solid var(--rule);
color: var(--muted);
font-size: 0.9rem;
}
footer p {
margin: 0;
}
/* ── Wide screens ─────────────────────────────────────────────────────────── */
@media (min-width: 720px) {
body {
padding: 40px 24px;
}
.window {
padding: 32px 40px;
}
}