feat: badge back (#120)

💖

cspell.json

@@ -8,65 +8,61 @@
 		"*.svg"
 	],
 	"words": [
-		"Afficianado",
-		"Autometics",
-		"Axosoft",
-		"Cernicova",
-		"Excalidraw",
-		"Extism",
-		"FAANG",
-		"FOSS",
-		"Faneuil",
-		"Fiberplane",
-		"Harborside",
-		"Instabase",
-		"Katerina",
-		"Livecoder",
-		"Livestream",
-		"MBTA",
-		"Pinterest",
-		"Rizèl",
-		"SQUOCT",
-		"Simons",
-		"Skroumpelou",
 		"_epichunter",
 		"aakansha",
+		"Afficianado",
 		"allowfullscreen",
 		"anonrig",
 		"astro",
 		"astrojs",
 		"astropub",
+		"Autometics",
+		"Axosoft",
 		"blackgirlbytes",
 		"bluesky",
 		"bootcamp",
 		"bostonts",
 		"cernicova",
+		"Cernicova",
 		"codesandbox",
 		"contejas",
 		"danvdk",
 		"danvk",
+		"datastax",
 		"devrel",
 		"devs",
 		"dimitri",
 		"dimitropoulos",
 		"doshi",
 		"dragomir",
 		"dragomirtitian",
+		"Excalidraw",
+		"Extism",
+		"FAANG",
+		"Faneuil",
 		"farrelly",
+		"Fiberplane",
 		"fontsource",
+		"FOSS",
 		"fosstodon",
 		"griffing",
+		"Harborside",
 		"igalia",
 		"inngest",
+		"Instabase",
 		"josefin",
 		"joshuakgoldberg",
 		"jsparty",
+		"Katerina",
 		"keturakis",
 		"kless",
 		"knip",
 		"konami",
 		"konamimojisplosion",
 		"laurynas",
+		"Livecoder",
+		"Livestream",
+		"MBTA",
 		"michigantypescript",
 		"mitropoulos",
 		"murg",
@@ -77,12 +73,17 @@
 		"nowrap",
 		"openjs",
 		"packagejson",
+		"Pinterest",
 		"plone",
 		"psyber",
 		"referrerpolicy",
 		"rizel",
+		"Rizèl",
 		"scarlett",
+		"Simons",
+		"Skroumpelou",
 		"squiggleconf",
+		"SQUOCT",
 		"sugaroverflow",
 		"sylwia",
 		"tejas",

src/components/DeepBlueSea.astro

@@ -30,6 +30,15 @@ const { class: className, light = "bottom", unmasked, ...rest } = Astro.props;
 		text-align: center;
 	}
 
+	.deep-blue-sea-bottom,
+	.deep-blue-sea-top {
+		--squiggleMask: radial-gradient(
+			circle at center,
+			transparent 10%,
+			#000 80%
+		);
+	}
+
 	.deep-blue-sea-bottom {
 		background: linear-gradient(
 			180deg,
@@ -38,14 +47,21 @@ const { class: className, light = "bottom", unmasked, ...rest } = Astro.props;
 		);
 	}
 
