main page shenanigans; added dateUpdate attribute to blog posts; updated banner to display them

src/lib/banner2.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
     let {
         title,
-        date = "",
+        date = "", // date posted
+        dateUpdated = "",
         subtitle = "",
         banner = "",
         bannerAlt = "",
@@ -9,6 +10,7 @@
     }: {
         title: string;
         date?: string;
+        dateUpdated?: string;
         subtitle?: string;
         banner?: string;
         bannerAlt?: string;
@@ -19,14 +21,21 @@
 
 {#snippet titles({title, subtitle, date}: {title: string, subtitle: string, date: string})}
 	<div class="title-container">
-        <h1 class="title">{title}</h1>
-        {#if subtitle}
-            <p class="subtitle">[ {subtitle} ]</p>
+        <div class="title-text-container">
+            <h1 class="title">{title}</h1>
+            {#if subtitle}
+                <p class="subtitle">[ {subtitle} ]</p>
+            {/if}
+        </div>
+        {#if date}
+            <div class="date-container">
+                <p class="date">posted :: {date}</p>
+                {#if dateUpdated}
+                    <p class="date">last updated :: {dateUpdated}</p>
+                {/if}
+            </div>
         {/if}
     </div>
-	{#if date}
-		<p class="date">» {date}</p>
-	{/if}
 {/snippet}
 
 <div class="container">
@@ -55,8 +64,8 @@
     .title-container {
         display: flex;
         flex-direction: row;
-        align-items: flex-end;
-        gap: 12px;
+        /* align-items: flex-end; */
+        gap: 16px;
         margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0;
     }
 
@@ -65,6 +74,19 @@
         margin-top: 16px;
     }
 
+    .title-text-container {
+        width: fit-content;
+        flex: 1;
+    }
+
+    .date-container {
+        width: fit-content;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+        margin-bottom: 12px;
+    }
+
     .title {
         box-sizing: border-box;
         height: fit-content;
@@ -72,14 +94,18 @@
     }
 
     .date {
-        font-weight:700;
-        font-size: 1.3rem;
-        margin-top: 0;
+        font-weight: 500;
+        font-family: var(--font-mono);
+        font-size: 1.0rem;
+        line-height: 1.4rem;
+        font-style: italic;
+        margin: 0;
         color: var(--color-highlight);
     }
 
     .subtitle {
         font-family: var(--font-mono);
+        /* width: fit-content; */
         font-weight: 500;
         font-size: 1.0rem;
         margin: 0;