---
import '@/styles/global.css'
import '@/styles/typography.css'

import Footer from '@/components/Footer.astro'
import Head from '@/components/Head.astro'
import Header from '@/components/Header.astro'
import { SITE } from '@/consts'
---

<!doctype html>
<html class="bg-background text-foreground" lang={SITE.locale}>
  <Head>
    <slot name="head" />
  </Head>
  <body class="overflow-x-hidden">
    <div class="flex h-fit min-h-screen flex-col gap-y-6 font-sans">
      <div
        class="bg-background/50 sticky top-0 z-50 divide-y backdrop-blur-sm xl:divide-none"
      >
        <Header />
        <slot name="subposts-navigation" />
        <slot name="table-of-contents" />
      </div>
      <main class="grow">
        <div class="mx-auto flex max-w-6xl grow flex-col gap-y-6 px-4">
          <slot />
        </div>
      </main>
      <Footer />
    </div>
  </body>
</html>
