vowel 0.1.27 → 0.1.29

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "vowel",
-	"version": "0.1.27",
+	"version": "0.1.29",
 	"bin": "./bin.js",
 	"scripts": {
 		"dev": "vite dev",
@@ -16,8 +16,8 @@
 		"@picocss/pico": "^1.5.10",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"@sveltejs/kit": "^2.5.6",
-		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.3",
+		"@sveltejs/kit": "^2.5.28",
+		"@sveltejs/vite-plugin-svelte": "^4.0.0-next.7",
 		"any-date-parser": "^1.5.4",
 		"change-case": "^5.4.1",
 		"filter-console": "^1.0.0",
@@ -40,7 +40,7 @@
 		"remark-parse": "^11.0.0",
 		"remark-rehype": "^11.1.0",
 		"spectre.css": "^0.5.9",
-		"svelte": "^5.0.0-next.121",
+		"svelte": "^5.0.0-next.251",
 		"typescript": "^5.0.0",
 		"unified": "^11.0.4",
 		"url-metadata": "^3.4.9",

package/src/lib/components/DefaultStyles.css

@@ -0,0 +1,333 @@
+/*
+			Inspiration for this stylesheet comes from Normalize.css, Josh Comeau,
+			Barebones, Basic.css, Pico, Typeplate, Simple.css, and more
+		*/
+
+:root {
+	--text-color: hsl(0, 0%, 13%);
+	--accent-color: hsl(215, 100%, 35%);
+	--accent-color-hover: hsl(215, 76%, 49%);
+	--border-color: hsl(0, 0%, 73%);
+	--main-background: hsl(0, 0%, 100%);
+	--code-background: hsl(0, 0%, 95%);
+	/* --soft-background: hsl(0, 0%, 95%); */
+	--soft-background: #00000005;
+}
+
+@media (prefers-color-scheme: dark) {
+	:root {
+		--text-color: hsl(0, 0%, 80%);
+		--accent-color: hsl(194, 76%, 49%);
+		--accent-color-hover: hsl(194, 86%, 57%);
+		--border-color: hsl(0, 0%, 27%);
+		--main-background: hsl(0, 0%, 12%);
+		--code-background: hsl(0, 0%, 5%);
+		/* --soft-background: hsl(0, 0%, 14%); */
+		--soft-background: #ffffff07;
+	}
+}
+
+/* Layout */
+
+.page {
+	font-family: var(--font-sans);
+	max-width: 60ch;
+	margin: auto;
+	display: flex;
+	flex-direction: column;
+	padding: 1rem;
+}
+
+main,
+article.thumbnail {
+	margin-bottom: auto;
+	padding-bottom: 4rem;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	align-items: baseline;
+	column-gap: 0.5rem;
+}
+
+:is(main, article.thumbnail)>* {
+	flex-basis: 100%;
+}
+
+:is(main, article.thumbnail) :is(time, dl:not(.link)) {
+	flex-basis: 0;
+	display: inline !important;
+	font-size: 0.9em;
+	opacity: 0.8;
+}
+
+dt {
+	display: none;
+}
+
+dd {
+	display: inline;
+}
+
+.page>main> :first-child {
+	margin-top: 2.5rem;
+}
+
+/* Colors */
+
+body {
+	color: var(--text-color);
+	background: var(--main-background);
+}
+
+a {
+	color: var(--accent-color);
+}
+
+a:hover {
+	color: var(--accent-color-hover);
+}
+
+code,
+pre {
+	background: var(--code-background);
+}
+
+blockquote {
+	border-left: 5px solid var(--border-color);
+}
+
+article {
+	border: 1px solid var(--border-color);
+	background: var(--soft-background);
+	padding: 1.8rem 2rem 1.5rem;
+	border-radius: 0.5rem;
+	display: flex;
+	flex-direction: column;
+}
+
+th,
+td {
+	border-bottom: 1px solid var(--border-color-softer);
+}
+
+hr {
+	border-top: 1px solid var(--text-color);
+}
+
+/* Frontmatter */
+
+main>img {
+	margin-bottom: 2.5rem;
+}
+
+dt {
+	font-size: 1.1em;
+}
+
+dl.link dt {
+	display: none;
+}
+
+dl.link {
+	order: calc(Infinity);
+	margin-top: 2.5rem;
+	margin-bottom: 0;
+}
+
+dl.tags,
+time {
+	font-size: 1.1em;
+}
+
+dl.tags dt {
+	display: none;
+}
+
+dl.tags :is(dd, ul, li) {
+	padding-inline: 0;
+	display: inline;
+}
+
+dl.tags li {
+	margin-inline: 0.2em;
+}
+
+dl.tags li:before {
+	content: '#';
+}
+
+dl.contents ul {
+	list-style: none;
+	padding: 0;
+}
+
+dl.contents .depth-2 {
+	font-weight: 500;
+}
+
+dl.contents .depth-3 {
+	font-size: 0.95em;
+	padding-left: 0.5em;
+}
+
+/* Header */
+
+header {
+	margin-top: 4rem;
+}
+
+nav.top-bar {
+	border: 1px solid var(--border-color);
+	padding: 6px 10px;
+	margin-inline: -3px;
+	border-radius: 5px;
+	display: flex;
+	column-gap: 2rem;
+	row-gap: 0.5rem;
+	flex-wrap: wrap;
+	justify-content: flex-start;
+	background: var(--soft-background);
+}
+
+nav.top-bar:has(+ nav.top-bar) {
+	border-bottom: none;
+	border-bottom-left-radius: 0;
+	border-bottom-right-radius: 0;
+}
+
+nav.top-bar:has(+ nav.top-bar):after {
+	display: block;
+	content: '';
+	border-bottom: 1px solid var(--border-color);
+	flex-basis: 100%;
+	margin-top: 0.7rem;
+}
+
+nav.top-bar+nav.top-bar {
+	border-top-left-radius: 0;
+	border-top-right-radius: 0;
+	border-top: none;
+	margin-top: 0;
+}
+
+header .breadcrumbs>a:only-child {
+	display: none;
+}
+
+header .breadcrumbs {
+	margin-block: 4rem 1rem;
+}
+
+/* Sidebar */
+
+.sidebar {
+	margin-inline: auto;
+}
+
+/* Footer */
+
+footer {
+	text-align: center;
+	margin-block: 6rem 8rem;
+}
+
+/* Pages */
+
+.page.home>main>h1 {
+	display: none;
+}
+
+.page.home>.content>p:first-child {
+	font-size: 1.2em;
+}
+
+section[class*='$'] {
+	display: grid;
+	grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
+	grid-auto-rows: auto;
+	grid-gap: 2rem;
+
+	& article {
+		margin: 0;
+	}
+}
+
+article.item {
+	display: grid;
+	flex-direction: column;
+	grid-template-areas:
+		'title icon'
+		'description description';
+	align-content: start;
+}
+
+article.item h1 {
+	grid-area: title;
+	font-size: 1.6rem;
+}
+
+article.item dl.icon {
+	grid-area: icon;
+	font-size: 1.5em;
+}
+
+article.item dl.icon dd {
+	text-align: right;
+}
+
+article.item .description {
+	grid-area: description;
+}
+
+article.item dt {
+	display: none;
+}
+
+article.item dl.icon {
+	order: -1;
+}
+
+aside.note {
+	&.note {
+		--icon: 'ℹ️';
+		--rgb: 71, 139, 230;
+	}
+
+	&.tip {
+		--icon: '💡';
+		--rgb: 87, 171, 90;
+	}
+
+	&.important {
+		--icon: '💬';
+		--rgb: 152, 110, 226;
+	}
+
+	&.warning {
+		--icon: '⚠️';
+		--rgb: 198, 144, 38;
+	}
+
+	&.caution {
+		--icon: '⛔️';
+		--rgb: 229, 83, 75;
+	}
+
+	border-left: 3px solid rgb(var(--rgb));
+	padding: 1.5rem 2rem;
+	background: rgba(var(--rgb), 0.04);
+
+	h2 {
+		color: rgb(var(--rgb));
+	}
+
+	h2:before {
+		font-size: 0.8em;
+		margin-right: 0.7rem;
+		opacity: 0.9;
+	}
+
+	h2:before {
+		content: var(--icon);
+	}
+}

package/src/lib/components/DefaultStyles.svelte

@@ -1,337 +1,11 @@
 <script>
+	import styles from './DefaultStyles.css?inline';
+
 	import { TypographyStyles } from '.';
 </script>
 
 <TypographyStyles />
-<svelte:head>
-	<style>
-		/*
-			Inspiration for this stylesheet comes from Normalize.css, Josh Comeau,
-			Barebones, Basic.css, Pico, Typeplate, Simple.css, and more
-		*/
-
-		:root {
-			--text-color: hsl(0, 0%, 13%);
-			--accent-color: hsl(215, 100%, 35%);
-			--accent-color-hover: hsl(215, 76%, 49%);
-			--border-color: hsl(0, 0%, 73%);
-			--main-background: hsl(0, 0%, 100%);
-			--code-background: hsl(0, 0%, 95%);
-			/* --soft-background: hsl(0, 0%, 95%); */
-			--soft-background: #00000005;
-		}
-
-		@media (prefers-color-scheme: dark) {
-			:root {
-				--text-color: hsl(0, 0%, 80%);
-				--accent-color: hsl(194, 76%, 49%);
-				--accent-color-hover: hsl(194, 86%, 57%);
-				--border-color: hsl(0, 0%, 27%);
-				--main-background: hsl(0, 0%, 12%);
-				--code-background: hsl(0, 0%, 5%);
-				/* --soft-background: hsl(0, 0%, 14%); */
-				--soft-background: #ffffff07;
-			}
-		}
-
-		/* Layout */
-
-		.page {
-			font-family: var(--font-sans);
-			max-width: 60ch;
-			margin: auto;
-			display: flex;
-			flex-direction: column;
-			padding: 1rem;
-		}
-
-		main, article.thumbnail {
-			margin-bottom: auto;
-			padding-bottom: 4rem;
-			display: flex;
-			flex-direction: row;
-			flex-wrap: wrap;
-			align-items: baseline;
-			column-gap: 0.5rem;
-		}
-
-		:is(main, article.thumbnail) > * {
-			flex-basis: 100%;
-		}
-
-		:is(main, article.thumbnail) :is(time, dl:not(.link)) {
-			flex-basis: 0;
-			display: inline !important;
-			font-size: 0.9em;
-			opacity: 0.8;
-		}
-
-		dt {
-			display: none;
-		}
-
-		dd {
-			display: inline;
-		}
-
-		.page > main > :first-child {
-			margin-top: 2.5rem;
-		}
-
-		/* Colors */
-
-		body {
-			color: var(--text-color);
-			background: var(--main-background);
-		}
-
-		a {
-			color: var(--accent-color);
-		}
-
-		a:hover {
-			color: var(--accent-color-hover);
-		}
-
-		code,
-		pre {
-			background: var(--code-background);
-		}
-
-		blockquote {
-			border-left: 5px solid var(--border-color);
-		}
-
-		article {
-			border: 1px solid var(--border-color);
-			background: var(--soft-background);
-			padding: 1.8rem 2rem 1.5rem;
-			border-radius: 0.5rem;
-			display: flex;
-			flex-direction: column;
-		}
-
-		th,
-		td {
-			border-bottom: 1px solid var(--border-color-softer);
-		}
-
-		hr {
-			border-top: 1px solid var(--text-color);
-		}
-
-		/* Frontmatter */
-
-		main > img {
-			margin-bottom: 2.5rem;
-		}
-
-		dt {
-			font-size: 1.1em;
-		}
-
-		dl.link dt {
-			display: none;
-		}
-
-		dl.link {
-			order: calc(Infinity);
-			margin-top: 2.5rem;
-			margin-bottom: 0;
-		}
-
-		dl.tags,
-		time {
-			font-size: 1.1em;
-		}
-
-		dl.tags dt {
-			display: none;
-		}
-
-		dl.tags :is(dd, ul, li) {
-			padding-inline: 0;
-			display: inline;
-		}
-
-		dl.tags li {
-			margin-inline: 0.2em;
-		}
-
-		dl.tags li:before {
-			content: '#';
-		}
-
-		dl.contents ul {
-			list-style: none;
-			padding: 0;
-		}
 
-		dl.contents .depth-2 {
-			font-weight: 500;
-		}
-
-		dl.contents .depth-3 {
-			font-size: 0.95em;
-			padding-left: 0.5em;
-		}
-
-		/* Header */
-
-		header {
-			margin-top: 4rem;
-		}
-
-		nav.top-bar {
-			border: 1px solid var(--border-color);
-			padding: 6px 10px;
-			margin-inline: -3px;
-			border-radius: 5px;
-			display: flex;
-			column-gap: 2rem;
-			row-gap: 0.5rem;
-			flex-wrap: wrap;
-			justify-content: flex-start;
-			background: var(--soft-background);
-		}
-
-		nav.top-bar:has(+ nav.top-bar) {
-			border-bottom: none;
-			border-bottom-left-radius: 0;
-			border-bottom-right-radius: 0;
-		}
-
-		nav.top-bar:has(+ nav.top-bar):after {
-			display: block;
-			content: '';
-			border-bottom: 1px solid var(--border-color);
-			flex-basis: 100%;
-			margin-top: 0.7rem;
-		}
-
-		nav.top-bar + nav.top-bar {
-			border-top-left-radius: 0;
-			border-top-right-radius: 0;
-			border-top: none;
-			margin-top: 0;
-		}
-
-		header .breadcrumbs > a:only-child {
-			display: none;
-		}
-
-		header .breadcrumbs {
-			margin-block: 4rem 1rem;
-		}
-
-		/* Sidebar */
-
-		.sidebar {
-			margin-inline: auto;
-		}
-
-		/* Footer */
-
-		footer {
-			text-align: center;
-			margin-block: 6rem 8rem;
-		}
-
-		/* Pages */
-
-		.page.home > main > h1 {
-			display: none;
-		}
-
-		.page.home > .content > p:first-child {
-			font-size: 1.2em;
-		}
-
-		section[class*='$'] {
-			display: grid;
-			grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
-			grid-auto-rows: auto;
-			grid-gap: 2rem;
-
-			& article {
-				margin: 0;
-			}
-		}
-
-		article.item {
-			display: grid;
-			flex-direction: column;
-			grid-template-areas:
-				'title icon'
-				'description description';
-			align-content: start;
-		}
-
-		article.item h1 {
-			grid-area: title;
-			font-size: 1.6rem;
-		}
-
-		article.item dl.icon {
-			grid-area: icon;
-			font-size: 1.5em;
-		}
-
-		article.item dl.icon dd {
-			text-align: right;
-		}
-
-		article.item .description {
-			grid-area: description;
-		}
-
-		article.item dt {
-			display: none;
-		}
-
-		article.item dl.icon {
-			order: -1;
-		}
-
-		aside.note {
-			&.note {
-				--icon: 'ℹ️';
-				--rgb: 71, 139, 230;
-			}
-			&.tip {
-				--icon: '💡';
-				--rgb: 87, 171, 90;
-			}
-			&.important {
-				--icon: '💬';
-				--rgb: 152, 110, 226;
-			}
-			&.warning {
-				--icon: '⚠️';
-				--rgb: 198, 144, 38;
-			}
-			&.caution {
-				--icon: '⛔️';
-				--rgb: 229, 83, 75;
-			}
-
-			border-left: 3px solid rgb(var(--rgb));
-			padding: 1.5rem 2rem;
-			background: rgba(var(--rgb), 0.04);
-
-			h2 {
-				color: rgb(var(--rgb));
-			}
-
-			h2:before {
-				font-size: 0.8em;
-				margin-right: 0.7rem;
-				opacity: 0.9;
-			}
-
-			h2:before {
-				content: var(--icon);
-			}
-		}
-	</style>
+<svelte:head>
+	{@html `<style>${styles}</style>`}
 </svelte:head>

package/src/lib/components/ResetStyles.css

@@ -0,0 +1,124 @@
+html {
+	-webkit-text-size-adjust: 100%;
+	margin: 0;
+	font-size: 62.5%;
+}
+
+body {
+	font-size: 1.6rem;
+	line-height: 1.5;
+	-webkit-font-smoothing: antialiased;
+	font-weight: 400;
+	margin: 0;
+}
+
+.container {
+	height: 100vh;
+	overflow-y: scroll;
+}
+
+.page {
+	min-height: 100vh;
+	overflow-x: hidden;
+}
+
+*,
+*::before,
+*::after {
+	box-sizing: border-box;
+}
+
+* {
+	margin: 0;
+}
+
+img,
+details,
+picture,
+video,
+canvas,
+svg,
+object {
+	display: block;
+	max-width: 100%;
+}
+
+summary {
+	display: list-item;
+}
+
+hr {
+	box-sizing: content-box;
+	height: 0;
+	overflow: visible;
+}
+
+pre {
+	font-family: monospace, monospace;
+	font-size: 1em;
+}
+
+a {
+	background-color: transparent;
+}
+
+abbr[title] {
+	border-bottom: none;
+	text-decoration: underline;
+	text-decoration: underline dotted;
+}
+
+b,
+strong {
+	font-weight: bolder;
+}
+
+code,
+kbd,
+samp {
+	font-family: monospace, monospace;
+	font-size: 1em;
+}
+
+small {
+	font-size: 80%;
+}
+
+sub,
+sup {
+	font-size: 75%;
+	line-height: 0;
+	position: relative;
+	vertical-align: baseline;
+}
+
+sub {
+	bottom: -0.25em;
+}
+
+sup {
+	top: -0.5em;
+}
+
+img {
+	border-style: none;
+	height: auto;
+	border-radius: 5px;
+	overflow: hidden;
+}
+
+p,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	overflow-wrap: break-word;
+}
+
+code,
+mark {
+	-webkit-box-decoration-break: clone;
+	box-decoration-break: clone;
+}

