/* ─────────────────────────────────────────────────────────────── Engineering Log — Hugo theme A shell-inspired engineering blog: System Journal home, book-like post reading view, light/dark toggle. Tokens live on :root. Switch theme via [data-theme] on . ─────────────────────────────────────────────────────────────── */ /* Reset (light) ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } img, svg, video { max-width: 100%; display: block; } button { font: inherit; cursor: pointer; } /* Type stacks ───────────────────────────────────────────────── */ :root { --serif: "IBM Plex Serif", "Source Serif 4", Georgia, "Times New Roman", serif; --sans: "IBM Plex Sans", "Helvetica Neue", Helvetica, Arial, system-ui, sans-serif; --mono: "IBM Plex Mono", "JetBrains Mono", ui-monospace, "Menlo", monospace; --body: var(--serif); } /* Light theme (default) ─────────────────────────────────────── */ :root, :root[data-theme="light"] { --bg: oklch(0.985 0.004 80); --bg-soft: oklch(0.965 0.005 80); --surface: oklch(1 0 0); --ink: oklch(0.22 0.012 250); --ink-soft: oklch(0.36 0.012 250); --muted: oklch(0.52 0.010 250); --faint: oklch(0.72 0.008 250); --border: oklch(0.88 0.008 250); --border-soft: oklch(0.93 0.006 250); --rule: oklch(0.82 0.010 250); --blue: oklch(0.44 0.16 248); --blue-strong: oklch(0.36 0.18 248); --blue-soft: oklch(0.62 0.13 248); --blue-bg: oklch(0.96 0.025 248); --red: oklch(0.54 0.19 26); --red-strong: oklch(0.46 0.20 26); --red-soft: oklch(0.66 0.14 26); --red-bg: oklch(0.96 0.025 26); --selection: oklch(0.88 0.10 248); color-scheme: light; } /* Dark theme — slate grey, GitHub-like ──────────────────────── */ :root[data-theme="dark"] { --bg: oklch(0.235 0.009 252); --bg-soft: oklch(0.270 0.009 252); --surface: oklch(0.295 0.010 252); --ink: oklch(0.86 0.005 80); --ink-soft: oklch(0.72 0.007 80); --muted: oklch(0.58 0.010 250); --faint: oklch(0.44 0.010 250); --border: oklch(0.345 0.010 252); --border-soft: oklch(0.305 0.010 252); --rule: oklch(0.37 0.010 252); --blue: oklch(0.74 0.11 248); --blue-strong: oklch(0.82 0.12 248); --blue-soft: oklch(0.60 0.11 248); --blue-bg: oklch(0.30 0.045 248); --red: oklch(0.72 0.13 26); --red-strong: oklch(0.80 0.14 26); --red-soft: oklch(0.58 0.13 26); --red-bg: oklch(0.30 0.05 26); --selection: oklch(0.40 0.10 248); color-scheme: dark; } /* Body ──────────────────────────────────────────────────────── */ .blog-root { font-family: var(--body); color: var(--ink); background: var(--bg); font-feature-settings: "kern", "liga", "ss01"; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-size: 16px; line-height: 1.55; min-height: 100vh; } .blog-root *::selection { background: var(--selection); } .mono { font-family: var(--mono); font-feature-settings: "tnum", "zero"; } .sans { font-family: var(--sans); } .serif { font-family: var(--serif); } .num { font-variant-numeric: tabular-nums; } /* Page shell ────────────────────────────────────────────────── */ .page-shell { max-width: 1080px; margin: 0 auto; padding: 44px 56px 0; min-height: 100vh; display: flex; flex-direction: column; } .page-main { flex: 1 0 auto; } @media (max-width: 720px) { .page-shell { padding: 28px 22px 0; } } /* Common atoms ──────────────────────────────────────────────── */ .blog-link { color: inherit; text-decoration: none; background-image: linear-gradient(var(--rule), var(--rule)); background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%; transition: color .15s, background-image .15s; } .blog-link:hover { color: var(--red); background-image: linear-gradient(var(--red), var(--red)); } .rss-link { color: var(--red); } .prompt-line { font-size: 11.5px; color: var(--muted); letter-spacing: 0.06em; margin-bottom: 8px; line-height: 1.4; } .prompt-dollar { color: var(--red); margin-right: 0.6ch; } .prompt-cmd { color: var(--blue); } .eyebrow { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .eyebrow-accent { color: var(--blue); } .eyebrow-sep { margin-top: 24px; } .tag { font-family: var(--mono); font-size: 11.5px; color: var(--blue); white-space: nowrap; text-decoration: none; margin-right: 12px; } .tag::before { content: "#"; color: var(--faint); margin-right: 0.1ch; } .tag:hover { color: var(--red); } .tag:hover::before { color: var(--red-soft); } .ghost-btn { font-family: var(--mono); font-size: 12px; color: var(--ink-soft); background: transparent; border: 1px solid var(--border); padding: 5px 9px; border-radius: 4px; line-height: 1; transition: border-color .12s, color .12s, background .12s; } .ghost-btn:hover { color: var(--red); border-color: var(--red-soft); background: var(--red-bg); } /* Masthead ──────────────────────────────────────────────────── */ .masthead { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 26px; border-bottom: 1px solid var(--rule); margin-bottom: 30px; } .masthead-brand { min-width: 0; } .brand-name { font-size: 32px; font-weight: 600; letter-spacing: -0.4px; margin: 0; color: var(--ink); line-height: 1.15; } .brand-name a { color: inherit; text-decoration: none; } .brand-tag { font-size: 13.5px; color: var(--muted); line-height: 1.45; margin-top: 6px; } .page-title { font-size: 28px; font-weight: 600; letter-spacing: -0.4px; margin: 0; color: var(--ink); line-height: 1.2; } .masthead-right { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex-shrink: 0; } .nav { display: flex; align-items: center; gap: 22px; font-size: 13px; color: var(--ink-soft); flex-wrap: wrap; justify-content: flex-end; } .nav-theme-toggle { width: 32px; height: 28px; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin-left: -6px; border-color: transparent; background: transparent; } .nav-theme-toggle:hover { border-color: transparent; background: transparent; } .nav-theme-toggle:focus-visible { outline: 1px solid var(--red-soft); outline-offset: 3px; } #theme-toggle [data-theme-icon] { display: none; } #theme-toggle svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } :root[data-theme="light"] #theme-toggle [data-theme-icon="light"], :root:not([data-theme="dark"]) #theme-toggle [data-theme-icon="light"] { display: block; } :root[data-theme="dark"] #theme-toggle [data-theme-icon="dark"] { display: block; } @media (max-width: 720px) { .masthead { flex-direction: column; align-items: stretch; } .masthead-right { align-items: flex-start; } .nav { justify-content: flex-start; } .brand-name { font-size: 28px; } .brand-tag { margin-top: 8px; } } /* Journal list (home, archive, tag) ─────────────────────────── */ .journal-eyebrow { margin-bottom: 18px; } .journal-list { list-style: none; margin: 0; padding: 0; } .journal-entry { display: grid; grid-template-columns: 108px 1fr 64px; gap: 24px; padding: 18px 0; border-bottom: 1px solid var(--border-soft); align-items: baseline; } .journal-entry:last-child { border-bottom: none; } .entry-date { font-size: 12px; color: var(--muted); padding-top: 4px; } .entry-iso { color: var(--red); } .entry-read { font-size: 11px; color: var(--faint); margin-top: 2px; } .entry-body { min-width: 0; } .entry-title { font-size: 21px; font-weight: 600; letter-spacing: -0.2px; color: var(--ink); text-decoration: none; line-height: 1.25; display: block; transition: color .12s; } .entry-title:hover { color: var(--blue); } .entry-excerpt { margin: 6px 0 10px; color: var(--ink-soft); font-size: 15px; line-height: 1.6; max-width: 62ch; } .entry-tags { display: flex; gap: 0; flex-wrap: wrap; } .entry-index { font-size: 11px; color: var(--faint); text-align: right; padding-top: 6px; } @media (max-width: 720px) { .journal-entry { grid-template-columns: 1fr; gap: 8px; padding: 16px 0; } .entry-date { padding-top: 0; display: flex; gap: 12px; align-items: baseline; } .entry-index { display: none; } } /* Pager ─────────────────────────────────────────────────────── */ .pager { display: flex; justify-content: space-between; align-items: baseline; margin-top: 28px; padding-top: 14px; border-top: 1px solid var(--border-soft); font-size: 12px; color: var(--muted); gap: 16px; } .pager-state { color: var(--faint); } /* Post — book-like reading view ─────────────────────────────── */ .reading-progress { position: sticky; top: 0; height: 2px; background: var(--border-soft); z-index: 10; margin-bottom: 20px; } .reading-progress-bar { height: 100%; background: var(--red); width: 0; transition: width .08s linear; } .post { /* Reading column width. Default fills the page-shell (full width). Cap line length by setting e.g. --measure: 72ch; */ --measure: none; max-width: none; margin: 0; padding: 8px 0 60px; } /* On post pages the masthead drops its border + margin so the post-rule below the title is the only divider (avoids two stacked full-width rules). */ .is-reading .masthead { border-bottom: 0; margin-bottom: 0; padding-bottom: 16px; } .post-head { margin-bottom: 26px; } .post-meta { font-size: 11px; color: var(--muted); letter-spacing: 0.04em; margin-bottom: 8px; display: flex; gap: 14px; flex-wrap: wrap; } .post-date { color: var(--red); } .post-title { font-size: 36px; font-weight: 600; letter-spacing: -0.5px; margin: 0 0 14px; line-height: 1.2; color: var(--ink); } .post-deck { font-size: 19px; line-height: 1.5; color: var(--ink-soft); margin: 0 0 14px; font-style: italic; max-width: var(--measure); } .post-tags { display: flex; flex-wrap: wrap; gap: 0; } .post-rule { border: 0; border-top: 1px solid var(--rule); margin: 0 0 28px; } .post-body { font-size: 17.5px; line-height: 1.72; color: var(--ink); } .post-body > * { max-width: var(--measure); } .post-body p { margin: 0 0 18px; } .post-body h2, .post-body h3 { font-family: var(--serif); font-weight: 600; letter-spacing: -0.2px; color: var(--ink); } .post-body h2 { font-size: 24px; margin: 36px 0 12px; } .post-body h3 { font-size: 19px; margin: 30px 0 10px; } .post-body ul, .post-body ol { margin: 0 0 22px; max-width: var(--measure); } /* Unordered — custom › marker */ .post-body ul { padding: 0; list-style: none; } .post-body ul li { position: relative; padding-left: 28px; margin-bottom: 8px; } .post-body ul li::before { content: "›"; font-family: var(--mono); position: absolute; left: 0; top: 0; color: var(--red); font-size: 15px; font-weight: 600; line-height: inherit; } /* Ordered — native decimal markers, styled mono + red */ .post-body ol { padding-left: 2.6em; list-style: decimal; } .post-body ol li { padding-left: 8px; margin-bottom: 8px; } .post-body ol li::marker { color: var(--red); font-family: var(--mono); font-size: 0.82em; font-weight: 600; font-variant-numeric: tabular-nums; } .post-body blockquote { margin: 22px 0; padding: 4px 0 4px 22px; border-left: 2px solid var(--red); color: var(--ink-soft); font-style: italic; } .post-body code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-soft); padding: 1px 6px; border-radius: 3px; color: var(--blue-strong); border: 1px solid var(--border-soft); } .post-body pre { max-width: 100%; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 4px; padding: 16px 18px; overflow-x: auto; font-family: var(--mono); font-size: 13.5px; line-height: 1.6; margin: 0 0 22px; } .post-body pre code { background: none; border: 0; padding: 0; color: inherit; font-size: inherit; } .post-body .highlight { margin: 0 0 22px; } .post-body .highlight pre { margin: 0; } .post-body .chroma { color: var(--ink); } .post-body .chroma .c, .post-body .chroma .c1, .post-body .chroma .cm, .post-body .chroma .cs { color: var(--muted); font-style: italic; } .post-body .chroma .k, .post-body .chroma .kc, .post-body .chroma .kd, .post-body .chroma .kn, .post-body .chroma .kp, .post-body .chroma .kr, .post-body .chroma .nt { color: var(--red); } .post-body .chroma .na, .post-body .chroma .nb, .post-body .chroma .nc, .post-body .chroma .nf, .post-body .chroma .nx { color: var(--blue-strong); } .post-body .chroma .s, .post-body .chroma .s1, .post-body .chroma .s2, .post-body .chroma .sa, .post-body .chroma .sb, .post-body .chroma .sc, .post-body .chroma .sd, .post-body .chroma .se, .post-body .chroma .sh, .post-body .chroma .si, .post-body .chroma .sr, .post-body .chroma .ss { color: var(--blue); } .post-body .chroma .m, .post-body .chroma .mb, .post-body .chroma .mf, .post-body .chroma .mh, .post-body .chroma .mi, .post-body .chroma .mo { color: var(--red-strong); } .post-body .chroma .o, .post-body .chroma .ow, .post-body .chroma .p { color: var(--ink-soft); } .post-body .chroma .gd { color: var(--red); } .post-body .chroma .gi { color: var(--blue); } .post-body .mermaid { max-width: 100%; margin: 24px 0; padding: 18px; overflow-x: auto; background: var(--bg-soft); border: 1px solid var(--border-soft); border-radius: 4px; } .post-body pre.mermaid { font-size: 0; line-height: 0; } .post-body .mermaid svg { display: block; max-width: 100%; height: auto; margin: 0 auto; background: transparent !important; } .post-body .mermaid svg, .post-body .mermaid svg text, .post-body .mermaid svg tspan { font-family: var(--mono) !important; fill: var(--ink) !important; color: var(--ink) !important; } .post-body .mermaid svg .actor, .post-body .mermaid svg .note, .post-body .mermaid svg .labelBox { fill: var(--surface) !important; stroke: var(--border) !important; } .post-body .mermaid svg .note { fill: var(--blue-bg) !important; } .post-body .mermaid svg .actor-line, .post-body .mermaid svg .messageLine0, .post-body .mermaid svg .messageLine1, .post-body .mermaid svg .loopLine, .post-body .mermaid svg line, .post-body .mermaid svg path { stroke: var(--muted) !important; } .post-body .mermaid svg .messageText, .post-body .mermaid svg .noteText, .post-body .mermaid svg .actor-box { fill: var(--ink) !important; } .post-body .mermaid svg marker path, .post-body .mermaid svg marker circle { fill: var(--muted) !important; stroke: var(--muted) !important; } .post-body a { color: inherit; } .post-body img { margin: 22px auto; max-width: 100%; height: auto; border-radius: 2px; } .post-body hr { border: 0; border-top: 1px solid var(--rule); margin: 32px auto; max-width: 12em; } .post-body em { font-style: italic; } .post-body strong { font-weight: 600; } .post-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--rule); font-size: 13px; } .post-nav-cell { padding: 6px 0; min-width: 0; } .post-nav-cell a { display: block; color: inherit; text-decoration: none; background: none; transition: color .12s; } .post-nav-cell a:hover { color: var(--red); background: none; } .post-nav-right { text-align: right; } .post-nav-label { display: block; font-family: var(--mono); font-size: 11px; color: var(--muted); } .post-nav-title { display: block; font-size: 16px; color: var(--ink); margin-top: 2px; } @media (max-width: 600px) { .post-title { font-size: 28px; } .post-body { font-size: 16.5px; } .post-nav { grid-template-columns: 1fr; } .post-nav-right { text-align: left; } } /* Standalone pages (About / Now / Uses) ─────────────────────── */ .page-prose { font-size: 17px; line-height: 1.7; color: var(--ink); max-width: 62ch; padding: 6px 0 40px; } .page-prose p { margin: 0 0 18px; } .page-prose h2 { font-size: 22px; font-weight: 600; letter-spacing: -0.3px; margin: 36px 0 12px; color: var(--ink); } .page-prose h3 { font-size: 17.5px; font-weight: 600; margin: 26px 0 10px; color: var(--ink); } .page-prose ul, .page-prose ol { padding-left: 24px; margin: 0 0 22px; } .page-prose li { margin-bottom: 6px; } .page-prose a { color: inherit; } .page-prose code { font-family: var(--mono); font-size: 0.88em; background: var(--bg-soft); padding: 1px 6px; border-radius: 3px; color: var(--blue-strong); border: 1px solid var(--border-soft); } /* About — content + identity sidebar */ .about-grid { display: grid; grid-template-columns: minmax(0, 1fr) 240px; gap: 56px; padding-top: 12px; } .about-sidebar { font-size: 12px; line-height: 1.9; color: var(--ink-soft); padding-top: 6px; } .about-sidebar .eyebrow { margin-bottom: 8px; } .kv { display: flex; gap: 8px; padding: 1px 0; } .kv-key { color: var(--muted); width: 72px; flex-shrink: 0; } .kv-val { color: var(--ink); min-width: 0; word-break: break-word; } .kv-accent { color: var(--red); } .kv-link { color: var(--blue); } @media (max-width: 820px) { .about-grid { grid-template-columns: 1fr; gap: 28px; } } /* Now / Uses — variant rendering hooks */ .page-now .page-prose h2, .page-uses .page-prose h2 { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--blue); margin: 32px 0 10px; font-weight: 500; } .page-now .page-prose h2::before, .page-uses .page-prose h2::before { content: "› "; color: var(--red); } .page-uses .page-prose h2 { color: var(--blue); } .page-uses .page-prose h2::before { content: "/usr/local/"; color: var(--muted); } /* Footer ────────────────────────────────────────────────────── */ .page-footer { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--faint); padding: 20px 0 26px; margin-top: 40px; border-top: 1px solid var(--border-soft); } .page-footer a { color: var(--ink-soft); } /* 404 ───────────────────────────────────────────────────────── */ .page-404 .err-line { color: var(--red); margin: 8px 0 22px; } .page-404 h1 { font-size: 32px; margin: 0 0 12px; color: var(--ink); }