firq-dev-website/src/layouts/customFooter.astro

114 lines
3.2 KiB
Text

---
import okita from '@assets/okita.png'
import atlas from '@assets/atlas.png'
import foxcat from '@assets/lurker.png'
import padoru from '@assets/padoru.png'
import { Image } from 'astro:assets'
import packagejson from '../../package.json'
const version = packagejson.version
const release = `https://forgejo.neshweb.net/Firq/firq-dev-website/releases/tag/${version}`
---
<footer>
<div>
“Fate/Grand Order” is a trademark of Notes Co., Ltd. | Game Assets ©
Aniplex Inc. used under fair use. | View <a
class="linker"
href="https://fate-go.us"
target="_blank"
rel="noopener noreferrer">the official website</a
> for more information.<br />
I am in no way affiliated with Fate/Grand Order, Aniplex, Type Moon or
Lasengle. I claim no ownership of any of the assets used that are created by
any of the mentioned companies.<br />
All of the opinions expressed are my own and may not reflect those of the
asset providers.
</div>
<br />
<div>
Thanks to <a
href=" https://atlasacademy.io/"
target="_blank"
rel="noopener noreferrer">Atlas Academy</a
> for providing the servant and ce images.
<div class="sticky-image-wrapper">
<Image src={atlas} alt="Icon of Atlas Academy" />
</div>
</div>
<br />
<div>
Thanks to <a
href="https://mitsunee.com"
target="_blank"
rel="noopener noreferrer">Mitsunee</a
> for the support when building this site. I could not have done it without
you 🧡 Check out <a
href="https://mitsunee.com"
target="_blank"
rel="noopener noreferrer">her own website here</a
>
<div class="sticky-image-wrapper">
<Image src={foxcat} alt="Best Foxcat" />
</div>
</div>
<br />
<div>
Thanks to <a
href="https://mastodon.neshweb.net/@neshura"
target="_blank"
rel="noopener noreferrer">Neshura</a
> for providing me with a place to develop, store and host this site. Check
out
<a href="https://www.neshweb.net" target="_blank" rel="noopener noreferrer"
>his site here</a
>
<div class="sticky-image-wrapper">
<Image src={okita} alt="" style="height:67px" />
</div>
</div>
<br />
<div>
Thanks to <a
href="https://twitter.com/its_Anthony_J"
target="_blank"
rel="noopener noreferrer">AnthonyJ</a
> for providing me with the custom Shishou favicon.
<div class="sticky-image-wrapper">
<Image src={padoru} alt="Hashire sori yo ..." width={64} height={64} quality={100}/>
</div>
</div>
<br />
<div>
Website version: <a href={release} target="_blank" rel="noopener noreferrer"
>{version}</a
>
</div>
</footer>
<style>
footer {
color: var(--c-primary-text);
bottom: 0;
}
footer > div > a {
color: var(--c-primary-text);
}
.sticky-image-wrapper {
position: fixed;
bottom: 0;
right: 50%;
}
:hover > .sticky-image-wrapper > img {
transform: translate(-50%, -100px);
}
.sticky-image-wrapper > img {
display: block;
position: absolute;
bottom: -100px;
height: 64px;
width: 64px;
transition: transform var(--a-time-slow) var(--a-animation-1);
transform: translateX(-50%);
}
</style>