feat: Add CSS animations and image lightbox

assets/css/tailwind.css

@@ -18,3 +18,31 @@
     @apply bg-gray-900 text-gray-100;
   }
 }
+
+@keyframes fadeInUp {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+.animate-fadeInUp {
+  animation: fadeInUp 0.5s ease-out forwards;
+}
+
+#lightbox.show {
+    animation: fadeIn 0.3s ease-out forwards;
+}

assets/js/main.js

@@ -2,6 +2,42 @@
 document.addEventListener('DOMContentLoaded', () => {
     console.log('Palina theme loaded!');
 
-    // Add any interactive JavaScript here
+    // Staggered fade-in animation for post grid
-    // For example, a simple image modal or lazy loading
+    const gridItems = document.querySelectorAll('.post-grid-item');
+    gridItems.forEach((item, index) => {
+        item.style.animationDelay = `${index * 100}ms`;
+        item.classList.add('animate-fadeInUp');
+    });
+
+    // Lightbox for post images
+    const lightbox = document.getElementById('lightbox');
+    if (lightbox) {
+        const lightboxImage = document.getElementById('lightbox-image');
+        const lightboxClose = document.getElementById('lightbox-close');
+
+        const images = document.querySelectorAll('.kg-image-card img, .post-content img');
+
+        images.forEach(image => {
+            image.style.cursor = 'pointer';
+            image.addEventListener('click', () => {
+                lightbox.classList.remove('hidden');
+                lightbox.classList.add('show');
+                lightboxImage.src = image.src;
+            });
+        });
+
+        lightboxClose.addEventListener('click', () => {
+            lightbox.classList.add('hidden');
+            lightbox.classList.remove('show');
+            lightboxImage.src = '';
+        });
+
+        lightbox.addEventListener('click', (e) => {
+            if (e.target.id !== 'lightbox-image') {
+                lightbox.classList.add('hidden');
+                lightbox.classList.remove('show');
+                lightboxImage.src = '';
+            }
+        });
+    }
 });

default.hbs

@@ -19,6 +19,11 @@
         {{> footer}}
     </div>
 
+    <div id="lightbox" class="hidden fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center">
+        <button id="lightbox-close" class="absolute top-4 right-4 text-white text-3xl">&times;</button>
+        <img id="lightbox-image" src="" alt="Lightbox image" class="max-w-full max-h-full">
+    </div>
+
     {{ghost_foot}}
     <script src="{{asset "js/main.js"}}"></script>
 </body>

index.hbs

@@ -9,7 +9,7 @@
     {{#if posts}}
         <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
             {{#foreach posts}}
-                <article class="relative bg-gray-800 rounded-lg shadow-lg overflow-hidden group">
+                <article class="post-grid-item opacity-0 relative bg-gray-800 rounded-lg shadow-lg overflow-hidden group">
                     <a href="{{url}}" class="block">
                         {{#if feature_image}}
                             <img