feat(about): finsihed, minor teaking required and real images

src/AboutUs/AboutUs.css

@@ -3,6 +3,12 @@
 	flex-direction: column;
 }
 
+#About img {
+	border-radius: 0.5rem;
+	/* aspect-ratio: 1 /1;
+	object-fit: contain; */
+}
+
 #About h3 {
 	font-size: 100px;
 	margin: 0px;
@@ -149,6 +155,11 @@
 	background-color: whitesmoke;
 }
 
+#leadership img {
+	width: 200px;
+	height: 200px;
+}
+
 #leadership h4 {
 	font-size: 40px;
 	margin: 0px;
@@ -182,14 +193,52 @@
 	flex-flow: row wrap;
 	column-gap: 2svw;
 	row-gap: 2svh;
+	justify-content: space-evenly;
 }
 
 #leadership div div {
 	display: flex;
 	flex-direction: column;
 	column-gap: 0svh;
+	max-width: 20svw;
 }
 
 #leadership div div p {
-	max-width: 20svw;
+	margin: 0px;
+	/* this is horrible DO NOT DO */
+	min-height: 64px;
+}
+
+#about-team > div:nth-child(1) {
+	flex-wrap: nowrap;
+	max-width: 60svw;
+	margin-left: auto;
+	margin-right: auto;
+	column-gap: 2svw;
+}
+
+#about-team h4 {
+	font-size: large;
+	text-wrap: nowrap;
+}
+
+#about-team div {
+	display: flex;
+	flex-flow: row wrap;
+	justify-content: space-evenly;
+	column-gap: 2svw;
+	row-gap: 2svh;
+}
+
+#about-team div div {
+	display: flex;
+	flex-direction: column;
+	background-color: rgba(128, 128, 128, 0.6);
+	border-radius: 0.5rem;
+	padding: 0.5svh 0.5svw;
+}
+
+#about-team div div p {
+	padding: 0px;
+	margin: 0px;
 }

src/AboutUs/AboutUs.js

@@ -318,7 +318,7 @@ export default function AboutsUs() {
 						})}
 					</div>
 				</div>
-				<div>
+				<div id="about-team">
 					<div>
 						<h4>Meet the Rest of the Team</h4>
 						<p>

src/Header/Header.css

@@ -4,10 +4,16 @@ header {
 	margin: 1%;
 	margin-top: 1svh;
 	padding-right: 0.5svw;
+	/* width: 100%; */
 
 	align-items: center;
 	justify-content: space-between;
 	background-color: #1f1f1f;
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	right: 0;
 }
 
 header a {
@@ -121,29 +127,15 @@ nav a li:hover {
 	width: 100%;
 	display: flex;
 
-	/* bebug border, use margin to advantage, may cause error later */
+	position: relative;
-	/* border-bottom: solid 1px black; */
+	z-index: 0;
-}
-
-:root {
-	--fade-starts-at-bottom: 80%;
-	--fade-starts-at-top: 96%;
-	--banner-text-pos-left: 15svw;
-	--banner-text-background: white;
-}
-
-#BannerHeader img {
-	position: absolute;
-	height: 100svh;
-	width: inherit;
 	top: 0;
 	left: 0;
+	background-repeat: no-repeat;
 	background-size: cover;
 	background-position: center;
 
-	z-index: -2;
+	/* -webkit-mask-image: linear-gradient(
-
-	-webkit-mask-image: linear-gradient(
 		to bottom,
 		black var(--fade-starts-at-bottom),
 		transparent
@@ -152,12 +144,44 @@ nav a li:hover {
 		to bottom,
 		black var(--fade-starts-at-bottom),
 		transparent
-	);
+	); */
 }
 
