updated footer and project readme

README.md

@@ -1,3 +1,5 @@
 # pages-svelte
 
-Svelte repository for my website hosted at [https://denizk0461.codeberg.page/](https://denizk0461.codeberg.page/)
+SvelteKit repository for my website hosted at [https://denizk0461.dev/](https://denizk0461.dev/)
+
+![Screenshot of the website's main page](website-screenshot.webp)

src/lib/footer.svelte

@@ -1,7 +1,12 @@
 <script lang="ts">
+    import SeparatorLine from "./separator-line.svelte";
+
     var ratCounter = 0;
+
     let playSound = function() {
-        new Audio(`common/rat/bolt${ratCounter}.wav`).play();
+        let bolt = new Audio(`common/rat/bolt${ratCounter}.wav`)
+        bolt.volume = 0.2;
+        bolt.play();
         ratCounter += 1;
         if (ratCounter == 3) {
             ratCounter = 0;
@@ -10,12 +15,26 @@
 </script>
 
 <footer>
-    <div class="text-container">
+    <SeparatorLine noMargin />
+    <div class="content-container">
+        <div class="content-box center-box">
             <p>〔 2023–2025 〕<i>denizk0461</i></p>
         </div>
+        <div class="content-box">
+            <h6>Content</h6>
+            <a href="/projects">Projects</a>
+            <a href="/garden">Garden</a>
+            <a href="/about">About</a>
+        </div>
+        <div class="content-box">
+            <h6>Meta</h6>
+            <a href="https://codeberg.org/denizk0461/pages-svelte">Page Source</a>
+        </div>
+        <div class="content-box"></div>
+    </div>
     <input
         type="image"
-        on:click={playSound} 
+        onclick={playSound} 
         title="the bottom rat" 
         alt="the bottom rat" 
         class="bottom-rat" 
@@ -28,14 +47,28 @@
         position: absolute;
         left: 0;
         bottom: 0;
-        height: 120px;
+        /* height: 120px; */
         width: 100%;
         backdrop-filter: blur(6px);
     }
 
-    footer p {
+    footer h6 {
         font-family: var(--font-mono);
-        font-weight: 500;
+        font-style: italic;
+    }
+
+    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: 900;
     }
 
     .bottom-rat {
@@ -46,10 +79,23 @@
         bottom: 0;
     }
 
-    .text-container {
+    .content-container {
         height: 100%;
-        margin: auto 24px auto 48px;
+        margin: 0 24px 0 48px;
         display: flex;
-        align-items: center;
+        /* align-items: center; */
+        flex-flow: row;
+        gap: 16px;
+        justify-content: space-evenly;
+        align-items: flex-start;
+    }
+
+    .content-box {
+        width: 100%;
+        margin: 16px 0;
+    }
+
+    .center-box {
+        margin: auto 0;
     }
 </style>

src/lib/separator-line.svelte

@@ -1,11 +1,21 @@
-<hr>
+<script lang="ts">
+    let {
+        noMargin,
+    }: {
+        noMargin: boolean;
+    } = $props();
+</script>
+
+{#if noMargin}
+    <hr style="margin-top: 0px; margin-bottom: 0px;">
+{:else}
+    <hr style="margin-top: 20px; margin-bottom: 20px;">
+{/if}
 
 <style>
     hr {
         width: 100%;
         height: 1px;
-        margin-top: 20px;
-        margin-bottom: 20px;
         border: none;
         border-top: 2px dashed var(--color-highlight);
     }