folderweb/app/default/styles/styles.css

/* RESET */
* { box-sizing: border-box; margin-bottom: 0 }

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

/* GLOBAL */
html {
	font-family: system-ui, sans-serif;
	font-size: clamp(16px, 2.3vw, 20px);
	line-height: 1.6;
	color: var(--color-text);
	background: var(--color-background);
}

body {
	margin: 0;
	display: grid;
	grid-template-rows: auto 1fr auto;
	min-height: 100vh;
}

/* CONTENT CENTERING */
.contain, :where(main > article, main > section, main > div) {
	display: grid;
	grid-template-columns: minmax(var(--space-s), 1fr) minmax(0, var(--size-content)) minmax(var(--space-s), 1fr);
	& > * { grid-column: 2 }
}

/* TYPOGRAPHY */
h1, h2, h3, h4, h5, h6 {
	font-weight: 400;
	line-height: 1.3;
	margin-top: 1.3em;
	text-wrap: pretty;
}
h1 { font-size: 2.3rem }
h4 { font-weight: 700 }

p, ul, ol, dl { margin-block: 1em }

a {
	color: var(--color-accent);
	text-decoration: none;
	&:hover { text-decoration: underline }
}

img { max-width: 100%; height: auto; display: block }

/* HEADER */
header {
	border-bottom: 1px solid var(--color-border);

	& > div {
		display: flex;
		flex-wrap: wrap;
		gap: var(--space-s);
		align-items: center;
		padding-block: var(--space-s);
	}

	& nav {
		display: flex;
		gap: var(--space-s);
		flex-wrap: wrap;
		align-items: center;

		&:first-child { flex: 1 }

		& a {
			text-decoration: none;
			&:hover { text-decoration: underline }
			&[aria-current] { font-weight: bold }
		}
	}
}

/* MAIN */
main { padding-block: var(--space-m) }

/* FOOTER */
footer {
	border-top: 1px solid var(--color-border);
	padding-block: var(--space-s);
	font-size: 0.875rem;
	color: var(--color-muted);
	& p { margin: 0 }
}

/* CODE */
code {
	background: oklch(95% 0.02 250);
	padding: 0.125em 0.25em;
	border-radius: 0.25em;
	font-size: 0.9em;
}

pre {
	background: oklch(95% 0.02 250);
	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-bottom: 1px solid var(--color-border) }
th { font-weight: bold }

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

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

/* LIST VIEWS */
.list-item {
	margin-bottom: var(--space-m);
	& img { margin-bottom: var(--space-xs) }
	& h2 { margin-top: 0 }
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 18rem), 1fr));
	gap: var(--space-m);
}

.card {
	border: 1px solid var(--color-border);
	border-radius: 0.5rem;
	padding: var(--space-s);
	& img { margin-bottom: var(--space-xs); border-radius: 0.25rem }
	& h3 { margin-top: 0 }
}

.compact-list {
	list-style: none;
	padding: 0;
	& li { border-bottom: 1px solid var(--color-border); padding-block: var(--space-xs) }
	& a {
		display: flex;
		justify-content: space-between;
		align-items: baseline;
		gap: var(--space-s);
		&:hover strong { text-decoration: underline }
	}
	& time { white-space: nowrap; font-size: 0.875rem }
	& p { margin-top: var(--space-xs); color: var(--color-muted); font-size: 0.9rem }
}