Merge branch 'main' into noah/add-characters-to-resources-page

HackAtUCI · Nov 1, 2024 · 7fada0f · 7fada0f
2 parents 22c65e8 + 5f8f50e
commit 7fada0f
Show file tree

Hide file tree

Showing 10 changed files with 122 additions and 91 deletions.
diff --git a/.github/workflows/deploy-preview.yml b/.github/workflows/deploy-preview.yml
@@ -2,6 +2,8 @@ name: Deploy Preview
 
 on:
   pull_request:
+    branches:
+      main
 
 permissions:
   contents: read
@@ -36,6 +38,7 @@ jobs:
           vercel-project-id: ${{ vars.VERCEL_PROJECT_ID_SITE}}
   Studio:
     runs-on: ubuntu-latest
+    if: contains(github.event.pull_request.labels.*.name, 'sanity')
     steps:
       - uses: actions/checkout@v2
       - uses: amondnet/vercel-action@v25

diff --git a/apps/sanity/schemas/sponsors.ts b/apps/sanity/schemas/sponsors.ts
@@ -34,13 +34,17 @@ export default defineType({
 							options: {
 								list: [
 									{
-										title: "Bronze",
-										value: "bronze",
+										title: "Gold",
+										value: "gold",
 									},
 									{
 										title: "Silver",
 										value: "silver",
 									},
+									{
+										title: "Bronze",
+										value: "bronze",
+									},
 								],
 								layout: "radio",
 								direction: "vertical",

diff --git a/apps/site/src/app/(home)/sections/Landing/Characters.module.scss b/apps/site/src/app/(home)/sections/Landing/Characters.module.scss
@@ -2,11 +2,12 @@
 
 .character {
 	position: absolute;
-	width: 60px;
 	visibility: hidden;
 	right: 18vw;
-	top: 16vw;
+	top: 15.5vw;
 	transform: translateY(-70%);
+	width: 80px;
+	max-width: 7vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;
@@ -15,12 +16,12 @@
 
 .characterFoam {
 	position: absolute;
-	width: 60px;
 	visibility: hidden;
 	right: 18vw;
-	top: 16.3vw;
-
+	top: 16.4vw;
 	transform: translateY(-50%);
+	width: 80px;
+	max-width: 7vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;
@@ -29,11 +30,12 @@
 
 .characterShadow {
 	position: absolute;
-	width: 60px;
 	visibility: hidden;
 	right: 18vw;
-	top: 16vw;
+	top: 16.5vw;
 	transform: translateY(-20%);
+	width: 80px;
+	max-width: 7vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;
@@ -42,11 +44,12 @@
 
 .mainCharacter {
 	position: absolute;
-	width: 180px;
+	width: 300px;
 	visibility: hidden;
 	left: 10vw;
 	top: 32vw;
 	transform: translate(-50%, -50%);
+	max-width: 18vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;
@@ -55,11 +58,12 @@
 
 .beachBall {
 	position: absolute;
-	width: 150px;
+	width: 300px;
 	visibility: hidden;
 	right: 2vw;
 	top: 22vw;
 	transform: translate(calc(50% - 10vw), calc(-50% + 5vw));
+	max-width: 14vw;
 
 	@include bootstrap.media-breakpoint-up(md) {
 		visibility: visible;

diff --git a/apps/site/src/app/(home)/sections/Landing/Characters.tsx b/apps/site/src/app/(home)/sections/Landing/Characters.tsx
@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { motion } from "framer-motion";
 
 import waterAnteater from "@/assets/images/intro-water-anteater.svg";
 import waterAnteaterFoam from "@/assets/images/intro-character-foam.svg";
@@ -12,27 +13,59 @@ import styles from "./Characters.module.scss";
 export default function Characters() {
 	return (
 		<div>
-			<Image
-				src={waterAnteater}
-				alt="Anteater floating in the water"
-				className={styles.character}
-			/>
-			<Image
-				src={waterAnteaterShadow}
-				alt="Reflection of anteater in the water"
-				className={styles.characterShadow}
-			/>
-			<Image
-				src={waterAnteaterFoam}
-				alt="Foam between anteater and the water"
-				className={styles.characterFoam}
-			/>
-			<Image
-				src={mainCharacter}
-				alt="Anteater standing on the shore"
-				className={styles.mainCharacter}
-			/>
-			<Image src={beachBall} alt="Beach ball" className={styles.beachBall} />
+			<motion.div
+				initial={{ translateX: 100, opacity: 0 }}
+				animate={{ translateX: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.6 }}
+			>
+				<Image
+					src={waterAnteater}
+					alt="Anteater floating in the water"
+					className={styles.character}
+				/>
+			</motion.div>
+			<motion.div
+				initial={{ translateX: 100, opacity: 0 }}
+				animate={{ translateX: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.6 }}
+			>
+				<Image
+					src={waterAnteaterShadow}
+					alt="Reflection of anteater in the water"
+					className={styles.characterShadow}
+				/>
+			</motion.div>
+
+			<motion.div
+				initial={{ translateX: 100, opacity: 0 }}
+				animate={{ translateX: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.6 }}
+			>
+				<Image
+					src={waterAnteaterFoam}
+					alt="Foam between anteater and the water"
+					className={styles.characterFoam}
+				/>
+			</motion.div>
+
+			<motion.div
+				initial={{ translateY: -100, opacity: 0 }}
+				animate={{ translateY: 0, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 1 }}
+			>
+				<Image
+					src={mainCharacter}
+					alt="Anteater standing on the shore"
+					className={styles.mainCharacter}
+				/>
+			</motion.div>
+			<motion.div
+				initial={{ scale: 0.85, opacity: 0 }}
+				animate={{ scale: 1, opacity: 1 }}
+				transition={{ duration: 0.5, delay: 0.8 }}
+			>
+				<Image src={beachBall} alt="Beach ball" className={styles.beachBall} />
+			</motion.div>
 		</div>
 	);
 }
diff --git a/apps/site/src/app/(home)/sections/Sponsors/getSponsors.ts b/apps/site/src/app/(home)/sections/Sponsors/getSponsors.ts
@@ -10,7 +10,11 @@ const Sponsors = SanityDocument.extend({
 			_key: z.string(),
 			name: z.string(),
 			url: z.string().url().optional(),
-			tier: z.union([z.literal("bronze"), z.literal("silver")]),
+			tier: z.union([
+				z.literal("bronze"),
+				z.literal("silver"),
+				z.literal("gold"),
+			]),
 			logo: SanityImageReference,
 		}),
 	),

diff --git a/apps/site/src/assets/icons/open-new-window.svg b/apps/site/src/assets/icons/open-new-window.svg
diff --git a/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss b/apps/site/src/views/Resources/components/HeadingCard/HeadingCard.module.scss
@@ -22,6 +22,7 @@ $heading-font-size: 1.75rem;
 }
 
 .bang {
+	display: none;
 	margin-right: $mobile-item-padding-x - 0.4375;
 }
 
@@ -40,8 +41,9 @@ $heading-font-size: 1.75rem;
 	.card {
 		padding: $item-padding-y $item-padding-x;
 	}
-	
+
 	.bang {
+		display: block;
 		margin-right: $item-padding-x - 0.4375;
 	}
 }
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.module.scss
@@ -2,75 +2,37 @@
 @use "bootstrap-utils" as utils;
 
 .group {
-	margin-top: 50px;
 	position: relative;
 	padding: 1rem 0;
 	width: 200px;
 }
 
-.tape {
-	background-image: url("~@/assets/images/tape.svg");
-	width: 238px;
-	height: 60px;
-	position: absolute;
-	top: 3%;
-	left: 15%;
-	z-index: 10;
-	@media screen and (max-width: 400px) {
-		left: 10%;
-	}
-}
-
 .container {
 	position: relative;
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 	align-items: center;
 	gap: 10px;
-	height: 450px;
+}
+
+.buttonImage {
+	width: 50px;
 }
 
 .titleLink {
 	font-family: inherit;
 	text-decoration: none;
 	color: inherit;
+	font-weight: 600;
+	color: theme.$lighter-black;
 	:link {
 		text-decoration: none;
 	}
 }
 
-.tag {
-	background-image: url("~@/assets/images/resource-link.svg");
-	background-size: 100% 100%;
-	background-repeat: no-repeat;
-	background-position: left;
-	display: inline-block;
-	padding: 1rem;
-	padding-right: 3rem;
-	margin-left: -6px;
-	margin-bottom: 0.5rem;
-	transition:
-		filter 0.13s ease,
-		transform 0.13s ease,
-		filter 0.13s ease;
-
-	color: theme.$black;
-	text-decoration: none;
-	font-weight: bold;
-
-	&:hover,
-	&:focus {
-		transform: translateX(-5px) translateZ(0);
-		filter: drop-shadow(1px 0px 0px black) drop-shadow(-2px 0px 0px black)
-			drop-shadow(0px 2px 0px black) drop-shadow(0px -2px 0px black);
-	}
-}
-
-.text {
-	width: 90%;
-	text-align: center;
-	font-family: utils.$font-family-base;
+.titleLinkIcon {
+	margin-bottom: 0.2rem;
 }
 
 .islandBackground {
@@ -90,25 +52,43 @@
 	min-width: 350px;
 }
 
-.description {
-	overflow: auto;
+.description > * {
+	margin: 0;
+	font-size: 1.05rem;
+	color: theme.$lighter-black;
+}
+
+@include utils.media-breakpoint-up(md) {
+	.container {
+		position: relative;
+		display: flex;
+		flex-direction: column;
+		justify-content: center;
+		align-items: center;
+		gap: 10px;
+		height: 450px;
+	}
+
+	.buttonImage {
+		width: 100px;
+	}
 }
 
 @include utils.media-breakpoint-up(sm) {
 	.CardContainer {
 		width: 500px;
 		min-width: 500px;
 	}
+
 	.islandBackground {
 		width: 500px;
 	}
+
 	.group {
 		width: 300px;
 	}
-}
 
-@include utils.media-breakpoint-down(sm) {
-	.description {
-		max-height: 100px;
+	.description > * {
+		font-size: 24px;
 	}
 }
diff --git a/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx b/apps/site/src/views/Resources/components/ResourceCard/ResourceCard.tsx
@@ -69,7 +69,7 @@ export default function ResourceCard({
 							<motion.img
 								src={stickerSrc}
 								alt="Resource logo"
-								width="100"
+								className={styles.buttonImage}
 								variants={variant}
 							/>
 						)}
@@ -88,14 +88,15 @@ export default function ResourceCard({
 							)}{" "}
 							{links.map(({ text, link }) => (
 								<motion.a
-									className="d-inline ms-1 vertical-align-middle"
+									className={"d-inline ms-1 vertical-align-middle"}
 									variants={variant}
 									key={link}
 									href={link}
 									target="_blank"
 									rel="noopener noreferrer"
 								>
 									<Image
+										className={styles.titleLinkIcon}
 										src={openNewWindow}
 										width="20"
 										height="20"