Add default styles and enable language plugin

Add stylesheet and enable language plugin with Norwegian support

app/default/config.ini

@@ -1,3 +1,6 @@
 [languages]
 default = "en"
-available = "en"
+available = "no,en"
+
+[plugins]
+enabled = "languages"

app/default/styles/styles.css

@@ -0,0 +1,188 @@
+/* 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;
+	}
+}