jonasled2/website
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity

cleanup header code

Browse source
This commit is contained in:
Jonas Leder 2021-03-28 20:00:20 +02:00
parent 19c8804c98
commit 8e57dc2626
2 changed files with 16 additions and 124 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
public/internal/header.php
View file

@ -27,16 +27,10 @@ function getHeader($pagetitle, $navselect)
<body >
<header >
<div class="header-wrapper" >
<div class="header-homepage color-overlay" data - parallax - depth = "20" >
<div class="header-description gridContainer content-on-center" >
<div class="row header-description-row" >
<div class="header-content header-content-centered" >
<div class="align-holder" >
<h1 class="heading8" >$pagetitle</h1 >
<p class="header-subtitle" > </p >
<div class="header-buttons-wrapper" ></div >
</div >
</div >
<div class="header-homepage">
<div class="row header-content header-content-centered" >
<div class="align-holder" >
<h1 class="heading8" >$pagetitle</h1 >
</div >
</div >
</div >

126
scss/_header.scss
View file

@ -1,53 +1,16 @@
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
.header-wrapper *:before {
box-sizing: border-box;
}
&:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
.gridContainer {
width: 100%;
padding-left: 15px;
padding-right: 15px;
margin-left: auto;
margin-right: auto;
margin-right: auto !important;
margin-left: auto !important;
}
.header-homepage {
background-image: url(/img/bannerHome.webp);
background-position: center center;
background-repeat: no-repeat;
background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.6)), url(/img/bannerHome.webp), no-repeat, center;
background-size: cover;
position: relative;
color: #fff;
z-index: 0;
padding-top: 160px;
padding-bottom: 160px;
&:before {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
display: inline-block;
background-color: #fff;
padding-bottom: 230px;
}
.header-description-row {
padding-top: 8%;
padding-bottom: 8%;
}
}
.header-separator-bottom {
position: absolute;
bottom: -1px;
@ -55,84 +18,15 @@
width: 100%;
svg { display: block;
width: calc(100% + 1.3px);
}
.header-separator {
position: absolute;
width: 100%;
max-width: 100%;
bottom: -1px;
overflow: hidden;
}
}
.svg-white-bg {
fill: #1a2332;
}
.header-description {
min-height: 100px;
text-align: center;
}
p.header-subtitle {
color: #fff;
font-weight: 300;
font-size: 1.4em;
text-align: inherit;
}
.color-overlay {
&:before {
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
z-index: -1;
display: inline-block;
content: "";
-webkit-transform: translate3d(0, 0, -1px);
height: 90px;
fill: $back-color;
}
}
.header-wrapper {
background-color: #ebebeb;
position: relative;
}
h1 {
font-weight: 600;
font-size: 2.2em;
margin-bottom: 25px;
}
.header-description-row {
padding: 0 15px 0 15px;
display: block;
}
.align-holder {
width: 100%;
}
.header-buttons-wrapper {
margin: 0;
}
p {
margin: 0 0 20px 0;
}
.homepage-template {
.svg-white-bg {
fill: #fff;
}
}
.header-homepage.color-overlay {
&:before {
background-color: #000;
opacity: .4;
}
}
.header-homepage.header-separator {
svg {
height: 90px !important;
}
}
.header-separator {
svg {
height: 90px !important;
}
}
@media only screen and (min-width:768px) {
h1 {
font-size: 3.4em;
@ -171,7 +65,11 @@ p {
clear: both;
}
.header-content {
width: 100% !important;
padding-top: 8%;
padding-bottom: 8%;
width: 100%;
margin-left: auto;
margin-right: auto;
.align-holder {
text-align: center !important;