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="/">
-        <img class="favicon-image" src="/favicon.webp" alt="Favicon">
-    </a>
+    <a href="/">Home</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;
-    }
-
-    .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;
+        padding: 0 var(--margin-content-side);
+        margin: 0 auto;
     }
 
     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 })}
+    {#if entry.icon}
+        <img height="24px" src={entry.icon} alt="Icon">
+    {/if}
+    {@html entry.text}
+{/snippet}
+
+<div class="list">
     {#each entries as entry}
-    <li>
         <a href={entry.link}>
-            {#if entry.icon}
-            <img height="24px" src={entry.icon} alt="Icon">
-            {/if}
-            {@html entry.text}
+            {@render listEntry({entry})}
         </a>
-    </li>
     {/each}
-</ul>
-
-<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>
+</div>

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}
-<div class="toc-container notched" bind:this={root}>
+{#if stickyScrolling}
+<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>