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;
         }

src/routes/+page.svelte

@@ -26,6 +26,8 @@
         var selectedPicture = pictures[getRandom(pictures.length)];
         meImg = "common/me/" + selectedPicture + ".webp";
     };
+
+    let latestDevlogDate = posts[0].date.substring(0, 7).replace("/", "-") + "-" + posts[0].date.substring(7);
 </script>
 
 <svelte:head>
@@ -40,7 +42,7 @@
             <Gallery entries={[
                 {
                     title: "Project N5 – devlog",
-                    subtitle: "my active Godot game project about finding yourself in an unfamiliar future",
+                    subtitle: "my active Godot game project about finding yourself in an unfamiliar future.\n<i>latest update: " + latestDevlogDate + "</i>",
                     fullWidth: true,
                     img: "projects/projectn5/devlog/2025/0523/birds_eye.webp",
                     link: "projects/projectn5/devlog",

src/routes/games/+page.svelte

@@ -22,11 +22,11 @@
     <LinkList entries={
         [
             {
-                text: "swordsnstuff",
+                text: "Swords & Stuff – Unity 2D RPG (unfinished)",
                 link: "swordsnstuff",
             },
             {
-                text: "magician - warning no server",
+                text: "Magician – Online Multiplayer Card Game (not playable)",
                 link: "magician",
             }
         ]

src/routes/projects/+page.svelte

@@ -28,7 +28,7 @@
 />
 
 <Content>
-    <TableOfContents />
+    <TableOfContents disableStickyScrolling={true} />
 
     <h2>Active Projects</h2>
     {#each getActiveProjects(projects, true) as activeProject}

src/routes/projects/projectn5/devlog/+page.svelte

@@ -58,7 +58,8 @@
         transition: background-color 0.16s ease-in-out;
         margin: 4px;
         
-        --notch-size-devlog: 36px;
+        --notch-size-devlog: 42px;
+        --notch-size-devlog-img: 36px;
         clip-path: polygon(
             0% var(--notch-size-devlog), 
             var(--notch-size-devlog) 0%, 
@@ -90,14 +91,14 @@
         
         transition: background-color 0.16s ease-in-out;
         clip-path: polygon(
-            0% var(--notch-size-devlog), 
+            0% var(--notch-size-devlog-img), 
-            var(--notch-size-devlog) 0%, 
+            var(--notch-size-devlog-img) 0%, 
-            calc(100% - var(--notch-size-devlog)) 0%, 
+            calc(100% - var(--notch-size-devlog-img)) 0%, 
-            100% var(--notch-size-devlog), 
+            100% var(--notch-size-devlog-img), 
-            100% calc(100% - var(--notch-size-devlog)), 
+            100% calc(100% - var(--notch-size-devlog-img)), 
             100% 100%, 
-            var(--notch-size-devlog) 100%, 
+            var(--notch-size-devlog-img) 100%, 
-            0% calc(100% - var(--notch-size-devlog))
+            0% calc(100% - var(--notch-size-devlog-img))
         );
     }
 
@@ -112,8 +113,8 @@
             100% 0%, 
             100% 0%, 
             100% 0%, 
-            100% calc(100% - var(--notch-size-devlog)), 
+            100% calc(100% - var(--notch-size-devlog-img)), 
-            calc(100% - var(--notch-size-devlog)) 100%, 
+            calc(100% - var(--notch-size-devlog-img)) 100%, 
             0% 100%, 
             0% 100%
         );