start updating docs, other changes to file upload

docs/styles/base.css

@@ -1,50 +1,280 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html,
+body,
+div,
+span,
+applet,
+object,
+iframe,
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+p,
+blockquote,
+pre,
+a,
+abbr,
+acronym,
+address,
+big,
+cite,
+code,
+del,
+dfn,
+em,
+img,
+ins,
+kbd,
+q,
+s,
+samp,
+small,
+strike,
+strong,
+sub,
+sup,
+tt,
+var,
+b,
+u,
+i,
+center,
+dl,
+dt,
+dd,
+ol,
+ul,
+li,
+fieldset,
+form,
+label,
+legend,
+table,
+caption,
+tbody,
+tfoot,
+thead,
+tr,
+th,
+td,
+article,
+aside,
+canvas,
+details,
+embed,
+figure,
+figcaption,
+footer,
+header,
+hgroup,
+menu,
+nav,
+output,
+ruby,
+section,
+summary,
+time,
+mark,
+audio,
+video {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font-size: 100%;
+    font: inherit;
+    vertical-align: baseline;
+}
+
+/* HTML5 display-role reset for older browsers */
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+menu,
+nav,
+section {
+    display: block;
+}
+
 body {
-    font-family: Arial, sans-serif;
-    line-height: 1.6;
-    margin: 0;
-    padding: 0;
+    line-height: 1;
 }
 
-header {
-    background: #333;
-    color: #fff;
-    padding: 1rem 0;
-    text-align: center;
-}
-
-header h1 {
-    margin: 0;
-}
-
-nav ul {
+ol,
+ul {
     list-style: none;
-    padding: 0;
 }
 
-nav ul li {
-    display: inline;
-    margin-right: 1rem;
+blockquote,
+q {
+    quotes: none;
 }
 
-nav ul li a {
-    color: #fff;
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: '';
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+
+
+@property --font-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: oklch(25.11% 0.006 258.36);
+}
+
+@property --background-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #F6F0F0;
+}
+
+@property --code-background-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #c7c1c1;
+}
+
+@property --hover-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #A4B465;
+}
+
+@property --url-color {
+    syntax: "<color>";
+    inherits: true;
+    initial-value: #626F47;
+}
+
+@media (prefers-color-scheme: dark) {
+    :root {
+        --font-color: oklch(91.87% 0.003 264.54);
+        --background-color: #29261f;
+        --hover-color: #626F47;
+        --url-color: #A4B465;
+        --code-background-color: #3d392e;
+    }
+}
+
+
+
+body {
+    font-family: "Open Sans", sans-serif;
+    font-optical-sizing: auto;
+    font-weight: 400;
+    font-style: normal;
+    font-variation-settings:
+        "wdth" 100;
+    display: flex;
+    justify-content: center;
+    background-color: var(--background-color);
+    color: var(--font-color);
+}
+
+a {
+    color: var(--url-color);
     text-decoration: none;
+    transition: all 0.25s ease-in-out;
 }
 
-nav ul li a:hover {
-    text-decoration: underline;
+a:hover {
+    color: var(--hover-color);
+    transition: all 0.25s ease-in-out;
 }
 
-main {
-    padding: 2rem;
+a:visited {
+    color: #C14600;
+    transition: all 0.25s ease-in-out;
 }
 
-footer {
-    background: #333;
-    color: #fff;
-    text-align: center;
-    padding: 1rem 0;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
+a:visited:hover {
+    color: var(--hover-color);
+    transition: all 0.25s ease-in-out;
 }
+
+@supports (font-size-adjust: 1) {
+    .content {
+        font-size-adjust: 0.5;
+    }
+}
+
+ul {
+    list-style: square;
+}
+
+li {
+    line-height: 160%;
+    margin-bottom: 0.5rem;
+}
+
+.content {
+    line-height: calc(1ex / 0.32);
+    text-rendering: optimizeLegibility;
+    max-width: 80ch;
+    padding-left: 1rem;
+}
+
+.content h1 {
+    font-size: 2.5em;
+    line-height: calc(1ex / 0.42);
+    margin: calc(1ex / 0.42) 0;
+}
+
+.content h2 {
+    font-size: 2em;
+    line-height: calc(1ex / 0.42);
+    margin: calc(1ex / 0.42) 0;
+}
+
+.content h3 {
+    font-size: 1.75em;
+    line-height: calc(1ex / 0.38);
+    margin: calc(1ex / 0.38) 0;
+}
+
+.content h4 {
+    font-size: 1.5em;
+    line-height: calc(1ex / 0.37);
+    margin: calc(1ex / 0.37) 0;
+}
+
+.content p {
+    font-size: 1em;
+    line-height: calc(1ex / 0.32);
+    margin: calc(1ex / 0.32) 0;
+    text-align: justify;
+    hyphens: auto;
+}
+
+
+.sidebar {
+    padding-top: 4rem;
+    line-height: calc(1ex / 0.32);
+    text-rendering: optimizeLegibility;
+}
+
+.holder {
+    display: flex;
+    flex-direction: row;
+    margin: auto;
+}