folderweb/app/default/styles/styles.css

/* Variables */
:root {
	--color-text: oklch(20% 0 0);
	--color-background: oklch(98% 0 0);
	--color-accent: oklch(50% 0.15 250);
	--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;
}

html {
	font-family: system-ui, sans-serif;
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-background);
}

body {
	margin: 0;
	display: grid;
	grid-template-columns: 
		[full-start] minmax(var(--space-s), 1fr)
		[content-start] minmax(0, var(--size-constrained))
		[content-end] minmax(var(--space-s), 1fr)
		[full-end];
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
	line-height: 1.2;
	margin-block: 1.5em 0.5em;
}

h1 { font-size: clamp(2rem, 5vw, 3rem); }
h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
h3 { font-size: clamp(1.25rem, 3vw, 1.5rem); }

p, ul, ol, dl {
	max-width: var(--size-content);
	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;
}

header {
	border-block-end: 1px solid var(--color-border);
	padding-block: var(--space-s);
	display: flex;
	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;
	}
}

main {
	padding-block: var(--space-m);
}

footer {
	border-block-start: 1px solid var(--color-border);
	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;
	border-radius: 0.25em;
	font-size: 0.9em;
}

pre {
	background: var(--color-accent-light);
	padding: var(--space-s);
	border-radius: 0.5em;
	overflow-x: auto;
	
	& code {
		background: none;
		padding: 0;
	}
}

/* Tables */
table {
	border-collapse: collapse;
	width: 100%;
	margin-block: var(--space-s);
}

th, td {
	padding: var(--space-xs);
	text-align: start;
	border-block-end: 1px solid var(--color-border);
}

th {
	font-weight: bold;
}

/* Blockquote */
blockquote {
	margin-inline: 0;
	padding-inline-start: var(--space-s);
	border-inline-start: 4px solid var(--color-accent);
	color: var(--color-muted);
}

/* Article metadata */
article {
	& time {
		color: var(--color-muted);
		font-size: 0.875rem;
	}
}