86 lines
1.8 KiB
Svelte
86 lines
1.8 KiB
Svelte
<script>
|
|
import git from '$lib/assets/git-branch-fill.svg';
|
|
import rss from '$lib/assets/rss-fill.svg';
|
|
</script>
|
|
|
|
<div class="footer">
|
|
<div>
|
|
<span class="label"
|
|
>Made<span class="secretIngredient"> with 🤘</span> by </span
|
|
>
|
|
<a href="https://metalhead.club/@aymm" rel="me"
|
|
>@aymm<span class="mastodonInstance">@metalhead.club</span></a
|
|
>
|
|
</div>
|
|
|
|
|
<div>
|
|
<a href="https://phlaym.net/git/phlaym/moshing-mammut">
|
|
<img alt="Git branch" src={git} class="icon" />
|
|
<span class="label">Source Code</span>
|
|
</a>
|
|
</div>
|
|
|
|
|
<div>
|
|
<a href="/feed.xml">
|
|
<img alt="RSS" src={rss} class="icon" />
|
|
<span class="label">RSS<span class="feedSuffix"> Feed</span></span>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
|
|
<style>
|
|
.footer {
|
|
position: sticky;
|
|
bottom: 0px;
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: center;
|
|
gap: 10px;
|
|
backdrop-filter: blur(10px);
|
|
-webkit-backdrop-filter: blur(10px);
|
|
background-color: var(--color-grey-translucent);
|
|
padding: 0.3em 1em;
|
|
margin: 0 -8px;
|
|
border-radius: 3px;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
}
|
|
.icon {
|
|
position: relative;
|
|
top: 0.25em;
|
|
color: white;
|
|
height: 1em;
|
|
width: 1em;
|
|
}
|
|
@media (prefers-color-scheme: dark) {
|
|
.icon {
|
|
filter: invert();
|
|
}
|
|
.footer {
|
|
background-color: var(--color-grey-translucent);
|
|
}
|
|
}
|
|
@media only screen and (max-width: 620px) {
|
|
.mastodonInstance,
|
|
.feedSuffix {
|
|
display: none;
|
|
}
|
|
.footer {
|
|
justify-content: center;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 430px) {
|
|
.mastodonInstance,
|
|
.feedSuffix,
|
|
.secretIngredient {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
@media only screen and (max-width: 370px) {
|
|
.label {
|
|
display: none;
|
|
}
|
|
}
|
|
</style>
|