/* Blog styles. Dark by default; a light theme is available via the toggle (theme.js sets data-theme on , persisted in localStorage). All colors are CSS custom properties so both themes share one set of rules. Typography is tuned for comfortable long-form reading: ~18px text, generous line-height, and a ~44rem measure (~80 characters per line). */ @import url("https://fonts.googleapis.com/css2?family=Source+Sans+3:ital,wght@0,400;0,600;0,700;1,400&display=swap"); /* ---- Theme tokens -------------------------------------------------------- */ :root, :root[data-theme="dark"] { color-scheme: dark; --bg: #16171b; --bg-elev: #1d1f26; --text: #e8eaf0; --heading: #f6f7f9; --muted: #9096a0; --link: #5bcfad; --link-hover: #7fe0c4; --rule: #2a2d36; --code-bg: #1c1e25; --code-border: #2c2f39; --code-text: #e4e7ed; --inline-code-bg: #24272f; --quote-bar: #3a3f4b; --quote-text: #c6cbd3; --table-head: #f6f7f9; --table-stripe: #1b1d23; --selection: rgba(91, 207, 173, 0.28); --accent-soft: rgba(91, 207, 173, 0.12); } :root[data-theme="light"] { color-scheme: light; --bg: #ffffff; --bg-elev: #fbfbfc; --text: #1c2024; --heading: #0c0f12; --muted: #6f7872; --link: #268a72; --link-hover: #1b6b57; --rule: #e9eaec; --code-bg: #f6f7f8; --code-border: #e6e8ea; --code-text: #1c2024; --inline-code-bg: #eef0f1; --quote-bar: #dfe2e4; --quote-text: #3a423d; --table-head: #0c0f12; --table-stripe: #fafafb; --selection: rgba(47, 160, 133, 0.18); --accent-soft: rgba(47, 160, 133, 0.10); } /* ---- Base ---------------------------------------------------------------- */ * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--text); font-family: "Source Sans 3", "Source Sans Pro", Helvetica, sans-serif; font-size: 1.125rem; /* ~18px */ font-weight: 400; line-height: 1.72; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; transition: background-color 0.25s ease, color 0.25s ease; } ::selection { background: var(--selection); } /* ---- Layout -------------------------------------------------------------- */ .blog-header, .blog-container { /* Fluid: fills more of the screen on large monitors, capped so lines don't get uncomfortably long. Bump the rem cap to widen further. */ max-width: min(92vw, 62rem); margin-left: auto; margin-right: auto; padding-left: 1.6rem; padding-right: 1.6rem; } .blog-header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-top: 1.4rem; padding-bottom: 1rem; margin-bottom: 2.6rem; border-bottom: 1px solid var(--rule); font-size: 0.95rem; } .blog-nav a { margin-right: 0.15rem; } .blog-container { padding-bottom: 6rem; } /* ---- Theme toggle -------------------------------------------------------- */ .theme-toggle { flex: none; appearance: none; -webkit-appearance: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; border: 1px solid var(--rule); background: var(--bg-elev); color: var(--text); font-size: 1.05rem; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; } .theme-toggle:hover { color: var(--link); border-color: var(--link); } .theme-toggle:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; } /* ---- Typography ---------------------------------------------------------- */ h1, h2, h3, h4, h5, h6 { color: var(--heading); font-weight: 600; line-height: 1.25; margin: 2.4rem 0 0.9rem 0; text-wrap: balance; } h1 { font-size: 2.1rem; font-weight: 700; letter-spacing: -0.015em; margin-top: 0; line-height: 1.15; } h2 { font-size: 1.55rem; padding-bottom: 0.35rem; border-bottom: 1px solid var(--rule); } h3 { font-size: 1.28rem; } h4 { font-size: 1.1rem; } p { margin: 0 0 1.35rem 0; text-wrap: pretty; } a { color: var(--link); text-decoration: none; border-bottom: 1px solid color-mix(in srgb, var(--link) 45%, transparent); transition: color 0.15s ease, border-color 0.15s ease; } a:hover { color: var(--link-hover); border-bottom-color: var(--link-hover); } strong, b { color: var(--heading); font-weight: 700; } em, i { color: inherit; } hr { border: 0; border-top: 1px solid var(--rule); margin: 2.8rem 0; } ul, ol { margin: 0 0 1.35rem 0; padding-left: 1.4rem; } li { margin-bottom: 0.4rem; } li::marker { color: var(--muted); } /* Post title block */ #post-title { margin-bottom: 0.25rem; } .post-meta { color: var(--muted); font-size: 0.92rem; letter-spacing: 0.02em; } #post-date { margin-bottom: 2.6rem; } /* ---- Code ---------------------------------------------------------------- */ code, pre, kbd, samp { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } code { background: var(--inline-code-bg); color: var(--code-text); border-radius: 5px; padding: 0.1em 0.38em; font-size: 0.86em; } pre { background: var(--code-bg); border: 1px solid var(--code-border); border-radius: 9px; padding: 1rem 1.15rem; margin: 0 0 1.6rem 0; overflow-x: auto; font-size: 0.9rem; line-height: 1.6; } pre code { background: none; border: none; padding: 0; font-size: inherit; color: inherit; } /* highlight.js paints token colors; the box itself is styled above. */ .hljs { background: transparent; padding: 0; color: var(--code-text); } /* ---- Blockquotes --------------------------------------------------------- */ blockquote { border-left: 3px solid var(--quote-bar); background: var(--accent-soft); margin: 0 0 1.6rem 0; padding: 0.6rem 1.1rem; border-radius: 0 6px 6px 0; color: var(--quote-text); } blockquote p:last-child { margin-bottom: 0; } /* ---- Images -------------------------------------------------------------- */ img { max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 0 auto 1.6rem auto; } /* ---- Tables -------------------------------------------------------------- */ .table-wrap { overflow-x: auto; margin: 0 0 1.6rem 0; } table { border-collapse: collapse; width: 100%; font-size: 0.95rem; } th { color: var(--table-head); font-weight: 600; text-align: left; border-bottom: 2px solid var(--rule); padding: 0.55rem 0.8rem; } td { border-bottom: 1px solid var(--rule); padding: 0.55rem 0.8rem; } tbody tr:nth-child(even) { background: var(--table-stripe); } /* ---- Math ---------------------------------------------------------------- */ .katex { color: inherit; } .katex-display { overflow-x: auto; overflow-y: hidden; padding: 0.4rem 0; } /* ---- Mermaid ------------------------------------------------------------- */ pre.mermaid { background: none; border: none; padding: 0; text-align: center; margin: 1.4rem 0 1.8rem 0; overflow-x: auto; } /* ---- Index list ---------------------------------------------------------- */ #post-list { list-style: none; padding: 0; margin: 2rem 0 0 0; } #post-list li { margin: 0 0 0.6rem 0; padding: 1.1rem 1.2rem; border: 1px solid var(--rule); border-radius: 10px; background: var(--bg-elev); transition: border-color 0.18s ease, transform 0.18s ease; } #post-list li:hover { border-color: var(--link); } #post-list .post-title { display: inline-block; font-size: 1.28rem; font-weight: 600; color: var(--heading); border-bottom: none; } #post-list li:hover .post-title { color: var(--link); } #post-list .post-meta { display: block; margin: 0.15rem 0 0.5rem 0; } #post-list p { margin: 0; color: var(--text); } .blog-footer { margin-top: 4rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--muted); } /* ---- Responsive ---------------------------------------------------------- */ @media (max-width: 640px) { body { font-size: 1.06rem; } .blog-header, .blog-container { padding-left: 1.1rem; padding-right: 1.1rem; } h1 { font-size: 1.75rem; } h2 { font-size: 1.4rem; } } /* Respect users who prefer reduced motion. */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; scroll-behavior: auto !important; } }