2 files changed, 34 insertions, 10 deletions
diff --git a/src/layouts/Default.astro b/src/layouts/Default.astro
index ecc4e2e..29662c6 100644
--- a/src/layouts/Default.astro
+++ b/src/layouts/Default.astro
@@ -1,18 +1,19 @@
 ---
 interface Props {
 	title: string;
-	description: string; 
+	description: string;
 }
 
 const { title, description } = Astro.props;
-import { ViewTransitions } from 'astro:transitions';
-import Navbar from '../components/Navbar.astro';
+import { ViewTransitions, slide } from 'astro:transitions';
+import Navbar from '../components/Navbar.vue';
 ---
 
 <!doctype html>
 <html lang="en">
 	<head>
 		<meta charset="UTF-8" />
+		<meta name="title" content={title} />
 		<meta name="description" content={description} />
 		<meta name="viewport" content="width=device-width" />
 		<link rel="preconnect" href="https://fonts.googleapis.com">
@@ -24,11 +25,13 @@ import Navbar from '../components/Navbar.astro';
 		<title>{title}</title>
 	</head>
 	<body>
-	<Navbar />
+	<Navbar client:load />
+	<div transition:animate={slide({ duration: '0.2s' })}>
 		<slot />
-	<footer>
-		<p>Copyright &copy; 2024 Andrew Lee</p>
-	</footer>
+		<footer>
+			<p>Copyright &copy; 2024 Andrew Lee</p>
+		</footer>
+	</div>
 	</body>
 </html>
 <style is:global>
@@ -40,6 +43,11 @@ import Navbar from '../components/Navbar.astro';
 		color: #FFFFFF;
 	}
 
+	ul {
+		padding-left: 20px;
+		font-size: 1.1em;
+	}
+
 	footer {
 		text-align: center;
 		font-size: 1.3em;
diff --git a/src/layouts/Page.astro b/src/layouts/Page.astro
index b0f202a..9b8dd8f 100644
--- a/src/layouts/Page.astro
+++ b/src/layouts/Page.astro
@@ -3,15 +3,31 @@ import Layout from './Default.astro';
 const { title, description } = Astro.props;
 ---
 
-<Layout title=`${title} | Andrew Lee` description={description}>
+<Layout title=`${title} - Andrew Lee` description={description}>
     <header>
-        <h1>{title}</h1>
-        <h2>{description}</h2>
+        <h1 class="header-text">{title}</h1>
+        <h2 class="header-text">{description}</h2>
     </header>
 </Layout>
 
 <style>
     header {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5em;
+        margin: 0;
+        padding: 0;
         text-align: center;
     }
+
+    .header-text {
+        font-size: 2em;
+        margin: 0;
+    }
+
+    h2.header-text {
+        font-size: 1.5em;
+        font-weight: 300;
+    }
+
 </style>