From 09eb079cf9bccf9aeb44652236f2a8ccc6600a61 Mon Sep 17 00:00:00 2001
From: Adrian Victor <adrianvictor@disroot.org>
Date: Sun, 5 Jul 2026 11:20:12 -0300
Subject: [PATCH] Add fire animation when hovering "hotlinks" title in index

---
 .cache/mastodon.json |  2 +-
 site/index.njk       |  2 +-
 static/main.css      | 86 ++++++++++++++++++++++++++++++++++++++++++++
 3 files changed, 88 insertions(+), 2 deletions(-)

diff --git a/.cache/mastodon.json b/.cache/mastodon.json
index fe2023a..7b577e7 100644
--- a/.cache/mastodon.json
+++ b/.cache/mastodon.json
@@ -1,5 +1,5 @@
 {
-  "lastFetched": "2026-07-05T14:03:59.075Z",
+  "lastFetched": "2026-07-05T14:19:39.422Z",
   "posts": [
     {
       "date": "2026-07-03T01:51:37.604Z",
diff --git a/site/index.njk b/site/index.njk
index 0c21367..f819d72 100644
--- a/site/index.njk
+++ b/site/index.njk
@@ -189,7 +189,7 @@ layout: base.njk
 
     <div id="homeFriends">
         <div>
-            <h1 class="nomargin negativeMargin">Hotlinks</h1>
+            <h1 class="nomargin negativeMargin fireHover">Hotlinks</h1>
             <hr style="margin-bottom: .4em;">
         </div>
 
diff --git a/static/main.css b/static/main.css
index 6bac5ac..dd6045e 100644
--- a/static/main.css
+++ b/static/main.css
@@ -1130,6 +1130,20 @@ header div:first-child {
     border-top: none;
 }
 
+.fire, .fireHover:hover {
+  animation: fire-animation 1s ease-in-out infinite alternate;
+  -moz-animation: fire-animation 1s ease-in-out infinite alternate;
+  -webkit-animation: fire-animation 1s ease-in-out infinite alternate;
+  -o-animation: fire-animation 1s ease-in-out infinite alternate;
+}
+
+.burn {
+  animation: fire-animation .65s ease-in-out infinite alternate;
+  -moz-animation: fire-animation .65s ease-in-out infinite alternate;
+  -webkit-animation: fire-animation .65s ease-in-out infinite alternate;
+  -o-animation: fire-animation .65s ease-in-out infinite alternate;
+}
+
 /* Animations */
 
 @keyframes ellipsis-loader {
@@ -1163,6 +1177,78 @@ header div:first-child {
     to { opacity: 0; }
 }
 
+@keyframes fire-animation
+{
+0% {text-shadow: 0 0 20px #fefcc9,
+  10px -10px 30px #feec85,
+  -20px -20px 40px #ffae34,
+  20px -40px 50px #ec760c,
+  -20px -60px 60px #cd4606,
+  0 -80px 70px #973716,
+  10px -90px 80px #451b0e;}
+100% {text-shadow: 0 0 20px #fefcc9,
+  10px -10px 30px #fefcc9,
+  -20px -20px 40px #feec85,
+  22px -42px 60px #ffae34,
+  -22px -58px 50px #ec760c,
+  0 -82px 80px #cd4606,
+  10px -90px 80px  #973716;}
+}
+
+@-moz-keyframes fire-animation
+{
+0% {text-shadow: 0 0 20px #fefcc9,
+  10px -10px 30px #feec85,
+  -20px -20px 40px #ffae34,
+  20px -40px 50px #ec760c,
+  -20px -60px 60px #cd4606,
+  0 -80px 70px #973716,
+  10px -90px 80px #451b0e;}
+100% {text-shadow: 0 0 20px #fefcc9,
+  10px -10px 30px #fefcc9,
+  -20px -20px 40px #feec85,
+  22px -42px 60px #ffae34,
+  -22px -58px 50px #ec760c,
+  0 -82px 80px #cd4606,
+  10px -90px 80px  #973716;}
+}
+
+@-webkit-keyframes fire-animation
+{
+0% {text-shadow: 0 0 20px #fefcc9,
+  10px -10px 30px #feec85,
+  -20px -20px 40px #ffae34,
+  20px -40px 50px #ec760c,
+  -20px -60px 60px #cd4606,
+  0 -80px 70px #973716,
+  10px -90px 80px #451b0e;}
+100% {text-shadow: 0 0 20px #fefcc9,
+  10px -10px 30px #fefcc9,
+  -20px -20px 40px #feec85,
+  22px -42px 60px #ffae34,
+  -22px -58px 50px #ec760c,
+  0 -82px 80px #cd4606,
+  10px -90px 80px  #973716;}
+}
+
+@-o-keyframes fire-animation
+{
+0% {text-shadow: 0 0 20px #fefcc9,
+  10px -10px 30px #feec85,
+  -20px -20px 40px #ffae34,
+  20px -40px 50px #ec760c,
+  -20px -60px 60px #cd4606,
+  0 -80px 70px #973716,
+  10px -90px 80px #451b0e;}
+100% {text-shadow: 0 0 20px #fefcc9,
+  10px -10px 30px #fefcc9,
+  -20px -20px 40px #feec85,
+  22px -42px 60px #ffae34,
+  -22px -58px 50px #ec760c,
+  0 -82px 80px #cd4606,
+  10px -90px 80px  #973716;}
+}
+
 /* Media queries */
 
 @media screen and (max-width: 1400px) {