From ed8f8306b90698329f6755dfd4013e3969912e61 Mon Sep 17 00:00:00 2001
From: Lucas <lucas@domain.invalid>
Date: Sun, 26 Mar 2023 15:36:07 +0000
Subject: [PATCH] backend: make .viewport responsive

---
 public/css/style.css | 34 +++++++++++++++++++++++++++++++++-
 1 file changed, 33 insertions(+), 1 deletion(-)

diff --git a/public/css/style.css b/public/css/style.css
index 4a1a18a..95b0af2 100644
--- a/public/css/style.css
+++ b/public/css/style.css
@@ -31,6 +31,8 @@
   --text: var(--dark-theme-text);
   --accent: var(--dark-theme-accent);
   --accent-hover: var(--dark-theme-accent-hover);
+
+  --viewport-width: 60rem;
 }
 
 *,
@@ -123,7 +125,7 @@ dd {
 .viewport {
   margin-left: auto;
   margin-right: auto;
-  width: 60rem;
+  width: var(--viewport-width);
 }
 
 .border-top {
@@ -199,3 +201,33 @@ dd {
 .flex-i-fullsize {
   flex: auto;
 }
+
+@media screen and (max-width: 30rem) {
+  :root {
+    --viewport-width: 100%;
+  }
+}
+
+@media screen and (min-width: 30rem) {
+  :root {
+    --viewport-width: 30rem;
+  }
+}
+
+@media screen and (min-width: 45rem) {
+  :root {
+    --viewport-width: 45rem;
+  }
+}
+
+@media screen and (min-width: 60rem) {
+  :root {
+    --viewport-width: 60rem;
+  }
+}
+
+@media screen and (min-width: 90rem) {
+  :root {
+    --viewport-width: 90rem;
+  }
+}