52 lines
1.3 KiB
SCSS
52 lines
1.3 KiB
SCSS
|
// Styling for the masthead
|
||
|
|
header.masthead {
|
||
|
|
background-image: url('../img/header-bg.jpg');
|
||
|
|
background-repeat: no-repeat;
|
||
|
|
background-attachment: scroll;
|
||
|
|
background-position: center center;
|
||
|
|
@include background-cover;
|
||
|
|
text-align: center;
|
||
|
|
color: white;
|
||
|
|
.intro-text {
|
||
|
|
padding-top: 100px;
|
||
|
|
padding-bottom: 50px;
|
||
|
|
.intro-lead-in {
|
||
|
|
@include serif-font;
|
||
|
|
font-style: italic;
|
||
|
|
font-size: 22px;
|
||
|
|
line-height: 22px;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
}
|
||
|
|
.intro-heading {
|
||
|
|
@include heading-font;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 50px;
|
||
|
|
line-height: 50px;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
@media(min-width:768px) {
|
||
|
|
header.masthead {
|
||
|
|
.intro-text {
|
||
|
|
padding-top: 300px;
|
||
|
|
padding-bottom: 200px;
|
||
|
|
.intro-lead-in {
|
||
|
|
@include serif-font;
|
||
|
|
font-style: italic;
|
||
|
|
font-size: 40px;
|
||
|
|
line-height: 40px;
|
||
|
|
margin-bottom: 25px;
|
||
|
|
}
|
||
|
|
.intro-heading {
|
||
|
|
@include heading-font;
|
||
|
|
font-weight: 700;
|
||
|
|
font-size: 75px;
|
||
|
|
line-height: 75px;
|
||
|
|
margin-bottom: 50px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|