From 02e92d10fed92ebe4d6245faef98344cb424f082 Mon Sep 17 00:00:00 2001 From: Matthieu Bessat Date: Mon, 10 Apr 2023 19:25:39 +0200 Subject: [PATCH] feat: burger menu --- assets/sass/button.scss | 137 ++++++++++++++++++++++++---- assets/sass/header.scss | 172 +++++++++++++++++++++++++++++++++++ assets/sass/landing.scss | 15 ++- layouts/index.html | 39 +++++--- layouts/partials/header.html | 26 ++++-- 5 files changed, 345 insertions(+), 44 deletions(-) diff --git a/assets/sass/button.scss b/assets/sass/button.scss index eecba1f..8036b4c 100644 --- a/assets/sass/button.scss +++ b/assets/sass/button.scss @@ -9,24 +9,121 @@ } -.burger { - width: 100px; - height: 100px; - border: 1px solid red; - display: flex; - justify-content: space-between; - flex-direction: column; - .bar { - width: 100%; - border-top: 6px solid rgba(1, 1, 1, 0.9); - } - .bar1 { - - } - .bar2 { - - } - .bar3 { - - } +@keyframes topbar_left { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(45deg) scaleX(1.6); + } } +@keyframes topbar_right { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-45deg) scaleX(1.6); + } +} + + +@keyframes middlebar { + 0% { + width: 100%; + } + 100% { + width: 0%; + } +} + +@keyframes bottombar_left { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(-45deg) scaleX(1.6); + } +} +@keyframes bottombar_right { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(45deg) scaleX(1.6); + } +} +@keyframes topbottom { + 0% { + transform: scaleX(2); + } + 100% { + transform: scaleX(2); + } +} + + +$dur: 1s; + +// .burger { +// width: 100px; +// height: 100px; +// border: 1px solid red; +// display: flex; +// justify-content: space-between; +// flex-direction: column; +// overflow: hidden; +// .bar { +// position: relative; +// animation-fill-mode: forwards !important; +// } +// .bar div { +// position: absolute; +// width: 100%; +// height: 1em; +// background: rgba(149, 165, 166, 1); +// border-radius: 1em; +// } +// .bar-group { +// height: 15px; +// display: flex; +// justify-content: center; +// } +// .bar1, .bar2 { +// } +// .bar1 { +// .bar { +// width: 100%; +// top: -50%; +// } +// .bar:nth-of-type(1) { +// animation: topbar_left $dur ease-in-out; +// transform-origin: top left; +// } +// .bar:nth-of-type(2) { +// animation: topbar_right $dur ease-in-out; +// transform-origin: top right; +// } +// } +// .bar2 { +// // middle bar +// display: flex; +// justify-content: center; +// .bar { +// animation: middlebar $dur ease-in-out; +// } +// } +// .bar3 { +// .bar { +// width: 100%; +// top: 50%; +// } +// .bar:nth-of-type(1) { +// animation: bottombar_left $dur ease-in-out; +// transform-origin: bottom left; +// } +// .bar:nth-of-type(2) { +// animation: bottombar_right $dur ease-in-out; +// transform-origin: bottom right; +// } +// } +// } diff --git a/assets/sass/header.scss b/assets/sass/header.scss index f079d63..938ff0d 100644 --- a/assets/sass/header.scss +++ b/assets/sass/header.scss @@ -44,3 +44,175 @@ $header-height: 6rem; line-height: 2rem; } } + + +.burger-menu { + display: none; + height: 5rem; + width: 5rem; + position: relative; + bottom: -50%; + margin-right: 2em; + z-index: 200; + + .checkbox { + display: none; + } + + .burger-button { + position: absolute; + display: block; + min-width: initial; + background-color: white; + height: 5rem; + width: 5rem; + padding: 1rem 1rem; + border-radius: 50%; + box-shadow: 0 0rem 3.5rem rgba(0, 0, 0, 0.4); + text-align: center; + cursor: pointer; + z-index: 1200; + user-select: none; + } + + .background { + position: absolute; + height: 4rem; + width: 4rem; + margin: .5rem; + border-radius: 50%; + background-image: radial-gradient($background, black); + transition: transform 0.8s cubic-bezier(0.86, 0, 0.07, 1); + z-index: 1000; + } + + .nav { + display: none; + opacity: 0; + position: fixed; + top: 0; + left: 0; + z-index: 1000; + width: 100%; + height: 100vh; + // transition: all 0.8s; + + justify-content: center; + align-items: center; + + font-size: 2rem; + } + + .nav ul { + list-style-type: none; + padding: 0; + position: relative; + left: -1rem; + + li { + margin-bottom: 1.5rem; + } + + li a { + text-transform: uppercase; + text-decoration: none; + } + } + + /* functionality */ + .checkbox:checked ~ .background { + transform: scale(41); + } + + @keyframes navin { + 0% { + opacity: 0; + } + 50% { + opacity: 0; + } + 100% { + opacity: 1; + } + } + + .checkbox:checked ~ .nav { + display: flex; + width: 100%; + opacity: 1; + // transition: opacity 0.8s ease-in-out; + animation: navin 1s ease-in-out; + } + + /* */ + /* styling hamb ICON */ + .icon { + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + } + + .icon, + .icon::before, + .icon::after { + width: 3rem; + height: 2px; + background-color: gray; + display: inline-block; + } + + .icon::before, + .icon::after { + content: ""; + position: absolute; + left: 0; + transition: all 0.2s; + } + + .icon::before { + top: -0.8rem; + } + .icon::after { + top: 0.8rem; + } + + .burger-button:hover icon:before { + top: -1rem; + } + .burger-button:hover icon::after { + top: 1rem; + } + + .checkbox:checked + .burger-button { + z-index: 2000; + } + + .checkbox:checked + .burger-button .icon { + background-color: transparent; + } + + .checkbox:checked + .burger-button .icon::before { + top: 0; + transform: rotate(135deg); + } + .checkbox:checked + .burger-button .icon::after { + top: 0; + transform: rotate(-135deg); + } +} + + +@media (max-width: $md-breakpoint) { + // still not supported in firefox in 2023! I can't believe it + body:has(.checkbox:checked) { + overflow: hidden; + } + .desktop-nav { + display: none; + } + .burger-menu { + display: block; + } +} + diff --git a/assets/sass/landing.scss b/assets/sass/landing.scss index 19b469c..6bd181d 100644 --- a/assets/sass/landing.scss +++ b/assets/sass/landing.scss @@ -39,11 +39,24 @@ background-color: rgba(14, 14, 14, 0.2); } +.cover__title-container { + // position: relative; +} + .cover__title { font-weight: bold; color: white; font-size: 3em; - margin-bottom: 0.5em; + margin: 0; + margin-bottom: 0.3em; + z-index: 2; + // position: absolute; + display: inline; + padding: 0.4rem 0.75rem; + background: rgba(1, 1, 1, 0.5); +} + +.cover__backdrop { } .landing__title { diff --git a/layouts/index.html b/layouts/index.html index 81a226b..63ab451 100644 --- a/layouts/index.html +++ b/layouts/index.html @@ -7,27 +7,36 @@
-

- Sauvons la chapelle
- de Bethléem ! -

+
+

+ Sauvons la chapelle + de Bethléem ! +

+
+
+
-
-
-
-
-
-
-
-
-
-
-
+ + + + + + + + + + + + + + + +
diff --git a/layouts/partials/header.html b/layouts/partials/header.html index f7b3340..2eda60c 100644 --- a/layouts/partials/header.html +++ b/layouts/partials/header.html @@ -7,7 +7,7 @@ alt="Logo l'étoile de bethléem" /> -