dark mode in docs

website/css/docs/navstyle.css

@@ -10,7 +10,15 @@
     overflow: scroll;
 }
 
+.dropdown {
+    display: none;
+    font-size: 0.8rem;
+    height: 100%;
+    background-color: rgb(27, 27, 165);
+}
+
 .navitem {
+    cursor: pointer;
     text-decoration: none;
     color: white;
     padding: 5%;
@@ -19,19 +27,13 @@
     font-size: 1rem;
 }
 
-.navitem:hover {
-    background-color: black;
-}
-
 .nav-subitem {
+    display: block;
     text-decoration: none;
     color: white;
-    padding: 5%;
-    padding-left: 25%;
     font-size: 0.8rem;
     width: 70%;
+    padding: 5%;
+    padding-left: 25%;
     background-color: rgb(27, 27, 165);
 }
-.nav-subitem:hover {
-    background-color: rgb(43, 43, 43);
-}

website/css/docs/style.css

@@ -20,6 +20,7 @@ html, body {
     color: black;
     display: grid;
     grid-template-areas:
+        'menu header header header header'
         'menu main main main main'
         'menu main main main main'
         'menu main main main main'
@@ -31,22 +32,38 @@ html, body {
         'menu footer footer footer footer';
 }
 
-.darkMode {
-    background-color: rgb(46, 46, 46);
-    color: white
+.logo {
+    width: 60%;
+    height: auto;
+    margin-left: 20%;
+    margin-top: 5%;
+    margin-bottom: 5%;
 }
 
 #nav {
     grid-area: menu;
-    width: 90%;
+    min-width: 20vw;
+    width: 100%;
     height: 100%;
+    overflow: scroll;
 }
 
 #docPage {
+    max-width: 75vw;
+    margin: 0;
     grid-area: main;
     overflow: scroll;
 }
 
+.doc-container {
+    width: 90%;
+    margin: 5%;
+}
+
 #footer {
     grid-area: footer;
 }
+
+#top {
+    grid-area: header;
+}

website/css/docs/topstyle.css

@@ -0,0 +1,15 @@
+.top-container {
+    background-color: rgb(223, 223, 223);
+    height: 100%;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+}
+
+.top-wrapper {
+    display: flex;
+    width: 80%;
+    margin-right: 5%;
+    justify-content: flex-end;
+}