Refactor stylesheets and do a major overhaul of the styling.

8 files changed, 249 insertions, 139 deletions

diff --git a/app/assets/images/header-metal-bg.jpg b/app/assets/images/header-metal-bg.jpg
new file mode 100644
index 0000000..5cd91c2
--- /dev/null
+++ b/app/assets/images/header-metal-bg.jpg
diff --git a/app/assets/images/module-header-bg.jpg b/app/assets/images/module-header-bg.jpg
new file mode 100644
index 0000000..a6a544c
--- /dev/null
+++ b/app/assets/images/module-header-bg.jpg
diff --git a/app/assets/stylesheets/_color_scheme.scss b/app/assets/stylesheets/_color_scheme.scss
new file mode 100644
index 0000000..bec9288
--- /dev/null
+++ b/app/assets/stylesheets/_color_scheme.scss
@@ -0,0 +1,34 @@
+// 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;
+$deemph-text-fg: darken($fg, 20%);
+$bg2: darken($bg, 5%);
+
+$border-fg: $fg;
+$dark-border-fg: darken($primary-4, 20%);
+
+$link-fg: lighten($primary-4, 20%);
+$link-visited-fg: $primary-4;
+$link-hover-fg: lighten($link-fg, 20%);
+
+$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;
+
diff --git a/app/assets/stylesheets/hmno_blogg.scss b/app/assets/stylesheets/hmno_blogg.scss
index 2bf0301..9dbb7a2 100644
--- a/app/assets/stylesheets/hmno_blogg.scss
+++ b/app/assets/stylesheets/hmno_blogg.scss
@@ -1,27 +1,15 @@
+@import "color_scheme";
+
 #blog_posts {
   article {
-    background-color: #010101;
-    border: 1px solid darkslategray;
+    background-color: $bg2;
+    border: 1px solid $dark-border-fg;
     padding: 3px;
     margin-bottom: 1em;
 
-    header {
-      h1 {
-        font-size: 115%;
-        margin: 0;
-        a {
-          text-decoration: none;
-          color: inherit;
-        }
-      }
-
-      .details {
-        font-size: 75%;
-      }
-    }
-
     footer {
       position: relative;
+      border: 0;
 
       .comment_count {
         position: absolute;
@@ -31,3 +19,55 @@
     }
   }
 }
+
+#blog_posts, #show_blog_post {
+    header {
+      padding-bottom: $spacing;
+
+      .details {
+        color: $deemph-text-fg;
+        font-size: 75%;
+      }
+    }
+}
+
+#comments {
+    article {
+        min-height: 60px;
+        border: 1px solid $dark-border-fg;
+        padding: $spacing / 2;
+        img {
+            float: left;
+        }
+        footer {
+            border: 0;
+            padding: 0;
+            font-size: 80%;
+            background: inherit;
+        }
+        p {
+            margin-left: 60px + $spacing;
+            &:first-of-type {
+                margin-top: 0;
+            }
+        }
+    }
+}
+
+#new_comment {
+    .field {
+        padding: 2px;
+        label {
+            display: inline-block;
+            min-width: 5em;
+        }
+        input, textarea {
+            border: 1px solid $dark-border-fg;
+            background-color: $bg2;
+            color: $fg;
+        }
+    }
+    .form-actions {
+        margin-left: 5.2em;
+    }
+}
diff --git a/app/assets/stylesheets/hmno_header.scss b/app/assets/stylesheets/hmno_header.scss
new file mode 100644
index 0000000..f35eea0
--- /dev/null
+++ b/app/assets/stylesheets/hmno_header.scss
@@ -0,0 +1,58 @@
+@import "color_scheme";
+
+#header {
+    #logo {
+        background: {
+            color: $header-bg;
+            image: image_url("header-metal-bg.jpg");
+            repeat: no-repeat;
+        }
+        border-bottom: 1px solid $fg;
+    }
+
+    #menu {
+        position: relative;
+        text-align: center;
+        top: -2em;
+
+        ul {
+            padding: 0;
+
+            li {
+                list-style: none;
+                display: inline-block;
+                background-color: $menu-bg;
+
+                padding: {
+                    left: 1em;
+                    right: 1em;
+                    top: 0.3em;
+                    bottom: 0.3em;
+                }
+
+                &.selected {
+                    background-color: $selected-menu-bg;
+                    font-weight: 600;
+
+                    a {
+                        color: $selected-menu-fg;
+                    }
+                }
+
+                &:hover {
+                    background-color: $hover-menu-bg;
+
+                    a {
+                        color: $hover-menu-fg;
+                    }
+                }
+
+                a {
+                    text-decoration: none;
+                    color: $menu-fg;
+                }
+            }
+        }
+    }
+}
+
diff --git a/app/assets/stylesheets/hmno_main.scss b/app/assets/stylesheets/hmno_main.scss
index 1bddc2e..e11526f 100644
--- a/app/assets/stylesheets/hmno_main.scss
+++ b/app/assets/stylesheets/hmno_main.scss
@@ -1,32 +1,4 @@
-// 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;
-
-$link-fg: lighten($primary-4, 20%);
-$link-visited-fg: $primary-4;
-$link-hover-fg: lighten($link-fg, 20%);
-
-$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;
-
+@import "color_scheme";
 
 body {
     background-color: $body-bg;
@@ -39,6 +11,26 @@ body {
 
 h1, h2, h3 {
     color: $fg;
+    margin: {
+        top: 1em;
+        bottom: 0.5em;
+    }
+    &:first-of-type {
+        margin-top: 0;
+    }
+}
+
+h1 {
+    font-size: 14pt;
+}
+
+h2 {
+    font-size: 12pt;
+}
+
+h3 {
+    font-size: 10pt;
+    font-weight: 600;
 }
 
 a {
@@ -54,99 +46,6 @@ a {
     }
 }
 
-#header {
-    #logo {
-        background-color: $header-bg;
-        border-bottom: 1px solid $fg;
-    }
-
-    #menu {
-        position: relative;
-        text-align: center;
-        top: -2em;
-
-        ul {
-            padding: 0;
-
-            li {
-                list-style: none;
-                display: inline-block;
-                background-color: $menu-bg;
-
-                padding: {
-                    left: 1em;
-                    right: 1em;
-                    top: 0.3em;
-                    bottom: 0.3em;
-                }
-
-                &.selected {
-                    background-color: $selected-menu-bg;
-                    font-weight: 600;
-
-                    a {
-                        color: $selected-menu-fg;
-                    }
-                }
-
-                &:hover {
-                    background-color: $hover-menu-bg;
-
-                    a {
-                        color: $hover-menu-fg;
-                    }
-                }
-
-                a {
-                    text-decoration: none;
-                    color: $menu-fg;
-                }
-            }
-        }
-    }
-}
-
-#page_container {
-    background: $bg;
-
-    margin: {
-        left: 5em;
-        right: 5em;
-    }
-
-    #page {
-        position: relative;
-
-        #left_sidebar, #right_sidebar {
-            position: absolute;
-            width: 200px;
-            top: 0;
-            border: 1px groove $fg;
-            padding: 5px;
-            height: 100%;
-        }
-
-        #left_sidebar {
-            left: $spacing;
-        }
-
-        #right_sidebar {
-            right: $spacing;
-        }
-
-        #body_content {
-            margin: {
-                left: $sidebar-width + 3 * $spacing;
-                right: $sidebar-width + 3 * $spacing;
-            }
-            padding: {
-                left: 0.5em;
-                right: 0.5em;
-            }
-        }
-    }
-}
-
 #left_img {
     float: left;
 }
