From 5f75567246258f129d330c0f6447b4155b69f0a7 Mon Sep 17 00:00:00 2001
From: Luca <Luca@hackerspace-bamberg.de>
Date: Sun, 12 Mar 2023 00:13:25 +0100
Subject: [PATCH] Add gallery

---
 assets/_colors.scss          | 10 ++++---
 assets/_gallery.scss         | 57 ++++++++++++++++++++++++++++++++++++
 assets/style.scss            | 16 ++++------
 content/_index.md            |  2 --
 content/galerie/_index.md    |  7 +++++
 layouts/galerie/section.html | 14 +++++++++
 layouts/galerie/single.html  |  9 ++++++
 layouts/index.html           | 12 ++++++++
 8 files changed, 111 insertions(+), 16 deletions(-)
 create mode 100644 assets/_gallery.scss
 create mode 100644 content/galerie/_index.md
 create mode 100644 layouts/galerie/section.html
 create mode 100644 layouts/galerie/single.html

diff --git a/assets/_colors.scss b/assets/_colors.scss
index 0c7a066..96f0aeb 100644
--- a/assets/_colors.scss
+++ b/assets/_colors.scss
@@ -1,4 +1,6 @@
-$color-background:  #fff;
-$color-burger:      #231f20;
-$color-link:        #000;
-$color-text:        #000;
+$color-background:    #fff;
+$color-burger:        #231f20;
+$color-link:          #000;
+$color-overlay:       #231f20;
+$color-overlay-text:  #fff;
+$color-text:          #000;
diff --git a/assets/_gallery.scss b/assets/_gallery.scss
new file mode 100644
index 0000000..a8a16bd
--- /dev/null
+++ b/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;
+	}
+}
diff --git a/assets/style.scss b/assets/style.scss
index 2b55038..4a365aa 100644
--- a/assets/style.scss
+++ b/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;
 
diff --git a/content/_index.md b/content/_index.md
index 49aa3e6..24b4994 100644
--- a/content/_index.md
+++ b/content/_index.md
@@ -7,5 +7,3 @@ menu:
 
 ![kontakt – Das Kulturfestival (Symbolbild)](/symbolbild.jpg)
 by [ChrisU](https://instagram.com/chrisu_photography)
-
-# Aktuelles
diff --git a/content/galerie/_index.md b/content/galerie/_index.md
new file mode 100644
index 0000000..fbc7f9f
--- /dev/null
+++ b/content/galerie/_index.md
@@ -0,0 +1,7 @@
+---
+title: Galerie
+menu:
+  main:
+    weight: 40
+---
+
diff --git a/layouts/galerie/section.html b/layouts/galerie/section.html
new file mode 100644
index 0000000..0b77c2a
--- /dev/null
+++ b/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 }}
diff --git a/layouts/galerie/single.html b/layouts/galerie/single.html
new file mode 100644
index 0000000..dcc969d
--- /dev/null
+++ b/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 }}
diff --git a/layouts/index.html b/layouts/index.html
index afaf639..a495217 100644
--- a/layouts/index.html
+++ b/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 }}