set projects to contentsidebar

src/lib/table-of-contents.svelte

@@ -91,8 +91,8 @@
         }
         .toc-list li a {
             width: 100%;
-            padding-top: 4px;
-            padding-bottom: 4px;
+            padding-top: 3px;
+            padding-bottom: 3px;
             padding-right: 24px;
             display: inline-block;
             color: var(--color-text);

src/routes/projects/+page.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
     import BannerTitleAlt from "$lib/banner-title-alt.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
-    import Content from "$lib/content.svelte";
     import type { Project } from '$lib/projects';
     import { projects } from '$lib/projects';
     import LinkList from "$lib/link-list.svelte";
+    import ContentSidebar from "$lib/content-sidebar.svelte";
 
     let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
         var result: Project[] = [];
@@ -28,9 +28,10 @@
     subtitle="Things I have worked on"
 />
 
-<Content>
-    <TableOfContents disableStickyScrolling={true} />
+<ContentSidebar>
+    <TableOfContents slot="side-left" />
 
+    <div slot="main">
         <h2 id="games">Games</h2>
         {#each projects as project}
         {#if project.type == "game"}
@@ -55,7 +56,8 @@
         {@render projectSummary({ project: project })}
         {/if}
         {/each}
-</Content>
+    </div>
+</ContentSidebar>
 
 {#snippet projectSummary({
     project