feat: more tweaks of speaker page

SquiggleTools · Aug 9, 2024 · 7a461bd · 7a461bd
1 parent 3ee135e
commit 7a461bd
Show file tree

Hide file tree

Showing 8 changed files with 100 additions and 70 deletions.
diff --git a/src/components/AdContents.astro b/src/components/AdContents.astro
@@ -1,19 +1,13 @@
 ---
 import HeroName from "./HeroName.astro";
-
-interface Props {
-	subTitle?: string;
-	title: string;
-}
 ---
 
 <div class="ad-contents">
 	<div class="ad-top">
-		<h1>{Astro.props.title}</h1>
-		<strong>{Astro.props.subTitle}</strong>
+		<slot name="top" />
 	</div>
 
-	<slot />
+	<slot name="body" />
 
 	<div class="ad-bottom">
 		<HeroName align="center" color="inverted" level="h2" size="normal" />
@@ -42,10 +36,6 @@ interface Props {
 	}
 
 	h1 {
-		font-size: 3rem;
-	}
-
-	strong {
-		font-size: 4.5rem;
+		font-size: 7.5rem;
 	}
 </style>
diff --git a/src/components/AdTitle.astro b/src/components/AdTitle.astro
@@ -0,0 +1,9 @@
+<h1 class="ad-title"><slot /></h1>
+
+<style>
+	.ad-title {
+		color: var(--colorOffWhite);
+		font-size: 7.5rem;
+		margin: 2rem;
+	}
+</style>
diff --git a/src/components/AdTitleAndSubtitle.astro b/src/components/AdTitleAndSubtitle.astro
@@ -0,0 +1,27 @@
+---
+interface Props {
+	title: string;
+	subTitle: string;
+}
+---
+
+<div class="ad-title-and-subtitle">
+	<h1>{Astro.props.title}</h1>
+	<strong>{Astro.props.subTitle}</strong>
+</div>
+
+<style>
+	.ad-title-and-subtitle {
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+	}
+
+	h1 {
+		font-size: 3.5rem;
+	}
+
+	strong {
+		font-size: 5rem;
+	}
+</style>
diff --git a/src/components/SessionTag.astro b/src/components/SessionTag.astro
@@ -174,17 +174,18 @@ const isLight = whiteStrokeIcons.includes(image);
 		background-color: var(--colorBackdropOff);
 		border: 1px solid var(--colorDull);
 		border-radius: 0.25rem;
