diff options
Diffstat (limited to 'design/sass/_header.scss')
| -rw-r--r-- | design/sass/_header.scss | 231 |
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; } |