finish css overhaul

package-lock.json

@@ -11,6 +11,7 @@
 				"@sveltejs/adapter-auto": "^2.0.0",
 				"@sveltejs/adapter-static": "^2.0.3",
 				"@sveltejs/kit": "^1.20.4",
+				"hast-util-to-html": "^9.0.0",
 				"hast-util-to-text": "^4.0.0",
 				"mdast-util-to-string": "^4.0.0",
 				"mdsvex": "^0.11.0",
@@ -567,6 +568,12 @@
 			"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
 			"dev": true
 		},
+		"node_modules/@ungap/structured-clone": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+			"dev": true
+		},
 		"node_modules/acorn": {
 			"version": "8.10.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -643,6 +650,36 @@
 				"node": ">=10.16.0"
 			}
 		},
+		"node_modules/ccount": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+			"integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-html4": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+			"integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/character-entities-legacy": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+			"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/chokidar": {
 			"version": "3.5.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -683,6 +720,16 @@
 				"periscopic": "^3.1.0"
 			}
 		},
+		"node_modules/comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/cookie": {
 			"version": "0.5.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -746,6 +793,31 @@
 			"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
 			"dev": true
 		},
+		"node_modules/devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"dev": true,
+			"dependencies": {
+				"dequal": "^2.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"dev": true,
+			"engines": {
+				"node": ">=0.12"
+			},
+			"funding": {
+				"url": "https://github.com/fb55/entities?sponsor=1"
+			}
+		},
 		"node_modules/esbuild": {
 			"version": "0.18.20",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -836,6 +908,26 @@
 				"node": ">= 6"
 			}
 		},
+		"node_modules/hast-util-from-parse5": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz",
+			"integrity": "sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"devlop": "^1.0.0",
+				"hastscript": "^8.0.0",
+				"property-information": "^6.0.0",
+				"vfile": "^6.0.0",
+				"vfile-location": "^5.0.0",
+				"web-namespaces": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/hast-util-is-element": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
@@ -849,6 +941,87 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-parse-selector": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+			"integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-raw": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.1.tgz",
+			"integrity": "sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"hast-util-from-parse5": "^8.0.0",
+				"hast-util-to-parse5": "^8.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"parse5": "^7.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0",
+				"web-namespaces": "^2.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-html": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.0.tgz",
+			"integrity": "sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"ccount": "^2.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-raw": "^9.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"stringify-entities": "^4.0.0",
+				"zwitch": "^2.0.4"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hast-util-to-parse5": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+			"integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"devlop": "^1.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"web-namespaces": "^2.0.0",
+				"zwitch": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/hast-util-to-text": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.0.tgz",
@@ -865,6 +1038,46 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/hastscript": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-8.0.0.tgz",
+			"integrity": "sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-parse-selector": "^4.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/html-void-elements": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+			"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/immutable": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
@@ -965,6 +1178,26 @@
 				"node": ">=12"
 			}
 		},
+		"node_modules/mdast-util-to-hast": {
+			"version": "13.0.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.0.2.tgz",
+			"integrity": "sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==",
+			"dev": true,
+			"dependencies": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"trim-lines": "^3.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/mdast-util-to-string": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
@@ -1005,6 +1238,95 @@
 			"integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==",
 			"dev": true
 		},
+		"node_modules/micromark-util-character": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.0.1.tgz",
+			"integrity": "sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-encode": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+			"integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-sanitize-uri": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+			"integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			],
+			"dependencies": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"node_modules/micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
+		"node_modules/micromark-util-types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+			"integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+			"dev": true,
+			"funding": [
+				{
+					"type": "GitHub Sponsors",
+					"url": "https://github.com/sponsors/unifiedjs"
+				},
+				{
+					"type": "OpenCollective",
+					"url": "https://opencollective.com/unified"
+				}
+			]
+		},
 		"node_modules/mime": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
@@ -1068,6 +1390,18 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/parse5": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+			"dev": true,
+			"dependencies": {
+				"entities": "^4.4.0"
+			},
+			"funding": {
+				"url": "https://github.com/inikulin/parse5?sponsor=1"
+			}
+		},
 		"node_modules/periscopic": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -1140,6 +1474,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/property-information": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.4.0.tgz",
+			"integrity": "sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -1226,6 +1570,16 @@
 				"node": ">=0.10.0"
 			}
 		},
+		"node_modules/space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/streamsearch": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@@ -1235,6 +1589,20 @@
 				"node": ">=10.0.0"
 			}
 		},
+		"node_modules/stringify-entities": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz",
+			"integrity": "sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==",
+			"dev": true,
+			"dependencies": {
+				"character-entities-html4": "^2.0.0",
+				"character-entities-legacy": "^3.0.0"
+			},
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/svelte": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.0.tgz",
@@ -1292,6 +1660,16 @@
 				"node": ">=6"
 			}
 		},
+		"node_modules/trim-lines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+			"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
 		"node_modules/undici": {
 			"version": "5.23.0",
 			"resolved": "https://registry.npmjs.org/undici/-/undici-5.23.0.tgz",
@@ -1346,6 +1724,19 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/unist-util-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/unist-util-stringify-position": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@@ -1394,6 +1785,35 @@
 				"url": "https://opencollective.com/unified"
 			}
 		},
+		"node_modules/vfile": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+			"integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile-location": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz",
+			"integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"vfile": "^6.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vfile-message": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
@@ -1414,6 +1834,33 @@
 			"integrity": "sha512-cputDpIbFgLUaGQn6Vqg3/YsJwxUwHLO13v3i5ouxT4lat0khip9AEWxtERujXV9wxIB1EyF97BSJFt6vpdI8g==",
 			"dev": true
 		},