-		padding: 0.125rem 0.25rem 0.125rem 0.125rem;
 		white-space: nowrap;
 		cursor: default;
 	}
 
 	.tag-normal {
 		font-size: 1rem;
+		padding: 0.125rem 0.25rem 0.125rem 0.125rem;
 	}
 
 	.tag-large {
 		font-size: 1.5rem;
+		padding: 0.5rem 0.5rem 0.35rem;
 	}
 
 	.light-icon {

diff --git a/src/pages/ad/inngest.astro b/src/pages/ad/inngest.astro
@@ -5,6 +5,7 @@ import "@fontsource/urbanist";
 import inngest from "~/assets/sponsors/inngest.svg";
 import AdContents from "~/components/AdContents.astro";
 import AdImage from "~/components/AdImage.astro";
+import AdTitleAndSubtitle from "~/components/AdTitleAndSubtitle.astro";
 import DeepBlueSea from "~/components/DeepBlueSea.astro";
 import Head from "~/components/Head.astro";
 
@@ -17,8 +18,13 @@ import "~/layouts/normalize.css";
 	<body>
 		<main>
 			<DeepBlueSea class="deep-blue-ad">
-				<AdContents subTitle="OpenJS Foundation" title="Inngest">
-					<AdImage src={inngest} />
+				<AdContents>
+					<AdTitleAndSubtitle
+						slot="top"
+						subTitle="Inngest"
+						title="Thank you to our sponsor"
+					/>
+					<AdImage slot="body" src={inngest} />
 				</AdContents>
 			</DeepBlueSea>
 		</main>

diff --git a/src/pages/ad/openjs-foundation.astro b/src/pages/ad/openjs-foundation.astro
@@ -5,6 +5,7 @@ import "@fontsource/urbanist";
 import openjsFoundationLight from "~/assets/sponsors/openjs-foundation-light.svg";
 import AdContents from "~/components/AdContents.astro";
 import AdImage from "~/components/AdImage.astro";
+import AdTitleAndSubtitle from "~/components/AdTitleAndSubtitle.astro";
 import DeepBlueSea from "~/components/DeepBlueSea.astro";
 import Head from "~/components/Head.astro";
 
@@ -17,11 +18,13 @@ import "~/layouts/normalize.css";
 	<body>
 		<main>
 			<DeepBlueSea class="deep-blue-ad">
-				<AdContents
-					subTitle="OpenJS Foundation"
-					title="Thank you to our sponsor"
-				>
-					<AdImage src={openjsFoundationLight} />
+				<AdContents>
+					<AdTitleAndSubtitle
+						slot="top"
+						subTitle="OpenJS Foundation"
+						title="Thank you to our sponsor"
+					/>
+					<AdImage slot="body" src={openjsFoundationLight} />
 				</AdContents>
 			</DeepBlueSea>
 		</main>

diff --git a/src/pages/ad/speaker/[slug].astro b/src/pages/ad/speaker/[slug].astro
@@ -1,12 +1,11 @@
 ---
 import "@fontsource-variable/josefin-sans";
 import "@fontsource/urbanist";
-import { Image } from "astro:assets";
 
 import AdContents from "~/components/AdContents.astro";
+import AdTitle from "~/components/AdTitle.astro";
 import SafeMarkdown from "~/components/SafeMarkdown.astro";
 import SessionTags from "~/components/SessionTags.astro";
-import Speaker from "~/components/Speaker.astro";
 import SpeakerImage from "~/components/SpeakerImage.astro";
 import SubtleCard from "~/components/SubtleCard.astro";
 import { peopleBySlug, talksBySlug } from "~/data/notion-data";
@@ -25,56 +24,46 @@ const talks = Object.values(talksBySlug).filter((talk) =>
 ---
 
 <AdLayout>
-	<AdContents title="SquiggleConf 2024 Speaker" subTitle={speaker.name}>
-		<!-- <Speaker
-			class="speaker-ad"
-			renderAs="div"
-			showBioLinkText
-			speaker={speaker}
-			talks={Object.values(talksBySlug).filter((talk) =>
-				talk.people.includes(speaker),
-			)}
-		>
-			<Fragment slot="top-right">
-				{
-					talks.map((talk) => (
-						<SessionTags class="speaker-top-tags" tags={talk.tags} />
-					))
-				}
-			</Fragment>
-		</Speaker> -->
-		<SubtleCard class="speaker-ad-card">
-			<SpeakerImage name={speaker.name} slug={speaker.slug} size={256} />
-			<div class="speaker-ad-contents">
-				{talks.map((talk) => <p class="talk-title">{talk.title}</p>)}
-				{
-					talks.map((talk) => (
-						<SessionTags
-							class="speaker-top-tags"
-							size="large"
-							tags={talk.tags}
-						/>
-					))
-				}
-				<div class="speaker-details">
-					<div>
-						<SafeMarkdown of={speaker.qualification} />
-					</div>
-					<div>
-						<SafeMarkdown of={speaker.role} />
+	<AdContents>
+		<AdTitle slot="top">{speaker.name}</AdTitle>
+		<Fragment slot="body">
+			<SubtleCard class="speaker-ad-card">
+				<div class="speaker-ad-image-container">
+					<SpeakerImage name={speaker.name} slug={speaker.slug} size={256} />
+				</div>
+				<div class="speaker-ad-contents">
+					{talks.map((talk) => <p class="talk-title">{talk.title}</p>)}
+					<div class="speaker-details">
+						<div>
+							<SafeMarkdown of={speaker.qualification} />
+						</div>
+						<div>
+							<SafeMarkdown of={speaker.role} />
+						</div>
 					</div>
 				</div>
-			</div>
-		</SubtleCard>
+			</SubtleCard>
+			<ul class="speaker-ad-tags">
+				{talks.map((talk) => <SessionTags size="large" tags={talk.tags} />)}
+			</ul>
+		</Fragment>
 	</AdContents>
 
 	<style>
 		.speaker-ad-card {
+			align-items: center;
 			display: flex;
-			width: 85vh;
 			gap: 1rem;
 			padding: 1.5rem 2rem;
-			align-items: center;
+			margin: -2.5rem 0 -5rem;
+			position: relative;
+			width: 85vh;
+		}
+
+		.speaker-ad-image-container {
+			position: absolute;
+			right: -5rem;
+			top: -5rem;
 		}
 
 		.speaker-ad-contents {
@@ -90,10 +79,12 @@ const talks = Object.values(talksBySlug).filter((talk) =>
 		.talk-title {
 			font-family: var(--fontFamilyHeading);
 			font-size: 3.5rem;
+			margin-right: 10rem;
 		}
 
 		.speaker-details {
-			font-size: 1.35rem;
+			font-size: 1.5rem;
+			text-align: right;
 		}
 	</style>
 </AdLayout>
diff --git a/src/pages/ad/speakers.astro b/src/pages/ad/speakers.astro
@@ -3,8 +3,7 @@ import "@fontsource-variable/josefin-sans";
 import "@fontsource/urbanist";
 
 import AdContents from "~/components/AdContents.astro";
-import DeepBlueSea from "~/components/DeepBlueSea.astro";
-import Head from "~/components/Head.astro";
+import AdTitleAndSubtitle from "~/components/AdTitleAndSubtitle.astro";
 import SpeakerSmall from "~/components/SpeakerSmall.astro";
 import SubtleCard from "~/components/SubtleCard.astro";
 import { peopleBySlug } from "~/data/notion-data";
@@ -23,8 +22,13 @@ const excludedSpeakers = new Set([
 ---
 
 <AdLayout>
-	<AdContents title="SquiggleConf 2024" subTitle="Speaker Lineup">
-		<ul class="speakers-ad-list">
+	<AdContents>
+		<AdTitleAndSubtitle
+			title="SquiggleConf 2024"
+			subTitle="Speaker Lineup"
+			slot="top"
+		/>
+		<ul class="speakers-ad-list" slot="body">
 			{
 				Object.values(peopleBySlug)
 					.filter((person) => !excludedSpeakers.has(person.slug))
@@ -37,7 +41,6 @@ const excludedSpeakers = new Set([
 						</SubtleCard>
 					))
 			}
-			<div></div>
 		</ul>
 	</AdContents>
 </AdLayout>