Merge pull request #38 from moiSentineL/neon-glow

neon!

Author: moiSentineL

src/_includes/bloghead.njk

@@ -13,8 +13,9 @@
 </style>
 <header>
     <div class="fcrow">
-        <h1 style="margin: 0 0 0 0; text-align: center; line-height: 1.2">Nibir's Brain Dump</h1>
-        <h2 style="margin: 0.5em 0 0 0;color: #909090; text-align: center; line-height: 1.2">yes I write too.</h2>
+        <h1 style="margin: 0 0 0 0; text-align: center; line-height: 1.2;">Nibir's Brain Dump</h1>
+        <h2 style="margin: 0.5em 0 0 0; text-align: center; line-height: 1.2">yes I write too.</h2>
+        {# color: #909090 #}
     </div>
 </header>
 <nav>

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/_layouts/pages/blogs.njk

@@ -15,8 +15,8 @@ layout: base.njk
 </style>
 <header>
     <div class="fcrow">
-        <h1 style="margin: 0 0 0 0; text-align: center; line-height: 1.2">Nibir's Brain Dump</h1>
-        <h2 style="margin: 0.5em 0 0 0;color: #909090; text-align: center; line-height: 1.2">yes I write too.</h2>
+        <h1 id="heads" style="margin: 0 0 0 0; text-align: center; line-height: 1.2">Nibir's Brain Dump</h1>
+        <h2 class="heads" style="margin: 0.5em 0 0 0;color: #909090; text-align: center; line-height: 1.2">yes I write too.</h2>
     </div>
 </header>
 <nav>

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 1px #fff,
+      0 0 18px 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);
@@ -176,10 +197,16 @@ h6 {
   font-variation-settings: "wdth" 90;
   margin: 1em 0 0.5em;
 }
+
+h1, h2, h3 {
+  @extend .neonText;
+}
+
 .title {
   margin: 1em 0 0.2em;
 }
 
+
 p,
 ul,
 ol {