...
...
*/
:root {
--font-ui:
'IBM Plex Sans', -apple-system, 'BlinkMacSystemFont', 'Segoe UI Variable',
'Segoe UI', 'Roboto', 'Helvetica Neue', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Segoe UI Symbol';
--font-body:
'Inter', system-ui, -apple-system, 'Segoe UI Variable', 'Segoe UI',
'Charter', 'Helvetica Neue', sans-serif, 'Apple Color Emoji',
'Segoe UI Emoji', 'Noto Color Emoji';
--font-serif:
'Source Serif 4', 'Georgia', 'Cambria', 'Times New Roman', 'Times', serif;
--font-mono:
'Source Code Pro', ui-monospace, 'SFMono-Regular', 'Menlo', 'Consolas', monospace;
--font-masthead: 'Cormorant', 'Georgia', serif;
--brand: oklch(0.59 0.19 257);
--brand-acc: oklch(0.64 0.25 77);
--surface: #fefbf3;
--text: #222;
--text-strong: #000;
--muted: #475569;
--border: #e5e7eb;
--link: var(--brand);
--accent: var(--brand-acc);
--code: var(--brand-acc);
--on-brand: #fff;
}
@media (prefers-color-scheme: dark) {
:root {
--brand: oklch(0.6 0.19 257);
--brand-acc: oklch(0.55 0.25 77);
--surface: #111827;
--text: #d1d5db;
--text-strong: #f1f5f9;
--muted: #94a3b8;
--border: #233044;
--link: var(--brand);
--accent: var(--brand-acc);
--code: var(--brand-acc);
--on-brand: #fff;
}
}
/* Minimal reset */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
line-height: 1.65;
scrollbar-gutter: stable;
}
body {
margin: 0;
color: var(--text);
background: var(--surface);
font-family: var(--font-body);
}
/* Ensure form controls don't revert to UA defaults */
button,
input,
select,
textarea {
font: inherit;
font-family: var(--font-ui);
}
img,
svg {
max-width: 100%;
height: auto;
}
code,
kbd,
pre,
samp {
font-family: var(--font-mono);
font-size: 0.95em;
}
code:not(pre code) {
color: var(--text-strong);
background: color-mix(in oklab, var(--text) 5%, var(--surface));
padding: 0.1rem 0.3rem;
border-radius: 3px;
}
/* Layout & measure */
main {
max-width: 80ch;
margin: 0 auto;
padding: 1.0rem;
}
header {
padding: 0.6rem 1.2rem;
font-family: var(--font-ui);
}
footer {
color: var(--muted);
border-top: 1px solid var(--border);
margin-top: 0.75rem;
padding: 1rem 1.2rem;
font-family: var(--font-ui);
font-size: 0.75rem;
text-align: center;
}
nav {
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
border-block: 1px solid var(--border);
padding: 0.4rem 1.2rem;
background-color: color-mix(in oklab, var(--surface) 20%, #fff);
font-family: var(--font-ui);
}
@media (prefers-color-scheme: dark) {
nav {
background-color: color-mix(in oklab, var(--surface) 95%, #fff);
}
}
h1,
h2,
h3 {
color: var(--text-strong);
line-height: 1.25;
font-weight: 500;
}
article {
padding: 0.2rem 0 1.6rem;
}
article:not(:last-child) {
border-bottom: 1px solid var(--border);
}
article:last-child {
padding-bottom: 0.2rem;
}
article h1 {
font-size: 2rem;
}
article h3 {
font-size: 1.17rem;
}
article h1,
article h2,
article h3 {
margin: 1.2em 0 0;
font-family: var(--font-serif);
}
article h2 a {
text-decoration: none;
color: inherit;
}
article h2 a:hover {
text-decoration: underline;
}
p {
margin: 0.8rem 0;
}
blockquote {
margin: 1rem 0;
padding-left: 1rem;
border-left: 4px solid color-mix(in oklab, var(--brand) 45%, #aaa);
font-style: italic;
}
pre {
background: color-mix(in oklab, var(--surface) 85%, #000);
border: 1px solid var(--border);
padding: 0.9rem 1rem;
overflow: auto;
border-radius: 8px;
}
/* Form controls */
input[type='text'],
input[type='email'] {
border: 1px solid var(--border);
border-radius: 8px;
padding: 0.5rem 0.7rem;
background: transparent;
color: var(--text);
}
input:focus {
outline: 2px solid color-mix(in oklab, var(--brand) 60%, transparent);
outline-offset: 2px;
}
button,
input[type='button'],
input[type='submit'] {
border: none;
border-radius: 8px;
color: var(--on-brand);
background: var(--brand);
padding: 0.55rem 0.9rem;
font-weight: 700;
}
button:active {
transform: translateY(1px);
}
button:disabled {
opacity: 0.6;
}
button:hover:enabled {
box-shadow: 0 0 0 3px color-mix(in oklab, var(--brand) 30%, transparent);
}
/* Links */
a {
color: var(--link);
text-decoration: underline;
text-underline-offset: 2px;
}
nav a {
color: var(--link);
font-weight: 600;
text-decoration: none;
padding: 0.2rem 0.1rem;
border-radius: 6px;
}
nav a:focus,
nav a:hover {
outline: 2px solid color-mix(in oklab, var(--brand) 60%, transparent);
outline-offset: 2px;
}
/* Skip to content link */
.skip-to-content {
position: absolute;
top: -50px;
left: 0;
background: var(--brand);
color: var(--on-brand);
padding: 4px;
text-decoration: none;
z-index: 100;
font-family: var(--font-ui);
}
.skip-to-content:focus {
top: 0;
}
#masthead {
display: block;
font-family: var(--font-masthead);
font-size: 2rem;
font-weight: 500;
font-style: italic;
color: var(--text-strong);
line-height: 1.25;
margin-block-start: 0.5em;
margin-block-end: 0.25em;
}
#masthead a {
text-decoration: none;
color: inherit;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
#masthead .masthead-logo {
display: block;
height: 50px;
width: auto;
}
.post-meta {
color: var(--muted);
margin-bottom: 0.5em;
gap: 0.5em;
font-family: var(--font-ui);
}
.post-meta time {
font-size: 0.9em;
}
.post-meta time .ampm {
font-variant: small-caps;
font-feature-settings: 'smcp';
text-transform: lowercase;
letter-spacing: 0.05em;
}
.post-meta .tags {
display: inline;
}
.tags a[rel='tag'] {
color: var(--brand-acc);
}
.post-meta .tags a[rel='tag'] {
margin-right: 0.25rem;
text-decoration: none;
}
.post-meta .tags a[rel='tag']:hover {
text-decoration: underline;
}
.post-meta .tags a[rel='tag']::before {
content: '#';
opacity: 0.8;
}