tags are now displayed in banner; adjusted sizing of elements in banner

src/lib/banner2.svelte

@@ -6,6 +6,7 @@
         subtitle = "",
         banner = "",
         bannerAlt = "",
+        tags = [],
         pixelated,
     }: {
         title: string;
@@ -14,18 +15,26 @@
         subtitle?: string;
         banner?: string;
         bannerAlt?: string;
+        tags?: string[];
         pixelated?: boolean;
     } = $props();
 
 </script>
 
 {#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
+        <h1 class="title">{title}</h1>
 	<div class="title-container">
         <div class="title-text-container">
-            <h1 class="title">{title}</h1>
             {#if subtitle}
                 <p class="subtitle">[ {subtitle} ]</p>
             {/if}
+            {#if tags}
+                <div class="tag-container">
+                    {#each tags as tag}
+                        <span class="post-tag">{tag}</span>
+                    {/each}
+                </div>
+            {/if}
         </div>
         {#if date}
             <div class="date-container">
@@ -66,17 +75,23 @@
         flex-direction: row;
         /* align-items: flex-end; */
         gap: 16px;
-        margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0;
-    }
-
-    .title-container + hr {
-        /* Add top margin if no date element exists */
-        margin-top: 16px;
+        margin: 8px 0;
     }
 
     .title-text-container {
         width: fit-content;
+        display: flex;
+        flex-direction: column;
         flex: 1;
+        gap: 8px;
+    }
+
+    .tag-container {
+        display: flex;
+        gap: 4px;
+        flex-direction: row;
+        flex-wrap: wrap;
+        margin-bottom: 4px;
     }
 
     .date-container {
@@ -84,13 +99,13 @@
         display: flex;
         flex-direction: column;
         align-items: flex-end;
-        margin-bottom: 12px;
     }
 
     .title {
         box-sizing: border-box;
         height: fit-content;
         margin: 0;
+        margin-top: var(--margin-header-top);
     }
 
     .date {
@@ -108,6 +123,7 @@
         /* width: fit-content; */
         font-weight: 500;
         font-size: 1.0rem;
+        line-height: 1.0rem;
         margin: 0;
     }