Begin styling with a better color scheme.

1 files changed, 81 insertions, 32 deletions

diff --git a/app/assets/stylesheets/hmno_main.scss b/app/assets/stylesheets/hmno_main.scss
index 22a800c..2b1d386 100644
--- a/app/assets/stylesheets/hmno_main.scss
+++ b/app/assets/stylesheets/hmno_main.scss
@@ -1,6 +1,32 @@
+// Color Scheme:
+// http://colorschemedesigner.com/#1j11TiW8EWTs.
+//
+$primary-1: #453C1C;
+$primary-2: #252219;
+$primary-3: #181301;
+$primary-4: #988952;
+$primary-5: #988D62;
+
+$bg: $primary-2;
+$fg: $primary-5;
+
+$selected-menu-bg: $primary-4;
+$selected-menu-fg: $primary-2;
+$hover-menu-bg: $selected-menu-bg;
+$hover-menu-fg: $selected-menu-fg;
+$menu-bg: $primary-1;
+$menu-fg: $primary-5;
+
+$header-bg: black;
+$body-bg: black;
+
+$spacing: 10px;
+$sidebar-width: 200px;
+
+
 body {
-    background-color: black;
-    color: gray;
+    background-color: $body-bg;
+    color: $fg;
     font: {
         family: Helvetica, "Sans Seriff";
         size: 10pt;
@@ -8,45 +34,64 @@ body {
 }
 
 h1, h2, h3 {
-    color: darkslategray;
+    color: $fg;
 }
 
-#menu {
-    text-align: center;
+#header {
+    #logo {
+        background-color: $header-bg;
+        border-bottom: 1px solid $fg;
+    }
 
-    ul {
-        padding: 0;
+    #menu {
+        position: relative;
+        text-align: center;
+        top: -2em;
 
-        li {
-            list-style: none;
-            display: inline-block;
-            background-color: darkgreen;
+        ul {
+            padding: 0;
 
-            padding: {
-                left: 1em;
-                right: 1em;
-                top: 0.3em;
-                bottom: 0.3em;
-            }
+            li {
+                list-style: none;
+                display: inline-block;
+                background-color: $menu-bg;
 
-            &.selected {
-                background-color: green;
-                font-weight: 600;
-            }
+                padding: {
+                    left: 1em;
+                    right: 1em;
+                    top: 0.3em;
+                    bottom: 0.3em;
+                }
 
-            &:hover {
-                background-color: green;
-            }
+                &.selected {
+                    background-color: $selected-menu-bg;
+                    font-weight: 600;
+
+                    a {
+                        color: $selected-menu-fg;
+                    }
+                }
+
+                &:hover {
+                    background-color: $hover-menu-bg;
 
-            a {
-                text-decoration: none;
-                color: white;
+                    a {
+                        color: $hover-menu-fg;
+                    }
+                }
+
+                a {
+                    text-decoration: none;
+                    color: $menu-fg;
+                }
             }
         }
     }
 }
 
 #page_container {
+    background: $bg;
+
     margin: {
         left: 5em;
         right: 5em;
@@ -57,21 +102,25 @@ h1, h2, h3 {
 
         #left_sidebar, #right_sidebar {
             position: absolute;
-            width: 10em;
+            width: 200px;
             top: 0;
-            border: 1px groove darkslategray;
+            border: 1px groove $fg;
             padding: 5px;
             height: 100%;
         }
 
+        #left_sidebar {
+            left: $spacing;
+        }
+
         #right_sidebar {
-            right: 0;
+            right: $spacing;
         }
 
         #body_content {
             margin: {
-                left: 11em;
-                right: 11em;
+                left: $sidebar-width + 3 * $spacing;
+                right: $sidebar-width + 3 * $spacing;
             }
             padding: {
                 left: 0.5em;