@charset "utf-8"; /* ═══════════════════════════════════════════════════════════ Gradient Ascent · Riverrun (cinnabar imprint). Tokens vendored from ~/src/riverrun/riverrun/tokens.css v0.2 — do not hand-edit values; refresh from the source when Riverrun bumps. ═══════════════════════════════════════════════════════════ */ :root { color-scheme: light; --rr-bg: #fffff8; --rr-bg-raised: #f7f7f2; --rr-bg-inset: #f2f2ec; --rr-bg-tint: #fdfdf6; --rr-ink: #111111; --rr-ink-muted: #6b7280; --rr-ink-faint: #707680; /* tertiary text; 4.55:1 on paper */ --rr-ink-decorative: #9aa0a6; /* non-text marks only */ --rr-line: #e2e1da; --rr-hairline: rgba(17, 17, 17, 0.08); --rr-accent: #5e6ad2; --rr-accent-soft: #b9bfe8; --rr-accent-wash: rgba(94, 106, 210, 0.10); --rr-selection: rgba(94, 106, 210, 0.22); --rr-font-ui: Inter, "PingFang SC", "Microsoft YaHei", system-ui, sans-serif; --rr-font-prose: Newsreader, "Noto Serif SC", "Songti SC", Georgia, serif; --rr-font-note: "LXGW WenKai", "Kaiti SC", "Newsreader", serif; --rr-font-mono: "JetBrains Mono", "SF Mono", Menlo, monospace; --rr-text-body: 17.5px; --rr-text-meta: 12.5px; --rr-leading-prose: 1.62; --rr-radius-s: 4px; --rr-radius-m: 6px; --rr-radius-pill: 999px; --rr-measure: 680px; --rr-duration-fast: 140ms; --rr-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --rr-focus-width: 2px; --rr-focus-offset: 3px; --rr-touch-target: 44px; } [data-imprint="cinnabar"] { --rr-accent: #b23a2a; --rr-accent-soft: #dcaaa2; --rr-accent-wash: rgba(178, 58, 42, 0.08); --rr-selection: rgba(178, 58, 42, 0.18); } /* Blog-local tokens (not part of the vendored set) */ :root { --ga-ink-soft: #3d4249; /* blockquotes, homepage summaries */ --ga-img-filter: none; } /* ── Night mode — a deliberate blog divergence from Riverrun's forced-light policy (there, the night surface is a component, not a theme). Values derive from the system's night tokens, warmed to mirror the paper; cinnabar lifted to #d97f6a for 6.8:1 on the night ground. `data-theme` is set on pre-paint (stored choice or OS); the media block below is the no-JS fallback — KEEP THE TWO BLOCKS IN SYNC. ── */ [data-theme="dark"] { color-scheme: dark; --rr-bg: #0b0b09; --rr-bg-raised: #15150f; --rr-bg-inset: #191811; --rr-bg-tint: #0e0e0a; --rr-ink: #e7e5dc; --rr-ink-muted: #9aa0a6; --rr-ink-faint: #82878f; --rr-ink-decorative: #565a5f; --rr-line: #2a2c30; --rr-hairline: rgba(231, 229, 220, 0.09); --rr-accent: #d97f6a; --rr-accent-soft: #7a453b; --rr-accent-wash: rgba(217, 127, 106, 0.10); --rr-selection: rgba(217, 127, 106, 0.28); --ga-ink-soft: #b7b5ab; --ga-img-filter: brightness(0.9); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --rr-bg: #0b0b09; --rr-bg-raised: #15150f; --rr-bg-inset: #191811; --rr-bg-tint: #0e0e0a; --rr-ink: #e7e5dc; --rr-ink-muted: #9aa0a6; --rr-ink-faint: #82878f; --rr-ink-decorative: #565a5f; --rr-line: #2a2c30; --rr-hairline: rgba(231, 229, 220, 0.09); --rr-accent: #d97f6a; --rr-accent-soft: #7a453b; --rr-accent-wash: rgba(217, 127, 106, 0.10); --rr-selection: rgba(217, 127, 106, 0.28); --ga-ink-soft: #b7b5ab; --ga-img-filter: brightness(0.9); } } /* Base */ *, *::before, *::after { box-sizing: border-box; } html { background: var(--rr-bg); scroll-behavior: smooth; } body { font-family: var(--rr-font-prose); font-size: 16px; /* blog runs one notch below Riverrun's 17.5px body token — denser, lucumr-style; system token unchanged */ line-height: var(--rr-leading-prose); margin: 0; padding: 0; font-weight: 400; color: var(--rr-ink); background: var(--rr-bg); text-rendering: optimizeLegibility; } ::selection { background: var(--rr-selection); } button, input, select, textarea { font: inherit; } button, summary { -webkit-tap-highlight-color: transparent; } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: var(--rr-focus-width) solid var(--rr-accent); outline-offset: var(--rr-focus-offset); } a { color: var(--rr-ink); font-weight: 400; text-decoration: none; border-bottom: 1px solid var(--rr-accent-soft); transition: color var(--rr-duration-fast) var(--rr-ease-out), border-color var(--rr-duration-fast) var(--rr-ease-out); } a:hover { color: var(--rr-accent); border-bottom-color: var(--rr-accent); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* Headlines — weight 500, hierarchy from size and whitespace */ h1, h2, h3, h4, h5, h6 { font-family: var(--rr-font-prose); font-weight: 500; color: var(--rr-ink); line-height: 1.28; text-wrap: pretty; } h1 a, h2 a, h3 a, h4 a, h5 a, h6 a { border-bottom: none; } h1 { margin: 15px 0 25px 0; font-size: 30px; line-height: 1.25; } h2 { margin: 40px 0 12px 0; font-size: 22px; } h3 { margin: 32px 0 10px 0; font-size: 18.5px; font-weight: 600; } h4 { font-size: 17px; font-weight: 600; } /* Content H1s (from markdown # headers) - between page title and h2 */ p.date ~ h1, p.date ~ * h1 { font-size: 25px; } /* Layout elements — one column: header, nav, body, footer all align to the same 680px measure (container = measure + padding) */ div.container { max-width: 680px; margin: 48px auto; padding: 0 40px; } div.header { float: left; } div.navigation { float: right; } div.header, div.navigation { height: 25px; margin-bottom: 42px; } div.header { font-family: var(--rr-font-prose); font-style: italic; font-weight: 600; font-size: 20px; } div.header a { border-bottom: none; } span.brand-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--rr-accent); margin-right: 8px; vertical-align: baseline; } div.navigation ul { margin: 0; padding: 0; list-style: none; } div.navigation ul li { display: inline; margin: 0 8px; padding: 0; } div.navigation a, button.theme-toggle { font-family: var(--rr-font-ui); font-size: 13px; color: var(--rr-ink-muted); border-bottom: none; } button.theme-toggle { border: 0; background: none; padding: 0; margin: 0; cursor: pointer; transition: color var(--rr-duration-fast) var(--rr-ease-out); } div.navigation a:hover, button.theme-toggle:hover { color: var(--rr-accent); } @media (pointer: coarse) { div.navigation a, button.theme-toggle { display: inline-block; padding: 10px 4px; } } div.body { clear: both; max-width: var(--rr-measure); margin: 0 auto; line-height: var(--rr-leading-prose); text-wrap: pretty; } div.body a { border-bottom: 1px solid var(--rr-accent-soft); } div.body a:hover { border-bottom-color: var(--rr-accent); } div.footer { margin-top: 55px; border-top: 1px solid var(--rr-hairline); padding-top: 18px; display: flex; justify-content: space-between; align-items: baseline; font-family: var(--rr-font-ui); font-size: 13px; color: var(--rr-ink-muted); } div.footer p { margin: 0; } span.footer-meta { font-family: var(--rr-font-mono); font-size: 11.5px; color: var(--rr-ink-faint); } span.footer-meta a { color: var(--rr-ink-faint); } div.footer a { color: var(--rr-ink-muted); border-bottom: none; } div.footer a:hover { color: var(--rr-accent); } /* Margins */ p, div.line-block, ul, ol, pre, table { margin: 15px 0 15px 0; } ul ol, ol ul, ul ul, ol ol { margin: 10px 0; padding: 0 0 0 40px; } li { padding: 0; } li p { margin: 0; padding: 0; } li p + p { margin-top: 15px; } /* Blockquote — Tufte indent, italic, no border bar */ blockquote { font-style: italic; margin: 24px 32px; padding: 0; color: var(--ga-ink-soft); } /* Margin-note voice (批：) for asides in posts:
…
— seal added here, keep ≤2 sentences */ div.rr-note { margin: 16px 0 16px 24px; font-family: var(--rr-font-note); font-size: 14.5px; line-height: 1.7; color: var(--rr-ink-muted); } div.rr-note::before { content: "批："; color: var(--rr-accent); } /* Code formatting — quiet monochrome */ pre, code, tt { font-family: var(--rr-font-mono); font-size: 0.86em; } pre { line-height: 1.7; background: var(--rr-bg-inset); color: var(--rr-ink); padding: 14px 18px; overflow-x: auto; border-radius: var(--rr-radius-m); } code, tt { background: var(--rr-bg-inset); padding: 2px 5px; border-radius: var(--rr-radius-s); } pre code, pre tt { background: none; padding: 0; border-radius: 0; } /* Syntax highlighting (chroma, class-based) — Riverrun quiet monochrome: comments gray, keywords accent, strings soft; everything else ink. */ div.highlight pre { background: var(--rr-bg-inset); } .chroma .c, .chroma .ch, .chroma .cm, .chroma .c1, .chroma .cs, .chroma .cp, .chroma .cpf { color: var(--rr-ink-muted); font-style: italic; } .chroma .k, .chroma .kc, .chroma .kd, .chroma .kn, .chroma .kp, .chroma .kr, .chroma .kt { color: var(--rr-accent); } .chroma .s, .chroma .sa, .chroma .sb, .chroma .sc, .chroma .dl, .chroma .sd, .chroma .s2, .chroma .se, .chroma .sh, .chroma .si, .chroma .sx, .chroma .sr, .chroma .s1, .chroma .ss { color: var(--ga-ink-soft); } .chroma .hl { background: var(--rr-accent-wash); } img { max-width: 100%; height: auto; filter: var(--ga-img-filter); } /* Homepage intro — names what this is before the list starts */ div.home-intro h1 { margin: 0 0 6px; font-size: 24px; } div.home-intro p.tagline { margin: 0 0 36px; font-style: italic; font-size: 15px; color: var(--rr-ink-muted); } /* Blog overview — date-on-left rows. No extra indents: date column + detail fill the 680px measure. */ div.entry-overview { margin: 0; padding: 13px 0; border-bottom: 1px solid var(--rr-hairline); } div.entry-overview h1, div.entry-overview div.summary, div.entry-overview div.summary p { display: inline; line-height: 1.5; } div.entry-overview h1 { margin: 0; font-size: 16.5px; font-family: var(--rr-font-prose); font-weight: 500; } div.entry-overview h1 a { font-weight: inherit; border-bottom: none; } div.entry-overview h1 a:hover { color: var(--rr-accent); } div.entry-overview h1:after { content: " —"; color: var(--rr-ink-decorative); } div.entry-overview div.summary, div.entry-overview div.summary p { color: var(--ga-ink-soft); font-size: 15px; } div.entry-overview div.summary, div.entry-overview div.date, div.entry-overview div.summary p { margin: 0; padding: 0; } div.entry-overview div.detail { margin-left: 124px; text-wrap: balance; } div.entry-overview div.date { float: left; width: 104px; color: var(--rr-ink-muted); text-align: right; font-family: var(--rr-font-mono); font-size: 13px; line-height: 27px; } /* Pagination */ div.pagination { margin: 36px 0 0 0; text-align: center; font-family: var(--rr-font-ui); font-size: 13px; color: var(--rr-ink-muted); } div.pagination strong { font-weight: normal; font-style: italic; } /* Single post page */ h1 + p.date { margin-top: -25px; } p.date { color: var(--rr-ink-muted); font-family: var(--rr-font-ui); font-size: 13px; } /* Tables — header rule in ink, rows in hairline, no cell borders */ div.body table { display: block; overflow-x: auto; border: none; border-collapse: collapse; background: none; width: max-content; max-width: 100%; font-size: 15px; } td, th { padding: 8px 12px; border: none; border-bottom: 1px solid var(--rr-hairline); } th { background: none; font-family: var(--rr-font-ui); font-size: 12px; font-weight: 600; text-align: left; color: var(--rr-ink-muted); border-bottom: 1px solid var(--rr-ink); } /* HR — the · · · beat */ hr { border: none; height: auto; margin: 40px auto; text-align: center; } hr::after { content: "· · ·"; color: var(--rr-ink-decorative); letter-spacing: 0.6em; font-size: 14px; } /* Tag Cloud — one size, quiet; weight carries in count order */ div.tag-cloud { line-height: 2.2; text-align: left; font-family: var(--rr-font-ui); font-size: 14px; } div.tag-cloud a.tag { margin: 0 0.8em 0 0; border-bottom: none; color: var(--rr-ink-muted); } div.tag-cloud a.tag:hover { color: var(--rr-accent); } div.tag-cloud a.tag-1 { font-size: 0.95em; } div.tag-cloud a.tag-2 { font-size: 1.0em; } div.tag-cloud a.tag-3 { font-size: 1.05em; } div.tag-cloud a.tag-4 { font-size: 1.1em; } div.tag-cloud a.tag-5 { font-size: 1.15em; } div.tag-cloud a.tag-6 { font-size: 1.2em; } div.tag-cloud a.tag-7 { font-size: 1.25em; } div.tag-cloud a.tag-8 { font-size: 1.3em; } div.tag-cloud a.tag-9 { font-size: 1.35em; } div.tag-cloud a.tag-10, div.tag-cloud a[class*="tag-"]:not([class*="tag-1"]):not([class*="tag-2"]):not([class*="tag-3"]):not([class*="tag-4"]):not([class*="tag-5"]):not([class*="tag-6"]):not([class*="tag-7"]):not([class*="tag-8"]):not([class*="tag-9"]) { font-size: 1.4em; } /* Post tags — pills */ div.post-tags { margin-top: 40px; padding-top: 15px; border-top: 1px solid var(--rr-hairline); font-family: var(--rr-font-ui); font-size: var(--rr-text-meta); } div.post-tags a { display: inline-block; margin-right: 0.6em; border: 1px solid var(--rr-line); border-radius: var(--rr-radius-pill); padding: 2px 9px; color: var(--rr-accent); border-bottom-width: 1px; } div.post-tags a:hover { border-color: var(--rr-accent-soft); } /* Mobile responsive */ @media only screen and (max-width: 900px) { div.entry-overview div.detail { margin-left: 124px; } } @media only screen and (max-width: 800px) { div.body { padding: 0; margin: 0; } div.container { padding: 16px; margin: 0; } div.header { float: none; height: auto; margin: 0; } div.navigation { float: none; height: auto; margin: 10px 0 30px 0; } div.navigation ul li:first-child { margin-left: 0; } } @media only screen and (max-width: 600px) { div.entry-overview div.date { float: none; width: auto; text-align: left; margin-bottom: 2px; } div.entry-overview div.detail { margin-left: 0; } }