Footer.astro

---
import Default from "@astrojs/starlight/components/Footer.astro";
import type { StarlightRouteData } from "node_modules/@astrojs/starlight/utils/route-data";
import NavLinks from "@components/NavLinks.astro";

const isFrontPage = Astro.url.pathname === "/";
---

{
    isFrontPage ? (
        <>
            <hr class="mt-32" />
            <footer class="absolute left-0 h-16 w-screen bg-gradient-to-b from-accent-300/50 to-transparent dark:from-gray-600/50">
                <div
                    class="absolute flex h-16 -translate-y-3 translate-x-3 flex-row items-center gap-4 bg-white px-8 outline outline-1 outline-gray-900
            dark:bg-gray-900 dark:outline-gray-200 sm:-translate-y-6 sm:translate-x-6 sm:gap-8 sm:px-16"
                >
                    <NavLinks {...Astro.props} />
                </div>
            </footer>
        </>
    ) : (
        <Default {...(Astro.props as StarlightRouteData)} />
    )
}

<style is:inline>
    @media screen and (max-width: 400px) {
        footer div {
            --tw-translate-x: 0 !important;
            --tw-translate-y: 0 !important;
            flex-wrap: wrap;
            padding-right: 6rem !important;
            padding-top: 1rem;
            padding-bottom: 1rem;
            height: min-content !important;
            line-height: 1.2;
        }
    }
</style>