Proj: Massive design overhaul to simplify code

Cut out Sass syntax, deleted old CSS rules, changed HTML to use
fewer lists and more cascading instead of specific rules. Still requires
compiling with sass to strip comments and compress, but would in theory
work on its own.

Reduced CSS file size by 2/3

1 files changed, 20 insertions, 17 deletions

diff --git a/design/sass/_comments.scss b/design/sass/_comments.scss
index 39c7930..4807397 100644
--- a/design/sass/_comments.scss
+++ b/design/sass/_comments.scss
@@ -1,17 +1,17 @@
 //### COMMENTS AND FORMS ###
-.comments--header {
-    @include constrain_narrow;
+.comments--wrapper {
+    @include constrain_narrow();
     @include fancy_sans;
+    text-align: left;
+    margin-top: -2em;
+}
+.comments--header {
+    @include constrain_narrow();
     line-height: 6em;
     @include fontsize(16);
     font-style: italic;
     margin-top: 2em;
 }
-.comments--wrapper {
-    @include constrain_narrow();
-    text-align: left;
-    margin-top: -2em;
-}
 .comment {
     margin-top: 2.5em;
     margin-bottom: 2.5em;
@@ -20,7 +20,15 @@
         margin-top: none;
     }
     &:after {
-        @include faded_line_after;
+        display: block;
+        content: "";
+        margin-top: 3em;
+        height: 1px;
+        width: 100%;
+        background: -webkit-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+        background: -moz-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+        background: -o-linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
+        background: linear-gradient(left, rgba(0,0,0,0),rgba(0,0,0,0.1),rgba(0,0,0,0));
     }
     &:last-child:after {
         display: none;
@@ -29,15 +37,16 @@
 .comment--head, .comment--body {
     @include breakpoint(alpha) {
         margin-left: 80px;
-        margin-top: -2rem;
+        margin-top: -1rem;
     }
 }
 .comment--head {
-    margin-bottom: 1em;
+    margin-bottom: 1rem;
 }
 .comment--body {
     margin-bottom: 3em;
     @include fontsize(22);
+    font-family: $fancy_serif;
     hr {
         width: 20%;
         overflow: visible;
@@ -49,30 +58,25 @@
     }
 }
 .who {
-    @include fancy_sans;
     @include fontsize(22);
 }
 .when {
-    @include fancy_sans;
     @include fontsize(15);
     color: #999;
     margin-left: 1em;
 }
-
 .gravatar {
     border: 2px $brown solid;
     background: transparent;
     max-width: 100%;
     padding: 0;
     float: left;
-    margin-top: 5px;
+    margin-top: -7px;
     margin-right: 8px;
     @include breakpoint(alpha) {
         margin-right: 0;
     }
 }
-
-
 .comment--form--wrapper {
     @include constrain_narrow();
     p {
@@ -119,4 +123,3 @@
         margin-bottom: 0;
     }
 }
-