/* Mind Archive — the project website. Token names are deliberately identical to apps/web/src/styles.css, and the values are the same three palettes the application ships (D-029). Keeping the names in step is what stops the site and the application drifting apart. Two attributes on decide the colours, and both are always present: data-palette minimal | warm | violet data-theme light | dark (already resolved — never "system") "System" is a choice a person makes, not a state the stylesheet knows about. The inline script in _layouts/default.html resolves it before the first paint and stamps the answer, so every colour here is selected by exactly one rule. */ :root { --radius: 8px; /* --- Layout --------------------------------------------------------- Three numbers decide the whole page rhythm. --gutter the side inset. Every band uses it, so everything aligns. --content-max one\ — the bands use the full screen. Readability is handled by --measure below, not by capping the layout. --measure the width of *running text* only. Tables, code blocks and diagrams are deliberately allowed the full band — which is the whole reason to have a wide layout. Prose is not: comfortable reading is 60-80 characters a line, and this is the number that keeps it there. -------------------------------------------------------------------- */ --gutter: 60px; /* No outer cap: the bands use the full screen, which is what the rest of the interface does. The gutter holds content off the edges and --measure keeps running text readable, so nothing sprawls that should not. */ --content-max: none; --measure: 72ch; /* Ledes, summaries and small print sit deliberately narrower than body text. The difference is hierarchy, not an accident — a standfirst that runs as wide as the paragraph below it stops reading as a standfirst. */ --measure-narrow: 62ch; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; /* Pre-JavaScript default — matches minimal / light. */ --page: #ffffff; --surface: #ffffff; --surface-sunken: #f6f8fa; --border: #e3e7ec; --border-strong: #c6cdd6; --text: #14171c; --text-soft: #4b535d; --text-faint: #79828d; --accent: #0b5fbf; --accent-text: #ffffff; --accent-quiet: #eaf2fd; --ok: #0f7a52; --ok-surface: #e7f5ef; color-scheme: light; } :root[data-palette="minimal"][data-theme="light"] { --page: #ffffff; --surface: #ffffff; --surface-sunken: #f6f8fa; --border: #e3e7ec; --border-strong: #c6cdd6; --text: #14171c; --text-soft: #4b535d; --text-faint: #79828d; --accent: #0b5fbf; --accent-text: #ffffff; --accent-quiet: #eaf2fd; --ok: #0f7a52; --ok-surface: #e7f5ef; color-scheme: light; } :root[data-palette="minimal"][data-theme="dark"] { --page: #0f1215; --surface: #171b20; --surface-sunken: #13171b; --border: #262c33; --border-strong: #3a434d; --text: #eef1f5; --text-soft: #aeb7c1; --text-faint: #7d868f; --accent: #6fa8f5; --accent-text: #0f1215; --accent-quiet: #16202c; --ok: #4fbf8b; --ok-surface: #12241c; color-scheme: dark; } :root[data-palette="warm"][data-theme="light"] { --page: #fbfaf8; --surface: #ffffff; --surface-sunken: #f4f2ef; --border: #e2ded7; --border-strong: #cbc5bb; --text: #1f1d1a; --text-soft: #56514a; --text-faint: #857f75; --accent: #6b5b45; --accent-text: #ffffff; --accent-quiet: #f0ece4; --ok: #2f6b46; --ok-surface: #eaf3ed; color-scheme: light; } :root[data-palette="warm"][data-theme="dark"] { --page: #171614; --surface: #201f1c; --surface-sunken: #1a1917; --border: #33312d; --border-strong: #494640; --text: #f0ede8; --text-soft: #bab5ac; --text-faint: #8a857c; --accent: #c3ad8a; --accent-text: #171614; --accent-quiet: #2a2721; --ok: #7cc39a; --ok-surface: #1d2a23; color-scheme: dark; } :root[data-palette="violet"][data-theme="light"] { --page: #ffffff; --surface: #ffffff; --surface-sunken: #f7f6fa; --border: #e6e3ee; --border-strong: #c9c4d8; --text: #14121a; --text-soft: #4c4859; --text-faint: #7b7689; --accent: #6435cf; --accent-text: #ffffff; --accent-quiet: #f0ebfd; --ok: #1c7a4d; --ok-surface: #e8f4ee; color-scheme: light; } :root[data-palette="violet"][data-theme="dark"] { --page: #0a0a0c; --surface: #141419; --surface-sunken: #0f0f13; --border: #26242e; --border-strong: #3b3846; --text: #e7e4ee; --text-soft: #a9a4b6; --text-faint: #797488; --accent: #a78bfa; --accent-text: #0a0a0c; --accent-quiet: #1a1626; --ok: #5fca92; --ok-surface: #13241b; color-scheme: dark; } /* ----------------------------------------------------------------------- Base ----------------------------------------------------------------------- */ * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } /* ----------------------------------------------------------------------- The layout band — the only thing that sets horizontal rhythm. Header, navigation, main content and footer all use these exact rules, so their edges line up by construction rather than by four numbers that have to be kept equal by hand. Nothing else on the site sets side padding. Note this replaces `margin: auto 60px`. In the margin shorthand that reads as vertical `auto` (which computes to zero on a block element) and horizontal 60px — so the `auto` did nothing. `margin-inline: auto` with an explicit max-width is what actually centres the band once the viewport is wider than the content. ----------------------------------------------------------------------- */ .wrap, .site-header__in, .site-header__panel-in, .site-footer__in { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* ----------------------------------------------------------------------- Header — one row: brand, navigation, then appearance (D-037). The navigation used to sit on a second row that scrolled sideways when it did not fit. It folds into the menu panel now instead of overflowing, which is what removed the horizontal scrolling. ----------------------------------------------------------------------- */ .site-header { border-bottom: 1px solid var(--border); background: var(--surface); } .site-header__in { padding-block: 10px; display: flex; align-items: center; gap: 14px; min-height: 60px; } .site-header__title { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.012em; margin: 0; white-space: nowrap; } .site-header__brand { text-decoration: none; color: inherit; } /* Pushes the actions right when the navigation is not in the row. */ .site-header__spacer { flex: 1; } .site-header__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; } .site-header__burger { padding: 7px 9px; } .site-header__panel { border-top: 1px solid var(--border); background: var(--surface); padding-block: 8px 12px; } .site-header__panel[hidden] { display: none; } /* ----------------------------------------------------------------------- Navigation ----------------------------------------------------------------------- */ .site-nav--inline { display: none; min-width: 0; } .site-nav ul { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0; padding: 0; } .site-nav--stacked ul { flex-direction: column; align-items: stretch; } .site-nav a { display: block; padding: 6px 10px; border-radius: 6px; color: var(--text-soft); font-size: 0.875rem; font-weight: 500; text-decoration: none; white-space: nowrap; } .site-nav--stacked a { padding: 10px; font-size: 0.9375rem; } .site-nav a:hover { color: var(--text); background: var(--surface-sunken); } .site-nav a[aria-current="page"] { color: var(--accent); background: var(--accent-quiet); } /* ----------------------------------------------------------------------- Appearance — two menu buttons, palette and theme (D-037). Kept in step with apps/web/src/styles.css. The theme button shows the icon of the current choice, which is what lets it drop its label on a narrow screen and still read. ----------------------------------------------------------------------- */ .appearance { display: flex; align-items: center; gap: 8px; } /* Without JavaScript the menus are never built, so nothing dead is shown. */ .no-js .appearance { display: none; } .icon { width: 16px; height: 16px; flex: none; } .icon--caret { width: 10px; height: 10px; opacity: 0.55; } .icon--tick { width: 15px; height: 15px; margin-left: auto; color: var(--accent); } .menu { position: relative; } .menu__trigger { font-size: 0.8125rem; padding: 7px 11px; gap: 7px; } .menu__trigger[aria-expanded="true"] { background: var(--surface-sunken); } .menu__panel { position: absolute; top: calc(100% + 6px); right: 0; z-index: 50; min-width: 210px; padding: 5px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.12), 0 4px 6px -4px rgba(0, 0, 0, 0.1); display: flex; flex-direction: column; } .menu__option { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border: 0; border-radius: calc(var(--radius) - 3px); background: none; color: var(--text); font: inherit; font-size: 0.875rem; text-align: left; cursor: pointer; } .menu__option:hover { background: var(--surface-sunken); } .menu__option[aria-checked="true"] { font-weight: 600; } .menu__option[aria-checked="false"] .icon--tick { visibility: hidden; } .menu__option .icon:first-child { color: var(--text-soft); } /* The real page, sunken and accent colours of a palette. A menu that lets you pick a colour scheme should show the colours. */ .swatch { display: flex; flex: none; width: 34px; height: 16px; border-radius: 4px; overflow: hidden; border: 1px solid var(--border-strong); } .swatch i { flex: 1; } /* --- the one breakpoint that decides the header's shape --- */ @media (min-width: 1024px) { .site-nav--inline { display: block; } .site-header__burger { display: none; } .site-header__spacer { display: none; } } /* ----------------------------------------------------------------------- Buttons ----------------------------------------------------------------------- */ .button { display: inline-flex; align-items: center; padding: 10px 18px; border-radius: var(--radius); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 0.9375rem; font-weight: 500; text-decoration: none; } .button--primary { background: var(--accent); border-color: var(--accent); color: var(--accent-text); } /* ----------------------------------------------------------------------- Document pages — the Markdown docs Jekyll renders ----------------------------------------------------------------------- */ /* `padding-block`, never the `padding` shorthand.
carries `wrap doc`, and the shorthand would reset the band's `padding-inline` to zero — which it did, on all twenty document pages, until D-041. */ .doc { padding-block: 48px 72px; } .doc h1 { font-size: 2rem; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; margin: 0 0 24px; text-wrap: balance; } .doc h2 { font-size: 1.375rem; font-weight: 600; letter-spacing: -0.012em; margin: 44px 0 12px; padding-top: 20px; border-top: 1px solid var(--border); } .doc h3 { font-size: 1.0625rem; font-weight: 600; margin: 28px 0 8px; } /* Running text is capped at the measure; everything else keeps the full band. A wide layout is worth having for tables, code and diagrams — but a paragraph spanning 1200px is roughly 200 characters a line, and the eye loses its place returning to the left edge. Wide layout, controlled measure. */ .doc p, .doc li, .doc blockquote { color: var(--text-soft); max-width: var(--measure); } .doc p { margin: 0 0 14px; } .doc strong { color: var(--text); font-weight: 600; } .doc ul, .doc ol { padding-left: 22px; margin: 0 0 16px; } .doc li { margin-bottom: 6px; } .doc code { font-family: var(--font-mono); font-size: 0.875em; background: var(--surface-sunken); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } .doc pre { background: var(--surface-sunken); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; overflow-x: auto; font-family: var(--font-mono); font-size: 0.8125rem; line-height: 1.7; color: var(--text); margin: 0 0 18px; } .doc pre code { background: none; border: 0; padding: 0; font-size: 1em; } .doc blockquote { margin: 0 0 16px; padding: 2px 0 2px 18px; border-left: 3px solid var(--accent); color: var(--text-soft); } .doc blockquote p:last-child { margin-bottom: 0; } .doc table { width: 100%; border-collapse: collapse; margin: 0 0 18px; font-size: 0.9375rem; display: block; overflow-x: auto; } .doc th, .doc td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--border); color: var(--text-soft); } .doc th { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--text-faint); font-weight: 600; white-space: nowrap; } .doc td strong { color: var(--text); } .doc hr { border: 0; border-top: 1px solid var(--border); margin: 32px 0; } .doc img { max-width: 100%; } /* ----------------------------------------------------------------------- Blog — the index and a single post. Every colour comes from the tokens above, so posts follow the reader's palette and theme like everything else. ----------------------------------------------------------------------- */ .post-list__feed { font-size: 0.875rem; margin-bottom: 32px; } .post-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .post-list__item { padding: 24px 0; border-top: 1px solid var(--border); max-width: none; } .post-list__item:last-child { border-bottom: 1px solid var(--border); } .post-list__meta, .post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 6px; color: var(--text-faint); font-size: 0.8125rem; font-variant-numeric: tabular-nums; } .post-list__title { font-size: 1.25rem; font-weight: 600; letter-spacing: -0.012em; margin: 0 0 8px; padding: 0; border: 0; } .post-list__title a { text-decoration: none; color: var(--text); } .post-list__title a:hover { color: var(--accent); } .post-list__summary { margin: 0; color: var(--text-soft); } /* --- a single post --- */ .post__header { margin-bottom: 32px; } .post__header h1 { margin-bottom: 12px; } .post__summary { font-size: 1.0625rem; color: var(--text-soft); max-width: var(--measure-narrow); margin: 0 0 14px; } .post__tags { list-style: none; display: flex; flex-wrap: wrap; gap: 7px; margin: 0; padding: 0; } .post__tags li { margin: 0; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-sunken); color: var(--text-soft); font-size: 0.75rem; font-weight: 500; max-width: none; } /* The first heading in a post body should not carry the rule that separates sections further down — the header above it already does that job. */ .post > h2:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; } .post__footer { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--border); } .post__footer p { color: var(--text-faint); font-size: 0.9375rem; margin-bottom: 10px; } /* ----------------------------------------------------------------------- Support — donation tiers and the crypto address (D-038). Every tier is a plain link to hosted checkout. There is no form here and no third-party script; a build check enforces that. ----------------------------------------------------------------------- */ .tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 0 0 24px; } .tier { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); text-decoration: none; color: var(--text); } .tier:hover { border-color: var(--accent); background: var(--accent-quiet); } .tier__emoji { font-size: 1.25rem; line-height: 1.2; margin-bottom: 4px; } .tier__amount { font-size: 1.125rem; font-weight: 600; letter-spacing: -0.015em; font-variant-numeric: tabular-nums; } .tier__label { font-size: 0.8125rem; color: var(--text-soft); } .tier--custom .tier__amount { font-size: 1rem; } .wallet { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: 14px 16px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-sunken); } .wallet__label { width: 100%; margin: 0; color: var(--text-faint); font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; } .wallet__address { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 0.8125rem; } .wallet__copy { flex: none; padding: 6px 12px; font-size: 0.8125rem; } .cta-row { margin: 20px 0; } /* ----------------------------------------------------------------------- Documentation index ----------------------------------------------------------------------- */ .doc-index { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 14px; } .doc-index li { margin: 0; padding-left: 16px; border-left: 2px solid var(--border); max-width: var(--measure); } .doc-index a { display: block; font-weight: 600; text-decoration: none; margin-bottom: 2px; } .doc-index a:hover { text-decoration: underline; } .doc-index span { color: var(--text-soft); font-size: 0.9375rem; } .doc-index__note { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--border); color: var(--text-faint); font-size: 0.9375rem; } /* ----------------------------------------------------------------------- Footer ----------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding: 28px 0 48px; } /* Centred and stacked: one line of text, one row of links. The previous space-between layout left a hole across the middle of a full-width footer, and the two paragraphs read as one sentence anyway. */ .site-footer__in { display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; } .site-footer__legal { margin: 0; color: var(--text-faint); font-size: 0.8125rem; /* Wider than body text because it is one continuous line, but still capped so it does not run the whole width of a large display. */ max-width: 96ch; } .site-footer__slogan { color: var(--text-soft); font-weight: 500; } .site-footer__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 18px; } .site-footer__links a { color: var(--text-soft); font-size: 0.875rem; text-decoration: none; } .site-footer__links a:hover { color: var(--text); text-decoration: underline; } /* ----------------------------------------------------------------------- Responsive — the gutter steps down rather than being redeclared per band. Because every band reads --gutter, changing it here moves the whole page together and nothing can fall out of alignment. ----------------------------------------------------------------------- */ @media (max-width: 1024px) { :root { --gutter: 32px; } } @media (max-width: 640px) { :root { --gutter: 20px; } /* Icon only. This is what keeps brand plus three controls inside 320px. */ .menu__value { display: none; } .menu__trigger { padding: 7px 8px; gap: 4px; } }