palina-theme/assets/js/main.js

// Main JavaScript file for Palina theme
document.addEventListener('DOMContentLoaded', () => {
    console.log('Palina theme loaded!');

    // 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 = '';
            }
        });
    }
});