/* Swiss. International Typographic Style: a huge heavy grotesk masthead, thick black rules, one red, numbered posts and tabular dates. Loud, confident, all grid. Dark by default. */ @import url("https://fonts.googleapis.com/css2?family=Inter+Tight:wght@400;500;700;900&family=JetBrains+Mono:wght@400;500&display=swap"); :root { --bg: #0a0a0a; --fg: #f5f5f5; --muted: #9a9a9a; --rule: #f5f5f5; --hair: #2a2a2a; --accent: #ff2a3d; --code-bg: #161616; --font-body: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, monospace; --page-width: 1180px; --sidebar-width: 260px; --gap: 72px; --tk-keyword: #ff5566; --tk-string: #4cd48a; --tk-comment: #777; --tk-title: #f5f5f5; --tk-type: #6ea2ff; --tk-number: #6ea2ff; --tk-meta: #9a9a9a; color-scheme: dark; } /* * Dark whatever the visitor's system says. The light palette is kept for a * future toggle: set data-theme="light" on to use it. */ :root[data-theme="light"] { --bg: #ffffff; --fg: #0a0a0a; --muted: #6b6b6b; --rule: #0a0a0a; --hair: #e3e3e3; --accent: #e3001b; --code-bg: #f3f3f3; --tk-keyword: #e3001b; --tk-string: #0a7a3d; --tk-comment: #8f8f8f; --tk-title: #0a0a0a; --tk-type: #0047bb; --tk-number: #0047bb; --tk-meta: #6b6b6b; color-scheme: light; } body { font-size: 18px; line-height: 1.55; font-feature-settings: "ss01", "cv11"; } a { color: var(--fg); text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: 0.16em; } a:hover { color: var(--accent); } /* Masthead */ .site-header { flex-direction: column; align-items: stretch; gap: 18px; padding: 40px 0 14px; margin-bottom: 48px; border-bottom: 8px solid var(--rule); } .site-title { color: var(--fg); font-size: clamp(3rem, 11vw, 7.5rem); font-weight: 900; letter-spacing: -0.055em; line-height: 0.82; text-decoration: none; } .site-title::after { content: "."; color: var(--accent); } .site-header nav { gap: 4px 28px; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; } .site-header nav a { text-decoration: none; } /* Light/dark: styled as one more nav link, with a half-filled disc. */ .theme-toggle:not([hidden]) { display: inline-flex; align-items: center; gap: 7px; margin-left: auto; padding: 0; border: 0; background: none; color: var(--fg); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .theme-toggle::before { content: ""; width: 11px; height: 11px; border: 2px solid currentColor; border-radius: 50%; background: linear-gradient(90deg, currentColor 50%, transparent 50%); } .theme-toggle:hover { color: var(--accent); } .theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; } /* Labels */ .sidebar h2, .section-heading { display: flex; align-items: center; gap: 10px; margin: 0 0 20px; padding-bottom: 10px; border-bottom: 2px solid var(--rule); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; } .sidebar h2::before, .section-heading::before { content: ""; width: 12px; height: 12px; background: var(--accent); } .intro { margin-bottom: 56px; font-size: clamp(1.35rem, 3vw, 1.8rem); font-weight: 500; line-height: 1.25; letter-spacing: -0.02em; } .intro p { margin: 0; max-width: 22em; } /* Numbered post list */ .post-list { counter-reset: post; } .post-list li { counter-increment: post; display: grid; grid-template-columns: 3.2rem 1fr auto; column-gap: 16px; padding: 18px 0 20px; border-bottom: 1px solid var(--hair); } .post-list li::before { content: counter(post, decimal-leading-zero); grid-row: span 2; color: var(--accent); font-size: 1.5rem; font-weight: 900; line-height: 1.1; font-variant-numeric: tabular-nums; } .post-link { grid-column: 2; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.03em; line-height: 1.12; text-decoration: none; } .post-list .post-meta { grid-column: 3; grid-row: 1; padding-top: 6px; white-space: nowrap; } .post-summary { grid-column: 2 / span 2; margin: 8px 0 0; color: var(--muted); } @media (max-width: 560px) { .post-list li { grid-template-columns: 2.6rem 1fr; } .post-list .post-meta { grid-column: 2; grid-row: auto; padding: 4px 0 0; } .post-summary { grid-column: 2; } } .post-meta { color: var(--muted); font-size: 0.78rem; font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; font-variant-numeric: tabular-nums; } .draft { margin-left: 8px; padding: 2px 6px; background: var(--accent); color: #fff; font-weight: 700; } .empty { padding: 32px 0; border-bottom: 1px solid var(--hair); } .empty-title { margin: 0 0 10px; font-size: clamp(2rem, 6vw, 3.4rem); font-weight: 900; letter-spacing: -0.045em; line-height: 0.95; } .empty p:last-child { margin: 0; max-width: 30em; color: var(--muted); } /* Sidebar */ .projects li { padding: 14px 0; border-bottom: 1px solid var(--hair); } .projects li:first-child { padding-top: 0; } .projects p { margin: 4px 0; color: var(--muted); font-size: 0.88rem; line-height: 1.45; } .project-name { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; text-decoration: none; } .project-name::after { content: " ↗"; color: var(--accent); } .project-source { color: var(--muted); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; text-decoration: none; } @media (max-width: 760px) { .sidebar { margin-top: 24px; } } /* A post */ .post > header { margin-bottom: 40px; padding-bottom: 20px; border-bottom: 2px solid var(--rule); } .post h1 { margin: 0 0 18px; font-size: clamp(2.4rem, 7vw, 4.2rem); font-weight: 900; letter-spacing: -0.05em; line-height: 0.95; } .post-body { max-width: 40em; } .post-body h2, .post-body h3 { margin: 2em 0 0.5em; font-weight: 700; letter-spacing: -0.025em; line-height: 1.15; } .post-body h2 { font-size: 1.7rem; } .post-body blockquote { margin: 1.6em 0; padding-left: 20px; border-left: 6px solid var(--accent); font-size: 1.2rem; font-weight: 500; } .post-body th, .post-body td { padding: 8px 16px 8px 0; border-bottom: 1px solid var(--hair); text-align: left; } .post-body th { border-bottom: 2px solid var(--rule); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; } code { font-size: 0.85em; } :not(pre) > code { padding: 0.1em 0.3em; background: var(--code-bg); } pre { margin: 1.6em 0; padding: 20px; background: var(--code-bg); border-top: 4px solid var(--rule); line-height: 1.55; } .post-footer { margin-top: 56px; padding-top: 14px; border-top: 2px solid var(--rule); font-weight: 700; text-transform: uppercase; font-size: 0.8rem; letter-spacing: 0.08em; } .post-footer a { text-decoration: none; } .site-footer { margin: 80px 0 40px; padding-top: 14px; border-top: 8px solid var(--rule); font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }