From b34c2bb9deda62fbcdf64bc05c099d47ccc56472 Mon Sep 17 00:00:00 2001
From: Kevin Wu <kevinwu098@gmail.com>
Date: Mon, 8 Apr 2024 19:09:46 -0700
Subject: [PATCH] feat: landing page responsiveness (#97)

---
 .../Designathon24/Designathon24.module.scss   |  2 +-
 .../components/Splash/Splash.jsx              |  5 ++-
 .../components/Splash/Splash.module.scss      | 44 +++++++++++++------
 3 files changed, 35 insertions(+), 16 deletions(-)

diff --git a/src/app/pages/Designathons/Designathon24/Designathon24.module.scss b/src/app/pages/Designathons/Designathon24/Designathon24.module.scss
index f8bf842e..3029e86d 100644
--- a/src/app/pages/Designathons/Designathon24/Designathon24.module.scss
+++ b/src/app/pages/Designathons/Designathon24/Designathon24.module.scss
@@ -11,7 +11,7 @@
 	& > .hero {
 		height: 100vh;
 		width: 100%;
-		background-color: black;
+		background-color: var(--des24-cream);
 		display: grid;
 		overflow: hidden;
 		place-content: center;
diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
index d1d9494c..7ad7f289 100644
--- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
+++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.jsx
@@ -56,7 +56,9 @@ const Splash = memo(() => {
 
 			<GridBackground positions={[{ top: 0, left: 0 }]} isLight={true} />
 
-			<div className={cn.info}>
+			<SplashLogo ref={logoRef} className={cn.logo} />
+
+			<div className={clsx(cn.info, "wait")}>
 				<div className={cn.time}>
 					May 17th 6:30 PM - May 19th 4:30 PM
 				</div>
@@ -73,7 +75,6 @@ const Splash = memo(() => {
 					</div>
 				</div>
 			</div>
-			<SplashLogo ref={logoRef} className={cn.logo} />
 		</div>
 	);
 });
diff --git a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
index 51522d4d..2fdcf82f 100644
--- a/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
+++ b/src/app/pages/Designathons/Designathon24/components/Splash/Splash.module.scss
@@ -8,12 +8,16 @@
 
 	.logo {
 		position: relative;
-		max-width: max(50vw, 360px);
+		max-width: max(70vw, 360px);
 		margin: 0 auto;
-		padding-bottom: 60%;
+		padding-bottom: 40%;
 
-		@media screen and (min-width: 800px) {
-			padding-bottom: 40%;
+		@media screen and (min-width: 1024px) {
+			max-width: max(60vw, 360px);
+		}
+
+		@media screen and (min-width: 1280px) {
+			max-width: max(45vw, 360px);
 		}
 
 		path {
@@ -42,11 +46,11 @@
 		z-index: 110;
 
 		.time {
-			font-size: min(4vw, 40px);
+			font-size: min(7vw, 40px);
 			grid-column: 1/3;
 			font-family: "Gluten", cursive;
 			font-weight: 600;
-			margin-bottom: 24px;
+			margin: 0 2rem 24px;
 		}
 
 		.wrapper {
@@ -125,19 +129,28 @@
 	top: 0;
 	left: 0;
 
-	max-width: 40%;
+	max-width: 60%;
+
+	@media screen and (min-width: 475px) {
+		max-width: 50%;
+	}
+
+	@media screen and (min-width: 640px) {
+		max-width: 25%;
+	}
 
-	@media screen and (min-width: 800px) {
+	@media screen and (min-width: 1024px) {
 		max-width: 20%;
 	}
 }
 
 .butterfly {
-	top: 55%;
+	bottom: 30%;
 	left: 0;
 
-	@media screen and (min-width: 800px) {
+	@media screen and (min-width: 1024px) {
 		top: 30%;
+		max-width: 25%;
 	}
 }
 
@@ -149,13 +162,18 @@
 .mr_cloud_stars {
 	top: unset;
 	bottom: 35%;
+
 	right: 0;
-	max-width: 40%;
+	max-width: 33.5%;
 
-	@media screen and (min-width: 800px) {
-		top: 20%;
+	@media screen and (min-width: 640px) {
+		bottom: 35%;
 		max-width: 20%;
 	}
+
+	@media screen and (min-width: 1024px) {
+		top: 20%;
+	}
 }
 
 .br_star_stripe {