From 08bdb930ac364b1c06f6e52b67b56224a4d70022 Mon Sep 17 00:00:00 2001
From: Kentai Radiquum <kentai.waah@gmail.com>
Date: Thu, 13 Feb 2025 02:02:25 +0500
Subject: [PATCH] add footer link colors transition on hover

---
 src/static/css/tailwind.css |  7 +++++++
 src/templates/Footer.tsx    | 27 ++++++++++++++++++++++-----
 2 files changed, 29 insertions(+), 5 deletions(-)

diff --git a/src/static/css/tailwind.css b/src/static/css/tailwind.css
index 84927a1..d040b1e 100644
--- a/src/static/css/tailwind.css
+++ b/src/static/css/tailwind.css
@@ -956,6 +956,13 @@
       }
     }
   }
+  .hover\:text-\[\#FF851A\] {
+    &:hover {
+      @media (hover: hover) {
+        color: #FF851A;
+      }
+    }
+  }
   .sm\:flex-shrink-1 {
     @media (width >= 40rem) {
       flex-shrink: 1;
diff --git a/src/templates/Footer.tsx b/src/templates/Footer.tsx
index 10ae147..19995a5 100644
--- a/src/templates/Footer.tsx
+++ b/src/templates/Footer.tsx
@@ -10,7 +10,7 @@ export default function Footer({ className }: FooterProps) {
       <div className="flex items-start flex-col gap-4">
         <a
           href="https://status.wah.su"
-          className="flex flex-row items-center justify-center gap-3"
+          className="flex flex-row items-center justify-center gap-3 hover:text-[#FF851A] transition-colors"
           target="_blank"
         >
           <div
@@ -35,12 +35,26 @@ export default function Footer({ className }: FooterProps) {
               />
             </div>
             <span>Photo by</span>{" "}
-            <a href="https://unsplash.com/@lgtts">Ilse Orsel</a> <span>on</span>{" "}
-            <a href="https://unsplash.com">Unsplash</a>
+            <a
+              href="https://unsplash.com/@lgtts"
+              className="hover:text-[#FF851A] transition-colors"
+            >
+              Ilse Orsel
+            </a>{" "}
+            <span>on</span>{" "}
+            <a
+              href="https://unsplash.com"
+              className="hover:text-[#FF851A] transition-colors"
+            >
+              Unsplash
+            </a>
           </div>
         </div>
         <div className="flex gap-8">
-          <a href="https://wah.su/radiquum" className="flex gap-2">
+          <a
+            href="https://wah.su/radiquum"
+            className="flex gap-2 hover:text-[#FF851A] transition-colors"
+          >
             <div className="h-6 w-6 bg-white rounded-full  overflow-hidden">
               <img
                 src="/static/images/avatar_48.jpg"
@@ -50,7 +64,10 @@ export default function Footer({ className }: FooterProps) {
             </div>
             <p>Run by @Radiquum</p>
           </a>
-          <a href="https://github.com/wah-su" className="flex gap-2">
+          <a
+            href="https://github.com/wah-su"
+            className="flex gap-2 hover:text-[#FF851A] transition-colors"
+          >
             <div className="h-6 w-6 bg-white rounded-full">
               <img
                 src="/static/images/GitHub_Invertocat_Dark.png"