aboutsummaryrefslogtreecommitdiffstats
diff options
context:
space:
mode:
-rw-r--r--app/assets/stylesheets/hmno_main.scss113
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;