From 7c5310f2b160f08cb17279c4a6453b40d96061d7 Mon Sep 17 00:00:00 2001
From: denizk0461 <denizk0461@mailbox.org>
Date: Sat, 10 Jan 2026 19:40:32 +0100
Subject: [PATCH] fixed footer height and position

---
 src/lib/footer.svelte     | 63 ++++++++++++++++++++-------------------
 src/routes/+layout.svelte |  1 +
 2 files changed, 34 insertions(+), 30 deletions(-)

diff --git a/src/lib/footer.svelte b/src/lib/footer.svelte
index 779d450..055373b 100644
--- a/src/lib/footer.svelte
+++ b/src/lib/footer.svelte
@@ -15,41 +15,40 @@
 </script>
 
 <footer>
-    <SeparatorLine noMargin />
-    
-    <div class="content-container">
-        <div class="content-box center-box">
-            <p>〔 2023–2026 〕denizk0461</p>
+    <div class="background">
+        <SeparatorLine noMargin />
+        <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 class="content-box"></div>
         </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 class="content-box"></div>
+        <input
+            type="image"
+            onclick={playSound} 
+            title="the bottom rat" 
+            alt="the bottom rat" 
+            class="bottom-rat" 
+            src="/common/rat/spookyrat.webp">
     </div>
-    <input
-        type="image"
-        onclick={playSound} 
-        title="the bottom rat" 
-        alt="the bottom rat" 
-        class="bottom-rat" 
-        src="/common/rat/spookyrat.webp">
 </footer>
 
 <style>
     footer {
-        background-color: var(--color-background-highlight);
-        margin-top: 40px;
+        margin-top: auto;
         width: 100%;
-        backdrop-filter: blur(6px);
     }
 
     footer h6 {
@@ -78,11 +77,15 @@
         bottom: 0;
     }
 
+    .background {
+        background-color: var(--color-background-highlight);
+        backdrop-filter: blur(6px);
+        margin-top: 32px;
+    }
+
     .content-container {
-        height: 100%;
         margin: 0 24px 0 48px;
         display: flex;
-        /* align-items: center; */
         flex-flow: row;
         gap: 16px;
         justify-content: space-evenly;
diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte
index 63ad2c0..d30db1d 100644
--- a/src/routes/+layout.svelte
+++ b/src/routes/+layout.svelte
@@ -104,6 +104,7 @@
         .all-content-container {
             display: flex;
             flex-direction: column;
+            height: 100vh;
             /* max-width: 100%; */
         }