Give into SCSS

package-lock.json

@@ -26,6 +26,7 @@
 				"phosphor-svelte": "^1.3.0",
 				"prettier": "^3.1.0",
 				"prettier-plugin-svelte": "^3.1.0",
+				"sass": "^1.77.0",
 				"svelte": "^4.2.5",
 				"svelte-check": "^3.6.0",
 				"tslib": "^2.6.2",
@@ -629,7 +630,7 @@
 		},
 		"node_modules/anymatch": {
 			"version": "3.1.3",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"dependencies": {
 				"normalize-path": "^3.0.0",
@@ -697,7 +698,7 @@
 		},
 		"node_modules/binary-extensions": {
 			"version": "2.2.0",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8"
@@ -724,7 +725,7 @@
 		},
 		"node_modules/braces": {
 			"version": "3.0.2",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"fill-range": "^7.0.1"
@@ -789,7 +790,7 @@
 		},
 		"node_modules/chokidar": {
 			"version": "3.5.3",
-			"dev": true,
+			"devOptional": true,
 			"funding": [
 				{
 					"type": "individual",
@@ -815,7 +816,7 @@
 		},
 		"node_modules/chokidar/node_modules/glob-parent": {
 			"version": "5.1.2",
-			"dev": true,
+			"devOptional": true,
 			"license": "ISC",
 			"dependencies": {
 				"is-glob": "^4.0.1"
@@ -1373,7 +1374,7 @@
 		},
 		"node_modules/fill-range": {
 			"version": "7.0.1",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"to-regex-range": "^5.0.1"
@@ -1570,6 +1571,12 @@
 				"node": ">=12.0.0"
 			}
 		},
+		"node_modules/immutable": {
+			"version": "4.3.5",
+			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.5.tgz",
+			"integrity": "sha512-8eabxkth9gZatlwl5TBuJnCsoTADlL6ftEr7A4qgdaTsPyreilDSnUk57SO+jfKcNtxPa22U5KK6DSeAYhpBJw==",
+			"devOptional": true
+		},
 		"node_modules/import-fresh": {
 			"version": "3.3.0",
 			"dev": true,
@@ -1619,7 +1626,7 @@
 		},
 		"node_modules/is-binary-path": {
 			"version": "2.1.0",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"binary-extensions": "^2.0.0"
@@ -1630,7 +1637,7 @@
 		},
 		"node_modules/is-extglob": {
 			"version": "2.1.1",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
@@ -1638,7 +1645,7 @@
 		},
 		"node_modules/is-glob": {
 			"version": "4.0.3",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"is-extglob": "^2.1.1"
@@ -1649,7 +1656,7 @@
 		},
 		"node_modules/is-number": {
 			"version": "7.0.0",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.12.0"
@@ -1945,7 +1952,7 @@
 		},
 		"node_modules/normalize-path": {
 			"version": "3.0.0",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=0.10.0"
@@ -2070,7 +2077,7 @@
 		},
 		"node_modules/picomatch": {
 			"version": "2.3.1",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"engines": {
 				"node": ">=8.6"
@@ -2358,7 +2365,7 @@
 		},
 		"node_modules/readdirp": {
 			"version": "3.6.0",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"picomatch": "^2.2.1"
@@ -2496,6 +2503,23 @@
 				"rimraf": "bin.js"
 			}
 		},
+		"node_modules/sass": {
+			"version": "1.77.0",
+			"resolved": "https://registry.npmjs.org/sass/-/sass-1.77.0.tgz",
+			"integrity": "sha512-eGj4HNfXqBWtSnvItNkn7B6icqH14i3CiCGbzMKs3BAPTq62pp9NBYsBgyN4cA+qssqo9r26lW4JSvlaUUWbgw==",
+			"devOptional": true,
+			"dependencies": {
+				"chokidar": ">=3.0.0 <4.0.0",
+				"immutable": "^4.0.0",
+				"source-map-js": ">=0.6.2 <2.0.0"
+			},
+			"bin": {
+				"sass": "sass.js"
+			},
+			"engines": {
+				"node": ">=14.0.0"
+			}
+		},
 		"node_modules/semver": {
 			"version": "7.5.4",
 			"dev": true,
@@ -2894,7 +2918,7 @@
 		},
 		"node_modules/to-regex-range": {
 			"version": "5.0.1",
-			"dev": true,
+			"devOptional": true,
 			"license": "MIT",
 			"dependencies": {
 				"is-number": "^7.0.0"

package.json

@@ -26,6 +26,7 @@
 		"phosphor-svelte": "^1.3.0",
 		"prettier": "^3.1.0",
 		"prettier-plugin-svelte": "^3.1.0",
+		"sass": "^1.77.0",
 		"svelte": "^4.2.5",
 		"svelte-check": "^3.6.0",
 		"tslib": "^2.6.2",

src/_vars.scss

@@ -0,0 +1,2 @@
+$size-container: 640px;
+$size-modal: 480px;

src/app.scss

@@ -40,9 +40,6 @@ html {
 	--animation-speed: 0.2s;
 	--animation-type: ease-in-out;
 
-	--size-container: 640px;
-	--size-modal: 480px;
-
 	--shadow-luminosity: calc(100% - var(--color-bg-l));
 	--shadow-small: 0.5px 1px 1px
 		hsl(var(--color-bg-h), var(--color-bg-s), var(--shadow-luminosity) / 0.7);
@@ -130,6 +127,5 @@ h6 {
 
 body {
 	min-height: 100vh;
-	display: flex;
 	flex-direction: column;
 }

src/routes/+layout.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import '../app.css';
+	import '../app.scss';
 	import '../typography.css';
 	import '../prism/gruvbox/light.css';
 
@@ -9,13 +9,25 @@
 </script>
 
 <Header />
-<main><slot /></main>
+<div class="main-wrapper">
+	<main><slot /></main>
+</div>
 <Spacer />
 <Footer />
 
-<style>
+<style lang="scss">
+	@import '../vars';
+
 	main {
-		margin: 2rem auto;
+		margin: 0 0 6rem 0;
-		max-width: var(--size-container);
+		max-width: min($size-container, 100vw);
+		display: flex;
+		flex-direction: column;
+		padding: 0 2rem;
+	}
+	.main-wrapper {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 	}
 </style>

src/routes/Footer.svelte

@@ -12,9 +12,11 @@
 	</div>
 </footer>
 
-<style>
+<style lang="scss">
+	@import '../vars';
+
 	footer {
-		width: 100%;
+		width: 100vw;
 		padding: 2rem;
 		display: flex;
 		flex-direction: column;
@@ -38,7 +40,7 @@
 
 	.row {
 		margin: 0 auto;
-		max-width: var(--size-container);
+		max-width: $size-container;
 		background-color: var(--color-bg);
 		padding: 1rem;
 		border-radius: 0.5rem;

src/routes/Header.svelte

@@ -24,7 +24,9 @@
 	<Button href="/portfolio/">Portfolio</Button>
 </header>
 
-<style>
+<style lang="scss">
+	@import '../vars';
+
 	header {
 		display: flex;
 		flex-direction: row;
@@ -33,6 +35,11 @@
 		gap: 2rem;
 		margin-bottom: -3rem;
 	}
+	@media (max-width: $size-container) {
+		header {
+			margin-bottom: unset;
+		}
+	}
 
 	.logo {
 		width: 12rem;

src/routes/[slug]/+page.svelte

@@ -1,9 +1,20 @@
 <script lang="ts">
+	import { format } from 'date-fns';
+
 	export let data;
 </script>
 
 <article>
 	<h1>{data.title}</h1>
-	<p>Published: {data.date}</p>
+	<time datetime={data.date}>
+		{format(new Date(data.date), 'MMMM d, yyyy')}
+	</time>
 	<svelte:component this={data.content} />
 </article>
+
+<style>
+	time {
+		display: block;
+		margin-bottom: 4rem;
+	}
+</style>

src/routes/[slug]/+page.ts

@@ -6,6 +6,6 @@ export async function load({ params }) {
 	return {
 		content,
 		title,
-		date
+		date,
 	};
 }

src/routes/posts/[[page=integer]]/+page.svelte

@@ -33,7 +33,7 @@
 							<time datetime={post.meta.date}>
 								{format(new Date(post.meta.date), 'MMMM d')}
 							</time>
-							<span>about {post.readingTime.text}</span>
+							<div class="">About {post.readingTime.text}</div>
 						</li>
 					</a>
 				{/each}
@@ -55,9 +55,16 @@
 </div>
 
 <style>
+	/* Restore the color of everything under the post links, except the titles */
+	.posts a {
+		color: var(--color-text);
+	}
+	.posts a .post-title {
+		color: var(--color-primary);
+	}
+
 	time {
 		width: 8rem;
-		color: var(--color-text);
 	}
 
 	.pagination-controls {