-	.deep-blue-sea-contrast {
-		background: linear-gradient(180deg, #197297 0%, var(--colorHeroShadow) 40%);
-	}
-
 	.deep-blue-sea-top {
 		background: linear-gradient(180deg, #104f69 0%, var(--colorHeroShadow) 90%);
 	}
 
+	.deep-blue-sea-contrast {
+		background: linear-gradient(180deg, #197297 0%, var(--colorHeroShadow) 40%);
+		--squiggleMask: linear-gradient(
+			to bottom,
+			#000 30%,
+			rgba(0, 0, 0, 0.15) 40%,
+			rgba(0, 0, 0, 0.25) 70%,
+			transparent 100%
+		);
+	}
+
 	.squiggles {
 		bottom: 0;
 		left: 0;
@@ -56,7 +72,7 @@ const { class: className, light = "bottom", unmasked, ...rest } = Astro.props;
 	}
 
 	.squiggles:not(.squiggles-unmasked) {
-		mask-image: radial-gradient(circle at center, transparent 10%, #000 80%);
+		mask-image: var(--squiggleMask);
 	}
 
 	.squiggle {

src/components/SponsorLogos.astro

@@ -0,0 +1,125 @@
+---
+import _ from "lodash";
+import { Image } from "astro:assets";
+
+import { sponsorsBySlug } from "~/data/sponsors";
+
+const sponsorGroups = _.groupBy(
+	Object.values(sponsorsBySlug),
+	(sponsor) => sponsor.placement,
+);
+
+interface Props {
+	light?: boolean;
+	size?: "normal" | "small";
+}
+
+const { size = "normal", light } = Astro.props;
+---
+
+<div
+	class:list={[
+		"sponsor-logos",
+		size === "small" ? "sponsor-logos-small" : "sponsor-logos-normal",
+	]}
+>
+	{
+		Object.values(sponsorGroups).map((sponsors) => (
+			<div class="sponsor-group">
+				{sponsors!.map((sponsor) => (
+					<a
+						class="sponsor"
+						href={sponsor.href}
+						rel="noreferrer"
+						target="_blank"
+						title={sponsor.title}
+					>
+						<Image
+							alt=""
+							class="sponsor-logo-dark"
+							src={sponsor.logos.dark}
+							height={size === "small" ? 96 : 128}
+						/>
+						<Image
+							alt=""
+							class="sponsor-logo-light"
+							src={light ? sponsor.logos.dark : sponsor.logos.light}
+							height={size === "small" ? 96 : 128}
+						/>
+					</a>
+				))}
+			</div>
+		))
+	}
+</div>
+
+<style>
+	.sponsors-blurb {
+		margin: auto;
+	}
+
+	.sponsor-group {
+		align-items: center;
+		display: flex;
+		flex-direction: column;
+		padding: 0 2rem;
+		justify-content: center;
+		margin: auto;
+	}
+
+	.sponsor-logos-normal {
+		--sponsorSizeFirst: 14rem;
+		--sponsorSpacingFirst: 5rem;
+		--sponsorSizeSecond: 7rem;
+		--sponsorSpacingSecond: 10rem;
+		--sponsorSpacingVertical: 1.5rem;
+	}
+
+	.sponsor-logos-small {
+		--sponsorSizeFirst: 11rem;
+		--sponsorSpacingFirst: 2.5rem;
+		--sponsorSizeSecond: 5rem;
+		--sponsorSpacingSecond: 5rem;
+		--sponsorSpacingVertical: 0;
+	}
+
+	.sponsor-group:nth-of-type(1) {
+		--sponsorSize: var(--sponsorSizeFirst);
+		--sponsorSpacing: var(--sponsorSpacingFirst);
+	}
+
+	.sponsor-logos-normal .sponsor-group:nth-of-type(1) {
+		margin-top: 3rem;
+	}
+
+	.sponsor-group:nth-of-type(2) {
+		--sponsorSize: var(--sponsorSizeSecond);
+		--sponsorSpacing: var(--sponsorSpacingSecond);
+	}
+
+	.sponsor-group img {
+		max-width: var(--sponsorSize);
+	}
+
+	html.dark .sponsor-logo-light,
+	html:not(.dark) .sponsor-logo-dark {
+		display: none;
+	}
+
+	@media (min-width: 819px) {
+		.sponsor-group {
+			flex-direction: row;
+			flex-wrap: wrap;
+			gap: 0;
+		}
+
+		.sponsor-group a {
+			padding: var(--sponsorSpacingVertical) 0;
+		}
+
+		.sponsor {
+			max-width: calc(49% - var(--sponsorSpacing));
+			width: 100%;
+		}
+	}
+</style>