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
-    // For example, a simple image modal or lazy loading
+    // Staggered fade-in animation for post grid
+    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 = '';
+            }
+        });
+    }
 });