houdini/app/assets/stylesheets/components/image_header.css.scss

70 lines
1.3 KiB
SCSS
Raw Normal View History

/* License: AGPL-3.0-or-later WITH Web-Template-Output-Additional-Permission-3.0-or-later */
.imageHeader * {
margin: 0 auto;
}
.imageHeader {
margin-top: -2px;
min-height: 400px;
background-size: cover;
background-position: top center;
display: table;
width: 100%;
position: relative;
}
.imageHeader:before {
position: absolute;
content: '';
width: 100%;
height: 100%;
background: rgba(black, 0.2);
top: 0;
left: 0;
}
.imageHeader-title {
@include transform(translateY(-30px));
@include open-sans-condensed;
color: white;
text-align: center;
vertical-align: middle;
text-transform: uppercase;
width: 100%;
display: table-cell;
}
.imageHeader-details {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 40px 10px 20px 10px;
@include gradient(top, $trans, rgba(black, 0.6));
text-align: center;
}
.imageHeader-details-text {
font-size: 20px;
line-height: 1.2;
color: white;
font-weight: bold;
}
@media screen and (max-width: 920px) {
.imageHeader {
margin-top: -10px;
}
}
@media screen and (max-width: 700px) {
.imageHeader-details-text {
font-size: 18px;
}
}
@media screen and (max-width: 600px) {
.imageHeader-details-text {
font-size: 17px;
}
}
@media screen and (max-width: 500px) {
.imageHeader-details-text {
font-size: 16px;
}
}