Make main menu stick to top

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;
 	}
 }

assets/style.scss

@@ -31,15 +31,18 @@ body {
 }
 
 header, footer {
-	padding: 0 1rem;
+	padding: 1rem;
 }
 
 header {
 	align-items: center;
+	background: $color-background;
 	display: flex;
 	flex-wrap: wrap;
 	justify-content: space-between;
-	margin-top: 1rem;
+	position: sticky;
+	top: 0;
+	z-index: 1;
 
 	a img {
 		display: block;
@@ -89,7 +92,7 @@ header {
 }
 
 main {
-	padding: 1rem;
+	padding: 0 1rem;
 
 	& > :last-child {
 		margin-bottom: 0 !important;
@@ -100,17 +103,13 @@ main {
 	}
 }
 
-footer {
-	margin-bottom: 1rem;
-
-	nav {
+footer nav {
 	align-items: end;
 
 	@media screen and (min-width: $small) {
 		align-items: normal;
 		justify-content: end;
 	}
-	}
 }
 
 nav {
@@ -129,7 +128,7 @@ nav {
 	}
 
 	&.pagination {
-		margin-top: 2.5em;
+		margin-bottom: 3rem;
 
 		:first-child {
 			margin: 0;
@@ -158,33 +157,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 +179,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%;
 			}

config.toml

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

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="{{ (.Fill "560x560").RelPermalink }}">
 {{ 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" }}
-	<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="{{ (.Fill "560x560").RelPermalink }}">
 {{ end }}
 		<p>{{ .Title }}</p>
 	</a>