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/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>