fix: landing and header
This commit is contained in:
parent
1ede788f99
commit
43bef544ec
9 changed files with 56 additions and 24 deletions
|
@ -4,7 +4,6 @@
|
|||
color: white;
|
||||
border-radius: 3px;
|
||||
padding: 1rem 2rem;
|
||||
margin: 1rem 0;
|
||||
|
||||
width: 100%;
|
||||
|
||||
|
|
|
@ -14,6 +14,7 @@
|
|||
display: flex;
|
||||
background-color: rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 1rem;
|
||||
border-radius: 3px;
|
||||
|
||||
.article__image {
|
||||
display: block;
|
||||
|
|
|
@ -338,12 +338,6 @@ $height: 30rem;
|
|||
padding-top: 1rem;
|
||||
}
|
||||
|
||||
.slide-content {
|
||||
.page-container {
|
||||
padding: 0 1.5rem;
|
||||
}
|
||||
}
|
||||
|
||||
.slide-image {
|
||||
height: 20rem;
|
||||
img {
|
||||
|
|
|
@ -6,8 +6,6 @@ body {
|
|||
min-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.footer-push {
|
||||
|
|
|
@ -4,7 +4,6 @@
|
|||
font-family: 'Bona Nova', serif;
|
||||
}
|
||||
|
||||
|
||||
body {
|
||||
// font-family: 'Trebuchet MS', Tahoma,sans-serif;
|
||||
// font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
|
||||
|
|
|
@ -1,3 +1,7 @@
|
|||
.after-header {
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
$header-height: 6rem;
|
||||
|
||||
.site-header {
|
||||
|
@ -6,6 +10,7 @@ $header-height: 6rem;
|
|||
height: $header-height;
|
||||
|
||||
position: sticky;
|
||||
// pay attention to not have overflow-x: hidden on one of the parent
|
||||
top: 0;
|
||||
z-index: 90;
|
||||
}
|
||||
|
@ -65,11 +70,12 @@ $header-height: 6rem;
|
|||
}
|
||||
}
|
||||
|
||||
$burger-menu-size: 4rem;
|
||||
|
||||
.burger-menu {
|
||||
display: none;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
height: $burger-menu-size;
|
||||
width: $burger-menu-size;
|
||||
position: relative;
|
||||
bottom: -50%;
|
||||
margin-right: 2em;
|
||||
|
@ -84,11 +90,11 @@ $header-height: 6rem;
|
|||
display: block;
|
||||
min-width: initial;
|
||||
background-color: white;
|
||||
height: 5rem;
|
||||
width: 5rem;
|
||||
height: $burger-menu-size;
|
||||
width: $burger-menu-size;
|
||||
padding: 1rem 1rem;
|
||||
border-radius: 50%;
|
||||
box-shadow: 0 0rem 3.5rem rgba(0, 0, 0, 0.4);
|
||||
box-shadow: 0 0rem ($burger-menu-size - 2rem) rgba(0, 0, 0, 0.5);
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
z-index: 1200;
|
||||
|
@ -97,8 +103,8 @@ $header-height: 6rem;
|
|||
|
||||
.background {
|
||||
position: absolute;
|
||||
height: 4rem;
|
||||
width: 4rem;
|
||||
height: $burger-menu-size - 1rem;
|
||||
width: $burger-menu-size - 1rem;
|
||||
margin: .5rem;
|
||||
border-radius: 50%;
|
||||
background-image: radial-gradient($background, black);
|
||||
|
@ -176,7 +182,7 @@ $header-height: 6rem;
|
|||
.icon,
|
||||
.icon::before,
|
||||
.icon::after {
|
||||
width: 3rem;
|
||||
width: $burger-menu-size - 1.6rem;
|
||||
height: 2px;
|
||||
background-color: gray;
|
||||
display: inline-block;
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
.cover__container {
|
||||
position: relative;
|
||||
min-height: 50rem;
|
||||
min-height: 40rem;
|
||||
}
|
||||
|
||||
.cover__back {
|
||||
|
@ -11,7 +11,7 @@
|
|||
background-size: cover;
|
||||
background-repeat: no-repeat;
|
||||
background-position-x: center;
|
||||
background-position-y: center;
|
||||
background-position-y: 0;
|
||||
z-index: 1;
|
||||
|
||||
// to center the video
|
||||
|
@ -345,6 +345,10 @@
|
|||
}
|
||||
|
||||
@media (max-width: $md-breakpoint) {
|
||||
.cover__back {
|
||||
background-position-y: 0;
|
||||
}
|
||||
|
||||
.history-container {
|
||||
}
|
||||
|
||||
|
@ -353,3 +357,20 @@
|
|||
}
|
||||
}
|
||||
|
||||
@media (min-width: $md-breakpoint) {
|
||||
.cover__back {
|
||||
background-position-y: -5em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $lg-breakpoint) {
|
||||
.cover__back {
|
||||
background-position-y: -10em;
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: $xl-breakpoint) {
|
||||
.cover__back {
|
||||
background-position-y: -15em;
|
||||
}
|
||||
}
|
||||
|
|
|
@ -39,12 +39,24 @@
|
|||
@media (max-width: $sm-breakpoint) {
|
||||
.page-container {
|
||||
width: 100%;
|
||||
padding-left: .8rem;
|
||||
padding-right: .8rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
.page-full {
|
||||
padding-left: .8rem;
|
||||
padding-right: .8rem;
|
||||
padding-left: 2rem;
|
||||
padding-right: 2rem;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: $xs-breakpoint) {
|
||||
.page-container {
|
||||
width: 100%;
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
.page-full {
|
||||
padding-left: 1rem;
|
||||
padding-right: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -11,7 +11,9 @@
|
|||
{{ if or (not (isset .Params "with_header")) .Params.with_header }}
|
||||
{{ partial "header" . }}
|
||||
{{ end }}
|
||||
<div class="after-header">
|
||||
{{ block "main" . }}{{ end }}
|
||||
</div>
|
||||
</div>
|
||||
{{ if or (not (isset .Params "with_footer")) .Params.with_footer }}
|
||||
{{ partial "footer" . }}
|
||||
|
|
Loading…
Reference in a new issue