adding a second layout for the home page

wylie · Jan 31, 2025 · 551ee20 · 551ee20
1 parent 3ac0173
commit 551ee20
Show file tree

Hide file tree

Showing 5 changed files with 86 additions and 2 deletions.
diff --git a/src/assets/logo-large.png b/src/assets/logo-large.png
diff --git a/src/components/Heading-home.astro b/src/components/Heading-home.astro
@@ -0,0 +1,49 @@
+---
+import Navigation from './Navigation.astro';
+import logo from '../assets/logo-large.png';
+import '../assets/global.css';
+
+const {class: className, ...rest } = Astro.props;
+---
+<header class=`header ${className}` {...rest}>
+  <div class="inner-layout">
+    <h1 class="title">
+      <img src={logo.src} class="logo-small" alt="logo" />
+    </h1>
+    <Navigation />
+  </div>
+</header>
+
+<style>
+  .title {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    font-size: 1.35rem;
+    justify-self: center;
+    align-items: center;
+    color: var(--color-primary);
+    grid-template-columns: auto;
+    grid-template-rows: auto auto;
+    margin: .5rem 0;
+    font-family: "Englebert", serif;
+    letter-spacing: 2px;
+    line-height: 1.25;
+  }
+  .title .logo-small {
+    width: 100%;
+    transition: all .3s;
+  }
+  @media screen and (min-width: 650px) {
+    .title {
+      gap: .5rem;
+      font-size: 1.75rem;
+    }
+    .title .name {
+      white-space: nowrap;
+    }
+    .title .logo-small {
+      width: 75%;
+    }
+  }
+</style>
diff --git a/src/components/Heading.astro b/src/components/Heading.astro
@@ -7,7 +7,7 @@ const {class: className, ...rest } = Astro.props;
 ---
 <header class=`header ${className}` {...rest}>
   <div class="inner-layout">
-    <h1 class="title"><span class="name">Teresa Fisher PhD.</span><img src={logoSm.src} class="logo-small" alt="logo" width="100" /><span class="llc">Milkweed Mental Health</span></h1>
+    <h1 class="title"><span class="name">Teresa B. Fisher PhD.</span><img src={logoSm.src} class="logo-small" alt="logo" width="100" /><span class="llc">Milkweed Mental Health</span></h1>
     <Navigation />
   </div>
 </header>

diff --git a/src/layouts/Layout-home.astro b/src/layouts/Layout-home.astro
@@ -0,0 +1,35 @@
+---
+import Meta from '../components/Meta.astro'
+import Heading from '../components/Heading-home.astro';
+import Footer from '../components/Footer.astro';
+import '../assets/global.css'
+---
+
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<Meta >
+	</head>
+	<body class="layout">
+		<Heading class="main-content" />
+		<main class="main-content">
+			<slot />
+		</main>
+		<Footer class="main-content" />
+	</body>
+</html>
+
+<style>
+	html,
+	body {
+		margin: 0;
+		width: 100%;
+		height: 100%;
+	}
+	.layout {
+		display: grid;
+		grid-template-rows: auto 1fr auto;
+		gap: 1rem;
+		min-height: 100vh;
+	}
+</style>
diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -1,5 +1,5 @@
 ---
-import Layout from '../layouts/Layout.astro';
+import Layout from '../layouts/Layout-home.astro';
 import Quotes from '../components/Quotes.astro';
 import '../assets/global.css';
 ---