@@ -154,3 +53,4 @@ a {
 #right_img {
     float: right;
 }
+
diff --git a/app/assets/stylesheets/hmno_page.scss b/app/assets/stylesheets/hmno_page.scss
new file mode 100644
index 0000000..132724b
--- /dev/null
+++ b/app/assets/stylesheets/hmno_page.scss
@@ -0,0 +1,38 @@
+@import "color_scheme";
+
+#page_container {
+    background: $bg;
+
+    margin: {
+        left: 5em;
+        right: 5em;
+    }
+
+    #page {
+        position: relative;
+        min-height: 1000px;
+        padding: $spacing;
+
+        #body_content {
+            margin: {
+                left: $sidebar-width + 3 * $spacing;
+                right: $sidebar-width + 3 * $spacing;
+            }
+            padding: {
+                left: 0.5em;
+                right: 0.5em;
+            }
+        }
+
+    }
+
+    footer {
+        background: {
+            color: $header-bg;
+            image: image_url("header-metal-bg.jpg");
+            repeat: no-repeat;
+        }
+        border-top: 1px solid $fg;
+    }
+}
+
diff --git a/app/assets/stylesheets/hmno_sidebars.scss b/app/assets/stylesheets/hmno_sidebars.scss
new file mode 100644
index 0000000..223f1cf
--- /dev/null
+++ b/app/assets/stylesheets/hmno_sidebars.scss
@@ -0,0 +1,40 @@
+@import "color_scheme";
+
+@mixin sidebar-headers {
+    padding: 2px;
+    color: $link-fg;
+    background: {
+        color: $header-bg;
+        image: image_url("module-header-bg.jpg");
+        repeat: repeat;
+    }
+}
+
+#left_sidebar, #right_sidebar {
+    position: absolute;
+    width: 200px;
+    top: 0;
+    bottom: $spacing;
+    border: 1px groove $dark-border-fg;
+    padding: 5px;
+    background-color: $bg2;
+    h2 {
+        @include sidebar-headers;
+    }
+}
+
+#left_sidebar {
+    left: $spacing;
+}
+
+#right_sidebar {
+    right: $spacing;
+}
+
+.sidebar_module {
+    padding-bottom: $spacing;
+    h1 {
+        font-size: 12pt;
+        @include sidebar-headers;
+    }
+}