feat: add badge front

src/components/DeepBlueSea.astro

@@ -1,59 +1,64 @@
 ---
-import SquiggleWave from "./SquiggleWave.astro";
+import SquiggleWavesBackdrop from "./SquiggleWavesBackdrop.astro";
 
-const { class: className, ...rest } = Astro.props;
+interface Props {
+	class?: string;
+	light?: "bottom" | "top";
+	unmasked?: boolean;
+}
+
+const { class: className, light, unmasked, ...rest } = Astro.props;
 ---
 
-<div class:list={["deepBlueSea", className]} id="home" {...rest}>
+<div
+	class:list={[
+		"deep-blue-sea",
+		light === "top" ? "deep-blue-sea-top" : "deep-blue-sea-bottom",
+		className,
+	]}
+	id="home"
+	{...rest}
+>
 	<slot name="toggle" />
-	<div class="squiggles">
-		<SquiggleWave left={-5} scale={0.5} top={5} />
-		<SquiggleWave left={20} scale={0.5} top={5} />
-		<SquiggleWave left={45} scale={0.5} top={5} />
-		<SquiggleWave left={70} scale={0.5} top={5} />
-		<SquiggleWave left={95} scale={0.5} top={5} />
-		<SquiggleWave left={-10} scale={0.65} top={30} />
-		<SquiggleWave left={15} scale={0.65} top={30} />
-		<SquiggleWave left={40} scale={0.65} top={30} />
-		<SquiggleWave left={65} scale={0.65} top={30} />
-		<SquiggleWave left={90} scale={0.65} top={30} />
-		<SquiggleWave left={-15} scale={0.85} top={55} />
-		<SquiggleWave left={10} scale={0.85} top={55} />
-		<SquiggleWave left={35} scale={0.85} top={55} />
-		<SquiggleWave left={60} scale={0.85} top={55} />
-		<SquiggleWave left={85} scale={0.85} top={55} />
-		<SquiggleWave left={-20} scale={1} top={85} />
-		<SquiggleWave left={5} scale={1} top={85} />
-		<SquiggleWave left={30} scale={1} top={85} />
-		<SquiggleWave left={55} scale={1} top={85} />
-		<SquiggleWave left={80} scale={1} top={85} />
+	<div class:list={["squiggles", unmasked && "squiggles-unmasked"]}>
+		<SquiggleWavesBackdrop />
 	</div>
 	<slot />
 	<slot name="waves" />
 </div>
 
 <style>
