etoiledebethleem/website
3
1
Fork 0
Code Issues 6 Pull requests Projects 1 Releases Packages Activity Actions

fix: landing and header

Browse source
This commit is contained in:
Matthieu Bessat 2024-03-03 12:50:58 +01:00
parent e2d39ad34b
commit 511e351f37
9 changed files with 56 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

22
assets/sass/header.scss
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;