119 lines
2.6 KiB
Svelte
119 lines
2.6 KiB
Svelte
<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> |