feat(contactUs and History): finished with mobile layout, todo functionality

src/Contact/Contact.css

@@ -9,30 +9,25 @@
 	margin: 0px;
 }
 
-#Contact img {
-	width: 100px;
-	height: 100px;
-}
-
 #Contact h1,
 #Contact h4,
 #Contact p {
 	margin: 1svh 0svw;
+	text-wrap: wrap;
 }
 
-#Contact div {
+#Contact > div:nth-child(1) {
 	display: flex;
 	flex-direction: row;
 	align-items: flex-start;
 	row-gap: 2svh;
 }
 
-#Contact div:nth-child(1) {
+#Contact > div:nth-child(1) {
 	flex-direction: row;
 	column-gap: 2svw;
-	/* justify-content: center; */
 	align-items: center;
-	background: black;
+	background: var(--BajaBlack);
 	color: white;
 	padding: 2svh 0svw;
 }
@@ -58,54 +53,25 @@
 
 #Contact div:nth-child(1) img {
 	width: 300px;
-	height: 80svh;
+	height: 600px;
 }
 
-#Contact div:nth-child(2) div {
+@media only screen and (max-width: 1025px) {
-	flex-direction: column;
+	#Contact > div:nth-child(1) > div:nth-child(1) > img:nth-child(1) {
-	font-size: 30px;
+		display: none;
-	font-weight: bold;
+	}
-	margin: 0px;
+
-	padding: 0svh 2svw;
+	#Contact > div:nth-child(1) > div:nth-child(1) > img:nth-child(2) {
+		display: none;
+	}
+
+	#Contact div:nth-child(1) div:last-child {
+		font-size: large;
+	}
 }
 
-#Contact div:nth-child(2) h1 {
+@media only screen and (max-width: 550px) {
-	text-wrap: nowrap;
+	#Contact > div:nth-child(1) > div:nth-child(1) > img:nth-child(3) {
-	align-self: flex-start;
+		display: none;
-	margin-left: 2svw;
+	}
-	margin-right: 2svw;
-	font-size: 60px;
-}
-
-#Contact div:nth-child(2) {
-	margin: 0svh 0svw;
-	justify-content: flex-start;
-	height: 40svh;
-}
-
-#Contact div:last-child {
-	margin: 4svh 0svw;
-	justify-content: space-evenly;
-}
-
-#Contact #ContactUs {
-	display: flex;
-	flex-flow: row wrap;
-	align-items: center;
-}
-
-#Contact #ContactUs div {
-	display: flex;
-	flex-direction: column;
-	max-width: 450px;
-	min-width: 300px;
-	height: auto;
-	padding: 1svh 1svw;
-	background-color: rgba(0, 0, 0, 0.8);
-	color: white;
-	border-radius: 1rem;
-	justify-content: space-between;
-	align-items: flex-start;
-	margin: 0px;
-	row-gap: 0px;
 }

src/Contact/Contact.jsx

@@ -1,5 +1,6 @@
 import UpdateBanner from "../Header/UpdateBanner";
 import "./Contact.css";
+import ContactUs from "./ContactUs";
 
 export default function Contact() {
 	return (
@@ -43,27 +44,7 @@ export default function Contact() {
 					</ul>
 				</div>
 			</div>
-
+			<ContactUs />
-			<div id="ContactUs">
-				<div>
-					<h2>Get in Touch</h2>
-					<p>
-						Please feel free to reach out about questions, opporunities or just
-						want to connect. Feel free to either fill out this form or contact
-						me through one of the many of the platforms below
-					</p>
-				</div>
-				<div>
-					<label>Name</label>
-					<input data-dioxus-id="360" />
-					<label>Email</label>
-					<input data-dioxus-id="361" />
-					<label>Message</label>
-					<textarea data-dioxus-id="362"></textarea>
-					<p></p>
-					<button data-dioxus-id="363">Submit</button>
-				</div>
-			</div>
 		</div>
 	);
 }

src/Contact/ContactUs.css

@@ -0,0 +1,85 @@
+:root {
+	--card-background-color: rgba(38, 38, 38, 0.5);
+	--card-border-radius: 0.5rem;
+}
+
+#ContactUs {
+	display: flex;
+	flex-flow: row wrap;
+	column-gap: 2svw;
+	row-gap: 4svh;
+	min-height: 70svh;
+	padding: 4svh 0svw;
+	justify-content: space-evenly;
+	color: white;
+	background-color: var(--BajaBlack);
+}
+
+#ContactUs div {
+	display: flex;
+	flex-grow: 1;
+	background-color: var(--card-background-color) !important;
+	border-radius: var(--card-border-radius);
+	flex-direction: column !important;
+	justify-content: center;
+	margin: 2svh 0.5svw !important;
+	padding: 2svh 1svw !important;
+	max-width: 600px !important;
+	height: inherit !important;
+}
+
+#ContactUs p {
+	margin: 2svh 0svw;
+	padding: 0svh 0svw;
+}
+
+#ContactUs input {
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+	border-color: rgba(245, 245, 245, 0.5);
+	border-width: 2px;
+	padding: 1svh 0svw;
+	margin: 1svh 0.5svw;
+	color: inherit;
+	align-items: start;
+}
+
+#ContactUs textarea {
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+	border-color: rgba(245, 245, 245, 0.4);
+	border-width: 2px;
+	padding: 1svh 0svw;
+	margin: 1svh 0.5svw;
+	color: inherit;
+	align-items: start;
+	min-height: 25svh;
+}
+
+#ContactUs button {
+	border-radius: var(--card-border-radius);
+	color: inherit;
+	background-color: rgba(0, 128, 0, 0.6);
+	border-color: transparent;
+	align-items: start;
+	margin: 1svh 0.5svw;
+	padding: 1svh 0svw;
+	/* width: 99%; */
+}
+
+#ContactUs button:hover {
+	cursor: pointer;
+	color: #91a4d2;
+	background-color: rgba(0, 150, 0, 0.6);
+}
+
+#ContactUs span {
+	background-color: var(--card-background-color);
+	border-radius: var(--card-border-radius);
+	border-color: rgba(245, 245, 245, 0.5);
+	border-width: 2px;
+	padding: 1svh 0.25svw;
+	margin: 1svh 0.5svw;
+	color: inherit;
+	align-items: start;
+}

