neon: make it glow!

Author: moiSentineL

src/_layouts/base.njk

@@ -53,7 +53,25 @@
 
     {% include "gtag.njk" %}
     {% include "nutshell.njk" %}
-</script>
+
+  <script>
+    // Array of colors
+    const colors = [
+    "#e0e0e0",  // $transwhite
+    "#70d6ff",  // $pale-azure
+    "#ff70a6",  // $cyclamen
+    "#ff9770",  // $atomic-tangerine
+    "#ffd670",  // $naples-yellow
+    "#e9ff70",  // $mindaro
+    "#70ff99",  // $lime-green
+    "#9770ff"   // $violet
+    ];
+    // Select a random color
+    const randomColor = colors[Math.floor(Math.random() * colors.length)];
+
+    // Apply the random color to a CSS variable
+    document.documentElement.style.setProperty('--flicker-color', randomColor);
+  </script>
 </body>
 {% include "footer.njk" %}
 </html>

src/styles/css.scss

@@ -59,10 +59,30 @@ html {
   }
 }
 
+.neonText {
+  animation: flicker 5s infinite alternate;
+}
+
+@keyframes flicker {
+  0%, 18%, 22%, 25%, 53%, 57%, 100% {
+
+    text-shadow:
+      0 0 2px #fff,
+      0 0 20px var(--flicker-color),
+  
+  }
+  
+  20%, 24%, 55% {        
+      text-shadow: none;
+  }    
+}
+
 body {
   overflow-x: hidden;
 }
 
+
+
 strong {
   @include theme(dark) {
     color: $naples-yellow;
@@ -146,6 +166,7 @@ mjx-container {
     background: #c8fffd;
     color: black;
   }
+
   pre,
   code {
     background: rgb(48, 48, 48);
@@ -180,6 +201,10 @@ h6 {
   margin: 1em 0 0.2em;
 }
 
+h1, h2, h3 {
+  @extend .neonText;
+}
+
 p,
 ul,
 ol {