website/scss/_header.scss

93 lines
1.5 KiB
SCSS
Raw Normal View History

2021-03-28 20:00:20 +02:00
.header-wrapper *:before {
2021-01-11 15:58:17 +01:00
box-sizing: border-box;
}
.header-homepage {
2021-03-28 20:00:20 +02:00
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url(/img/bannerHome.webp), no-repeat, center;
2021-01-11 15:58:17 +01:00
background-size: cover;
position: relative;
color: #fff;
z-index: 0;
padding-top: 160px;
padding-bottom: 160px;
}
2021-03-28 20:00:20 +02:00
2021-01-11 15:58:17 +01:00
.header-separator-bottom {
position: absolute;
bottom: -1px;
left: 0;
width: 100%;
svg { display: block;
width: calc(100% + 1.3px);
2021-03-28 20:00:20 +02:00
height: 90px;
fill: $back-color;
2021-01-11 15:58:17 +01:00
}
}
2021-03-28 20:00:20 +02:00
2021-01-11 15:58:17 +01:00
.header-wrapper {
position: relative;
}
2021-03-28 20:00:20 +02:00
2021-01-11 15:58:17 +01:00
@media only screen and (min-width:768px) {
h1 {
font-size: 3.4em;
}
p {
line-height: 130%;
}
h1.heading8 {
font-size: 3.3em;
}
.gridContainer {
width: 90%;
max-width: 1232px;
.row {
margin-left: -15px;
margin-right: -15px;
clear: both;
}
}
.header-description-row {
&:before {
content: normal;
}
&:after {
content: normal;
}
}
.header-content-centered {
margin-left: auto;
margin-right: auto;
}
.header-buttons-wrapper {
margin: 0 -9px 0 -9px;
clear: both;
}
.header-content {
2021-03-28 20:00:20 +02:00
padding-top: 8%;
padding-bottom: 8%;
width: 100%;
margin-left: auto;
margin-right: auto;
2021-01-11 15:58:17 +01:00
.align-holder {
text-align: center !important;
}
}
}
@media only screen and (min-width: 1024px) {
.gridContainer {
width: 80%;
}
h1 {
font-size: 3.8em;
}
p {
line-height: 150%;
}
.header-homepage {
min-height: auto;
}
}