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"
/>
-