@font-face { font-family: "Departure Mono"; src: url(fonts/departure-mono.woff2) format("woff2"); font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-400.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-400i.woff2) format("woff2"); font-weight: 400; font-style: italic; font-display: swap; } @font-face { font-family: "Atkinson Hyperlegible Next"; src: url(fonts/atkinson-700.woff2) format("woff2"); font-weight: 700; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-400.woff2) format("woff2"); font-weight: 400; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url(fonts/jetbrains-700.woff2) format("woff2"); font-weight: 700; font-display: swap; } /* ── tokens ───────────────────────────────────────────────────────── Theme and font are switched without JS: the server writes the saved choice into data-* on and checks the matching radio; :has() on the radios then overrides live (it has higher specificity). */ :root { --text: #d3dffa; --background: #02050f; --primary: #809df0; --secondary: #8d1123; --accent: #e8a83d; --muted: #8290b8; --rule: #1b2442; color-scheme: dark; --display: "Departure Mono", ui-monospace, monospace; --f-atkinson: "Atkinson Hyperlegible Next", system-ui, sans-serif; --f-jetbrains: "JetBrains Mono", ui-monospace, monospace; --f-departure: "Departure Mono", ui-monospace, monospace; --body: var(--f-atkinson); } html[data-theme="light"] { --text: #0d1733; --background: #eef1fb; --primary: #3a55b8; --accent: #9a5a00; --muted: #4f5b80; --rule: #c9d1ea; color-scheme: light; } html:has(#t-auto:checked), html:has(#t-dark:checked) { --text: #d3dffa; --background: #02050f; --primary: #809df0; --accent: #e8a83d; --muted: #8290b8; --rule: #1b2442; color-scheme: dark; } @media (prefers-color-scheme: light) { html[data-theme="auto"], html:has(#t-auto:checked) { --text: #0d1733; --background: #eef1fb; --primary: #3a55b8; --accent: #9a5a00; --muted: #4f5b80; --rule: #c9d1ea; color-scheme: light; } } html:has(#t-light:checked) { --text: #0d1733; --background: #eef1fb; --primary: #3a55b8; --accent: #9a5a00; --muted: #4f5b80; --rule: #c9d1ea; color-scheme: light; } html[data-font="jetbrains"], html:has(#f-jetbrains:checked) { --body: var(--f-jetbrains); } html[data-font="departure"], html:has(#f-departure:checked) { --body: var(--f-departure); } html:has(#f-atkinson:checked) { --body: var(--f-atkinson); } /* ── base ───────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0 auto; max-width: 76rem; padding: 0 1rem; background: var(--background); color: var(--text); font: 400 1.0625rem/1.5 var(--body); } ::selection { background: var(--secondary); color: #fff; } a { color: var(--primary); text-decoration-thickness: 1px; text-underline-offset: .2em; } a:hover { color: var(--accent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } p { margin: 0 0 .9em; } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .lang { display: block; width: fit-content; margin: 1rem 0 0 auto; font: 400 .9375rem var(--display); } /* Section headings: centred, with a rule that fades out at both ends. */ h2 { font: 400 1.5rem/1.2 var(--display); text-align: center; margin: 0 0 1.1rem; padding-bottom: .5rem; background: linear-gradient(90deg, transparent, var(--rule) 15%, var(--rule) 85%, transparent) bottom / 100% 2px no-repeat; } /* ── header: the hostname, typed ───────────────────────────────── */ /* One column as wide as the title (sized for its longest word); the intro fills it without widening it, so both share a left edge. */ header { display: grid; justify-content: center; padding: clamp(1.5rem, 8vh, 4rem) 0 0; } h1 { margin: 0 0 1.5rem; font: 400 clamp(1rem, (100vw - 2rem) / 15.6, 2.75rem)/1.1 var(--display); } /* Left-aligned inside a box sized for the longest word (set inline), so only the verb moves while it is typed. */ .host { display: inline-block; } .host .dim { color: var(--muted); } .verb::after { color: var(--accent); } .caret { display: inline-block; width: .1em; height: .95em; margin: 0 .02em; vertical-align: -.1em; background: var(--accent); animation: blink 1s steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .verb::after { animation: none; } .caret { display: none; } } .intro { contain: inline-size; margin: 0; font-size: 1.125rem; } /* ── three columns ──────────────────────────────────────────────── */ .cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 2.5rem; margin-top: 4.5rem; } .side { display: grid; gap: 2.5rem; align-content: start; } @media (max-width: 880px) { .cols { grid-template-columns: minmax(0, 1fr); max-width: 36rem; margin-inline: auto; gap: 3rem; } } .projects ul { list-style: none; margin: 0; padding: 0; } .projects li { margin-bottom: .45rem; } .projects .years { color: var(--muted); font-style: italic; margin-right: .35rem; white-space: nowrap; } .projects b { font-weight: 700; } /* "Show more" without JS: a checkbox before the list, a label after it. */ .projects li.extra { display: none; } #more:checked ~ ul li.extra { display: list-item; } #more:not(:checked) ~ ul li:nth-child(4) { -webkit-mask-image: linear-gradient(#000, transparent); mask-image: linear-gradient(#000, transparent); } .more { color: var(--primary); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; } .more:hover { color: var(--accent); } .more .l, #more:checked ~ .more .m { display: none; } #more:checked ~ .more .l { display: inline; } #more:focus-visible ~ .more { outline: 2px solid var(--accent); outline-offset: 3px; } .email .at::before { content: "@"; } /* ── now playing (iframe, see nowplaying.go) ───────────────────── */ .np-frame { display: block; width: 100%; height: 4.5rem; border: 0; } body.np-body { max-width: none; margin: 0; padding: 0; overflow: hidden; } .np { display: flex; align-items: center; gap: .8rem; height: 4.5rem; color: var(--text); text-decoration: none; } .np .cover { flex: none; width: 4rem; height: 4rem; display: grid; place-items: center; background: var(--rule) center / cover no-repeat; } /* Shown when the track has no artwork; nowplaying.go hides it otherwise. */ .np .cover::after { content: "♪"; color: var(--muted); font-size: 1.6rem; } .np .meta { display: grid; min-width: 0; line-height: 1.3; } .np .t, .np .a, .np .s { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .np .t { font-weight: 700; } .np .a { color: var(--muted); } .np .s { color: var(--muted); font: .875rem var(--display); } .np .dot { display: none; width: .55em; height: .55em; margin-right: .45em; background: var(--accent); animation: blink 1.6s steps(1) infinite; } .np:hover .t { color: var(--accent); } /* ── 88x31 ──────────────────────────────────────────────────────── */ .buttons-section { max-width: 40rem; margin: 5rem auto 0; } .buttons { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; } .buttons a { display: block; line-height: 0; outline-offset: 1px; } .buttons img { image-rendering: pixelated; } .buttons a:hover img { outline: 1px solid var(--accent); } /* ── footer / display prefs ─────────────────────────────────────── */ footer { max-width: 40rem; margin: 5rem auto 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: .9375rem; text-align: center; } .prefs { display: flex; flex-wrap: wrap; justify-content: center; align-items: end; gap: 1rem 2rem; margin-bottom: 1rem; } .prefs fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: .25rem; } .prefs legend { color: var(--muted); padding: 0; margin: 0 auto .35rem; font-family: var(--display); } .prefs input { position: absolute; opacity: 0; width: 1px; height: 1px; } .prefs label, .prefs button { font: inherit; color: var(--text); background: none; border: 1px solid var(--rule); padding: .2rem .6rem; cursor: pointer; } .prefs label:hover, .prefs button:hover { border-color: var(--primary); } .prefs input:checked + label { border-color: var(--accent); color: var(--accent); } .prefs input:focus-visible + label { outline: 2px solid var(--accent); outline-offset: 2px; } .prefs .f-atkinson { font-family: var(--f-atkinson); } .prefs .f-jetbrains { font-family: var(--f-jetbrains); } .prefs .f-departure { font-family: var(--f-departure); } .note { color: var(--muted); }