chore(back-to-top): Add a rocket to launch the back-to-top

_layouts/post.html

@@ -71,4 +71,7 @@ <h1 class="page-title">{{page.title}}</h1>
       {% include related_post.html %}
     </div> <!-- End Wrap Content -->
   </div> <!-- End Page Content -->
+  <div class='rocket'>
+    <svg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M2.81,14.12L5.64,11.29L8.17,10.79C11.39,6.41 17.55,4.22 19.78,4.22C19.78,6.45 17.59,12.61 13.21,15.83L12.71,18.36L9.88,21.19L9.17,17.66C7.76,17.66 7.76,17.66 7.05,16.95C6.34,16.24 6.34,16.24 6.34,14.83L2.81,14.12M5.64,16.95L7.05,18.36L4.39,21.03H2.97V19.61L5.64,16.95M4.22,15.54L5.46,15.71L3,18.16V16.74L4.22,15.54M8.29,18.54L8.46,19.78L7.26,21H5.84L8.29,18.54M13,9.5A1.5,1.5 0 0,0 11.5,11A1.5,1.5 0 0,0 13,12.5A1.5,1.5 0 0,0 14.5,11A1.5,1.5 0 0,0 13,9.5Z'/></svg>
+  </div>
 </article> <!-- End Article Page -->

assets/css/main.scss

@@ -119,9 +119,6 @@ img + em {
     height: 600px;
 }
 
-
-
-
 // Blockquote
 blockquote {
   border-left: 5px solid #000;
@@ -309,18 +306,50 @@ table.scrollable {
   }
 }
 
-// Selection
-/*
-::-moz-selection {
-  background: rgba(209, 193, 177, 0.8);
-  color: var(--body-background);
-}
+// Back to the Top - Rocket
+.rocket {
+  visibility: hidden;
+  opacity: 0;
+  position: fixed;
+  right: 30px;
+  z-index: 99;
+  cursor: pointer;
+  border-radius: 100px;
+  bottom: -30px;
+
+  &.show {
+    visibility: visible;
+    opacity: 1;
+    bottom: 30px;
+    transition: all .5s ease;
+  }
 
-::selection {
-  background: rgba(209, 193, 177, 0.8);
-  color: var(--body-background);
+  &.launch {
+    visibility: visible;
+    opacity: 1;
+    bottom: 100vh;
+    transition: bottom 1.5s ease;
+  }
+
+  svg {
+    width: 50px;
+    height: 50px;
+    transition: all .3s ease;
+
+    path {
+      fill: var(--discreet-color);
+    }
+  }
+
+  &:hover svg,
+  &.launch svg {
+    transform: rotate(-45deg);
+
+    path {
+      fill: var(--body-color);
+    }
+  }
 }
-*/
 
 /* - - - - - - - - - - Home Page Styles - - - - - - - - - - */
 @import 'parts/home-page';

darkmode.js

@@ -1,3 +1,4 @@
+// Dark Mode
 const darkModeSwitches = document.querySelectorAll(".dark-mode-switch");
 
 if (darkModeSwitches) {
@@ -42,6 +43,7 @@ function initDarkMode() {
 
 initDarkMode();
 
+// Code Window
 // This assumes that you're using Rouge; if not, update the selector
 const codeBlocks = document.querySelectorAll('.highlight');
 const copyCodeButtons = document.querySelectorAll('.window-copy-icon');
@@ -67,3 +69,57 @@ copyCodeButtons.forEach((copyCodeButton, index) => {
     }, 1000);
   });
 });
+
+// Back to the Top with a Rocket
+function rocket(delay) {
+    document.addEventListener("DOMContentLoaded", function() {
+        const element = document.querySelector(".rocket");
+
+        if (element && element.offsetHeight === 0) {
+            element.classList.remove("show", "launch");
+            element.style.visibility = "hidden";
+        }
+
+        window.addEventListener("scroll", function() {
+            if (window.scrollY > 100) { // Si l'utilisateur a scrollé de plus de 100px
+                element.classList.add("show"); // Ajoute la classe "show"
+            } else {
+                element.classList.remove("show"); // Supprime la classe "show" si on est revenu en haut
+            }
+        });
+    });
+
+    // Action lorsque l'utilisateur clique sur le bouton "rocket"
+    const button = document.querySelector(".rocket");
+    if (button) {
+        button.addEventListener("click", function() {
+            // Ajoute la classe "launch" pour déclencher l'animation de lancement
+            button.classList.add("launch");
+            scrollToTop();
+
+            // Simule un autre élément avec un délai après le clic
+            const anotherElement = document.querySelector(".another-target");
+            if (anotherElement) {
+                anotherElement.style.transition = "visibility 0.3s ease";
+                anotherElement.style.visibility = "hidden"; // Masquer un autre élément après un délai
+                setTimeout(function() {
+                    anotherElement.style.visibility = "visible"; // Rendre visible après le délai
+                }, delay);
+            }
+
+            // Optionnel : enlever la classe "launch" après l'animation (ajustez selon vos besoins)
+            setTimeout(function() {
+                button.classList.remove("launch"); // Réinitialise l'état après le délai si nécessaire
+            }, 1500); // Par exemple, après 1.5 secondes
+        });
+    }
+}
+
+function scrollToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth' // défilement en douceur
+    });
+}
+
+rocket(1000);