Feature/april (#124)

* style: 💄 Add april style

* feat: 🎸 remember spotlight disable from localStorage

* feat: 🎸 Extract function and remove listener on body

* fix: 🐛 fix visibility on mobile

* feat: 🎸 Run feature on april fool's day only

* refactor: 💡 refactor to avoid else

* refactor: 💡 simplify code

Author: mattboll

site/layouts/_default/baseof.html

@@ -13,5 +13,12 @@
     {{ with $script.js }}
       <script src="{{ relURL . }}"></script>
     {{ end }}
+    <script>
+      const d = new Date();
+      // Show April Fools' joke
+      if (d.getMonth() === 3 && d.getDate() === 1) {
+          $.getScript("/js/april.js");
+      }
+    </script>
   </body>
 </html>

site/static/js/april.js

@@ -0,0 +1,30 @@
+
+(async function($) {
+
+  $("body").append("<a href='#' id='disable-spotlight' class='btn dark'>Désactiver le mode sombre</a><div id='spotlight'></div>");
+
+  const spotlightEl = $("#spotlight");
+
+  function handleMouseMove(event) {
+    const {clientX, clientY} = event;
+
+    spotlightEl[0].style.background = `radial-gradient(circle at ${clientX}px ${clientY}px, #00000000 10px, #000000FF 100px)`;
+  }
+
+  $("body").on("mousemove", handleMouseMove);
+
+  $("#disable-spotlight").on("click", () => {
+    disableApril();
+    localStorage.setItem("disable-april", "true");
+  });
+
+  if (localStorage.getItem("disable-april") === "true") {
+    disableApril();
+  }
+
+  function disableApril() {
+    $("#spotlight")[0].style.display = "none";
+    $("#disable-spotlight")[0].style.display = "none";
+    $("body").off("mousemove", handleMouseMove);
+  }
+})(jQuery);

src/css/april.scss

@@ -0,0 +1,26 @@
+
+
+#spotlight {
+    position: fixed;
+    background: black;
+    opacity: 1;
+    width: 100vw;
+    height: 100vh;
+    top: 0;
+    left: 0;
+    z-index: 1000;
+    pointer-events: none;
+    @media screen and (max-width: 1024px) {
+        display: none;
+    }
+  }
+
+  #disable-spotlight {
+    position: fixed;
+    z-index: 999;
+    right: 50px;
+    bottom: 20px;
+    @media screen and (max-width: 1024px) {
+        display: none;
+    }
+  }

src/css/main.scss

@@ -18,6 +18,7 @@
 @import 'swiper';
 @import 'legals';
 @import 'cloud';
+@import 'april';
 
 :root {
   scroll-behavior: smooth;