Initial attempt at setting scrolls as backgrounds for the cards

Set width and height of cards manually so content can fit properly within the scroll background Added media queries to shrink and rotate background images for smaller devices Pulled updates from other branches Added additional media queries to remove bleeding text issue Incorporated new scrolls created by graphics and added additional media queries to minimize text overflow
HackAtUCI · Oct 14, 2022 · 5362152 · 5362152
1 parent 0e9f66c
commit 5362152
Show file tree

Hide file tree

Showing 22 changed files with 220 additions and 114 deletions.
diff --git a/src/App.js b/src/App.js
@@ -3,7 +3,7 @@ import { Route, Routes, Navigate } from "react-router-dom";
 import "globals/bootstrap.scss";
 import "./App.scss";
 
-import { NavigationBar, Footer } from "app/components";
+import { NavigationBar } from "app/components";
 import { Apply, Home, Schedule, StarterPacks } from "app/views";
 
 function App() {
@@ -18,7 +18,6 @@ function App() {
 				{/* redirect to Home if route not found */}
 				<Route path="*" element={<Navigate to="/" />} />
 			</Routes>
-			<Footer />
 		</div>
 	);
 }

diff --git a/src/App.scss b/src/App.scss
@@ -8,7 +8,7 @@ body {
   text-align: center;
   min-height: 100vh;
   width: 100vw;
-  background-color: #ffffff;
+  background: linear-gradient($redBrownBackground 0%, $orangeBrownBackground 50%, $redBrownBackground 100%);
   color: $fontColor;
   overflow-y: auto;
 

diff --git a/src/app/components/footer/Footer.scss b/src/app/components/footer/Footer.scss
@@ -1,7 +1,6 @@
 @import "globals/zothacks-styles.scss";
 
 .footer {
-  background: $redBrownBackground;
   padding-bottom: 60px;
 }
 

diff --git a/src/app/views/home/Home.js b/src/app/views/home/Home.js
@@ -2,7 +2,7 @@ import React from "react";
 import Fade from "react-reveal/Fade";
 import ReactTooltip from "react-tooltip";
 
-import { Blinkers } from "app/components";
+import { Blinkers, Footer } from "app/components";
 
 import Landing from "./sections/Landing";
 import Intro from "./sections/Intro";
@@ -29,6 +29,7 @@ function Home() {
 				<Sponsors />
 			</Fade>
 			<Faq />
+			<Footer />
 		</div>
 	);
 }

diff --git a/src/app/views/home/Home.scss b/src/app/views/home/Home.scss
@@ -1,6 +1,8 @@
 @import "globals/zothacks-styles.scss";
