From 22023e63eed3b41eea223ced73dc1883d978d9d1 Mon Sep 17 00:00:00 2001
From: supakeen <cmdr@supakeen.com>
Date: Sat, 5 Mar 2022 12:58:37 +0100
Subject: [PATCH] Add media queries for larger screens.

It is hard for people to keep track of very wide pages (and
sentences), with these mediaqueries the width of the site is limited on
screens that are wider than a 1000, or 1400 pixels.
---
 public/css/style.css | 20 ++++++++++++++++++++
 src/css/style.css    | 20 ++++++++++++++++++++
 2 files changed, 40 insertions(+)

diff --git a/public/css/style.css b/public/css/style.css
index 2a1ba2e..04d482d 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -91,3 +91,23 @@ footer {
 .linkSpacer {
 	margin: 0 .5em;
 }
+
+@media only screen and (max-width: 1000px) {
+    body {
+        width: 100%;
+        padding: 0 1rem;
+    }
+}
+
+@media only screen and (min-width: 1000px) {
+    body {
+        width: 80%;
+    }
+}
+
+@media only screen and (min-width: 1400px) {
+    body {
+        width: 60rem;
+    }
+}
+
diff --git a/src/css/style.css b/src/css/style.css
index be08768..c2402d9 100644
--- a/src/css/style.css
+++ b/src/css/style.css
@@ -96,3 +96,23 @@ footer {
 .linkSpacer {
 	margin: 0 .5em;
 }
+
+@media only screen and (max-width: 1000px) {
+    body {
+        width: 100%;
+        padding: 0 1rem;
+    }
+}
+
+@media only screen and (min-width: 1000px) {
+    body {
+        width: 80%;
+    }
+}
+
+@media only screen and (min-width: 1400px) {
+    body {
+        width: 60rem;
+    }
+}
+