fix: landing and header

This commit is contained in:
Matthieu Bessat 2024-03-03 12:50:58 +01:00
parent 1ede788f99
commit 43bef544ec
9 changed files with 56 additions and 24 deletions

View file

@ -4,7 +4,6 @@
color: white;
border-radius: 3px;
padding: 1rem 2rem;
margin: 1rem 0;
width: 100%;

View file

@ -14,6 +14,7 @@
display: flex;
background-color: rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
border-radius: 3px;
.article__image {
display: block;

View file

@ -338,12 +338,6 @@ $height: 30rem;
padding-top: 1rem;
}
.slide-content {
.page-container {
padding: 0 1.5rem;
}
}
.slide-image {
height: 20rem;
img {

View file

@ -6,8 +6,6 @@ body {
min-height: 100%;
display: flex;
flex-direction: column;
overflow-x: hidden;
}
.footer-push {

View file

@ -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;

View file

@ -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;

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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" . }}