src/Contact/ContactUs.jsx

@@ -0,0 +1,26 @@
+import "./ContactUs.css";
+
+export default function ContactUs() {
+	return (
+		<div id="ContactUs">
+			<div>
+				<h2>Get in Touch</h2>
+				<p>
+					Please feel free to reach out about questions, opporunities or just
+					want to connect. Feel free to either fill out this form or contact me
+					through one of the many of the platforms below
+				</p>
+			</div>
+			<div>
+				<label>Name</label>
+				<input />
+				<label>Email</label>
+				<input />
+				<label>Message</label>
+				<textarea></textarea>
+				<span> 0</span>
+				<button>Submit</button>
+			</div>
+		</div>
+	);
+}

src/History/History.css

@@ -55,23 +55,32 @@
 
 #History table tr {
 	position: relative;
+	margin: 4svh 0svw;
 }
 
 #History tr td {
 	max-width: 400px;
 	max-height: 400px;
 	vertical-align: middle;
-	justify-content: center;
 }
 
 #History tr td img {
 	aspect-ratio: 1;
-	width: inherit;
+	min-width: 192px;
-	height: inherit;
+	max-width: 400px;
+	height: 400px;
+	margin: 0svh auto;
 	border-radius: 1rem;
 	display: block;
 }
 
+@media only screen and (max-width: 1025px) {
+	#History tr td img {
+		width: 10svw;
+		height: inherit;
+	}
+}
+
 #History .HistoryCompInfo {
 	display: block;
 	text-align: center;
@@ -83,29 +92,29 @@
 
 #History td > div {
 	width: 100%;
+	/* width: fit-content; */
 	box-sizing: border-box;
 }
 
 #History .HistoryCompInfo h2,
 #History .HistoryCompInfo h4 {
-	width: fit-content;
+	margin: 2svh 2svw;
-	margin: 2svh auto;
+	text-align: center;
 }
 
 #History .HistoryCompInfo ul {
 	list-style-type: none;
 	display: flex;
 	flex-flow: row wrap;
+	justify-content: space-evenly;
 	column-gap: 1svw;
-	row-gap: 1svh;
+	padding: 0px;
-	padding: 0svh 2svw;
+	margin: 0.5svh 0svw;
-	margin: 0px;
-	/* width: 90%; */
 }
-
+/* 
 #History .HistoryCompInfo ul li {
-	flex: 40%;
+	width: 10ch;
-}
+} */
 
 #History .HistoryCompInfo ul li:nth-child(odd) {
 	text-align: start;
@@ -119,6 +128,7 @@
 	position: relative;
 	width: 10px;
 	text-align: center;
+	padding: 0px;
 }
 
 #History .symbol::before {
@@ -159,10 +169,11 @@
 
 #History #HistoryJoin div {
 	text-wrap: nowrap;
-	margin: 0;
 	position: relative;
 	background-color: black;
 	z-index: 2; /* above line */
+	margin: 0svh 0svw;
+	margin-bottom: 4svh;
 }
 
 /* without this line will stop at the div */

src/History/History.jsx

@@ -146,16 +146,15 @@ function CompetitionInfo({ year, competitions }) {
 			className="HistoryCompInfo">
 			<h2>{year}</h2>
 			<h4>Overall Competition Results</h4>
-			<ul>
+
-				{competitions.map((comp, index) => {
+			{competitions.map((comp, index) => {
-					return (
+				return (
-						<React.Fragment key={comp + index}>
+					<ul key={comp + index}>
-							<li key={index + "location"}>{comp.location}</li>
+						<li key={index + "location"}>{comp.location}</li>
-							<li key={index + "place"}>{comp.placement} place</li>
+						<li key={index + "place"}>{comp.placement} place</li>
-						</React.Fragment>
+					</ul>
-					);
+				);
-				})}
+			})}
-			</ul>
 		</div>
 	);
 }

src/OurSponsors/OurSponsors.jsx

@@ -58,10 +58,10 @@ const OurSponsors = () => {
 				</p>
 				<ul>
 					<li>
-						<a href="">Learn More</a>
+						<a href="/">Learn More</a>
 					</li>
 					<li>
-						<a href="">Support Us</a>
+						<a href="/">Support Us</a>
 					</li>
 				</ul>
 			</div>