article styling

Author: andnorda

src/routes/blog/posts/layout.svelte

@@ -1,3 +1,8 @@
+<script module>
+	import table from "./table.svelte";
+	export { table };
+</script>
+
 <script lang="ts">
 	import type { Snippet } from "svelte";
 	import { format } from "date-fns";
@@ -27,12 +32,60 @@
 
 <style>
 	.article {
-		display: flex;
-		flex-direction: column;
-		gap: 2rem;
 		max-width: 67ch;
+		width: 100%;
 		font-size: 1.125rem;
 	}
+	.article :global(h1) {
+		margin-block: 0.67em;
+	}
+	.article :global(h2) {
+		margin-block: 0.83em;
+	}
+	.article :global(h3) {
+		margin-block: 1em;
+	}
+	.article :global(p) {
+		margin-block: 1em;
+	}
+	.article :global(ul),
+	.article :global(ol) {
+		margin-block: 1em;
+	}
+	.article :global(pre) {
+		overflow-x: auto;
+		padding: 0.5rem;
+	}
+	.article :global(blockquote) {
+		border-left: 0.5rem solid var(--color-primary);
+		padding: 1rem;
+		background-color: color-mix(in srgb, var(--color-primary) 10%, white);
+	}
+	.article :global(table) {
+		overflow-x: auto;
+		width: 100%;
+		max-width: 100%;
+		border-collapse: collapse;
+	}
+	.article :global(thead) {
+		display: table-header-group;
+		vertical-align: middle;
+	}
+	.article :global(tr) {
+		display: table-row;
+		vertical-align: inherit;
+	}
+	.article :global(th) {
+		vertical-align: bottom;
+		border-bottom: 2px solid #dee2e6;
+		text-align: inherit;
+	}
+	.article :global(th),
+	.article :global(td) {
+		vertical-align: top;
+		padding: 0.75rem;
+		border-top: 1px solid #dee2e6;
+	}
 	.byline {
 		font-style: italic;
 		font-size: 1rem;
@@ -44,14 +97,4 @@
 		flex-direction: column;
 		align-items: center;
 	}
-
-	:global(pre) {
-		overflow-x: auto;
-		padding: 0.5rem;
-	}
-	:global(blockquote) {
-		border-left: 0.5rem solid var(--color-primary);
-		padding: 1rem;
-		background-color: color-mix(in srgb, var(--color-primary) 10%, white);
-	}
 </style>

src/routes/blog/posts/table.svelte

@@ -0,0 +1,8 @@
+<div class="table-wrapper"><table><slot /></table></div>
+
+<style>
+	.table-wrapper {
+		width: 100%;
+		overflow-x: auto;
+	}
+</style>