141 lines
2.3 KiB
SCSS
141 lines
2.3 KiB
SCSS
$fontColor: (
|
|
primaryFont: white,
|
|
secondaryFont: black,
|
|
);
|
|
|
|
$backgroundColor: (
|
|
intro: white,
|
|
upComingEvent: white,
|
|
theTeam: white,
|
|
);
|
|
|
|
@function backgroundColor($color-name) {
|
|
@return map-get($backgroundColor , $color-name)
|
|
}
|
|
|
|
@function fontColor($color-name) {
|
|
@return map-get($fontColor, $color-name)
|
|
}
|
|
|
|
body, html {
|
|
height: 100%;
|
|
}
|
|
|
|
body {
|
|
margin: 0%;
|
|
font-family: 'Helvetica';
|
|
}
|
|
|
|
|
|
.bgimg {
|
|
position: relative;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
z-index: -1;
|
|
}
|
|
|
|
.headerCard {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
background-image: url('/img/nashuaBG.jpg');
|
|
background-repeat: no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
|
|
h1 {
|
|
font-size: 3rem;
|
|
color: fontColor(primaryFont);
|
|
font-weight: normal;
|
|
margin: 0rem;
|
|
}
|
|
|
|
p {
|
|
font-size: 1rem;
|
|
color: fontColor(primaryFont);
|
|
margin-bottom: 1rem;
|
|
}
|
|
|
|
.arrowDown {
|
|
color: fontColor(primaryFont)
|
|
}
|
|
}
|
|
|
|
.main {
|
|
height: 100%;
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
text-align: center;
|
|
}
|
|
|
|
.intro {
|
|
flex-basis: 33%;
|
|
background-color: backgroundColor(intro);
|
|
|
|
h2 {
|
|
margin-top: .5rem;
|
|
margin-bottom: 0;
|
|
color: fontColor(secondaryFont);
|
|
align-self: center;
|
|
}
|
|
p {
|
|
margin-left: .8rem;
|
|
margin-right: .8rem;
|
|
align-self: center;
|
|
}
|
|
}
|
|
|
|
.eventCard {
|
|
flex-basis: 33%;
|
|
background-color: backgroundColor(upComingEvent);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
ul {
|
|
list-style: none;
|
|
padding: 0;
|
|
|
|
li {
|
|
margin-bottom: .4rem;
|
|
|
|
.eventLink {
|
|
text-decoration: none;
|
|
color: fontColor(secondaryFont);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.teamCard {
|
|
flex-basis: 33%;
|
|
background-color: backgroundColor(theTeam);
|
|
|
|
h2 {
|
|
margin: 0;
|
|
}
|
|
|
|
p {
|
|
margin-left: .8rem;
|
|
margin-right: .8rem;
|
|
}
|
|
.tommyAvatar {
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|