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

diff --git a/design/sassold/_header.scss b/design/sassold/_header.scss
new file mode 100644
index 0000000..4bba7a7
--- /dev/null
+++ b/design/sassold/_header.scss
@@ -0,0 +1,187 @@
+.header-wrapper { 
+    @include breakpoint(beta) {
+        border-bottom: 1px #f3efef solid;
+    }
+}
+.site-banner {
+    @extend %clearfix;
+    margin: 0 auto;
+    @include constrain_wide;
+    @include smcaps;
+    #logo {
+        a {
+            @include fontsize(32);
+            text-decoration: none;
+            display: block;
+            font-weight: 300;
+            font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+            color: $brown;
+            &:before {
+                display: block;
+                content: "home-icon";
+                text-indent: -9999em;
+                background: url("logo-new-@2x-treeonly.png") center top no-repeat;
+                width: 95px;
+                height: 65px;
+                background-size: 95px;
+                background-size: 85px;
+                //if sox
+                //background: url("img/soxlogo.svg") center top no-repeat;
+                //background-size: 60px;
+                display: block;
+                margin: 5px auto 0;
+            }
+        }
+        .sitesubtitle {
+            display: block;
+            margin-top: -8px;
+            font-family: $fancy_serif;
+            font-style: italic;
+            font-weight: 300;
+            @include fontsize(12);
+        }
+    }
+    nav {
+        border-top: 1px #444444 dotted;
+        border-bottom: 1px #444444 dotted;
+        //box-shadow: 0 3px 8px 0 #e6e6e6
+        padding-left: 20px;
+        padding-right: 20px;
+        margin-right: -20px;
+        margin-left: -20px;
+        margin-top: 1em;
+        padding: 0.25em 0.5em;
+        a {
+            text-decoration: none;
+            color: lighten(#505050, 5);
+            &:visited {
+                color: lighten(#505050, 5);
+            }
+        }
+        ul {
+            @include smcaps;
+            @include fancy_sans;
+            @include fontsize(13);
+            max-width: 100%;
+            font-weight: 600;
+            margin-top: 0.5em;
+            margin-bottom: 0.5em !important;
+            padding: 0;
+            @include constrain(85%);
+        }
+        li {
+            display: inline;
+            margin: 0 0.25em;
+            color: lighten(#505050, 30);
+            &:after {
+                content: "\00b7";
+                color: #999999;
+                padding-left: 0.75em;
+            }
+            &:last-of-type {
+                margin-right: 0;
+                &:after {
+                    content: " ";
+                }
+            }
+        }
+        @include breakpoint(beta) {
+        }
+    }
+    @include breakpoint(beta) {
+        height: 90px;
+        position: relative;
+        #logo {
+            float: left;
+            text-align: left;
+            a {
+                width: 360px;
+                line-height: 2.5em;
+                &:before {
+                    display: inline-block;
+                    background-size: 102px;
+                    //if sox
+                    //background: url("img/soxlogo.svg") center bottom no-repeat;
+                    //background-size: 70px;
+                    height: 85px;
+                    width: 105px;
+                    //if sox
+                    //width: 80px;
+                    margin-right: 10px;
+                }
+            }
+            .sitesubtitle { 
+                margin-left: 116px;
+                //if sox
+                //margin-left: 90px;
+                margin-top: -30px;
+            }
+        }
+        nav {
+            float: right;
+            border: none;
+            margin: 42px 0 0 0;
+            padding: 0;
+            ul {
+                max-width: 50em;
+            }
+        }
+    }
+}
+
+.black header h1 a, .dark header h1 a {
+    color: $body_font_light;
+    &:before {
+        background: url("logo-new-@2x-treeonly.png") center -75px no-repeat;
+        background-size: 92px;
+    }
+    @include breakpoint(gamma) {
+        &:before {
+            background-position-y: -65px;
+        }
+    }
+}
+
+
+.black nav[role="navigation"] a, .dark nav[role="navigation"] a {
+    color: $body_font_light;
+}
+
+
+.header-wrapper {
+    @extend %clearfix;
+    margin-bottom: 1em;
+    @include breakpoint(beta) {
+        border-bottom: 1px #f3efef solid;
+        position: relative;
+    }
+    @include breakpoint(gamma) {
+        max-width: $breakpoint-gamma;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    @include breakpoint(delta) {
+        margin-top: 1.3rem; 
+        max-width: $breakpoint-delta;
+    }
+    @include breakpoint(epsilon) {
+        margin-top: 1.3rem; 
+        max-width: $max_width;
+    }
+}
+.detail .header-wrapper, .detail #breadcrumbs {
+    transition: opacity .5s;
+    @include breakpoint(epsilon) {
+        opacity: .8;
+        &:hover {
+            opacity: 1;
+        }
+    }
+}
+
+.black .header-wrapper, .dark .header-wrapper {
+    @include breakpoint(beta) {
+        border-bottom: 1px $body_font_light solid;
+    }
+}
+