added status to projects

src/routes/projects/+page.svelte

@@ -1,9 +1,10 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
     import TableOfContents from "$lib/components/table-of-contents.svelte";
-    import { type Project, games, hardware, apps, music } from './projects';
+    import { type Project, games, hardware, apps, music, getStatusText, getStatusCode } from './projects';
     import LinkList from "$lib/lists/link-list.svelte";
     import Content from "$lib/viewport/content.svelte";
+    import OutlinedButton from "$lib/components/outlined-button.svelte";
 </script>
 
 <svelte:head>
@@ -52,15 +53,16 @@
     {#if project.banner}
         <div class="project-banner-container">
             <img class="project-banner" src="{project.banner}" alt="Overview banner for {project.title}">
-            {#if project.date}
-                <p class="date-marker project-date-embed">{project.date}</p>
-            {/if}
         </div>
-    {:else}
-        {#if project.date}
-            <p class="date-marker">{project.date}</p>
-        {/if}
     {/if}
+
+    <p class="project-info project-status-c-{getStatusCode(project)}">
+        {#if project.date}
+            {project.date} | 
+        {/if}
+        {getStatusText(project)}
+    </p>
+
     {#if project.icon}
         <img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
     {/if}
@@ -101,4 +103,41 @@
         left: 0;
         bottom: 0;
     }
+
+    .project-info {
+        width: fit-content;
+        display: flex;
+        flex-direction: row;
+        margin-top: 16px;
+        background-color: color-mix(in srgb, var(--color-status) 6%, transparent);
+        border: var(--border-style) var(--border-dash-size) var(--color-status);
+        padding: 2px 8px;
+
+        font-family: var(--font-mono);
+        font-size: 1.0rem;
+        font-weight: 700;
+        color: var(--color-status);
+    }
+
+    /* #region Project Status Colours */
+    .project-status-c-act {
+        --color-status: var(--color-highlight);
+    }
+
+    .project-status-c-ina {
+        --color-status: #B89751;
+    }
+
+    .project-status-c-aba {
+        --color-status: #D15555;
+    }
+
+    .project-status-c-fin {
+        --color-status: #5486D8;
+    }
+
+    .project-status-c-eol {
+        --color-status: #C353C1;
+    }
+    /* #endregion */
 </style>