Sebastian Krüger
af4cc2ae48
All checks were successful
Deploy Theme / deploy (push) Successful in 14s
64 lines
2.4 KiB
Handlebars
64 lines
2.4 KiB
Handlebars
<!DOCTYPE html>
|
|
<html lang="{{@site.lang}}"
|
|
x-data="{
|
|
theme: localStorage.getItem('theme') || (window.matchMedia('(prefers-color-scheme: light)').matches ? 'light' : 'dark'),
|
|
init() {
|
|
$watch('theme', val => {
|
|
localStorage.setItem('theme', val);
|
|
document.documentElement.setAttribute('data-theme', val);
|
|
});
|
|
document.documentElement.setAttribute('data-theme', this.theme);
|
|
document.documentElement.classList.remove('hidden');
|
|
}
|
|
}"
|
|
:data-theme="theme"
|
|
class="hidden">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{{meta_title}}</title>
|
|
<link rel="stylesheet" href="{{asset "built/screen.css"}}">
|
|
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&family=Playfair+Display:wght@700&display=swap" rel="stylesheet">
|
|
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
<script src="https://unpkg.com/htmx.org@2.0.0"></script>
|
|
|
|
{{ghost_head}}
|
|
</head>
|
|
<body class="{{body_class}} font-sans antialiased" hx-boost="true">
|
|
|
|
<div class="min-h-screen flex flex-col"
|
|
x-data="{ mobileMenuOpen: false, lightboxOpen: false, lightboxImage: '' }"
|
|
@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 = img.src;
|
|
lightboxOpen = true;
|
|
}">
|
|
{{> header}}
|
|
|
|
<main class="flex-grow">
|
|
{{{body}}}
|
|
</main>
|
|
|
|
{{> footer}}
|
|
|
|
{{> mobile-menu}}
|
|
|
|
<div id="lightbox"
|
|
x-show="lightboxOpen"
|
|
x-transition
|
|
@click="lightboxOpen = false"
|
|
class="fixed inset-0 bg-black bg-opacity-80 z-50 flex items-center justify-center"
|
|
x-cloak>
|
|
<button @click.stop="lightboxOpen = false" class="absolute top-4 right-4 text-white text-3xl">×</button>
|
|
<img :src="lightboxImage" alt="Lightbox image" class="max-w-full max-h-full" @click.stop>
|
|
</div>
|
|
</div>
|
|
|
|
{{ghost_foot}}
|
|
<script src="{{asset "js/ghost-config.js"}}"></script>
|
|
<script src="{{asset "js/main.js"}}"></script>
|
|
</body>
|
|
</html>
|