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
<div class="main">
<div class="row">
<div id="slideshow">
- <img src="assets/slid-rig.jpg">
+ <img src="http://placehold.it/1000x400">
<div class="medium-4 columns show-for-medium-up" id="slide_descrip">
<p>Img description here.</p>
</div>
</div>
<div class="row">
<div class="small-12 large-4 columns small-text-center large-text-left blocks">
- <img src="assets/licensed.jpg">
+ <img src="http://placehold.it/267x193">
<h1>State Licensed</h1>
<p>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.</p><a href="#">Read More...</a>
</div>
<div class="small-12 large-4 columns small-text-center large-text-left blocks">
- <img src="assets/m-119.jpg">
+ <img src="http://placehold.it/267x193">
<h1>New M-119 Location</h1>
<p>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.</p><a href="#">Read More...</a>
</div>
<div class="small-12 large-4 columns small-text-center large-text-left blocks">
- <img src="assets/rig.jpg">
+ <img src="http://placehold.it/267x193">
<h1>New Rig</h1>
<p>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.</p><a href="#">Read More...</a>
</div>
--- /dev/null
+#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%;
+ }
+ }
+ }
+}
--- /dev/null
+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);
+ }
+}
--- /dev/null
+#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;
+ }
+}
--- /dev/null
+.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;
+ }
+ }
+}
--- /dev/null
+#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;
+ }
+ }
+ }
+ }
+}
--- /dev/null
+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;
+ }
+ }
+ }
+}
// - - - - - - - - - - - - - - - - - - - - - - - - -
// 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";
// 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;
// $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;
$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
// - - - - - - - - - - - - - - - - - - - - - - - - -
// $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 <small> 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;
--- /dev/null
+#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;
+}
--- /dev/null
+#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;
+ }
+ }
+}
//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 */
--- /dev/null
+.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;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
@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";
projects / web / GruntInit / glmTheme.git / commitdiff