Setting the file. One moment.
Subchapter 7.74
references/portfolio/app-astro/layouts/SiteLayout.astro
ASTRO40 lines2 KB
---
// The site chrome for every portfolio page — THIS file (header/footer/nav) plus the @theme
// token block in src/styles/global.css are what you brand. Keep the <slot name="seo-tags" />
// in <head> and the global.css import. (Deploy is fill-only: if another vertical is already
// deployed, its SiteLayout won — merge a Portfolio nav link there instead.)
import "../styles/global.css";
interface Props {
title: string;
description?: string;
}
const { title, description } = Astro.props;
---
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>{title}</title>
{description && <meta name="description" content={description} />}
<slot name="seo-tags" />
</head>
<body>
<header class="sticky top-0 z-40 border-b border-border bg-background/80 backdrop-blur">
<div class="mx-auto flex h-16 max-w-6xl items-center justify-between px-6">
<a href="/" class="text-base font-bold tracking-tight text-foreground no-underline">Brand Name</a>
<nav class="flex items-center gap-6 text-sm">
<a href="/portfolio" class="text-foreground no-underline transition-colors hover:text-muted-foreground">Portfolio</a>
</nav>
</div>
</header>
<main class="mx-auto max-w-6xl px-6 pb-24 pt-10">
<slot />
</main>
<footer class="border-t border-border px-6 py-10 text-center text-sm text-muted-foreground">
© Brand Name
</footer>
</body>
</html>