More style fixes

DanielPower · Dec 19, 2024 · 3a446fd · 3a446fd
1 parent f906058
commit 3a446fd
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 27 deletions.
diff --git a/src/app.css b/src/app.css
@@ -45,19 +45,11 @@ h1 {
 	font-weight: 600;
 }
 
-h1:not(:first-child) {
-	margin-top: 1.25rem;
-}
-
 h2 {
 	font-size: 1.2rem;
 	font-weight: 600;
 }
 
-h2:not(:first-child) {
-	margin-top: 1rem;
-}
-
 h3 {
 	font-size: 1.1rem;
 	font-weight: 500;
@@ -77,23 +69,6 @@ p:not(:first-child) {
 	margin-top: 0.75rem;
 }
 
-figure {
-	max-width: 40rem;
-	margin-top: 1rem;
-}
-
-img {
-	display: block;
-	max-width: 100%;
-}
-
-figcaption {
-	font-size: 0.8em;
-	background-color: var(--color-dark);
-	padding: 0.25rem;
-	color: var(--color-fg);
-}
-
 pre[class*="language-"] {
 	font-size: 0.75rem;
 	background-color: var(--color-dark);

diff --git a/src/lib/components/Image.svelte b/src/lib/components/Image.svelte
@@ -29,3 +29,21 @@
 		<figcaption><slot /></figcaption>
 	{/if}
 </figure>
+
+<style>
+	img {
+		display: block;
+		max-width: 100%;
+	}
+
+	figure {
+		max-width: 40rem;
+	}
+
+	figcaption {
+		font-size: 0.8em;
+		background-color: var(--color-dark);
+		padding: 0.25rem;
+		color: var(--color-fg);
+	}
+</style>
diff --git a/src/lib/server/posts.ts b/src/lib/server/posts.ts
@@ -16,13 +16,14 @@ const data = await Promise.all(
 
 const posts = data
   .map(({ default: component, metadata }, index) => {
-    const { body } = render(component);
+    const { body, head } = render(component);
     return {
       title: metadata.title,
       draft: !metadata.date,
       date: metadata.date || new Date().toISOString().slice(0, 10),
       slug: slugs[index],
       body,
+      head,
     };
   })
   .sort((a, b) => +new Date(b.date) - +new Date(a.date))

diff --git a/src/routes/blog/[slug]/+page.svelte b/src/routes/blog/[slug]/+page.svelte
@@ -2,13 +2,18 @@
 	export let data;
 </script>
 
+<svelte:head>
+	{@html data.head}
+</svelte:head>
 <div class="post-heading">
 	<h1>{data.title}</h1>
 	<div>
 		<p>Published on: {data.date}</p>
 	</div>
 </div>
-{@html data.body}
+<div class="post-body">
+	{@html data.body}
+</div>
 
 <style>
 	.post-heading {
@@ -17,4 +22,14 @@
 		align-items: center;
 		margin: 0 auto;
 	}
+
+	.post-body :global(h2) {
+		margin-top: 1.5rem;
+	}
+	.post-body :global(h3) {
+		margin-top: 1rem;
+	}
+	.post-body :global(figure) {
+		margin-top: 1rem;
+	}
 </style>