added notches and footer

2025-04-04 19:00:47 +02:00
parent 060b66a1be
commit 6a1a184b7b
11 changed files with 75 additions and 16 deletions
--- a/src/lib/footer.svelte
+++ b/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>