Frank Schwenk
dec74a46d7
On-demand ?w= resize with a disk cache under webcache/; downloads stay full-resolution. Co-authored-by: Cursor <cursoragent@cursor.com>
64 lines
1.8 KiB
HTML
64 lines
1.8 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<title>{% block title %}{{ site_title }}{% endblock %}</title>
|
|
<link rel="stylesheet" href="/static/style.css">
|
|
</head>
|
|
<body>
|
|
<header class="site-header">
|
|
<a class="brand" href="/">{{ site_title }}</a>
|
|
</header>
|
|
<main>
|
|
{% block content %}{% endblock %}
|
|
</main>
|
|
|
|
<div id="lightbox" class="lightbox" hidden>
|
|
<button type="button" class="lightbox-close" aria-label="Schliessen">×</button>
|
|
<img id="lightbox-img" alt="">
|
|
</div>
|
|
|
|
<script>
|
|
(function () {
|
|
var box = document.getElementById("lightbox");
|
|
var img = document.getElementById("lightbox-img");
|
|
if (!box || !img) return;
|
|
|
|
function openLightbox(src, alt) {
|
|
img.src = src;
|
|
img.alt = alt || "";
|
|
box.hidden = false;
|
|
document.body.classList.add("lightbox-open");
|
|
}
|
|
|
|
function closeLightbox() {
|
|
box.hidden = true;
|
|
img.removeAttribute("src");
|
|
document.body.classList.remove("lightbox-open");
|
|
}
|
|
|
|
document.addEventListener("click", function (e) {
|
|
var target = e.target;
|
|
if (!(target instanceof HTMLImageElement)) return;
|
|
if (!target.classList.contains("lightboxable")) return;
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
var full = target.getAttribute("data-full-src");
|
|
openLightbox(full || target.currentSrc || target.src, target.alt);
|
|
});
|
|
|
|
box.addEventListener("click", function (e) {
|
|
if (e.target === box || (e.target && e.target.classList.contains("lightbox-close"))) {
|
|
closeLightbox();
|
|
}
|
|
});
|
|
|
|
document.addEventListener("keydown", function (e) {
|
|
if (e.key === "Escape" && !box.hidden) closeLightbox();
|
|
});
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|