/* stylesheet.org — a small, standards-compliant CSS framework. * * Semantic HTML + a handful of utility classes. No custom tags, no IDs, no * JavaScript. Write a normal page (header / main / footer, one h1 in main, * sections by depth) and it looks right; reach for a class only where HTML has * no element for the job (layout and a few presentational components). * * The file is in five sections. A theme only ever changes section 2. * 1. RESET — constant * 2. THEME TOKENS — :root variables (colour, type, space, shape) * 3. LAYOUT — constant: row, column, grid, flow, stretch * 4. ELEMENTS — constant: semantic tags styled directly * 5. COMPONENTS — constant: panel, card, chip, buttons, status, paging, menu * * Layout model: children of .row / .column take their natural size and stack * from the start — a fixed item is just a width/height, no class. .stretch is * the one flexing element (empty = a spacer; with content = a flexible region; * .stretch-2 / .stretch-3 weight the shares). */ /* ============================================================ 1. RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; overflow-x: hidden; display: flex; flex-direction: column; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { max-width: 100%; height: auto; display: block; } /* ============================================================ 2. THEME TOKENS — the only section a theme changes (sunshine yellow) ============================================================ */ :root { /* colour */ --bg: #fffdf3; /* warm cream page base */ --surface: #ffffff; /* panels, cards, the intro area */ --surface-soft: #fff6cf; /* nested panels / soft fills */ --section-bg: #fff2bb; /* pale sunny yellow */ --band: #ffe79a; /* slightly darker — the full-width section band */ --pad: 28px; /* content side padding */ --header-bg: #ffd21a; /* bright sunshine yellow — the menu */ --header-bg-2: #ffe066; /* paler band for a stacked sub-nav */ --fg: #3a2f12; /* warm dark-brown text */ --heading: #2a2008; --muted: #897946; --border: #f0e3a4; /* warm gold border */ --border-strong: #e3cf78; --accent: #c25e0d; /* warm orange — buttons, links, active */ --accent-hover: #a44d09; --accent-fg: #ffffff; --accent-tint: #ffeeb0; /* warm light — hovers, focus, quotes */ --accent-2: #0d9488; /* teal — for "active" chips/badges */ --accent-2-tint: #d5f3ef; --code-bg: #2a2410; /* warm dark code block */ --code-fg: #f0e6c4; /* syntax highlighting — bright tokens on the warm-dark code block */ --hl-tag: #7cc4ff; /* html tags · css at-rules */ --hl-attr: #f0c66b; /* html attributes · css properties */ --hl-value: #8fe0a0; /* html attribute values · css values · js strings */ --hl-comment: #9b9b9b; /* comments, any language — grey */ --hl-kw: #cbb6f5; /* js keywords */ --hl-fn: #7fd6e0; /* js function and method names */ --hl-num: #f0a98a; /* js numbers */ --ok-fg: #04603e; --ok-bg: #e9fbf2; --ok-bd: #a6e9c8; --err-fg: #ad1b14; --err-bg: #fdf0ef; --err-bd: #f6c9c6; --info-fg: #2f4ad6; --info-bg: #eef1ff; --info-bd: #c5cefb; --warn-fg: #9a5a05; --warn-bg: #fff4d6; --warn-bd: #f3df9a; /* type */ --font: system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-hand: 'Snell Roundhand', 'Bradley Hand', 'Segoe Script', cursive; /* the handwritten wordmark / hero title */ --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* space + shape */ --gap: 16px; /* the one spacing rhythm — content flow, rows, columns, grids */ --sep-1: 28px; /* section separation, by nesting depth — first level… */ --sep-2: 20px; /* …one level in… */ --sep-3: 14px; /* …two levels in */ --radius: 14px; --radius-sm: 9px; --radius-pill: 999px; --maxw: 1040px; --shadow-sm: 0 1px 2px rgba(120, 90, 10, 0.05), 0 1px 3px rgba(120, 90, 10, 0.07); --shadow-md: 0 6px 14px -4px rgba(120, 90, 10, 0.13), 0 2px 6px -2px rgba(120, 90, 10, 0.07); --shadow-lg: 0 20px 30px -12px rgba(120, 90, 10, 0.20); } /* ============================================================ 3. LAYOUT — structure only; references --gap, never colour ============================================================ */ .row, .column { display: flex; gap: var(--gap); } .row { flex-direction: row; } .column { flex-direction: column; } .row > *, .column > * { flex: 0 0 auto; min-width: 0; min-height: 0; } /* natural size, from the start */ .stretch { flex: 1 1 0; min-width: 0; min-height: 0; } /* eats / shares the remainder */ .stretch-2 { flex-grow: 2; } .stretch-3 { flex-grow: 3; } .grid { display: grid; gap: var(--gap); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .flow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; } /* explicit grids collapse gracefully on narrow screens */ @media (max-width: 860px) { .grid.cols-3, .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } /* ============================================================ 4. ELEMENTS — semantic tags styled directly ============================================================ */ body { background: radial-gradient(130% 760px at 50% 120px, #fff5d3, #ffffff); /* light main-area glow: warm light centre just under the top of main, easing out to white over a distance wider than the screen */ color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.65; } /* typography */ h1, h2, h3, h4, h5, h6 { color: var(--heading); font-weight: 700; line-height: 1.2; letter-spacing: -0.015em; } h1 { font-size: 2rem; } h2 { font-size: 1.5rem; } h3 { font-size: 1.2rem; letter-spacing: -0.01em; } h4 { font-size: 1.02rem; letter-spacing: 0; } h5, h6 { font-size: 0.9rem; letter-spacing: 0; } /* Headings carry no spacing of their own. Within a part everything is one gap; the only margin in the flow is a section's own top margin (see the sections rules below), and a heading is always its section's first child, so it sits flush with nothing to reset. */ a { color: var(--accent); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--accent-hover); text-decoration: underline; } strong { font-weight: 650; color: var(--heading); } small { color: var(--muted); font-size: 0.875em; } ul, ol { padding-left: 1.4em; } li { margin: 5px 0; } li::marker { color: var(--accent); } /* description list — term → description pairs, laid out as two columns */ dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; } dt { font-weight: 600; color: var(--heading); } dd { color: var(--fg); } hr { border: none; border-top: 1px solid var(--border); } code { font-family: var(--mono); font-size: 0.88em; background: var(--surface-soft); border: 1px solid var(--border); padding: 0.1em 0.4em; border-radius: 6px; } pre { background: var(--code-bg); color: var(--code-fg); border-radius: var(--radius-sm); padding: 16px 18px; overflow-x: auto; box-shadow: var(--shadow-sm); font-size: 0.85rem; line-height: 1.6; width: 100%; max-width: 54rem; margin-inline: auto; } /* one consistent width (fills to the cap, not to its content), centred, a touch narrower than the content — and it fills once the screen itself is narrower */ /* a captioned code block: the figure is the centred, capped unit; the code fills it and the short caption sits beneath, aligned to the code's left edge */ figure:has(> pre) { width: 100%; max-width: 54rem; margin-inline: auto; } figure:has(> pre) > pre { max-width: 100%; } pre code { background: none; border: none; padding: 0; color: inherit; font-size: inherit; } /* syntax highlighting: a language tab pinned to the top-right, and per-token colours. Spans are baked into the markup — with .tag/.attr/.value/.comment inside. */ pre { position: relative; } /* positioning context for the language tab */ pre > code[class] { display: block; padding-top: 14px; } /* reserve room so the tab clears the first line */ pre > code[class]::before { position: absolute; top: 0; right: 0; padding: 3px 11px; font-family: var(--font); font-size: 0.66rem; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--code-fg); background: rgba(255, 255, 255, 0.06); border-left: 1px solid rgba(255, 255, 255, 0.14); border-bottom: 1px solid rgba(255, 255, 255, 0.14); border-radius: 0 var(--radius-sm) 0 var(--radius-sm); } pre > code.html::before { content: "html"; } pre > code.css::before { content: "css"; } pre > code.js::before { content: "javascript"; } code.html { color: #f5f5f5; } /* html: plain element text reads white, not the warm cream */ pre code .tag { color: var(--hl-tag); } pre code .attr { color: var(--hl-attr); } pre code .value { color: var(--hl-value); } pre code .comment { color: var(--hl-comment); } pre code .kw { color: var(--hl-kw); } pre code .fn { color: var(--hl-fn); } pre code .num { color: var(--hl-num); } blockquote { padding: 10px 18px; border-left: 3px solid var(--accent); background: var(--accent-tint); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; color: var(--fg); } /* figure: a block (image, code) tied to its caption — the caption is part of the component, sitting tight at a fixed distance, outside the flow rhythm */ figure { display: flex; flex-direction: column; gap: 6px; } figcaption { color: var(--muted); font-size: 0.9em; text-align: center; } /* caption centred beneath the block */ /* header: the site chrome — a bright sunshine-yellow menu, sticky, stacked bars */ header { position: sticky; top: 0; z-index: 10; background: var(--header-bg); border-bottom: 2px solid rgba(0, 0, 0, 0.08); box-shadow: 0 2px 10px rgba(180, 130, 10, 0.20); } nav { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; } nav > a, nav > span { font-weight: 700; color: var(--heading); letter-spacing: -0.01em; } /* a bar's title */ nav > a:hover { text-decoration: none; } nav > ul { display: flex; flex-wrap: wrap; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; } nav > ul > li { margin: 0; } nav ul a { display: block; padding: 7px 13px; border-radius: 8px; white-space: nowrap; color: var(--fg); font-size: 0.95rem; font-weight: 500; text-decoration: none; transition: background 0.15s, color 0.15s; } nav ul a:hover { background: rgba(0, 0, 0, 0.07); color: var(--heading); text-decoration: none; } nav a[aria-current] { background: var(--accent); color: #fff; } nav a[aria-current]:hover { background: var(--accent); color: #fff; } header > nav { padding: 12px 28px; } header > nav:first-of-type > a { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-hand); font-weight: 700; font-size: 1.7rem; letter-spacing: 0; line-height: 1; } /* brand: sun icon + bold handwritten wordmark */ header > nav:first-of-type > a img { width: 32px; height: 32px; display: block; } header > nav:first-of-type > ul { margin-left: auto; } /* brand left, links right */ header > nav ~ nav { border-top: 1px solid rgba(0, 0, 0, 0.08); background: var(--header-bg-2); padding-top: 9px; padding-bottom: 9px; } header > nav ~ nav > span { font-size: 0.85rem; color: var(--accent-hover); text-transform: uppercase; letter-spacing: 0.05em; } header > nav ~ nav ul a { font-size: 0.9rem; } /* nav dropdowns (no JS): a nested