/* ========================================================= DESIGN TOKENS — change these six values to reskin the site ========================================================= */ :root { --bg: #EEF0EC; /* page background — cool paper grey */ --surface: #E4E7E1; /* sidebar / card background, one step darker */ --ink: #1C2321; /* primary text */ --ink-soft: #52605C; /* secondary text, metadata */ --line: #C9CFC7; /* hairline borders */ --accent: #2B5D6B; /* links, active nav, headings accent */ --accent-hot:#B23B3B; /* hover / active state, used sparingly */ --pre-bg: #1C2321; /* code block background — separate from --ink so it doesn't flip in dark mode */ --pre-ink: #E8E6DE; /* code block text */ --font-display: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; --font-body: 'Source Serif 4', Georgia, 'Times New Roman', serif; --font-mono: 'IBM Plex Mono', 'SFMono-Regular', Menlo, monospace; --sidebar-w: 280px; --content-max: 680px; --radius: 3px; } /* ========================================================= DARK THEME — applied via [data-theme="dark"] on ========================================================= */ [data-theme="dark"] { --bg: #181B19; --surface: #21251F; --ink: #E6E8E3; --ink-soft: #8D988F; --line: #333A34; --accent: #7FB3C3; --accent-hot:#E08A6E; --pre-bg: #0F1210; --pre-ink: #E6E8E3; } /* ========================================================= RESET ========================================================= */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 18px; line-height: 1.65; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } img { max-width: 100%; display: block; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; } a:hover, a:focus-visible { color: var(--accent-hot); } :focus-visible { outline: 2px solid var(--accent-hot); outline-offset: 2px; } /* ========================================================= LAYOUT SHELL ========================================================= */ .shell { display: flex; min-height: 100vh; } /* ---------- Sidebar ---------- */ .sidebar { width: var(--sidebar-w); flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--line); padding: 2rem 1.5rem; position: sticky; top: 0; height: 100vh; overflow-y: auto; transition: background-color 0.2s ease, border-color 0.2s ease; } .site-id { margin-bottom: 2.25rem; } .site-id a { text-decoration: none; color: var(--ink); } .site-title { font-family: var(--font-display); font-weight: 600; font-size: 1rem; letter-spacing: 0.02em; display: flex; align-items: center; gap: 0px; } .site-title .cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } .site-tagline { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); margin-top: 0.35rem; } .nav-label { font-family: var(--font-mono); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); margin: 0 0 0.75rem; } /* directory-tree style nav (used for both post list and TOC) */ .tree { list-style: none; margin: 0 0 2rem; padding: 0; font-family: var(--font-mono); font-size: 0.85rem; } .tree li { position: relative; padding-left: 1.4em; margin: 0.15em 0; line-height: 1.5; } .tree li::before { content: "├─"; position: absolute; left: 0; color: var(--line); } .tree li:last-child::before { content: "└─"; } .tree a { color: var(--ink-soft); text-decoration: none; display: inline-block; transition: color 0.15s ease; } .tree a:hover, .tree a:focus-visible { color: var(--accent-hot); } .tree a.active { color: var(--accent); font-weight: 600; } /* nested TOC (h3 under h2) gets a second indent level */ .tree .tree { margin: 0.15em 0 0.15em 0; padding-left: 0.9em; } .sidebar-footer { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); border-top: 1px solid var(--line); padding-top: 1rem; margin-top: auto; } /* ---------- Theme toggle ---------- */ .theme-toggle { display: inline-flex; align-items: center; gap: 0.4em; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.02em; color: var(--ink-soft); background: none; border: 1px solid var(--line); border-radius: var(--radius); padding: 0.4em 0.7em; cursor: pointer; transition: color 0.15s ease, border-color 0.15s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { color: var(--accent-hot); border-color: var(--accent-hot); } /* mobile drawer toggle */ .nav-toggle { display: none; } /* ---------- Main content ---------- */ .content { flex: 1; min-width: 0; padding: 3.5rem 2rem 6rem; display: flex; justify-content: center; } .content-inner { width: 100%; max-width: var(--content-max); } /* Post index */ .post-list { list-style: none; margin: 0; padding: 0; } .post-list li { padding: 1.4rem 0; border-bottom: 1px solid var(--line); } .post-list li:first-child { padding-top: 0; } .post-entry-title { margin: 0 0 0.35rem; font-size: 1.25rem; } .post-entry-title a { text-decoration: none; color: var(--ink); } .post-entry-title a:hover { color: var(--accent-hot); } .post-entry-meta { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-soft); letter-spacing: 0.02em; } .post-entry-excerpt { margin: 0.5rem 0 0; color: var(--ink-soft); font-size: 0.95rem; } /* Post page */ .post-meta { font-family: var(--font-mono); font-size: 0.78rem; color: var(--ink-soft); letter-spacing: 0.02em; margin-bottom: 0.5rem; } .post-meta .sep { margin: 0 0.5em; color: var(--line); } h1.post-title { font-family: var(--font-display); font-size: 1.9rem; line-height: 1.25; margin: 0.2rem 0 2rem; color: var(--ink); } .post-body h2, .post-body h3, .post-body h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.35; scroll-margin-top: 2rem; } .post-body h2 { font-size: 1.3rem; margin: 2.6rem 0 1rem; padding-top: 0.25rem; border-top: 1px solid var(--line); } .post-body h3 { font-size: 1.05rem; margin: 1.8rem 0 0.75rem; color: var(--accent); } .post-body p { margin: 0 0 1.2rem; } .post-body ul, .post-body ol { margin: 0 0 1.2rem; padding-left: 1.4em; } .post-body li { margin: 0.3em 0; } .post-body blockquote { margin: 1.5rem 0; padding: 0.2rem 1.2rem; border-left: 3px solid var(--accent); color: var(--ink-soft); font-style: italic; } .post-body code { font-family: var(--font-mono); font-size: 0.85em; background: var(--surface); padding: 0.15em 0.4em; border-radius: var(--radius); } .post-body pre { background: var(--pre-bg); color: var(--pre-ink); padding: 1rem 1.2rem; border-radius: var(--radius); overflow-x: auto; margin: 1.5rem 0; font-size: 0.85rem; line-height: 1.55; } .post-body pre code { background: none; padding: 0; color: inherit; } .post-body hr { border: none; border-top: 1px solid var(--line); margin: 2.5rem 0; } .post-body a { text-underline-offset: 3px; } .post-body img { border-radius: var(--radius); margin: 1.5rem 0; } .post-body table { border-collapse: collapse; width: 100%; margin: 1.5rem 0; font-size: 0.9rem; } .post-body th, .post-body td { border: 1px solid var(--line); padding: 0.5em 0.75em; text-align: left; } .post-body th { font-family: var(--font-mono); background: var(--surface); } .back-link { display: inline-block; margin-top: 3rem; font-family: var(--font-mono); font-size: 0.85rem; text-decoration: none; color: var(--ink-soft); } .back-link:hover { color: var(--accent-hot); } /* ========================================================= RESPONSIVE — mobile drawer ========================================================= */ @media (max-width: 860px) { .shell { display: block; } .nav-toggle { display: flex; align-items: center; gap: 0px; position: sticky; top: 0; z-index: 20; width: 100%; background: var(--surface); border: none; border-bottom: 1px solid var(--line); padding: 1rem 1.25rem; font-family: var(--font-display); font-size: 0.95rem; font-weight: 600; color: var(--ink); cursor: pointer; } .nav-toggle .cursor { color: var(--accent); animation: blink 1.1s steps(1) infinite; } .nav-toggle::after { content: "☰"; margin-left: auto; font-size: 1.1rem; color: var(--ink-soft); } .sidebar { position: fixed; top: 0; left: 0; height: 100vh; width: min(85vw, 320px); transform: translateX(-100%); transition: transform 0.22s ease; z-index: 30; padding-top: 4.5rem; } .sidebar.open { transform: translateX(0); } .scrim { display: none; position: fixed; inset: 0; background: rgba(28, 35, 33, 0.35); z-index: 25; } .scrim.open { display: block; } .content { padding: 5.5rem 1.25rem 4rem; } h1.post-title { font-size: 1.55rem; } }