backend: make .viewport responsive

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;
+  }
+}