add mono css framework, add some boiler plate, get started on responsive design fixes

_site/css/simple.css

@@ -1,5 +1,16 @@
 /* Copied from the origin (https://github.com/artalar/mono) for fast interaction and fixing. Reatom docs is a good playground form mono. */
 
+:root {
+    --mono-main: #10a040;
+    --mono-back: #000000;
+    /* --mono-accent: #007acc;
+    --mono-muted: #666666;
+    --mono-border: #cccccc;
+    --mono-success: #28a745;
+    --mono-warning: #ffc107;
+    --mono-error: #dc3545; */
+}
+
 .mono-all,
 .mono,
 .mono-all *,
@@ -23,7 +34,6 @@
     color: var(--mono-back);
     background-color: var(--mono-main);
 }
-
 a.mono,
 .mono-all a {
     position: relative;
@@ -87,7 +97,7 @@ body.mono-all,
 .mono-all body {
     margin: 0;
     position: relative;
-    min-width: min(calc(100vw + 20rem), 85rem);
+    /* min-width: min(calc(100vw + 20rem), 85rem); */
     scroll-snap-type: x mandatory;
     display: flex;
 }
@@ -96,8 +106,9 @@ main.mono,
 .mono-all main {
     scroll-snap-align: start;
     margin: auto;
-    width: min(100vw, 65rem);
+    /* width: min(100vw, 65rem); */
     display: flex;
+    flex: 1;
     flex-direction: column;
     padding: 0 1rem;
 }
@@ -107,10 +118,11 @@ aside.mono,
     position: sticky;
     top: 0;
     display: flex;
+    flex: 1;
     flex-direction: column;
-    width: 20rem;
+    /* width: 20rem;
     min-width: 20rem;
-    max-width: 20rem;
+    max-width: 20rem; */
     max-height: 100vh;
     overflow-y: scroll;
     padding: 1rem;