fix(lightbox): prevent unintended activation during navigation and fix broken images

assets/css/tailwind.css

@@ -68,7 +68,7 @@ html[data-theme='light'] {
   }
 }
 
-.kg-image-card img, .post-content img {
+.kg-image-card img, .post-content img, .post-feature-image img {
     @apply cursor-pointer transition-opacity duration-200 hover:opacity-90;
 }
 

default.hbs

@@ -29,9 +29,10 @@
 
     <div class="min-h-screen flex flex-col" 
          x-data="{ mobileMenuOpen: false, lightboxOpen: false, lightboxImage: '' }"
-         @click="if ($event.target.closest('.kg-image-card img, .post-content img')) { 
+         @click="const img = $event.target.closest('.kg-image-card img, .post-content img, .post-feature-image img');
+                 if (img && img.src && !img.closest('a')) { 
                     $event.preventDefault();
-                    lightboxImage = $event.target.src; 
+                    lightboxImage = img.src; 
                     lightboxOpen = true; 
                  }">
         {{> header}}
@@ -50,7 +51,7 @@
             @click="lightboxOpen = false"
             class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center"
             x-cloak>
-            <button @click="lightboxOpen = false" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
+            <button @click.stop="lightboxOpen = false" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
             <img :src="lightboxImage" alt="Lightbox image" class="max-w-full max-h-full" @click.stop>
         </div>
     </div>

post.hbs

@@ -14,7 +14,7 @@
     </header>
 
     {{#if feature_image}}
-        <figure class="mb-12 rounded-lg overflow-hidden shadow-xl">
+        <figure class="post-feature-image mb-12 rounded-lg overflow-hidden shadow-xl">
             <img
                 class="w-full h-auto object-cover"
                 src="{{img_url feature_image size="xl"}}"