From 6a4b575ee2969f827d0e7628f101e782179b7806 Mon Sep 17 00:00:00 2001
From: ld3zian <42660576+ld3z@users.noreply.github.com>
Date: Sun, 19 Jan 2025 21:20:38 -0700
Subject: [PATCH] fix light mode

---
 package-lock.json              | 23 +++++++++
 package.json                   |  1 +
 src/components/ComicCard.astro | 93 +++++++++++++++++++++-------------
 3 files changed, 83 insertions(+), 34 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 51a0a97..4b6e19f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -11,6 +11,7 @@
         "@astrojs/rss": "^4.0.11",
         "@astrojs/tailwind": "^5.1.0",
         "@astrojs/vercel": "^8.0.2",
+        "@floating-ui/dom": "^1.6.3",
         "astro": "^5.1.6",
         "tailwindcss": "^3.4.1"
       }
@@ -939,6 +940,28 @@
         "node": ">=12"
       }
     },
+    "node_modules/@floating-ui/core": {
+      "version": "1.6.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.9.tgz",
+      "integrity": "sha512-uMXCuQ3BItDUbAMhIXw7UPXRfAlOAvZzdK9BWpE60MCn+Svt3aLn9jsPTi/WNGlRUu2uI0v5S7JiIUsbsvh3fw==",
+      "dependencies": {
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/dom": {
+      "version": "1.6.13",
+      "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.13.tgz",
+      "integrity": "sha512-umqzocjDgNRGTuO7Q8CU32dkHkECqI8ZdMZ5Swb6QAM0t5rnlrN3lGo1hdpscRd3WS8T6DKYK4ephgIH9iRh3w==",
+      "dependencies": {
+        "@floating-ui/core": "^1.6.0",
+        "@floating-ui/utils": "^0.2.9"
+      }
+    },
+    "node_modules/@floating-ui/utils": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz",
+      "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg=="
+    },
     "node_modules/@img/sharp-darwin-arm64": {
       "version": "0.33.5",
       "resolved": "https://registry.npmjs.org/@img/sharp-darwin-arm64/-/sharp-darwin-arm64-0.33.5.tgz",
diff --git a/package.json b/package.json
index 5fb8f93..c185ada 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,7 @@
     "@astrojs/rss": "^4.0.11",
     "@astrojs/tailwind": "^5.1.0",
     "@astrojs/vercel": "^8.0.2",
+    "@floating-ui/dom": "^1.6.3",
     "astro": "^5.1.6",
     "tailwindcss": "^3.4.1"
   }
diff --git a/src/components/ComicCard.astro b/src/components/ComicCard.astro
index 1c98086..121b49f 100644
--- a/src/components/ComicCard.astro
+++ b/src/components/ComicCard.astro
@@ -39,8 +39,10 @@ const coverUrl = comic.md_comics.md_covers[0]
     </div>
     
     <div class="p-4 md:p-5 flex-grow flex flex-col bg-secondary relative rounded-b-xl">
-      <div class="absolute -top-8 left-3 right-3 bg-secondary/95 backdrop-blur-sm p-2 rounded-lg shadow-lg border border-hover/30">
-        <h3 class="text-lg font-bold line-clamp-1 text-center">{comic.md_comics.title}</h3>
+      <div class="absolute -top-8 left-3 right-3 bg-secondary/95 backdrop-blur-[12px] p-3 rounded-lg shadow-lg border border-hover/30">
+        <h3 class="text-lg font-bold line-clamp-1 text-center text-primary drop-shadow-[0_1px_1px_rgba(0,0,0,0.5)]">
+          {comic.md_comics.title}
+        </h3>
       </div>
       
       <div class="mt-6">
@@ -61,7 +63,7 @@ const coverUrl = comic.md_comics.md_covers[0]
                   type="button"
                   class="expand-tags-btn bg-hover text-primary/80 px-3 py-1 rounded-full text-xs font-medium hover:bg-hover/80 cursor-pointer transition-colors"
                   aria-expanded="false"
-                  aria-controls={`tags-${comic.id}`}
+                  data-comic-id={comic.id}
                 >
                   +{genreNames.length - 3} more
                 </button>
