From 6abfb5611df236830e38969a37d2701b5da54a43 Mon Sep 17 00:00:00 2001
From: Starbeamrainbowlabs <sbrl@starbeamrainbowlabs.com>
Date: Mon, 9 Aug 2021 21:42:22 +0100
Subject: [PATCH] CSS: support mobile devices

---
 src/css/smallscreens.css | 17 +++++++++++++++++
 src/css/theme.css        |  1 +
 2 files changed, 18 insertions(+)

diff --git a/src/css/smallscreens.css b/src/css/smallscreens.css
index e69de29..79f15d7 100644
--- a/src/css/smallscreens.css
+++ b/src/css/smallscreens.css
@@ -0,0 +1,17 @@
+@media (max-width: 768px) {
+	.post {
+		grid-template-columns: auto;
+		grid-template-rows: min(10em, 25vh) auto auto auto;
+		grid-template-areas: "image" "title" "content" "footer";
+		
+		padding: 0;
+	}
+	
+	.post > h2,
+	.post > .post-extract,
+	.post > .post-footer {
+		padding: 0 var(--margin-vertical-content);
+	}
+	
+	.post > .post-image { margin: 0; }
+}
diff --git a/src/css/theme.css b/src/css/theme.css
index 098b463..35f74a5 100644
--- a/src/css/theme.css
+++ b/src/css/theme.css
@@ -155,6 +155,7 @@ main {
 nav.pagination {
 	margin: 5em 0 0 0;
 	display: flex;
+	flex-wrap: wrap;
 	justify-content: center;
 	align-items: center;