Fav added

Author: moneuron

assets/gallery.css

@@ -81,34 +81,20 @@ a:focus {
     }
 }
 
-/* Merged desc styles */
-.desc {
-    padding: 15px;
-    font-size: 0.9rem;
-    color: #333;
-    text-align: center;
-    width: 100%;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-}
-
-/* Tag overlay */
 .tag {
-    position: absolute;
-    top: 8px;
-    left: 8px; /* use right: 8px; if you prefer top-right */
+    display: inline-block;
     font-size: 0.7rem;
     font-weight: 600;
-    padding: 3px 8px;
+    padding: 2px 8px;
+    margin-left: 8px;
     border-radius: 999px;
-    background-color: rgba(0, 0, 0, 0.7);
-    color: #fff;
-    pointer-events: none; /* ensures clicks pass through */
+    background-color: #eee;
+    color: #333;
+    vertical-align: middle;
 }
 
 /* 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.game { background-color: #ef9a9a; color: #000; }  /* Games */
+.tag.game { background-color: #a5d6a7; color: #000; }  /* Games */

fav.html

@@ -32,33 +32,37 @@
     <div class="gallery">
         <a target="_blank" href="https://www.imdb.com/title/tt3032476">
             <img src="assets/fav_tnails/better.webp" alt="Better Call Saul">
-            <span class="tag tv">TV</span>
         </a>
-        <div class="desc">Better Call Saul</div>
+        <div class="desc">Better Call Saul
+            <span class="tag tv">TV</span>
+        </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</div>
+        <div class="desc">Essentialism
+            <span class="tag book">Book</span>
+        </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">
-            <span class="tag movie">Movie</span>
         </a>
-        <div class="desc">The Grand Budapest Hotel</div>
+        <div class="desc">The Grand Budapest Hotel
+            <span class="tag movie">Movie</span>
+        </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">
-            <span class="tag game">Game</span>
         </a>
-        <div class="desc">Horizon Zero Dawn</div>
+        <div class="desc">Horizon Zero Dawn
+            <span class="tag game">Game</span>
+        </div>
     </div>
 
 </div>