Add gallery

assets/_colors.scss

@@ -1,4 +1,6 @@
 $color-background:    #fff;
 $color-burger:        #231f20;
 $color-link:          #000;
+$color-overlay:       #231f20;
+$color-overlay-text:  #fff;
 $color-text:          #000;

assets/_gallery.scss

@@ -0,0 +1,57 @@
+@import 'breakpoints';
+@import 'colors';
+
+.gallery {
+	display: flex;
+	flex-wrap: wrap;
+	gap: 1rem;
+
+	a {
+		&.blur-on-hover {
+			&:hover img {
+				filter: blur(5px);
+				transform: scale(120%);
+			}
+
+			img {
+				transition: all 500ms;
+			}
+		}
+
+		img {
+			display: block;
+		}
+
+		p {
+			background: rgba($color-overlay, 0.9);
+			color: $color-overlay-text;
+			margin-bottom: 0;
+			padding: 0.5em 1em;
+			position: absolute;
+			transform: translateY(-100%);
+			width: 280px;
+		}
+	}
+
+	img {
+		&.landscape {
+			height: 100%;
+			width: auto;
+		}
+
+		&.portrait {
+			height: auto;
+			width: 100%;
+		}
+	}
+
+	.image {
+		align-items: center;
+		display: flex;
+		height: 280px;
+		justify-content: center;
+		max-height: 280px;
+		width: 280px;
+		overflow: hidden;
+	}
+}

assets/style.scss

@@ -1,6 +1,7 @@
 @import 'breakpoints';
 @import 'colors';
 @import 'fonts';
+@import 'gallery';
 
 * {
 	box-sizing: border-box;
@@ -8,13 +9,17 @@
 	padding: 0;
 }
 
+:root {
+	font-size: 16px;
+}
+
 body {
 	background: $color-background;
 	color: $color-text;
 	display: flex;
 	flex-direction: column;
 	font-family: "Maven Pro", sans-serif;
-	font-size: 18px;
+	font-size: 1.125rem;
 	line-height: 1.5;
 	margin: 0 auto;
 	max-width: $large;
@@ -236,15 +241,6 @@ hr {
 	margin: 3em 0;
 }
 
-.blur-on-hover {
-	transition: all 500ms;
-
-	&:hover {
-		filter: blur(5px);
-		transform: scale(120%);
-	}
-}
-
 .date {
 	margin-bottom: 0;
 

content/_index.md

@@ -7,5 +7,3 @@ menu:
 
 ![kontakt – Das Kulturfestival (Symbolbild)](/symbolbild.jpg)
 by [ChrisU](https://instagram.com/chrisu_photography)
-
-# Aktuelles

content/galerie/_index.md

@@ -0,0 +1,7 @@
+---
+title: Galerie
+menu:
+  main:
+    weight: 40
+---
+

layouts/galerie/section.html

@@ -0,0 +1,14 @@
+{{ define "main" }}
+<h1>{{ .Title }}</h1>
+{{ .Content }}
+<section class="gallery">
+{{ 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>
+{{ end }}
+		<p>{{ .Title }}</p>
+	</a>
+{{ end }}
+</section>
+{{ end }}

layouts/galerie/single.html

@@ -0,0 +1,9 @@
+{{ define "main" }}
+<h1>{{ .Title }}</h1>
+{{ .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>
+{{ end }}
+</section>
+{{ end }}

layouts/index.html

@@ -1,5 +1,6 @@
 {{ define "main" }}
 {{ .Content }}
+<h1 id="aktuelles">Aktuelles</h1>
 {{ $pagination := .Paginate .RegularPages }}
 {{ $days := dict "Monday" "Mo" "Tuesday" "Di" "Wednesday" "Mi" "Thursday" "Do" "Friday" "Fr" "Saturday" "Sa" "Sunday" "So" }}
 {{ $months := dict "January" "Januar" "February" "Februar" "March" "März" "April" "April" "May" "Mai" "June" "Juni" "July" "Juli" "August" "August" "September" "September" "October" "Oktober" "November" "November" "December" "Dezember" }}
@@ -27,4 +28,15 @@
 </nav>
 {{ end }}
 {{ end }}
+<h1 id="galerie">Galerie</h1>
+<section class="gallery">
+{{ 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>
+{{ end }}
+		<p>{{ .Title }}</p>
+	</a>
+{{ end }}
+</section>
 {{ end }}