+		"node_modules/vfile/node_modules/unist-util-stringify-position": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+			"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
+		"node_modules/vfile/node_modules/vfile-message": {
+			"version": "4.0.2",
+			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+			"integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+			"dev": true,
+			"dependencies": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0"
+			},
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/unified"
+			}
+		},
 		"node_modules/vite": {
 			"version": "4.4.9",
 			"resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
@@ -1482,6 +1929,26 @@
 					"optional": true
 				}
 			}
+		},
+		"node_modules/web-namespaces": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+			"integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
+		},
+		"node_modules/zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"dev": true,
+			"funding": {
+				"type": "github",
+				"url": "https://github.com/sponsors/wooorm"
+			}
 		}
 	},
 	"dependencies": {
@@ -1790,6 +2257,12 @@
 			"integrity": "sha512-MFETx3tbTjE7Uk6vvnWINA/1iJ7LuMdO4fcq8UfF0pRbj01aGLduVvQcRyswuACJdpnHgg8E3rQLhaRdNEJS0w==",
 			"dev": true
 		},
+		"@ungap/structured-clone": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
+			"integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
+			"dev": true
+		},
 		"acorn": {
 			"version": "8.10.0",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.10.0.tgz",
@@ -1848,6 +2321,24 @@
 				"streamsearch": "^1.1.0"
 			}
 		},
+		"ccount": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
+			"integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
+			"dev": true
+		},
+		"character-entities-html4": {
+			"version": "2.1.0",
+			"resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
+			"integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
+			"dev": true
+		},
+		"character-entities-legacy": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
+			"integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
+			"dev": true
+		},
 		"chokidar": {
 			"version": "3.5.3",
 			"resolved": "https://registry.npmjs.org/chokidar/-/chokidar-3.5.3.tgz",
@@ -1877,6 +2368,12 @@
 				"periscopic": "^3.1.0"
 			}
 		},
+		"comma-separated-tokens": {
+			"version": "2.0.3",
+			"resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+			"integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+			"dev": true
+		},
 		"cookie": {
 			"version": "0.5.0",
 			"resolved": "https://registry.npmjs.org/cookie/-/cookie-0.5.0.tgz",
@@ -1920,6 +2417,21 @@
 			"integrity": "sha512-KqFl6pOgOW+Y6wJgu80rHpo2/3H07vr8ntR9rkkFIRETewbf5GaYYcakYfiKz89K+sLsuPkQIZaXDMjUObZwWg==",
 			"dev": true
 		},
+		"devlop": {
+			"version": "1.1.0",
+			"resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
+			"integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
+			"dev": true,
+			"requires": {
+				"dequal": "^2.0.0"
+			}
+		},
+		"entities": {
+			"version": "4.5.0",
+			"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
+			"integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
+			"dev": true
+		},
 		"esbuild": {
 			"version": "0.18.20",
 			"resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
@@ -1990,6 +2502,22 @@
 				"is-glob": "^4.0.1"
 			}
 		},
+		"hast-util-from-parse5": {
+			"version": "8.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz",
+			"integrity": "sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==",
+			"dev": true,
+			"requires": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"devlop": "^1.0.0",
+				"hastscript": "^8.0.0",
+				"property-information": "^6.0.0",
+				"vfile": "^6.0.0",
+				"vfile-location": "^5.0.0",
+				"web-namespaces": "^2.0.0"
+			}
+		},
 		"hast-util-is-element": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
@@ -1999,6 +2527,71 @@
 				"@types/hast": "^3.0.0"
 			}
 		},
+		"hast-util-parse-selector": {
+			"version": "4.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+			"integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+			"dev": true,
+			"requires": {
+				"@types/hast": "^3.0.0"
+			}
+		},
+		"hast-util-raw": {
+			"version": "9.0.1",
+			"resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.1.tgz",
+			"integrity": "sha512-5m1gmba658Q+lO5uqL5YNGQWeh1MYWZbZmWrM5lncdcuiXuo5E2HT/CIOp0rLF8ksfSwiCVJ3twlgVRyTGThGA==",
+			"dev": true,
+			"requires": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"hast-util-from-parse5": "^8.0.0",
+				"hast-util-to-parse5": "^8.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"parse5": "^7.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0",
+				"vfile": "^6.0.0",
+				"web-namespaces": "^2.0.0",
+				"zwitch": "^2.0.0"
+			}
+		},
+		"hast-util-to-html": {
+			"version": "9.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-html/-/hast-util-to-html-9.0.0.tgz",
+			"integrity": "sha512-IVGhNgg7vANuUA2XKrT6sOIIPgaYZnmLx3l/CCOAK0PtgfoHrZwX7jCSYyFxHTrGmC6S9q8aQQekjp4JPZF+cw==",
+			"dev": true,
+			"requires": {
+				"@types/hast": "^3.0.0",
+				"@types/unist": "^3.0.0",
+				"ccount": "^2.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-raw": "^9.0.0",
+				"hast-util-whitespace": "^3.0.0",
+				"html-void-elements": "^3.0.0",
+				"mdast-util-to-hast": "^13.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"stringify-entities": "^4.0.0",
+				"zwitch": "^2.0.4"
+			}
+		},
+		"hast-util-to-parse5": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+			"integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+			"dev": true,
+			"requires": {
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"devlop": "^1.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0",
+				"web-namespaces": "^2.0.0",
+				"zwitch": "^2.0.0"
+			}
+		},
 		"hast-util-to-text": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.0.tgz",
@@ -2011,6 +2604,34 @@
 				"unist-util-find-after": "^5.0.0"
 			}
 		},
+		"hast-util-whitespace": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
+			"integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+			"dev": true,
+			"requires": {
+				"@types/hast": "^3.0.0"
+			}
+		},
+		"hastscript": {
+			"version": "8.0.0",
+			"resolved": "https://registry.npmjs.org/hastscript/-/hastscript-8.0.0.tgz",
+			"integrity": "sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==",
+			"dev": true,
+			"requires": {
+				"@types/hast": "^3.0.0",
+				"comma-separated-tokens": "^2.0.0",
+				"hast-util-parse-selector": "^4.0.0",
+				"property-information": "^6.0.0",
+				"space-separated-tokens": "^2.0.0"
+			}
+		},
+		"html-void-elements": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+			"integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+			"dev": true
+		},
 		"immutable": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/immutable/-/immutable-4.3.4.tgz",
