etoiledebethleem/website
4
1
Fork 0
Code Issues 5 Pull requests 1 Actions Packages Projects 1 Releases Wiki Activity

fix: landing and header

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

1
assets/sass/alert.scss
View file

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

1
assets/sass/article.scss
View file

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

6
assets/sass/carousel.scss
View file

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

2
assets/sass/footer.scss
View file

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

1
assets/sass/general.scss
View file

@ -4,7 +4,6 @@
font-family: 'Bona Nova', serif; font-family: 'Bona Nova', serif;
} }
body { body {
// font-family: 'Trebuchet MS', Tahoma,sans-serif; // font-family: 'Trebuchet MS', Tahoma,sans-serif;
// font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif; // font-family: 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;

22
assets/sass/header.scss
View file

@ -1,3 +1,7 @@
.after-header {
overflow-x: hidden;
}
$header-height: 6rem; $header-height: 6rem;
.site-header { .site-header {
@ -6,6 +10,7 @@ $header-height: 6rem;
height: $header-height; height: $header-height;
position: sticky; position: sticky;
// pay attention to not have overflow-x: hidden on one of the parent
top: 0; top: 0;
z-index: 90; z-index: 90;
} }
@ -65,11 +70,12 @@ $header-height: 6rem;
} }
} }
$burger-menu-size: 4rem;
.burger-menu { .burger-menu {
display: none; display: none;
height: 5rem; height: $burger-menu-size;
width: 5rem; width: $burger-menu-size;
position: relative; position: relative;
bottom: -50%; bottom: -50%;
margin-right: 2em; margin-right: 2em;
@ -84,11 +90,11 @@ $header-height: 6rem;
display: block; display: block;
min-width: initial; min-width: initial;
background-color: white; background-color: white;
height: 5rem; height: $burger-menu-size;
width: 5rem; width: $burger-menu-size;
padding: 1rem 1rem; padding: 1rem 1rem;
border-radius: 50%; 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; text-align: center;
cursor: pointer; cursor: pointer;
z-index: 1200; z-index: 1200;
@ -97,8 +103,8 @@ $header-height: 6rem;
.background { .background {
position: absolute; position: absolute;
height: 4rem; height: $burger-menu-size - 1rem;
width: 4rem; width: $burger-menu-size - 1rem;
margin: .5rem; margin: .5rem;
border-radius: 50%; border-radius: 50%;
background-image: radial-gradient($background, black); background-image: radial-gradient($background, black);
@ -176,7 +182,7 @@ $header-height: 6rem;
.icon, .icon,
.icon::before, .icon::before,
.icon::after { .icon::after {
width: 3rem; width: $burger-menu-size - 1.6rem;
height: 2px; height: 2px;
background-color: gray; background-color: gray;
display: inline-block; display: inline-block;

25
assets/sass/landing.scss
View file

@ -1,6 +1,6 @@
.cover__container { .cover__container {
position: relative; position: relative;
min-height: 50rem; min-height: 40rem;
} }
.cover__back { .cover__back {
@ -11,7 +11,7 @@
background-size: cover; background-size: cover;
background-repeat: no-repeat; background-repeat: no-repeat;
background-position-x: center; background-position-x: center;
background-position-y: center; background-position-y: 0;
z-index: 1; z-index: 1;
// to center the video // to center the video
@ -345,6 +345,10 @@
} }
@media (max-width: $md-breakpoint) { @media (max-width: $md-breakpoint) {
.cover__back {
background-position-y: 0;
}
.history-container { .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;
}
}

20
assets/sass/page_container.scss
View file

@ -39,12 +39,24 @@
@media (max-width: $sm-breakpoint) { @media (max-width: $sm-breakpoint) {
.page-container { .page-container {
width: 100%; width: 100%;
padding-left: .8rem; padding-left: 2rem;
padding-right: .8rem; padding-right: 2rem;
} }
.page-full { .page-full {
padding-left: .8rem; padding-left: 2rem;
padding-right: .8rem; 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;
} }
} }

2
layouts/_default/baseof.html
View file

@ -11,7 +11,9 @@
{{ if or (not (isset .Params "with_header")) .Params.with_header }} {{ if or (not (isset .Params "with_header")) .Params.with_header }}
{{ partial "header" . }} {{ partial "header" . }}
{{ end }} {{ end }}
<div class="after-header">
{{ block "main" . }}{{ end }} {{ block "main" . }}{{ end }}
</div>
</div> </div>
{{ if or (not (isset .Params "with_footer")) .Params.with_footer }} {{ if or (not (isset .Params "with_footer")) .Params.with_footer }}
{{ partial "footer" . }} {{ partial "footer" . }}