package/src/lib/components/ResetStyles.svelte

@@ -1,128 +1,7 @@
-<svelte:head>
-	<style>
-		html {
-			-webkit-text-size-adjust: 100%;
-			margin: 0;
-			font-size: 62.5%;
-		}
-
-		body {
-			font-size: 1.6rem;
-			line-height: 1.5;
-			-webkit-font-smoothing: antialiased;
-			font-weight: 400;
-			margin: 0;
-		}
-
-		.container {
-			height: 100vh;
-			overflow-y: scroll;
-		}
-
-		.page {
-			min-height: 100vh;
-			overflow-x: hidden;
-		}
-
-		*,
-		*::before,
-		*::after {
-			box-sizing: border-box;
-		}
-
-		* {
-			margin: 0;
-		}
-
-		img,
-		details,
-		picture,
-		video,
-		canvas,
-		svg,
-		object {
-			display: block;
-			max-width: 100%;
-		}
-
-		summary {
-			display: list-item;
-		}
-
-		hr {
-			box-sizing: content-box;
-			height: 0;
-			overflow: visible;
-		}
-
-		pre {
-			font-family: monospace, monospace;
-			font-size: 1em;
-		}
-
-		a {
-			background-color: transparent;
-		}
+<script>
+	import styles from './ResetStyles.css?inline';
+</script>
 
