Selecting a better color gradient and updating it on the website

2 files changed, 23 insertions, 14 deletions

diff --git a/frontend/doc.txt b/frontend/doc.txt
new file mode 100644
index 0000000..c8eba6e
--- /dev/null
+++ b/frontend/doc.txt
@@ -0,0 +1,6 @@
+Color Pallette:
+
+#2F3032
+#383A56
+#B0A565
+#EDE68A
diff --git a/frontend/index.css b/frontend/index.css
index 5f9619c..010d543 100644
--- a/frontend/index.css
+++ b/frontend/index.css
@@ -1,17 +1,18 @@
 body {
     font-size: 16px;
     font-family: "Helvetica", sans-serif;
-    line-height: 1.3rem;
+    line-height: 1.5rem;
     width: 100%;
     height: 100vh;
     margin: 0rem;
     padding: 0rem;
     overflow-x: auto;
     overflow-y: auto;
+	background-color: #2f3032;
+	color: white;
 }
 
 header {
-    background-color: lemonchiffon;
     padding-top: 1rem;
     padding-bottom: 1rem;
     font-size: 20px;
@@ -19,6 +20,12 @@ header {
     width: 1260px;
     max-width: 1260px;
     text-align: center;
+	border-radius: 0px 0px 3px 3px;
+
+	background: #383A56;
+	background: -webkit-radial-gradient(top, #383A56, #303133, #303133);
+	background: -moz-radial-gradient(top, #383A56, #303133, #303133);
+	background: radial-gradient(to bottom, #383A56, #303133, #303133);
 }
 
 header > h1 {
@@ -30,11 +37,9 @@ header > h1 {
 main {
     display: flex;
     flex-direction: row;
-    color: #1a1a1a;
     width: 1260px;
     margin: auto;
     max-width: 1260px;
-    background-color: white;
     flex: 1 1 100%;
     margin-bottom: 1rem;
     overflow-y: hidden;
@@ -75,11 +80,10 @@ nav {
     display: block;
     width: 100%;
     cursor: pointer;
-    background: white;
 }
 
 .outer-tree > li > span:hover {
-    color: gray;
+    color: #ede68a;
 }
 
 .outer-tree > li > span > i {
@@ -103,7 +107,7 @@ nav {
 }
 
 .inner-tree > li > label {
-    color: blue;
+    color: #ede68a;
     font-weight: bold;
     text-align: center;
 }
@@ -117,19 +121,18 @@ nav {
 }
 
 nav a {
-    color: #404040;
-    text-decoration: none;
+	color: white;
+	text-decoration: none;
     display: inline-block;
     min-width: 196px;
 }
 
 nav a:hover {
-    color: #1a1a1a;
+	color: #ede68a;
     cursor: pointer;
 }
 
 .nav-selected {
-    color: black;
     font-weight: bold;
 }
 
@@ -220,7 +223,7 @@ article .opengl_canvas_container .play_button {
 
 .opengl_canvas_container canvas {
     border-radius: 3px 0px 0px 3px;
-    border: 1px solid black;
+    border: 1px solid #b0a565;
 }
 
 article .opengl_canvas_container .play_button:hover {
@@ -255,7 +258,7 @@ article pre {
 .opengl_canvas_sidebar {
     width: 312px;
     height: 480px;
-    border: 1px solid #1a1a1a;
+    border: 1px solid #b0a565;
     border-left: none;
 
     display: flex;
@@ -302,4 +305,4 @@ article pre {
 
 .code_comment {
     color: green;
-}
\ No newline at end of file
+}