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, 163 insertions, 0 deletions

diff --git a/design/sassold/_mixins.scss b/design/sassold/_mixins.scss
new file mode 100644
index 0000000..9ccd750
--- /dev/null
+++ b/design/sassold/_mixins.scss
@@ -0,0 +1,163 @@
+$brown: #201a11;
+$brown: #222;
+$light: #ccc;
+$orange: #b53a04;
+$link_color: #b53a04;
+
+$headline_font_serif: mffweb, Georgia, 'Times New Roman', serif;
+$fancy_serif: mffweb, Georgia, 'Times New Roman', serif;
+$fancy_sans: mffnweb, Helvetica, sans-serif;
+    
+
+$body_p_font: normal 100% / 1.5 Georgia, Cambria, "Times New Roman", Times, serif;
+$body_font_color: $brown;
+$body_font_light: #b3aeae;
+$secondary-link-color: #838383;
+
+$archive_p_line_height: 1.6;
+//$light;
+$narrow-beta-width: 720px;
+$narrow-max-width: 750px;
+$max_width: 1440px;
+
+@mixin smcaps {
+    @include fancy_sans;
+    text-transform: uppercase;
+    letter-spacing: 1px;
+}
+@mixin plain_a {
+  border: none;
+  text-decoration: none;
+  color: $body_font_color;
+}
+
+@function calc-rem($size) {
+  $remsize: $size/16;
+  @return #{$remsize}rem;
+}
+
+@mixin fontsize($size) {
+  font-size: $size + px;
+  font-size: calc-rem($size);
+}
+
+@function calc-em($target-px, $context) {
+  @return $target-px / $context * 1em;
+}
+
+@mixin img_plain {
+    padding: 0;
+    max-width: 100%;
+    background: none;
+}
+@mixin generic-sans {
+    font-family: sans-serif;
+}
+@mixin fancy-sans {
+    font-family: mffnweb, Helvetica, sans-serif;
+}
+@mixin fancy-sans-bold {
+    font-family: mffnbweb, Helvetica, sans-serif;
+    font-weight: 700;
+}
+@mixin fancy-serif {
+    font-family: Georgia, Palatino, serif;
+}
+%clearfix {
+    *zoom: 1;
+    &:before {
+        content: " ";
+        display: table;
+    }
+    &:after {
+        content: " ";
+        display: table;
+        clear: both;
+    }
+}
+
+@mixin transparent_class {
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";
+  filter: alpha(opacity = 90);
+  opacity: 0.9;
+}
+
+@mixin 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));
+} 
+
+//for overriding the above on dark pages:
+@mixin light_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+@mixin lighter_faded_line_after {
+    background: -webkit-linear-gradient(left, rgba(243,237,219,.1),rgba(243,237,219,0.3),rgba(243,237,219,.1));
+    background: -moz-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: -o-linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+    background: linear-gradient(left, rgba(243,237,219,0),rgba(243,237,219,0.1),rgba(243,237,219,0));
+} 
+
+//generic constrain function
+@mixin constrain($size) {
+    max-width: $size;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+//set an element to centered, narrowish column width
+//used mostly on columns of text
+@mixin constrain_narrow() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(beta) {
+        max-width: $narrow-beta-width;
+    }
+    @include breakpoint(gamma) {
+        max-width: $narrow-max-width;
+    }
+}
+
+@mixin constrain_archive() {
+    max-width: 94%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(alpha) {
+        max-width: 380px;
+        float: left;
+    }
+    @include breakpoint(gamma) {
+        max-width: 680px;
+    }
+}
+
+//set an element to centered, wideish column width
+@mixin constrain_wide() {
+    max-width: 90%;
+    margin-left: auto;
+    margin-right: auto;
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+    }
+    @include breakpoint(delta) {
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        max-width: $max_width;
+    }
+}
+
+
+