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

src/lib/banner2.svelte

@@ -57,11 +57,18 @@
         flex-direction: row;
         align-items: flex-end;
         gap: 12px;
+        margin: var(--margin-header-top) 0 var(--margin-header-bottom) 0;
+    }
+
+    .title-container + hr {
+        /* Add top margin if no date element exists */
+        margin-top: 16px;
     }
 
     .title {
         box-sizing: border-box;
         height: fit-content;
+        margin: 0;
     }
 
     .date {
@@ -75,5 +82,6 @@
         font-family: var(--font-mono);
         font-weight: 500;
         font-size: 1.0rem;
+        margin: 0;
     }
 </style>

src/lib/header.svelte

@@ -1,47 +1,28 @@
 {#snippet headerContent()}
-    <a class="favicon" href="/">
+    <a href="/">Home</a>
-        <img class="favicon-image" src="/favicon.webp" alt="Favicon">
-    </a>
     <a href="/projects">Projects</a>
     <a href="/projects/projectn5/devlog">Project N5</a>
     <a href="/blog">Blog</a>
     <a href="/about">About</a>
 {/snippet}
 
-<!-- <div class="header-content coloured-header">
+<div class="header-content">
     {@render headerContent()}
-</div> -->
+</div>
 
 <style>
     .header-content {
         box-sizing: border-box;
         width: 100%;
-        min-height: 72px;
+        max-width: var(--page-width);
+        /* min-height: 72px; */
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-        gap: 20px;
+        gap: 16px;
         align-items: center;
-        padding: 0 24px;
+        padding: 0 var(--margin-content-side);
-    }
+        margin: 0 auto;
-
-    .coloured-header {
-        background: linear-gradient(90deg, var(--color-background-highlight) 62%, var(--color-header-highlight) 95%);
-    }
-
-
-    /* .transparent-header {
-        background: linear-gradient(90deg, var(--color-background-highlight) 62%, var(--color-header-highlight) 95%);
-    } */
-
-    .favicon {
-        background: url("/favicon.webp");
-        color: black;
-    }
-
-    .favicon-image {
-        width: initial;
-        max-height: 32px;
     }
 
     a {
@@ -49,7 +30,6 @@
         font-size: 1rem;
         font-weight: bold;
         text-decoration: none;
-        transition: 0.2s ease-in-out color;
     }
     
     a:link {

src/lib/link-list.svelte

@@ -12,55 +12,17 @@
     } = $props();
 </script>
 
-<ul class="styled-list">
+{#snippet listEntry({ entry }: { entry: LinkEntry })}
-    {#each entries as entry}
-    <li>
-        <a href={entry.link}>
     {#if entry.icon}
         <img height="24px" src={entry.icon} alt="Icon">
     {/if}
     {@html entry.text}
+{/snippet}
+
+<div class="list">
+    {#each entries as entry}
+        <a href={entry.link}>
+            {@render listEntry({entry})}
         </a>
-    </li>
     {/each}
-</ul>
+</div>
-
-<style>
-    li {
-        --notch-size-link: 10px;
-        clip-path: polygon(
-            0% var(--notch-size-link), 
-            var(--notch-size-link) 0%, 
-            calc(100% - var(--notch-size-link)) 0%, 
-            100% var(--notch-size-link), 
-            100% calc(100% - var(--notch-size-link)), 
-            calc(100% - var(--notch-size-link)) 100%, 
-            var(--notch-size-link) 100%, 
-            0% calc(100% - var(--notch-size-link))
-        );
-    }
-    li:hover {
-        background-color: var(--color-background-highlight-hover);
-    }
-    a {
-        width: 100%;
-        transition: color 0.2s ease-in-out;
-    }
-    a:link, a:visited {
-        color: var(--color-text);
-        text-decoration: none;
-    }
-    a:hover {
-        color: var(--color-highlight);
-    }
-
-    img {
-        filter: var(--color-text-img);
-        margin-top: 4px;
-        margin-bottom: -4px;
-        width: fit-content !important;
-        margin-left: 0;
-        margin-right: 0;
-        display: inline;
-    }
-</style>

src/lib/table-of-contents.svelte

@@ -2,9 +2,9 @@
     import {onMount} from 'svelte';
 
     let {
-        disableStickyScrolling,
+        stickyScrolling,
     }: {
-        disableStickyScrolling?: boolean;
+        stickyScrolling?: boolean;
     } = $props();
 
     let idCounter: number = 0;
@@ -64,12 +64,12 @@
     }
 </script>
 
-{#if disableStickyScrolling}
+{#if stickyScrolling}
-<div class="toc-container notched" bind:this={root}>
+<div class="toc-container notched sticky-toc" bind:this={root}>
     {@render tocList()}
 </div>
 {:else}
-<div class="toc-container notched sticky-toc" bind:this={root}>
+<div class="toc-container notched" bind:this={root}>
     {@render tocList()}
 </div>
 {/if}

src/lib/webrings/gamedev.svelte

@@ -6,10 +6,10 @@
     </div>
     <div class="webring-row">
         <span>〔</span>
-        <a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">↫ PREV</a>
+        <a href="https://www.rainbowcemetery.com/devring/prev.php?id=18">&lt;&lt; PREV</a>
         <a href="https://www.rainbowcemetery.com/devring/rand.php?id=18">RAND</a>
         <a href="https://www.rainbowcemetery.com/devring/list.php?id=18">LIST</a>
-        <a href="https://www.rainbowcemetery.com/devring/next.php?id=18">NEXT ↬</a>
+        <a href="https://www.rainbowcemetery.com/devring/next.php?id=18">NEXT &gt;&gt;</a>
         <span>〕</span>
     </div>
 </div>
@@ -26,7 +26,7 @@
         margin: 0 4px;
         text-decoration: none;
     }
-    a:link, a:visited {
+    a:link, a:visited, span {
         color: var(--color-highlight);
     }
     a:hover {
@@ -40,5 +40,6 @@
     }
     span {
         margin: 0;
+        font-weight: bold;
     }
 </style>

src/routes/+layout.svelte

@@ -131,6 +131,9 @@
             --font-size-h3: 1.3rem;
             --font-size-h4: 1.2rem;
 
+            --margin-header-top: 16px;
+            --margin-header-bottom: 8px;
+
             /* page sizing */
             --page-width: 1000px;
             --screen-width-mobile: 800px;
@@ -181,27 +184,6 @@
             margin: 12px 0;
             font-weight: 400;
         }
-        ul {
-            padding: 0;
-        }
-
-        li::before {
-            content: "–";
-            font-weight: 900;
-            color: var(--color-highlight);
-            padding-right: 8px;
-        }
-        li {
-            display: flex;
-            padding-left: 0;
-            margin-top: 4px;
-            margin-bottom: 4px;
-            transition: background-color 0.2s ease-in-out;
-            padding: 2px 12px;
-        }
-        li a {
-            display: inline;
-        }
 
         /* #region Headers */
         /* All headers */
@@ -209,8 +191,8 @@
             font-weight: 700;
             font-family: var(--font-mono);
             color: var(--color-highlight);
-            margin-top: 16px;
+            margin-top: var(--margin-header-top);
-            margin-bottom: 8px;
+            margin-bottom: var(--margin-header-bottom);
             width: fit-content;
         }
 
@@ -259,6 +241,7 @@
             height: 1px;
             border: none;
             border-top: 2px dashed var(--color-highlight);
+            margin: 8px 0;
         }
 
         code, .code-block {
@@ -342,59 +325,58 @@
             );
         }
 
-        .project-subtitle {
-            color: var(--color-highlight);
-            font-weight: 700;
-            font-style: italic;
-            margin-top: 0;
-            font-family: var(--font-mono);
-        }
-
-        .project-banner-container {
-            position: relative;
-            width: 80%;
-            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;
-        }
-
         .pixelated-img {
             image-rendering: pixelated;
         }
         
+        /* #region Lists (ul and LinkList) */
+        .list, ul {
+            display: flex;
+            flex-direction: column;
+            padding: 0;
+        }
+
+        .list a, li {
+            width: 100%;
+            /* transition: color 0.1s ease-in-out; */
+            margin: 0;
+            padding: 4px 0;
+            list-style-type: none;
+        }
+        .list a::before, li::before {
+            content: "–";
+            font-family: var(--font-mono);
+            font-weight: bold;
+            color: var(--color-highlight);
+            margin: 0 4px 0 12px;
+        }
+        li::before {
+            padding-right: 8px;
+        }
+        .list a:hover::before {
+            content: ">";
+        }
+        .list a:link, .list a:visited, li {
+            color: var(--color-text);
+            text-decoration: none;
+        }
+        .list a:hover {
+            color: var(--color-highlight);
+        }
+
+        .list img {
+            filter: var(--color-text-img);
+            margin-top: 4px;
+            margin-bottom: -4px;
+            width: fit-content !important;
+            margin-left: 0;
+            margin-right: 0;
+            display: inline;
+        }
+        /* #endregion */
+
         @media screen and (max-width: 800px) {
-            h1 {
+            /* h1 {
                 font-size: 2.3rem;
                 line-height: 2.4rem;
             }
@@ -412,7 +394,7 @@
             h4, h5, h6 {
                 font-size: 1.4rem;
                 line-height: 1.4rem;
-            }
+            } */
 
             /* p, span, li, pre, a {
             } */

src/routes/about/+page.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Banner2 from "$lib/banner2.svelte";
-    import ContentSidebar from "$lib/content-sidebar.svelte";
+    import Content from "$lib/content.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
     import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
 
@@ -36,19 +36,16 @@
     <title>About Me | denizk0461</title> 
 </svelte:head>
 
-<BannerTitleAlt
+<Content>
+    <Banner2
         title="About Me"
         banner="/common/me/b.webp"
         bannerAlt="Mirror picture of me, pixelated beyond recognition"
         subtitle="If you'd like to learn more about me"
-    pixelated
+        pixelated />
-/>
 
-<ContentSidebar>
+    <TableOfContents />
 
-    <TableOfContents slot="side-left" />
-    
-    <div slot="main">
     <p>Hi there! I'm Deniz (he/him/they). Welcome to my website!</p>
 
     <p>On this website, I share my programming projects, but also a couple of other creative works. If you scroll down, though, you can find out a little more about me!</p>
@@ -57,7 +54,7 @@
 
     <p>I like dabbling in all kinds of creative endeavours. What I do most is programming, but there are other things too! I do...</p>
 
-        <ul class="styled-list">
+    <ul>
         <li>Game development using Godot</li>
         <li>3D modelling in Blender</li>
         <li>CAD in Fusion 360 for 3D printing (and starting to learn FreeCAD)</li>
@@ -93,7 +90,7 @@
 
     <p>Other games I've enjoyed include:</p>
 
-        <ul class="styled-list">
+    <ul>
         <li>1000xRESIST</li>
         <li>A Hat in Time</li>
         <li>Balatro</li>
@@ -111,5 +108,4 @@
     <p>I'm also not a social media person. I've tried for years to use it so I could connect with my friends, who all used it extensively, but I was never able to stick with it. I had three Instagram accounts, a Twitter account, some Reddit accounts, and even two Facebook accounts in the past, but they are all gone now. Currently, I do have a <a href="https://bsky.app/denizk0461.dev">Bluesky</a> account, but it's not seen much use either. In fact, in recent times, I've tried getting away from social media and phone overuse to waste less time on slop posted on social media and have more time free to pursue hobbies and other things I enjoy doing.</p>
 
     <p><i>Last updated: 2025-12-20</i></p>
-    </div>
+</Content>
-</ContentSidebar>

src/routes/feeds/+page.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
     import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/content.svelte";
-    import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
+    import List, { type ListEntry } from "$lib/link-list.svelte";
 
-	let feeds: LinkEntry[] = [
+	let feeds: ListEntry[] = [
 		{
 			text: "Project N5 devlog",
 			link: "/projects/projectn5/devlog/feed.xml",
@@ -24,5 +24,5 @@
 <Content>    
 	<p>This is a list of RSS feeds I maintain on this website. You can subscribe to them by adding the link of any feed to an RSS reader of your liking.</p>
 
-	<LinkList entries={feeds} />
+	<List entries={feeds} />
 </Content>

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,17 +21,15 @@
     <title>Projects | denizk0461</title> 
 </svelte:head>
 
-<BannerTitleAlt
+<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"
+        subtitle="Things I have worked on" />
-/>
 
-<ContentSidebar>
+    <TableOfContents />
-    <TableOfContents slot="side-left" />
 
-    <div slot="main">
     <h2 id="games">Games</h2>
     {#each projects as project}
         {#if project.type == "game"}
@@ -56,18 +54,16 @@
             {@render projectSummary({ project: project })}
         {/if}
     {/each}
-    </div>
+</Content>
-</ContentSidebar>
 
 {#snippet projectSummary({
     project
 }: {
     project: Project;
 })}
-    <div>
     <h3 id="{project.id}">{project.title}</h3>
     {#if project.subtitle}
-        <p class="project-subtitle">» {project.subtitle}</p>
+        <p class="project-subtitle">[ {project.subtitle} ]</p>
     {/if}
     {#if project.banner}
         <div class="project-banner-container">
@@ -88,5 +84,52 @@
         <p>{@html paragraph}</p>
     {/each}
     <LinkList entries={project.links} />
-    </div>
 {/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>

src/routes/projects/daisyfm/+page.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/content.svelte";
     import TableOfContents from "$lib/table-of-contents.svelte";
 </script>
@@ -8,19 +8,20 @@
     <title>Daisy FM Synth | denizk0461</title> 
 </svelte:head>
 
-<BannerTitleAlt
+<Content>
+    <Banner2
         title="Daisy FM Synth"
+        date="2025-04-04"
         banner="/projects/daisyfm/banner.webp"
         bannerAlt="Close-up of Daisy, focussed on the effect knobs"/>
 
-<Content>
     <img src="/projects/daisyfm/fullview.webp" alt="Top view of the Daisy FM synth">
 
     <p>A friend showed me the <a href="https://electro-smith.com/products/daisy-seed">Daisy Seed</a>, an Arduino-compatible microcontroller made for developing audio equipment. With a little bit of motivation and absolutely no experience in either programming synthesisers or electronics in general, I quickly got my hands on one and started to toy around.</p>
 
     <p>So... <i>how did we get here?</i></p>
 
-    <TableOfContents disableStickyScrolling />
+    <TableOfContents />
 
     <h2 id="creation">How did I make this?</h2>
 

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

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import BannerTitleAlt from "$lib/banner-title-alt.svelte";
+    import Banner2 from "$lib/banner2.svelte";
     import Content from "$lib/content.svelte";
     // import type { DevlogPost } from "./devlog-posts";
     import { posts, type DevlogPost } from "./posts";
@@ -19,13 +19,11 @@
     <title>Project N5 Devlog | denizk0461</title> 
 </svelte:head>
 
-<BannerTitleAlt
-    title="Project N5; Development Log"
-    banner="/projects/projectn5/banner2.webp"
-    wide
-/>
-
 <Content>
+    <Banner2
+        title="Project N5; Development Log"
+        banner="/projects/projectn5/banner2.webp" />
+
     <p>This is the development log for my game <strong>Project N5</strong>! It's an action-adventure jump-and-run game inspired by games such as Ratchet & Clank. Development started on <b>2023-09-16</b> and rebooted on <b>2025-05-16</b>.</p>
 
     <p>2023 progress updates summarise an entire month's work, respectively. Progress updates thereafter denote noteworthy developments in a more collected format.</p>

src/routes/projects/projectn5/devlog/2025/0816.md

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import LinkList, { type LinkEntry } from "$lib/link-list.svelte";
+    import List, { type ListEntry } from "$lib/link-list.svelte";
 
-    let builds: LinkEntry[] = [
+    let builds: ListEntry[] = [
         {
             text: "2023-10-07 (Protagonist #1)",
             link: "https://files.denizk0461.dev/projectn5/2023-10-07.zip",
@@ -37,7 +37,7 @@ The game, in its state from 2025-05-16 (before the reboot), is available to play
 
 I've also uploaded old builds of the game [here](https://files.denizk0461.dev/projectn5). You'll find the following builds, one for each protagonist:
 
-<LinkList entries={builds} />
+<List entries={builds} />
 
 The 2025-08-16 build has not seen work put into it after [2025-05-16](/projects/projectn5/devlog/2025/0523/), bar the build notice on the pause screen.
 

src/routes/projects/projectn5/devlog/[year]/[date]/+page.svelte

@@ -21,10 +21,8 @@
         bannerAlt="{data.bannerAlt}"    
     />
 
-    <TableOfContents disableStickyScrolling />
+    <TableOfContents />
 
-    <!-- <div slot="main"> -->
     <svelte:component this={data.content} />
-	<!-- </div> -->
 
 </Content>

src/routes/projects/projects.ts

@@ -274,11 +274,11 @@ export const projects: Project[] = [
         title: "Magician",
         subtitle: "Online Multiplayer Card Game",
         paragraphs: [
-            "<b>Magician</b> is a clone of the card game <i>Wizard</i>. I've made it primarily to play with friends, but it's also a test for programming client-server multiplayer games. The clients are programmed in Godot, the server in Python, and they communicate via TCP/IP websockets. The game works with 3 to 6 players and requires an active connection to the server, which should be reachable most times.",
+            "<b>Magician</b> is a clone of the card game <i>Wizard</i>. I've made it primarily to play with friends, but it's also a test for programming client-server multiplayer games. The clients are programmed in Godot, the server in Python, and they communicate via TCP/IP websockets. The game works with 3 to 6 players.",
         ],
         links: [
             {
-                text: "Play <b>Magician</b>",
+                text: "View the latest <b>Magician</b> build",
                 link: "//apps.denizk0461.dev/magician",
             },
         ],