3 files changed, 53 insertions, 17 deletions
diff --git a/src/layouts/Base.astro b/src/layouts/Base.astro
new file mode 100644
index 0000000..6ec66c5
--- /dev/null
+++ b/src/layouts/Base.astro
@@ -0,0 +1,37 @@
+---
+import "@fontsource-variable/noto-sans";
+import "@fontsource/noto-sans-mono";
+
+import NavBar from "@components/NavBar.astro";
+import "@styles/main.css";
+
+const { title, description } = Astro.props.frontmatter || Astro.props;
+---
+
+<!doctype html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8" />
+		<title>{title}</title>
+		<meta name="viewport" content="width=device-width,initial-scale=1" />
+		<meta name="description" content={description} />
+		<link rel="sitemap" href="/sitemap-index.xml" />
+	</head>
+
+	<body>
+		<h1><b>getchoo's website 🚀</b></h1>
+		<slot name="nav">
+			<nav>
+				<slot name="extra_nav" />
+				<NavBar />
+			</nav>
+		</slot>
+		<slot />
+		<slot name="footer">
+			<footer>
+				<slot name="extra_footer" />
+				<a href="https://github.com/getchoo/website">source code</a>
+			</footer>
+		</slot>
+	</body>
+</html>
diff --git a/src/layouts/Index.astro b/src/layouts/Index.astro
new file mode 100644
index 0000000..b8e1945
--- /dev/null
+++ b/src/layouts/Index.astro
@@ -0,0 +1,11 @@
+---
+import Base from "@layouts/Base.astro";
+import Gifs from "@components/Gifs.astro";
+
+const { title, description } = Astro.props.frontmatter;
+---
+
+<Base title={title} description={description}>
+	<slot />
+	<Gifs slot="extra_footer" />
+</Base>
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index d8e216b..72512e2 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -1,20 +1,8 @@
 ---
-import Footer from "@components/Footer.astro";
-import Head from "@components/Head.astro";
-import Nav from "@components/Nav.astro";
-
-const { frontmatter } = Astro.props;
+import Base from "@layouts/Base.astro";
+const { title, description } = Astro.props.frontmatter || Astro.props;
 ---
 
-<!doctype html>
-<html lang="en">
-	<Head title={frontmatter.title} description={frontmatter.description} />
-	<body
-		class="bg-base text-text p-5 lg:p-0 text-md md:text-lg antialiased max-w-screen-md mx-auto my-10"
-	>
-		<h1><b>getchoo's website 🚀</b></h1>
-		<Nav />
-		<slot />
-		<Footer />
-	</body>
-</html>
+<Base title={title} description={description}>
+	<slot />
+</Base>