-	.deepBlueSea {
+	.deep-blue-sea {
+		overflow: hidden;
+		position: relative;
+		text-align: center;
+	}
+
+	.deep-blue-sea-bottom {
 		background: linear-gradient(
 			180deg,
 			var(--colorHeroShadow) 0%,
 			#156283 100%
 		);
-		overflow: hidden;
-		position: relative;
-		text-align: center;
+	}
+
+	.deep-blue-sea-top {
+		background: linear-gradient(180deg, #104f69 0%, var(--colorHeroShadow) 90%);
 	}
 
 	.squiggles {
 		bottom: 0;
 		left: 0;
-		mask-image: radial-gradient(circle at center, transparent 10%, #000 80%);
 		position: absolute;
 		right: 0;
 		top: 0;
 		user-select: none;
 	}
 
+	.squiggles:not(.squiggles-unmasked) {
+		mask-image: radial-gradient(circle at center, transparent 10%, #000 80%);
+	}
+
 	.squiggle {
 		position: absolute;
 	}

src/components/HeroName.astro

@@ -1,8 +1,6 @@
 ---
-import { Image } from "astro:assets";
-
-import squiggleLogo from "~/assets/squiggle-logo.svg";
-import Heading from "./Heading.astro";
+import HeroNameDetails from "./HeroNameDetails.astro";
+import HeroNameHeading from "./HeroNameHeading.astro";
 
 interface Props {
 	align: "center" | "left";
@@ -12,35 +10,21 @@ interface Props {
 	size?: "normal" | "small";
 }
 
-const { class: className, ...rest } = Astro.props;
+const { class: className, align, color, level, size, ...rest } = Astro.props;
 ---
 
 <div
 	class:list={[
 		"hero-name",
-		Astro.props.align === "left" ? "hero-name-left" : "hero-name-center",
-		Astro.props.color === "inverted"
-			? "hero-name-inverted"
-			: "hero-name-inherited",
-		Astro.props.size === "small" ? "hero-name-small" : "hero-name-normal",
+		align === "left" ? "hero-name-left" : "hero-name-center",
+		color === "inverted" ? "hero-name-inverted" : "hero-name-inherited",
+		size === "small" ? "hero-name-small" : "hero-name-normal",
 		className,
 	]}
 	{...rest}
 >
-	<Heading class="hero-heading" level={Astro.props.level}>
-		<span class="heading-text">
-			<span class="word">
-				<span class="word-contents">Squiggle</span>
-				<Image alt="" class="squiggle" src={squiggleLogo} />
-			</span><span class="word"><span class="word-contents">Conf</span></span>
-		</span>
-	</Heading>
-
-	<p class="details">
-		<span class="together">October 3-4, 2024</span>
-		<span class="dot">·</span>
-		<span class="together">Boston New England Aquarium</span>
-	</p>
+	<HeroNameHeading align={align} color={color} level={level} size={size} />
+	<HeroNameDetails align={align} color={color} size={size} />
 </div>
 
 <style>
@@ -51,133 +35,18 @@ const { class: className, ...rest } = Astro.props;
 		text-align: center;
 	}
 
-	.hero-name.hero-name-inverted {
-		--colorHeadingText: var(--colorOffWhite);
-		--colorShadow: rgba(0, 0, 0, 0.35);
-	}
-
-	.hero-name.hero-name-inherited {
-		--colorHeadingText: inherit;
-		--colorShadow: rgba(240, 240, 255, 0.35);
-	}
-
 	html.dark .hero-name {
 		--colorShadow: transparent;
 	}
 
-	.hero-name.hero-name-normal {
-		--fontSizeHeroHeading: var(--fontSizeHero);
-		--fontSizeDetails: var(--fontSizeH3);
-		--marginDetails: 2rem;
-	}
-
-	.hero-name.hero-name-small {
-		--fontSizeHeroHeading: var(--fontSizeHeroSmall);
-		--fontSizeDetails: var(--fontSizeH4);
-		--marginDetails: 0.75rem;
-	}
-
-	.hero-heading {
-		box-sizing: border-box;
-		display: inline-flex;
-		color: var(--colorHeadingText);
-		flex-direction: column;
-		font-size: var(--fontSizeHeroHeading);
-		overflow: hidden;
-		padding: 0.75rem 0 0.5rem;
-		position: relative;
-	}
-
-	.hero-name-center .hero-heading {
-		align-items: center;
-	}
-
-	.word {
-		display: inline-block;
-		position: relative;
-	}
-
-	.word + .word {
-		margin-top: 1rem;
-	}
-
-	.squiggle {
-		bottom: -0.5rem;
-		left: 0;
-		position: absolute;
-		user-select: none;
-		width: 100%;
-	}
-
-	.heading-text {
-		position: relative;
-		text-shadow: 0 3px 7px var(--colorShadow);
-		z-index: 1;
-	}
-
-	.details {
-		display: flex;
-		flex-direction: column;
-		gap: 0.5rem;
-		margin-top: 1rem;
-		font-weight: 700;
-		font-size: var(--fontSizeDetails);
-		font-family: var(--fontFamilyHeading);
-		letter-spacing: var(--letterSpacingHeading);
-		text-shadow: 0 3px 7px var(--colorShadow);
-	}
-
-	.hero-name-center .details {
-		text-align: center;
-	}
-
-	.hero-name-inverted .details {
-		color: #cae6ff;
-	}
-
 	.together {
 		display: inline-block;
 	}
 
-	.dot {
-		display: none;
-	}
-
-	.word-contents {
-		position: relative;
-		z-index: 1;
-	}
-
-	@media (min-width: 700px) {
-		.details {
-			margin-top: var(--marginDetails);
-		}
-
-		.word + .word {
-			margin-top: 0;
-		}
-	}
-
 	@media (min-width: 1017px) {
-		.details {
-			flex-direction: row;
-		}
-
-		.word + .word {
-			margin-top: 0;
-		}
-
-		.word-contents {
-			position: relative;
-		}
-
 		.hero-name-left {
 			align-items: flex-start;
 			text-align: left;
 		}
-
-		.dot {
-			display: initial;
-		}
 	}
 </style>

src/components/HeroNameDetails.astro

@@ -0,0 +1,91 @@
+---
+interface Props {
+	align: "center" | "left";
+	color: "inherit" | "inverted";
+	class?: string;
+	direction?: "horizontal" | "vertical";
+	size?: "large" | "normal" | "small";
+}
+
+const {
+	align,
+	class: className,
+	color,
+	direction,
+	size,
+	...rest
+} = Astro.props;
+---
+
+<p
+	class:list={[
+		"details",
+		className,
+		align === "center" && "details-center",
+		color === "inverted" && "details-inverted",
+		direction === "vertical" ? "details-vertical" : "details-horizontal",
+		`details-${size}`,
+	]}
+	{...rest}
+>
+	<span class="together">October 3-4, 2024</span>
+	<span class="dot">·</span>
+	<span class="together">Boston New England Aquarium</span>
+</p>
+
+<style>
+	.details {
+		display: flex;
+		flex-direction: column;
+		gap: 0.5rem;
+		margin-top: 1rem;
+		font-weight: 700;
+		font-size: var(--fontSizeDetails);
+		font-family: var(--fontFamilyHeading);
+		letter-spacing: var(--letterSpacingHeading);
+		text-shadow: 0 3px 7px var(--colorShadow);
+	}
+
+	.details-large {
+		--fontSizeDetails: 3rem;
+		--marginDetails: 1.5rem;
+	}
+
+	.details-normal {
+		--fontSizeDetails: var(--fontSizeH3);
+		--marginDetails: 2rem;
+	}
+
+	.details-small {
+		--fontSizeDetails: var(--fontSizeH4);
+		--marginDetails: 0.75rem;
+	}
+
+	.details-center {
+		text-align: center;
+	}
+
+	.details-inverted {
+		color: #cae6ff;
+	}
+
+	.dot {
+		display: none;
+	}
+
+	@media (min-width: 700px) {
+		.details {
+			margin-top: var(--marginDetails);
+		}
+	}
+
+	@media (min-width: 1017px) {
+		.details-horizontal {
+			flex-direction: row;
+		}
+
+		.details-horizontal .dot {
+			display: initial;
+		}
+	}
+</style>

src/components/HeroNameHeading.astro

@@ -0,0 +1,116 @@
+---
+import { Image } from "astro:assets";
+
+import squiggleLogoRed from "~/assets/squiggle-logo-red.svg";
+import Heading from "./Heading.astro";
+
+interface Props {
+	align: "center" | "left";
+	color: "inherit" | "inverted";
+	level: "h1" | "h2";
+	size?: "normal" | "small";
+}
+
+const { align, color, level, size } = Astro.props;
+---
+
+<Heading
+	class:list={[
+		"hero-heading",
+		align === "center" && "hero-heading-center",
+		color === "inverted" ? "hero-heading-inverted" : "hero-heading-inherited",
+		size === "small" ? "hero-heading-small" : "hero-heading-normal",
+	]}
+	level={level}
+>
+	<span class="heading-text">
+		<span class="word">
+			<span class="word-contents">Squiggle</span><Image
+				alt=""
+				class="squiggle"
+				src={squiggleLogoRed}
+			/></span
+		><span class="word">
+			<span class="word-contents">Conf</span>
+		</span>
+	</span>
+</Heading>
+
+<style>
+	.hero-heading {
+		box-sizing: border-box;
+		display: inline-flex;
+		color: var(--colorHeadingText);
+		flex-direction: column;
+		font-size: var(--fontSizeHeroHeading);
+		overflow: hidden;
+		padding: 0.75rem 0 0.5rem;
+		position: relative;
+	}
+
+	.hero-heading-inverted {
+		--colorHeadingText: var(--colorOffWhite);
+		--colorShadow: rgba(0, 0, 0, 0.35);
+	}
+
+	.hero-heading-inherited {
+		--colorHeadingText: inherit;
+		--colorShadow: rgba(240, 240, 255, 0.35);
+	}
+
+	.hero-heading-normal {
+		--fontSizeHeroHeading: var(--fontSizeHero);
+	}
+
+	.hero-heading-small {
+		--fontSizeHeroHeading: var(--fontSizeHeroSmall);
+	}
+
+	.hero-heading-center {
+		align-items: center;
+	}
+
+	.heading-text {
+		position: relative;
+		text-shadow: 0 3px 7px var(--colorShadow);
+		z-index: 1;
+	}
+
+	.squiggle {
+		bottom: -0.5rem;
+		left: 0;
+		position: absolute;
+		user-select: none;
+		width: 100%;
+	}
+
+	.word {
+		display: inline-block;
+		position: relative;
+	}
+
+	.word + .word {
+		margin-top: 1rem;
+	}
+
+	.word-contents {
+		position: relative;
+		z-index: 1;
+	}
+
+	@media (min-width: 700px) {
+		.word + .word {
+			margin-top: 0;
+		}
+	}
+
+	@media (min-width: 1017px) {
+		.word + .word {
+			margin-top: 0;
+		}
+
+		.word-contents {
+			position: relative;
+		}
+	}
+</style>

src/components/SquiggleWavesBackdrop.astro

@@ -0,0 +1,33 @@
+---
+import SquiggleWave from "./SquiggleWave.astro";
+---
+
+<SquiggleWave left={-5} scale={0.5} top={2.5} />
+<SquiggleWave left={20} scale={0.5} top={2.5} />
+<SquiggleWave left={45} scale={0.5} top={2.5} />
+<SquiggleWave left={70} scale={0.5} top={2.5} />
+<SquiggleWave left={95} scale={0.5} top={2.5} />
+<SquiggleWave left={-10} scale={0.6} top={12.5} />
+<SquiggleWave left={15} scale={0.6} top={12.5} />
+<SquiggleWave left={40} scale={0.6} top={12.5} />
+<SquiggleWave left={65} scale={0.6} top={12.5} />
+<SquiggleWave left={90} scale={0.6} top={12.5} />
+<SquiggleWave left={-15} scale={0.7} top={27.5} />
+<SquiggleWave left={10} scale={0.7} top={27.5} />
+<SquiggleWave left={35} scale={0.7} top={27.5} />
+<SquiggleWave left={60} scale={0.7} top={27.5} />
+<SquiggleWave left={85} scale={0.7} top={27.5} />
+<SquiggleWave left={-20} scale={0.8} top={42.5} />
+<SquiggleWave left={5} scale={0.8} top={42.5} />
+<SquiggleWave left={30} scale={0.8} top={42.5} />
+<SquiggleWave left={55} scale={0.8} top={42.5} />
+<SquiggleWave left={80} scale={0.8} top={42.5} />
+<SquiggleWave left={0} scale={0.9} top={65} />
+<SquiggleWave left={25} scale={0.9} top={65} />
+<SquiggleWave left={50} scale={0.9} top={65} />
+<SquiggleWave left={75} scale={0.9} top={65} />
+<SquiggleWave left={-5} scale={1} top={85} />
+<SquiggleWave left={20} scale={1} top={85} />
+<SquiggleWave left={45} scale={1} top={85} />
+<SquiggleWave left={70} scale={1} top={85} />
+<SquiggleWave left={95} scale={1} top={85} />

src/layouts/AdLayout.astro

@@ -7,13 +7,17 @@ import "@fontsource/urbanist";
 
 import "./base.css";
 import "./normalize.css";
+
+interface Props {
+	unmasked?: boolean;
+}
 ---
 
 <html lang="en">
 	<Head />
 	<body>
 		<main>
-			<DeepBlueSea class="deep-blue-ad">
+			<DeepBlueSea class="deep-blue-ad" unmasked={Astro.props.unmasked}>
 				<slot />
 			</DeepBlueSea>
 		</main>

src/layouts/BadgeLayout.astro

@@ -0,0 +1,32 @@
+---
+import DeepBlueSea from "~/components/DeepBlueSea.astro";
+import Head from "~/components/Head.astro";
+
+import "@fontsource-variable/josefin-sans";
+import "@fontsource/urbanist";
+
+import "./base.css";
+import "./normalize.css";
+---
+
+<html lang="en">
+	<Head />
+	<body>
+		<main class="badge">
+			<DeepBlueSea class="deep-blue-badge" light="top">
+				<slot />
+			</DeepBlueSea>
+		</main>
+		<style>
+			.badge {
+				width: 45rem;
+				height: 60rem;
+				position: absolute;
+			}
+
+			.deep-blue-badge {
+				height: 100%;
+			}
+		</style>
+	</body>
+</html>

src/pages/badge/front.astro

@@ -0,0 +1,112 @@
+---
+import squiggleLogoYellow from "~/assets/squiggle-logo-yellow.svg";
+import "@fontsource-variable/josefin-sans";
+import "@fontsource/urbanist";
+
+import BadgeLayout from "~/layouts/BadgeLayout.astro";
+import HeroNameHeading from "~/components/HeroNameHeading.astro";
+
+import "~/layouts/base.css";
+import "~/layouts/normalize.css";
+import Heading from "~/components/Heading.astro";
+import { Image } from "astro:assets";
+
+const name = Astro.url.searchParams.get("name");
+const role = Astro.url.searchParams.get("role");
+---
+
+<BadgeLayout>
+	<div class="contents">
+		<div class="top">
+			<HeroNameHeading align="center" color="inverted" level="h2" />
+			<Heading class="date" level="h2">October 3-4 2024</Heading>
+		</div>
+		<div class="texts">
+			<Heading class="name" level="h2">{name}</Heading>
+			<Heading class="role" level="h3">
+				<span class="role-contents">{role}</span>
+				<Image alt="" class="role-squiggle" src={squiggleLogoYellow} /></Heading
+			>
+		</div>
+	</div>
+</BadgeLayout>
+
+<style>
+	.contents {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		height: 100%;
+		height: 100%;
+		justify-content: space-between;
+		padding: 4.5rem 3.5rem 2.5rem;
+		position: relative;
+		text-shadow:
+			0 1px 7px var(--colorTextShadow),
+			0 3px 14px var(--colorTextShadow);
+		width: 100%;
+	}
+
+	.date {
+		font-size: 3rem;
+		margin-top: 1rem;
+		color: var(--colorBlueLight);
+	}
+
+	.texts {
+		color: var(--colorOffWhite);
+		display: flex;
+		flex-direction: column;
+		gap: 1.5rem;
+		height: 100%;
+		padding: 0 2.5rem;
+		width: 100%;
+	}
+
+	.name {
+		align-items: center;
+		display: flex;
+		font-size: 5.5rem;
+		height: 100%;
+		position: relative;
+		padding: 2.5rem 0 0 2.5rem;
+		text-align: left;
+	}
+
+	.name::before {
+		position: absolute;
+		content: "";
+		top: 0;
+		left: 0;
+		bottom: 0;
+		width: 1rem;
+		background: linear-gradient(
+			to bottom,
+			transparent 0%,
+			var(--colorEmphasized) 70%
+		);
+	}
+
+	.role {
+		align-self: center;
+		color: var(--colorBlueLight);
+		font-size: 3rem;
+		margin-top: 5rem;
+		padding-bottom: 0.75rem;
+		position: relative;
+	}
+
+	.role-contents {
+		z-index: 1;
+		position: relative;
+	}
+
+	.role-squiggle {
+		bottom: 0;
+		left: 0;
+		position: absolute;
+		right: 0;
+		width: 100%;
+	}
+</style>