This commit is contained in:
Ruben 2026-01-14 14:40:44 +01:00
parent 1390ed51e8
commit 47cf4d8652

View file

@ -1,4 +1,3 @@
/* Variables */
:root {
--color-text: oklch(20% 0 0);
--color-background: oklch(98% 0 0);
@ -6,18 +5,17 @@
--color-accent-light: oklch(95% 0.05 250);
--color-border: oklch(85% 0 0);
--color-muted: oklch(50% 0 0);
--space-xs: 0.5rem;
--space-s: 1rem;
--space-m: 2rem;
--space-l: 4rem;
--size-content: 65ch;
--size-constrained: 42rem;
--size-wide: 90rem;
}
/* Base */
* {
box-sizing: border-box;
}
@ -32,7 +30,7 @@ html {
body {
margin: 0;
display: grid;
grid-template-columns:
grid-template-columns:
[full-start] minmax(var(--space-s), 1fr)
[content-start] minmax(0, var(--size-constrained))
[content-end] minmax(var(--space-s), 1fr)
@ -41,7 +39,6 @@ body {
min-height: 100vh;
}
/* Typography */
h1, h2, h3, h4, h5, h6 {
line-height: 1.2;
margin-block: 1.5em 0.5em;
@ -56,17 +53,15 @@ p, ul, ol, dl {
margin-block: 1em;
}
/* Links */
a {
color: var(--color-accent);
text-underline-offset: 0.2em;
&:hover {
text-decoration: none;
}
}
/* Layout */
header, main, footer {
grid-column: content;
}
@ -78,29 +73,29 @@ header {
flex-wrap: wrap;
gap: var(--space-s);
align-items: center;
& nav {
display: flex;
gap: var(--space-s);
flex-wrap: wrap;
&:first-child {
flex: 1;
}
& a {
text-decoration: none;
&:hover {
text-decoration: underline;
}
&[aria-current] {
font-weight: bold;
}
}
}
& .language-switcher {
margin-inline-start: auto;
}
@ -115,26 +110,24 @@ footer {
padding-block: var(--space-s);
font-size: 0.875rem;
color: var(--color-muted);
& nav {
display: flex;
gap: var(--space-s);
margin-block-end: var(--space-xs);
}
& p {
margin: 0;
}
}
/* Images */
img {
max-width: 100%;
height: auto;
display: block;
}
/* Code */
code {
background: var(--color-accent-light);
padding: 0.125em 0.25em;
@ -147,14 +140,13 @@ pre {
padding: var(--space-s);
border-radius: 0.5em;
overflow-x: auto;
& code {
background: none;
padding: 0;
}
}
/* Tables */
table {
border-collapse: collapse;
width: 100%;
@ -171,7 +163,6 @@ th {
font-weight: bold;
}
/* Blockquote */
blockquote {
margin-inline: 0;
padding-inline-start: var(--space-s);
@ -179,7 +170,6 @@ blockquote {
color: var(--color-muted);
}
/* Article metadata */
article {
& time {
color: var(--color-muted);