From 0c6ba5e1e4813b01611c8fcf117b1a2ff141b454 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;
+    }
+}
+