Ucalgary_Baja/BajaUofCWebsite
4
0
Fork 0
mirror of https://github.com/UofCBaja/BajaUofCWebsite.git synced 2025-07-28 05:55:59 -06:00
Code Issues Packages Projects Releases Wiki Activity

feat(sponsors): sponsors page redone with new colors

Browse Source
This commit is contained in:
darkicewolf50
2025-07-12 15:52:46 -06:00
parent ca69dd260d
commit 9e93e05cd2
3 changed files with 92 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/History/History.css
View File

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

96
src/OurSponsors/OurSponsors.css
View File

@ -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 {
padding-bottom: 3svh;
#Sponsor .Sponsors h4 {
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;
width: 70svw;
/* align-items: center; */
/* 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;
padding-top: 1svh;
padding-bottom: 1svh;
min-width: 100px;
max-width: 240px;
padding: 1svh 0.5svw;
background-color: grey;
border-radius: 0.5rem;
}
.sponsorCenter {
display: flex;
justify-content: center;
width: 72%;
}
.sponsorGridContainer {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 20px;
}
@media only screen and (max-width: 1025px) {
.Sponsors a {
flex-grow: 1;
}
.sponsorGridItem {
background-color: aqua;
width: calc(100%- 20px);
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;
.Sponsors a div div {
max-width: none;
min-width: 1px;
}
}

84
src/OurSponsors/OurSponsors.jsx
View File

@ -73,66 +73,50 @@ 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 (
<div key={sponsorsKey}>
{/* gets name out of object and gets data of that sponsor preped */}
{Object.keys(
currentSponsorsDict[sponsorsTier][sponsorsKey]
).map((sponsorName) => {
let sponsorData =
currentSponsorsDict[sponsorsTier][sponsorsKey][
sponsorName
];
let sponsorBronzeSilver =
sponsorsTier !== "Silver Tier" &&
sponsorsTier !== "Bronze Tier";
return (
<a
key={sponsorData}
href={sponsorData.Url}
target="_blank"
className={gridItem}
rel="noreferrer">
const sponsorsGroup =
currentSponsorsDict[sponsorsTier][sponsorsKey];
return Object.keys(sponsorsGroup).map((sponsorName) => {
let sponsorData =
currentSponsorsDict[sponsorsTier][sponsorsKey][
sponsorName
];
let sponsorBronzeSilver =
sponsorsTier !== "Silver Tier" &&
sponsorsTier !== "Bronze Tier";
return (
<a
key={sponsorData}
href={sponsorData.Url}
target="_blank"
rel="noreferrer">
<div>
<img
src={sponsorData.LogoUrl}
alt={sponsorName + "'s Logo"}
/>
{sponsorBronzeSilver === true ? (
<div>
<img
src={sponsorData.LogoUrl}
alt={sponsorName + "'s Logo"}
/>
{sponsorBronzeSilver === true ? (
<div>
<h3>{sponsorName}</h3>
<p>
{sponsorData.DescriptionAboutSponsor}
</p>
</div>
) : (
<div className="sponsorCenter">
<h3>{sponsorName}</h3>
</div>
)}
<h4>{sponsorName}</h4>
<p>{sponsorData.DescriptionAboutSponsor}</p>
</div>
</a>
);
})}
</div>
);
) : (
<div className="sponsorCenter">
<h4>{sponsorName}</h4>
</div>
)}
</div>
</a>
);
});
}
)}
</div>