From 4544836871b6af046eac7509ee24f2e50d1ffe67 Mon Sep 17 00:00:00 2001
From: Emil Miler <em@0x45.cz>
Date: Tue, 6 Sep 2022 11:45:23 +0200
Subject: [PATCH] Zoom a box-shadow na :hover receptu

---
 sass/style.scss       | 19 ++++++++++++++++++-
 templates/macros.html |  2 +-
 2 files changed, 19 insertions(+), 2 deletions(-)

diff --git a/sass/style.scss b/sass/style.scss
index 1dc4cd1..fdbb22b 100644
--- a/sass/style.scss
+++ b/sass/style.scss
@@ -138,9 +138,13 @@ main {
 			overflow:hidden;
 			box-sizing:border-box;
 			width:100%;
+			box-shadow: none;
+			transition: box-shadow .15s ease;
 
 			&:hover {
-				color:$anchor-hover-color;
+				box-shadow: 0 0 8px #888;
+				a { color: inherit }
+				.image { background-size: 110% }
 			}
 
 			a {
@@ -150,6 +154,19 @@ main {
 				color: $article-color;
 			}
 
+			.image {
+				position: relative;
+				width: 100%;
+				background-size: 100%;
+				background-position: center;
+				transition: background-size .15s ease;
+			}
+			.image:before {
+				content: "";
+				float: left;
+				padding-top: 100%;
+			}
+
 			.title {
 				margin: 1em .8em .5em .8em;
 				text-align: center;
diff --git a/templates/macros.html b/templates/macros.html
index b25bb4f..4b82e94 100644
--- a/templates/macros.html
+++ b/templates/macros.html
@@ -18,7 +18,7 @@
 			{% endif %}
 		{% endfor %}
 		{% set image = resize_image(path=image, width=300, height=300, op="fill") %}
-		<img src="{{ image.url }}" alt="{{ recipe.title }}">
+		<div class="image" style="background-image: url('{{ image.url }}')"></div>
 		<div class="title">{{ recipe.title }}</div>
 		{% if recipe.date %}<span class="date">{{ recipe.date | date(format="%d.%m.%Y") }}</span>{% endif %}
 	</a>