---
import { ThemeToggle } from "../components/ThemeToggle";
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" />
<meta name="description" content={description} />
<title>{title}</title>
<link rel="icon" type="image/svg+xml" href={`${import.meta.env.BASE_URL}favicon.svg`} />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<script is:inline>
const theme = (() => {
if (
typeof localStorage !== "undefined" &&
localStorage.getItem("theme")
) {
return localStorage.getItem("theme");
}
if (window.matchMedia("(prefers-color-scheme: dark)").matches) {
return "dark";
}
return "light";
})();
document.documentElement.setAttribute("data-theme", theme);
</script>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family:
"Inter",
-apple-system,
BlinkMacSystemFont,
"Segoe UI",
Roboto,
sans-serif;
background-color: var(--background);
color: var(--text-primary);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
}
</style>
</head>
<body>
<header
class="fixed top-0 left-0 right-0 z-50 bg-[var(--background)]/80 backdrop-blur-sm border-b border-[var(--border)]"
>
<div
class="container mx-auto px-6 h-16 flex items-center justify-between"
>
<a
href={import.meta.env.BASE_URL}
class="flex items-center gap-2 font-bold"
style="color: var(--text-primary);"
>
<span
class="w-8 h-8 rounded-lg bg-[var(--accent)] text-white flex items-center justify-center text-sm"
>jjj</span
>
<span>Jujutsu Juggler</span>
</a>
<nav class="flex items-center gap-4">
<a
href={`${import.meta.env.BASE_URL}getting-started/installation`}
class="hover:text-[var(--accent)] transition-colors"
style="color: var(--text-secondary);"
>
Docs
</a>
<a
href="https://github.com/doug/jjj"
class="hover:text-[var(--accent)] transition-colors"
style="color: var(--text-secondary);"
target="_blank"
>
GitHub
</a>
<ThemeToggle client:load />
</nav>
</div>
</header>
<div class="pt-16">
<slot />
</div>
<footer
class="border-t border-[var(--border)] py-8"
style="background-color: var(--surface);"
>
<div
class="container mx-auto px-6 flex flex-col sm:flex-row items-center justify-between gap-4 text-sm"
style="color: var(--text-secondary);"
>
<span>© 2025 jjj — Jujutsu Juggler. Apache-2.0 License.</span>
<nav class="flex items-center gap-6">
<a
href={`${import.meta.env.BASE_URL}getting-started/installation`}
class="hover:text-[var(--accent)] transition-colors"
>
Docs
</a>
<a
href="https://github.com/doug/jjj"
class="hover:text-[var(--accent)] transition-colors"
target="_blank"
rel="noopener noreferrer"
>
GitHub
</a>
<a
href="https://github.com/doug/jjj/issues"
class="hover:text-[var(--accent)] transition-colors"
target="_blank"
rel="noopener noreferrer"
>
Issues
</a>
</nav>
</div>
</footer>
</body>
</html>