bludit/bl-themes/clean-blog/scss/_masthead.scss
2017-10-13 00:15:13 +02:00

73 lines
1.4 KiB
SCSS
Executable File

// Styling for the masthead
header.masthead {
// NOTE: Background images are set within the HTML using inline CSS!
margin-bottom: 50px;
background: no-repeat center center;
background-color: $gray-light;
background-attachment: scroll;
@include background-cover;
.page-heading,
.post-heading,
.site-heading {
padding: 200px 0 150px;
color: white;
@media only screen and (min-width: 768px) {
padding: 200px 0;
}
}
.page-heading,
.site-heading {
text-align: center;
h1 {
font-size: 50px;
margin-top: 0;
}
.subheading {
font-size: 24px;
font-weight: 300;
line-height: 1.1;
display: block;
margin: 10px 0 0;
@include sans-serif-font;
}
@media only screen and (min-width: 768px) {
h1 {
font-size: 80px;
}
}
}
.post-heading {
h1 {
font-size: 35px;
}
.meta,
.subheading {
line-height: 1.1;
display: block;
}
.subheading {
font-size: 24px;
font-weight: 600;
margin: 10px 0 30px;
@include sans-serif-font;
}
.meta {
font-size: 20px;
font-weight: 300;
font-style: italic;
@include serif-font;
a {
color: white;
}
}
@media only screen and (min-width: 768px) {
h1 {
font-size: 55px;
}
.subheading {
font-size: 30px;
}
}
}
}