From: Steve Sutton Date: Fri, 1 May 2015 19:32:05 +0000 (-0400) Subject: Big Changes X-Git-Url: http://cvs2.gaslightmedia.com/gitweb/?a=commitdiff_plain;h=a4601a07461ef77cfae72f7503bfeca007671035;p=web%2FGruntInit%2FglmTheme.git Big Changes Taking out lots from _structure sass partial. Moving them to other partials. _blog.scss _body.scss _content.scss _copyright.scss _main.scss _page.footer.scss _page.header.scss _shadow.wrapper.scss _sidebar.scss _slideshow.scss _topbar.scss --- diff --git a/root/index.html b/root/index.html index 1d82568..d82f7ce 100644 --- a/root/index.html +++ b/root/index.html @@ -148,7 +148,7 @@
- +

Img description here.

@@ -162,17 +162,17 @@
- +

State Licensed

Just 74 days after the Emmet County Board of Commissioners gave their approval for the County to assume EMS services, the state has put its stamp of approval on the operations as well.

Read More...
- +

New M-119 Location

Emmet County continues to move forward on its new facility to house the ambulances and related equipment currently being constructed on M-119, near Pleasantview Road.

Read More...
- +

New Rig

Progress is being made in Emmet County’s efforts to provide ambulance services in Northwest Michigan, with the arrival of one of several new ambulances Oct. 9 in Petoskey.

