Redesign website

1 files changed, 44 insertions, 76 deletions

diff --git a/static/css/globalstyles.css b/static/css/globalstyles.css
index 1f22f5e..9fbb974 100644
--- a/static/css/globalstyles.css
+++ b/static/css/globalstyles.css
@@ -1,113 +1,81 @@
-@import url('https://fonts.googleapis.com/css2?family=Cousine:ital,wght@0,400;0,700;1,400;1,700&display=swap');
-
-.website-name {
-    font-size: 10px;
-    font-weight: 700;
-    line-height: 1.2;
-    color: #ddd;
-    text-shadow: 0px 1px 10px #9876aa;
-}
+@import 'variables.css';
 
 html, body {
     border: 0;
     margin: 0;
     background-color: #111;
     color: #ddd;
-    font-family: 'Cousine', monospace, sans-serif;
-    line-height: 1.3;
+    line-height: 1.6;
+    font-size: 18px;
+    font-family: var(--font-sans-serif);
 }
 
-h1, h2, h3, h4, h5, h6 {
-    color: #cc7832
-}
-
-.code-block {
-    background-color: #222;
-    border: solid 1px #333;
-    padding: 10px;
-}
-
-#navbar {
-    background-color: #222;
-    width: 100%;
+#main-container {
     display: flex;
     flex-direction: row;
-    justify-content: flex-start;
-    align-items: stretch;
-    gap: 10px;
+    width: 100%;
+    max-height: calc(100vh - 1rem);
 }
 
-.navbar-element {
-    background-color: #222;
+#navbar {
+    padding: 2rem 1rem 1rem 6rem;
     display: flex;
-    height: 30px;
-    text-align: center;
-    line-height: 30px;
-    padding: 10px;
-}
-
-.navbar-element:hover {
-    background-color: #888;
-    transition: 0.2s;
-    cursor: pointer;
+    flex-direction: column;
+    align-items: end;
+    gap: 0.4rem;
+    font-size: 0.9em;
+    font-family: var(--font-monospace);
 }
 
-.navbar-element > a {
-    color: #fff;
-    text-decoration: none;
+@media only screen and (max-width: 1000px) {
+    #navbar {
+        padding-left: 1rem;
+    }
 }
 
-.navbar-element > .highlight {
-    color: #ffc66d;
+a {
+    color: var(--color-text-link);
+    text-decoration: underline dotted var(--color-text-link);
 }
 
-#main-container {
-    max-width: 1200px;
-    margin: 0 auto;
+a:hover {
+    background-color: var(--color-text-link-bg);
 }
 
 #content-container {
-    box-shadow: 0px 0px 15px 10px rgba(152,118,170,0.05);
+    overflow: scroll;
+    max-height: 100%;
+    flex-grow: 1;
+    scrollbar-color: var(--color-scrollbar) var(--color-background);
 }
 
-#content {
-    padding: 20px;
-    max-width: 1200px;
-    background-color: #2b2b2b;
-    margin: 0 auto;
+::-webkit-scrollbar {
+    width: 4px;
+    background: var(--color-background);
 }
 
-a {
-    color: #9876aa;
-    text-decoration: underline;
+::-webkit-scrollbar-thumb {
+    background: var(--color-scrollbar);
+    border-radius: 2px;
 }
 
-.highlight {
-    color: #ffc66d;
+::-webkit-scrollbar-corner {
+    background: none;
 }
 
-.footer {
-    font-size: 10px;
-}
-
-.redlink {
-    color: #ff4136;
+#content {
+    margin: 8rem auto 6rem auto;
+    width: 700px; 
 }
 
-.box {
-    border: solid 1px #fff;
-    padding: 10px;
-    background-color: rgba(0, 0, 0, 0.1);
+h1, h2, h3, h4 {
+    font-family: var(--font-monospace);
 }
 
-.box-red {
-    border: solid 1px rgba(255, 0, 0, 0.5);
-    padding: 10px;
-    background-color: rgba(255, 0, 0, 0.2);
+.monospace {
+    font-family: var(--font-monospace);
 }
 
-table, th, td {
-	border: 1px solid rgb(200, 200, 200);
-	border-collapse: collapse;
-	padding: 10px;
+code {
+    font-family: var(--font-monospace);
 }