---
import BaseHead from '../components/BaseHead.astro'
import Nav from '../components/Nav.astro'
import Progress from '../components/Progress.svelte'

interface Props {
  title?: string
  image?: string
}
---

<!doctype html>
<html lang="en">
  <head>
    <BaseHead {...Astro.props} />
  </head>
  <body>
    <Nav />
    <main>
      <slot />
    </main>
    <Progress client:only="svelte" />
  </body>
</html>

<style>
  main {
    padding-left: 3.5rem;
    margin: o auto;
  }

  @media screen and (max-width: 30rem) {
    main {
      padding-left: 2.5rem;
    }
  }
</style>
