1 files changed, 91 insertions, 2 deletions
diff --git a/static/common.css b/static/common.css
index b670fe9..9abe81a 100644
--- a/static/common.css
+++ b/static/common.css
@@ -1,3 +1,92 @@
-html {
-    background-color: lightgray;
+:root {
+    --colorscheme-gray: #4A4A4A;
+    --colorscheme-white: #F5F5F5;
+    --colorscheme-cyan: #009688;
+    --colorscheme-red: #FF5722;
+    --colorscheme-light-gray: #C0C0C0;
+    --colorscheme-dark-gray: #1E1E1E;
+    --colorscheme-not-so-dark-gray: #2D2D2D;
+
+    --menu-width: 300px;
+    --menu-border-width: 2.5px;
+    --menu-margin: .25%;
+    --menu-padding: 10px;
+
+    --content-padding: 2%;
+    --content-width-abs: calc(100% - (var(--menu-width) + 2*var(--menu-border-width) + 2*var(--menu-margin) + 2*var(--menu-padding)));
+}
+
+html, body {
+    padding: 0px;
+    margin: 0px;
+}
+
+h1, p {
+    margin: 5px;
+    font-family: "Space Grotesk", sans-serif;
+}
+
+body {
+    height: 100%;
+    background-color: var(--colorscheme-not-so-dark-gray);
+    overflow-x: hidden;
+}
+
+#menu {
+    background-color: var(--colorscheme-dark-gray);
+    position: fixed;
+    transform: translate();
+    top: 0;
+    left: var(--content-width-abs); 
+    margin: var(--menu-margin);
+    padding: var(--menu-padding);
+    min-width: var(--menu-width);
+    height: calc(100% - (2*var(--menu-border-width) + 3*var(--menu-margin) + 2*var(--menu-padding)));
+    border: var(--colorscheme-white) var(--menu-border-width) solid;
+    border-radius: 10px;
+    scroll-snap-type: x mandatory;
+}
+
+.control {
+    display: flex;
+    width: 100%;
+    justify-content: end;
+}
+
+#content {
+    color: var(--colorscheme-white);
+    padding: var(--content-padding);
+    width: calc(var(--content-width-abs) - 2*var(--content-padding));
+}
+
+#content > h1 {
+    font-size: 50px;
+    color: var(--colorscheme-red);
+}
+
+#content > p {
+    font-size: 18px;
+}
+
+
+.toggleBtn {
+    background-color: transparent;
+    border: 0px;
+}
+
+body.light {
+    background-color: var(--colorscheme-white);
+}
+
+#menu.light {
+    background-color: var(--colorscheme-light-gray);
+    border-color: var(--colorscheme-gray);
+}
+
+#content.light {
+    color: var(--colorscheme-dark-gray);
+}
+
+#content.light > h1 {
+    text-shadow: 1px 1px 2px var(--colorscheme-gray);
 }