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