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

5 files changed, 149 insertions, 115 deletions

diff --git a/design/sass/_archives.scss b/design/sass/_archives.scss
index 36dca63..166d9c5 100644
--- a/design/sass/_archives.scss
+++ b/design/sass/_archives.scss
@@ -95,9 +95,11 @@
     @include breakpoint(epsilon) {
     }
     text-align: left;
-    h1 {
+    h1, .list-title {
         text-align: left;
         @include fancy_sans;
+        @include fontsize(36);
+        font-weight: normal;
     }
     span {
         @include fancy_sans;
@@ -117,7 +119,7 @@
             color: $link_color;
         }
     }
-    h2 {
+    h2, .list-hed {
         font-family: $fancy_serif;
         @include fontsize(32);
         margin: 0;
diff --git a/design/sass/_footer.scss b/design/sass/_footer.scss
index d5970b0..ed1635c 100644
--- a/design/sass/_footer.scss
+++ b/design/sass/_footer.scss
@@ -1,4 +1,4 @@
-footer[role="contentinfo"] {
+footer {
     margin-top: 5em;
     @include breakpoint(gamma) {
         max-width: 960;
@@ -44,7 +44,7 @@ footer[role="contentinfo"] {
         margin-bottom: 1.5em;
     }
 }
-.black footer[role="contentinfo"], .dark footer[role="contentinfo"] {
+.black footer, .dark footer {
     &:before {
         @include light_faded_line_after;
     }
diff --git a/design/sass/_forms.scss b/design/sass/_forms.scss
index 2511a7d..fd4e6e4 100644
--- a/design/sass/_forms.scss
+++ b/design/sass/_forms.scss
@@ -51,6 +51,9 @@
 }
 .flex {
     display: flex;
+    .btn, .btn-hollow {
+        flex-basis: 10%;
+    }
 }
 
 
@@ -95,10 +98,16 @@ input, .textarea-rounded textarea {
     background: $link_color;
     color: #fff;
     border: 1px solid $link_color;
-    padding: 7px 9px;
+    padding: 7px 14px;
     white-space: nowrap;
     &:hover {
         background: $link_color;
         border: 1px solid $link_color;
     }
 }
+.newsletter-subscribe {
+    margin: 3rem 0;
+    fieldset {
+        margin: 0;
+    }
+}
diff --git a/design/sass/_global.scss b/design/sass/_global.scss
index 7ca7b9a..0d81bba 100644
--- a/design/sass/_global.scss
+++ b/design/sass/_global.scss
@@ -175,6 +175,18 @@ h5 {
         line-height: 1.4;
     }
 }
+.subhead {
+    font-size: 26px !important;
+    font-style: italic;
+    margin-top: 0;
+    margin-bottom: 0;
+}
+.subhead + p {
+    margin-top: .75rem !important;
+}
+.essay-intro .subhead + p:first-of-type {
+    margin-top: .75rem !important;
+}
 //**************  Universals ************************
 .hide {
     display: none;
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;
 }