@@ -2089,6 +2710,22 @@
 				"@jridgewell/sourcemap-codec": "^1.4.15"
 			}
 		},
+		"mdast-util-to-hast": {
+			"version": "13.0.2",
+			"resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.0.2.tgz",
+			"integrity": "sha512-U5I+500EOOw9e3ZrclN3Is3fRpw8c19SMyNZlZ2IS+7vLsNzb2Om11VpIVOR+/0137GhZsFEF6YiKD5+0Hr2Og==",
+			"dev": true,
+			"requires": {
+				"@types/hast": "^3.0.0",
+				"@types/mdast": "^4.0.0",
+				"@ungap/structured-clone": "^1.0.0",
+				"devlop": "^1.0.0",
+				"micromark-util-sanitize-uri": "^2.0.0",
+				"trim-lines": "^3.0.0",
+				"unist-util-position": "^5.0.0",
+				"unist-util-visit": "^5.0.0"
+			}
+		},
 		"mdast-util-to-string": {
 			"version": "4.0.0",
 			"resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
@@ -2124,6 +2761,45 @@
 				}
 			}
 		},
+		"micromark-util-character": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.0.1.tgz",
+			"integrity": "sha512-3wgnrmEAJ4T+mGXAUfMvMAbxU9RDG43XmGce4j6CwPtVxB3vfwXSZ6KhFwDzZ3mZHhmPimMAXg71veiBGzeAZw==",
+			"dev": true,
+			"requires": {
+				"micromark-util-symbol": "^2.0.0",
+				"micromark-util-types": "^2.0.0"
+			}
+		},
+		"micromark-util-encode": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
+			"integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
+			"dev": true
+		},
+		"micromark-util-sanitize-uri": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
+			"integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
+			"dev": true,
+			"requires": {
+				"micromark-util-character": "^2.0.0",
+				"micromark-util-encode": "^2.0.0",
+				"micromark-util-symbol": "^2.0.0"
+			}
+		},
+		"micromark-util-symbol": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
+			"integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
+			"dev": true
+		},
+		"micromark-util-types": {
+			"version": "2.0.0",
+			"resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
+			"integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
+			"dev": true
+		},
 		"mime": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/mime/-/mime-3.0.0.tgz",
@@ -2160,6 +2836,15 @@
 			"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
 			"dev": true
 		},
+		"parse5": {
+			"version": "7.1.2",
+			"resolved": "https://registry.npmjs.org/parse5/-/parse5-7.1.2.tgz",
+			"integrity": "sha512-Czj1WaSVpaoj0wbhMzLmWD69anp2WH7FXMB9n1Sy8/ZFF9jolSQVMu1Ij5WIyGmcBmhk7EOndpO4mIpihVqAXw==",
+			"dev": true,
+			"requires": {
+				"entities": "^4.4.0"
+			}
+		},
 		"periscopic": {
 			"version": "3.1.0",
 			"resolved": "https://registry.npmjs.org/periscopic/-/periscopic-3.1.0.tgz",
@@ -2206,6 +2891,12 @@
 			"integrity": "sha512-Kx/1w86q/epKcmte75LNrEoT+lX8pBpavuAbvJWRXar7Hz8jrtF+e3vY751p0R8H9HdArwaCTNDDzHg/ScJK1Q==",
 			"dev": true
 		},
+		"property-information": {
+			"version": "6.4.0",
+			"resolved": "https://registry.npmjs.org/property-information/-/property-information-6.4.0.tgz",
+			"integrity": "sha512-9t5qARVofg2xQqKtytzt+lZ4d1Qvj8t5B8fEwXK6qOfgRLgH/b13QlgEyDh033NOS31nXeFbYv7CLUDG1CeifQ==",
+			"dev": true
+		},
 		"readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -2267,12 +2958,28 @@
 			"integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
 			"dev": true
 		},
+		"space-separated-tokens": {
+			"version": "2.0.2",
+			"resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+			"integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+			"dev": true
+		},
 		"streamsearch": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
 			"integrity": "sha512-Mcc5wHehp9aXz1ax6bZUyY5afg9u2rv5cqQI3mRrYkGC8rW2hM02jWuwjtL++LS5qinSyhj2QfLyNsuc+VsExg==",
 			"dev": true
 		},
+		"stringify-entities": {
+			"version": "4.0.3",
+			"resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.3.tgz",
+			"integrity": "sha512-BP9nNHMhhfcMbiuQKCqMjhDP5yBCAxsPu4pHFFzJ6Alo9dZgY4VLDPutXqIjpRiMoKdp7Av85Gr73Q5uH9k7+g==",
+			"dev": true,
+			"requires": {
+				"character-entities-html4": "^2.0.0",
+				"character-entities-legacy": "^3.0.0"
+			}
+		},
 		"svelte": {
 			"version": "4.2.0",
 			"resolved": "https://registry.npmjs.org/svelte/-/svelte-4.2.0.tgz",
@@ -2316,6 +3023,12 @@
 			"integrity": "sha512-sf4i37nQ2LBx4m3wB74y+ubopq6W/dIzXg0FDGjsYnZHVa1Da8FH853wlL2gtUhg+xJXjfk3kUZS3BRoQeoQBQ==",
 			"dev": true
 		},
+		"trim-lines": {
+			"version": "3.0.1",
+			"resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+			"integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+			"dev": true
+		},
 		"undici": {
 			"version": "5.23.0",
 			"resolved": "https://registry.npmjs.org/undici/-/undici-5.23.0.tgz",
@@ -2355,6 +3068,15 @@
 				"@types/unist": "^3.0.0"
 			}
 		},
