feat(sponsors): sponsors page redone with new colors

src/History/History.css

@@ -31,16 +31,16 @@
 #History div button {
 	background-color: inherit;
 	border-radius: 1rem;
-	border: 1px solid white;
+	border: none;
-	padding: 1svh 6svw;
+	padding: 2svh 5svw;
 	color: inherit;
 	background-color: var(--BajaRed);
 	font-size: larger;
 }
 
 #History div button:hover {
-	background-color: lightblue;
+	background-color: rgba(128, 128, 128, 0.4);
-	color: #a80029;
+	/* color: #a80029; */
 }
 
 #History table {

src/OurSponsors/OurSponsors.css

@@ -57,16 +57,25 @@
 
 #SponsorsAbout a:hover {
 	background-color: rgba(128, 128, 128, 0.4);
-	color: var(--BajaBlack);
+}
+
+#Sponsor {
+	display: flex;
+	flex-direction: column;
+	padding-bottom: 3svh;
+	background-color: var(--BajaBlack);
+	color: white;
 }
 
 #Sponsor .Sponsors h3 {
 	font-size: xx-large;
-	margin: 2svh 1svw;
+	margin: 4svh 1svw;
 }
 
-#Sponsor {
+#Sponsor .Sponsors h4 {
-	padding-bottom: 3svh;
+	font-size: xx-large;
+	margin: 1svh 1svw;
+	text-align: center;
 }
 
 #SponsorEnd {
@@ -96,20 +105,30 @@
 	display: flex;
 	flex-direction: column;
 	background-color: inherit;
-	align-items: center;
+	/* align-items: center; */
-	width: 70svw;
+	/* width: 70svw; */
+}
+
+.Sponsors div {
+	display: flex;
+	flex-flow: row wrap;
+	padding: 2svh 2svw;
+	column-gap: 2svw;
+	row-gap: 2svh;
 }
 
 .Sponsors a {
 	display: flex;
 	flex-direction: column;
+	justify-content: center;
 	color: inherit;
 	text-decoration: none;
 	cursor: pointer;
-	background-color: whitesmoke;
+	background-color: rgba(38, 38, 38, 0.5);
 	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
 	transition: scale 0.3s;
-	width: inherit;
+	padding: 1svh 1svw;
+	border-radius: 1rem;
 }
 
 .Sponsors a:hover {
@@ -119,59 +138,52 @@
 
 .Sponsors a div {
 	display: flex;
-	flex-direction: row;
+	flex-flow: row nowrap;
 	height: inherit;
-	width: fit-content;
+	padding: 0px;
+	column-gap: 1svw;
+	align-items: center;
 }
 
 .Sponsors a div div {
-	display: flex;
 	flex-direction: column;
-	padding-left: 5svw;
+	row-gap: 0.5svh;
+	min-width: 30ch;
 	max-width: 60ch;
+	margin: 2svh 0svw;
+}
+
+.Sponsors a div div p {
+	margin: 0px;
 }
 
 .Sponsors a h3 {
 	display: flex;
-	width: fit-content;
+	/* width: fit-content; */
 	border-bottom: var(--sponsorBorder);
 }
 
 .Sponsors a img {
+	min-height: 10svh;
 	max-height: 24svh;
-	width: 24svw;
+	min-width: 100px;
-	padding-top: 1svh;
+	max-width: 240px;
-	padding-bottom: 1svh;
+	padding: 1svh 0.5svw;
+	background-color: grey;
+	border-radius: 0.5rem;
 }
 
 .sponsorCenter {
-	display: flex;
+	width: 72%;
-	justify-content: center;
 }
 
-.sponsorGridContainer {
+@media only screen and (max-width: 1025px) {
-	display: grid;
+	.Sponsors a {
-	grid-template-columns: repeat(2, minmax(0, 1fr));
+		flex-grow: 1;
-	grid-gap: 20px;
 	}
 
-.sponsorGridItem {
+	.Sponsors a div div {
-	background-color: aqua;
+		max-width: none;
-	width: calc(100%- 20px);
+		min-width: 1px;
-	height: 100%;
 	}
-
-.sponsorGridContainer .sponsorGridItem div div {
-	flex: 1;
-	padding-left: 1svw;
-}
-
-.sponsorGridItem h3 {
-	text-align: center;
-	justify-content: center;
-	align-items: center;
-}
-
-.sponsorGridItem {
-	grid-column: span 1;
 }

src/OurSponsors/OurSponsors.jsx

@@ -73,29 +73,18 @@ const OurSponsors = () => {
 					<>
 						{/* gets the outmost name of the Object Name of tier*/}
 						{Object.keys(currentSponsorsDict).map((sponsorsTier) => {
-							let changetoGridStyle =
-								sponsorsTier === "Diamond Tier" ||
-								sponsorsTier === "Platinum Tier";
-							let girdContainer = changetoGridStyle
-								? ""
-								: "sponsorGridContainer";
-							let gridItem = changetoGridStyle ? "" : "sponsorGridItem";
-
 							return (
 								<div
 									key={sponsorsTier}
 									className="Sponsors">
 									<h3>{sponsorsTier}</h3>
-									<div className={girdContainer}>
+									<div>
 										{/* gets key form list of tier */}
 										{Object.keys(currentSponsorsDict[sponsorsTier]).map(
 											(sponsorsKey) => {
-												return (
+												const sponsorsGroup =
-													<div key={sponsorsKey}>
+													currentSponsorsDict[sponsorsTier][sponsorsKey];
-														{/* gets name out of object and gets data of that sponsor preped */}
+												return Object.keys(sponsorsGroup).map((sponsorName) => {
-														{Object.keys(
-															currentSponsorsDict[sponsorsTier][sponsorsKey]
-														).map((sponsorName) => {
 													let sponsorData =
 														currentSponsorsDict[sponsorsTier][sponsorsKey][
 															sponsorName
@@ -108,7 +97,6 @@ const OurSponsors = () => {
 															key={sponsorData}
 															href={sponsorData.Url}
 															target="_blank"
-																	className={gridItem}
 															rel="noreferrer">
 															<div>
 																<img
@@ -117,22 +105,18 @@ const OurSponsors = () => {
 																/>
 																{sponsorBronzeSilver === true ? (
 																	<div>
-																				<h3>{sponsorName}</h3>
+																		<h4>{sponsorName}</h4>
-																				<p>
+																		<p>{sponsorData.DescriptionAboutSponsor}</p>
-																					{sponsorData.DescriptionAboutSponsor}
-																				</p>
 																	</div>
 																) : (
 																	<div className="sponsorCenter">
-																				<h3>{sponsorName}</h3>
+																		<h4>{sponsorName}</h4>
 																	</div>
 																)}
 															</div>
 														</a>
 													);
-														})}
+												});
-													</div>
-												);
 											}
 										)}
 									</div>