From 8cf760f3eb03ebebeaee6b0b38f9001108cb4429 Mon Sep 17 00:00:00 2001
From: Noah Kim <noahmk5002@gmail.com>
Date: Fri, 1 Nov 2024 16:20:52 -0700
Subject: [PATCH] Updated resource top margin. Fixed palm tree oversize on zoom
 out. Updated hammerhead and bird spacing on zoom out.

---
 .../sections/Figures/Figures.module.scss      | 68 ++++++++-----------
 .../Resources/sections/Figures/Figures.tsx    | 23 ++++---
 .../sections/Landing/Landing.module.scss      |  4 +-
 3 files changed, 44 insertions(+), 51 deletions(-)

diff --git a/apps/site/src/views/Resources/sections/Figures/Figures.module.scss b/apps/site/src/views/Resources/sections/Figures/Figures.module.scss
index fd25a7c5..b8a7ef7d 100644
--- a/apps/site/src/views/Resources/sections/Figures/Figures.module.scss
+++ b/apps/site/src/views/Resources/sections/Figures/Figures.module.scss
@@ -1,22 +1,36 @@
 @use "bootstrap-utils" as bootstrap;
 
+.landingFigures {
+	position: absolute;
+	z-index: 1000;
+	top: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 80vw;
+	min-width: 1100px;
+	max-width: 1200px;
+	height: 300px;
+}
+
 .hammerhead {
 	position: absolute;
 	visibility: hidden;
-	transform: translateY(9vh);
+	bottom: 0;
+	left: 0;
 }
 
 .birds {
 	position: absolute;
 	visibility: hidden;
 	width: 275px;
-	transform: translateY(-10%);
+	right: 0;
+	bottom: 0;
 }
 
 .palmTree {
 	position: absolute;
 	right: 0;
-	transform: translateY(90vh);
+	transform: translateY(95vh);
 	width: 30vw;
 
 	z-index: 2;
@@ -27,7 +41,7 @@
 .palmTreeShade {
 	position: absolute;
 	right: 0;
-	transform: translateY(calc(100vh + 50%));
+	transform: translateY(calc(105vh + 50%));
 	width: 30vw;
 
 	z-index: 1;
@@ -35,61 +49,37 @@
 	height: auto;
 }
 
-@include bootstrap.media-breakpoint-up(md) {
+@include bootstrap.media-breakpoint-up(sm) {
 	.palmTree {
 		visibility: visible;
 	}
-
 	.palmTreeShade {
 		visibility: visible;
 	}
 }
 
 @include bootstrap.media-breakpoint-up(lg) {
-	.hammerhead {
-		visibility: visible;
-		left: 5vh;
-	}
-
-	.birds {
-		visibility: visible;
-		right: 2vh;
-	}
-
 	.palmTree {
-		visibility: visible;
+		transform: translateY(95vh);
+		width: 20vw;
 	}
-
 	.palmTreeShade {
-		visibility: visible;
+		transform: translateY(calc(105vh + 50%));
+		width: 20vw;
 	}
-}
-@include bootstrap.media-breakpoint-up(lg) {
 	.hammerhead {
-		left: 10vh;
+		visibility: visible;
 	}
-
 	.birds {
-		right: 10vh;
-	}
-
-	.palmTree {
-		transform: translateY(75vh);
-		width: 20vw;
-	}
-
-	.palmTreeShade {
-		transform: translateY(calc(80vh + 50%));
-		width: 20vw;
+		visibility: visible;
 	}
 }
 
 @include bootstrap.media-breakpoint-up(xxl) {
-	.hammerhead {
-		left: 20vh;
+	.palmTree {
+		max-width: 500px;
 	}
-
-	.birds {
-		right: 20vh;
+	.palmTreeShade {
+		max-width: 500px;
 	}
 }
diff --git a/apps/site/src/views/Resources/sections/Figures/Figures.tsx b/apps/site/src/views/Resources/sections/Figures/Figures.tsx
index 5dd8a926..0ac5dc46 100644
--- a/apps/site/src/views/Resources/sections/Figures/Figures.tsx
+++ b/apps/site/src/views/Resources/sections/Figures/Figures.tsx
@@ -19,17 +19,20 @@ export default function Figures() {
 				animate={{ opacity: 1 }}
 				transition={{ duration: 2 }}
 			>
-				<Image
-					src={hammerhead}
-					alt="Hammerhead shark swimming in water"
-					className={styles.hammerhead}
-				/>
+				<div className={styles.landingFigures}>
+					<Image
+						src={hammerhead}
+						alt="Hammerhead shark swimming in water"
+						className={styles.hammerhead}
+					/>
+
+					<Image
+						src={birds}
+						alt="Birds flying above water"
+						className={styles.birds}
+					/>
+				</div>
 
-				<Image
-					src={birds}
-					alt="Birds flying above water"
-					className={styles.birds}
-				/>
 				<Image
 					src={palmTreeShade}
 					alt="Palm tree shadow"
diff --git a/apps/site/src/views/Resources/sections/Landing/Landing.module.scss b/apps/site/src/views/Resources/sections/Landing/Landing.module.scss
index ad21aa9c..35550de2 100644
--- a/apps/site/src/views/Resources/sections/Landing/Landing.module.scss
+++ b/apps/site/src/views/Resources/sections/Landing/Landing.module.scss
@@ -17,7 +17,7 @@
 
 @include bootstrap.media-breakpoint-up(lg) {
 	.landing {
-		margin-top: 40vh;
-		margin-bottom: 40vh;
+		margin-top: 200px;
+		margin-bottom: 300px;
 	}
 }