+		"unist-util-position": {
+			"version": "5.0.0",
+			"resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+			"integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+			"dev": true,
+			"requires": {
+				"@types/unist": "^3.0.0"
+			}
+		},
 		"unist-util-stringify-position": {
 			"version": "2.0.3",
 			"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz",
@@ -2393,6 +3115,48 @@
 				"unist-util-is": "^6.0.0"
 			}
 		},
+		"vfile": {
+			"version": "6.0.1",
+			"resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.1.tgz",
+			"integrity": "sha512-1bYqc7pt6NIADBJ98UiG0Bn/CHIVOoZ/IyEkqIruLg0mE1BKzkOXY2D6CSqQIcKqgadppE5lrxgWXJmXd7zZJw==",
+			"dev": true,
+			"requires": {
+				"@types/unist": "^3.0.0",
+				"unist-util-stringify-position": "^4.0.0",
+				"vfile-message": "^4.0.0"
+			},
+			"dependencies": {
+				"unist-util-stringify-position": {
+					"version": "4.0.0",
+					"resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
+					"integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+					"dev": true,
+					"requires": {
+						"@types/unist": "^3.0.0"
+					}
+				},
+				"vfile-message": {
+					"version": "4.0.2",
+					"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
+					"integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
+					"dev": true,
+					"requires": {
+						"@types/unist": "^3.0.0",
+						"unist-util-stringify-position": "^4.0.0"
+					}
+				}
+			}
+		},
+		"vfile-location": {
+			"version": "5.0.2",
+			"resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.2.tgz",
+			"integrity": "sha512-NXPYyxyBSH7zB5U6+3uDdd6Nybz6o6/od9rk8bp9H8GR3L+cm/fC0uUTbqBmUTnMCUDslAGBOIKNfvvb+gGlDg==",
+			"dev": true,
+			"requires": {
+				"@types/unist": "^3.0.0",
+				"vfile": "^6.0.0"
+			}
+		},
 		"vfile-message": {
 			"version": "2.0.4",
 			"resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz",
@@ -2429,6 +3193,18 @@
 			"integrity": "sha512-fanAXjSaf9xXtOOeno8wZXIhgia+CZury481LsDaV++lSvcU2R9Ch2bPh3PYFyoHW+w9LqAeYRISVQjUIew14g==",
 			"dev": true,
 			"requires": {}
+		},
+		"web-namespaces": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+			"integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+			"dev": true
+		},
+		"zwitch": {
+			"version": "2.0.4",
+			"resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
+			"integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
+			"dev": true
 		}
 	}
 }

package.json

@@ -11,6 +11,7 @@
 		"@sveltejs/adapter-auto": "^2.0.0",
 		"@sveltejs/adapter-static": "^2.0.3",
 		"@sveltejs/kit": "^1.20.4",
+		"hast-util-to-html": "^9.0.0",
 		"hast-util-to-text": "^4.0.0",
 		"mdast-util-to-string": "^4.0.0",
 		"mdsvex": "^0.11.0",

src/app.html

@@ -3,7 +3,6 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="preload" href="/Tajawal-Regular.woff2" as="font" type="font/woff2" />
-		<link rel="preload" href="/Baskerville-Regular.woff2" as="font" type="font/woff2" />
 		<link rel="alternate" type="application/atom+xml" href="/feed">
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%

src/lib/Dropcap.svelte

@@ -2,10 +2,10 @@
     // Usage: <Dropcap word="Lorem">ipsum dolor sit amet...</Dropcap>
 
     export let word;
-    const initial = word.slice(0, 1);
+    const initial = word.slice(0, 1).toUpperCase();
     const remainder = word.slice(1);
 
