assets/sass/button.scss

@@ -8,3 +8,25 @@
     border-radius: 2px;
 }
 
+
+.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 {
+
+    }
+}

assets/sass/header.scss

@@ -44,175 +44,3 @@ $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;
-    }
-}
-

assets/sass/landing.scss

@@ -39,24 +39,11 @@
     background-color: rgba(14, 14, 14, 0.2);
 }
 
-.cover__title-container {
-    // position: relative;
-}
-
 .cover__title {
     font-weight: bold;
     color: white;
     font-size: 3em;
-    margin: 0;
+    margin-bottom: 0.5em;
-    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 {

layouts/index.html

@@ -7,20 +7,28 @@
         </div>
         <div class="cover__content">
             <div class="page-container">
-                <div class="cover__title-container">
                 <h1 class="cover__title">
-                        Sauvons la chapelle
+                    Sauvons la chapelle<br>
-                        de Bethléem !
+                    de Bethléem !
                 </h1>
-                    <div class="cover__backdrop">
-                    </div>
-                </div>
             </div>
         </div>
     </div>
     <div class="accent-separator">
     </div>
 
+    <div class="big-animation" style="margin-top: 1em; margin-left: 1em">
+        <div class="burger">
+            <div class="bar-group bar1">
+                <div class="bar"></div>
+                <div class="bar"></div>
+                <div class="bar"></div>
+            </div>
+            <div class="bar-group bar2"></div>
+            <div class="bar-group bar3"></div>
+        </div>
+    </div>
+
     <div class="page-container" style="margin-top: 2rem"> 
         <button class="button">Adhérer !</button>
     </div>

layouts/partials/header.html

@@ -7,7 +7,7 @@
                 alt="Logo l'étoile de bethléem"
             />
         </a>
-        <nav class="site-header__nav desktop-nav">
+        <nav class="site-header__nav">
             <a href="/actualites">Actualités</a>.
             <a href="/association">L'association</a>.
             <a href="/histoires">Histoire</a>.
@@ -16,22 +16,12 @@
             <a href="{{ .URL | relURL }}"><b>{{ .Name }}</b></a>.
             {{ end }}
         </nav>
-        <div class="burger-menu">
+        <!-- <div class="site-header__nav-button"> -->
-            <div class="burger-button-container">
+        <!--     <div class="burger-button"> -->
-                <input type="checkbox" id="navi-toggle" class="checkbox" />
+        <!--         <div></div> --> 
-                <label for="navi-toggle" class="burger-button">
+        <!--         <div></div> --> 
-                    <span class="icon">&nbsp;</span>
+        <!--         <div></div> --> 
-                </label>
+        <!--     </div> -->
-                <div class="background">&nbsp;</div>
+        <!-- </div> -->
-                <nav class="nav">
-                    <ul class="list">
-                        <li><a href="/actualites">Actualités</a></li>
-                        <li><a href="/association">L'association</a></li>
-                        <li><a href="/histoires">Histoire</a></li>
-                        <li><a href="/images">Gallerie</a></li>
-                    </ul>
-                </nav>
-            </div>
-        </div>
     </div>
 </header>