Read More...
diff --git a/root/scss/_blog.scss b/root/scss/_blog.scss new file mode 100644 index 0000000..cd4b829 --- /dev/null +++ b/root/scss/_blog.scss @@ -0,0 +1,159 @@ +#front { + padding: 10px; + .row.collapse { + h1 { + border-bottom: 1px solid #d1d2d4; + } + .row { + margin-bottom: 20px; + .detail { + padding-left: 25px; + margin: 0 auto; + h2 { + margin: 0; + } + img { + margin-top: 5px; + border: 3px solid $white; + -webkit-box-shadow: 0px 0px 5px 0px #ababab; + -moz-box-shadow: 0px 0px 5px 0px #ababab; + -ms-box-shadow: 0px 0px 5px 0px #ababab; + box-shadow: 0px 0px 5px 0px #ababab; + } + p { + font-size: rem-calc(12); + margin: 0; + } + a { + font-size: rem-calc(12); + } + } + } + .row.collapse { + img { + margin-left: 15px; + margin-top: 5px; + border: 3px solid $white; + -webkit-box-shadow: 0px 0px 5px 0px #ababab; + -moz-box-shadow: 0px 0px 5px 0px #ababab; + -ms-box-shadow: 0px 0px 5px 0px #ababab; + box-shadow: 0px 0px 5px 0px #ababab; + } + } + h4 { + line-height: 1.3; + } + ul { + list-style: none; + margin: 10px 0; + li { + font-size: rem-calc(10); + color: $aluminum; + padding: 0 0 5px; + a { + font-size: rem-calc(11); + &.more { + color: $d-blue; + font-weight: bold; + text-transform: uppercase; + } + } + } + } + #video { + padding: 0; + margin-top: 30px; + float: left; + h2 { + margin-top: 20px; + font-size: rem-calc(18); + @media #{$medium-only} { + margin-top: 15px + } + @media #{$small-only} { + margin: 0; + } + } + a { + font-size: 12px; + } + img { + margin-left: 25px; + @media #{$small-only} { + margin: 0; + } + } + } + footer { + img { + margin: 35px 0 0; + } + #address { + margin: 25px 0; + p { + font-size: 12px; + margin-top: 5px; + } + img { + margin: 0; + padding-right: 5px; + } + a { + font-size: 12px; + } + } + img { + box-shadow: none; + } + } + } +} + +.blogbutton { + background: $green; + border: 2px solid $white; + font-weight: bold; + font-size: 13px; + padding: 0 3px; + margin-top: -10px; + text-transform: uppercase; + &:hover { + background: $white; + border: 2px solid $green; + color: $green; + } +} +article { + padding: 0 15px 10px; + margin-bottom: 15px; + display: inline-block; + width: 100%; + .entry-header { + background: transparent; + } + p { + padding-bottom: 15px; + } + a.read-more { + background: $green; + border: 2px solid $white; + font-weight: bold; + font-size: 13px; + padding: 0 3px; + text-transform: uppercase; + &:hover { + background: $white; + border: 2px solid $green; + color: $green; + } + } +} +#searchform { + div { + input { + &[type="text"] { + width: 95%; + } + } + } +} diff --git a/root/scss/_body.scss b/root/scss/_body.scss new file mode 100644 index 0000000..f02e5c7 --- /dev/null +++ b/root/scss/_body.scss @@ -0,0 +1,15 @@ +body { + background: url(../assets/bkgrd.jpg) no-repeat fixed; + background-size: cover; + .shadow-wrapper { + margin: 0 auto; + background: $white; + box-shadow: 0 0 15px -6px $black; + -ms-box-shadow: 0 0 15px -6px $black; + -moz-box-shadow: 0 0 15px -6px $black; + -webkit-box-shadow: 0 0 15px -6px $black; + + max-width: 1000px; + padding-top: rem-calc(20); + } +} diff --git a/root/scss/_content.scss b/root/scss/_content.scss new file mode 100644 index 0000000..e69de29 diff --git a/root/scss/_copyright.scss b/root/scss/_copyright.scss new file mode 100644 index 0000000..c2aa849 --- /dev/null +++ b/root/scss/_copyright.scss @@ -0,0 +1,18 @@ +#copyright { + padding: 20px 0; + margin: 0 auto; + float: none; + p { + font-size: rem-calc(10); + } + a { + color: $black; + } +} +#footer_address span.bullet, +#copyright span.bullet { + margin: 0 5px; + @media #{$small-only} { + display: none !important; + } +} diff --git a/root/scss/_main.scss b/root/scss/_main.scss new file mode 100644 index 0000000..81a7da7 --- /dev/null +++ b/root/scss/_main.scss @@ -0,0 +1,32 @@ +.breadcrumbs { + margin-top: 10px; +} +#content-bulk { + #con { + margin: 0; + } + h2 { + text-transform: uppercase; + font-size: 25px; + } + footer { + margin: 35px 0; + #address { + margin-top: 25px; + p { + font-size: 12px; + margin-top: 5px; + } + img { + margin: 0; + padding-right: 5px; + } + a { + font-size: 12px; + } + } + img { + box-shadow: none; + } + } +} diff --git a/root/scss/_page.footer.scss b/root/scss/_page.footer.scss new file mode 100644 index 0000000..49194fd --- /dev/null +++ b/root/scss/_page.footer.scss @@ -0,0 +1,26 @@ +#connect { + padding-top: 20px; + background: #4c4d4f; + ul{ + margin: 0; + list-style: none; + li { + background: none; + padding: 0 5px; + display: inline-block; + & > a { + display: block; + font-family: Open Sans, sans-serif; + font-size: 12px; + color: #fff; + padding: 20px 18px; + line-height: 1.2; + } + a { + &#current { + background: $l-blue; + } + } + } + } +} diff --git a/root/scss/_page.header.scss b/root/scss/_page.header.scss new file mode 100644 index 0000000..0162053 --- /dev/null +++ b/root/scss/_page.header.scss @@ -0,0 +1,96 @@ +header { + height: auto; + & #logo { + img { + margin-bottom: 15px; + } + } + & .search { + input { + height: 20px; + width: 167px; + padding: 0 8px; + margin: 13px 0px 0px 18px; + border-radius: 3px; + font-size: 10px; + color: $black; + display: inline-block; + } + a { + &.magnifying-glass { + font-size: 10em; /* This controls the size. */ + display: inline-block; + width: rem-calc(10); + height: rem-calc(10); + border: rem-calc(2) solid $d-blue; + position: relative; + border-radius: 0.35em; + margin: 0 0 0 -25px; + &:before { + content: ""; + display: inline-block; + position: absolute; + right: rem-calc(-7); + bottom: rem-calc(-4); + border-width: 0; + background: $d-blue; + width: rem-calc(8); + height: rem-calc(2); + -webkit-transform: rotate(45deg); + -moz-transform: rotate(45deg); + -ms-transform: rotate(45deg); + transform: rotate(45deg); + } + } + } + } + #sec-nav { + position: relative; + text-align: left; + padding: 10px 0; + margin: 0 0 15px 45px; + ul { + margin: 0; + li { + display: inline; + a { + font-size: 12px; + color: $d-blue; + padding: 0 5px; + font-weight: bold; + } + } + } + & > ul > li { + position: relative; + &:before { + color: $aluminum; + content: "|"; + position: absolute; + top: 2px; + left: -15px; + font-size: 14px; + font-weight: bold; + display:block; + padding: 0 10px; + } + &:first-child:before { + content: none; + } + } + } + img { + margin-left: 5px; + } + .social { + margin-top: -25px; + padding-right: 0; + a { + float: right; + margin: 0 5px; + img { + margin: 0; + } + } + } +} diff --git a/root/scss/_page.wrapper.scss b/root/scss/_page.wrapper.scss new file mode 100644 index 0000000..e69de29 diff --git a/root/scss/_settings.scss b/root/scss/_settings.scss index b357ade..9de82ff 100644 --- a/root/scss/_settings.scss +++ b/root/scss/_settings.scss @@ -52,7 +52,7 @@ // - - - - - - - - - - - - - - - - - - - - - - - - - // This is the default html and body font-size for the base rem value. - $rem-base: 16px; +$rem-base: 16px; // Allows the use of rem-calc() or lower-bound() in your settings @import "foundation/functions"; @@ -63,10 +63,10 @@ // Since the typical default browser font-size is 16px, that makes the calculation for grid size. // If you want your base font-size to be different and not have it affect the grid breakpoints, // set $rem-base to $base-font-size and make sure $base-font-size is a px value. -// $base-font-size: 100%; +$base-font-size: 100%; // The $base-font-size is 100% while $base-line-height is 150% -// $base-line-height: 150%; +$base-line-height: 150%; // We use this to control whether or not CSS classes come through in the gem files. $include-html-classes: true; @@ -79,62 +79,62 @@ $include-html-global-classes: $include-html-classes; // $include-html-grid-classes: $include-html-classes; // $include-xl-html-grid-classes: false; -// $row-width: rem-calc(960); -// $total-columns: 12; -// $column-gutter: rem-calc(30); +$row-width: rem-calc(960); +$total-columns: 12; +$column-gutter: rem-calc(30); -// $last-child-float: $opposite-direction; +//$last-child-float: $opposite-direction; // c. Global // - - - - - - - - - - - - - - - - - - - - - - - - - // We use these to define default font stacks - $font-family-sans-serif: "Open Sans", sans-serif; -// $font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; -// $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; +$font-family-sans-serif: "Open Sans", sans-serif; +$font-family-serif: Georgia, Cambria, "Times New Roman", Times, serif; +$font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; // We use these to define default font weights -// $font-weight-normal: normal; -// $font-weight-bold: bold; - - $white : #FFFFFF; -// $ghost : #FAFAFA; -// $snow : #F9F9F9; -// $vapor : #F6F6F6; -// $white-smoke : #F5F5F5; -// $silver : #EFEFEF; -// $smoke : #EEEEEE; -// $gainsboro : #DDDDDD; -// $iron : #CCCCCC; -// $base : #AAAAAA; -// $aluminum : #999999; -// $jumbo : #888888; -// $monsoon : #777777; -// $steel : #666666; -// $charcoal : #555555; -// $tuatara : #444444; -// $oil : #333333; -// $jet : #222222; - $black : #000000; - $green : #008752; - $red : #d2222a; - $d-blue : #131c5f; - $l-blue : #0093d1; +$font-weight-normal: normal; +$font-weight-bold: bold; + +$white : #FFFFFF; +$ghost : #FAFAFA; +$snow : #F9F9F9; +$vapor : #F6F6F6; +$white-smoke : #F5F5F5; +$silver : #EFEFEF; +$smoke : #EEEEEE; +$gainsboro : #DDDDDD; +$iron : #CCCCCC; +$base : #AAAAAA; +$aluminum : #999999; +$jumbo : #888888; +$monsoon : #777777; +$steel : #666666; +$charcoal : #555555; +$tuatara : #444444; +$oil : #333333; +$jet : #222222; +$black : #000000; +$green : #008752; +$red : #d2222a; +$d-blue : #131c5f; +$l-blue : #0093d1; // We use these as default colors throughout -// $primary-color: #008CBA; -// $secondary-color: #e7e7e7; -// $alert-color: #f04124; -// $success-color: #43AC6A; -// $warning-color: #f08a24; -// $info-color: #a0d3e8; +$primary-color: #008CBA; +$secondary-color: #e7e7e7; +$alert-color: #f04124; +$success-color: #43AC6A; +$warning-color: #f08a24; +$info-color: #a0d3e8; // We use these to control various global styles // $body-bg: $white; - $body-font-color: $black; -// $body-font-family: $font-family-sans-serif; -// $body-font-weight: $font-weight-normal; -// $body-font-style: normal; +$body-font-color: $black; +$body-font-family: $font-family-sans-serif; +$body-font-weight: $font-weight-normal; +$body-font-style: normal; // We use this to control font-smoothing // $font-smoothing: antialiased; @@ -189,12 +189,12 @@ $medium: $medium-up; $large: $large-up; // We use this as cursors values for enabling the option of having custom cursors in the whole site's stylesheet -// $cursor-crosshair-value: crosshair; -// $cursor-default-value: default; -// $cursor-disabled-value: not-allowed; -// $cursor-pointer-value: pointer; -// $cursor-help-value: help; -// $cursor-text-value: text; +$cursor-crosshair-value: crosshair; +$cursor-default-value: default; +$cursor-disabled-value: not-allowed; +$cursor-pointer-value: pointer; +$cursor-help-value: help; +$cursor-text-value: text; // e. Typography // - - - - - - - - - - - - - - - - - - - - - - - - - @@ -202,41 +202,41 @@ $large: $large-up; // $include-html-type-classes: $include-html-classes; // We use these to control header font styles -// $header-font-family: $body-font-family; -// $header-font-weight: $font-weight-normal; -// $header-font-style: normal; -// $header-font-color: $jet; -// $header-line-height: 1.4; -// $header-top-margin: .2rem; -// $header-bottom-margin: .5rem; -// $header-text-rendering: optimizeLegibility; +$header-font-family: $body-font-family; +$header-font-weight: $font-weight-normal; +$header-font-style: normal; +$header-font-color: $jet; +$header-line-height: 1.4; +$header-top-margin: .2rem; +$header-bottom-margin: .5rem; +$header-text-rendering: optimizeLegibility; // We use these to control header font sizes - $h1-font-size: rem-calc(28); - $h2-font-size: rem-calc(18); - $h3-font-size: rem-calc(17); - $h4-font-size: rem-calc(16); - $h5-font-size: rem-calc(16); +$h1-font-size: rem-calc(28); +$h2-font-size: rem-calc(18); +$h3-font-size: rem-calc(17); +$h4-font-size: rem-calc(16); +$h5-font-size: rem-calc(16); // $h6-font-size: 1rem; // We use these to control header size reduction on small screens - $h1-font-reduction: rem-calc(5); - $h2-font-reduction: rem-calc(0); - $h3-font-reduction: rem-calc(0); - $h4-font-reduction: rem-calc(0); -// $h5-font-reduction: 0; -// $h6-font-reduction: 0; +$h1-font-reduction: rem-calc(5); +$h2-font-reduction: rem-calc(0); +$h3-font-reduction: rem-calc(0); +$h4-font-reduction: rem-calc(0); +$h5-font-reduction: 0; +$h6-font-reduction: 0; // These control how subheaders are styled. -// $subheader-line-height: 1.4; -// $subheader-font-color: scale-color($header-font-color, $lightness: 35%); -// $subheader-font-weight: $font-weight-normal; -// $subheader-top-margin: .2rem; -// $subheader-bottom-margin: .5rem; +$subheader-line-height: 1.4; +$subheader-font-color: scale-color($header-font-color, $lightness: 35%); +$subheader-font-weight: $font-weight-normal; +$subheader-top-margin: .2rem; +$subheader-bottom-margin: .5rem; // A general styling -// $small-font-size: 60%; -// $small-font-color: scale-color($header-font-color, $lightness: 35%); +$small-font-size: 60%; +$small-font-color: scale-color($header-font-color, $lightness: 35%); // We use these to style paragraphs // $paragraph-font-family: inherit; diff --git a/root/scss/_shadow.wrapper.scss b/root/scss/_shadow.wrapper.scss new file mode 100644 index 0000000..e69de29 diff --git a/root/scss/_sidebar.scss b/root/scss/_sidebar.scss new file mode 100644 index 0000000..daa4767 --- /dev/null +++ b/root/scss/_sidebar.scss @@ -0,0 +1,113 @@ +#sidebar { + padding-top: 25px; + background: #f2f9fc; + .row.collapse { + margin-left: 14px; + } + a { + font-size: 12px; + } + form { + margin: 0 12px 0 14px; + select { + padding: 0 rem-calc(8); + border-radius: 5px; + height: 25px; + option { + font-size: 10px; + } + } + } + .small-block-grid-2 { + margin-top: 10px; + li { + padding: 0 rem-calc(10) rem-calc(10); + img { + border: 2px solid $l-blue; + } + } + & > li:nth-of-type(2), & > li:nth-of-type(4) { + padding-left: 0; + } + } + h3 { + margin: 20px 0 0; + } + h1 { + margin: 0; + font-size: rem-calc(25); + text-transform: none; + } + input { + padding: 5px 0 5px 8px; + height: auto; + margin: 10px 0; + } + button { + border-radius: 2px; + padding: 0 10px; + } +} +#side-nav { + padding-top: 10px; + background: #f2f9fc; + h1 { + font-size: rem-calc(22); + margin: 5px 0 25px; + } + h4 { + font-weight: bold; + margin-left: 10px; + } + ul { + list-style: none; + margin: 0 0 20px; + li { + margin: 0 -15px; + padding: 5px 10px 5px 25px; + &:hover { + background: #81adc1; + } + a { + color: $d-blue; + &:hover { + color: $white; + } + } + } + } + h3 { + text-transform: none; + margin: 0; + } + input { + padding: 5px 0 5px 8px; + height: auto; + margin-bottom: 10px; + } + button { + border-radius: 2px; + padding: 0 10px; + } +} +#extra { + margin-top: 15px; + p { + line-height: 1.3; + &.title { + margin: 0; + &#last { + padding-top: 10px; + } + } + &#message { + text-transform: uppercase; + color: $l-blue; + font-size: rem-calc(15); + margin: 40px 0; + } + } +} +.county-news { + font-weight: bold; +} diff --git a/root/scss/_slideshow.scss b/root/scss/_slideshow.scss new file mode 100644 index 0000000..8ac6032 --- /dev/null +++ b/root/scss/_slideshow.scss @@ -0,0 +1,15 @@ +#slideshow { + border-bottom: 5px solid $d-blue; + margin-top: -10px; + #caption { + background: rgba(0, 0, 0, 0.75); + color: $white; + margin-top: -51px; + p { + padding: 10px 5px; + font-size: 12px; + margin: 0; + text-align: right; + } + } +} diff --git a/root/scss/_structure.scss b/root/scss/_structure.scss index 163febb..3df1d63 100644 --- a/root/scss/_structure.scss +++ b/root/scss/_structure.scss @@ -11,795 +11,3 @@ //11. Footer //12. Copyright -//1. Body -body { - background: url(../assets/bkgrd.jpg) no-repeat fixed; - background-size: cover; - .shadow-wrapper { - margin: 0 auto; - background: $white; - box-shadow: 0 0 15px -6px $black; - -ms-box-shadow: 0 0 15px -6px $black; - -moz-box-shadow: 0 0 15px -6px $black; - -webkit-box-shadow: 0 0 15px -6px $black; - - max-width: 1000px; - padding-top: rem-calc(20); - } -} -//End of Body - -//2. Header -header { - height: auto; - & #logo { - img { - margin-bottom: 15px; - } - } - & .search { - input { - height: 20px; - width: 167px; - padding: 0 8px; - margin: 13px 0px 0px 18px; - border-radius: 3px; - font-size: 10px; - color: $black; - display: inline-block; - } - a { - &.magnifying-glass { - font-size: 10em; /* This controls the size. */ - display: inline-block; - width: rem-calc(10); - height: rem-calc(10); - border: rem-calc(2) solid $dark-blue; - position: relative; - border-radius: 0.35em; - margin: 0 0 0 -25px; - &:before { - content: ""; - display: inline-block; - position: absolute; - right: rem-calc(-7); - bottom: rem-calc(-4); - border-width: 0; - background: $dark-blue; - width: rem-calc(8); - height: rem-calc(2); - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - } - } - } - } - #sec-nav { - position: relative; - text-align: left; - padding: 10px 0; - margin: 0 0 15px 45px; - ul { - margin: 0; - li { - display: inline; - a { - font-size: 12px; - color: $dark-blue; - padding: 0 5px; - font-weight: bold; - } - } - } - & > ul > li { - position: relative; - &:before { - color: $grey; - content: "|"; - position: absolute; - top: 2px; - left: -15px; - font-size: 14px; - font-weight: bold; - display:block; - padding: 0 10px; - } - &:first-child:before { - content: none; - } - } - } - img { - margin-left: 5px; - } - .social { - margin-top: -25px; - padding-right: 0; - a { - float: right; - margin: 0 5px; - img { - margin: 0; - } - } - } -} -//End of Header - -//3. Fonts -h1, h3 { - color: $green; - text-transform: uppercase; -} -h2, h4 { - color: $dark-blue; -} -//End of Fonts - -//4. Top Bar -.contain-to-grid { - box-shadow: 0 5px 10px -1px $grey; - .top-bar { - height: 73px; - box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.5); - margin-bottom: 10px; - } -} -.tab-bar { - .tab-bar-section.middle { -// left: 0; -// right: 2.8125rem; - text-align: right; - } -} -.top-bar-section { - background: transparent; - float: none; - margin-left: auto; - margin-right: auto; - display: inline-block; - height: auto; - line-height: 1; - ul{ - li { - background: none; - padding: 12px 0; - border-left: 2px solid $white; - max-width: 166.5px; - line-height: 1.25; - &:first-child { - border: none; - } - &:hover { - background: $white; - } - a { - text-align: center; - padding: 0 20px; - font-size: 20px; - font-weight: bold; - color: $white; - &:hover { - color: $dark-blue; - text-shadow: 0 0 1px $dark-blue; - text-shadow: 1 0 1px $dark-blue; - text-shadow: 0 1 1px $dark-blue; - text-shadow: -1 0 1px $dark-blue; - text-shadow: 0 -1 1px $dark-blue; - } - } - &:not(.has-form):not(.active) { - & > a:not(.button) { - background: transparent; - } - } - &.drop-left { - ul.dropdown { - padding-left: 21px; - padding-right: 250px; - top: 74px; - background: $white; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - min-width: 500px; - box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); - -ms-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); - li { - white-space: nowrap; - border-bottom: 1px solid #e7e7e8; - padding: 5px 0; - &.nav-img-container { - img { - position: absolute; - right: 20px; - top: 23px; - border: 6px solid #fdefd4; - } - border: none; - } - a { - padding-left: 0; - text-align: left; - font-size: 18px; - &:hover { - color: $dark-blue; - text-shadow: 0 0 1px $green; - text-shadow: 1 0 1px $green; - text-shadow: 0 1 1px $green; - text-shadow: -1 0 1px $green; - text-shadow: 0 -1 1px $green; - } - } - } - } - } - &.drop-right { - ul.dropdown { - padding-left: 250px; - padding-right: 21px; - right: -1%; - left: auto; - top: 74px; - background: $white; - border-bottom-left-radius: 10px; - border-bottom-right-radius: 10px; - min-width: 500px; - box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); - -ms-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); - -moz-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); - -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); - li { - white-space: nowrap; - background: $white; - text-align: right; - border-bottom: 1px solid #e7e7e8; - padding: 5px 0; - &.nav-img-container { - img { - position: absolute; - left: 20px; - top: 23px; - border: 6px solid #fdefd4; - } - border: none; - } - a { - padding-left: 0; - text-align: left; - font-size: 18px; - &:hover { - color: $dark-blue; - text-shadow: 0 0 1px $green; - text-shadow: 1 0 1px $green; - text-shadow: 0 1 1px $green; - text-shadow: -1 0 1px $green; - text-shadow: 0 -1 1px $green; - } - } - } - } - } - } - } -} -//End of Top Bar - -//5. Off-Canvas -.left-off-canvas-menu { - ul { - &.search { - input[type="text"] { - width: 85%; - } - .magnifying-glass { - font-size: 10em; /* This controls the size. */ - display: inline-block; - width: rem-calc(15); - height: rem-calc(15); - border: rem-calc(2) solid $dark-blue; - position: relative; - border-radius: 0.35em; - float: right; - margin: -45px 45px 0 0; - &:before { - content: ""; - display: inline-block; - position: absolute; - right: rem-calc(-7); - bottom: rem-calc(-4); - border-width: 0; - background: $dark-blue; - width: rem-calc(10); - height: rem-calc(3); - -webkit-transform: rotate(45deg); - -moz-transform: rotate(45deg); - -ms-transform: rotate(45deg); - transform: rotate(45deg); - } - } - } - &#address { - li { - margin: 0; - a#email { - font-size: rem-calc(14); - - } - } - } - &#off-nav { - position: relative; - text-align: center; - padding: 10px 0; - margin-left: 0; - li { - display: inline; - a { - font-size: 14px; - color: $white; - font-weight: bold; - padding: 0 3px; - &:hover { - color: $dark-blue; - } - } - } - & > li { - position: relative; - &:before { - color: $white; - content: "|"; - position: absolute; - top: -2px; - left: -16px; - font-size: 17px; - font-weight: bold; - display:block; - padding: 0 10px; - } - &:first-child:before { - content: none; - } - } - } - } -} -.right-off-canvas-menu { - ul { - list-style: none; - margin: 10px; - li { - color: $white; - &.title { - margin: 10px 0 0; - } - &#off-message { - text-transform: uppercase; - color: $light-blue; - margin: 15px 0 5px; - } - h3 { - text-transform: none; - &.county-news { - font-weight: bold; - } - } - } - input[type="text"], input[type="email"] { - width: 85%; - } - button { - border-radius: 2px; - padding: 0 10px; - } - } -} -//End of Off-Canvas - -//6. Main -.breadcrumbs { - margin-top: 10px; -} -#content-bulk { - #con { - margin: 0; - } - h2 { - text-transform: uppercase; - font-size: 25px; - } - footer { - margin: 35px 0; - #address { - margin-top: 25px; - p { - font-size: 12px; - margin-top: 5px; - } - img { - margin: 0; - padding-right: 5px; - } - a { - font-size: 12px; - } - } - img { - box-shadow: none; - } - } -} -//End of Main - -//7. Slideshow -#slideshow { - border-bottom: 5px solid $dark-blue; - margin-top: -10px; - #caption { - background: rgba(0, 0, 0, 0.75); - color: $white; - margin-top: -51px; - p { - padding: 10px 5px; - font-size: 12px; - margin: 0; - text-align: right; - } - } -} -//End of Slideshow - -//8. Blog -#front { - padding: 10px; - .row.collapse { - h1 { - border-bottom: 1px solid #d1d2d4; - } - .row { - margin-bottom: 20px; - .detail { - padding-left: 25px; - margin: 0 auto; - h2 { - margin: 0; - } - img { - margin-top: 5px; - border: 3px solid $white; - -webkit-box-shadow: 0px 0px 5px 0px #ababab; - -moz-box-shadow: 0px 0px 5px 0px #ababab; - -ms-box-shadow: 0px 0px 5px 0px #ababab; - box-shadow: 0px 0px 5px 0px #ababab; - } - p { - font-size: rem-calc(12); - margin: 0; - } - a { - font-size: rem-calc(12); - } - } - } - .row.collapse { - img { - margin-left: 15px; - margin-top: 5px; - border: 3px solid $white; - -webkit-box-shadow: 0px 0px 5px 0px #ababab; - -moz-box-shadow: 0px 0px 5px 0px #ababab; - -ms-box-shadow: 0px 0px 5px 0px #ababab; - box-shadow: 0px 0px 5px 0px #ababab; - } - } - h4 { - line-height: 1.3; - } - ul { - list-style: none; - margin: 10px 0; - li { - font-size: rem-calc(10); - color: $grey; - padding: 0 0 5px; - a { - font-size: rem-calc(11); - &.more { - color: $dark-blue; - font-weight: bold; - text-transform: uppercase; - } - } - } - } - #video { - padding: 0; - margin-top: 30px; - float: left; - h2 { - margin-top: 20px; - font-size: rem-calc(18); - @media #{$medium-only} { - margin-top: 15px - } - @media #{$small-only} { - margin: 0; - } - } - a { - font-size: 12px; - } - img { - margin-left: 25px; - @media #{$small-only} { - margin: 0; - } - } - } - footer { - img { - margin: 35px 0 0; - } - #address { - margin: 25px 0; - p { - font-size: 12px; - margin-top: 5px; - } - img { - margin: 0; - padding-right: 5px; - } - a { - font-size: 12px; - } - } - img { - box-shadow: none; - } - } - } -} - -.blogbutton { - background: $green; - border: 2px solid $white; - font-weight: bold; - font-size: 13px; - padding: 0 3px; - margin-top: -10px; - text-transform: uppercase; - &:hover { - background: $white; - border: 2px solid $green; - color: $green; - } -} -article { - padding: 0 15px 10px; - margin-bottom: 15px; - display: inline-block; - width: 100%; - .entry-header { - background: transparent; - } - p { - padding-bottom: 15px; - } - a.read-more { - background: $green; - border: 2px solid $white; - font-weight: bold; - font-size: 13px; - padding: 0 3px; - text-transform: uppercase; - &:hover { - background: $white; - border: 2px solid $green; - color: $green; - } - } -} -#searchform { - div { - input { - &[type="text"] { - width: 95%; - } - } - } -} -//End of Blog - -//9. Sidebar -#sidebar { - padding-top: 25px; - background: #f2f9fc; - .row.collapse { - margin-left: 14px; - } - a { - font-size: 12px; - } - form { - margin: 0 12px 0 14px; - select { - padding: 0 rem-calc(8); - border-radius: 5px; - height: 25px; - option { - font-size: 10px; - } - } - } - .small-block-grid-2 { - margin-top: 10px; - li { - padding: 0 rem-calc(10) rem-calc(10); - img { - border: 2px solid $light-blue; - } - } - & > li:nth-of-type(2), & > li:nth-of-type(4) { - padding-left: 0; - } - } - h3 { - margin: 20px 0 0; - } - h1 { - margin: 0; - font-size: rem-calc(25); - text-transform: none; - } - input { - padding: 5px 0 5px 8px; - height: auto; - margin: 10px 0; - } - button { - border-radius: 2px; - padding: 0 10px; - } -} -#side-nav { - padding-top: 10px; - background: #f2f9fc; - h1 { - font-size: rem-calc(22); - margin: 5px 0 25px; - } - h4 { - font-weight: bold; - margin-left: 10px; - } - ul { - list-style: none; - margin: 0 0 20px; - li { - margin: 0 -15px; - padding: 5px 10px 5px 25px; - &:hover { - background: #81adc1; - } - a { - color: $dark-blue; - &:hover { - color: $white; - } - } - } - } - h3 { - text-transform: none; - margin: 0; - } - input { - padding: 5px 0 5px 8px; - height: auto; - margin-bottom: 10px; - } - button { - border-radius: 2px; - padding: 0 10px; - } -} -#extra { - margin-top: 15px; - p { - line-height: 1.3; - &.title { - margin: 0; - &#last { - padding-top: 10px; - } - } - &#message { - text-transform: uppercase; - color: $light-blue; - font-size: rem-calc(15); - margin: 40px 0; - } - } -} -.county-news { - font-weight: bold; -} -//End of Sidebar - -//10. Links -a { - color: $light-blue; - &:hover { - color: $light-blue; - } -} -//End of Links - -//11. Footer -#connect { - padding-top: 20px; - background: #4c4d4f; - ul{ - margin: 0; - list-style: none; - li { - background: none; - padding: 0 5px; - display: inline-block; - & > a { - display: block; - font-family: Open Sans, sans-serif; - font-size: 12px; - color: #fff; - padding: 20px 18px; - line-height: 1.2; - } - a { - &#current { - background: $light-blue; - } - } - } - } -} -//End of Footer - -//12. Copyright -#copyright { - padding: 20px 0; - margin: 0 auto; - float: none; - p { - font-size: rem-calc(10); - } - a { - color: $black; - } -} -#footer_address span.bullet, -#copyright span.bullet { - margin: 0 5px; - @media #{$small-only} { - display: none !important; - } -} -//End of Copyright - -/* Google Map */ -#map_container { - padding: 5px; - background: lightgrey; - display: table; - float: none; - margin: 0 auto; -} -#map_directions .button { - width: 100%; - margin: 0; -} -/* End Google Map */ diff --git a/root/scss/_topbar.scss b/root/scss/_topbar.scss new file mode 100644 index 0000000..002ab83 --- /dev/null +++ b/root/scss/_topbar.scss @@ -0,0 +1,147 @@ +.contain-to-grid { + box-shadow: 0 5px 10px -1px $aluminum; + .top-bar { + height: 73px; + box-shadow: 0 3px 3px 0 rgba(0, 0, 0, 0.5); + margin-bottom: 10px; + } +} +.tab-bar { + .tab-bar-section.middle { +// left: 0; +// right: 2.8125rem; + text-align: right; + } +} +.top-bar-section { + background: transparent; + float: none; + margin-left: auto; + margin-right: auto; + display: inline-block; + height: auto; + line-height: 1; + ul{ + li { + background: none; + padding: 12px 0; + border-left: 2px solid $white; + max-width: 166.5px; + line-height: 1.25; + &:first-child { + border: none; + } + &:hover { + background: $white; + } + a { + text-align: center; + padding: 0 20px; + font-size: 20px; + font-weight: bold; + color: $white; + &:hover { + color: $d-blue; + text-shadow: 0 0 1px $d-blue; + text-shadow: 1 0 1px $d-blue; + text-shadow: 0 1 1px $d-blue; + text-shadow: -1 0 1px $d-blue; + text-shadow: 0 -1 1px $d-blue; + } + } + &:not(.has-form):not(.active) { + & > a:not(.button) { + background: transparent; + } + } + &.drop-left { + ul.dropdown { + padding-left: 21px; + padding-right: 250px; + top: 74px; + background: $white; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + min-width: 500px; + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); + -ms-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); + li { + white-space: nowrap; + border-bottom: 1px solid #e7e7e8; + padding: 5px 0; + &.nav-img-container { + img { + position: absolute; + right: 20px; + top: 23px; + border: 6px solid #fdefd4; + } + border: none; + } + a { + padding-left: 0; + text-align: left; + font-size: 18px; + &:hover { + color: $d-blue; + text-shadow: 0 0 1px $green; + text-shadow: 1 0 1px $green; + text-shadow: 0 1 1px $green; + text-shadow: -1 0 1px $green; + text-shadow: 0 -1 1px $green; + } + } + } + } + } + &.drop-right { + ul.dropdown { + padding-left: 250px; + padding-right: 21px; + right: -1%; + left: auto; + top: 74px; + background: $white; + border-bottom-left-radius: 10px; + border-bottom-right-radius: 10px; + min-width: 500px; + box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); + -ms-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); + -moz-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); + -webkit-box-shadow: 0 8px 10px -5px rgba(0, 0, 0, 0.5); + li { + white-space: nowrap; + background: $white; + text-align: right; + border-bottom: 1px solid #e7e7e8; + padding: 5px 0; + &.nav-img-container { + img { + position: absolute; + left: 20px; + top: 23px; + border: 6px solid #fdefd4; + } + border: none; + } + a { + padding-left: 0; + text-align: left; + font-size: 18px; + &:hover { + color: $d-blue; + text-shadow: 0 0 1px $green; + text-shadow: 1 0 1px $green; + text-shadow: 0 1 1px $green; + text-shadow: -1 0 1px $green; + text-shadow: 0 -1 1px $green; + } + } + } + } + } + } + } +} diff --git a/root/scss/app.scss b/root/scss/app.scss index f1be3f7..41e913f 100644 --- a/root/scss/app.scss +++ b/root/scss/app.scss @@ -2,44 +2,16 @@ @import "foundation"; @import "mixins"; @import "wordpress"; +@import "body"; +@import "page.header"; +@import "topbar"; +@import "main"; +@import "slideshow"; +@import "blog"; +@import "sidebar"; +@import "page.footer"; +@import "copyright"; @import "structure"; @import "left-off-canvas"; //@import "right-off-canvas"; -// Or selectively include components -// @import -// "foundation/components/accordion", -// "foundation/components/alert-boxes", -// "foundation/components/block-grid", -// "foundation/components/breadcrumbs", -// "foundation/components/button-groups", -// "foundation/components/buttons", -// "foundation/components/clearing", -// "foundation/components/dropdown", -// "foundation/components/dropdown-buttons", -// "foundation/components/flex-video", -// "foundation/components/forms", -// "foundation/components/grid", -// "foundation/components/inline-lists", -// "foundation/components/joyride", -// "foundation/components/keystrokes", -// "foundation/components/labels", -// "foundation/components/magellan", -// "foundation/components/orbit", -// "foundation/components/pagination", -// "foundation/components/panels", -// "foundation/components/pricing-tables", -// "foundation/components/progress-bars", -// "foundation/components/reveal", -// "foundation/components/side-nav", -// "foundation/components/split-buttons", -// "foundation/components/sub-nav", -// "foundation/components/switches", -// "foundation/components/tables", -// "foundation/components/tabs", -// "foundation/components/thumbs", -// "foundation/components/tooltips", -// "foundation/components/top-bar", -// "foundation/components/type", -// "foundation/components/offcanvas", -// "foundation/components/visibility";