Fav added

Author: moneuron

assets/gallery.css

@@ -81,23 +81,25 @@ a:focus {
     }
 }
 
+/* Tag overlay */
 .tag {
-    display: inline-block;
+    position: absolute;
+    top: 8px;
+    left: 8px; /* use right: 8px; if you prefer top-right */
     font-size: 0.7rem;
     font-weight: 600;
-    padding: 2px 8px;
-    margin-left: 8px;
+    padding: 3px 8px;
     border-radius: 999px;
-    background-color: #eee;
-    color: #333;
-    vertical-align: middle;
+    background-color: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    pointer-events: none; /* ensures clicks pass through */
 }
 
 /* Optional: category-specific colors */
 .tag.tv { background-color: #ffd54f; color: #000; }     /* TV shows */
+.tag.movie { background-color: #ffd54f; color: #000; } /* Movies */
 .tag.book { background-color: #81d4fa; color: #000; }  /* Books */
-.tag.movie { background-color: #ef9a9a; color: #000; } /* Movies */
-.tag.game { background-color: #a5d6a7; color: #000; }  /* Games */
+.tag.game { background-color: #ef9a9a; color: #000; }  /* Games */
 
 .desc {
     width: 100%;

fav.html

@@ -32,37 +32,33 @@
     <div class="gallery">
         <a target="_blank" href="https://www.imdb.com/title/tt3032476">
             <img src="assets/fav_tnails/better.webp" alt="Better Call Saul">
-        </a>
-        <div class="desc">Better Call Saul
             <span class="tag tv">TV</span>
-        </div>
+        </a>
+        <div class="desc">Better Call Saul</div>
     </div>
 
     <div class="gallery">
         <a target="_blank" href="https://www.goodreads.com/book/show/19776547-essentialism">
             <img src="assets/fav_tnails/essentialism.webp" alt="Essentialism">
+            <span class="tag book">Book</span>            
         </a>
-        <div class="desc">Essentialism
-            <span class="tag book">Book</span>
-        </div>
+        <div class="desc">Essentialism</div>
     </div>
 
     <div class="gallery">
         <a target="_blank" href="https://www.imdb.com/title/tt2278388">
             <img src="assets/fav_tnails/grand.webp" alt="The Grand Budapest Hotel">
-        </a>
-        <div class="desc">The Grand Budapest Hotel
             <span class="tag movie">Movie</span>
-        </div>
+        </a>
+        <div class="desc">The Grand Budapest Hotel</div>
     </div>
 
         <div class="gallery">
         <a target="_blank" href="https://store.steampowered.com/app/1151640/Horizon_Zero_Dawn_Complete_Edition/">
             <img src="assets/fav_tnails/horizon.webp" alt="Horizon Zero Dawn">
-        </a>
-        <div class="desc">Horizon Zero Dawn
             <span class="tag game">Game</span>
-        </div>
+        </a>
+        <div class="desc">Horizon Zero Dawn</div>
     </div>
 
 </div>