fix: rework mobile nav as fixed overlay, add 3-line burger
- Nav menu is now a fixed fullscreen overlay (opacity fade) - Header stays at 3.5rem height, no height animation - Burger has 3 lines, middle fades out on open - Body scroll locked with overflow: hidden when menu open - Various mobile layout fixes (handles, system, footer padding) - Header full-width with no border-radius on mobile Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
isUnknown
parent
f7f3d0f0b5
commit
4ad7073687
9 changed files with 130 additions and 76 deletions
|
|
@ -1,5 +1,6 @@
|
|||
body > footer {
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
|
|||
|
|
@ -1,10 +1,11 @@
|
|||
body {
|
||||
> header {
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
padding: 1.5rem var(--padding-body);
|
||||
box-sizing: border-box;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,54 +7,66 @@ body.no-scroll {
|
|||
// ---- HEADER ----
|
||||
body > header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3.5rem;
|
||||
overflow: hidden;
|
||||
transition: height 0.4s ease;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem var(--padding-body);
|
||||
z-index: 9999;
|
||||
|
||||
nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
|
||||
.nav-logo {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
order: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.burger {
|
||||
order: 2;
|
||||
margin-left: auto;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
width: 7.125rem;
|
||||
height: 1.25rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
z-index: 2;
|
||||
|
||||
span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1.5px;
|
||||
height: 1px;
|
||||
background-color: #fff;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
}
|
||||
|
||||
// Full-screen overlay
|
||||
ul {
|
||||
order: 3;
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
background-color: var(--color-blue);
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
padding-top: 3rem;
|
||||
padding: 6rem var(--padding-body) 2rem;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.1s;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
|
||||
li {
|
||||
width: 100%;
|
||||
|
|
@ -62,18 +74,18 @@ body.no-scroll {
|
|||
a {
|
||||
display: block;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
|
||||
li:first-child {
|
||||
width: 100%;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
|
||||
a {
|
||||
font-family: var(--font-narrow);
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -87,22 +99,22 @@ body.no-scroll {
|
|||
}
|
||||
|
||||
// ---- OPEN STATE ----
|
||||
&.nav-open {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
&.nav-open nav {
|
||||
ul {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
|
||||
.burger span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
nav {
|
||||
.burger span:first-child {
|
||||
transform: rotate(45deg) translateY(0.2rem);
|
||||
transform: translateY(0.55rem) rotate(10deg);
|
||||
}
|
||||
|
||||
.burger span:last-child {
|
||||
transform: rotate(-45deg) translateY(-0.2rem);
|
||||
}
|
||||
|
||||
ul {
|
||||
opacity: 1;
|
||||
}
|
||||
transform: translateY(-0.55rem) rotate(-10deg);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -112,6 +124,10 @@ body.no-scroll {
|
|||
padding-top: 3.5rem;
|
||||
}
|
||||
|
||||
section {
|
||||
scroll-margin-top: calc(4.8125rem + 1rem);
|
||||
}
|
||||
|
||||
// ---- HERO ----
|
||||
section#hero {
|
||||
height: auto;
|
||||
|
|
@ -198,6 +214,7 @@ body.no-scroll {
|
|||
// ---- HANDLES ----
|
||||
section#handles {
|
||||
margin: 3rem var(--padding-body);
|
||||
padding: 0;
|
||||
|
||||
header {
|
||||
flex-direction: column;
|
||||
|
|
@ -231,6 +248,7 @@ body.no-scroll {
|
|||
section#system {
|
||||
flex-direction: column;
|
||||
margin: 3rem var(--padding-body);
|
||||
padding: 0;
|
||||
gap: 3rem;
|
||||
|
||||
.text {
|
||||
|
|
@ -248,6 +266,7 @@ body.no-scroll {
|
|||
|
||||
figure {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -26,10 +26,14 @@ section#buy {
|
|||
|
||||
.buy-links {
|
||||
margin-top: 5rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
li {
|
||||
margin-bottom: 1rem;
|
||||
a {
|
||||
display: inline-block;
|
||||
width: 14rem;
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -38,6 +42,7 @@ section#buy {
|
|||
@include label-base;
|
||||
letter-spacing: 2.4px;
|
||||
font-weight: 400;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
section#handles {
|
||||
margin: 5rem var(--padding-body);
|
||||
padding: 10rem 15vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -37,11 +37,13 @@ section#handles {
|
|||
color: var(--color-blue);
|
||||
font-size: var(--font-size-s);
|
||||
|
||||
font-weight: 500;
|
||||
|
||||
h4 {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
p {
|
||||
font-weight: 400;
|
||||
}
|
||||
}
|
||||
.step:hover {
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
section#system {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 5rem var(--padding-body);
|
||||
padding: 10rem min(15vw, 100%);
|
||||
|
||||
.text {
|
||||
display: flex;
|
||||
|
|
|
|||
|
|
@ -173,11 +173,12 @@ body {
|
|||
}
|
||||
|
||||
body > header {
|
||||
box-sizing: border-box;
|
||||
position: sticky;
|
||||
z-index: 999;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
padding: 1.5rem var(--padding-body);
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
|
@ -471,7 +472,7 @@ section#excerpts .swiper-pagination-bullet-active {
|
|||
}
|
||||
|
||||
section#handles {
|
||||
margin: 5rem var(--padding-body);
|
||||
padding: 10rem 15vw;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
|
|
@ -513,11 +514,14 @@ section#handles .path .step {
|
|||
border: 1px solid var(--color-blue);
|
||||
color: var(--color-blue);
|
||||
font-size: var(--font-size-s);
|
||||
font-weight: 500;
|
||||
}
|
||||
section#handles .path .step h4 {
|
||||
text-transform: uppercase;
|
||||
margin-bottom: 0.7rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
section#handles .path .step p {
|
||||
font-weight: 400;
|
||||
}
|
||||
section#handles .path .step:hover {
|
||||
background-color: var(--color-blue);
|
||||
|
|
@ -533,7 +537,7 @@ section#handles .path .step:not(:last-child) {
|
|||
section#system {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin: 5rem var(--padding-body);
|
||||
padding: 10rem min(15vw, 100%);
|
||||
}
|
||||
section#system .text {
|
||||
display: flex;
|
||||
|
|
@ -697,12 +701,14 @@ section#buy .text p:not(:last-child) {
|
|||
}
|
||||
section#buy .text .buy-links {
|
||||
margin-top: 5rem;
|
||||
}
|
||||
section#buy .text .buy-links li {
|
||||
margin-bottom: 1rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
section#buy .text .buy-links li a {
|
||||
display: inline-block;
|
||||
width: 14rem;
|
||||
display: block;
|
||||
}
|
||||
section#buy .text .info {
|
||||
font-size: 0.625rem;
|
||||
|
|
@ -711,6 +717,7 @@ section#buy .text .info {
|
|||
opacity: 0.8;
|
||||
letter-spacing: 2.4px;
|
||||
font-weight: 400;
|
||||
margin-top: 1rem;
|
||||
}
|
||||
section#buy img {
|
||||
width: 45%;
|
||||
|
|
@ -720,7 +727,8 @@ section#buy img {
|
|||
}
|
||||
|
||||
body > footer {
|
||||
width: 100%;
|
||||
width: 100vw;
|
||||
box-sizing: border-box;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
|
|
@ -784,51 +792,62 @@ body.no-scroll {
|
|||
@media (max-width: 930px) {
|
||||
body > header {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 3.5rem;
|
||||
overflow: hidden;
|
||||
transition: height 0.4s ease;
|
||||
margin: 0;
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
padding: 1rem var(--padding-body);
|
||||
z-index: 9999;
|
||||
}
|
||||
body > header nav {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
body > header nav .nav-logo {
|
||||
display: block;
|
||||
font-size: 1rem;
|
||||
order: 1;
|
||||
z-index: 2;
|
||||
}
|
||||
body > header nav .burger {
|
||||
order: 2;
|
||||
margin-left: auto;
|
||||
width: 2rem;
|
||||
height: 2rem;
|
||||
width: 7.125rem;
|
||||
height: 1.25rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
gap: 0.4rem;
|
||||
z-index: 2;
|
||||
}
|
||||
body > header nav .burger span {
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 1.5px;
|
||||
height: 1px;
|
||||
background-color: #fff;
|
||||
transition: transform 0.3s ease, opacity 0.3s ease;
|
||||
transform-origin: center;
|
||||
}
|
||||
body > header nav ul {
|
||||
order: 3;
|
||||
position: fixed;
|
||||
display: block;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100dvh;
|
||||
background-color: var(--color-blue);
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 0;
|
||||
padding-top: 3rem;
|
||||
padding: 6rem var(--padding-body) 2rem;
|
||||
box-sizing: border-box;
|
||||
z-index: 1;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease 0.1s;
|
||||
pointer-events: none;
|
||||
transition: opacity 0.3s ease-in-out;
|
||||
}
|
||||
body > header nav ul li {
|
||||
width: 100%;
|
||||
|
|
@ -836,16 +855,16 @@ body.no-scroll {
|
|||
body > header nav ul li a {
|
||||
display: block;
|
||||
padding: 0.5rem 0;
|
||||
font-size: 2.5rem;
|
||||
font-weight: 400;
|
||||
}
|
||||
body > header nav ul li:first-child {
|
||||
width: 100%;
|
||||
font-size: 2.5rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
body > header nav ul li:first-child a {
|
||||
font-family: var(--font-narrow);
|
||||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
body > header nav ul li:not(:first-child) {
|
||||
font-family: var(--font-narrow);
|
||||
|
|
@ -853,22 +872,25 @@ body.no-scroll {
|
|||
text-transform: uppercase;
|
||||
font-weight: 700;
|
||||
}
|
||||
body > header.nav-open {
|
||||
height: 100vh;
|
||||
height: 100dvh;
|
||||
}
|
||||
body > header.nav-open nav .burger span:first-child {
|
||||
transform: rotate(45deg) translateY(0.2rem);
|
||||
}
|
||||
body > header.nav-open nav .burger span:last-child {
|
||||
transform: rotate(-45deg) translateY(-0.2rem);
|
||||
}
|
||||
body > header.nav-open nav ul {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
}
|
||||
body > header.nav-open nav .burger span:nth-child(2) {
|
||||
opacity: 0;
|
||||
}
|
||||
body > header.nav-open nav .burger span:first-child {
|
||||
transform: translateY(0.55rem) rotate(10deg);
|
||||
}
|
||||
body > header.nav-open nav .burger span:last-child {
|
||||
transform: translateY(-0.55rem) rotate(-10deg);
|
||||
}
|
||||
main {
|
||||
padding-top: 3.5rem;
|
||||
}
|
||||
section {
|
||||
scroll-margin-top: 5.8125rem;
|
||||
}
|
||||
section#hero {
|
||||
height: auto;
|
||||
min-height: 60vh;
|
||||
|
|
@ -934,6 +956,7 @@ body.no-scroll {
|
|||
}
|
||||
section#handles {
|
||||
margin: 3rem var(--padding-body);
|
||||
padding: 0;
|
||||
}
|
||||
section#handles header {
|
||||
flex-direction: column;
|
||||
|
|
@ -959,6 +982,7 @@ body.no-scroll {
|
|||
section#system {
|
||||
flex-direction: column;
|
||||
margin: 3rem var(--padding-body);
|
||||
padding: 0;
|
||||
gap: 3rem;
|
||||
}
|
||||
section#system .text {
|
||||
|
|
@ -973,6 +997,7 @@ body.no-scroll {
|
|||
}
|
||||
section#system figure {
|
||||
width: 100%;
|
||||
margin: 0;
|
||||
height: auto;
|
||||
}
|
||||
section#excerpt {
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -54,6 +54,7 @@
|
|||
<button class="burger" aria-label="Menu">
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span></span>
|
||||
</button>
|
||||
<ul>
|
||||
<li>
|
||||
|
|
@ -409,7 +410,7 @@
|
|||
|
||||
<section id="author">
|
||||
<img
|
||||
src="/assets/images/frederic-denjoy.jpg"
|
||||
src="/assets/images/frederic-denjoy.jpeg"
|
||||
alt="Portrait de l'auteur Frédéric Denjoy"
|
||||
/>
|
||||
<div class="text">
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue