93 lines
1.9 KiB
CSS
93 lines
1.9 KiB
CSS
:root {
|
|
--font-body: 'General Sans', system-ui, -apple-system, sans-serif;
|
|
--font-heading: 'Raleway', var(--font-body);
|
|
--text-size: clamp(1.125rem, 1.2vw, 1.25rem);
|
|
--line-height: 1.25;
|
|
}
|
|
|
|
body {
|
|
font-size: var(--text-size);
|
|
line-height: var(--line-height);
|
|
color: var(--text);
|
|
}
|
|
|
|
h1, h2, h3, h4, h5, h6 {
|
|
font-family: var(--font-heading);
|
|
line-height: 1.25;
|
|
margin: 0 0 0.75rem;
|
|
color: #f9fafb;
|
|
}
|
|
|
|
h1 { font-size: clamp(2rem, 3vw, 2.5rem); }
|
|
|
|
h2 { font-size: clamp(1.625rem, 2.4vw, 2rem); }
|
|
|
|
h3 { font-size: clamp(1.375rem, 2vw, 1.625rem); }
|
|
.card h3 { text-transform: capitalize; }
|
|
summary h3 { display: inline-block; }
|
|
|
|
h4 { font-size: clamp(1.25rem, 1.8vw, 1.375rem); }
|
|
|
|
p { margin: 0 0 0.875rem; color: var(--text); }
|
|
|
|
ul, ol { margin: 0 0 1rem 1.25rem; padding: 0; }
|
|
|
|
code {
|
|
font-family: 'SFMono-Regular', Consolas, Monaco, monospace;
|
|
background: rgba(38, 42, 51, 0.7);
|
|
padding: 0.125rem 0.375rem;
|
|
border-radius: 0.375rem;
|
|
border: 0.0625rem solid var(--border);
|
|
}
|
|
|
|
pre {
|
|
margin: 0 0 1.125rem;
|
|
padding: 0.875rem;
|
|
background: #0b0d11;
|
|
border-radius: var(--radius);
|
|
border: 0.0625rem solid var(--border);
|
|
overflow-x: auto;
|
|
}
|
|
|
|
pre code { background: transparent; border: none; padding: 0; }
|
|
|
|
a { color: var(--accent-strong); text-decoration: none; }
|
|
a:hover { text-decoration: underline; }
|
|
|
|
blockquote {
|
|
margin: 0 0 1rem;
|
|
padding: 0.75rem 1rem;
|
|
border-left: 0.1875rem solid var(--accent-strong);
|
|
background: rgba(56, 189, 248, 0.08);
|
|
border-radius: 0.625rem;
|
|
color: var(--text);
|
|
}
|
|
|
|
.tag-list {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: 0.5rem;
|
|
}
|
|
|
|
.muted { color: var(--muted); }
|
|
|
|
.eyebrow {
|
|
text-transform: uppercase;
|
|
letter-spacing: 0.0625rem;
|
|
font-size: 0.75rem;
|
|
color: var(--muted);
|
|
margin: 0 0 0.375rem;
|
|
}
|
|
|
|
.sr-only {
|
|
position: absolute;
|
|
width: 0.0625rem;
|
|
height: 0.0625rem;
|
|
padding: 0;
|
|
margin: -0.0625rem;
|
|
overflow: hidden;
|
|
clip: rect(0, 0, 0, 0);
|
|
white-space: nowrap;
|
|
border: 0;
|
|
}
|