Improve layout responsiveness

static/style.css

@@ -1,18 +1,27 @@
+:root {
+    --base-font-size: 1em;
+}
+
 html {
     height: 100%;
-    font-family: sans-serif;
-    line-height: 1.5;
 }
 
 body {
     height: 100%;
+    margin: 0;
     display: grid;
     grid-template-rows: auto 1fr auto;
+    font-family: sans-serif;
+    font-size: var(--base-font-size);
+    line-height: 1.5;
 }
 
 main {
-    width: 90vw;
-    margin: 0 2.5vw;
+    margin: 0 auto;
+    padding: 0 20px;
+    max-width: 1040px;
+    min-width: 600px;
+    box-sizing: border-box;
 }
 
 pre {
@@ -20,7 +29,7 @@ pre {
     overflow: auto;
     box-sizing: border-box;
     padding: 10px;
-    margin: 20px 2.5%;
+    margin: 20px;
 
 }
 
@@ -28,6 +37,7 @@ code {
     padding: 3px 6px;
     border-radius: 6px;
     margin-right: 2px;
+    white-space: nowrap;
 }
 
 pre, code {
@@ -77,7 +87,7 @@ span.label {
     padding: 3px 6px;
     border-radius: 6px;
     margin: 5px;
-    font-size: 0.7em;
+    font-size: calc(var(--base-font-size) * 0.7);
 }
 
 span.root-label {
@@ -111,13 +121,13 @@ h1.node-title {
 }
 
 h3 {
-    font-size: 20px;
+    font-size: calc(var(--base-font-size) * 1.2);
 }
 
 footer div {
     margin: 20px 0;
     text-align: center;
-    font-size: 0.8em;
+    font-size: calc(var(--base-font-size) * 0.8);
 }
 
 footer p {
@@ -136,9 +146,14 @@ hr.connections {
     margin-top: 60px;
 }
 
+nav#nav-main a {
+    text-decoration: none;
+}
+
 nav#nav-main {
     text-align: center;
     margin-bottom: 20px;
+    margin-top: 10px;
 }
 
 #nav-main-spread {
@@ -150,7 +165,7 @@ nav#nav-main {
 
 nav#nav-main ul {
     display: inline;
-    padding-left: 0;
+    padding-left: 10px;
     margin: 0;
 }
 
@@ -159,8 +174,11 @@ nav#nav-main li {
     display: inline;
 }
 
-.nav-inputs div {
+.nav-inputs {
     margin-right: 10px;
+}
+
+.nav-inputs div {
     display: flex;
     align-items: right;
 }
@@ -182,6 +200,7 @@ div#error-poem {
     margin-top: 8em;
     margin-right: 2em;
     font-size: 0.8em;
+font-size: calc(var(--base-font-size) * 0.8);
 }
 
 em, i {
@@ -191,7 +210,7 @@ em, i {
 }
 
 em#index-node-count {
-    font-size: 0.8em;
+    font-size: calc(var(--base-font-size) * 0.8);
 }
 
 table {
@@ -264,6 +283,29 @@ hr {
         display: inline;
         margin: 0;
     }
+
+    .nav-inputs {
+        margin-right: 0px;
+    }
+
+    div.nav-inputs {
+        margin-top: 10px;
+    }
+
+    main {
+        width: 95vw;
+        padding: 0 2.5vw;
+        min-width: unset;
+    }
+
+    ul {
+        padding-left: 20px;
+    }
+
+    pre {
+        max-width: 100%;
+        margin: 15px 5px;
+    }
 }
 
 @media (min-width: 601px) {
@@ -274,3 +316,30 @@ hr {
         grid-template-columns: 1fr 1fr;
     }
 }
+
+@media (min-width: 1100px) and (max-width: 2100px) {
+    main {
+        width: 800px;
+        margin: 0 auto;
+    }
+}
+
+@media (min-width: 2100px) {
+    :root {
+        --base-font-size: 1vw;
+    }
+
+    main {
+        max-width: 40%;
+    }
+
+    .nav-inputs :is(input, select, button) {
+        height: calc(var(--base-font-size) * 1.6);
+        font-size: calc(var(--base-font-size) * 0.8);
+        padding: 0 calc(var(--base-font-size) * 0.3);;
+    }
+
+    .nav-inputs input[type="text"], .nav-inputs select {
+        min-width: calc(var(--base-font-size) * 5);
+    }
+}