Refactor stylesheets and do a major overhaul of the styling.

1 files changed, 57 insertions, 17 deletions

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;
+    }
+}