-		abbr[title] {
-			border-bottom: none;
-			text-decoration: underline;
-			text-decoration: underline dotted;
-		}
-
-		b,
-		strong {
-			font-weight: bolder;
-		}
-
-		code,
-		kbd,
-		samp {
-			font-family: monospace, monospace;
-			font-size: 1em;
-		}
-
-		small {
-			font-size: 80%;
-		}
-
-		sub,
-		sup {
-			font-size: 75%;
-			line-height: 0;
-			position: relative;
-			vertical-align: baseline;
-		}
-
-		sub {
-			bottom: -0.25em;
-		}
-
-		sup {
-			top: -0.5em;
-		}
-
-		img {
-			border-style: none;
-			height: auto;
-			border-radius: 5px;
-			overflow: hidden;
-		}
-
-		p,
-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
-			overflow-wrap: break-word;
-		}
-
-		code,
-		mark {
-			-webkit-box-decoration-break: clone;
-			box-decoration-break: clone;
-		}
-	</style>
+<svelte:head>
+  {@html `<style>${styles}</style>`}
 </svelte:head>

package/src/lib/components/TypographyStyles.css

@@ -0,0 +1,254 @@
+html {
+	font-family:
+		-apple-system,
+		BlinkMacSystemFont,
+		avenir next,
+		avenir,
+		segoe ui,
+		helvetica neue,
+		helvetica,
+		Cantarell,
+		Ubuntu,
+		roboto,
+		noto,
+		arial,
+		sans-serif;
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+	margin-top: 0.5rem;
+	margin-bottom: 1rem;
+	text-rendering: optimizeLegibility;
+	font-weight: 600;
+	line-height: 1.1;
+}
+
+h1 {
+	font-size: 3rem;
+	line-height: 1.2;
+	font-weight: 800;
+}
+
+h2 {
+	font-size: 2.6rem;
+	margin-top: 3rem;
+}
+
+h3 {
+	font-size: 2rem;
+	margin-top: 3rem;
+}
+
+h4 {
+	font-size: 1.44rem;
+}
+
+h5 {
+	font-size: 1.15rem;
+}
+
+h6 {
+	font-size: 0.96rem;
+}
+
+article h1 {
+	font-weight: 600;
+	font-size: 2rem;
+}
+
+@media only screen and (max-width: 720px) {
+	h1 {
+		font-size: 2.5rem;
+	}
+
+	h2 {
+		font-size: 2.1rem;
+	}
+
+	h3 {
+		font-size: 1.75rem;
+	}
+
+	h4 {
+		font-size: 1.25rem;
+	}
+}
+
+p {
+	margin-top: 0;
+}
+
+ol,
+ul {
+	/* padding-left: 0; */
+	margin-top: 0;
+}
+
+ul ul,
+ul ol,
+ol ol,
+ol ul {
+	font-size: 100%;
+	/* margin: 1rem 0 1rem 3rem; */
+}
+
+li {
+	margin-bottom: 0.5rem;
+}
+
+/* Extra selector for specificity, see below */
+li>p:not(:last-child) {
+	margin: 0;
+	padding: 0;
+}
+
+pre,
+code {
+	font-family:
+		Menlo,
+		Consolas,
+		Monaco,
+		Liberation Mono,
+		Lucida Console,
+		monospace;
+}
+
+code {
+	font-size: 0.9em;
+	margin-inline: 0px;
+	padding: 3px 4px;
+	border-radius: 5px;
+}
+
+pre {
+	padding: 1rem 1.5rem;
+	border-radius: 5px;
+	overflow-x: auto;
+}
+
+blockquote {
+	margin: 1.5em 0;
+	padding: 0 1.6em 0 1.6em;
+}
+
+a {
+	text-decoration: none;
+}
+
+li.checked,
+li.unchecked {
+	padding-left: 0.8rem;
+}
+
+figcaption {
+	margin-top: 0.5rem;
+	font-style: italic;
+}
+
+article+article {
+	margin-top: 1rem;
+}
+
+article a {
+	color: unset;
+}
+
+article a:hover {
+	color: unset;
+}
+
+article h2 {
+	margin-top: 2rem;
+}
+
+th,
+td {
+	padding: 12px 15px;
+	text-align: left;
+}
+
+th:first-child,
+td:first-child {
+	padding-left: 0;
+}
+
+th:last-child,
+td:last-child {
+	padding-right: 0;
+}
+
+:where(pre,
+	blockquote,
+	dl,
+	figure,
+	table,
+	p,
+	ul,
+	ol,
+	form,
+	article,
+	section,
+	aside,
+	time,
+	dl):not(:last-child) {
+	margin-bottom: 2.5rem;
+}
+
+hr {
+	margin-top: 3rem;
+	margin-bottom: 3.5rem;
+	border-width: 0px;
+}
+
+dt {
+	font-weight: 500;
+}
+
+time {
+	display: block;
+}
+
+time a {
+	color: unset;
+}
+
+.breadcrumbs a {
+	font-size: 0.9em;
+	color: unset;
+}
+
+.breadcrumbs .separator:after {
+	margin-inline: 0.2em;
+	content: '/';
+}
+
+nav>a {
+	text-wrap: nowrap;
+}
+
+header a.site-title {
+	color: unset;
+	font-weight: 900;
+	font-size: 2.8em;
+}
+
+header .slogan {
+	font-weight: 500;
+}
+
+nav a:where([aria-current='page'], [aria-current='true']),
+nav a:where([aria-current='page'], [aria-current='true']):hover {
+	text-decoration: none;
+	color: unset;
+	cursor: default;
+}
+
+aside h2 {
+	margin: 0 0 0.5em 0;
+	font-size: 1.1em;
+}

