rework layout and add table of contents

src/routes/__layout.svelte

@@ -1,39 +1,43 @@
-<style>
-    :global(main) {
-        --content-width: 42rem;
-        box-sizing: border-box;
-        max-width: var(--content-width);
-        margin: 0 auto;
-        padding:  0 15px;
-    }
+<script>
+    import Toc from '$lib/Toc.svelte';
 
-    #header {
+    const items = [
+        {depth: 2, text: 'The Suboptimal Solution: Absolute Positioning'},
+        {depth: 2, text: 'CSS Wizardry'},
+        {depth: 2, text: 'Implementation'},
+    ];
+</script>
+
+<style>
+    .header {
+        grid-column-start: 1;
+        grid-column-end: 4;
         background-color: #4f5f68;
     }
 
-    #nav-main {
-        max-width:  30rem;
-        margin:  0 auto;
-        display:  grid;
-        grid-template-columns:  repeat(3, minmax(6rem, 8rem));
-        justify-content: space-between;
+    nav {
+        max-width: 30rem;
+        margin: 0 auto;
+        display: flex;
+        justify-content: space-around;
     }
 
-    #nav-main a {
+    nav a {
+        width: 8rem;
+        min-width: 6rem;
         font-size: 1.5rem;
-        color:  white;
+        color: white;
         text-decoration: none;
         text-align: center;
-        padding:  0.25rem 0;
+        padding: 0.25rem 0;
     }
-
-    #nav-main a:hover {
+    nav a:hover {
         background-color: #00000025;
     }
 </style>
 
-<div id="header">
-    <nav id="nav-main">
+<div class="header">
+    <nav>
         <a sveltekit:prefetch href="/">Home</a>
         <a sveltekit:prefetch href="/posts">Posts</a>
         <a sveltekit:prefetch href="/">About</a>