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');
   }
 }
 

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

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"]
 ---

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,18 +10,28 @@
 </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}
 			<a id="post-title" href="/post/{post.slug}">{post.title}</a>
 		{/if}
 	</h2>
+	<!-- Visually this component should exist to ensure the even spacing between individual posts. -->
 	<div>
-		<p class="text-gray-500 h-8">{post.description}</p>
+		<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">
@@ -46,6 +57,6 @@
 		@apply text-3xl;
 	}
 	.series-tag {
-		color: theme('colors.sunglow.600');
+		color: var(--series);
 	}
 </style>