site/slices/tech-slice/styles.css
@value badgerRed, badgerRedOnBlack, badgerBlack, badgerWhite from "../../css/_colors.css";
@value containerMaxWidth, contentMaxWidth, largeScreen, mediumScreen, smallScreen from "../../css/_sizes.css";
@value logoMaxWidth: 60px;
@value logoMaxWidthLarge: 80px;
.widthContainer {
max-width: contentMaxWidth;
margin-left: auto;
margin-right: auto;
}
.techSlice {
color: badgerWhite;
background-color: badgerBlack;
padding: 30px 0 40px;
text-align: center;
}
.withDivider {
composes: dividerBlack from '../../css/_divider.css';
}
.heading {
composes: widthContainer;
composes: serif from '../../css/typography/_fonts.css';
composes: fontL from '../../css/typography/_fonts.css';
text-align: center;
font-weight: bold;
margin-bottom: 20px;
}
.projectsBlerb {
composes: widthContainer;
composes: serif from '../../css/typography/_fonts.css';
composes: fontS from '../../css/typography/_fonts.css';
font-weight: bold;
text-align: center;
margin-bottom: 50px;
}
.techList {
composes: widthContainer;
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 0px;
}
.techList:last-of-type {
margin-bottom: 0;
}
.techListItem {
position: relative;
width: calc(100% / 3);
text-align: center;
display: flex;
}
.techItem {
flex-direction: column;
justify-content: space-between;
width: 100%;
}
.techLogo {
max-height: logoMaxWidth;
}
.techLogo--tall {
max-height: 70px;
margin-bottom: -10px;
}
.techLogo--wide {
max-height: 50px;
max-width: 80px;
margin-top: 11px;
}
.techName {
composes: boldSansSerif from '../../css/typography/_fonts.css';
margin: 20px 0 40px;
}
.moreBtn {
composes: primaryButton from '../../css/_links.css';
background-color: badgerRed;
}
.techPlusSymbol {
position: absolute;
height: 16px;
right: 0;
transform: translate(50%, -30%);
top: calc(logoMaxWidth / 2);
}
.techSliceIntro {
padding: 0 20px;
}
@media smallScreen {
.techLogo {
max-height: logoMaxWidthLarge;
}
.techLogo--tall {
max-height: 90px;
}
.techLogo--wide {
max-height: 75px;
max-width: 130px;
margin-top: 5px;
}
.techPlusSymbol {
height: 22px;
top: calc(logoMaxWidthLarge / 2);
}
}
@media mediumScreen {
.techList {
max-width: 700px;
}
.techSlice {
padding: 60px 20px 70px;
}
.heading {
margin-bottom: 30px;
}
.projectsBlerb {
composes: serif from '../../css/typography/_fonts.css';
composes: fontS from '../../css/typography/_fonts.css';
margin-bottom: 90px;
}
.techListItem {
margin-bottom: 40px;
}
.techName {
margin: 20px 0 0 0;
}
.moreBtn {
margin: 20px 60px 0;
}
.techSliceIntro {
padding: 0;
}
}
@media largeScreen {
.techSlice {
padding: 60px 20px 80px;
}
.techList {
margin-bottom: 70px;
}
.techList:last-of-type {
margin-bottom: 0;
}
.techPlusSymbol {
height: 26px;
}
.techList {
max-width: containerMaxWidth;
}
.techListItem {
width: calc(98% / 6);
margin-bottom: 0;
}
.techName {
margin-top: 40px;
}
.moreBtn {
margin: 60px 0 0;
}
}