pages/src/lib/footer.svelte

<script lang="ts">
    import SeparatorLine from "./separator-line.svelte";

    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>
    <SeparatorLine noMargin />
    
    <div class="content-container">
        <div class="content-box center-box">
            <p>〔 2023–2025 〕denizk0461</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"
        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);
        position: absolute;
        left: 0;
        bottom: 0;
        /* height: 120px; */
        width: 100%;
        backdrop-filter: blur(6px);
    }

    footer h6 {
        font-family: var(--font-mono);
        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 {
        position: absolute;
        width: 20%;
        max-width: 100px;
        right: 0;
        bottom: 0;
    }

    .content-container {
        height: 100%;
        margin: 0 24px 0 48px;
        display: flex;
        /* 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>