lukeonline - src/layouts/Base.astro
---
import '../styles/global.css'
import Head from '../components/Head.astro'
import Header from '../components/Header.astro'
import Footer from '../components/Footer.astro'
import Heading from '../components/Heading.astro'
import { BASE_LAYOUT_STYLING, SITE_TITLE } from '../consts.ts'
const { ...props } = Astro.props
---
<html>
<Head title={`${SITE_TITLE} - ${props.title}`} />
<body
class="flex w-full flex-col gap-3 p-4 text-base md:m-auto md:w-3xl md:p-8"
>
<span class="text-3xl font-bold">Luke Jones</span>
<div class={`${BASE_LAYOUT_STYLING}`}>
<Header />
<main class="flex flex-col gap-3">
<Heading level={1}>{props.title}</Heading>
<slot />
</main>
<Footer />
</div>
</body>
</html>