fixed table of contents sticking on all pages; more minor changes

src/lib/footer.svelte

@@ -30,6 +30,7 @@
 
     footer p {
         font-family: var(--font-mono);
+        font-weight: 500;
     }
 
     .bottom-rat {

src/lib/header.svelte

@@ -1,11 +1,3 @@
-<!-- <div class="center-stuff">
-    <p class="banner-text" style="margin-right: 8px;">denizk0461's</p>
-    <a class="banner-image" href="/">
-        <img src="/favicon.webp" alt="Favicon">
-    </a>
-    <p class="banner-text" style="margin-left: 8px;">website</p>
-</div> -->
-
 <div class="header-container">
     <div class="header-content">
         <a class="favicon" href="/">
@@ -25,7 +17,6 @@
     .header-container {
         margin: 0 0 ;
         padding: 0;
-        background-color: transparent;
     }
 
     .header-content {

src/lib/table-of-contents.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
     import {onMount} from 'svelte';
 
+    let {
+        disableStickyScrolling,
+    }: {
+        disableStickyScrolling?: boolean;
+    } = $props();
+
     let idCounter: number = 0;
 
     let container: HTMLElement;
@@ -46,9 +52,15 @@
     }
 </script>
 
+{#if disableStickyScrolling}
 <div class="toc-container notched">
     <ul class="toc-list" bind:this={container}></ul>
 </div>
+{:else}
+<div class="toc-container notched sticky-toc">
+    <ul class="toc-list" bind:this={container}></ul>
+</div>
+{/if}
 
 <style>
     :global {
@@ -59,6 +71,9 @@
 
             background-color: var(--color-background-highlight);
             padding: 16px 0;
+        }
+
+        .sticky-toc {
             position: sticky;
             top: 20px;
         }