From f253e192c264992909b8b80227d1c1db67fe5569 Mon Sep 17 00:00:00 2001
From: Josh Goldberg <git@joshuakgoldberg.com>
Date: Mon, 23 Sep 2024 16:31:15 -0400
Subject: [PATCH] fix: badge/front mode=print

---
 src/pages/badge/front.astro | 61 +++++++++++++++++++++----------------
 1 file changed, 34 insertions(+), 27 deletions(-)

diff --git a/src/pages/badge/front.astro b/src/pages/badge/front.astro
index 0601ba7..cfd1bce 100644
--- a/src/pages/badge/front.astro
+++ b/src/pages/badge/front.astro
@@ -11,6 +11,7 @@ import BadgeLayout from "~/layouts/BadgeLayout.astro";
 import BodyArea from "~/components/BodyArea.astro";
 
 const name = Astro.url.searchParams.get("name");
+const mode = Astro.url.searchParams.get("mode");
 const role = Astro.url.searchParams.get("role");
 ---
 
@@ -21,32 +22,38 @@ const role = Astro.url.searchParams.get("role");
 		</Heading>
 	</BodyArea>
 	<div slot="footer">
-		<SquiggleFlanked class="role" width="lean">{role}</SquiggleFlanked>
+		<SquiggleFlanked class="role" width="lean">
+			<span class={`mode-${mode}`}>{role}</span>
+		</SquiggleFlanked>
 	</div>
-</BadgeLayout>
 
-<style>
-	.badge-front-body-area {
-		height: 36rem;
-		margin-top: 3rem;
-	}
-
-	.name {
-		color: var(--colorForeground);
-		display: flex;
-		flex-direction: column;
-		font-size: 5.5rem;
-		gap: 1rem;
-		text-shadow: 0 0 3px var(--colorOffWhite);
-		width: 100%;
-	}
-
-	.role {
-		color: var(--colorBlueLight);
-		font-family: var(--fontFamilyHeading);
-		font-weight: var(--fontWeightBold);
-		font-size: 2.5rem;
-		position: relative;
-		padding-bottom: 1.5rem;
-	}
-</style>
+	<style>
+		.badge-front-body-area {
+			height: 36rem;
+			margin-top: 3rem;
+		}
+
+		.name {
+			color: var(--colorForeground);
+			display: flex;
+			flex-direction: column;
+			font-size: 5.5rem;
+			gap: 1rem;
+			text-shadow: 0 0 3px var(--colorOffWhite);
+			width: 100%;
+		}
+
+		.role {
+			color: var(--colorBlueLight);
+			font-family: var(--fontFamilyHeading);
+			font-weight: var(--fontWeightBold);
+			font-size: 2.5rem;
+			position: relative;
+			padding-bottom: 1.5rem;
+		}
+
+		.role .mode-print {
+			color: transparent;
+		}
+	</style>
+</BadgeLayout>