-    // a few letters are narrower at the top, so we need more of a shift
+    // a few letters are narrower at the top, so we need to shift the remainder to compensate
     const shiftValues = {
         A: '-0.45em',
         L: '-0.3em',
@@ -16,16 +16,23 @@
 </script>
 
 <style>
-    .drop-cap {
+    @font-face {
-        text-transform: uppercase;
-        color: #8c0606;
-/*        box-sizing: border-box;*/
-        font-size: calc(var(--content-size) * var(--content-line-height) * 1.75);
-        float: left;
         font-family: 'Baskerville';
-        line-height: 0.8;
+        font-style: normal;
-        margin-right: 0.1em;
+        font-weight: 400;
+        src: url(/Baskerville-Regular.woff2) format('woff2');
+        font-display: block;
+    }
+
+    .drop-cap {
         display: block;
+        float: left;
+        margin-right: 0.1em;
+        color: var(--accent-color);
+        font-size: calc(var(--content-size) * 1.5 * 2);
+        line-height: 0.8;
+        font-family: 'Baskerville';
+        text-transform: uppercase;
     }
 
     .first-word {
@@ -34,6 +41,10 @@
     }
 </style>
 
+<svelte:head>
+    <link rel="preload" href="/Baskerville-Regular.woff2" as="font" type="font/woff2">
+</svelte:head>
+
 
 <span class="drop-cap">{initial}</span>
 {#if remainder.length}

src/lib/Heading.svelte

@@ -10,10 +10,10 @@
         position: relative;
     }
 
-    /* shift the anchor link to hang off the left side of the content when there's room */
+    // shift the anchor link to hang off the left side of the content when there's room 
     .anchor-wrapper {
-        /* slightly overlap the span with the heading so that it doesn't
+        //  slightly overlap the span with the heading so that it doesn't
-        lose its hover state as the cursor moves between them */
+        // lose its hover state as the cursor moves between them 
         position: absolute;
         padding-right: 0.5em;
         left: -1.25em;
@@ -24,10 +24,10 @@
     }
 
     a {
-        /* works better to set the size here for line-height reasons */
+        // works better to set the size here for line-height reasons 
         font-size: 0.9em;
 
-        /* give the anchor link a faded appearance by default */
+        // give the anchor link a faded appearance by default 
         color: hsl(0deg, 0%, 29%);
         opacity: 40%;
         transition: opacity 150ms, color 150ms;
@@ -37,17 +37,17 @@
         }
     }
 
-    /* emphasize anchor link when heading is hovered or when clicked (the latter for mobile) */
+    // emphasize anchor link when heading is hovered or when clicked (the latter for mobile) 
     .h:hover a, .anchor-wrapper:hover a, .h a:active {
         color: var(--accent-color);
         opacity: 100%;
     }
 
     svg {
-        /* undo the reset that makes images block */
+        // undo the reset that makes images block 
         display: inline;
         width: 1em;
-        /* tiny tweak for optical alignment */
+        // tiny tweak for optical alignment 
         transform: translateY(2px);
     }
 </style>

src/lib/Link.svelte

@@ -13,12 +13,13 @@
 </script>
 
 <script>
-    export let href; // we don't care about other attributes
+    export let href;
+    export let rel = '';
 </script>
 
 
 {#if href.startsWith('/') || host(href) === $page.host}
-    <a data-sveltekit-preload-data="hover" {href}>
+    <a data-sveltekit-preload-data="hover" {href} {rel}>
         <slot></slot>
     </a>
 {:else}

src/lib/Post.svelte

@@ -14,7 +14,7 @@
 <script>
     export let title, date;
     export let description = '';
-    export const draft = false;
+    export let draft = false;
     export let toc = null;
 
     export let slug;
@@ -22,13 +22,13 @@
     export let next = null;
 </script>
 
-<style>
+<style lang="scss">
     .page {
         /* 3-column grid: left gutter, center content, and right gutter */
         display: grid;
         grid-template-columns: minmax(0, 1fr) minmax(0, var(--content-width)) minmax(0, 1fr);
         /* a bit of breathing room for narrow screens */
-        padding: 0 0.5rem;
+        padding: 0 var(--content-padding);
     }
 
     /* container for the table of contents */
@@ -44,58 +44,57 @@
     .subtitle {
         font-size: 0.9em;
         font-style: italic;
-        margin-top: -0.5rem;
+        margin-top: -0.75rem;
     }
 
     .post {
         grid-column: 2 / 3;
     }
 
-    .footer {
-        grid-column: 2 / 3;
-        margin-bottom: 2rem;
-        display: flex;
-    }
-
     hr {
         grid-column: 2 / 3;
         width: 100%;
         border-top: 1px solid hsl(0 0% 75%);
         border-bottom: none;
-        margin: 2rem 0;
+        margin: 2.5rem 0;
     }
 
-    .footer a {
+    .footer {
-        /*display: flex;
+        grid-column: 2 / 3;
-        align-items: center;
+        margin-bottom: 2.5rem;
-        gap: 0.45em;*/
+        display: flex;
 
-        font-size: 1rem;
+        & a {
+            display: flex;
+            align-items: center;
+            gap: 0.45em;
+
+            font-size: 1.25rem;
             color: var(--content-color-faded);
             text-decoration: underline;
             text-underline-offset: 0.25em;
             text-decoration-color: transparent;
 
             transition: 150ms;
-    }
+
-    .footer a:hover {
+            &:hover {
                 text-decoration-color: currentColor;
                 text-decoration: underline;
             }
+        }
 
-    .footer svg {
+        & svg {
             width: 1em;
-        display: inline;
-        vertical-align: top;
             transition: 150ms;
         }
 
-    a.prev:hover svg {
+        & .prev:hover svg {
             transform: translateX(-50%);
         }
-    a.next:hover svg {
+        & .next:hover svg {
             transform: translateX(50%);
         }
+    }
 </style>
 
 <svelte:head>
@@ -105,9 +104,12 @@
     <meta property="og:url" content="https://blog.jfmonty2.com/{slug}">
     <meta property="og:description" content={description}>
     <meta property="og:site_name" content="Joe's Blog">
+
+    <!-- Put this here for now, until I can get custom components working for codeblocks -->
+    <link rel="preload" href="/Hack-Regular.woff2" as="font" type="font/woff2">
 </svelte:head>
 
-<div class="page">
+<div class="page prose">
     <div class="title">
         <h1 id="{makeSlug(title)}">{title}</h1>
         <p class="subtitle">{formatDate(date)}</p>

src/lib/Sidenote.svelte

@@ -1,5 +1,9 @@
-<style>
+<style lang="scss">
-    /* always applicable */
+    // minimum desirable sidenote width is 15rem, so breakpoint is
+    // content-width + 2(gap) + 2(15rem) + 2(scrollbar buffer)
+    $sidenote-breakpoint: 89.5rem;
+
+    // this has to be global because otherwise we can't target the body
     :global(body) {
         counter-reset: sidenote;
     }
@@ -7,124 +11,133 @@
     .counter {
         counter-increment: sidenote;
         color: #444;
-        margin-left: 0.05rem;
+        margin-left: 0.065rem;
-    }
 
-    .counter:after {
+        &::after {
             font-size: 0.75em;
             position: relative;
-        bottom: 0.3rem;
+            bottom: 0.375rem;
-        color: #8c0606;
+            color: var(--accent-color);
+            content: counter(sidenote);
         }
 
-    .sidenote {
+        @media(max-width: $sidenote-breakpoint) {
-        color: #555;
+            &::after {
-        font-size: 0.8rem;
+                content: "[" counter(sidenote) "]";
             }
 
-    .sidenote:before {
+            &:hover::after {
-        content: var(--sidenote-index, counter(sidenote)) " ";
+                color: var(--content-color);
-        /* absolute positioning puts it at the top-left corner of the sidenote, overlapping with the content
+                cursor: pointer;
-        (because the sidenote is floated it counts as a positioned parent, I think) */
+            }
-        position: absolute;
+        }
-        /* translate moves it out to the left (and just a touch up to mimic the superscript efect)
-        -100% refers to the width of the element, so it pushes it out further if necessary (i.e. two digits instead of one) */
-        transform: translate(calc(-100% - 0.2rem), -0.15rem);
-        font-size: 0.75rem;
-        color: #8c0606;
     }
 
+    // hidden checkbox that tracks the state of the mobile sidenote
     .sidenote-toggle {
         display: none;
     }
 
-    /* desktop display */
-    @media(min-width: 70em) {
-        .counter:after {
-            content: counter(sidenote);
-        }
-
     .sidenote {
-            --gap: 2rem;
+        // anchor the counter, which is absolutely positioned
-            --sidenote-width: min(16rem, calc(50vw - var(--gap) - 1rem - var(--content-width) / 2));
-            width: var(--sidenote-width);
-            hyphens: auto;
         position: relative;
+        color: #555;
+        font-size: var(--content-size-sm);
+        hyphens: auto;
+
+        // desktop display, this can't coexist with mobile styling
+        @media(min-width: $sidenote-breakpoint) {
+            // max sidenote width is 20rem, if the window is too small then it's
+            // the width of the gutter, minus the gap between sidenote and gutter,
+            // minus an extra 1.5rem to account for the scrollbar on the right 
+            --gap: 2.5rem;
+            --gutter-width: calc(50vw - var(--content-width) / 2);
+            --sidenote-width: min(
+                24rem,
+                calc(var(--gutter-width) - var(--gap) - 1.5rem)
+            );
+            width: var(--sidenote-width);
             float: right;
             clear: right;
-            margin-right: calc(0rem - var(--sidenote-width) - var(--gap)); /* gives us 2rem of space between content and sidenote */
+            margin-right: calc(-1 * var(--sidenote-width) - var(--gap));
-            margin-bottom: 0.7rem;
+            margin-bottom: 0.75rem;
         }
 
-        /* fade-in animation */
+        @media(max-width: $sidenote-breakpoint) { 
-        .sidenote {
+            position: fixed;
-            opacity: 0;
+            left: 0;
-            animation: fade-in 600ms ease-out;
+            right: 0;
-            animation-delay: 500ms;
+            bottom: 0;
-             animation-fill-mode: forwards; 
+            // since headings have relative position, any that come after
+            // the current sidenote in the DOM get stacked on top by default
+            z-index: 1;
+
+            // give us a horizontal buffer for the counter and dismiss button
+            --padding-x: calc(var(--content-padding) + 1.5rem);
+            padding: 1rem var(--padding-x);
+            background-color: white;
+            box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 -2px 12px -2px rgba(0, 0, 0, 0.1);
+
+            // show the sidenote only when the corresponding checkbox is checked
+            transform: translateY(calc(100% + 2rem));
+            transition: transform 100ms;
+            .sidenote-toggle:checked + & {
+                transform: translateY(0);
+            }
         }
-        @keyframes fade-in {
-            from {opacity: 0;}
-            to {opacity: 1;}
     }
 
+    .sidenote-content {
+        max-width: var(--content-width);
+        margin: 0 auto;
+
+        &::before {
+            position: absolute;
+            transform: translateX(calc(-100% - 0.4em));
+            content: counter(sidenote);
+            color: var(--accent-color);
+        }
+    }
+
+    .dismiss {
+        display: block;
+        width: max-content;
+        margin: 0.5rem auto 0;
+
+        border-radius: 100%;
+        background: white;
+        border: 1px solid hsl(0deg, 0%, 75%);
+        box-shadow: 1px 1px 4px -1px rgba(0, 0, 0, 0.1);
+        padding: 0.25rem;
+        color: hsl(0deg, 0%, 50%);
+
+        &:hover, &:active {
+            color: var(--accent-color);
+            border: 1px solid var(--accent-color);
+        }
+
+        display: none;
+        @media(max-width: $sidenote-breakpoint) {
+            display: block;
+        }
+
+        cursor: pointer;
+        & label {
+            cursor: pointer;
+        }
+
+        & svg {
+            height: 1.5rem;
+        }
+    }
+
+     // nesting still needs work
+    @media(min-width: $sidenote-breakpoint) {
         .nested.sidenote {
             margin-right: 0;
             margin-top: 0.7rem;
             margin-bottom: 0;
         }
-
-        .dismiss {
-            display: none;
-        }
-    }
-
-    /* mobile display */
-    @media (max-width: 70em) {
-        .counter:after {
-            content: "[" counter(sidenote) "]";
-        }
-
-        .counter:hover:after {
-            color: #000;
-            cursor: pointer;
-        }
-
-        .sidenote {
-            box-sizing: border-box;
-            position: fixed;
-            z-index: 1;
-            left: 0;
-            bottom: 0;
-            width: 100vw;
-            padding-top: 1rem;
-            padding-bottom: 1rem;
-            --pad: max(1rem, calc(50vw - var(--content-width) / 2));
-            padding-left: var(--pad);
-            padding-right: var(--pad);
-            background-color: #fff;
-            box-shadow: 0 -2px 4px -1px rgba(0, 0, 0, 0.06), 0 -2px 12px -2px rgba(0, 0, 0, 0.1);
-            display: none;
-        }
-
-        .sidenote-toggle:checked + .sidenote {
-            display: block;
-        }
-
-        .dismiss {
-            position: absolute;
-            right: 1.5rem;
-            top: -0.2rem;
-
-            font-size: 1.25rem;
-            color: #8c0606;
-            cursor: pointer;
-        }
-        .dismiss:hover {
-            transform: scale(1.1);
-            font-weight: 800;
-        }
-
     }
 </style>
 
@@ -167,7 +180,17 @@
 
 <label for={id} on:click={toggleState} class="counter"></label>
 <input {id} bind:this={toggle} type="checkbox" class="sidenote-toggle" />
-<span class="sidenote" class:nested bind:this={noteBody}>
+<!-- outer element so that on mobile it can extend the whole width of the viewport -->
-    <label class="dismiss" for={id} on:click={toggleState}>&times;</label>
+<div class="sidenote" class:nested bind:this={noteBody}>
+    <!-- inner element so that content can be centered -->
+    <div class="sidenote-content">
         <slot></slot>
-</span>
+        <button class="dismiss" on:click={toggleState}>
+            <label for={id}>
+                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-6 h-6">
+                  <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+                </svg>
+            </label>
+        </button>
+    </div>
+</div>

src/lib/Toc.svelte

@@ -26,6 +26,21 @@
         }
     }
 
+    function ellipsize(text) {
+        return text;
+
+        // not sure about this, decide on it later
+        // if (text.length > 40) {
+        //     text = text.slice(0, 40);
+        //     // looks weird when we have an ellipsis following a space
+        //     if (text.slice(-1) === ' ') {
+        //         text = text.slice(0, -1);
+        //     }
+        //     return text + '…';
+        // }
+        // return text;
+    }
+
     onMount (() => {
         // These shouldn't change over the life of the page, so we can cache them
         headings = Array.from(document.querySelectorAll('h2[id], h3[id]'));
@@ -35,33 +50,26 @@
 
 <svelte:window on:scroll={setCurrentHeading} />
 
-<style>
+<style lang="scss">
     #toc {
-        display: none;
         position: sticky;
         top: 1.5rem;
         margin-left: 1rem;
-        margin-right: 2rem;
+        margin-right: 2.5rem;
 
-        max-width: 14rem;
+        max-width: 18rem;
         color: var(--content-color-faded);
-        opacity: 0;
+
-        animation: fade-in 600ms ease-out;
+        // minimum desirable TOC width is 8rem
-        animation-delay: 500ms;
+        // add 3rem for margins, giving total gutter width of 11.5rem
-        animation-fill-mode: forwards;
+        // multiply by 2 since there are two equally-sized gutters, then add content-width (52.5rem)
+        @media(max-width: 75.5rem) {
+            display: none;
+        }
     }
 
-    @media(min-width: 1300px) {
+    // margin-left is to match the padding on the top-level list items,
-        #toc { display: block }
+    // but here it needs to be margin so that the border is also shifted 
-    }
-
-    @keyframes fade-in {
-        from {opacity: 0}
-        to {opacity: 1}
-    }
-
-    /* margin-left is to match the padding on the top-level list items,
-    but here it needs to be margin so that the border is also shifted */
     h5 {
         font-variant: petite-caps;
         font-weight: 500;
@@ -72,7 +80,7 @@
 
         padding-bottom: 0.25em;
         border-bottom: 1px solid currentcolor;
-        /* make the border stretch beyond the text just a bit, because I like the effect */
+        // make the border stretch beyond the text just a bit, because I like the effect 
         padding-right: 1.5rem;
     }
 
@@ -84,42 +92,51 @@
 
     li {
         position: relative;
-        font-size: 0.9rem;
+        margin-top: 0.45em;
-    }
+        font-size: var(--content-size-sm);
-    li.depth-2 {
+        // make sure that one item wrapped across multiple lines doesn't just looke like multiple items
+        line-height: 1.1;
+
+        &.depth-2 {
             align-items: stretch;
             margin-bottom: 0.2rem;
         }
-    li.depth-3 {
+
+        &.depth-3 {
             align-items: center;
             margin-bottom: 0.05rem;
         }
 
+        &.current, &:hover {
+            color: var(--content-color);
+        }   
+    }
+
     .marker {
         position: absolute;
         left: -0.6rem;
+
+        .current &, li:hover & {
+            background-color: var(--accent-color);
         }
-    .bar {
+
-        width: 0.1rem;
+        &.bar {
+            width: 0.125rem;
             height: 100%;
         }
-    .dot {
+
-        width: 0.15rem;
+        &.dot {
-        height: 0.15rem;
+            width: 0.2rem;
+            height: 0.2rem;
             border-radius: 50%;
-        /* vertically center within its containing block */
+            // vertically center within its containing block 
             top: 0;
             bottom: 0;
             margin: auto 0;
         }
-
-    li.current, li:hover {
-        color: var(--content-color);
-    }
-    .current .marker, li:hover .marker {
-        background-color: var(--accent-color);
     }
 
+    // default link styling messes everything up again
     a {
         color: inherit;
         text-decoration: none;
@@ -136,12 +153,12 @@
             {#if item.depth === 2}
                 <li class="depth-2" class:current={item.slug === currentHeadingSlug} style:align-items="stretch">
                     <span class="marker bar"></span>
-                    <a href="#{item.slug}">{item.text}</a>
+                    <a href="#{item.slug}">{ellipsize(item.text)}</a>
                 </li>
             {:else if item.depth === 3}
                 <li class="depth-3" class:current={item.slug === currentSubheadingSlug} style:align-items="center" style:margin-left="0.75em">
                     <span class="marker dot"></span>
-                    <a href="#{item.slug}">{item.text}</a>
+                    <a href="#{item.slug}">{ellipsize(item.text)}</a>
                 </li>
             {/if}
         {/each}

src/plugins/rehype.js

@@ -3,10 +3,11 @@ import { find } from 'unist-util-find';
 import { toText } from 'hast-util-to-text';
 import { makeSlug } from '../lib/utils.js';
 
+import {writeFileSync} from 'node:fs';
+import {toHtml} from 'hast-util-to-html';
+
 
 export function localRehype() {
-    let printed = false;
-
     return (tree, vfile) => {
         const needsDropcap = vfile.data.fm.dropcap !== false
         let dropcapAdded = false;

src/routes/+layout.svelte

@@ -1,26 +1,29 @@
-<style>
+<style lang="scss">
     .header {
-        background-color: #4f5f68;
+        background: hsl(202deg 14% 36%);
     }
 
     nav {
         max-width: 30rem;
         margin: 0 auto;
-        display: flex;
-        justify-content: space-around;
-    }
 
-    nav a {
+        display: flex;
+        justify-content: space-between;
+
+        & a {
+            flex: 1;
+            max-width: 8rem;
+            padding: 0.25rem 1rem;
+
+            font-size: 1.75rem;
             color: white;
-        width: 8rem;
-        min-width: 6rem;
-        font-size: 1.5rem;
             text-decoration: none;
             text-align: center;
-        padding: 0.25rem 0;
+
+            &:hover {
+                background: hsl(0deg 0% 0% / 10%);
+            }
         }
-    nav a:hover {
-        background-color: #00000025;
     }
 </style>
 

src/routes/_posts/the-enduring-shell.svx

@@ -20,4 +20,4 @@ A lot of time has passed since then, and now I can easily imagine situations whe
 
 ## CLI apps are easier to write
 
-
+blah blah words here

src/routes/about/+page.svelte

@@ -1,3 +1,7 @@
+<script>
+    import '$styles/prose.scss';
+</script>
+
 <style>
     .content {
         max-width: var(--content-width);
@@ -10,7 +14,7 @@
 </svelte:head>
 
 
-<div class="content">
+<div class="prose content">
     <h1>About Me</h1>
 
     <p>(Joe's wife wrote this because Joe feels weird writing about himself.)</p>

src/routes/posts/+page.svelte

@@ -1,63 +1,73 @@
 <script>
+    import '$styles/prose.scss'; 
+
     import { formatDate } from '$lib/datefmt.js';
     import { postData } from '../_posts/all.js';
 </script>
 
-<style>
+<style lang="scss">
-    #posts {
+    .wrapper {
-        /*text-align:  center;*/
+        padding: 0 var(--content-padding);
+    }
+
+    .posts {
         max-width:  var(--content-width);
         margin:  0 auto;
     }
 
     hr {
-        margin: 2rem 0;
+        margin: 2.5rem 0;
         border-color: #eee;
     }
 
     .post-date {
-        color: #808080;
+        color: var(--content-color-faded);
     }
 
     .draft-notice {
-        vertical-align: 0.3rem;
+        vertical-align: middle;
-        font-size: 0.6rem;
+        font-size: 0.75rem;
         padding: 0 0.3rem;
         color: #e00;
         background-color: #ffd9d9;
         border: 1px solid red;
         border-radius: 20% / 50%;
-        margin: 0 0.2rem;
     }
 
     .post-link {
         text-decoration: none;
-    }
+
-    .post-link:hover {
+        &:hover {
             text-decoration: underline;
         }
+    }
 
     h2 {
-        font-size: 1.25rem;
+        display: flex;
+        align-items: center;
+        gap: 0.75rem;
         margin-top: 0.5rem;
         margin-bottom: 0.75rem;
-    }
+        font-size: 1.5rem;
 
-    h2 a {
+        & a {
             color: currentcolor;
         }
+    }
+
 </style>
 
 <svelte:head>
     <title>Posts</title>
 </svelte:head>
 
-<div id="posts">
+<div class="wrapper">
+    <div class="posts prose">
         <h1 style:text-align="center">All Posts</h1>
         {#each postData as post, idx}
             <div class="post">
                 <div class="post-date">{new Date(post.date).toISOString().split('T')[0]}</div>
-            <h2>
+                <h2 class="prose">
                     <a data-sveltekit-preload-data="hover" class="post-link" href="/{post.slug}">
                         {post.title}
                     </a>
@@ -73,3 +83,4 @@
             {/if}
         {/each}
     </div>
+</div>

src/styles/code.scss

@@ -17,6 +17,10 @@ code {
     font-family: 'Hack', monospace;
 }
 
+pre[class*="language-"] {
+    line-height: 1.25;
+}
+
 pre > code[class*="language-"] {
     font-size: 0.75em;
     font-family: 'Hack', monospace;

src/styles/main.scss

@@ -11,8 +11,10 @@
 
 :root {
     --content-size: 1.25rem;
-    --content-line-height: 1.3;
+    --content-size-sm: 1rem;
+    // --content-line-height: 1.3;
     --content-width: 52.5rem;
+    --content-padding: 0.65rem;
     --content-color: #1e1e1e;
     --content-color-faded: #555;
     --accent-color: hsl(0deg, 92%, 29%);
@@ -21,7 +23,7 @@
 body {
     font-family: 'Tajawal', sans-serif;
     font-size: var(--content-size);
-    line-height: var(--content-line-height);
+    // line-height: var(--content-line-height);
     letter-spacing: -0.005em;
     color: var(--content-color);
 }

src/styles/prose.scss

@@ -1,11 +1,4 @@
-@font-face {
+.prose {
-    font-family: 'Baskerville';
-    font-style: normal;
-    font-weight: 400;
-    src: url(/Baskerville-Regular.woff2) format('woff2');
-    font-display: block;
-}
-
     h1, h2, h3, h4, h5, h6 {
         font-family: -apple-system, system-ui, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Ubuntu, Arial, sans-serif;
         font-weight: 600;
@@ -37,3 +30,4 @@ h1, h2, h3, h4 {
     p {
         margin-bottom: 0.8em;
     }
+}

svelte.config.js

@@ -1,6 +1,7 @@
 import { resolve } from 'node:path';
 
 import staticAdapter from '@sveltejs/adapter-static';
+import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
 import { mdsvex } from 'mdsvex';
 
 import { localRemark } from './src/plugins/remark.js';
@@ -15,6 +16,7 @@ const config = {
             remarkPlugins: [localRemark],
             rehypePlugins: [localRehype],
         }),
+        vitePreprocess(),
     ],
     kit: {
         // adapter-auto only supports some environments, see https://kit.svelte.dev/docs/adapter-auto for a list.