+#BannerHeader::after {
+	content: "";
+	position: absolute;
+	inset: 0;
+	background: linear-gradient(
+		to bottom,
+		rgba(0, 0, 0, 0) var(--fade-starts-at-bottom, 70%),
+		whitesmoke 100%
+	);
+	pointer-events: none;
+	z-index: 1;
+}
+
+:root {
+	--fade-starts-at-bottom: 90%;
+	--fade-starts-at-top: 96%;
+	--banner-text-pos-left: 15svw;
+	--banner-text-background: white;
+}
+
+/* #BannerHeader img {
+	position: relative;
+	height: 100svh;
+	width: inherit;
+	top: 0;
+	left: 0;
+	background-size: cover;
+	background-position: center;
+
+	z-index: -2;
+} */
+
 /* used to postiion title and sub title */
 #BannerHeader div {
-	margin-top: 15%;
+	margin-top: 25%;
 }
 
 #BannerHeader h1 {

src/Header/Header.js

@@ -3,7 +3,7 @@ import lightDark from "./light-dark.webp";
 import { Outlet, Link } from "react-router-dom";
 import "./Header.css";
 import Ender from "../Footer/Ender";
-import { useEffect, useState } from "react";
+import { useState } from "react";
 
 /**
  * @param {null} nothing - Takes in nothing
@@ -17,11 +17,6 @@ export default function Header() {
 		titleText: "UCalgary Baja",
 		subtitleText: "Hello",
 		imgUrl: "https://picsum.photos/200",
-		imgAlt: "Lorem picsum",
-	});
-
-	useEffect(() => {
-		HeaderBannerHeight();
 	});
 
 	/**
@@ -53,36 +48,6 @@ export default function Header() {
 		}
 	});
 
-	/**
-	 * @param {null} nothing - This takes in nothing
-	 * @returns {null} nothing - This returns nothing
-	 * @description This makes it so that the banner will always be 100% of the page at the top
-	 * @author Brock <darkicewolf50@gmail.com>
-	 */
-	const HeaderBannerHeight = () => {
-		if (bannerInfo.titleText === "" && bannerInfo.imgUrl === "") {
-			// return early to avoid error when no banner is desired
-			return;
-		}
-		const headerTop = document.getElementsByTagName("header")[0];
-		const headerTopStyle = getComputedStyle(headerTop);
-		const headerTopInnerHeight = headerTop.offsetHeight;
-		// 2 is used to align bottom of div with img
-		const headerTopMarginTop = parseFloat(headerTopStyle.marginTop) * 2;
-		const headerTopMarginHeight = parseFloat(headerTopStyle.marginBottom);
-
-		const headerTopTotalHeight =
-			headerTopInnerHeight + headerTopMarginHeight + headerTopMarginTop;
-
-		const HomeBannerTop = document.getElementById("BannerHeader");
-
-		// 1svh is to gget the div close enough to the image
-		HomeBannerTop.style.setProperty(
-			"height",
-			`calc(100svh + -${headerTopTotalHeight}px)`
-		);
-	};
-
 	return (
 		<>
 			<header>
@@ -161,17 +126,16 @@ export default function Header() {
 			{bannerInfo.titleText === "" && bannerInfo.imgUrl === "" ? (
 				<></>
 			) : (
-				<div id="BannerHeader">
+				<>
-					<img
+					<div
-						id="BannerBackgound"
+						id="BannerHeader"
-						src={bannerInfo.imgUrl}
+						style={{ backgroundImage: `url(${bannerInfo.imgUrl})` }}>
-						alt={bannerInfo.imgAlt}
-					/>
 						<div>
 							<h1>{bannerInfo.titleText}</h1>
 							<h2>{bannerInfo.subtitleText}</h2>
 						</div>
 					</div>
+				</>
 			)}
 
 			<Outlet context={{ bannerInfo, setBannerInfo }} />

src/Header/UpdateBanner.jsx

@@ -35,14 +35,7 @@ export default function UpdateBanner({
 			titleText: updatedTitleText,
 			subtitleText: updatedSubtitleText,
 			imgUrl: updatedImgUrl,
-			imgAlt: updatedImgAlt,
 		});
-	}, [
+	}, [updatedTitleText, updatedSubtitleText, updatedImgUrl, updateBanner]);
-		updatedTitleText,
-		updatedSubtitleText,
-		updatedImgUrl,
-		updatedImgAlt,
-		updateBanner,
-	]);
 	return <></>;
 }