From 9a6c891671fa62702462c65886ab2eb20ee667f4 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 18 Oct 2024 10:53:54 -0700
Subject: [PATCH 1/3] fix: No undefined description

---
 src/content/post/placeholder3.md     | 1 -
 src/lib/components/PostHeader.svelte | 8 +++++---
 2 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/src/content/post/placeholder3.md b/src/content/post/placeholder3.md
index 52bf7b5..c226705 100644
--- a/src/content/post/placeholder3.md
+++ b/src/content/post/placeholder3.md
@@ -1,7 +1,6 @@
 ---
 title: Placeholder 3
 date: '2024-09-24'
-description: "This is a placeholder description"
 tags: []
 series: ["placeholder"]
 ---
diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index c11f8d6..2c44f61 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -19,9 +19,11 @@
 			<a id="post-title" href="/post/{post.slug}">{post.title}</a>
 		{/if}
 	</h2>
-	<div>
-		<p class="text-gray-500 h-8">{post.description}</p>
-	</div>
+	{#if post?.description}
+		<div>
+			<p class="text-gray-500 h-8">{post.description}</p>
+		</div>
+	{/if}
 	<div class="flex flex-row justify-between" style="width: 100%">
 		<p class="text-gray-200 flex justify-center">
 			{#each (post?.tags ?? []) as tag, i}

From e9af9f019abdd4f62eeba7500a128e83da254886 Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 18 Oct 2024 10:59:59 -0700
Subject: [PATCH 2/3] fix: Stacking series problem

---
 src/app.css                          |  2 ++
 src/content/post/placeholder2.md     |  2 +-
 src/lib/components/PostHeader.svelte | 18 ++++++++++++++----
 3 files changed, 17 insertions(+), 5 deletions(-)

diff --git a/src/app.css b/src/app.css
index e577683..99d0b06 100644
--- a/src/app.css
+++ b/src/app.css
@@ -40,6 +40,7 @@
 	 --shadow: theme('colors.java.800');
 	 --name: theme('colors.java.800');
 	 --navlink: theme('colors.eucalyptus.400');
+	 --series: theme('colors.sunglow.700');
   }
 
   .dark {
@@ -74,6 +75,7 @@
 	 --shadow: theme('colors.java.100');
 	 --name: theme('colors.java.300');
 	 --navlink: theme('colors.eucalyptus.200');
+	 --series: theme('colors.sunglow.600');
   }
 }
 
diff --git a/src/content/post/placeholder2.md b/src/content/post/placeholder2.md
index 356955e..ad88bb7 100644
--- a/src/content/post/placeholder2.md
+++ b/src/content/post/placeholder2.md
@@ -3,6 +3,6 @@ title: Placeholder 2
 date: '2024-09-20'
 description: "This is a placeholder description"
 tags: ["a123"]
-series: ["placeholder"]
+series: ["placeholder", "another-series"]
 ---
 ## Content
diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index 2c44f61..aefa5b2 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import type { Post } from '$lib/types'
+	import Dot from "svelte-radix/Dot.svelte";
 	import DividerVertical from "svelte-radix/DividerVertical.svelte";
 	export let post: Post;
 
@@ -9,10 +10,19 @@
 </script>
 
 <div id="post-heading">
+	{#if series}
+		<div class="flex flex-row justify-left items-center">
+			{#each series as seriesTag, i}
+				{#if i > 0}
+					<div class="separator text-sm">
+					<Dot />
+					</div>
+				{/if}
+				<p class="series-tag">{seriesTag}</p>
+			{/each}
+		</div>
+	{/if}
 	<h2>
-		{#each series as seriesTag}
-			<p class="series-tag">{seriesTag}</p>
-		{/each}
 		{#if inactive}
 			<p id="post-title">{post.title}</p>
 		{:else}
@@ -48,6 +58,6 @@
 		@apply text-3xl;
 	}
 	.series-tag {
-		color: theme('colors.sunglow.600');
+		color: var(--series);
 	}
 </style>

From 1a1d53adee63e67ca63bdd8a461e0e64841cd47f Mon Sep 17 00:00:00 2001
From: Leni Aniva <v@leni.sh>
Date: Fri, 18 Oct 2024 11:26:56 -0700
Subject: [PATCH 3/3] fix: Styling post header

---
 src/lib/components/PostHeader.svelte | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/src/lib/components/PostHeader.svelte b/src/lib/components/PostHeader.svelte
index b09de62..a1da423 100644
--- a/src/lib/components/PostHeader.svelte
+++ b/src/lib/components/PostHeader.svelte
@@ -29,11 +29,10 @@
 			<a id="post-title" href="/post/{post.slug}">{post.title}</a>
 		{/if}
 	</h2>
-	{#if post?.description}
-		<div>
-			<p class="text-gray-500 h-8">{post.description}</p>
-		</div>
-	{/if}
+	<!-- Visually this component should exist to ensure the even spacing between individual posts. -->
+	<div>
+		<p class="text-gray-500 h-8">{post?.description || ""}</p>
+	</div>
 	<div class="flex flex-row justify-between" style="width: 100%">
 		<p class="text-gray-200 flex justify-center">
 			{#each (post?.tags ?? []) as tag, i}