package/src/lib/components/TypographyStyles.svelte

@@ -1,265 +1,10 @@
 <script>
+	import styles from './TypographyStyles.css?inline';
 	import ResetStyles from './ResetStyles.svelte';
 </script>
 
 <ResetStyles />
 
 <svelte:head>
-	<style>
-		html {
-			font-family:
-				-apple-system,
-				BlinkMacSystemFont,
-				avenir next,
-				avenir,
-				segoe ui,
-				helvetica neue,
-				helvetica,
-				Cantarell,
-				Ubuntu,
-				roboto,
-				noto,
-				arial,
-				sans-serif;
-		}
-
-		h1,
-		h2,
-		h3,
-		h4,
-		h5,
-		h6 {
-			margin-top: 0.5rem;
-			margin-bottom: 1rem;
-			text-rendering: optimizeLegibility;
-			font-weight: 600;
-			line-height: 1.1;
-		}
-
-		h1 {
-			font-size: 3rem;
-			line-height: 1.2;
-			font-weight: 800;
-		}
-
-		h2 {
-			font-size: 2.6rem;
-			margin-top: 3rem;
-		}
-
-		h3 {
-			font-size: 2rem;
-			margin-top: 3rem;
-		}
-
-		h4 {
-			font-size: 1.44rem;
-		}
-
-		h5 {
-			font-size: 1.15rem;
-		}
-
-		h6 {
-			font-size: 0.96rem;
-		}
-
-		article h1 {
-			font-weight: 600;
-			font-size: 2rem;
-		}
-
-		@media only screen and (max-width: 720px) {
-			h1 {
-				font-size: 2.5rem;
-			}
-
-			h2 {
-				font-size: 2.1rem;
-			}
-
-			h3 {
-				font-size: 1.75rem;
-			}
-
-			h4 {
-				font-size: 1.25rem;
-			}
-		}
-
-		p {
-			margin-top: 0;
-		}
-
-		ol,
-		ul {
-			/* padding-left: 0; */
-			margin-top: 0;
-		}
-
-		ul ul,
-		ul ol,
-		ol ol,
-		ol ul {
-			font-size: 100%;
-			/* margin: 1rem 0 1rem 3rem; */
-		}
-
-		li {
-			margin-bottom: 0.5rem;
-		}
-
-		/* Extra selector for specificity, see below */
-		li > p:not(:last-child) {
-			margin: 0;
-			padding: 0;
-		}
-
-		pre,
-		code {
-			font-family:
-				Menlo,
-				Consolas,
-				Monaco,
-				Liberation Mono,
-				Lucida Console,
-				monospace;
-		}
-
-		code {
-			font-size: 0.9em;
-			margin-inline: 0px;
-			padding: 3px 4px;
-			border-radius: 5px;
-		}
-
-		pre {
-			padding: 1rem 1.5rem;
-			border-radius: 5px;
-			overflow-x: auto;
-		}
-
-		blockquote {
-			margin: 1.5em 0;
-			padding: 0 1.6em 0 1.6em;
-		}
-
-		a {
-			text-decoration: none;
-		}
-
-		li.checked,
-		li.unchecked {
-			padding-left: 0.8rem;
-		}
-
-		figcaption {
-			margin-top: 0.5rem;
-			font-style: italic;
-		}
-
-		article + article {
-			margin-top: 1rem;
-		}
-
-		article a {
-			color: unset;
-		}
-
-		article a:hover {
-			color: unset;
-		}
-
-		article h2 {
-			margin-top: 2rem;
-		}
-
-		th,
-		td {
-			padding: 12px 15px;
-			text-align: left;
-		}
-
-		th:first-child,
-		td:first-child {
-			padding-left: 0;
-		}
-		th:last-child,
-		td:last-child {
-			padding-right: 0;
-		}
-
-		:where(
-				pre,
-				blockquote,
-				dl,
-				figure,
-				table,
-				p,
-				ul,
-				ol,
-				form,
-				article,
-				section,
-				aside,
-				time,
-				dl
-			):not(:last-child) {
-			margin-bottom: 2.5rem;
-		}
-
-		hr {
-			margin-top: 3rem;
-			margin-bottom: 3.5rem;
-			border-width: 0px;
-		}
-
-		dt {
-			font-weight: 500;
-		}
-
-		time {
-			display: block;
-		}
-
-		time a {
-			color: unset;
-		}
-
-		.breadcrumbs a {
-			font-size: 0.9em;
-			color: unset;
-		}
-
-		.breadcrumbs .separator:after {
-			margin-inline: 0.2em;
-			content: '/';
-		}
-
-		nav > a {
-			text-wrap: nowrap;
-		}
-
-		header a.site-title {
-			color: unset;
-			font-weight: 900;
-			font-size: 2.8em;
-		}
-
-		header .slogan {
-			font-weight: 500;
-		}
-
-		nav a:where([aria-current='page'], [aria-current='true']),
-		nav a:where([aria-current='page'], [aria-current='true']):hover {
-			text-decoration: none;
-			color: unset;
-			cursor: default;
-		}
-
-		aside h2 {
-			margin: 0 0 0.5em 0;
-			font-size: 1.1em;
-		}
-	</style>
+  {@html `<style>${styles}</style>`}
 </svelte:head>