Finalizing gifting page

michaeljolley · Dec 2, 2024 · 869c729 · 869c729
1 parent 478620d
commit 869c729
Show file tree

Hide file tree

Showing 6 changed files with 81 additions and 70 deletions.
diff --git a/src/components/giving/Gifts.astro b/src/components/giving/Gifts.astro
@@ -70,8 +70,8 @@ section {
 	flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	margin: 0;
-	gap: 2rem;
+	gap: 1.5rem;
+	margin: 2rem 0;
 }
 aside {
 	position: relative;
@@ -155,15 +155,17 @@ strong {
 @media (min-width: 1280px) /* xl */ {
 	.wrapper {
 		flex-direction: row;
+		max-width: 75vw;
+		gap: 5rem;
 	}
 	ul.gifts li img {
-		width: 12rem;
+		width: 8rem;
 	}
 }
 
 @media (min-width: 1536px) /* 2xl */ {
 	ul.gifts li img {
-		width: 15rem;
+		width: 10rem;
 	}
 }
 

diff --git a/src/components/giving/Giving.astro b/src/components/giving/Giving.astro
@@ -57,8 +57,8 @@ section {
 	flex-direction: column-reverse;
 	align-items: center;
 	justify-content: center;
-	margin: 2rem 0;
-	gap: 2rem;
+	gap: 2.5rem;
+	margin: 2rem auto;
 }
 aside {
 	position: relative;
@@ -110,6 +110,7 @@ strong {
 @media (min-width: 768px) /* md */ {
 	.wrapper {
 		flex-direction: row;
+		max-width: 75vw;
 	}
 	img {
 		top: -12vw;

diff --git a/src/components/giving/GivingForm.astro b/src/components/giving/GivingForm.astro
@@ -44,7 +44,6 @@ const { user } = Astro.props;
 			</label><br />
 			<input name="user" value={user?.nickname}/>
 		</p>
-
 		<p>
 			<label for="firstName">First Name</label><br />
 			<input
@@ -186,6 +185,9 @@ input, select {
 select option {
 	color: var(--dark);
 }
+button {
+	margin: 1rem 0;
+}
 
 @media (min-width: 640px) /* sm */ {
 	h2 {

diff --git a/src/components/giving/Leaderboard.astro b/src/components/giving/Leaderboard.astro
@@ -74,16 +74,16 @@ const leaders = await getGifters();
 		flex-direction: column;
 		align-items: center;
 		justify-content: center;
-		margin: 0;
-		gap: 2rem;
+		gap: 1.5rem;
+		margin: 2rem 0;
 	}
 	aside {
 		width: 100%;
 		z-index: 5;
 	}
 	h2 {
 		font-family: var(--font-anton);
-		font-size: 10rem;
+		font-size: 8rem;
 		color: var(--yellow);
 		text-transform: uppercase;
 		position: relative;
@@ -152,9 +152,6 @@ const leaders = await getGifters();
 	}
 
 	@media (min-width: 768px) /* md */ {
-		.wrapper {
-			flex-direction: row;
-		}
 		svg {
 			top: -12vw;
 			right: -4vw;
@@ -166,6 +163,9 @@ const leaders = await getGifters();
 	}
 
 	@media (min-width: 1024px) /* lg */ {
+		.wrapper {
+			flex-direction: row;
+		}
 		svg {
 			top: -10vw;
 			right: -8vw;
@@ -176,6 +176,9 @@ const leaders = await getGifters();
 	}
 
 	@media (min-width: 1280px) /* xl */ {
+		.wrapper {
+			max-width: 75vw;
+		}
 		svg {
 			top: -9vw;
 			right: 0vw;
@@ -195,6 +198,5 @@ const leaders = await getGifters();
 		}
 	}
 
-
 	</style>
 
diff --git a/src/components/giving/SeasonOfGiving.astro b/src/components/giving/SeasonOfGiving.astro
@@ -44,8 +44,8 @@
 		flex-direction: column-reverse;
 		gap: 1.5rem;
 		background: url('/images/party.svg') no-repeat;
-		background-position: 100% 0;
-		background-size: 60%;
+		background-position: top right;
+		background-size: 60vw;
 	}
 	h2 {
 		position: relative;
@@ -75,65 +75,71 @@ a:hover {
 	border-color: var(--pink);
 }
 
-	@media (min-width: 640px) /* sm */ {
+@media (min-width: 640px) /* sm */ {
+	.wrapper {
+		background-position: top right;
+		background-size: 50vw;
 	}
+}
 
-	@media (min-width: 768px) /* md */ {
-		.wrapper {
-			background-position: 100% 0;
-			background-size: contain;
-		}
-		h2 {
-			font-size: 9rem;
-		}
-		h2 img {
-			top: 0vw;
-			right: -5vw;
-		}
+@media (min-width: 768px) /* md */ {
+	.wrapper {
+		background-position: top center;
+		background-size: 40vw;
+	}
+	h2 {
+		font-size: 9rem;
+	}
+	h2 img {
+		top: 0vw;
+		right: -5vw;
 	}
+}
 
-	@media (min-width: 1024px) /* lg */ {
-		.wrapper {
-			flex-direction: row;
-			background-position: 60vw center;
-		}
-		aside {
-		}
-		h2 {
-			font-size: 10rem;
-		}
-		h2 img {
-			top: 10vw;
-			right: 6vw;
-		}
-		h3 {
-			font-size: 3rem;
-		}
+@media (min-width: 1024px) /* lg */ {
+	.wrapper {
+		flex-direction: row;
+		background-position: 100% center;
+		background-size: contain;
+		gap: 5rem;
+	}
+	aside {
+	}
+	h2 {
+		font-size: 10rem;
+	}
+	h2 img {
+		top: 10vw;
+		right: 6vw;
 	}
+	h3 {
+		font-size: 3rem;
+	}
+}
 
-	@media (min-width: 1280px) /* xl */ {
-		.wrapper {
-			background-position: 60vw center;
-			max-width: 90vw;
-			margin: auto;
-		}
-		h2 {
-			font-size: 12rem;
-		}
-		h2 img {
-			top: 5vw;
-			right: 10vw;
-		}
+@media (min-width: 1280px) /* xl */ {
+	.wrapper {
+		background-position: top right;
+		background-size: contain;
+		max-width: 75vw;
+		margin: auto;
+	}
+	h2 {
+		font-size: 12rem;
 	}
+	h2 img {
+		top: 5vw;
+		right: 10vw;
+	}
+}
 
-	@media (min-width: 1536px) /* 2xl */ {
-		h2 {
-			font-size: 12rem;
-			margin-left: 10vw;
-		}
-		h2 img {
-			top: 5vw;
-			right: 10vw;
-		}
+@media (min-width: 1536px) /* 2xl */ {
+	h2 {
+		font-size: 12rem;
 	}
+	h2 img {
+		top: 5vw;
+		right: 10vw;
+	}
+}
 </style>
diff --git a/src/pages/api/auth/signin.ts b/src/pages/api/auth/signin.ts
@@ -3,8 +3,6 @@ export const prerender = false;
 import type { APIRoute } from "astro";
 import { supabase } from "../../../lib/supabase";
 
-const host = import.meta.env.HOST;
-
 export const GET: APIRoute = async ({ request, cookies, redirect }) => {
 
 	const { data, error } = await supabase.auth.signInWithOAuth({