/* Fade Over — Ghost 6 link-blog theme Cool neutrals, early-2000s structure, modern type. */ /* ───────────────────────────────────────────────────────── TOKENS — swapped by body class for tint, tightness, width, layout ───────────────────────────────────────────────────────── */ :root { --head: "Inter Tight", system-ui, sans-serif; --body: "Newsreader", Georgia, serif; --mono: "JetBrains Mono", ui-monospace, monospace; --accent: #5B7A99; /* defaults (slate, light) */ --bg: #ecedee; --chrome: #dfe0e2; --surface: #fbfbfc; --border: #b4b7bc; --border-soft:#cbcdd1; --ink: #1c2430; --ink-soft: #47525f; --ink-muted: #6b7684; --visited: #8a6a9e; /* rhythm */ --fs-body: 17px; --fs-title: 20px; --lh: 1.5; --gap: 26px; --content-w: 640px; } /* Tints — light */ .fo-tint-slate { --bg:#eef1f4; --chrome:#e2e7ec; --surface:#ffffff; --border:#b8c0c9; --border-soft:#cdd4dc; } .fo-tint-ice { --bg:#eaf0f3; --chrome:#dce4e9; --surface:#f7fbfd; --border:#a9b7bf; --border-soft:#c5d0d7; } .fo-tint-stone { --bg:#ecedee; --chrome:#dfe0e2; --surface:#fbfbfc; --border:#b4b7bc; --border-soft:#cbcdd1; } .fo-tint-paper { --bg:#ecebe6; --chrome:#deddd6; --surface:#faf8f2; --border:#beb9aa; --border-soft:#cfcbbe; } .fo-tint-moss { --bg:#ecefe9; --chrome:#dde2d9; --surface:#f7faf4; --border:#aeb7a7; --border-soft:#c7cec0; } /* Tints — dark (via [data-mode="dark"] on , or prefers-color-scheme via auto) */ html[data-mode="dark"] .fo-tint-slate, html[data-mode="auto"]:where(.fo-sys-dark) .fo-tint-slate { --bg:#1b222d; --chrome:#232b38; --surface:#1f2732; --border:#3a4453; --border-soft:#2a3340; --ink:#dfe5ee; --ink-soft:#a8b2be; --ink-muted:#7a8494; --visited:#b59ac9; } html[data-mode="dark"] .fo-tint-ice, html[data-mode="auto"]:where(.fo-sys-dark) .fo-tint-ice { --bg:#141a22; --chrome:#1a2129; --surface:#161d26; --border:#2f3844; --border-soft:#222a34; --ink:#dfe5ee; --ink-soft:#a8b2be; --ink-muted:#7a8494; --visited:#b59ac9; } html[data-mode="dark"] .fo-tint-stone, html[data-mode="auto"]:where(.fo-sys-dark) .fo-tint-stone { --bg:#1d1f22; --chrome:#24262a; --surface:#1f2125; --border:#393c42; --border-soft:#2a2d31; --ink:#dfe5ee; --ink-soft:#a8b2be; --ink-muted:#7a8494; --visited:#b59ac9; } html[data-mode="dark"] .fo-tint-paper, html[data-mode="auto"]:where(.fo-sys-dark) .fo-tint-paper { --bg:#1f1d1a; --chrome:#26231f; --surface:#221f1c; --border:#3c3832; --border-soft:#2d2925; --ink:#ece8de; --ink-soft:#b4ac9e; --ink-muted:#827a6e; --visited:#c9a8b5; } html[data-mode="dark"] .fo-tint-moss, html[data-mode="auto"]:where(.fo-sys-dark) .fo-tint-moss { --bg:#1b1f1b; --chrome:#222723; --surface:#1d2220; --border:#3a433a; --border-soft:#2a302a; --ink:#dfe5ee; --ink-soft:#a8b2be; --ink-muted:#7a8494; --visited:#b59ac9; } /* Tightness (airy / balanced / tight) */ .fo-tight-airy { --gap: 48px; --lh: 1.66; } .fo-tight-balanced { --gap: 36px; --lh: 1.58; } .fo-tight-tight { --gap: 26px; --lh: 1.5; } /* Content width */ .fo-width-narrow { --content-w: 560px; } .fo-width-regular { --content-w: 640px; } .fo-width-wide { --content-w: 760px; } /* ───────────────────────────────────────────────────────── BASE ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } html { background: var(--bg); } body { background: var(--bg); color: var(--ink); font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--ink); } ::selection { background: color-mix(in oklch, var(--accent) 30%, transparent); } /* ───────────────────────────────────────────────────────── LAYOUT ───────────────────────────────────────────────────────── */ .fo-root { max-width: calc(var(--content-w) + 260px); margin: 0 auto; padding: 0 24px 60px; } .fo-masthead { padding: 22px 0 18px; text-align: center; border-bottom: 1px dashed var(--border); margin-bottom: 28px; } .fo-masthead-inner { display: inline-flex; align-items: baseline; gap: 10px; } .fo-wordmark { font-family: var(--head); font-weight: 800; font-size: 22px; letter-spacing: 0.04em; color: var(--ink); text-transform: uppercase; text-decoration: none; } .fo-tagline { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-muted); } .fo-shell { display: grid; grid-template-columns: 1fr; gap: 60px; align-items: flex-start; } .fo-layout-left-rail .fo-shell { grid-template-columns: 180px 1fr; } .fo-layout-right-rail .fo-shell { grid-template-columns: 1fr 180px; } @media (max-width: 760px) { .fo-shell { grid-template-columns: 1fr !important; gap: 28px; } } .fo-main { min-height: 70vh; } /* ───────────────────────────────────────────────────────── DAY HEADER / PAGER ───────────────────────────────────────────────────────── */ .fo-dayhead { display: flex; align-items: center; gap: 14px; margin: calc(var(--gap) * 1.2) 0 calc(var(--gap) * 0.6); } .fo-dayhead:first-child { margin-top: 0; } .fo-dayhead span { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-muted); white-space: nowrap; } .fo-dayrule { display: block; flex: 1; border-top: 1px dashed var(--border); } .fo-pager { display: flex; justify-content: space-between; align-items: center; margin-top: calc(var(--gap) * 1.6); padding-top: 20px; border-top: 1px dashed var(--border); font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--ink-muted); } .fo-pager a { color: inherit; text-decoration: none; } .fo-pager a:hover { color: var(--accent); } /* ───────────────────────────────────────────────────────── POSTS ───────────────────────────────────────────────────────── */ .fo-post { margin-bottom: var(--gap); } .fo-post-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; } .fo-source { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); border: 1px dashed var(--border); padding: 1px 6px; border-radius: 2px; white-space: nowrap; vertical-align: 2px; } .fo-title { margin: 0; font-family: var(--head); font-weight: 600; font-size: var(--fs-title); color: var(--ink); letter-spacing: -0.01em; line-height: 1.22; flex: 1 1 70%; } .fo-title a, .fo-title.fo-title-link { color: var(--ink); text-decoration: none; } .fo-title a:hover, .fo-title.fo-title-link:hover { color: var(--accent); } .fo-permalink { font-family: var(--mono); font-size: 13px; color: var(--ink-muted); text-decoration: none; opacity: 0.5; padding-left: 6px; transition: opacity .15s, color .15s; } .fo-permalink::before { content: attr(data-char, "#"); } /* Use the body's data-permalink-char attr to override the # */ body[data-permalink-char] .fo-permalink { font-size: 0; } body[data-permalink-char] .fo-permalink::after { content: attr(data-char); font-size: 13px; } body .fo-permalink::after { content: ""; } body[data-permalink-char="#"] .fo-permalink::after { content: "#"; font-size: 13px; } body[data-permalink-char="§"] .fo-permalink::after { content: "§"; font-size: 13px; } body[data-permalink-char="¶"] .fo-permalink::after { content: "¶"; font-size: 13px; } body[data-permalink-char="★"] .fo-permalink::after { content: "★"; font-size: 13px; } body[data-permalink-char="→"] .fo-permalink::after { content: "→"; font-size: 13px; } .fo-permalink:hover { opacity: 1; color: var(--accent); } .fo-body, .fo-body-full { font-family: var(--body); font-size: var(--fs-body); line-height: var(--lh); color: var(--ink-soft); text-wrap: pretty; } .fo-body-full { color: var(--ink); } .fo-body-full p { margin: 0 0 1em; } .fo-body-full p:last-child { margin-bottom: 0; } /* In-body links */ .fo-body a, .fo-body-full a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--border); text-decoration-thickness: 1px; text-underline-offset: 2px; transition: color .12s, text-decoration-color .12s; } .fo-body a:hover, .fo-body-full a:hover { color: var(--accent); text-decoration-color: var(--accent); } .fo-body a:visited, .fo-body-full a:visited { color: var(--visited); } /* Post meta/foot */ .fo-post-foot, .fo-post-meta { margin-top: 8px; font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-muted); } .fo-post-foot a, .fo-post-meta a { color: var(--ink-muted); text-decoration: none; } .fo-post-foot a:hover, .fo-post-meta a:hover { color: var(--accent); text-decoration: underline; } .fo-post-meta { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--border); } .fo-sep { opacity: 0.5; } /* Blockquotes / pullquotes */ .fo-body-full blockquote, .fo-body blockquote { margin: 1em 0; padding: 4px 0 4px 18px; border-left: 3px double var(--border); font-style: italic; color: var(--ink); } /* Images */ .fo-body-full img, .fo-body-full figure, .fo-body img { max-width: 100%; height: auto; } .fo-body-full figure { margin: 1.2em 0; } .fo-body-full figcaption { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 6px; } /* Code */ .fo-body-full code, .fo-body code { font-family: var(--mono); font-size: 0.9em; background: var(--chrome); padding: 1px 5px; border-radius: 2px; } .fo-body-full pre { font-family: var(--mono); font-size: 13px; background: var(--chrome); border: 1px dashed var(--border); padding: 14px 16px; overflow-x: auto; } .fo-body-full pre code { background: transparent; padding: 0; } /* YouTube / iframe / embed */ .fo-body-full iframe, .fo-body-full .kg-embed-card { max-width: 100%; border: 1px dashed var(--border); } /* Ghost card styles — minimal overrides so built-in cards don't look alien */ .kg-card { margin: 1.2em 0; } .kg-width-wide { max-width: calc(var(--content-w) + 160px); margin-left: 50%; transform: translateX(-50%); } .kg-width-full { max-width: 100vw; margin-left: 50%; transform: translateX(-50%); } .kg-width-wide img, .kg-width-full img { width: 100%; height: auto; } .kg-bookmark-card { display: flex; border: 1px dashed var(--border); background: var(--surface); text-decoration: none; } .kg-bookmark-content { padding: 16px; flex: 1; } .kg-bookmark-title { font-family: var(--head); font-weight: 600; color: var(--ink); } .kg-bookmark-description { color: var(--ink-soft); font-size: 14px; } .kg-bookmark-metadata { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); margin-top: 8px; } .kg-callout-card { border: 1px dashed var(--border); padding: 14px 18px; background: var(--chrome); } /* ───────────────────────────────────────────────────────── RAIL ───────────────────────────────────────────────────────── */ .fo-rail { padding: 0; font-family: var(--head); position: sticky; top: 24px; align-self: flex-start; } .fo-rail-kicker { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-muted); margin-bottom: 8px; } .fo-rail-kicker-top { border-top: 1px dashed var(--border); padding-top: 16px; margin-top: 22px; } .fo-rail-name { font-family: var(--head); font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin-bottom: 22px; } .fo-rail-nav ul, .fo-blogroll { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; } .fo-rail-nav ul { margin-bottom: 22px; } .fo-rail-nav a { font-family: var(--head); font-size: 13px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink-soft); text-decoration: none; font-weight: 500; padding: 2px 0; display: block; } .fo-rail-nav a:hover { color: var(--accent); } .fo-blogroll a { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); text-decoration: none; } .fo-blogroll a:hover { text-decoration: underline; } /* Mode toggle */ .fo-mode { display: inline-flex; gap: 2px; margin-bottom: 22px; border: 1px solid var(--border-soft); padding: 2px; width: fit-content; } .fo-mode button { border: none; background: transparent; cursor: pointer; color: var(--ink-muted); padding: 4px 6px; display: flex; align-items: center; justify-content: center; transition: background .12s, color .12s; } .fo-mode button:hover { color: var(--ink-soft); } .fo-mode button[aria-pressed="true"] { background: var(--ink); color: var(--bg); } /* ───────────────────────────────────────────────────────── FOOTER ───────────────────────────────────────────────────────── */ .fo-footer { margin: 60px auto 0; padding: 24px; text-align: center; font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--ink-muted); } .fo-footer a { color: inherit; } /* Archive description */ .fo-archive-desc { font-family: var(--body); color: var(--ink-soft); margin: 0 0 var(--gap); }