@@ -71,7 +73,8 @@ const coverUrl = comic.md_comics.md_covers[0]
             {genreNames.length > 3 && (
               <div 
                 id={`tags-${comic.id}`}
-                class="expanded-tags absolute left-0 right-0 bg-secondary/95 backdrop-blur-sm p-3 rounded-lg shadow-lg border border-hover/30 opacity-0 invisible transition-all duration-300 z-50 mt-2"
+                class="expanded-tags bg-secondary/95 backdrop-blur-sm p-3 rounded-lg shadow-lg border border-hover/30 hidden"
+                role="tooltip"
               >
                 <div class="flex flex-wrap gap-2">
                   {genreNames.slice(3).map(genre => (
@@ -102,45 +105,67 @@ const coverUrl = comic.md_comics.md_covers[0]
 </div>
 
 <script>
+  import { computePosition, flip, shift, offset } from '@floating-ui/dom';
+
   document.addEventListener('DOMContentLoaded', () => {
     const buttons = document.querySelectorAll('.expand-tags-btn');
     
     buttons.forEach(button => {
+      const comicId = button.getAttribute('data-comic-id');
+      const tooltip = document.getElementById(`tags-${comicId}`);
+      
+      if (!tooltip) return;
+
+      function updatePosition() {
+        computePosition(button, tooltip, {
+          placement: 'bottom',
+          middleware: [
+            offset(8),
+            flip(),
+            shift({ padding: 8 })
+          ],
+        }).then(({x, y}) => {
+          Object.assign(tooltip.style, {
+            left: `${x}px`,
+            top: `${y}px`,
+          });
+        });
+      }
+
+      function showTooltip() {
+        tooltip.classList.remove('hidden');
+        updatePosition();
+      }
+
+      function hideTooltip() {
+        tooltip.classList.add('hidden');
+      }
+
       button.addEventListener('click', (e) => {
         e.preventDefault();
         e.stopPropagation();
         
-        const expanded = button.getAttribute('aria-expanded') === 'true';
-        const targetId = button.getAttribute('aria-controls');
-        const expandedTags = document.getElementById(targetId);
+        const isHidden = tooltip.classList.contains('hidden');
         
-        if (expandedTags) {
-          if (!expanded) {
-            expandedTags.classList.add('opacity-100', 'visible');
-            expandedTags.classList.remove('opacity-0', 'invisible');
-            button.setAttribute('aria-expanded', 'true');
-            button.textContent = 'Show less';
-            
-            // Close when clicking outside
-            const closeHandler = (event: MouseEvent) => {
-              if (!expandedTags.contains(event.target as Node) && !button.contains(event.target as Node)) {
-                expandedTags.classList.remove('opacity-100', 'visible');
-                expandedTags.classList.add('opacity-0', 'invisible');
-                button.setAttribute('aria-expanded', 'false');
-                button.textContent = `+${expandedTags.querySelectorAll('span').length} more`;
-                document.removeEventListener('click', closeHandler);
-              }
-            };
-            
-            setTimeout(() => {
-              document.addEventListener('click', closeHandler);
-            }, 0);
-          } else {
-            expandedTags.classList.remove('opacity-100', 'visible');
-            expandedTags.classList.add('opacity-0', 'invisible');
-            button.setAttribute('aria-expanded', 'false');
-            button.textContent = `+${expandedTags.querySelectorAll('span').length} more`;
-          }
+        if (isHidden) {
+          showTooltip();
+          button.textContent = 'Show less';
+          
+          // Close when clicking outside
+          const closeHandler = (event: MouseEvent) => {
+            if (!tooltip.contains(event.target as Node) && !button.contains(event.target as Node)) {
+              hideTooltip();
+              button.textContent = `+${tooltip.querySelectorAll('span').length} more`;
+              document.removeEventListener('click', closeHandler);
+            }
+          };
+          
+          setTimeout(() => {
+            document.addEventListener('click', closeHandler);
+          }, 0);
+        } else {
+          hideTooltip();
+          button.textContent = `+${tooltip.querySelectorAll('span').length} more`;
         }
       });
     });