made header compact

amykapernick · Aug 14, 2024 · 1613e03 · 1613e03
1 parent 45d5997
commit 1613e03
Show file tree

Hide file tree

Showing 14 changed files with 144 additions and 23 deletions.
diff --git a/src/app/[[...sign-in]]/page.tsx b/src/app/[[...sign-in]]/page.tsx
@@ -1,5 +1,11 @@
 import { SignIn, SignOutButton, SignedIn, SignedOut } from "@clerk/nextjs";
 import FetchGuest from "@components/fetchData/guest";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: `Daniel & Amy's Wedding`,
+	description: "Daniel & Amy are getting married",
+};
 
 export default async function Home() {
 	return (
@@ -11,7 +17,7 @@ export default async function Home() {
 				</span>
 			</SignedIn>
 			<SignedOut>
-				<h2 id="rsvp">RSVP</h2>
+				<h1 id="rsvp">Login</h1>
 				<p>If you're not sure which email address to use or don't remember which one you gave us, reach out to Amy or Dan.</p>
 				<SignIn />
 			</SignedOut>

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,8 +1,6 @@
 import { ClerkProvider } from "@clerk/nextjs";
-import Header from "@components/header";
-import Footer from "@components/footer";
-import Fathom from "@components/fathom";
 import "@styles/app.css";
+import Layout from "@components/layout";
 
 export const metadata = {
 	title: `Daniel & Amy's Wedding`,
@@ -14,17 +12,20 @@ export default function RootLayout({
 }: Readonly<{
 	children: React.ReactNode;
 }>) {
+
 	return (
 		<ClerkProvider>
 			<html lang="en-AU">
 				<head>
-					<title>{metadata.title}</title>
+					<meta charSet="utf-8" />
+					<meta http-equiv="x-ua-compatible" content="ie=edge" />
+					<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no" />
+					<meta name="theme-color" content="#275942" />
 				</head>
 				<body>
-					<Header />
-					{children}
-					<Footer />
-					<Fathom />
+					<Layout>
+						{children}
+					</Layout>
 				</body>
 			</html>
 		</ClerkProvider>

diff --git a/src/app/registry/page.tsx b/src/app/registry/page.tsx
@@ -1,10 +1,16 @@
 import { SignOutButton, SignedIn } from "@clerk/nextjs";
 import FetchData from "@components/fetchData/gifts";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: `Registry | Daniel & Amy's Wedding`,
+	description: "Daniel & Amy are getting married",
+};
 
 export default async function Registry() {
 	return (
 		<>
-			<h2>Gift Registry</h2>
+			<h1>Gift Registry</h1>
 			<FetchData />
 			<SignedIn>
 				<span className="signout">

diff --git a/src/app/runsheet/guest/[guest]/page.tsx b/src/app/runsheet/guest/[guest]/page.tsx
@@ -1,19 +1,25 @@
 import { SignOutButton } from "@clerk/nextjs";
 import FetchData from "@components/fetchData/runsheets/guest";
 import PrintButton from "@components/printButton";
+import { Metadata } from "next";
 
 type GuestRunsheetProps = {
 	params: {
 		guest: string;
 	};
 };
 
+export const metadata: Metadata = {
+	title: `Runsheet | Daniel & Amy's Wedding`,
+	description: "Printable runsheets for the day",
+};
+
 export default async function Runsheet(props: Readonly<GuestRunsheetProps>) {
 	const { guest } = props.params;
 
 	return (
 		<>
-			<h2 id="runsheet">Runsheets</h2>
+			<h1 id="runsheet">Runsheets</h1>
 			<p>You can print these off for easy reference.</p>
 			<PrintButton>Print Runsheet</PrintButton>
 			<FetchData guest={guest} />

diff --git a/src/app/runsheet/page.tsx b/src/app/runsheet/page.tsx
@@ -1,11 +1,17 @@
 import { SignOutButton } from "@clerk/nextjs";
 import FetchData from "@components/fetchData/runsheets/guest";
 import PrintButton from "@components/printButton";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: `Runsheet | Daniel & Amy's Wedding`,
+	description: "Printable runsheets for the day",
+};
 
 export default async function Runsheet() {
 	return (
 		<>
-			<h2 id="runsheet">Runsheets</h2>
+			<h1 id="runsheet">Runsheets</h1>
 			<p>You can print these off for easy reference.</p>
 			<PrintButton>Print Runsheet</PrintButton>
 			<FetchData />

diff --git a/src/app/runsheet/vendor/[vendor]/page.tsx b/src/app/runsheet/vendor/[vendor]/page.tsx
@@ -1,19 +1,25 @@
 import { SignOutButton } from "@clerk/nextjs";
 import FetchData from "@components/fetchData/runsheets/vendor";
 import PrintButton from "@components/printButton";
+import { Metadata } from "next";
 
 type VendorRunsheetProps = {
 	params: {
 		vendor: string;
 	};
 };
 
+export const metadata: Metadata = {
+	title: `Runsheet | Daniel & Amy's Wedding`,
+	description: "Printable runsheets for the day",
+};
+
 export default async function Runsheet(props: Readonly<VendorRunsheetProps>) {
 	const { vendor } = props.params;
 
 	return (
 		<>
-			<h2 id="runsheet">Runsheets</h2>
+			<h1 id="runsheet">Runsheets</h1>
 			<p>You can print these off for easy reference.</p>
 			<PrintButton>Print Runsheet</PrintButton>
 			{vendor ? <FetchData vendor={vendor} /> : <p>Vendor not found</p>}

diff --git a/src/app/schedule/guest/[guest]/page.tsx b/src/app/schedule/guest/[guest]/page.tsx
@@ -1,18 +1,24 @@
 import { SignOutButton } from "@clerk/nextjs";
 import FetchData from "@components/fetchData/schedules/guest";
+import { Metadata } from "next";
 
 type GuestScheduleProps = {
 	params: {
 		guest: string;
 	};
 };
 
+export const metadata: Metadata = {
+	title: `Schedule | Daniel & Amy's Wedding`,
+	description: "Visual schedule for the day",
+};
+
 export default async function Schedule(props: Readonly<GuestScheduleProps>) {
 	const { guest } = props.params;
 
 	return (
 		<>
-			<h2 id="schedule">Schedule</h2>
+			<h1 id="schedule">Schedule</h1>
 			<p>Note: These times will be local to your current location, so may be different if you're not in Perth.</p>
 			<FetchData guest={guest} />
 			<span className="signout">

diff --git a/src/app/schedule/page.tsx b/src/app/schedule/page.tsx
@@ -1,10 +1,16 @@
 import { SignOutButton } from "@clerk/nextjs";
 import FetchData from "@components/fetchData/schedules/guest";
+import { Metadata } from "next";
+
+export const metadata: Metadata = {
+	title: `Schedule | Daniel & Amy's Wedding`,
+	description: "Visual schedule for the day",
+};
 
 export default async function Schedule() {
 	return (
 		<>
-			<h2 id="schedule">Schedule</h2>
+			<h1 id="schedule">Schedule</h1>
 			<p>Note: These times will be local to your current location, so may be different if you're not in Perth.</p>
 			<FetchData />
 			<span className="signout">

diff --git a/src/app/schedule/vendor/[vendor]/page.tsx b/src/app/schedule/vendor/[vendor]/page.tsx
@@ -1,18 +1,24 @@
 import { SignOutButton } from "@clerk/nextjs";
 import FetchData from "@components/fetchData/schedules/vendor";
+import { Metadata } from "next";
 
 type VendorScheduleProps = {
 	params: {
 		vendor: string;
 	};
 };
 
+export const metadata: Metadata = {
+	title: `Schedule | Daniel & Amy's Wedding`,
+	description: "Visual schedule for the day",
+};
+
 export default async function Schedule(props: Readonly<VendorScheduleProps>) {
 	const { vendor } = props.params;
 
 	return (
 		<>
-			<h2 id="schedule">Schedule</h2>
+			<h1 id="schedule">Schedule</h1>
 			<p>Note: These times will be local to your current location, so may be different if you're not in Perth.</p>
 			{vendor ? <FetchData vendor={vendor} /> : <p>Vendor not found</p>}
 			<span className="signout">

diff --git a/src/components/guest/index.tsx b/src/components/guest/index.tsx
@@ -36,7 +36,7 @@ const Guest = ({ people, guest }: GuestProps) => {
 
 	return (
 		<section>
-			<h2 id="rsvp">RSVP</h2>
+			<h1 id="rsvp">RSVP</h1>
 			<p className={styles.name}>
 				<span>{guest.name}</span>
 

diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx
@@ -1,12 +1,28 @@
+'use client'
+
 import Image from 'next/image'
 import HeaderImage from '@img/amy_dan.jpg'
 import styles from './styles.module.css'
+import { usePathname } from 'next/navigation'
+
+type HeaderProps = {
+	isAuthenticated: boolean
+}
 
-const Header = () =>
+const Header = (props: HeaderProps) =>
 {
+	const { isAuthenticated } = props
+	const path = usePathname()
+	const compactHeader = (path !== '/') || !isAuthenticated
+
 	return (
-		<header className={styles.header}>
-			<h1 className={styles.heading}>Daniel & Amy <span>are getting married</span></h1>
+		<header 
+			className={[
+				styles.header,
+				compactHeader ? styles.compact : ''
+			].join(' ')}
+		>
+			<p className={styles.heading}>Daniel & Amy <span>are getting married</span></p>
 			<Image
 				src={HeaderImage}
 				alt="Daniel and Amy"

diff --git a/src/components/header/styles.module.css b/src/components/header/styles.module.css
@@ -2,6 +2,12 @@
 
 .header {
 	position: relative;
+
+	&.compact {
+		& .image {
+			max-height: 25em;
+		}
+	}
 }
 
 .image {
@@ -25,6 +31,7 @@
 	line-height: 1;
 	left: 50%;
 	transform: translateX(-50%);
+	text-transform: none;
 
 	& span {
 		display: block;
@@ -48,6 +55,14 @@
 }
 
 @media(min-width: 40em) {
+	.header {
+		&.compact {
+			& .image {
+				max-height: 30em;
+			}
+		}
+	}
+
 	.heading {
 		font-size: 6em;
 		top: 10vh;
@@ -59,6 +74,14 @@
 }
 
 @media(min-width: 60em) {
+	.header {
+		&.compact {
+			& .image {
+				max-height: 25em;
+			}
+		}
+	}
+
 	.heading {
 		font-size: 7em;
 
@@ -75,6 +98,15 @@
 }
 
 @media(min-width: 70em) {
+	.header {
+		&.compact {
+			& .image {
+				max-height: 25em;
+				object-position: center 50%;
+			}
+		}
+	}
+
 	.button {	
 		bottom: auto;
 		top: 50px;

diff --git a/src/components/layout/index.tsx b/src/components/layout/index.tsx
@@ -0,0 +1,25 @@
+import type { ReactNode } from "react"
+import Header from "@components/header";
+import Footer from "@components/footer";
+import Fathom from "@components/fathom";
+import { currentUser, User } from "@clerk/nextjs/server";
+
+type LayoutProps = {
+	children: ReactNode
+}
+
+const Layout = async (props: LayoutProps) => {
+	const { children } = props
+	const user = (await currentUser()) as User;
+
+	return (
+		<>
+			<Header isAuthenticated={!!user} />
+			{children}
+			<Footer />
+			<Fathom />
+		</>
+	)
+}
+
+export default Layout
diff --git a/src/styles/global/typo.css b/src/styles/global/typo.css
@@ -23,13 +23,12 @@ h1, h2, h3, h4, h5 {
 }
 
 h1 {
-	font-size: 3em;
+	font-size: 2.2em;
 	font-weight: 400;
-	text-transform: none;
 }
 
 h2 {
-	font-size: 2.2em;
+	font-size: 1.8em;
 	font-weight: 400;
 	line-height: 1;
 }