added notches and footer

src/lib/banner-title.svelte

@@ -13,7 +13,7 @@
 
 </script>
 
-<div class="container">
+<div class="container notched">
     <img src="{banner}">
     <h1 class="title">{title}</h1>
 </div>

src/lib/footer.svelte

@@ -1 +1,49 @@
-<p>temporary footer</p>
+<script lang="ts">
+    var ratCounter = 0;
+    let playSound = function() {
+        new Audio(`common/rat/bolt${ratCounter}.wav`).play();
+        ratCounter += 1;
+        if (ratCounter == 3) {
+            ratCounter = 0;
+        }
+    }
+</script>
+
+<footer>
+    <div class="text-container">
+        <p>〔 2023–2025 〕<i>denizk0461</i></p>
+    </div>
+    <img onclick={playSound} title="the bottom rat" class="bottom-rat clickable" src="common/rat/spookyrat.webp">
+</footer>
+
+<style>
+    footer {
+        background-color: var(--color-background-highlight);
+        position: absolute;
+        left: 0;
+        bottom: 0;
+        height: 120px;
+        width: 100%;
+        /* overflow: hidden; */
+        backdrop-filter: blur(6px);
+    }
+
+    footer p {
+        font-family: var(--font-mono);
+    }
+
+    .bottom-rat {
+        position: absolute;
+        width: 20%;
+        max-width: 100px;
+        right: 0;
+        bottom: 0;
+    }
+
+    .text-container {
+        height: 100%;
+        margin: auto 24px auto 48px;
+        display: flex;
+        align-items: center;
+    }
+</style>

src/lib/link-list.svelte

@@ -19,7 +19,7 @@
             {#if entry.icon}
             <img height="24px" src={entry.icon}>
             {/if}
-            {entry.text}
+            {@html entry.text}
         </a>
     </li>
     {/each}
@@ -42,6 +42,18 @@
         margin-bottom: 4px;
         transition: background-color 0.2s ease-in-out;
         padding: 2px 12px;
+    
+        --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);

src/lib/lists/gallery-entry.svelte

@@ -17,11 +17,11 @@
 <div class="container">
     {#each entries as entry}
     {#if entry.fullWidth}
-    <div class="entry-parent full-width">
+    <div class="entry-parent full-width notched">
         {@render galleryEntry({entry})}
     </div>
     {:else}
-    <div class="entry-parent half-width">
+    <div class="entry-parent half-width notched">
         {@render galleryEntry({entry})}
     </div>
     {/if}

src/lib/table-of-contents.svelte

@@ -46,7 +46,7 @@
     }
 </script>
 
-<div class="toc-container">
+<div class="toc-container notched">
     <ul class="toc-list" bind:this={container}>
     </ul>
 </div>

src/routes/+layout.svelte

@@ -15,9 +15,9 @@
 <Footer />
 
 <style>
-    :global {
-        @import url('https://fonts.upset.dev/css2?family=Reddit+Mono:wght@200..900&family=Reddit+Sans+Condensed:wght@200..900&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
+    @import url('https://fonts.upset.dev/css2?family=Reddit+Mono:wght@200..900&family=Reddit+Sans+Condensed:wght@200..900&family=Reddit+Sans:ital,wght@0,200..900;1,200..900&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');
 
+    :global {
         :root {
             --color-text: #e0e0e0;
             --color-text-img: invert(98%) sepia(1%) saturate(4643%) hue-rotate(297deg) brightness(115%) contrast(76%);
@@ -32,11 +32,13 @@
 
             --notch-size: 32px;
             --notch-size-small: 16px;
-            --notch-size-link: 10px;
 
             --color-link-unvisited: #c2e8ff;
             --color-link-visited: #ffd7f0;
             --color-link-hovered: #ffdad5;
+
+            --font-sans-serif: 'Reddit Sans', 'Lato', sans-serif;
+            --font-mono: 'Reddit Mono', monospace;
         }
 
         html {
@@ -49,7 +51,7 @@
             margin: 0 auto 228px;
             max-width: 1200px;
             
-            font-family: 'Reddit Sans', 'Lato', sans-serif;
+            font-family: var(--font-sans-serif);
             font-size: 1.1rem;
             color: var(--color-text); /* text colour */
             
@@ -101,7 +103,7 @@
         }
 
         code, .code-block {
-            font-family: 'Reddit Mono', monospace;
+            font-family: var(--font-mono);
             font-size: 0.9em;
             background-color: var(--color-background-highlight);
             /* color: var(--color-background); */

src/routes/projects/+page.svelte

@@ -4,6 +4,7 @@
     import type { Project } from './projects';
     import { projects } from './projects';
     import { browser } from '$app/environment';
+    import LinkList from "$lib/link-list.svelte";
 
     let getActiveProjects = function(projects: Project[], isActive: boolean): Project[] {
         var result: Project[] = [];
@@ -57,11 +58,7 @@
         {#each project.paragraphs as paragraph}
             <p>{@html paragraph}</p>
         {/each}
-        <ul>
-            {#each project.links as link}
-                <li><a href="{link.link}">{@html link.text}</a></li>
-            {/each}
-        </ul>
+        <LinkList entries={project.links} />
     </div>
 {/snippet}