adjusted bottom margin of footer; images on projects page now shrink on mobile

src/lib/viewport/content-sidebar.svelte

@@ -0,0 +1,33 @@
+<div class="content">
+    <div class="side">
+        <slot name="side-left" />
+    </div>
+    <div class="main">
+        <slot name="main" />
+    </div>
+</div>
+
+<style>
+    .content {
+        max-width: 2000px;
+        margin: 0 auto;
+        display: flex;
+        flex-direction: row;
+        padding: 0 24px;
+    }
+    .side {
+        min-width: 400px;
+    }
+
+    @media screen and (max-width: 800px) {
+        .content {
+            padding: 0 8px;
+            flex-direction: column;
+        }
+
+        .side {
+            min-width: 0;
+            width: 100%;
+        }
+    }
+</style>

src/lib/viewport/content.svelte

@@ -0,0 +1,23 @@
+<script lang="ts">
+    let { children } = $props();
+</script>
+
+<div class="main-content">
+    {@render children()}
+</div>
+
+<style>
+    .main-content {
+        width: 100%;
+        max-width: var(--page-width);
+        box-sizing: border-box;
+        margin: 0 auto;
+        padding: 0 24px;
+    }
+
+    @media screen and (max-width: 800px) {
+        .main-content {
+            padding: 0 8px;
+        }
+    }
+</style>

src/lib/viewport/footer.svelte

@@ -0,0 +1,119 @@
+<script lang="ts">
+    var ratCounter = 0;
+
+    let playSound = function() {
+        let bolt = new Audio(`common/rat/bolt${ratCounter}.wav`)
+        bolt.volume = 0.2;
+        bolt.play();
+        ratCounter += 1;
+        if (ratCounter == 3) {
+            ratCounter = 0;
+        }
+    }
+</script>
+
+<footer>
+    <div class="background">
+        <hr>
+        <div class="content-container">
+            <div class="content-box center-box">
+                <p>〔 2023–2026 〕denizk0461</p>
+            </div>
+            <div class="content-box">
+                <h6>Content</h6>
+                <a href="/projects">Projects</a>
+                <a href="/blog">Blog</a>
+                <a href="/about">About</a>
+            </div>
+            <div class="content-box">
+                <h6>Meta</h6>
+                <a href="/feeds">Feeds</a>
+                <a href="https://codeberg.org/denizk0461/pages-svelte">Page Source</a>
+                <a href="/privacy">Privacy & Cookies</a>
+            </div>
+        </div>
+        <input
+            type="image"
+            onclick={playSound} 
+            title="the bottom rat" 
+            alt="the bottom rat" 
+            class="bottom-rat" 
+            src="/common/rat/spookyrat.webp">
+    </div>
+</footer>
+
+<style>
+    footer {
+        margin-top: auto;
+        width: 100%;
+    }
+
+    footer h6 {
+        font-family: var(--font-mono);
+    }
+
+    footer p, footer a {
+        display: block;
+        font-family: var(--font-mono);
+        font-weight: 400;
+        color: var(--color-text);
+        text-decoration: none;
+        font-size: 1rem;
+        margin: 0;
+    }
+
+    footer a:hover {
+        font-weight: 700;
+    }
+
+    .bottom-rat {
+        position: absolute;
+        width: 20%;
+        max-width: 100px;
+        right: 0;
+        bottom: 0;
+    }
+
+    .background {
+        background-color: var(--color-background-highlight);
+        backdrop-filter: blur(6px);
+        margin-top: 32px;
+    }
+
+    .content-container {
+        box-sizing: border-box;
+        max-width: var(--page-width);
+        margin: 0 auto;
+        padding: 0 var(--margin-content-side);
+        display: flex;
+        flex-flow: row;
+        gap: 16px;
+        justify-content: space-evenly;
+        align-items: flex-start;
+        padding-bottom: 16px;
+    }
+
+    .content-box {
+        width: 100%;
+        margin: 16px 0;
+    }
+
+    .center-box {
+        margin: auto 0;
+    }
+
+    @media screen and (max-width: 800px) {
+        .content-container {
+            flex-direction: column;
+            gap: 0;
+        }
+
+        .content-box {
+            margin: 8px 0;
+        }
+
+        .center-box {
+            margin: 16px 0 8px;
+        }
+    }
+</style>

src/lib/viewport/header.svelte

@@ -0,0 +1,47 @@
+{#snippet headerContent()}
+    <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">
+    {@render headerContent()}
+</div>
+
+<style>
+    .header-content {
+        box-sizing: border-box;
+        width: 100%;
+        max-width: var(--page-width);
+        /* min-height: 72px; */
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start;
+        gap: 16px;
+        align-items: center;
+        padding: 0 var(--margin-content-side);
+        margin: 0 auto;
+    }
+
+    a {
+        font-family: var(--font-stylised);
+        font-size: 1rem;
+        font-weight: bold;
+        text-decoration: none;
+    }
+    
+    a:link {
+        color: var(--color-text);
+    }
+    /* visited link */
+    a:visited {
+        color: var(--color-text);
+    }
+    /* mouse over link */
+    a:hover {
+        color: var(--color-highlight);
+        /* text-decoration: underline dashed 2px var(--color-highlight); */
+    }
+</style>