Shian/src/sass/components/_pageheader.scss

64 lines
951 B
SCSS

.page-header {
position: relative;
width: 100%;
min-height: 50vh;
font-weight: 300;
overflow: hidden;
@include screen(md) {
min-height: 70vh;
}
display: flex;
align-items: flex-end;
&--short {
min-height: 3rem;
@include screen(md) {
min-height: 4rem;
}
}
&__heading {
color: $white;
@include my(0.5rem);
}
&__text {
@include my(0.5rem);
}
&__background {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: -10;
width: 100%;
height: 100%;
}
&__overlay {
z-index: -10;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
}
&__contents {
z-index: 1;
width: 100%;
padding-top: 3rem;
@include screen(md) {
padding-top: 4rem;
}
color: $white;
}
&__icon {
width: 3rem;
height: 3rem;
@include screen(md) {
width: 4rem;
height: 4rem;
}
}
}