tweaked header to no longer use h1/h2, updated styles

1 files changed, 121 insertions, 110 deletions

diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index d578e21..8070ae7 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -1,74 +1,135 @@
-header[role="banner"] {
+.header-wrapper { 
+    @include breakpoint(beta) {
+        border-bottom: 1px #f3efef solid;
+    }
+}
+.site-banner {
+    @extend %clearfix;
     margin: 0 auto;
+    @include constrain_wide;
     @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;
-        background: url("logo-new-@2x-treeonly.png") center top no-repeat;
-        width: 95px;
-        height: 75px;
-        background-size: 95px;
-        background-size: 85px;
-        //if sox
-        #background: url("img/soxlogo.svg") center top no-repeat;
-        #background-size: 60px;
-        display: block;
-        margin: 0.75em auto 0;
+    #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);
+        }
     }
-    h2 {
-        margin-top: 0.25em;
-        font-size: 0.675em;
-        font-style: italic;
-        font-weight: 300;
-        text-align: center;
+    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, 20);
+            &:visited {
+                color: lighten(#505050, 20);
+            }
+        }
+        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;
+            &:after {
+                content: "\00b7";
+                color: #999999;
+                padding-left: 0.75em;
+            }
+            &:last-of-type {
+                margin-right: 0;
+                &:after {
+                    content: " ";
+                }
+            }
+        }
+        @include breakpoint(beta) {
+        }
     }
     @include breakpoint(beta) {
-        float: left;
+        height: 90px;
         position: relative;
-        bottom: 0;
-        h1, h2 {
+        #logo {
+            float: left;
+            position: absolute;
+            bottom: 8px;
             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;
+            }
         }
-        h1 {
-            width: 360px;
-        }
-        h1 a { line-height: 2.5em;}
-        h1 a: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;
-        }
-        h2 { 
-            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 {
@@ -83,56 +144,6 @@ header[role="banner"] {
 }
 
 
-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: lighten(#505050, 20);
-    }
-    ul {
-        @include smcaps;
-        @include fancy_sans;
-        @include fontsize(13);
-        max-width: 100%;
-        font-weight: 600;
-        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: right;
-        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;
 }