switch the layout to a wider one that leans slightly to the left of the page

this is to make space on the right for a nice background in the future

static/css/base.css

@@ -0,0 +1,61 @@
+/* Color scheme. */
+
+:root {
+    /* naturally */
+    --liquidex-brand-blue: #058ef0;
+    /* but also: */
+    --liquidex-brand-red: #eb134a;
+    --liquidex-brand-yellow: #ffc31f;
+    --liquidex-brand-green: #06ca4a;
+
+    --text-color-light: #55423e;
+    --link-color-light: #004ec8;
+    --link-color-visited-light: #6c2380;
+
+    --background-color: rgb(255, 253, 246);
+    --background-color-tooltip: rgb(226, 223, 214);
+    --text-color: #55423e;
+    --link-color: #004ec8;
+    --link-color-visited: #6c2380;
+
+    --shaded-background: rgba(0, 0, 0, 5%);
+    --border-1: rgba(0, 0, 0, 15%);
+    --border-2: rgba(0, 0, 0, 30%);
+    --hover: rgba(0, 0, 0, 15%);
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --background-color: rgb(30, 40, 53);
+        --background-color-tooltip: rgb(23, 31, 41);
+        --text-color: #d7cdbf;
+        --link-color: #93cce8;
+        --link-color-visited: #f7afde;
+
+        --shaded-background: #f7e5df0c;
+        --border-0: #f7e5df1a;
+        --border-1: #f7e5df26;
+        --border-1-and-a-half: #f7e5df3a;
+        --border-2: #f7e5df4d;
+    }
+}
+
+:root {
+    /* Font size-responsive measurements. treehouse was designed against a font size of 14px;
+       each of these sizes is (n / 14)rem where n is the number of pixels. */
+    --1px: 0.07142857143rem;
+    --2px: 0.1428571429rem;
+    --3px: 0.2142857143rem;
+    --4px: 0.2857142857rem;
+    --6px: 0.4285714286rem;
+    --8px: 0.5714285714rem;
+    --10px: 0.7142857143rem;
+    --12px: 0.8571428571rem;
+    --16px: 1.142857143rem;
+}
+
+/* Reset things to more sensible sizing rules */
+
+* {
+    box-sizing: border-box;
+}