feat: thin newsletter ad

src/components/AdNewsletter.astro → src/components/AdNewsletterRich.astro

@@ -1,10 +1,10 @@
 ---
+import { Image } from "astro:assets";
 import stillAttendeesInSeats from "~/assets/stills/attendees-in-seats.png";
 
 import Button from "./Button.astro";
 import ContentArea from "./ContentArea.astro";
 import Heading from "./Heading.astro";
-import { Image } from "astro:assets";
 ---
 
 <ContentArea as="section">
@@ -17,7 +17,7 @@ import { Image } from "astro:assets";
 			Email Address
 			<input type="email" placeholder="[email protected]" />
 		</label>
-		<Button>Subscribe</Button>
+		<Button variant="light">Subscribe</Button>
 	</form>
 
 	<Image

src/components/AdNewsletterThin.astro

@@ -0,0 +1,66 @@
+---
+import Button from "./Button.astro";
+import ContentArea from "./ContentArea.astro";
+import Heading from "./Heading.astro";
+import TextSquiggly from "./TextSquiggly.astro";
+---
+
+<div class="ad-newsletter-thin">
+	<ContentArea as="section" class="ad-newsletter-contents">
+		<Heading class="ad-newsletter-heading" level="h2">
+			Sign up to receive announcements and important
+			<TextSquiggly renderAs="strong" width="medium">
+				<Fragment slot="inside">SquiggleConf</Fragment>
+			</TextSquiggly>
+			info.
+		</Heading>
+
+		<form>
+			<label class="email-label" for="email">Email Address</label>
+			<input
+				class="email-input"
+				name="email"
+				type="email"
+				placeholder="[email protected]"
+			/>
+			<Button variant="light">Subscribe</Button>
+		</form>
+	</ContentArea>
+</div>
+
+<style>
+	.ad-newsletter-thin {
+		background: var(--colorAccentMedium);
+		text-align: center;
+	}
+
+	.ad-newsletter-contents {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		gap: 2rem;
+		padding: 3rem 0;
+	}
+
+	.ad-newsletter-heading {
+		font-size: var(--fontSizeLarge);
+		max-width: 40rem;
+	}
+
+	form {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+	}
+
+	.email-input {
+		padding: 1rem 0.5rem;
+		font-family: var(--fontFamilyText);
+		margin: 0.5rem 0 1rem;
+		width: 25rem;
+	}
+
+	.email-input::placeholder {
+		color: var(--colorDark);
+	}
+</style>

src/components/AdTicketsThin.astro

@@ -24,7 +24,7 @@ import ContentArea from "./ContentArea.astro";
 		display: flex;
 		padding: 2rem 0;
 		position: relative;
-		margin: 1.5rem 0;
+		margin: 3.5rem 0;
 	}
 
 	.triple-squiggly {

src/components/BodyArea.astro

@@ -4,7 +4,7 @@
 
 <style>
 	.body-area {
-		background: linear-gradient(180deg, #053051 10%, #06213b 90%);
+		background: linear-gradient(180deg, #053051 10%, #082847 90%);
 		height: 100%;
 
 		/* Temporary, while content is filled out... */

src/components/Button.astro

@@ -44,19 +44,21 @@ const { class: className, size = "normal", variant, ...rest } = Astro.props;
 		color: var(--colorLight);
 	}
 
-	.button-variant-accent:active {
-		background: var(--colorAccentSecond);
+	.button-variant-light {
+		background: var(--colorLight);
+		border: 2px solid var(--colorAccentLight);
 		color: var(--colorDark);
+		font-weight: var(--fontWeightSemibold);
 	}
 
-	.button-variant-accent:focus,
-	.button-variant-accent:hover {
-		background: var(--colorAccentLight);
+	.button:active {
+		background: var(--colorAccentSecond);
 		color: var(--colorDark);
 	}
 
-	.button-variant-light {
-		background: var(--colorLight);
+	.button:focus:not(:active),
+	.button:hover:not(:active) {
+		background: var(--colorAccentLight);
 		color: var(--colorDark);
 	}
 </style>

src/components/Hero.astro

@@ -30,7 +30,7 @@ import TextSquiggly from "./TextSquiggly.astro";
 	}
 
 	.tagline {
-		font-size: var(--fontSizeLarge);
+		font-size: var(--fontSizeHero);
 		font-weight: var(--fontWeightMedium);
 	}
 </style>

src/components/TextSquiggly.astro

@@ -4,22 +4,25 @@ import squigglyMedium from "~/assets/design/squiggly-medium.svg";
 import squigglyWide from "~/assets/design/squiggly-wide.svg";
 
 interface Props {
+	renderAs?: string;
 	width: "medium" | "wide";
 }
 
 const images = {
 	medium: squigglyMedium,
 	wide: squigglyWide,
 };
+
+const { renderAs: As = "em", width } = Astro.props;
 ---
 
-<em class:list={["text-squiggly", `text-squiggly-${Astro.props.width}`]}>
+<As class:list={["text-squiggly", `text-squiggly-${width}`]}>
 	<span class="text"><slot name="inside" /></span><Image
 		alt=""
 		class="squiggly"
-		src={images[Astro.props.width]}
+		src={images[width]}
 	/>
-</em><slot name="after" />
+</As><slot name="after" />
 
 <style>
 	.text-squiggly {

src/layouts/base.css

@@ -19,7 +19,8 @@
 
 	--fontSizeSmall: 1.15rem;
 	--fontSizeMedium: 1.5rem;
-	--fontSizeLarge: 3rem;
+	--fontSizeLarge: 2rem;
+	--fontSizeHero: 3rem;
 	--fontSizeLogo: 2.25rem;
 
 	--fontWeightLight: 200;

src/pages/index.astro

@@ -1,6 +1,7 @@
 ---
 import AboutUs from "~/components/AboutUs.astro";
-import AdNewsletter from "~/components/AdNewsletter.astro";
+import AdNewsletterRich from "~/components/AdNewsletterRich.astro";
+import AdNewsletterThin from "~/components/AdNewsletterThin.astro";
 import AdRegistration from "~/components/AdRegistration.astro";
 import AdTicketsThin from "~/components/AdTicketsThin.astro";
 import Explainers from "~/components/Explainers.astro";
@@ -11,8 +12,15 @@ import PageLayout from "~/layouts/PageLayout.astro";
 <PageLayout description="A Boston conference for excellent web dev tooling.">
 	<Hero />
 	<AdTicketsThin />
-	<Explainers />
-	<AboutUs />
-	<AdRegistration />
-	<AdNewsletter />
+	<AdNewsletterThin />
+	{
+		Astro.url.searchParams.has("full") && (
+			<>
+				<Explainers />
+				<AboutUs />
+				<AdRegistration />
+				<AdNewsletterRich />
+			</>
+		)
+	}
 </PageLayout>