From a890a677e2faa1e74b2e19ae00d43795fb993389 Mon Sep 17 00:00:00 2001
From: giteaadmin <gitea@twk95.net>
Date: Sat, 30 Aug 2025 17:51:33 -0400
Subject: [PATCH] fix: update hover and active css styles

---
 src/css/style.css | 43 +++++++++++++++++++++++++++++++++++++++----
 1 file changed, 39 insertions(+), 4 deletions(-)

diff --git a/src/css/style.css b/src/css/style.css
index 166b82d..9a2b77c 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -24,7 +24,7 @@ body {
     padding: 1.5rem;
     transition: transform 0.3s ease, box-shadow 0.3s ease;
 }
-.card:hover {
+.card:active {
     box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
 }
 .tag {
@@ -37,6 +37,25 @@ body {
     margin-bottom: 0.5rem;
     display: inline-block;
 }
+.tag-link {
+    display: inline-block;
+    background-color: #374151; /* from bg-gray-700 */
+    color: #93c5fd; /* from text-blue-300 */
+    font-size: 0.875rem; /* from text-sm */
+    font-weight: 500; /* from font-medium */
+    padding: 0.125rem 0.625rem; /* from py-0.5 px-2.5 */
+    border-radius: 9999px; /* from rounded-full */
+    margin-right: 0.25rem; /* from mr-1 */
+    text-decoration: none;
+    transition-property: transform, background-color, color;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 150ms;
+}
+.tag-link:active {
+    background-color: #4B5563; /* from hover:bg-gray-600 */
+    color: #bfdbfe; /* from hover:text-blue-200 */
+    transform: scale(1.05);
+}
 .glass-card {
     background: rgba(31, 41, 55, 0.5); /* bg-gray-800 with opacity */
     backdrop-filter: blur(10px);
@@ -78,11 +97,11 @@ body {
     transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
     transition-duration: 150ms;
 }
-.btn:hover {
+.btn:active {
     background-color: #1D4ED8;
     transform: scale(1.05);
 }
-.btngray:hover {
+.btngray:active {
     background-color: #4B5563;
     transform: scale(1.05);
 }
@@ -119,7 +138,7 @@ article a {
     color: #60a5fa;
     text-decoration: none;
 }
-article a:hover {
+article a:active {
     color: #93c5fd;
 }
 article code {
@@ -206,6 +225,22 @@ article li {
     .like-icon.liked:hover {
         transform: scale(1.15);
     }
+    .tag-link:hover {
+        background-color: #4B5563; /* from hover:bg-gray-600 */
+        color: #bfdbfe; /* from hover:text-blue-200 */
+        transform: scale(1.05);
+    }
+    .card:hover {
+        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+    }
+    .btn:hover {
+        background-color: #1D4ED8;
+        transform: scale(1.05);
+    }
+    .btngray:hover {
+        background-color: #4B5563;
+        transform: scale(1.05);
+    }
 }
 .hint-animation {
     animation: wobble 1s ease-in-out 2;