valknar/palina-theme
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: completely remove lightbox feature
All checks were successful
Deploy Theme / deploy (push) Successful in 15s
Details

Browse Source
This commit is contained in:
Sebastian Krüger
2026-02-19 18:40:49 +01:00
parent dd9bad935e
commit c8f731a353
4 changed files with 1 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
assets/css/tailwind.css
View File

@@ -68,10 +68,6 @@ html[data-theme='light'] {
} }
} }
.kg-image-card img, .post-content img, .post-feature-image img {
@apply cursor-pointer transition-opacity duration-200 hover:opacity-90;
}
@keyframes fadeInUp { @keyframes fadeInUp {
from { from {
opacity: 0; opacity: 0;
@@ -83,20 +79,7 @@ html[data-theme='light'] {
} }
} }
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.animate-fadeInUp { .animate-fadeInUp {
animation: fadeInUp 0.5s ease-out forwards; animation: fadeInUp 0.5s ease-out forwards;
} }
#lightbox.show {
animation: fadeIn 0.3s ease-out forwards;
}

14
default.hbs
View File

@@ -3,8 +3,6 @@
x-data="{ x-data="{
theme: localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'), theme: localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'),
mobileMenuOpen: false, mobileMenuOpen: false,
lightboxOpen: false,
lightboxImage: '',
init() { init() {
$watch('theme', val => { $watch('theme', val => {
localStorage.setItem('theme', val); localStorage.setItem('theme', val);
@@ -12,19 +10,8 @@
}); });
document.documentElement.setAttribute('data-theme', this.theme); document.documentElement.setAttribute('data-theme', this.theme);
document.documentElement.classList.remove('hidden'); document.documentElement.classList.remove('hidden');
},
handleGlobalClick(e) {
if (this.lightboxOpen && e.target.closest('#lightbox')) return;
const img = e.target.closest('img');
if (img && img.src && !img.closest('a') && img.closest('.kg-image-card, .post-content, .post-feature-image')) {
e.preventDefault();
this.lightboxImage = img.src;
this.lightboxOpen = true;
}
} }
}" }"
@click.window="handleGlobalClick($event)"
:data-theme="theme" :data-theme="theme"
class="hidden"> class="hidden">
<head> <head>
@@ -51,7 +38,6 @@
{{> footer}} {{> footer}}
{{> mobile-menu}} {{> mobile-menu}}
{{> lightbox}}
</div> </div>
{{ghost_foot}} {{ghost_foot}}

26
partials/lightbox.hbs
View File

@@ -1,26 +0,0 @@
<div id="lightbox"
x-show="lightboxOpen"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0"
x-transition:enter-end="opacity-100"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100"
x-transition:leave-end="opacity-0"
@click="lightboxOpen = false"
@keydown.escape.window="lightboxOpen = false"
class="fixed inset-0 bg-black/90 z-50 flex items-center justify-center p-4"
x-cloak>
<button @click.stop="lightboxOpen = false"
class="absolute top-6 right-6 text-white/70 hover:text-white transition-colors duration-200 z-50">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor" class="w-10 h-10">
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
</svg>
</button>
<div class="relative max-w-7xl max-h-full flex items-center justify-center" @click.stop>
<img :src="lightboxImage"
alt="Lightbox image"
class="max-w-full max-h-[90vh] object-contain shadow-2xl rounded-sm">
</div>
</div>

2
post.hbs
View File

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