Site Layout

1---
2// The site chrome for every CMS page — THIS file (header/footer/nav) plus the @theme token
3// block in src/styles/global.css are what you brand. Keep the <slot name="seo-tags" /> in
4// <head> and the global.css import. Add one nav link per content surface you build (the
5// routes are yours — CMS ships no fixed pages). (If another vertical is also deployed, its
6// SiteLayout won; merge nav links there instead.)
7import "../styles/global.css";
8
9interface Props {
10  title: string;
11  description?: string;
12}
13const { title, description } = Astro.props;
14---
15
16<!doctype html>
17<html lang="en">
18  <head>
19    <meta charset="UTF-8" />
20    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
21    <title>{title}</title>
22    {description && <meta name="description" content={description} />}
23    <slot name="seo-tags" />
24  </head>
25  <body>
26    <header class="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur">
27      <div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
28        <a href="/" class="text-base font-bold tracking-tight text-foreground no-underline">Brand Name</a>
29        <nav class="flex items-center gap-6 text-sm">
30          <!-- one link per content surface you build, e.g. <a href="/recipes">Recipes</a> -->
31        </nav>
32      </div>
33    </header>
34    <main class="mx-auto max-w-6xl px-6 pb-24 pt-10">
35      <slot />
36    </main>
37    <footer class="border-t border-border px-6 py-10 text-center text-sm text-muted-foreground">
38      © Brand Name
39    </footer>
40  </body>
41</html>