inverted direction, actual names

SquiggleTools · Sep 5, 2024 · 4c4edd4 · 4c4edd4
1 parent f813f1d
commit 4c4edd4
Show file tree

Hide file tree

Showing 3 changed files with 56 additions and 16 deletions.
diff --git a/src/components/DeepBlueSea.astro b/src/components/DeepBlueSea.astro
@@ -3,13 +3,22 @@ import SquiggleWavesBackdrop from "./SquiggleWavesBackdrop.astro";
 
 interface Props {
 	class?: string;
+	light?: "bottom" | "top";
 	unmasked?: boolean;
 }
 
-const { class: className, unmasked, ...rest } = Astro.props;
+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:list={["squiggles", unmasked && "squiggles-unmasked"]}>
 		<SquiggleWavesBackdrop />
@@ -19,15 +28,26 @@ const { class: className, unmasked, ...rest } = Astro.props;
 </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,
+			#156283 0%,
+			var(--colorHeroShadow) 100%
+		);
 	}
 
 	.squiggles {

diff --git a/src/layouts/BadgeLayout.astro b/src/layouts/BadgeLayout.astro
@@ -7,17 +7,13 @@ import "@fontsource/urbanist";
 
 import "./base.css";
 import "./normalize.css";
-
-interface Props {
-	unmasked?: boolean;
-}
 ---
 
 <html lang="en">
 	<Head />
 	<body>
 		<main class="badge">
-			<DeepBlueSea class="deep-blue-badge" unmasked={Astro.props.unmasked}>
+			<DeepBlueSea class="deep-blue-badge" light="top" unmasked>
 				<slot />
 			</DeepBlueSea>
 		</main>

diff --git a/src/pages/badge/front.astro b/src/pages/badge/front.astro
@@ -9,16 +9,24 @@ import HeroNameHeading from "~/components/HeroNameHeading.astro";
 import "~/layouts/base.css";
 import "~/layouts/normalize.css";
 import Heading from "~/components/Heading.astro";
+
+const name = Astro.url.searchParams.get("name");
+const role = Astro.url.searchParams.get("role");
+const position = Astro.url.searchParams.get("position");
 ---
 
-<BadgeLayout unmasked>
+<BadgeLayout>
 	<div class="contents">
 		<div class="top">
 			<HeroNameHeading align="center" color="inverted" level="h2" />
 			<HeroNameDetails align="center" color="inverted" />
 		</div>
-		<div class="white-area"></div>
-		<Heading class="role" level="h2">Attendee</Heading>
+		<!-- {showWhiteArea ? <div class="white-area" /> : <div></div>} -->
+		<div class="texts">
+			<Heading class="name" level="h2">{name}</Heading>
+			<Heading class="position" level="h3">{position}</Heading>
+			<Heading class="role" level="h3">{role}</Heading>
+		</div>
 	</div>
 </BadgeLayout>
 
@@ -29,17 +37,33 @@ import Heading from "~/components/Heading.astro";
 		display: flex;
 		align-items: center;
 		flex-direction: column;
-		padding: 4.5rem 2.5rem;
+		padding: 4.5rem 2.5rem 3.5rem;
+		text-shadow: 0 3px 7px var(--colorTextShadow);
 		width: 100%;
 	}
 
 	.top {
 		flex-grow: 999;
 	}
 
-	.role {
+	.texts {
 		color: var(--colorOffWhite);
+		display: flex;
+		flex-direction: column;
+		gap: 1rem;
+	}
+
+	.name {
+		font-size: 3.5rem;
+	}
+
+	.position {
+		font-size: 2.5rem;
+	}
+
+	.role {
 		font-size: 3rem;
+		margin-top: 3rem;
 	}
 
 	.white-area {