/* * miniorchestrator.com — landing page styles * Dark terminal theme by default; light theme via `.theme-light` on . * Default follows the OS preference (prefers-color-scheme); a manual choice * (stored in localStorage by theme.js) wins via `.theme-dark` / `.theme-light`. */ /* ---- Theme tokens -------------------------------------------------------- */ /* Dark theme is the baseline default. */ :root { --bg: #0d1117; --surface: #161b22; --surface-2: #1c2129; --text: #e6edf3; --muted: #8b949e; --accent: #3fb950; --accent-soft: rgba(63, 185, 80, 0.12); --border: #30363d; --shadow: rgba(0, 0, 0, 0.4); --warning: #d29922; --warning-soft: rgba(210, 153, 34, 0.12); /* * Scrollbar tokens reference other theme tokens via var(). Custom properties * resolve lazily per element, so this single definition automatically follows * every theme layer (OS light, manual .theme-dark / .theme-light) because * those layers override --surface / --border / --accent on the same :root. */ --scrollbar-track: var(--surface); --scrollbar-thumb: var(--border); --scrollbar-thumb-hover: var(--accent); --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "Cascadia Code", "JetBrains Mono", "Fira Code", Menlo, Consolas, monospace; --maxw: 960px; --radius: 10px; } /* Light tokens, applied automatically when the OS prefers light... */ @media (prefers-color-scheme: light) { :root { --bg: #ffffff; --surface: #f6f8fa; --surface-2: #eaeef2; --text: #1f2328; --muted: #59636e; --accent: #1a7f37; --accent-soft: rgba(26, 127, 55, 0.10); --border: #d0d7de; --shadow: rgba(140, 149, 159, 0.2); --warning: #9a6700; --warning-soft: rgba(154, 103, 0, 0.10); } } /* ...but an explicit manual choice always wins over the OS preference. */ :root.theme-dark { --bg: #0d1117; --surface: #161b22; --surface-2: #1c2129; --text: #e6edf3; --muted: #8b949e; --accent: #3fb950; --accent-soft: rgba(63, 185, 80, 0.12); --border: #30363d; --shadow: rgba(0, 0, 0, 0.4); --warning: #d29922; --warning-soft: rgba(210, 153, 34, 0.12); } :root.theme-light { --bg: #ffffff; --surface: #f6f8fa; --surface-2: #eaeef2; --text: #1f2328; --muted: #59636e; --accent: #1a7f37; --accent-soft: rgba(26, 127, 55, 0.10); --border: #d0d7de; --shadow: rgba(140, 149, 159, 0.2); --warning: #9a6700; --warning-soft: rgba(154, 103, 0, 0.10); } /* ---- Base ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; /* Firefox scrollbar (thin variant, themed via the tokens above). */ scrollbar-width: thin; scrollbar-color: var(--scrollbar-thumb) var(--scrollbar-track); } /* ---- Scrollbar (WebKit / Blink) ----------------------------------------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--scrollbar-track); } ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border-radius: 10px; /* Inset border lets the track show through, giving the thumb breathing room. */ border: 2px solid var(--scrollbar-track); } ::-webkit-scrollbar-thumb:hover { background: var(--scrollbar-thumb-hover); } ::-webkit-scrollbar-corner { background: var(--scrollbar-track); } body { margin: 0; background-color: var(--bg); color: var(--text); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* Keyboard focus: a visible ring on every interactive element. Individual components may refine it, but this baseline guarantees focus is never invisible for keyboard users. */ a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 2px; } /* Skip link: off-screen until focused, then pinned to the top-left so keyboard and screen-reader users can jump past the header to the main content. */ .skip-link { position: absolute; left: 0.5rem; top: -3.5rem; z-index: 100; padding: 0.5rem 0.9rem; background-color: var(--accent); color: #0d1117; border-radius: var(--radius); font-size: 0.9rem; transition: top 0.15s ease; } .skip-link:focus { top: 0.5rem; text-decoration: none; outline: 2px solid var(--text); outline-offset: 2px; } /*
carries tabindex="-1" so the skip link can move focus to it; suppress the ring on that programmatic focus (it's a landmark, not a control). */ #main-content:focus { outline: none; } code, .mono { font-family: var(--font-mono); } .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 1.25rem; } /* ---- Header / theme toggle ---------------------------------------------- */ .site-header { border-bottom: 1px solid var(--border); background-color: var(--surface); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-block: 0.9rem; } .brand { font-family: var(--font-mono); font-weight: 700; color: var(--text); } .brand:hover { text-decoration: none; } .brand__prompt { color: var(--accent); margin-right: 0.35rem; } /* Primary navigation in the header (Docs link). */ .site-nav { display: flex; align-items: center; gap: 0.6rem; } .site-nav__link { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); padding: 0.4rem 0.5rem; } .site-nav__link:hover { text-decoration: none; color: var(--accent); } /* Mobile nav toggle (hamburger) — CSS-only checkbox. Hidden on desktop, shown below the brand on narrow screens (see the responsive section). */ .nav-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .nav-toggle__btn { display: none; align-items: center; justify-content: center; width: 2.4rem; height: 2.4rem; border: 1px solid var(--border); border-radius: var(--radius); background-color: var(--surface-2); cursor: pointer; } /* Three-bar icon drawn with one element + its pseudo-elements. */ .nav-toggle__bars, .nav-toggle__bars::before, .nav-toggle__bars::after { display: block; width: 1.1rem; height: 2px; background-color: var(--text); border-radius: 2px; } .nav-toggle__bars { position: relative; } .nav-toggle__bars::before, .nav-toggle__bars::after { content: ""; position: absolute; left: 0; } .nav-toggle__bars::before { top: -6px; } .nav-toggle__bars::after { top: 6px; } .nav-toggle:focus-visible + .nav-toggle__btn { outline: 2px solid var(--accent); outline-offset: 2px; } /* Header right-hand controls: language switch + theme toggle. */ .site-header__controls { display: flex; align-items: center; gap: 0.6rem; } .theme-toggle { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.75rem; cursor: pointer; } .theme-toggle:hover { border-color: var(--accent); } /* Language switch: a CSS-only dropdown built on the native
element, so any number of locales live in a menu instead of sitting side by side. No JS — CSP-safe. The is the pill (styled like the theme toggle); the menu drops below it. */ .lang-switch { position: relative; } .lang-switch__current { font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.4rem 0.75rem; line-height: 1; cursor: pointer; white-space: nowrap; list-style: none; /* Firefox: hide the default disclosure marker */ } /* WebKit/Blink: hide the default disclosure triangle. */ .lang-switch__current::-webkit-details-marker { display: none; } /* Small caret that flips when the menu is open. */ .lang-switch__current::after { content: '▾'; margin-left: 0.4rem; color: var(--muted); } .lang-switch[open] .lang-switch__current::after { content: '▴'; } .lang-switch__current:hover, .lang-switch[open] .lang-switch__current { border-color: var(--accent); } .lang-switch__current:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .lang-switch__menu { position: absolute; right: 0; top: calc(100% + 0.35rem); z-index: 50; margin: 0; padding: 0.3rem; min-width: 8rem; list-style: none; background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); } .lang-switch__item { display: block; font-family: var(--font-mono); font-size: 0.85rem; color: var(--text); padding: 0.4rem 0.6rem; border-radius: calc(var(--radius) - 4px); } .lang-switch__item:hover { text-decoration: none; background-color: var(--surface); color: var(--accent); } .lang-switch__item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---- Hero ---------------------------------------------------------------- */ .hero { padding-block: clamp(3rem, 8vw, 6rem); text-align: center; } .hero__title { font-size: clamp(2rem, 6vw, 3.25rem); line-height: 1.15; margin: 0 0 1rem; } .hero__title .accent { color: var(--accent); } .hero__tagline { font-size: clamp(1.05rem, 2.5vw, 1.3rem); color: var(--muted); max-width: 40ch; margin: 0 auto 2rem; } /* Install command block, styled like a terminal line. */ .install { display: inline-flex; align-items: center; gap: 0.75rem; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.75rem 1rem; font-family: var(--font-mono); box-shadow: 0 6px 20px var(--shadow); max-width: 100%; overflow-x: auto; } .install__prompt { color: var(--accent); user-select: none; } .install__cmd { color: var(--text); white-space: nowrap; } .hero__actions { margin-top: 1.75rem; display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .btn { display: inline-block; padding: 0.6rem 1.25rem; border-radius: var(--radius); border: 1px solid var(--border); font-weight: 600; cursor: pointer; } .btn--primary { background-color: var(--accent); border-color: var(--accent); color: #0d1117; } .btn--primary:hover { text-decoration: none; filter: brightness(1.08); } .btn--ghost { background-color: transparent; color: var(--text); } .btn--ghost:hover { text-decoration: none; border-color: var(--accent); } /* ---- Error pages (404 / generic fallback) -------------------------------- */ .hero--error { padding-block: clamp(4rem, 12vw, 8rem); } /* Large status code rendered in the accent colour, monospace to echo the terminal feel of the rest of the site. Theme tokens keep it correct in both dark and light modes. */ .error-code { font-family: var(--font-mono); font-size: clamp(4rem, 18vw, 9rem); font-weight: 700; line-height: 1; color: var(--accent); margin: 0 0 0.5rem; letter-spacing: 0.05em; } /* ---- Sections ------------------------------------------------------------ */ .section { padding-block: clamp(2.5rem, 6vw, 4rem); border-top: 1px solid var(--border); } .section__title { font-size: clamp(1.4rem, 3vw, 1.9rem); margin: 0 0 1.25rem; } .section__lead { color: var(--muted); max-width: 60ch; margin: 0 0 2rem; } /* Card grid (features / audience). */ .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; } .card { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; } .card__title { font-size: 1.05rem; margin: 0 0 0.5rem; } .card__title .mono { color: var(--accent); } .card__text { color: var(--muted); margin: 0; font-size: 0.95rem; } /* How it works — phase flow. */ .flow { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: stretch; list-style: none; margin: 0 0 1.5rem; padding: 0; } .flow__step { flex: 1 1 160px; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem; } /* Optional step in a flow (e.g. mini discuss) — dashed to read as skippable. */ .flow__step--optional { border-style: dashed; background-color: transparent; } .flow__cmd { font-family: var(--font-mono); color: var(--accent); font-weight: 700; display: block; margin-bottom: 0.35rem; } .flow__desc { color: var(--muted); font-size: 0.9rem; } /* ---- Footer -------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); background-color: var(--surface); color: var(--muted); font-size: 0.9rem; } .site-footer__inner { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; justify-content: space-between; padding-block: 1.5rem; } .site-footer__links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; } /* ---- Docs section -------------------------------------------------------- */ /* A shorter hero for inner pages (docs index / command detail). */ .hero--compact { padding-block: clamp(2rem, 5vw, 3.5rem); text-align: left; } .hero--compact .hero__tagline { margin-inline: 0; } /* Live command filter (docs index). The input is revealed by JS; without JS it stays hidden so no dead control shows. */ .cmd-filter { margin: 0 0 1.75rem; } .cmd-filter__label { display: block; font-size: 0.85rem; color: var(--muted); margin-bottom: 0.4rem; } .cmd-filter__input { width: 100%; max-width: 22rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--text); background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.8rem; } .cmd-filter__input::placeholder { color: var(--muted); } .cmd-filter__input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-color: var(--accent); } /* Message shown by the filter when nothing matches the query. */ .cmd-noresults { color: var(--muted); font-style: italic; } /* The filter hides rows/groups via the [hidden] attribute, but .cmd-item, .cmd-list and .section__title set display flex/grid/block which would override the UA [hidden] rule — re-assert it so hiding actually works. */ .cmd-item[hidden], .cmd-list[hidden], .section__title[hidden] { display: none; } /* Command listing on the docs index. */ .cmd-list { list-style: none; margin: 0 0 2rem; padding: 0; display: grid; gap: 0.6rem; } /* A single command row: the active form (link or muted) plus a description. */ .cmd-item { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.85rem 1rem; color: var(--text); } .cmd-item__forms { flex: 0 0 auto; } /* The command name in its active form. A link when its page exists… */ .cmd-item__name { color: var(--accent); font-weight: 700; } a.cmd-item__name:hover { text-decoration: underline; } /* …muted and non-clickable when the page is not published yet (or CLI-only). */ .cmd-item__name--soon { color: var(--muted); } .cmd-item__desc { color: var(--muted); font-size: 0.95rem; } /* "Coming soon" badge shown after a not-yet-documented form. */ .cmd-item__badge { font-size: 0.7rem; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.05rem 0.45rem; margin-left: 0.5rem; font-family: var(--font-sans); font-weight: 400; vertical-align: middle; } /* Command-form toggle (Interactive / Non-interactive) — CSS-only. The radios are visually hidden but keep keyboard focus. */ .mode-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .mode-switch { display: inline-flex; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin: 0 0 1.75rem; } .mode-switch__btn { font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); background-color: var(--surface); padding: 0.45rem 0.95rem; cursor: pointer; user-select: none; } .mode-switch__btn + .mode-switch__btn { border-left: 1px solid var(--border); } /* Highlight the label of the currently selected mode. */ #mode-interactive:checked ~ .mode-switch label[for="mode-interactive"], #mode-noninteractive:checked ~ .mode-switch label[for="mode-noninteractive"] { background-color: var(--accent); color: #0d1117; } /* Keyboard focus ring on the visible switch. */ .mode-radio:focus-visible ~ .mode-switch { outline: 2px solid var(--accent); outline-offset: 2px; } /* Form visibility: interactive (default) shows the slash form, the terminal form is hidden; non-interactive flips them. */ .cmd-item__name--bash { display: none; } #mode-noninteractive:checked ~ .cmd-list .cmd-item__name--slash { display: none; } #mode-noninteractive:checked ~ .cmd-list .cmd-item__name--bash { display: inline; } /* "CLI only" marker for commands without a slash form (interactive view). */ .cmd-item__tag { font-size: 0.7rem; color: var(--muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.05rem 0.4rem; margin-left: 0.5rem; font-family: var(--font-sans); vertical-align: middle; } /* Breadcrumb trail on docs pages (Home > Docs > current page). The "/" separators are drawn with ::before, so no inline markup is needed and the trail stays CSP-safe. */ .breadcrumb { margin: 0 0 0.75rem; font-size: 0.9rem; } .breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; margin: 0; padding: 0; list-style: none; } .breadcrumb__item { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); } .breadcrumb__item:not(:first-child)::before { content: "/"; color: var(--muted); opacity: 0.6; } .breadcrumb__link { color: var(--muted); text-decoration: none; } .breadcrumb__link:hover, .breadcrumb__link:focus-visible { color: var(--accent); text-decoration: underline; } .breadcrumb__current { color: var(--text); } /* Cross-link to the other form of the same command. */ .docs-counterpart { margin: 1rem 0 0; font-size: 0.9rem; } .docs-article .section__title { margin-top: 2rem; } .docs-article .section__title:first-child { margin-top: 0; } .docs-text { color: var(--muted); max-width: 70ch; } /* Releases / "What's new" page: one card per version, newest first. */ .release { padding: 1.5rem 0; border-top: 1px solid var(--border); } .release:first-child { border-top: 0; padding-top: 0; } .release__version { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.75rem; margin: 0 0 0.5rem; font-size: 1.4rem; } .release__date { font-family: var(--font-mono); font-size: 0.85rem; font-weight: 400; color: var(--muted); } .release__section { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--accent); margin: 1.1rem 0 0.4rem; } .release__items { margin: 0; padding-left: 1.2rem; display: grid; gap: 0.35rem; max-width: 80ch; color: var(--text); } .release__items code { background-color: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.05rem 0.35rem; font-size: 0.9em; } /* Terminal-style code block for usage and examples. */ .codeblock { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.5; color: var(--text); margin: 0; } .codeblock code { font-family: inherit; } /* ---- Copy-to-clipboard button -------------------------------------------- */ /* Wraps a code block so the button can sit in its top-right corner without scrolling away with the block's overflow. */ .codeblock-wrap { position: relative; } .codeblock-wrap .copy-btn { position: absolute; top: 0.5rem; right: 0.5rem; } /* Styled to echo the theme toggle / language switch controls. */ .copy-btn { font-family: var(--font-mono); font-size: 0.8rem; line-height: 1; color: var(--text); background-color: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.35rem 0.6rem; cursor: pointer; } .copy-btn:hover { border-color: var(--accent); } .copy-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Confirmation state, set briefly by assets/copy.js after a successful copy. */ .copy-btn.is-copied { color: var(--accent); border-color: var(--accent); } /* Off-screen textarea used only by the legacy clipboard fallback in copy.js. */ .copy-fallback { position: fixed; left: -9999px; top: 0; opacity: 0; } /* Prominent risk callout (e.g. on the auto pages) — an amber-accented box that stands apart from the muted body text without relying on inline styles. */ .docs-warning { max-width: 70ch; margin: 2rem 0 0; padding: 0.9rem 1.1rem; background-color: var(--warning-soft); border: 1px solid var(--warning); border-left-width: 4px; border-radius: var(--radius); color: var(--text); } .docs-warning strong { color: var(--warning); } /* "See also" cross-link to the concepts page on command detail pages. */ .docs-seealso { margin: 2rem 0 0; font-size: 0.9rem; } /* Link from the docs index hero to the concepts page. */ .docs-concepts-link { margin: 1rem 0 0; font-size: 0.9rem; } /* One-line caution on the docs index pointing at the full risk callout on the auto pages — amber so it reads as a warning without being a full box. */ .docs-risk-note { margin: 0.75rem 0 0; font-size: 0.9rem; } .docs-risk-note a { color: var(--warning); } /* ---- Concepts page ------------------------------------------------------- */ /* Two-column reference table (version sources). Borders and surface colours come from the same tokens as the code blocks, so it sits with the article. */ .concept-table { width: 100%; max-width: 70ch; border-collapse: collapse; margin: 1.25rem 0 0; font-size: 0.92rem; } .concept-table th, .concept-table td { text-align: left; vertical-align: top; padding: 0.6rem 0.8rem; border: 1px solid var(--border); } .concept-table thead th { background-color: var(--surface); color: var(--text); font-weight: 600; } .concept-table td { color: var(--muted); } .concept-table td .mono { color: var(--text); } /* ---- FAQ ----------------------------------------------------------------- */ /* Native
disclosure list — no JS, so it stays CSP-safe. */ .faq { display: flex; flex-direction: column; gap: 0.75rem; max-width: 70ch; } .faq__item { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.9rem 1.1rem; } .faq__q { cursor: pointer; font-weight: 600; color: var(--text); list-style: none; display: flex; align-items: center; gap: 0.6rem; } /* Hide the default disclosure triangle and draw our own rotating marker. */ .faq__q::-webkit-details-marker { display: none; } .faq__q::before { content: '+'; font-family: var(--font-mono); color: var(--accent); flex: 0 0 auto; } .faq__item[open] .faq__q::before { content: '−'; } .faq__a { margin-top: 0.75rem; } .faq__a .docs-text { margin: 0; } /* ---- Responsive tweaks --------------------------------------------------- */ /* Header collapses into a hamburger when the controls no longer fit one row. */ @media (max-width: 640px) { .site-header__inner { flex-wrap: wrap; } .nav-toggle__btn { display: inline-flex; } /* Controls are hidden until the hamburger is checked, then drop into a full-width column below the brand. */ .site-header__controls { display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start; gap: 0.6rem; padding-top: 0.6rem; } .nav-toggle:checked ~ .site-header__controls { display: flex; } /* Stack the nav links in a left-aligned column so they line up with the controls below them, instead of crowding into one tight row. */ .site-nav { width: 100%; flex-direction: column; align-items: flex-start; gap: 0.1rem; } .site-nav__link { width: 100%; } /* Controls now sit at the left edge, so a right-anchored menu would spill off the left of the screen. Anchor it to the left instead. */ .lang-switch__menu { right: auto; left: 0; } } @media (max-width: 520px) { .install { font-size: 0.85rem; } .hero__actions { flex-direction: column; } .btn { width: 100%; text-align: center; } } /* --------------------------------------------------------------------------- Blog: a listing of cards and a single-post article. Posts are authored in Markdown and rendered to HTML server-side (see App\Blog\PostCatalog), so the .blog-post__body rules below style generic Markdown output (headings, lists, code, blockquotes) using the same tokens as the rest of the site. --------------------------------------------------------------------------- */ .blog-card { padding: 1.5rem 0; border-top: 1px solid var(--border); } .blog-card:first-child { border-top: 0; padding-top: 0; } .blog-card__title { margin: 0 0 0.35rem; font-size: 1.4rem; } .blog-card__meta { margin: 0 0 0.6rem; font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); } .blog-card__excerpt { margin: 0 0 0.6rem; max-width: 70ch; color: var(--text); } .blog-card__more { margin: 0; font-size: 0.9rem; } /* Single post. */ .blog-post__back { margin: 0 0 1.5rem; font-size: 0.9rem; } .blog-post__header { margin-bottom: 1.5rem; } .blog-post__title { margin: 0 0 0.4rem; font-size: 1.9rem; line-height: 1.2; } .blog-post__meta { margin: 0; font-family: var(--font-mono); font-size: 0.85rem; color: var(--muted); } .blog-post__body { max-width: 72ch; color: var(--text); line-height: 1.7; } .blog-post__body h2 { margin: 2rem 0 0.6rem; font-size: 1.4rem; } .blog-post__body h3 { margin: 1.6rem 0 0.5rem; font-size: 1.15rem; } .blog-post__body p { margin: 0 0 1rem; } .blog-post__body ul, .blog-post__body ol { margin: 0 0 1rem; padding-left: 1.3rem; display: grid; gap: 0.35rem; } .blog-post__body :not(pre) > code { background-color: var(--surface); border: 1px solid var(--border); border-radius: 6px; padding: 0.05rem 0.35rem; font-size: 0.9em; } .blog-post__body pre { background-color: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1rem 1.1rem; overflow-x: auto; font-family: var(--font-mono); font-size: 0.9rem; line-height: 1.5; margin: 0 0 1rem; } .blog-post__body pre code { background: none; border: 0; padding: 0; font-size: inherit; } .blog-post__body blockquote { margin: 0 0 1rem; padding: 0.3rem 0 0.3rem 1rem; border-left: 3px solid var(--accent); color: var(--muted); }