avancement boutons pages

This commit is contained in:
2026-05-05 12:00:31 +02:00
parent 90f49b2d81
commit 49135e764d
14 changed files with 526 additions and 96 deletions
@@ -1,29 +1,21 @@
.hamburger-btn {
width: 50px;
height: 50px;
align-self: flex-start;
width: 44px;
height: 44px;
border-radius: 14px;
background: white;
border: none;
cursor: pointer;
border-radius: 17px;
/* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
/* Légère ombre rosée */
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: rosybrown;
cursor: pointer;
margin-bottom: 28px;
transition: box-shadow 0.2s, transform 0.15s;
/* Transitions pour l'hover */
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hamburger-btn:hover {
transform: scale(1.04);
box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
}
.hamburger-btn:active {
transform: scale(0.97);
&:active {
transform: scale(0.94);
box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
}
}
@@ -1,29 +1,21 @@
.hamburger-btn {
width: 50px;
height: 50px;
align-self: flex-start;
width: 44px;
height: 44px;
border-radius: 14px;
background: white;
border: none;
cursor: pointer;
border-radius: 17px;
/* Dégradé radial depuis le coin supérieur gauche pour l'effet "glow" */
background: radial-gradient(ellipse at 30% 30%, #fff 0%, #f9ece9 60%, #f3d4cc 100%);
/* Légère ombre rosée */
box-shadow: 0 4px 24px rgba(200, 120, 100, 0.13);
box-shadow: 0 2px 10px rgba(180, 80, 80, 0.12);
display: flex;
align-items: center;
justify-content: center;
color: rosybrown;
cursor: pointer;
margin-bottom: 28px;
transition: box-shadow 0.2s, transform 0.15s;
/* Transitions pour l'hover */
transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.hamburger-btn:hover {
transform: scale(1.04);
box-shadow: 0 6px 28px rgba(200, 120, 100, 0.2);
}
.hamburger-btn:active {
transform: scale(0.97);
&:active {
transform: scale(0.94);
box-shadow: 0 1px 5px rgba(180, 80, 80, 0.1);
}
}
+23 -2
View File
@@ -2,13 +2,34 @@
min-height: 100vh;
display: flex;
flex-direction: column;
background: radial-gradient(ellipse at 50% 5%, #fff8f7 0%, #fde0db 45%, #dea09a 100%);
background: linear-gradient(
160deg,
#f9e8e8 0%,
#f2c4c4 35%,
#e89898 70%,
#d97070 100%
);
padding: 26px;
gap: 12px;
gap: 30px;
}
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 16px;
}
@media (min-width: 480px) {
.header {
padding: 0 24px;
}
}
@media (min-width: 768px) {
.header {
padding: 0 40px;
}
}
.param {