From 85a39501fbfbb5a505ee48f4702354d2e7d9b13a Mon Sep 17 00:00:00 2001
From: Luca <Luca@hackerspace-bamberg.de>
Date: Thu, 30 Mar 2023 00:34:36 +0200
Subject: [PATCH] Show images on small screens for blog posts, but not for
 regular pages

---
 assets/style.scss            | 40 ++++++++++++++++++++++++++++--------
 layouts/_default/single.html |  7 ++++---
 2 files changed, 36 insertions(+), 11 deletions(-)

diff --git a/assets/style.scss b/assets/style.scss
index 7de34d3..508c1ea 100644
--- a/assets/style.scss
+++ b/assets/style.scss
@@ -160,6 +160,7 @@ nav {
 
 article {
 	display: flex;
+	flex-direction: column;
 
 	&.preview {
 		margin-bottom: 3rem;
@@ -181,21 +182,15 @@ article {
 		}
 	}
 
-	&.page {
+	&.page, &.post {
 		& > .image {
-			display: none;
 			text-align: right;
 
 			& > img {
+				display: block;
 				height: auto;
 				width: 100%;
 			}
-
-			@media screen and (min-width: $small) {
-				display: block;
-				padding-left: 1.5em;
-				width: 60%;
-			}
 		}
 
 		& > .text {
@@ -206,6 +201,35 @@ article {
 			}
 		}
 	}
+
+	&.page > .image {
+		display: none;
+
+		@media screen and (min-width: $small) {
+			display: block;
+			padding-left: 1.5em;
+			width: 60%;
+		}
+	}
+
+	&.post {
+		& > .image {
+			margin-bottom: 1em;
+
+			@media screen and (min-width: $small) {
+				padding-left: 1.5em;
+				width: 60%;
+			}
+		}
+
+		@media screen and (min-width: $small) {
+			flex-direction: row-reverse;
+		}
+	}
+
+	@media screen and (min-width: $small) {
+		flex-direction: row;
+	}
 }
 
 a {
diff --git a/layouts/_default/single.html b/layouts/_default/single.html
index bea8c3e..aa3a526 100644
--- a/layouts/_default/single.html
+++ b/layouts/_default/single.html
@@ -1,9 +1,9 @@
 {{ define "main" }}
 <h1>{{ .Title }}</h1>
-{{ $textContent := .Content }}
+{{ $pages := .Site.GetPage "/pages" }}
+{{ $page := . }}
 {{ with .Resources.GetMatch "image.jpg" }}
-<article class="page">
-	<section class="text">{{ $textContent }}</section>
+<article class="{{ if $pages.InSection $page }}page{{ else }}post{{ end }}">
 	<section class="image">
 		<img alt="{{ .Title }}" src="{{ .RelPermalink }}">
 {{ $params := .Params }}
@@ -16,6 +16,7 @@
 {{ end }}
 {{ end }}
 	</section>
+	<section class="text">{{ $page.Content }}</section>
 </article>
 {{ else }}
 {{ .Content }}