feat(newSite): started on mobile layout, todo contact us history

src/AboutUs/AboutUs.css

@@ -2,7 +2,6 @@
 	display: flex;
 	flex-direction: column;
 	padding: 4svh 2svw;
-	row-gap: 4svh;
 	justify-content: center;
 	align-items: center;
 
@@ -11,6 +10,11 @@
 	font-size: larger;
 }
 
+#AboutUs p {
+	padding: 0svh 0svw;
+	margin: 1.5svh 0svw;
+}
+
 #AboutUs h2 {
 	padding-bottom: 0.5svh;
 	font-size: 36px;
@@ -24,11 +28,26 @@
 	justify-content: flex-start;
 	align-items: flex-start;
 	padding: 2svh 2svw;
-
+	max-width: 65svw;
 	border-radius: 1rem;
 	border: 1px solid white;
 }
 
+#AboutEvents ul {
+	display: flex;
+	flex-flow: row wrap;
+	list-style-type: none;
+	margin: 0px;
+	padding: 0px;
+	justify-content: space-evenly;
+}
+#AboutEvents ul li:first-child {
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
 #AboutUs div {
 	display: flex;
 	flex-flow: row wrap;
@@ -39,7 +58,7 @@
 
 #AboutUs img {
 	width: 400px;
-
+	aspect-ratio: 1;
 	border-radius: 1rem;
 }
 
@@ -96,3 +115,15 @@
 	border-radius: 1rem;
 	border: 1px solid white;
 }
+
+@media only screen and (max-width: 800px) {
+	#AboutEvents {
+		max-width: 80svw;
+	}
+
+	#AboutUs img {
+		width: 300px;
+
+		border-radius: 1rem;
+	}
+}

src/AboutUs/AboutUs.js

@@ -20,18 +20,32 @@ const AboutsUs = () => {
 			<div id="AboutUs">
 				<div id="AboutEvents">
 					<h2>Upcoming Events</h2>
-					<h4>Baja SAE April</h4>
+					<ul>
-					<CountDownTimer
+						<li>
-						dateFinished={new Date("April 29, 2026 00:00:00")}
+							<h4>Recuitment Opens</h4>
-						messageDisplayBefore={""}
+							<CountDownTimer
-						messageDisplayAfter={<p>Wish Us Luck!</p>}
+								dateFinished={new Date("August 29, 2025 00:00:00")}
-					/>
+								messageDisplayBefore={""}
-					<h4>Baja SAE May</h4>
+								messageDisplayAfter={<p>Link to google form</p>}
-					<CountDownTimer
+							/>
-						dateFinished={new Date("May 22, 2026 00:00:00")}
+						</li>
-						messageDisplayBefore={""}
+						<li>
-						messageDisplayAfter={<p>Ready! Set! Go!</p>}
+							<h4>Baja SAE April</h4>
-					/>
+							<CountDownTimer
+								dateFinished={new Date("April 29, 2026 00:00:00")}
+								messageDisplayBefore={""}
+								messageDisplayAfter={<p>Wish Us Luck!</p>}
+							/>
+						</li>
+						<li>
+							<h4>Baja SAE May</h4>
+							<CountDownTimer
+								dateFinished={new Date("May 22, 2026 00:00:00")}
+								messageDisplayBefore={""}
+								messageDisplayAfter={<p>Ready! Set! Go!</p>}
+							/>
+						</li>
+					</ul>
 				</div>
 				<div>
 					<div>

src/Footer/Ender.css

@@ -35,5 +35,8 @@
 }
 
 #ender a img {
-	height: 3svh;
+	height: 30px;
+	width: 30px;
+	aspect-ratio: 1;
+	filter: invert();
 }

src/Footer/Ender.js

@@ -1,6 +1,4 @@
 import "./Ender.css";
-import linkedInLogo from "./InBug-White.png";
-import instagramLogo from "./instagram-white-icon.png";
 
 /**
  * @param {null} null - requires onthing
@@ -25,13 +23,13 @@ export default function Ender() {
 			<div>
 				<a href="https://www.linkedin.com/company/schulich-off-road/">
 					<img
-						src={linkedInLogo}
+						src="https://www.svgrepo.com/show/521725/linkedin.svg"
 						alt="Linkedin Logo"
 					/>
 				</a>
 				<a href="https://www.instagram.com/uofcbaja/">
 					<img
-						src={instagramLogo}
+						src="https://www.svgrepo.com/show/521711/instagram.svg"
 						alt="Intragram Logo"
 					/>
 				</a>
@@ -45,7 +43,7 @@ export default function Ender() {
 				</a>
 				<a href="https://www.facebook.com/schulich.offroad/">
 					<img
-						style={{ filter: `invert()`, height: `3.25svh` }}
+						style={{ filter: `invert()` }}
 						src="https://www.svgrepo.com/show/521654/facebook.svg"
 						alt="Facebook Logo"
 					/>

src/Home/Home.css

@@ -22,7 +22,8 @@
 	/* height: clamp(200px, 100%, 55svh); */
 	/* height: 100%; */
 	/* max-width: 40%; */
-	height: 52svh;
+	height: 350px;
+	width: 350px;
 
 	align-self: center;
 }
@@ -72,7 +73,7 @@
 	border: solid 2px white;
 
 	padding: 30px;
-	max-width: 800px;
+	max-width: 80svw;
 }
 
 #HomeSponsors h2 {
@@ -111,6 +112,7 @@
 	min-width: 200px;
 	max-width: inherit;
 	max-height: 80px;
+	width: auto;
 }
 
 #HomeSponsors div div div h3 {
@@ -129,17 +131,13 @@
 #HomeSponsorLinks a {
 	margin-top: auto;
 	padding: 1svh 4svw;
-	/* padding-left: 5svw; */
-	/* padding-right: 5svw; */
 	margin: 0px 2svw;
-	width: 8svw;
 	text-wrap: nowrap;
 	text-align: center;
 }
 
 #HomeBottomGallery {
 	width: 70svw;
-
 	height: 60svh;
 }
 
@@ -147,3 +145,18 @@
 	width: inherit;
 	height: inherit;
 }
+
+@media only screen and (max-width: 800px) {
+	.HomePageLayout div {
+		padding: 0svh 4svw;
+	}
+	.HomePageLayout div img {
+		width: 275px;
+		height: 275px;
+	}
+
+	#HomeBottomGallery {
+		width: 80svw;
+		height: 60svh;
+	}
+}