Updated resource top margin. Fixed palm tree oversize on zoom out. Up…

…dated hammerhead and bird spacing on zoom out.
HackAtUCI · Nov 1, 2024 · 8cf760f · 8cf760f
1 parent f2e5dad
commit 8cf760f
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 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
@@ -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,69 +41,45 @@
 .palmTreeShade {
 	position: absolute;
 	right: 0;
-	transform: translateY(calc(100vh + 50%));
+	transform: translateY(calc(105vh + 50%));
 	width: 30vw;
 
 	z-index: 1;
 	visibility: hidden;
 	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
@@ -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
@@ -17,7 +17,7 @@
 
 @include bootstrap.media-breakpoint-up(lg) {
 	.landing {
-		margin-top: 40vh;
-		margin-bottom: 40vh;
+		margin-top: 200px;
+		margin-bottom: 300px;
 	}
 }