Slick Playground

- - - - - +

+ + + +

\ No newline at end of file diff --git a/parts/svg-map.php b/parts/svg-map.php new file mode 100644 index 0000000..648c393 --- /dev/null +++ b/parts/svg-map.php @@ -0,0 +1,656 @@ + + + diff --git a/scss/_main.scss b/scss/_main.scss index ca5b4f1..b374113 100644 --- a/scss/_main.scss +++ b/scss/_main.scss @@ -67,20 +67,9 @@ body .stButton .sharethis { } .front-blog-container{ position: relative; - background: url("../assets/posts-bg.jpg"); - background-position: center; - background-repeat: no-repeat; - background-size: cover; - z-index: 2; -} -.front-blog-bg-overlay{ - z-index: -1; - position: absolute; - bottom: 0; - height: 100%; - width: 100%; - background-color: rgba(95,110,255,0.5); + margin: 25px auto 50px auto; } + .home-feed-post-image{ img{ @@ -114,7 +103,7 @@ body .stButton .sharethis { margin: 0; a{ display: block; - color: white; + color: $green; line-height: 1; font-size: 24px; } @@ -126,12 +115,11 @@ body .stButton .sharethis { margin-bottom: 10px; } .post-excerpt{ - color: white; + color: black; line-height: 1.1; margin-bottom: 20px; - height: 37px; margin-bottom: 10px; - overflow: hidden; + // overflow: hidden; font-size: 16px; } .read-more{ @@ -216,4 +204,50 @@ body .stButton .sharethis { } #ui-datepicker-div{ display: none; -} \ No newline at end of file +} +#front-social{ + li.social-icon{ + list-style: none; + display: inline-block; + margin-right: 5px; + a{ + display: block; + } + } +} +.action-items-container{ + min-width: 100% !important; + min-height: 100px; + background: $green; + position: relative; + margin-bottom: 50px; + &::before{ + background: url('../assets/repeating-pattern-green-up.png'); + background-position: top center; + background-repeat: repeat-x; + content: ""; + position: absolute; + top: -27px; + width: 100%; + height: 30px; + } + &::after{ + background: url('../assets/repeating-pattern-green-down.png'); + background-position: top center; + background-repeat: repeat-x; + content: ""; + position: absolute; + bottom: -27px; + width: 100%; + height: 30px; + } +} +// svg map +.svg-map-container{ + + #escanaba-map{ + // width: 100%; + // max-height: 400px; + } + // max-height: 600px; +} diff --git a/scss/_page.footer.scss b/scss/_page.footer.scss index 744a3cb..7493ddf 100644 --- a/scss/_page.footer.scss +++ b/scss/_page.footer.scss @@ -1,4 +1,6 @@ footer.main { + background: $blue; + // position: absolute; // bottom: 0; // left: 0; diff --git a/scss/_page.header.scss b/scss/_page.header.scss index b8c7152..a75a9ea 100644 --- a/scss/_page.header.scss +++ b/scss/_page.header.scss @@ -22,12 +22,13 @@ header { } @media #{$large-up}{ - position: absolute; - bottom: 0px; + // position: absolute; + // bottom: 0px; + } .logo-link{ display: block; - float: right; + float: left; } } height: auto; diff --git a/scss/_settings.scss b/scss/_settings.scss index 284b146..78a754d 100644 --- a/scss/_settings.scss +++ b/scss/_settings.scss @@ -92,13 +92,14 @@ $column-gutter: rem-calc(30); $font-family-sans-serif: "Open Sans", sans-serif; $font-family-serif: 'El Messiri', Cambria, "Times New Roman", Times, serif; $font-family-monospace: Consolas, "Liberation Mono", Courier, monospace; -$custom-font : 'El Messiri',"Open Sans"; +$roboto : 'Robot Slab',"Open Sans"; +$caveat : 'Caveat'; // We use these to define default font weights $font-weight-normal: normal; $font-weight-bold: bold; $white : #FFFFFF; -$ghost : #FAFAFA; +$grey : #d1d2d4; $snow : #F9F9F9; $vapor : #F6F6F6; $white-smoke : #F5F5F5; @@ -114,12 +115,12 @@ $steel : #666666; $charcoal : #555555; $tuatara : #444444; $oil : #333333; -$jet : #222222; +$yellow : #ffd100; $black : #000000; -$green : #6c9a13; +$green : #95d500; $red : #fc6463; -$blue : #506fb2; -$l-blue : #90c3ea; +$blue : #0065a0; +$l-blue : #bbdaeb; $l-green : #8dc819; // We use these as default colors throughout @@ -210,19 +211,19 @@ $cursor-text-value: text; $header-font-family: $body-font-family; $header-font-weight: $font-weight-normal; $header-font-style: normal; -$header-font-color: $jet; +$header-font-color: $black; $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(48); +$h1-font-size: rem-calc(36); $h2-font-size: rem-calc(36); -$h3-font-size: rem-calc(24); -$h4-font-size: rem-calc(24); -$h5-font-size: rem-calc(20); -$h6-font-size: rem-calc(18); +$h3-font-size: rem-calc(36); +$h4-font-size: rem-calc(36); +$h5-font-size: rem-calc(28); +$h6-font-size: rem-calc(24); // We use these to control header size reduction on small screens $h1-font-reduction: rem-calc(10); @@ -1402,17 +1403,17 @@ $crumb-slash: ">"; // $topbar-title-font-size: rem-calc(17); // Set the link colors and styles for top-level nav -// $topbar-link-color: $white; -$topbar-link-color-hover: $blue; -$topbar-link-color-active: $blue; -$topbar-link-color-active-hover: $blue; +$topbar-link-color: $blue; +$topbar-link-color-hover: $green; +$topbar-link-color-active: $green; +$topbar-link-color-active-hover: $green; // $topbar-link-weight: $font-weight-normal; $topbar-link-font-size: rem-calc(16); // $topbar-link-hover-lightness: -10%; // Darken by 10% // $topbar-link-bg: $topbar-bg; // $topbar-link-bg-hover: $d-blue; // $topbar-link-bg-color-hover: $d-blue; -$topbar-link-bg-active: $white; +$topbar-link-bg-active: transparent; $topbar-link-bg-active-hover: transparent; // $topbar-link-font-family: $body-font-family; // $topbar-link-text-transform: none; @@ -1423,11 +1424,12 @@ $topbar-link-bg-active-hover: transparent; // $topbar-button-top: 7px; // Style the top bar dropdown elements -// $topbar-dropdown-bg: $white; +$topbar-dropdown-bg: transparent; // $topbar-dropdown-link-color: $black; -// $topbar-dropdown-link-color-hover: $green; -// $topbar-dropdown-link-bg: $white; -// $topbar-dropdown-link-bg-hover: $white; +$topbar-dropdown-link-color-hover: $green; +$topbar-dropdown-link-bg: transparent; +$topbar-dropdown-link-bg-hover: transparent; + // $topbar-dropdown-link-weight: $font-weight-normal; // $topbar-dropdown-toggle-size: 5px; // $topbar-dropdown-toggle-color: $white; diff --git a/scss/_slideshow.scss b/scss/_slideshow.scss index 0b1ddab..a23fb3b 100644 --- a/scss/_slideshow.scss +++ b/scss/_slideshow.scss @@ -1,4 +1,10 @@ #slideshow { + ul{ + margin: 0; + li{ + list-style: none; + } + } margin-top: 120px; #caption { background: rgba(0, 0, 0, 0.75); diff --git a/scss/_structure.scss b/scss/_structure.scss index 40ebc51..b0af8f1 100644 --- a/scss/_structure.scss +++ b/scss/_structure.scss @@ -12,32 +12,32 @@ } //6. Main h1{ - font-family: $custom-font; + font-family: $roboto; font-weight: bold; - color: $green; + color: $blue; } h2{ - font-family: $custom-font; + font-family: $roboto; font-weight: bold; - color: $blue; + color: $green; } h3{ - font-family: $custom-font; + font-family: $roboto; font-weight: bold; - color: $l-blue; + color: $yellow; } h4{ - font-family: "Roboto Slab",Open Sans; - color: $green; + font-family: $caveat; + color: $yellow; } h5{ - font-family: Open Sans, sans-serif; + font-family: $roboto; font-weight: bold; color: $blue; } h6{ - font-family: Open Sans, sans-serif; - color: $l-blue; + font-family: $roboto; + color: $green; font-weight: bold; } //6. Main diff --git a/scss/_topbar.scss b/scss/_topbar.scss index 38352d6..b964307 100644 --- a/scss/_topbar.scss +++ b/scss/_topbar.scss @@ -31,37 +31,60 @@ background-color: white; float: left; color: black; - margin-left: 60px; - // margin-left: auto; - // margin-right: auto; height: auto; - line-height: 1; + & > ul > li{ + padding-bottom: 25px !important; + } ul{ + // + display: block; + width: 100%; + height: auto; li { background-color: white; padding: 0 1.2rem; - max-width: 100px; line-height: 1; + display: inline-block; a { - color: $green; + color: $blue; padding: 0 3px !important; line-height: 1 !important; + + } &:not(.has-form):not(.active) { & > a:not(.button) { background: transparent; } } + ul.dropdown { - li:not(.topbar-member) { - width: auto; + -moz-column-count: 2; + -webkit-column-count: 2; + column-count: 2; + background-color: rgba(255,255,255,.95); + top: 55px; + border-bottom-left-radius: 6px; + border-bottom-right-radius: 6px; + // botpxtom: 0px; + // column-fill: auto; + // min-width: 450px !important; + + li { + // width: auto; + background-color: transparent; + float: none; + padding-bottom: 10px; a { + background-color: transparent; border-top-left-radius: 0; border-top-right-radius: 0; text-align: left; } &:not(.has-form):not(.active) { & > a:not(.button) { + background-color: transparent; + color: $blue; font-size: rem-calc(16); padding: 10px 14px; @@ -87,176 +110,28 @@ } } } - #venues,#destinations{ - background: white; - border: 1px solid $blue; - height: auto; - padding: 15px; - } - .member-dropdown{ - top: 47px; - min-width: 1200px; - left: 0%; - transform: translateX(-50%); - } - } - .topbar-member{ - min-height: 150px; - // min-width: 155px; - width: 16% !important; - margin-bottom: 10px; - // border: 1px dashed black; - padding-right: 12px !important; - background: transparent; - div.member-name{ - line-height: 1; - background: transparent; - color: $blue; - &:hover{ - color: $green; - } - } - a.member-link{ - display: block; - white-space: normal; - background: transparent !important; - - } - .member-image{ - margin-bottom: 10px; - image-rendering: -webkit-optimize-contrast; - } - } - #interactive-map > li,#dropdown-destination > li,#dropdown-venues > li{ - padding-bottom: 17px !important; - } - .map-dropdown{ - top: 47px; - background: white; - border: 2px $blue solid; - min-width: 600px; - } - - .hover-region-text{ - pointer-events: none; - &:hover{ - cursor: pointer; - } - } - .hover-region{ - &:hover{ - fill: $blue; - cursor: pointer; - } - } - #Text rect{ - fill: transparent; - cursor: pointer; - pointer-events: none; - } - } - .top-bar-section > ul >li a{ - text-transform: uppercase !important; + // text-transform: uppercase !important; } .top-bar-section > ul >li.has-dropdown{ position: relative; - &:hover::after{ - content: ''; - height: 0; - width: 0; - border: 8px solid transparent; - border-top-color: $green; - position: absolute; - bottom: 0px; - left: 50%; - margin-left: -8px; - - } -} -#dropdown-venues{ - .member-dropdown{ - left: -130%; - @media(max-width: 1200px) and (min-width: 1025px){ - min-width: 1020px; - left: -170%; - } - .topbar-member{ - .member-name{ - font-size: 16px; - } - } - } -} -#dropdown-destination{ - .member-dropdown{ - @media(max-width: 1200px) and (min-width: 1025px){ - min-width: 1020px; - left: -10%; - } - .topbar-member{ - .member-name{ - font-size: 16px; - } - } - } -} - -body #page-wrapper .rfp-menu { - padding-bottom: 17px; - & > ul.dropdown { - width: auto; - padding: 7px; - min-width: 185px; - left: 0%; - li{ - width: 100%; - line-height: 1; - &:not(:last-child){ - margin-bottom: 10px; - } - padding-left: 5px; - padding-right: 5px; - a{ - background: white; - // text-align: center; - color: $blue; - white-space: initial; - line-height: 1; - font-size: 16px; - &:hover{ - color: green; - } - } - } - - background-color:white; - top: 47px; - border: 1px solid $blue; - } -} -#region-map{ - display: block; - max-width: 630px; - margin: 0 auto; - width: 100%; + // &:hover::after{ + // content: ''; + // height: 0; + // width: 0; + // border: 8px solid transparent; + // border-top-color: $green; + // position: absolute; + // bottom: 0px; + // left: 50%; + // margin-left: -8px; - // @include breakpoint(small only){ - // height: auto; // } - margin-top: 50px; - .region{ - &:hover{ - // fill: red; - } - } -} -.region-link{ - font-size: 13px; } + -moz-document url-prefix() { #region-map{ height: auto; diff --git a/sections/front-page.php b/sections/front-page.php index 4aea0f9..8b57391 100644 --- a/sections/front-page.php +++ b/sections/front-page.php @@ -7,10 +7,35 @@

- -

- +

+ +

E NEWS SIGNUP

+ image gallery +

+ +

\ No newline at end of file diff --git a/sections/header.php b/sections/header.php index 2078692..2843e38 100644 --- a/sections/header.php +++ b/sections/header.php @@ -1,9 +1,9 @@

+ -