112 lines
3.4 KiB
Vue
112 lines
3.4 KiB
Vue
<template>
|
|
<footer>
|
|
<div class="separator">
|
|
Made by Natty · See us on Fedi:
|
|
<a href="https://astolfo.social/@natty" target="_blank">
|
|
@natty@astolfo.social
|
|
</a>
|
|
</div>
|
|
<div class="content">
|
|
<div>
|
|
<div></div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<div class="banners">
|
|
<img
|
|
src="~/assets/88x31/blobfox.png"
|
|
alt="A banner of a stylized fox looking like a fluffy blob"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h2>See also:</h2>
|
|
<small>(Message us and we'll add your banner)</small>
|
|
<div class="banners">
|
|
<a href="https://lunareclipse.zone" target="_blank">
|
|
<img
|
|
src="~/assets/88x31/lunar-eclipse-zone.gif"
|
|
alt="A banner of a crimson-red moon captioned Lunar Eclipse Zone"
|
|
title="lunareclipse.zone"
|
|
/>
|
|
</a>
|
|
<a href="https://pinkcreeper100.pages.gay" target="_blank">
|
|
<img
|
|
src="~/assets/88x31/pc100.png"
|
|
alt='A banner with a pink creeper face labeled "pc100"'
|
|
title="pinkcreeper100.pages.gay"
|
|
/>
|
|
</a>
|
|
<a href="https://zvava.org" target="_blank">
|
|
<img
|
|
src="~/assets/88x31/zvava.org.png"
|
|
alt="A purple-ish banner for zvava.org"
|
|
title="zvava.org"
|
|
/>
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="footer-section">
|
|
<h2>Webrings</h2>
|
|
<div>[not yet]</div>
|
|
</div>
|
|
</div>
|
|
</footer>
|
|
</template>
|
|
<style lang="scss" scoped>
|
|
footer {
|
|
margin-top: 20px;
|
|
|
|
.separator {
|
|
background-color: $glass-surface;
|
|
border-top-right-radius: 5px;
|
|
border-top-left-radius: 5px;
|
|
backdrop-filter: blur(2px);
|
|
padding: 10px;
|
|
color: $ui-surface-bg;
|
|
border-top: 3px double $glass-surface;
|
|
border-left: 3px double $glass-surface;
|
|
border-right: 3px double $glass-surface;
|
|
|
|
& a {
|
|
&:link,
|
|
&:hover,
|
|
&:visited {
|
|
color: $ui-surface-bg;
|
|
}
|
|
}
|
|
}
|
|
border-top-right-radius: 5px;
|
|
border-top-left-radius: 5px;
|
|
max-width: 1400px;
|
|
align-self: center;
|
|
width: 100vw;
|
|
box-shadow: 0px 0px 10px $ui-hover-fg;
|
|
|
|
.content {
|
|
background-color: $ui-surface-bg;
|
|
padding: 5px 5px 20px 5px;
|
|
box-sizing: border-box;
|
|
border-left: 3px double $primary-surface;
|
|
border-right: 3px double $primary-surface;
|
|
|
|
& .footer-section {
|
|
h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
& .banners {
|
|
display: flex;
|
|
flex-direction: row;
|
|
gap: 4px;
|
|
margin: 4px 0px;
|
|
|
|
& img {
|
|
display: inline-block;
|
|
height: 31px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|