From 5efdb262cb99a457167a5b5b33f36646bf18dbc2 Mon Sep 17 00:00:00 2001
From: BodgeMaster <>
Date: Tue, 16 Apr 2024 09:44:28 +0200
Subject: [PATCH] style: Attempt to make the design more responsive

This should help with small viewports, for example on mobile.
The desktop layout, while suboptimal, should have worked with mobile
devices but some browsers don't display things properly.
---
 html_resources/style.css | 33 ++++++++++++++++++++++++++++++---
 1 file changed, 30 insertions(+), 3 deletions(-)

diff --git a/html_resources/style.css b/html_resources/style.css
index 4514208..0b233bb 100644
--- a/html_resources/style.css
+++ b/html_resources/style.css
@@ -15,9 +15,15 @@ html {
 
 body {
   margin: 0 auto;
-  width: 90%;
+  width: 100%;
   min-height: 100%;
 }
+@media screen and (min-width: 48rem) {
+  body {
+    width: 90%;
+  }
+}
+
 
 /* TODO: media query, use entire width on small viewports */
 
@@ -42,12 +48,17 @@ p, pre, ul {
   margin-right: auto;
   margin-bottom: 0.9em;
 
-  width: 80%;
+  width: 98%;
   max-width: 720px;
 
   list-style-position: inside;
   list-style-type: disclosure-closed;
 }
+@media screen and (min-width: 48rem) {
+  p, ul {
+    width: 80%;
+  }
+}
 
 li ul {
   margin-left: 2em;
@@ -83,8 +94,24 @@ p.copyright {
 }
 
 pre {
-  width: 80ch;
+  max-width: 80ch;
   font-size: 0.9rem;
+  overflow: scroll;
+
+  /*
+    Workaround for extending off screen on small viewports bc I cba
+    to figure it out properly
+  */
+  width: 90%;
+}
+@media screen and (min-width: 48rem) {
+  pre {
+    /*
+      Get rid of scrollbars on browsers that show them regardless of
+      whether the content fits on screen or not
+    */
+    overflow: visible;
+  }
 }
 
 pre.terminal {