Updating SoG

src/components/giving/DirectRelief.astro

@@ -0,0 +1,161 @@
+---
+
+---
+
+<section id="direct-relief">
+	<div class="wrapper">
+		<div class="p">
+			<p>
+				All proceeds from the Season of Gifting are being donated to Direct
+				Relief!
+			</p>
+			<h3>What Is It?</h3>
+			<p>
+				Direct Relief is a humanitarian aid organization, active in all
+				50 states and more than 80 countries, with a mission to improve the
+				health and lives of people affected by poverty or emergencies.
+			</p>
+			<p>
+				Learn more about their mission and how you can help at
+				<a href="https://directrelief.org" target="_blank" rel="noopener noreferrer">
+					directrelief.org
+				</a>
+			</p>
+			<h3>But Wait, There's More!</h3>
+			<p>
+				Michael's employer is matching his contributions so every dollor raised
+				will be doubled! That means for every Twitch subscription purchased or
+				gifted, Direct Relief will receive approximately $5.00!
+			</p>
+		</div>
+		<aside>
+			<h2>
+				<span>Direct Relief</span>
+				<img src="/images/gifts/DirectRelief.png" alt="Direct Relief logo" />
+			</h2>
+		</aside>
+	</div>
+</section>
+
+<style>
+
+section {
+	background-color: var(--blue);
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding: 4rem 0;
+	overflow: hidden;
+	color: var(--light);
+}
+.wrapper {
+	display: flex;
+	flex-direction: column-reverse;
+	align-items: center;
+	justify-content: center;
+	gap: 2.5rem;
+	margin: 2rem auto;
+}
+aside {
+	position: relative;
+	min-width: 40vw;
+  z-index: 3;
+}
+h2 {
+	font-family: var(--font-anton);
+	font-size: 10rem;
+	color: var(--dark);
+	text-transform: uppercase;
+}
+h2 span {
+	position: relative;
+	z-index: 5;
+}
+img {
+	position: absolute;
+	height: 16rem;
+	width: auto;
+	top: -15vw;
+	right: -5vw;
+	z-index: 2;
+	width: auto;
+}
+h3 {
+	font-family: var(--font-anton);
+	font-size: 2rem;
+	text-transform: uppercase;
+	margin: 1rem 0;
+	color: var(--light);
+}
+strong {
+	font-weight:bold;
+}
+
+@media (min-width: 640px) /* sm */ {
+	img {
+		top: -10vw;
+		right: 0vw;
+		height: 12rem;
+		width: auto;
+	}
+	h2 {
+		font-size: 7rem;
+	}
+}
+
+@media (min-width: 768px) /* md */ {
+	.wrapper {
+		flex-direction: row;
+		max-width: 75vw;
+	}
+	img {
+		top: -12vw;
+		right: -4vw;
+		height: 15rem;
+		width: auto;
+	}
+	h2 {
+		font-size: 8rem;
+	}
+}
+
+@media (min-width: 1024px) /* lg */ {
+	img {
+		height: 20rem;
+		width: auto;
+		top: -10vw;
+		right: 0vw;
+	}
+	h2 {
+		font-size: 10rem;
+	}
+}
+
+@media (min-width: 1280px) /* xl */ {
+	img {
+		height: 25rem;
+		width: auto;
+		top: 8vw;
+		right: 5vw;
+	}
+	h2 {
+		font-size: 14rem;
+	}
+}
+
+@media (min-width: 1536px) /* 2xl */ {
+	aside {
+		max-width: 40vw;
+	}
+	img {
+		height: 25rem;
+		width: auto;
+		top: 8vw;
+		right: 5vw;
+		transform: rotate(20deg);
+	}
+}
+
+
+</style>

src/components/giving/Gifts.astro

@@ -2,7 +2,7 @@
 ---
 <script src="../../scripts/gifts.ts"></script>
 
-<section>
+<section id="gifts">
 	<div class="wrapper">
 		<aside>
 			<h4>Giving has its rewards!</h4>

src/components/giving/Leaderboard.astro

@@ -45,9 +45,16 @@ const leaders = await getGifters();
 
 			<p>
 				We do! We're tracking the top gifters to send them even better gifts!
-				Check out the special gifts we have planned for the top gifters below.
+				<a href="#gifts">Check out the special gifts</a> we have planned for the top gifters below.
 			</p>
 
+			<h3>Wait! You're just trying to make money off subs!</h3>
+
+			<p>
+				Eh, nope. All proceeds from subs are going directly to charity. So, all
+				those subs you're gifting? They're going to a good cause. What cause?
+				<a href="#direct-relief">Learn more about Direct Relief</a>.
+			</p>
 
 		</aside>
 	</div>

src/pages/gifting/index.astro

@@ -1,6 +1,5 @@
 ---
 export const prerender = false;
-import { supabase } from "../../lib/supabase";
 import { authData } from "../../lib/auth";
 import BaseLayout from "@layouts/base.astro";
 import Mast from "@components/Mast.astro";
@@ -9,6 +8,7 @@ import Giving from "@components/giving/Giving.astro";
 import Leaderboard from "@components/giving/Leaderboard.astro";
 import Gifts from "@components/giving/Gifts.astro";
 import Twitch from "@components/Twitch.astro";
+import DirectRelief from "@components/giving/DirectRelief.astro";
 
 const title = "BBB's Season of Gifting";
 const description =
@@ -31,6 +31,8 @@ const user = await authData(Astro.cookies);
 	<Leaderboard />
 
 	<Gifts />
+
+	<DirectRelief />
 
 	<Twitch />
 

src/pages/gifting/terms.astro

@@ -73,6 +73,13 @@ const permalink = `https://${import.meta.env.HOST}/gifting/terms/`;
 			registration form located on the Bald Bearded Builder website.
 		</p>
 
+		<p>
+			Due to the nature of the competition, the competition is only open to
+			entrants who are residents of countries not under shipping restrictions
+			by the United States Postal Service. Please refer to the USPS website for
+			more information.
+		</p>
+
 		<h2>The Prizes</h2>
 
 		<p>There are five possible prize combinations:</p>