From db79aae55f7c9fc92e644cf3282a0f28247d1da2 Mon Sep 17 00:00:00 2001
From: Luca <Luca@hackerspace-bamberg.de>
Date: Sun, 12 Mar 2023 20:20:24 +0100
Subject: [PATCH] Use object-fit property instead of container element

---
 assets/_gallery.scss         | 25 ++++---------------------
 assets/style.scss            | 32 ++++++++++++--------------------
 layouts/galerie/section.html |  2 +-
 layouts/galerie/single.html  |  2 +-
 layouts/index.html           |  4 ++--
 5 files changed, 20 insertions(+), 45 deletions(-)

diff --git a/assets/_gallery.scss b/assets/_gallery.scss
index a8a16bd..fd34d9e 100644
--- a/assets/_gallery.scss
+++ b/assets/_gallery.scss
@@ -8,6 +8,8 @@
 
 	a {
 		&.blur-on-hover {
+			overflow: hidden;
+
 			&:hover img {
 				filter: blur(5px);
 				transform: scale(120%);
@@ -18,10 +20,6 @@
 			}
 		}
 
-		img {
-			display: block;
-		}
-
 		p {
 			background: rgba($color-overlay, 0.9);
 			color: $color-overlay-text;
@@ -34,24 +32,9 @@
 	}
 
 	img {
-		&.landscape {
-			height: 100%;
-			width: auto;
-		}
-
-		&.portrait {
-			height: auto;
-			width: 100%;
-		}
-	}
-
-	.image {
-		align-items: center;
-		display: flex;
+		display: block;
 		height: 280px;
-		justify-content: center;
-		max-height: 280px;
+		object-fit: cover;
 		width: 280px;
-		overflow: hidden;
 	}
 }
diff --git a/assets/style.scss b/assets/style.scss
index 4a365aa..29a308c 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -158,33 +158,18 @@ nav {
 article {
 	display: flex;
 
-	& > .image {
-		display: none;
-
-		& > img {
-			height: auto;
-			width: 100%;
-		}
-
-		@media screen and (min-width: $small) {
-			display: block;
-		}
-	}
-
 	&.preview {
 		margin-bottom: 3rem;
 
-		& > .image {
-			align-items: center;
+		& > img {
+			display: none;
 			height: 200px;
-			justify-content: center;
-			min-width: 200px;
-			overflow: hidden;
 			margin-right: 1.5rem;
-			width: 200px;
+			min-width: 200px;
+			object-fit: cover;
 
 			@media screen and (min-width: $small) {
-				display: flex;
+				display: block;
 			}
 		}
 
@@ -195,9 +180,16 @@ article {
 
 	&.page {
 		& > .image {
+			display: none;
 			text-align: right;
 
+			& > img {
+				height: auto;
+				width: 100%;
+			}
+
 			@media screen and (min-width: $small) {
+				display: block;
 				padding-left: 1.5em;
 				width: 60%;
 			}
diff --git a/layouts/galerie/section.html b/layouts/galerie/section.html
index 0b77c2a..1b73648 100644
--- a/layouts/galerie/section.html
+++ b/layouts/galerie/section.html
@@ -5,7 +5,7 @@
 {{ range .Pages }}
 	<a class="blur-on-hover" href="{{ .RelPermalink }}">
 {{ with index (.Resources.ByType "image") 0 }}
-		<div class="image"><img alt="{{ .Title }}" class="{{ if lt .Height .Width }}landscape{{ else }}portrait{{ end }}" src="{{ .RelPermalink }}"></div>
+		<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ end }}
 		<p>{{ .Title }}</p>
 	</a>
diff --git a/layouts/galerie/single.html b/layouts/galerie/single.html
index dcc969d..19a372d 100644
--- a/layouts/galerie/single.html
+++ b/layouts/galerie/single.html
@@ -3,7 +3,7 @@
 {{ .Content }}
 <section class="gallery">
 {{ range .Resources.ByType "image" }}
-	<div class="image"><img alt="{{ .Title }}" class="{{ if lt .Height .Width }}landscape{{ else }}portrait{{ end }}" src="{{ .RelPermalink }}"></div>
+	<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ end }}
 </section>
 {{ end }}
diff --git a/layouts/index.html b/layouts/index.html
index f8d481e..5b80d5f 100644
--- a/layouts/index.html
+++ b/layouts/index.html
@@ -6,7 +6,7 @@
 <p class="date">{{ .Date | dateFormat "Mon, 02. January 2006" }}</p>
 <article class="preview">
 {{ with .Resources.GetMatch "image.jpg" }}
-	<section class="image"><img alt="{{ .Title }}" src="{{ .RelPermalink }}"></section>
+	<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ end }}
 	<section class="text">
 		<h2><a href="{{ .RelPermalink }}">{{ .Title }}</a></h2>
@@ -31,7 +31,7 @@
 {{ range first 4 (.Site.GetPage "/galerie").Pages }}
 	<a class="blur-on-hover" href="{{ .RelPermalink }}">
 {{ with index (.Resources.ByType "image") 0 }}
-		<div class="image"><img alt="{{ .Title }}" class="{{ if lt .Height .Width }}landscape{{ else }}portrait{{ end }}" src="{{ .RelPermalink }}"></div>
+		<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ end }}
 		<p>{{ .Title }}</p>
 	</a>