webseite/assets/sass/parts/_banner.scss
2019-02-12 17:45:44 +01:00

133 lines
2.6 KiB
SCSS

/* Banner */
#banner {
background-attachment: fixed;
background-color: _palette(accent2);
background-image: url('../../images/banner.jpg');
background-position: center center;
background-size: cover;
box-shadow: 0 0.25em 0.5em 0 rgba(0, 0, 0, 0.25);
min-height: 100vh;
position: relative;
text-align: center;
z-index: (_misc(max-spotlight) + 1);
@include breakpoint(tablet) {
background-attachment: scroll;
.goto-next {
height: 7em;
}
}
@include breakpoint(phablet) {
box-shadow: 0 0.125em 0.5em 0 rgba(0, 0, 0, 0.25);
min-height: calc(100vh - 44px);
}
&::before {
content: '';
display: inline-block;
height: 100vh;
vertical-align: middle;
width: 1%;
@include breakpoint(phablet) {
height: calc(100vh - 44px);
}
}
&::after {
content: '';
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.content {
display: inline-block;
margin-right: 1%;
max-width: 95%;
padding: $size-wrapper-pad-tb;
position: relative;
text-align: right;
vertical-align: middle;
z-index: 1;
@include breakpoint(laptop) {
padding: $size-wrapper-pad-tb;
}
@include breakpoint(tablet) {
padding: ($size-wrapper-pad-tb * 2) 0;
text-align: center;
}
@include breakpoint(phablet) {
padding: ($size-wrapper-pad-tb * 1.25) $size-wrapper-pad-lr ($size-wrapper-pad-tb * 1.5) $size-wrapper-pad-lr;
}
@include breakpoint(mobileonly) {
padding: $size-wrapper-pad-tb ($size-wrapper-pad-lr * 1.25) ($size-wrapper-pad-tb * 1.75) ($size-wrapper-pad-lr * 1.25);
}
header {
display: inline-block;
vertical-align: middle;
@include breakpoint(tablet) {
display: block;
margin: 0 0 _size(element-margin) 0;
text-align: center;
}
h2 {
font-size: 2.5em;
margin: 0;
@include breakpoint(phablet) {
font-size: 1.5em;
}
}
p {
margin: (_size(element-margin) * 0.25) 0 0 0;
top: 0;
}
}
.image {
border-radius: 0;
display: inline-block;
height: 19em;
margin-left: 3em;
margin-top: 2em;
vertical-align: middle;
width: 19em;
@include breakpoint(tablet) {
margin: 0;
}
@include breakpoint(phablet) {
height: 9em;
width: 9em;
}
img {
border-radius: 0;
display: block;
width: 100%;
}
}
}
}
body.is-touch {
#banner {
background-attachment: scroll;
}
}