Files
BajaUofCWebsite/src/OurSponsors/OurSponsors.css

178 lines
2.8 KiB
CSS

:root {
--tableBackground: white;
--sponsorBorderWidth: 2px;
--sponsorBorderStyle: solid;
--sponsorBorderColour: black;
--sponsorBorder: var(--sponsorBorderWidth) var(--sponsorBorderStyle)
var(--sponsorBorderColour);
}
#OurSponsors {
display: flex;
flex-direction: column;
justify-content: center;
/* background-color: gray; */
}
#SponsorsAbout {
display: flex;
flex-direction: column;
align-items: center;
padding: 4svh 0svw;
background-color: var(--BajaBlack);
color: white;
}
#SponsorsAbout h2 {
margin: 0px;
padding: 2svh 0svw;
padding-top: 4svh;
font-size: 30px;
}
#SponsorsAbout p {
font-size: larger;
padding: 0px;
margin: 0px;
max-width: 120ch;
text-align: center;
}
#SponsorsAbout ul {
list-style-type: none;
display: flex;
flex-flow: row wrap;
column-gap: 4svw;
padding: 0svh 0svw;
padding-top: 4svh;
}
#SponsorsAbout a {
text-decoration: none;
color: white;
background-color: var(--BajaRed);
border-radius: 15px;
padding: 2svh 2svw;
}
#SponsorsAbout a:hover {
background-color: rgba(128, 128, 128, 0.4);
color: var(--BajaBlack);
}
#Sponsor .Sponsors h3 {
font-size: xx-large;
margin: 2svh 1svw;
}
#Sponsor {
padding-bottom: 3svh;
}
#SponsorEnd {
text-align: end;
}
#OurSponsors h1 {
position: relative;
text-align: left;
border-bottom: var(--sponsorBorder);
border-top: var(--sponsorBorder);
width: fit-content;
padding-top: 2svh;
padding-bottom: 2svh;
}
#OurSponsors #h1Exception {
border-top: none;
}
#Sponsor .Sponsors h1 {
width: 100%;
border: none;
}
.Sponsors {
display: flex;
flex-direction: column;
background-color: inherit;
align-items: center;
width: 70svw;
}
.Sponsors a {
display: flex;
flex-direction: column;
color: inherit;
text-decoration: none;
cursor: pointer;
background-color: whitesmoke;
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;
}
.Sponsors a:hover {
cursor: pointer;
scale: 1.05;
}
.Sponsors a div {
display: flex;
flex-direction: row;
height: inherit;
width: fit-content;
}
.Sponsors a div div {
display: flex;
flex-direction: column;
padding-left: 5svw;
max-width: 60ch;
}
.Sponsors a h3 {
display: flex;
width: fit-content;
border-bottom: var(--sponsorBorder);
}
.Sponsors a img {
max-height: 24svh;
width: 24svw;
padding-top: 1svh;
padding-bottom: 1svh;
}
.sponsorCenter {
display: flex;
justify-content: center;
}
.sponsorGridContainer {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-gap: 20px;
}
.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;
}