139 lines
5.9 KiB
Plaintext
139 lines
5.9 KiB
Plaintext
---
|
|
import { Image } from "astro:assets";
|
|
import { Icon } from "astro-icon/components";
|
|
import { SITE, SOCIALS } from "@/consts";
|
|
import Container from "@/components/Container.astro";
|
|
|
|
import pictureOfMe from "@/images/me.jpg";
|
|
|
|
const CURRENT_YEAR = new Date().getFullYear();
|
|
---
|
|
|
|
<footer class="relative">
|
|
<div class="animate bg-zinc-200 dark:bg-zinc-950/50">
|
|
<section class="py-5">
|
|
<Container size="md">
|
|
<div class="flex items-center justify-center sm:justify-end">
|
|
<button
|
|
id="back-to-top"
|
|
aria-label="Back to top of page"
|
|
class="group flex w-fit p-1.5 gap-1.5 text-sm items-center border rounded hover:bg-black/15 hover:dark:bg-white/10 border-black/15 dark:border-white/20 transition-colors duration-300 ease-in-out"
|
|
>
|
|
<div class="relative overflow-hidden w-5 h-4 -mt-1">
|
|
<Icon
|
|
name="pixelarticons:arrow-up"
|
|
class:list="absolute top-0 inset-x-0 text-lg origin-bottom
|
|
scale-y-0 group-hover:scale-y-100
|
|
transition-all duration-300 ease-in-out"
|
|
/>
|
|
<Icon
|
|
name="pixelarticons:chevron-up"
|
|
class:list="absolute top-0 inset-x-0 text-lg
|
|
group-hover:translate-y-4
|
|
transition-all duration-300 ease-in-out"
|
|
/>
|
|
</div>
|
|
<div
|
|
class="w-full font-departure group-hover:text-black group-hover:dark:text-white transition-colors duration-300 ease-in-out"
|
|
>
|
|
Back to top
|
|
</div>
|
|
</button>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<section
|
|
class="py-5 overflow-hidden whitespace-nowrap border-t border-black/10 dark:border-white/25"
|
|
>
|
|
<Container size="md">
|
|
<div class="grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div class="flex flex-col items-center sm:items-start">
|
|
<a
|
|
href="/"
|
|
class="flex gap-1 w-fit font-semibold text-current hover:text-black dark:hover:text-white transition-colors duration-300 ease-in-out"
|
|
>
|
|
<Image
|
|
src={pictureOfMe}
|
|
loading="lazy"
|
|
alt="Me"
|
|
class="size-6 fill-current rounded-lg mr-2"
|
|
quality="low"
|
|
/>
|
|
{SITE.AUTHOR}
|
|
</a>
|
|
</div>
|
|
<div
|
|
class="flex gap-2 justify-center font-departure sm:justify-end items-center"
|
|
>
|
|
<span class="relative flex h-3 w-3">
|
|
<span
|
|
class="absolute inline-flex h-full w-full rounded-sm bg-green-500"
|
|
></span>
|
|
</span>
|
|
All systems normal
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
|
|
<section
|
|
class="py-5 overflow-hidden whitespace-nowrap border-t border-black/10 dark:border-white/25"
|
|
>
|
|
<Container size="md">
|
|
<div class="h-full grid grid-cols-1 sm:grid-cols-2 gap-3">
|
|
<div
|
|
class="order-2 sm:order-1 flex flex-col items-center justify-center sm:items-start"
|
|
>
|
|
<div class="text-sm font-departure mt-2">
|
|
© {CURRENT_YEAR} | All rights reserved
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
class="order-1 sm:order-2 flex justify-center sm:justify-end"
|
|
>
|
|
<div
|
|
class="flex flex-wrap gap-1 items-center justify-center"
|
|
>
|
|
{
|
|
SOCIALS.map((SOCIAL) => (
|
|
<a
|
|
href={SOCIAL.HREF}
|
|
target="_blank"
|
|
aria-label={`${SITE.TITLE} on ${SOCIAL.NAME}`}
|
|
class="group size-10 rounded-full p-2 flex items-center justify-center hover:bg-black/15 dark:hover:bg-white/20 blend"
|
|
>
|
|
<Icon
|
|
name={SOCIAL.ICON}
|
|
class:list="text-xl text-center group-hover:fill-black group-hover:dark:fill-white blend"
|
|
/>
|
|
</a>
|
|
))
|
|
}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</Container>
|
|
</section>
|
|
</div>
|
|
</footer>
|
|
|
|
<script is:inline>
|
|
function goBackToTop(event) {
|
|
event.preventDefault();
|
|
window.scrollTo({
|
|
top: 0,
|
|
behavior: "smooth",
|
|
});
|
|
}
|
|
|
|
function inintializeBackToTop() {
|
|
const backToTop = document.getElementById("back-to-top");
|
|
backToTop?.addEventListener("click", goBackToTop);
|
|
}
|
|
|
|
document.addEventListener("astro:after-swap", inintializeBackToTop);
|
|
inintializeBackToTop();
|
|
</script>
|