---
import "mdui/mdui.css"
import TopBar from "../components/TopBar.astro"
import BottomBar from "../components/BottomBar.astro"
import "../styles/global.css"
---

<!doctype html>
<html lang="en" class="mdui-theme-dark" data-scroll="0">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width" />
        <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
        <link
            href="https://fonts.googleapis.com/icon?family=Material+Icons"
            rel="stylesheet"
        />
        <meta name="generator" content={Astro.generator} />
        <title>Henry Hiles - Home</title>
    </head>
    <body>
        <TopBar />
        <main><slot /></main>
        <BottomBar />
    </body>
</html>

<script>
    import { setColorScheme } from "mdui"
    setColorScheme("#4e94e4")

    const setScroll = () =>
        (document.documentElement.dataset.scroll = window.scrollY.toString())
    document.addEventListener("scroll", setScroll)
    document.addEventListener("DOMContentLoaded", setScroll)
</script>
