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

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>