Rewrote all sass and reconfigured HTML to use more microformats and

clearer class names

1 files changed, 151 insertions, 0 deletions

diff --git a/design/sass/_header.scss b/design/sass/_header.scss
new file mode 100644
index 0000000..a89636c
--- /dev/null
+++ b/design/sass/_header.scss
@@ -0,0 +1,151 @@
+header[role="banner"] {
+    margin: 0 auto;
+    @include smcaps;
+    a {
+        text-decoration: none;
+    }
+    h1 {
+        margin: -10px 0 0 0;
+        padding: 0;
+    }
+    h1 a {
+        display: block;
+        margin: 0.25em auto 0 auto;
+        font-size: 0.875em;
+        font-weight: 300;
+        font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+        line-height: 0.75em;
+        color: $brown;
+    }
+    h1 a:before {
+        content: "home-icon";
+        text-indent: -9999em;
+        width: 95px;
+        height: 75px;
+        background: url("logo-new-@2x-treeonly.png") center top no-repeat;
+        background-size: 95px;
+        background-size: 85px;
+        display: block;
+        margin: 0.75em auto 0;
+    }
+    h2 {
+        margin-top: 0.25em;
+        font-size: 0.675em;
+        font-style: italic;
+        font-weight: 300;
+    }
+    @include breakpoint(beta) {
+        float: left;
+        position: relative;
+        bottom: 0;
+        h1, h2 {
+            text-align: left;
+        }
+        h1 {
+            width: 360px;
+        }
+        h1 a { line-height: 2.5em;}
+        h1 a:before {
+            display: inline-block;
+            background-size: 102px;
+            height: 85px;
+            width: 105px;
+            margin-right: 10px;
+        }
+        h2 { margin-left: 116px;
+             margin-top: -30px;
+        }
+    }
+}
+.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: 90px;
+    }
+    @include breakpoint(beta) {
+        &:before {
+            background: url("logo-new-@2x-treeonly.png") center -65px no-repeat;
+            background-size: 92px;
+        }
+    }
+}
+
+
+nav[role="navigation"] {
+    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: #505050;
+    }
+    ul {
+        @include smcaps;
+        max-width: 100%;
+        font-weight: 300;
+        margin-top: 0.5em;
+        margin-bottom: 0.5em;
+        padding: 0;
+        @include constrain(85%);
+    }
+    li {
+        display: inline;
+        margin: 0 0.25em;
+        &:after {
+            content: "\00b7";
+            color: #999999;
+            padding-left: 0.75em;
+        }
+    }
+    li.last {
+        margin-right: 0;
+        &:after {
+            content: " ";
+        }
+    }
+    @include breakpoint(beta) {
+        float: left;
+        border: none;
+        margin: 52px 0 0 0;
+        padding: 0;
+        ul {
+            max-width: 50em;
+        }
+    }
+}
+.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 $brown solid;
+        position: relative;
+    }
+    @include breakpoint(gamma) {
+        max-width: 960px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    @include breakpoint(delta) {
+        margin-top: 1.5em; 
+        max-width: 1170px;
+    }
+}
+
+.black .header-wrapper, .dark .header-wrapper {
+    @include breakpoint(beta) {
+        border-bottom: 1px $body_font_light solid;
+    }
+}
+