moved CSS rules so that link lists and ul look identical; adjusted header

src/routes/projects/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
-    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Banner2 from "$lib/banner2.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
     import type { Project } from './projects';
     import { projects } from './projects';
     import LinkList from "$lib/link-list.svelte";
-    import ContentSidebar from "$lib/content-sidebar.svelte";
+    import Content from "$lib/content.svelte";
 
     let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
         var result: Project[] = [];
@@ -21,72 +21,115 @@
     <title>Projects | denizk0461</title> 
 </svelte:head>
 
-<BannerTitleAlt
-    title="My Disordered Projects"
-    banner="/projects/banner.webp"
-    bannerAlt="Closeup of the purple protagonist from Project N5"
-    subtitle="Things I have worked on"
-/>
+<Content>
+    <Banner2
+        title="My Disordered Projects"
+        banner="/projects/banner.webp"
+        bannerAlt="Closeup of the purple protagonist from Project N5"
+        subtitle="Things I have worked on" />
 
-<ContentSidebar>
-    <TableOfContents slot="side-left" />
+    <TableOfContents />
 
-    <div slot="main">
-        <h2 id="games">Games</h2>
-        {#each projects as project}
-            {#if project.type == "game"}
-                {@render projectSummary({ project: project })}
-            {/if}
-        {/each}
-        <h2 id="hardware">Hardware</h2>
-        {#each projects as project}
-            {#if project.type == "hardware"}
-                {@render projectSummary({ project: project })}
-            {/if}
-        {/each}
-        <h2 id="apps">Apps</h2>
-        {#each projects as project}
-            {#if project.type == "app"}
-                {@render projectSummary({ project: project })}
-            {/if}
-        {/each}
-        <h2 id="music">Music</h2>
-        {#each projects as project}
-            {#if project.type == "music"}
-                {@render projectSummary({ project: project })}
-            {/if}
-        {/each}
-    </div>
-</ContentSidebar>
+    <h2 id="games">Games</h2>
+    {#each projects as project}
+        {#if project.type == "game"}
+            {@render projectSummary({ project: project })}
+        {/if}
+    {/each}
+    <h2 id="hardware">Hardware</h2>
+    {#each projects as project}
+        {#if project.type == "hardware"}
+            {@render projectSummary({ project: project })}
+        {/if}
+    {/each}
+    <h2 id="apps">Apps</h2>
+    {#each projects as project}
+        {#if project.type == "app"}
+            {@render projectSummary({ project: project })}
+        {/if}
+    {/each}
+    <h2 id="music">Music</h2>
+    {#each projects as project}
+        {#if project.type == "music"}
+            {@render projectSummary({ project: project })}
+        {/if}
+    {/each}
+</Content>
 
 {#snippet projectSummary({
     project
 }: {
     project: Project;
 })}
-    <div>
-        <h3 id="{project.id}">{project.title}</h3>
-        {#if project.subtitle}
-        <p class="project-subtitle">» {project.subtitle}</p>
-        {/if}
-        {#if project.banner}
+    <h3 id="{project.id}">{project.title}</h3>
+    {#if project.subtitle}
+        <p class="project-subtitle">[ {project.subtitle} ]</p>
+    {/if}
+    {#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="project-date project-date-embed">{project.date}</p>
+                <p class="project-date project-date-embed">{project.date}</p>
             {/if}
         </div>
-        {:else}
-        {#if project.date}
+    {:else}
+    {#if project.date}
         <p class="project-date">{project.date}</p>
-        {/if}
-        {/if}
-        {#if project.icon}
+    {/if}
+    {/if}
+    {#if project.icon}
         <img class="project-icon" src="{project.icon}" alt="Icon for {project.title}">
-        {/if}
-        {#each project.paragraphs as paragraph}
-            <p>{@html paragraph}</p>
-        {/each}
-        <LinkList entries={project.links} />
-    </div>
-{/snippet}
+    {/if}
+    {#each project.paragraphs as paragraph}
+        <p>{@html paragraph}</p>
+    {/each}
+    <LinkList entries={project.links} />
+{/snippet}
+
+<style>
+    .project-subtitle {
+        font-family: var(--font-mono);
+        font-size: 1.0rem;
+        margin-top: 0;
+    }
+
+    .project-banner-container {
+        position: relative;
+        width: fit-content;
+        height: 300px;
+        margin-left: auto;
+        margin-right: auto;
+        display: flex;
+    }
+    
+    .project-banner {
+        margin: 0; /* reset left/right margins */
+        width: 100%;
+    }
+
+    .project-icon {
+        float: left;
+        margin: 16px 16px 16px 0;
+        width: 20%;
+    }
+
+    .project-date {
+        font-size: 1rem;
+        font-weight: 700;
+        line-height: 1rem;
+        width: fit-content;
+        margin: 0;
+        padding: 0;
+        
+        color: var(--color-text-dark);
+        background-color: var(--color-highlight);
+        font-family: var(--font-stylised);
+        padding: 4px;
+    }
+
+    .project-date-embed {
+        position: absolute;
+        left: 0;
+        bottom: 0;
+    }
+</style>