+@import "globals/zothacks-helper.scss";
 
 .home {
+	@include zothacks-background;
 	text-align: center;
 	min-height: 100vh;
 
@@ -44,14 +46,8 @@
 	.card {
 		color: $black;
 		width: 60vw;
-		background: linear-gradient(
-			to right,
-			$lightPurpleBackground,
-			$darkPurpleBackground
-		);
 		padding: 3rem;
 		border-radius: 1rem;
-		box-shadow: 0 30px 40px rgba(205, 106, 215, 0.54);
 		z-index: 1;
 
 		@media screen and (max-width: $break-small) {

diff --git a/src/app/views/home/sections/Intro.scss b/src/app/views/home/sections/Intro.scss
@@ -1,3 +1,5 @@
+@import "globals/zothacks-styles.scss";
+
 .home {
 	.intro {
 		margin: 7rem 0 0 0;
@@ -8,14 +10,60 @@
 		position: relative;
 
 		.card {
-			background: linear-gradient(270deg, #191970 0%, #7655bc 100%),
-				linear-gradient(270deg, #a4c7ef 0%, #ebfbff 100%) !important;
-			box-shadow: 0px 50px 100px 0px rgba(134, 47, 156, 0.4);
+			width: 1000px;
+			height: 560px;
+			padding: 70px 0;
+			p {
+				width: 60%;
+				margin: 0 auto;
+			}
 		}
 
 		.zothacks-logo {
 			width: 100px;
 			margin: 0 auto 2rem auto;
 		}
 	}
+
+	@media only screen and (max-width: 900px) {
+		.intro .card{
+			width: 75vw;
+		}
+		.intro:before{
+			content: "";
+
+			// Since we rotate 90 degrees, what's previously considered width is now
+			// considered height and vice versa.
+			height: 90vw;
+			width: 90vh;
+
+			position: absolute;
+			background-image: url('../../../../assets/images/scroll_light_medium.png');
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: contain;
+			transform: rotate(90deg) translate(7.5vw, 3vw);
+		}
+	}
+	@media only screen and (min-width: 901px) {
+		.intro .card {
+			background-image: url('../../../../assets/images/scroll_light_medium.png');
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: contain;
+		}
+	}
+	@media only screen and (min-width: 901px) and (max-width: $break-medium) {
+		.mentor-information {
+			align-items: start;
+		}
+
+		.mentors .card {
+			width: 90vw;
+
+			p {
+				text-align: left;
+			}
+		}
+	}
 }
diff --git a/src/app/views/home/sections/Landing.js b/src/app/views/home/sections/Landing.js
@@ -3,23 +3,27 @@ import React from "react";
 import Fade from "react-reveal/Fade";
 
 import "./Landing.scss";
+import jeepBody from "assets/images/jeep_body.png";
+import jeepWheels from "assets/images/jeep_wheels.png"
 
 const APPLICATION_URL =
 	"https://docs.google.com/forms/d/e/1FAIpQLSdPhGwP7KUTcIa6rWsPlyCswlykZwR-dXCJo78Gxahy0Q3sTA/viewform";
 
 function Landing() {
 	return (
-		<section className="landing">
-			<div className="intro-wrapper">
-				<div className="title-info">
-					<Fade duration={1000} left>
-						<div className="hero-wrapper">
-							<h1 className="glow">ZotHacks</h1>
-							<span className="h3">November 20-21, 2021</span>
-						</div>
-					</Fade>
+		<section className="container landing">
+			<Fade duration={1000} left>
+				<div className="jeep-wrapper">
+					<img src={jeepBody} alt="Jeep's Body" />
+					<img src={jeepWheels} alt="Jeep's Wheels" />
 				</div>
-			</div>
+			</Fade>
+			<Fade duration={1000} right>
+				<div className="landing-title">
+					<h1 className="glow">ZotHacks</h1>
+					<span className="h3">November 20-21, 2021</span>
+				</div>
+			</Fade>
 		</section>
 	);
 }

diff --git a/src/app/views/home/sections/Landing.scss b/src/app/views/home/sections/Landing.scss
@@ -1,93 +1,40 @@
+@use "globals/bootstrap";
 @import "globals/zothacks-styles.scss";
 
 .home {
 	.landing {
 		height: 100vh;
-		position: relative;
 		display: flex;
-		justify-content: space-between;
+		flex-direction: column-reverse;
 		align-items: center;
-		flex-direction: column;
-		text-align: left;
-		color: white;
-		box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.1);
-		background: linear-gradient(
-			to right,
-			$lightPurpleBackground,
-			$darkPurpleBackground
-		);
+		justify-content: center;
 
-		.intro-wrapper {
-			display: flex;
-			align-items: center;
-			justify-content: center;
-			width: 100%;
-			height: calc(100% - 320px);
+		@include bootstrap.media-breakpoint-up(lg) {
+			flex-direction: row;
 		}
 
-		.schedule-nav {
-			position: absolute;
-			top: 0;
-			right: 0;
-			display: flex;
-			justify-content: flex-end;
-
-			a {
-				margin-right: 0 !important;
-				text-decoration: none;
-				display: flex;
-				align-items: center;
+		text-align: center;
+		color: white;
+		box-shadow: inset 0px 0px 15px rgba(0, 0, 0, 0.1);
 
-				h5 {
-					margin-bottom: 0;
-					margin-left: 30px;
-				}
-			}
+		h1 {
+			@include bootstrap.font-size(5rem);
 		}
 
-		.schedule-button {
-			margin: 2em;
-			box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
+		.landing-title {
+			padding: 2rem;
 		}
 
-		.title-info {
-			display: flex;
-			flex-direction: row;
-			margin-top: 15rem;
-
-			@media screen and (max-width: $break-medium) {
-				flex-direction: column-reverse;
-				align-items: center;
-				text-align: center;
-				justify-content: center;
-				margin-top: 20rem;
-
-				h1 {
-					font-size: 60px;
-				}
-			}
-
-			.hero-wrapper {
-				display: flex;
-				flex-direction: column;
-				justify-content: flex-start;
-				z-index: 3;
-			}
-
-			@media screen and (max-width: $break-small) {
-				.title-info {
-					width: 100vw;
-				}
-			}
-
-			div {
-				display: flex;
-				flex-direction: column;
-				justify-content: center;
+		.jeep-wrapper {
+			img {
+				width: min(100%, calc(30rem + 10vw));
+				height: auto;
 			}
 
-			h1 {
-				margin-bottom: 0.1em !important;
+			:first-child {
+				position: absolute;
+				top: 20px;
+				animation: wobble 1.5s forwards, bounce 1s 1.5s infinite;
 			}
 		}
 	}

diff --git a/src/app/views/home/sections/Mentors.scss b/src/app/views/home/sections/Mentors.scss
@@ -9,7 +9,10 @@
 		position: relative;
 
 		.card {
-			box-shadow: 0px 50px 100px 0px rgba(205, 106, 215, 0.54);
+			width: 1200px;
+			height: 600px;
+			padding: 80px;
+			align-items: center;
 		}
 
 		& > h2 {
@@ -22,7 +25,7 @@
 			flex-direction: row;
 			justify-content: space-between;
 
-			@media screen and (max-width: $break-medium) {
+			@media screen and (max-width: 700px) {
 				flex-direction: column;
 				align-items: center;
 			}
@@ -31,11 +34,10 @@
 				width: 18vw;
 				height: 18vw;
 				border-radius: 1rem;
-				margin-right: 1rem;
 
-				@media screen and (max-width: $break-medium) {
-					width: 15rem;
-					height: 15rem;
+				@media screen and (max-width: 700px) {
+					width: 10rem;
+					height: 10rem;
 					margin-right: 0;
 				}
 			}
@@ -51,7 +53,7 @@
 					text-align: left;
 				}
 
-				@media screen and (max-width: $break-medium) {
+				@media screen and (max-width: 700px) {
 					margin: 2rem 0 1rem 0;
 					text-align: center;
 					align-items: center;
@@ -62,4 +64,50 @@
 			}
 		}
 	}
+	@media only screen and (max-width: 700px) {
+		.mentors .card{
+			width: 50vw;
+
+			p, a {
+				text-align: center;
+			}
+		}
+		.mentors:before{
+			content: "";
+
+			// Since we rotate 90 degrees, what's previously considered width is now
+			// considered height and vice versa.
+			height: 90vw;
+			width: 90vh;
+
+			position: absolute;
+			background-image: url('../../../../assets/images/scroll_dark_wide.png');
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: contain;
+			transform: rotate(90deg) translate(7.5vw, 3vw);
+		}
+	}
+	@media only screen and (min-width: 701px) {
+		.mentors .card {
+			background-image: url('../../../../assets/images/scroll_dark_wide.png');
+			background-position: center;
+			background-repeat: no-repeat;
+			background-size: contain;
+			padding: 90px 150px 150px 150px;
+		}
+	}
+	@media only screen and (min-width: 701px) and (max-width: $break-medium) {
+		.mentor-information {
+			align-items: start;
+		}
+
+		.mentors .card {
+			width: 90vw;
+
+			p {
+				text-align: left;
+			}
+		}
+	}
 }