From df72105d085850fe3d85c17cd32ac169289e2e1b Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Wed, 8 Nov 2023 11:00:57 +0100
Subject: [PATCH] =?UTF-8?q?Zv=C4=9Bt=C5=A1ov=C3=A1n=C3=AD=20n=C3=A1hledov?=
 =?UTF-8?q?=C3=BDch=20obr=C3=A1zk=C5=AF?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 sass/_lightbox.scss   | 45 +++++++++++++++++++++++++++++++++++++++++++
 sass/style.scss       |  2 ++
 templates/macros.html |  3 ++-
 templates/page.html   |  5 +++++
 4 files changed, 54 insertions(+), 1 deletion(-)
 create mode 100644 sass/_lightbox.scss

diff --git a/sass/_lightbox.scss b/sass/_lightbox.scss
new file mode 100644
index 0000000..c3dbf61
--- /dev/null
+++ b/sass/_lightbox.scss
@@ -0,0 +1,45 @@
+.lightbox {
+	display: none;
+
+	position: fixed;
+	z-index: 999;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	padding: 1em 0;
+
+	background: rgba(0, 0, 0, 0.8);
+	cursor: pointer;
+
+	&.visible {
+		display: block;
+		animation: fade-in .3s ease-out;
+
+		div { animation: zoom-in .2s ease-out }
+	}
+
+	div {
+		display: block;
+		width: 100%;
+		height: 100%;
+		max-width: 1500px;
+		margin: 0 auto;
+
+		background-position: center;
+		background-repeat: no-repeat;
+		background-size: contain;
+	}
+}
+
+// Keyframes have to be used, because transition
+// does not work with `display: none`
+@keyframes fade-in {
+	0% { display: none; opacity: 0 }
+	1% { display: block; opacity: 0 }
+	100% { display: block; opacity: 1 }
+}
+@keyframes zoom-in {
+	0% { transform: scale(.5) }
+	100% { transform: scale(1) }
+}
diff --git a/sass/style.scss b/sass/style.scss
index d4dfbf1..3b68ae7 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -5,6 +5,7 @@
 @import "tags";
 @import "tables";
 @import "fonts";
+@import "lightbox";
 
 
 *, *:before, *:after {
@@ -68,6 +69,7 @@ main {
 			margin:0 auto 2em auto;
 			border-radius:5px;
 			border:1px solid $border;
+			cursor: pointer;
 		}
 	
 		h2 { margin: 0.85em 0 }
diff --git a/templates/macros.html b/templates/macros.html
index a33f3dd..f880b52 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -71,7 +71,8 @@
 	{% for asset in page.assets %}
 		{% if asset is matching("[img.](jpg|png)$") %}
 			{% set image = resize_image(path=asset, width=900, height=400, op="fill") %}
-			<a href="{{ get_url(path=asset) }}"><img src="{{ image.url }}" alt="Náhled"></a>
+			<img src="{{ image.url }}" alt="Náhled" id="preview-image">
+			<div id="fullsize-image" class="lightbox"><div style="background-image:url('{{ get_url(path=asset) }}')"></div></div>
 			{% break %}
 		{% endif %}
 	{% endfor %}
diff --git a/templates/page.html b/templates/page.html
index a6d6378..161e88e 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -26,5 +26,10 @@
 	for(let i=0; i<list_items.length; i++){
 		list_items[i].addEventListener('click', function(){ this.classList.toggle("completed"); }, false);
 	}
+
+	let preview_image = document.getElementById('preview-image');
+	let fullsize_image = document.getElementById('fullsize-image');
+	preview_image.addEventListener('click', function(){ fullsize_image.classList.add("visible"); }, false);
+	fullsize_image.addEventListener('click', function(){ fullsize_image.classList.remove("visible"); }, false);
 </script>
 {% endblock script %}