---
import Header from '../components/Header.astro';
import Footer from '../components/Footer.astro';
import '../styles/global.css';
const { pageTitle } = Astro.props;
---
<!DOCTYPE html>
<html transition:animate="none" lang="en">
	<head>
        <meta charset="utf-8" />
        <meta name="description" content="Astro description">
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link rel="preconnect" href="https://fonts.googleapis.com">
        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
        <link rel="preload" href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Pacifico&display=swap" as="style">
        <link href="https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Pacifico&display=swap" rel="stylesheet">       
        <meta name="generator" content={Astro.generator} />
        <title>{pageTitle}</title>
	</head>
	<body>
        <Header />
        <main>
            <slot />
            <Footer />
        </main>
        <script>
            function colorMode() {
                if (
                    localStorage.theme === "light" ||
                    (!("theme" in localStorage) &&
                    window.matchMedia("(prefers-color-scheme: light)").matches)
                ) {
                    document.documentElement.classList.add("light");
                } else {
                    document.documentElement.classList.remove("light");
                }
              }
            
            colorMode();
            document.addEventListener('astro:after-swap', colorMode);
        </script>
	</body>
</html>

