summaryrefslogtreecommitdiff
path: root/design/sass/_header.scss
diff options
context:
space:
mode:
Diffstat (limited to 'design/sass/_header.scss')
-rw-r--r--design/sass/_header.scss281
1 files changed, 106 insertions, 175 deletions
diff --git a/design/sass/_header.scss b/design/sass/_header.scss
index 87cd180..9824ddd 100644
--- a/design/sass/_header.scss
+++ b/design/sass/_header.scss
@@ -1,189 +1,120 @@
-.header-wrapper {
- @include breakpoint(beta) {
- border-bottom: 1px #f3efef solid;
- }
+///********** class for header and footer menus *********{{{
+.menu-item {
+ color: lighten($secondary_link_color, 20);
+ display: inline-block;
+ margin: 0 0.25rem;
}
-.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;
- 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;
- }
- }
- nav {
- float: right;
- border: none;
- margin: 42px 0 0 0;
- padding: 0;
- ul {
- max-width: 50em;
- }
- }
- }
+.menu-item:after {
+ content: "\00b7";
+ color: #9d9d9d;
+ padding-left: 0.5rem;
}
-
-.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;
- }
- }
+.menu-item:first-of-type {
+ margin-left: 0;
+}
+.menu-item:last-of-type {
+ margin-right: 0;
}
-
-
-.black nav[role="navigation"] a, .dark nav[role="navigation"] a {
- color: $body_font_light;
+.menu-item:last-of-type:after {
+ content: " ";
}
-
-
+.menu-item a, .menu-item a:visited {
+ text-decoration: none;
+ color: $secondary_link_color;
+}
+//}}}
+///********** Header Styles *****************************{{{
.header-wrapper {
- @extend %clearfix;
- margin-bottom: 1em;
- @include breakpoint(beta) {
+ padding-top: 6px;
+ margin: 0 auto;
+ //smcaps
+ text-transform: uppercase;
+ letter-spacing: 1px;
+ font-family: mffnweb, Helvetica, sans-serif;
+ text-align: center;
+}
+.header-wrapper a {
+ text-decoration: none;
+}
+.header-wrapper ul {
+ list-style-type: none;
+ padding: 0;
+}
+.header-wrapper nav {
+ border-top: 1px #444444 dotted;
+ border-bottom: 1px #444444 dotted;
+ margin: 1rem 0;
+ padding: 0 0.5em;
+ font-weight: 600;
+ font-size: .8125rem;;
+ line-height: 1.2;
+}
+// Rules for wider Layout
+@media screen and (min-width: 750px) {
+ .header-wrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
border-bottom: 1px #f3efef solid;
- position: relative;
- }
- @include breakpoint(gamma) {
- max-width: $breakpoint-gamma;
- margin-left: auto;
- margin-right: auto;
+ margin-top: 1.25rem;
+ max-width: 96%;
}
- @include breakpoint(delta) {
- margin-top: 1.3rem;
- max-width: $breakpoint-delta;
+ .header-wrapper nav {
+ border: none;
+ margin-top: 1.7rem;
}
- @include breakpoint(epsilon) {
- margin-top: 1.3rem;
- max-width: $max_width;
+}
+//Slight adjust for full width
+@media screen and (min-width: 1440px) {
+ .header-wrapper {
+ max-width: 1440px;
}
}
-.detail .header-wrapper, .detail #breadcrumbs {
- transition: opacity .5s;
- @include breakpoint(epsilon) {
- opacity: .8;
- &:hover {
- opacity: 1;
- }
+//Logo styles
+.logo-link {
+ display: block;
+ font-weight: 300;
+ font-family: 'carrois_gothicregular', Helvetica, sans-serif;
+ color: $secondary_link_color;
+ font-size: 2rem;
+}
+.logo-link:before {
+ display: block;
+ content: "home-icon";
+ background: url("logo-new-@2x-treeonly.png") center top no-repeat;
+ width: 95px;
+ height: 65px;
+ background-size: 95px;
+ background-size: 85px;
+ margin: 5px auto;
+ text-indent: -9999em;
+}
+@media screen and (min-width: 750px) {
+ .logo-link {
+ text-align: left;
+ margin-top: 1.25rem;
}
+ .logo-link:before {
+ float: left;
+ height: 85px;
+ width: 105px;
+ background-size: 102px;
+ margin: -1rem 10px -4px 0;
+ }
+}
+//handle the funky text of the subtitle
+.sitesubtitle {
+ display: block;
+ margin-top: -8px;
+ margin-bottom: 10px;
+ font-family: mffweb, Georgia, 'Times New Roman', serif;
+ font-style: italic;
+ font-weight: 300;
+ font-size: .75rem;
}
-
-.black .header-wrapper, .dark .header-wrapper {
- @include breakpoint(beta) {
- border-bottom: 1px $body_font_light solid;
+@media screen and (min-width: 750px) {
+ .sitesubtitle {
+ text-align: left;
}
}
-
+//}}}
generated by cgit v1.2.3-70-g09d2 (git 2.47.0) at 2025-04-19 04:54:15 +0000