assets/_gallery.scss

@@ -8,8 +8,6 @@
 
 	a {
 		&.blur-on-hover {
-			overflow: hidden;
-
 			&:hover img {
 				filter: blur(5px);
 				transform: scale(120%);
@@ -20,6 +18,10 @@
 			}
 		}
 
+		img {
+			display: block;
+		}
+
 		p {
 			background: rgba($color-overlay, 0.9);
 			color: $color-overlay-text;
@@ -32,9 +34,24 @@
 	}
 
 	img {
-		display: block;
+		&.landscape {
+			height: 100%;
+			width: auto;
+		}
+
+		&.portrait {
+			height: auto;
+			width: 100%;
+		}
+	}
+
+	.image {
+		align-items: center;
+		display: flex;
 		height: 280px;
-		object-fit: cover;
+		justify-content: center;
+		max-height: 280px;
 		width: 280px;
+		overflow: hidden;
 	}
 }

assets/style.scss

@@ -31,18 +31,15 @@ body {
 }
 
 header, footer {
-	padding: 1rem;
+	padding: 0 1rem;
 }
 
 header {
 	align-items: center;
-	background: $color-background;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	position: sticky;
+	margin-top: 1rem;
-	top: 0;
-	z-index: 1;
 
 	a img {
 		display: block;
@@ -92,7 +89,7 @@ header {
 }
 
 main {
-	padding: 0 1rem;
+	padding: 1rem;
 
 	& > :last-child {
 		margin-bottom: 0 !important;
@@ -103,13 +100,17 @@ main {
 	}
 }
 
-footer nav {
+footer {
+	margin-bottom: 1rem;
+
+	nav {
 		align-items: end;
 
 		@media screen and (min-width: $small) {
 			align-items: normal;
 			justify-content: end;
 		}
+	}
 }
 
 nav {
@@ -128,7 +129,7 @@ nav {
 	}
 
 	&.pagination {
-		margin-bottom: 3rem;
+		margin-top: 2.5em;
 
 		:first-child {
 			margin: 0;
@@ -157,21 +158,36 @@ nav {
 article {
 	display: flex;
 
-	&.preview {
+	& > .image {
-		margin-bottom: 3rem;
+		display: none;
 
 		& > img {
-			display: none;
+			height: auto;
-			height: 200px;
+			width: 100%;
-			margin-right: 1.5rem;
+		}
-			min-width: 200px;
-			object-fit: cover;
 
 		@media screen and (min-width: $small) {
 			display: block;
 		}
 	}
 
+	&.preview {
+		margin-bottom: 3rem;
+
+		& > .image {
+			align-items: center;
+			height: 200px;
+			justify-content: center;
+			min-width: 200px;
+			overflow: hidden;
+			margin-right: 1.5rem;
+			width: 200px;
+
+			@media screen and (min-width: $small) {
+				display: flex;
+			}
+		}
+
 		& > .text {
 			flex-grow: 1;
 		}
@@ -179,16 +195,9 @@ 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%;
 			}

config.toml

@@ -4,9 +4,6 @@ languageCode = 'de-de'
 paginate = 3
 title = 'kontakt – Das Kulturprojekt'
 
-[imaging]
-  resampleFilter = "Lanczos"
-
 [menu]
   [[menu.footer]]
     name = "Impressum"

layouts/galerie/section.html

@@ -5,7 +5,7 @@
 {{ range .Pages }}
 	<a class="blur-on-hover" href="{{ .RelPermalink }}">
 {{ with index (.Resources.ByType "image") 0 }}
-		<img alt="{{ .Title }}" src="{{ (.Fill "560x560").RelPermalink }}">
+		<div class="image"><img alt="{{ .Title }}" class="{{ if lt .Height .Width }}landscape{{ else }}portrait{{ end }}" src="{{ .RelPermalink }}"></div>
 {{ end }}
 		<p>{{ .Title }}</p>
 	</a>

layouts/galerie/single.html

@@ -3,7 +3,7 @@
 {{ .Content }}
 <section class="gallery">
 {{ range .Resources.ByType "image" }}
-	<img alt="{{ .Title }}" src="{{ (.Fill "560x560").RelPermalink }}">
+	<div class="image"><img alt="{{ .Title }}" class="{{ if lt .Height .Width }}landscape{{ else }}portrait{{ end }}" src="{{ .RelPermalink }}"></div>
 {{ end }}
 </section>
 {{ end }}

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" }}
-	<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
+	<section class="image"><img alt="{{ .Title }}" src="{{ .RelPermalink }}"></section>
 {{ 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 }}
-		<img alt="{{ .Title }}" src="{{ (.Fill "560x560").RelPermalink }}">
+		<div class="image"><img alt="{{ .Title }}" class="{{ if lt .Height .Width }}landscape{{ else }}portrait{{ end }}" src="{{ .RelPermalink }}"></div>
 {{ end }}
 		<p>{{ .Title }}</p>
 	</a>