diff --git a/changelog.txt b/changelog.txt index 4d63dca..f069b1f 100644 --- a/changelog.txt +++ b/changelog.txt @@ -1,5 +1,14 @@ == Changelog == += 1.1 - 28 November 2017 = +* Additional styling for the post format gallery slider. +* Updated image caption styling. +* Updated Calendar widget styling. +* Added a posts slider loop for use in the Page Builder Post Loop widget. +* Added posts slider support for Jetpack Featured Content. +* Added bottom bar social widget support. +* Added a header overlap page setting. + = 1.0 - 22 November 2017 = * Added additional page settings. * Added post format support for Gallery, Image, Video. diff --git a/footer.php b/footer.php index 46db334..bb138ee 100644 --- a/footer.php +++ b/footer.php @@ -53,7 +53,17 @@ } ?> - 'menu-2', 'container_class' => 'footer-menu', 'depth' => 1, 'fallback_cb' => '' ) ); ?> + + + diff --git a/functions.php b/functions.php index 6a52a62..08deb03 100644 --- a/functions.php +++ b/functions.php @@ -168,7 +168,7 @@ function siteorigin_corp_scripts() { // Flexslider. wp_register_script( 'jquery-flexslider', get_template_directory_uri() . '/js/jquery.flexslider' . SITEORIGIN_THEME_JS_PREFIX . '.js', array( 'jquery' ), '2.6.3', true ); - if ( is_single() && has_post_format( 'gallery' ) ) { + if ( is_home() && siteorigin_corp_has_featured_posts() ) { wp_enqueue_script( 'jquery-flexslider' ); } diff --git a/inc/extras.php b/inc/extras.php index b3c9c9c..c7b0510 100644 --- a/inc/extras.php +++ b/inc/extras.php @@ -16,6 +16,11 @@ */ function siteorigin_corp_body_classes( $classes ) { + // Header margin. + if ( is_home() && siteorigin_corp_has_featured_posts() ) { + $classes[] = 'no-header-margin'; + } + // Mobile compatibility classes. $classes[] = 'css3-animations'; $classes[] = 'no-js'; @@ -31,9 +36,10 @@ function siteorigin_corp_body_classes( $classes ) { if ( ! empty( $page_settings ) ) { if ( ! empty( $page_settings['layout'] ) ) $classes[] = 'page-layout-' . $page_settings['layout']; + if ( ! empty( $page_settings['overlap'] ) && ( $page_settings['overlap'] != 'disabled' ) ) $classes[] = 'overlap-' . $page_settings['overlap']; if ( empty( $page_settings['header_margin'] ) ) $classes[] = 'no-header-margin'; if ( empty( $page_settings['footer_margin'] ) ) $classes[] = 'no-footer-margin'; - } + } // Responsive layout. $classes[] = 'responsive'; diff --git a/inc/jetpack.php b/inc/jetpack.php index a9fd9e9..4c46c88 100644 --- a/inc/jetpack.php +++ b/inc/jetpack.php @@ -15,6 +15,15 @@ * See: https://jetpack.me/support/responsive-videos/ */ function siteorigin_corp_jetpack_setup() { + /* + * Enable support for Jetpack Featured Content. + * See https://jetpack.com/support/featured-content/ + */ + add_theme_support( 'featured-content', array( + 'filter' => 'siteorigin_corp_get_featured_posts', + 'post_types' => array( 'post' ), + ) ); + /* * Enable support for Jetpack Infinite Scroll. * See https://jetpack.com/support/infinite-scroll/ diff --git a/inc/settings.php b/inc/settings.php index 36f66ee..da369aa 100644 --- a/inc/settings.php +++ b/inc/settings.php @@ -331,6 +331,14 @@ function siteorigin_corp_settings_init() { 'description' => esc_html__( 'Hide the SiteOrigin link in your footer.', 'siteorigin-corp' ), 'teaser' => true, ), + 'social_widget' => array( + 'type' => 'widget', + 'widget_class' => 'SiteOrigin_Widget_SocialMediaButtons_Widget', + 'bundle_widget' => 'social-media-buttons', + 'plugin' => 'so-widgets-bundle', + 'plugin_name' => esc_html__( 'SiteOrigin Widgets Bundle', 'siteorigin-corp' ), + 'description' => esc_html__( 'Add social icons to bottom bar menu.', 'siteorigin-corp' ), + ), 'widget_title' => array( 'type' => 'color', 'label' => esc_html__( 'Widget Title Color', 'siteorigin-corp' ), @@ -447,7 +455,6 @@ function siteorigin_corp_font_settings( $settings ) { function siteorigin_corp_settings_custom_css( $css ) { // Custom CSS. $css .= '/* style */ - /**** /private/var/folders/_s/htpl50fd5d70c9hb2nnvjnjh0000gn/T/B6bssz/sass/style.css ***/ body,button,input,select,optgroup,textarea { color: ${typography_text}; .font( ${typography_body_font} ); @@ -519,30 +526,32 @@ function siteorigin_corp_settings_custom_css( $css ) { a:hover,a:focus,a:active { color: ${typography_text}; } + .main-navigation ul ul li a { + background: ${navigation_drop_down_background}; + border-color: ${navigation_drop_down_divider}; + color: ${navigation_drop_down_link}; + } .main-navigation ul ul li:hover > a { color: ${navigation_drop_down_link_hover}; } .main-navigation ul ul li:first-of-type { border-top: 2px solid ${navigation_link_accent}; } - .main-navigation ul ul a { - background: ${navigation_drop_down_background}; - border-bottom: 1px solid ${navigation_drop_down_divider}; - color: ${navigation_drop_down_link}; - } .main-navigation ul li { .font( ${typography_heading_font} ); } - .main-navigation ul a { - border-bottom: 2px solid ${header_background}; + .main-navigation ul li a { color: ${navigation_link}; } + #site-navigation.main-navigation ul .menu-button a { + background: ${typography_accent}; + } + #site-navigation.main-navigation ul .menu-button a:hover { + background: .rgba( ${typography_accent}, .8); + } .main-navigation div > ul > li:hover > a { border-color: ${navigation_link_accent}; } - .main-navigation div > ul > li.menu-item-has-children:hover > a,.main-navigation div > ul > li.page_item_has_children:hover > a { - border-color: ${header_background}; - } .main-navigation div > ul > li.current a,.main-navigation div > ul > li.current_page_item > a,.main-navigation div > ul > li.current-menu-item > a,.main-navigation div > ul > li.current_page_ancestor > a,.main-navigation div > ul > li.current-menu-ancestor > a { border-color: ${navigation_link_accent}; } @@ -635,11 +644,17 @@ function siteorigin_corp_settings_custom_css( $css ) { .widget-area .widget a:hover,.site-footer .widget a:hover { color: ${typography_accent}; } + .calendar_wrap { + border: 1px solid ${typography_border}; + } .widget #wp-calendar caption { color: ${typography_heading}; } - .widget #wp-calendar thead { - border-bottom: 2px solid ${typography_border}; + .widget #wp-calendar tbody td a { + color: ${typography_accent}; + } + .widget #wp-calendar tbody td a:hover { + color: ${typography_text}; } .widget #wp-calendar tfoot #prev a,.widget #wp-calendar tfoot #next a { color: ${typography_heading}; @@ -647,10 +662,10 @@ function siteorigin_corp_settings_custom_css( $css ) { .widget #wp-calendar tfoot #prev a:hover,.widget #wp-calendar tfoot #next a:hover { color: ${typography_accent}; } - .widget_categories .cat-item { + .widget_archive li,.widget_categories li { color: ${typography_secondary_text}; } - .widget_categories .cat-item a { + .widget_archive li a,.widget_categories li a { color: ${typography_heading}; } .widget_recent_comments .recentcomments { @@ -874,6 +889,9 @@ function siteorigin_corp_settings_custom_css( $css ) { .site-footer .bottom-bar a:hover { color: ${footer_bottom_bar_link_hover}; } + .wp-caption { + color: ${typography_secondary_text}; + } .featured-posts-slider .slides .slide { background-color: ${typography_text}; }'; @@ -1024,12 +1042,23 @@ function siteorigin_corp_page_settings( $settings, $type, $id ) { ), ); + $settings['overlap'] = array( + 'type' => 'select', + 'label' => esc_html__( 'Header Overlap', 'siteorigin-corp' ), + 'options' => array( + 'disabled' => esc_html__( 'Disabled', 'siteorigin-corp' ), + 'enabled' => esc_html__( 'Enabled', 'siteorigin-corp' ), + 'light' => esc_html__( 'Enabled - Light Text', 'siteorigin-corp' ), + 'dark' => esc_html__( 'Enabled - Dark Text', 'siteorigin-corp' ), + ), + ); + $settings['header_margin'] = array( 'type' => 'checkbox', 'label' => esc_html__( 'Header Bottom Margin', 'siteorigin-corp' ), 'checkbox_label' => esc_html__( 'Enable', 'siteorigin-corp' ), 'description' => esc_html__( 'Display the margin below the header.', 'siteorigin-corp' ) - ); + ); $settings['page_title'] = array( 'type' => 'checkbox', @@ -1060,11 +1089,12 @@ function siteorigin_corp_page_settings( $settings, $type, $id ) { * Add the default Page Settings. */ function siteorigin_corp_setup_page_setting_defaults( $defaults, $type, $id ) { - $defaults['layout'] = 'default'; - $defaults['header_margin'] = true; - $defaults['page_title'] = true; - $defaults['footer_margin'] = true; - $defaults['footer_widgets'] = true; + $defaults['layout'] = 'default'; + $defaults['overlap'] = 'disabled'; + $defaults['header_margin'] = true; + $defaults['page_title'] = true; + $defaults['footer_margin'] = true; + $defaults['footer_widgets'] = true; return $defaults; } diff --git a/inc/template-tags.php b/inc/template-tags.php index 0427973..36fe114 100644 --- a/inc/template-tags.php +++ b/inc/template-tags.php @@ -142,8 +142,8 @@ function siteorigin_corp_display_icon( $type ) { - - + + - - + + count( $featured_posts ) ) + return false; + + return true; +} + +if ( ! function_exists( 'siteorigin_corp_display_featured_posts' ) ) : +/** + * Output the Jetpack Featured Content. + */ +function siteorigin_corp_display_featured_posts() { + if ( is_home() && siteorigin_corp_has_featured_posts() ) { + get_template_part( 'template-parts/featured', 'slider' ); + } +} +endif; +add_action( 'siteorigin_corp_content_before', 'siteorigin_corp_display_featured_posts' ); + if ( ! function_exists( 'siteorigin_corp_strip_gallery' ) ) : /** * Remove gallery. diff --git a/loops/loop-blog.php b/loops/loop-blog.php index 5a74b16..9713d08 100644 --- a/loops/loop-blog.php +++ b/loops/loop-blog.php @@ -1,6 +1,6 @@ + + + + diff --git a/readme.txt b/readme.txt index d9ee697..4dac6b5 100644 --- a/readme.txt +++ b/readme.txt @@ -34,6 +34,7 @@ A modern business theme from SiteOrigin. Corp is versatile and quick to customiz SiteOrigin Corp includes support for the following plugins: * [Breadcrumb NavXT](https://wordpress.org/plugins/breadcrumb-navxt/) +* [Jetpack Featured Content](https://jetpack.com/support/featured-content/) * [Jetpack Infinite Scroll](https://jetpack.com/support/infinite-scroll/) * [Jetpack Responsive Videos](https://jetpack.com/support/responsive-videos/) * [Page Builder by SiteOrigin](https://wordpress.org/plugins/siteorigin-panels/) diff --git a/sass/media/_captions.scss b/sass/media/_captions.scss index ff3a5a2..5ec23ea 100644 --- a/sass/media/_captions.scss +++ b/sass/media/_captions.scss @@ -1,5 +1,6 @@ .wp-caption { - font-size: 14px; + color: $color__text-light; + font-size: 13px; max-width: 100%; img[class*="wp-image-"] { @@ -7,10 +8,10 @@ } .wp-caption-text { - margin: 12px 0; + margin: 14px 0; } } .wp-caption-text { - text-align: center; + text-align: left; } diff --git a/sass/media/_flexslider.scss b/sass/media/_flexslider.scss index f6beb17..41f120c 100644 --- a/sass/media/_flexslider.scss +++ b/sass/media/_flexslider.scss @@ -20,21 +20,21 @@ } .flex-direction-nav a { + background: rgba(0, 0, 0, .5); cursor: pointer; display: block; - margin-top: -12.5px; + height: 48px; + margin-top: -24px; opacity: 0; position: absolute; text-align: center; top: 50%; transition: all .3s ease-in-out; + width: 48px; z-index: 10; &:hover { - - svg path { - fill: rgba(255, 255, 255, .9); - } + background: rgba(0, 0, 0, .7); } @at-root .flexslider:hover .flex-direction-nav a { @@ -42,11 +42,11 @@ } &.flex-prev { - left: 20px; + left: 0; } &.flex-next { - right: 20px; + right: 0; } &:focus { @@ -54,24 +54,29 @@ } svg { - height: 27px; - width: auto; + height: 20px; + margin-top: 14px; + width: 11px; path { - fill: rgba(255, 255, 255, .6); + fill: #fff; transition: .3s; } } } .flex-control-nav { - bottom: 15px; + bottom: 30px; margin: 0; padding: 0; position: absolute; text-align: center; width: 100%; + @media (max-width: 480px) { + display: none; + } + li { display: inline-block; margin: 0 5px; diff --git a/sass/media/_media.scss b/sass/media/_media.scss index 66258dc..277f848 100644 --- a/sass/media/_media.scss +++ b/sass/media/_media.scss @@ -7,7 +7,7 @@ padding: 0; } -/* Make sure embeds and iframes fit their containers. */ +// Make sure embeds and iframes fit their containers. embed, iframe, object { diff --git a/sass/media/_posts-slider.scss b/sass/media/_posts-slider.scss index 32f7d1d..acf39e9 100644 --- a/sass/media/_posts-slider.scss +++ b/sass/media/_posts-slider.scss @@ -9,7 +9,8 @@ background-color: $color__text-medium; background-position: center; background-size: cover; - height: 520px; + height: 500px; + position: relative; @media (max-width: 768px) { height: 380px; @@ -17,46 +18,54 @@ @media (max-width: 480px) { height: 155px; - } - + } + .overlay a { - background: rgba(0, 0, 0, .5); + background: rgba(0, 0, 0, .3); display: block; height: 100%; position: absolute; width: 100%; - } + } .slide-content { text-align: center; - padding: 160px 10% 0; + margin-top: -37.5px; position: absolute; + top: 50%; width: 100%; z-index: 3; - @media (max-width: 768px) { - padding-top: 80px; - } - @media (max-width: 480px) { - padding-top: 30px; - } + margin-top: -15.5px; + } @at-root .widget_siteorigin-panels-postloop & { - padding: 15% 10%; + + } + + .entry-meta span { + color: #fff; + margin-bottom: 20px; + + @media (max-width: 480px) { + display: none; + } + + a:hover { + color: #fff; + } } .entry-title { font-size: 46px; + font-weight: normal; margin-bottom: 0; position: relative; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); z-index: 3; @media (max-width: 768px) { font-size: 41px; - line-height: 1.1; - margin-bottom: 10px; } @media (max-width: 480px) { @@ -65,26 +74,8 @@ a { color: #fff; - - &:hover { - color: rgba(255, 255, 255, .8); - } } - } - - .entry-excerpt { - color: rgba(255, 255, 255, .9); - font-size: 18px; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); - - @media (max-width: 768px) { - font-size: 16px; - } - - @media (max-width: 480px) { - display: none; - } - } + } } } } diff --git a/sass/navigation/_menus.scss b/sass/navigation/_menus.scss index 4778e1e..5e30e20 100644 --- a/sass/navigation/_menus.scss +++ b/sass/navigation/_menus.scss @@ -14,9 +14,9 @@ opacity: 0; position: absolute; text-align: left; - top: 16px; + top: 20px; transform: scale(0.95); - transition: all 0.15s ease-in; + transition: all .15s ease-in; transform-origin: center top; visibility: hidden; z-index: 99999; @@ -34,13 +34,14 @@ a { background: $color__navigation-drop-down-background; - border-bottom: 1px solid $color__navigation-drop-down-divider; + border-bottom: 1px solid; + border-color: $color__navigation-drop-down-divider; color: $color__navigation-drop-down-link; font-size: 12px; font-weight: normal; max-width: 100%; padding: 12px 20px; - white-space: nowrap; + white-space: nowrap; } &:hover > a { @@ -88,13 +89,14 @@ } a { - border-bottom: 2px solid $color__header-background; + border-bottom: 2px solid transparent; color: $color__navigation-link; display: block; font-weight: bold; letter-spacing: 1px; + padding-bottom: 4px; } - } + } // If a class of 'left' is added to a menu item, break drop down menu items to the left. .left { @@ -143,7 +145,7 @@ } // If a class of .menu-button is added to a menu item, style it as a button. - .menu-button { + @at-root #site-navigation#{&} .menu-button { margin-bottom: 0; padding-bottom: 0; @@ -160,6 +162,7 @@ &:hover { background: rgba($color__accent, .8); + border: none; color: #fff; } } @@ -169,13 +172,18 @@ // First level items. div > ul > li { - &:hover > a { - border-color: $color__navigation_link_accent; + // Page Settings: Overlap with colors. + .overlap-light & > a { + color: #fff; } - &.menu-item-has-children:hover > a, - &.page_item_has_children:hover > a { - border-color: $color__header-background; + .overlap-dark & > a { + color: #2d2d2d; + } + + &:hover > a { + border-bottom: 2px solid; + border-color: $color__navigation_link_accent; } &.current a, @@ -206,6 +214,14 @@ path { fill: $color__navigation-link; + + .overlap-light & { + fill: #fff; + } + + .overlap-dark & { + fill: #2d2d2d; + } } } } @@ -246,6 +262,10 @@ path { fill: $color__navigation-link; + + .overlap-light & { + fill: #fff; + } } } } @@ -499,18 +519,19 @@ $sel: ''; ## Footer Menu --------------------------------------------------------------*/ .footer-menu { - float: right; font-size: 13px; text-align: right; - width: 70%; @media (max-width: 768px) { - float: none; padding-top: 15px; text-align: center; width: 100%; } + > div { + display: inline-block; + } + .menu { list-style: none; margin: 0; diff --git a/sass/site/_footer.scss b/sass/site/_footer.scss index dfb4ee0..10384f1 100644 --- a/sass/site/_footer.scss +++ b/sass/site/_footer.scss @@ -53,10 +53,8 @@ } .site-info { - float: left; font-size: 13px; text-align: left; - width: 30%; @media (max-width: 768px) { float: none; @@ -69,13 +67,7 @@ background: $color__bottom-bar-background; color: $color__bottom-bar-text; overflow: auto; - padding: 25px 0; - - div:only-of-type { - float: none; - text-align: center; - width: 100%; - } + padding: 25px 0; a { color: $color__bottom-bar-link; @@ -84,5 +76,44 @@ color: $color__bottom-bar-link-hover; } } + + .corp-container { + -ms-flex-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + align-items: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-justify-content: space-between; + justify-content: space-between; + width: 100%; + + @media (max-width: 768px) { + flex-direction: column; + } + + div:only-of-type { + float: none; + text-align: center; + width: 100%; + } + } + + .widget { + display: inline-block; + margin: 0 0 0 15px; + + @media (max-width: 768px) { + margin: 0; + padding-top: 15px; + text-align: center; + width: 100%; + } + + a { + + } + } } } diff --git a/sass/site/_header.scss b/sass/site/_header.scss index 0a1c762..00aa7cb 100644 --- a/sass/site/_header.scss +++ b/sass/site/_header.scss @@ -7,27 +7,30 @@ width: 100%; z-index: 999; + body[class*="overlap-"] &:not(.stuck) { + background: transparent; + border: none; + position: absolute; + } + .no-header-margin & { margin-bottom: 0; } - @at-root { - - .topbar-out & { - @include clearfix; - top: 0; - left: 0; - width: 100%; - } + .topbar-out & { + @include clearfix; + top: 0; + left: 0; + width: 100%; + } - .topbar-out.admin-bar & { - top: 32px; + .topbar-out.admin-bar & { + top: 32px; - @media (max-width: 782px) { - top: 46px; - } - } - } + @media (max-width: 782px) { + top: 46px; + } + } @media (max-width: 600px) { @@ -36,6 +39,10 @@ } } + @at-root .topbar-out#{&} { + transition: background 500ms ease; + } + // A class added after scroll. &.stuck { box-shadow: 0 1px 1px rgba(0, 0, 0, .075); @@ -65,7 +72,15 @@ margin: 0; a { - color: $color__site_title; + color: $color__site_title; + + .overlap-light & { + color: #fff; + } + + .overlap-dark & { + color: #2d2d2d; + } } } @@ -85,6 +100,14 @@ font-size: 13px; line-height: normal; margin: -3px 0 0; + + .overlap-light & { + color: #fff; + } + + .overlap-dark & { + color: #2d2d2d; + } } > * { @@ -97,6 +120,10 @@ .masthead-sentinel { margin-bottom: 60px; + body[class*="overlap-"] & { + display: none; + } + .no-header-margin & { margin-bottom: 0; } diff --git a/sass/site/secondary/_widgets.scss b/sass/site/secondary/_widgets.scss index 8d0a1f7..5968266 100644 --- a/sass/site/secondary/_widgets.scss +++ b/sass/site/secondary/_widgets.scss @@ -14,7 +14,7 @@ // Set the font size of elements below the widget title to 14px. ~ * { - font-size: .9333em; + font-size: 14px; } } @@ -43,15 +43,22 @@ /*-------------------------------------------------------------- ## Calendar Widgets --------------------------------------------------------------*/ +.calendar_wrap { + background: #fff; + border: 1px solid $color__background-hr; + padding-left: 6px; +} + .widget #wp-calendar { border: 0; + font-size: 13px; margin: 0; caption { color: $color__text-dark; - font-weight: bold; + font-size: 14px; font-weight: 600; - text-align: left; + padding-top: 14px; } tr:nth-child(2n+2) { @@ -65,14 +72,13 @@ } thead { - border-bottom: 2px solid $color__background-hr; tr { background: none; } th { - padding: 8px 0; + padding: 13px 0 8px; text-align: center; } } @@ -83,21 +89,25 @@ background: none; } - tr:first-of-type td { - padding-top: 8px; - } - td { padding-bottom: 8px; text-align: center; - } + + a { + color: $color__accent; + + &:hover { + color: $color__text-medium; + } + } + } } tfoot { #prev, #next { - padding-top: 4px; + padding: 4px 20px 17px; a { color: $color__text-dark; diff --git a/sass/variables-site/_colors.scss b/sass/variables-site/_colors.scss index cf53f4a..f8da439 100644 --- a/sass/variables-site/_colors.scss +++ b/sass/variables-site/_colors.scss @@ -25,7 +25,7 @@ $color__navigation_link_accent: #f14e4e; $color__navigation-drop-down-background: #262627; $color__navigation-drop-down-divider: #353538; $color__navigation-drop-down-link: #b2b2b2; -$color__navigation-drop-down-link-hover: #ffffff; +$color__navigation-drop-down-link-hover: #fff; $color__navigation-search-overlay_text: #b2b2b2; $color__navigation-search-overlay-background: #090d14; @@ -34,12 +34,12 @@ $color__site_title: #2d2d2d; $color__site_tagline: #929292; // Footer. -$color__footer-widget-title: #ffffff; +$color__footer-widget-title: #fff; $color__footer-widget-text: #b4b5b8; $color__footer-widget-link: #ffffff; $color__footer-widget-link-hover: #b4b5b8; $color__footer-background: #363a43; $color__bottom-bar-text: #b4b5b8; $color__bottom-bar-link: #b4b5b8; -$color__bottom-bar-link-hover: #ffffff; +$color__bottom-bar-link-hover: #fff; $color__bottom-bar-background: #2f333b; diff --git a/style.css b/style.css index 8955f69..453893a 100644 --- a/style.css +++ b/style.css @@ -530,9 +530,9 @@ a { opacity: 0; position: absolute; text-align: left; - top: 16px; + top: 20px; transform: scale(0.95); - transition: all 0.15s ease-in; + transition: all .15s ease-in; transform-origin: center top; visibility: hidden; z-index: 99999; } @@ -546,7 +546,8 @@ a { min-width: 100%; } .main-navigation ul ul li a { background: #262627; - border-bottom: 1px solid #353538; + border-bottom: 1px solid; + border-color: #353538; color: #b2b2b2; font-size: 12px; font-weight: normal; @@ -554,7 +555,7 @@ a { padding: 12px 20px; white-space: nowrap; } .main-navigation ul ul li:hover > a { - color: #ffffff; } + color: #fff; } .main-navigation ul ul li:hover > ul, .main-navigation ul ul li.focus > ul { left: 100%; } @@ -580,11 +581,12 @@ a { .main-navigation ul li:last-of-type { margin-right: 0; } .main-navigation ul li a { - border-bottom: 2px solid #fff; + border-bottom: 2px solid transparent; color: #2d2d2d; display: block; font-weight: bold; - letter-spacing: 1px; } + letter-spacing: 1px; + padding-bottom: 4px; } .main-navigation ul .left .sub-menu, .main-navigation ul .left .children { right: 0; } @@ -612,10 +614,10 @@ a { left: initial; left: auto; right: 100%; } - .main-navigation ul .menu-button { + #site-navigation.main-navigation ul .menu-button { margin-bottom: 0; padding-bottom: 0; } - .main-navigation ul .menu-button a { + #site-navigation.main-navigation ul .menu-button a { background: #f14e4e; border: 0; border-radius: 0; @@ -625,14 +627,17 @@ a { padding: 11px 25px; text-transform: uppercase; transition: .3s; } - .main-navigation ul .menu-button a:hover { + #site-navigation.main-navigation ul .menu-button a:hover { background: rgba(241, 78, 78, 0.8); + border: none; color: #fff; } + .overlap-light .main-navigation div > ul > li > a { + color: #fff; } + .overlap-dark .main-navigation div > ul > li > a { + color: #2d2d2d; } .main-navigation div > ul > li:hover > a { + border-bottom: 2px solid; border-color: #f14e4e; } - .main-navigation div > ul > li.menu-item-has-children:hover > a, - .main-navigation div > ul > li.page_item_has_children:hover > a { - border-color: #fff; } .main-navigation div > ul > li.current a, .main-navigation div > ul > li.current_page_item > a, .main-navigation div > ul > li.current-menu-item > a, @@ -653,6 +658,10 @@ a { width: 17px; } .main-navigation .search-toggle .open svg path { fill: #2d2d2d; } + .overlap-light .main-navigation .search-toggle .open svg path { + fill: #fff; } + .overlap-dark .main-navigation .search-toggle .open svg path { + fill: #2d2d2d; } .main-navigation .search-toggle .close { display: none; } .main-navigation .search-toggle.close-search .open { @@ -676,6 +685,8 @@ a { width: 23px; } #mobile-menu-button svg path { fill: #2d2d2d; } + .overlap-light #mobile-menu-button svg path { + fill: #fff; } #mobile-navigation { background: #262627; @@ -710,7 +721,7 @@ a { text-transform: uppercase; width: 100% !important; } #mobile-navigation ul li a:hover { - color: #ffffff; } + color: #fff; } #mobile-navigation ul li.menu-item-has-children > a { padding-right: 40px; } #mobile-navigation ul li .dropdown-toggle { @@ -723,7 +734,7 @@ a { top: -2px; transition: none; } #mobile-navigation ul li .dropdown-toggle:hover { - color: #ffffff; } + color: #fff; } #mobile-navigation ul li .dropdown-toggle.toggle-open { transform: rotate(-180deg); } #mobile-navigation ul ul { @@ -874,16 +885,15 @@ a { ## Footer Menu --------------------------------------------------------------*/ .footer-menu { - float: right; font-size: 13px; - text-align: right; - width: 70%; } + text-align: right; } @media (max-width: 768px) { .footer-menu { - float: none; padding-top: 15px; text-align: center; width: 100%; } } + .footer-menu > div { + display: inline-block; } .footer-menu .menu { list-style: none; margin: 0; @@ -1119,7 +1129,7 @@ a { text-transform: uppercase; } .widget-area .widget .widget-title ~ *, .site-footer .widget .widget-title ~ * { - font-size: .9333em; } + font-size: 14px; } .widget-area .widget a, .site-footer .widget a { @@ -1143,37 +1153,43 @@ a { /*-------------------------------------------------------------- ## Calendar Widgets --------------------------------------------------------------*/ +.calendar_wrap { + background: #fff; + border: 1px solid #e6e6e6; + padding-left: 6px; } + .widget #wp-calendar { border: 0; + font-size: 13px; margin: 0; } .widget #wp-calendar caption { color: #2d2d2d; - font-weight: bold; + font-size: 14px; font-weight: 600; - text-align: left; } + padding-top: 14px; } .widget #wp-calendar tr:nth-child(2n+2) { background: none; } .widget #wp-calendar th, .widget #wp-calendar td { border: 0; padding: 0; } - .widget #wp-calendar thead { - border-bottom: 2px solid #e6e6e6; } - .widget #wp-calendar thead tr { - background: none; } - .widget #wp-calendar thead th { - padding: 8px 0; - text-align: center; } + .widget #wp-calendar thead tr { + background: none; } + .widget #wp-calendar thead th { + padding: 13px 0 8px; + text-align: center; } .widget #wp-calendar tbody .pad { background: none; } - .widget #wp-calendar tbody tr:first-of-type td { - padding-top: 8px; } .widget #wp-calendar tbody td { padding-bottom: 8px; text-align: center; } + .widget #wp-calendar tbody td a { + color: #f14e4e; } + .widget #wp-calendar tbody td a:hover { + color: #626262; } .widget #wp-calendar tfoot #prev, .widget #wp-calendar tfoot #next { - padding-top: 4px; } + padding: 4px 20px 17px; } .widget #wp-calendar tfoot #prev a, .widget #wp-calendar tfoot #next a { color: #2d2d2d; } @@ -1360,6 +1376,10 @@ a { position: relative; width: 100%; z-index: 999; } + body[class*="overlap-"] .site-header:not(.stuck) { + background: transparent; + border: none; + position: absolute; } .no-header-margin .site-header { margin-bottom: 0; } .topbar-out .site-header { @@ -1378,6 +1398,8 @@ a { @media (max-width: 600px) { .admin-bar .site-header.sticky.stuck { top: 0; } } + .topbar-out.site-header { + transition: background 500ms ease; } .site-header.stuck { box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075); } .site-header .site-header-inner { @@ -1401,6 +1423,10 @@ a { margin: 0; } .site-header .site-branding .site-title a { color: #2d2d2d; } + .overlap-light .site-header .site-branding .site-title a { + color: #fff; } + .overlap-dark .site-header .site-branding .site-title a { + color: #2d2d2d; } .site-header .site-branding img { display: inline-block; vertical-align: middle; } @@ -1413,11 +1439,17 @@ a { font-size: 13px; line-height: normal; margin: -3px 0 0; } + .overlap-light .site-header .site-branding .site-description { + color: #fff; } + .overlap-dark .site-header .site-branding .site-description { + color: #2d2d2d; } .site-header .site-branding > * { transform-origin: left center; } .masthead-sentinel { margin-bottom: 60px; } + body[class*="overlap-"] .masthead-sentinel { + display: none; } .no-header-margin .masthead-sentinel { margin-bottom: 0; } @@ -2107,7 +2139,7 @@ body:not(.single) .hentry { margin: 0 2.75% 95px 0; float: left; } .site-footer .widgets .widget .widget-title { - color: #ffffff; + color: #fff; font-size: 1.0666em; font-weight: 500; } .site-footer .widgets .widget ~ * { @@ -2123,10 +2155,8 @@ body:not(.single) .hentry { float: none; width: 100% !important; } } .site-footer .site-info { - float: left; font-size: 13px; - text-align: left; - width: 30%; } + text-align: left; } @media (max-width: 768px) { .site-footer .site-info { float: none; @@ -2137,14 +2167,37 @@ body:not(.single) .hentry { color: #b4b5b8; overflow: auto; padding: 25px 0; } - .site-footer .bottom-bar div:only-of-type { - float: none; - text-align: center; - width: 100%; } .site-footer .bottom-bar a { color: #b4b5b8; } .site-footer .bottom-bar a:hover { - color: #ffffff; } + color: #fff; } + .site-footer .bottom-bar .corp-container { + -ms-flex-align: center; + -webkit-align-items: center; + -webkit-box-align: center; + align-items: center; + display: -ms-flexbox; + display: -webkit-flex; + display: flex; + -webkit-justify-content: space-between; + justify-content: space-between; + width: 100%; } + @media (max-width: 768px) { + .site-footer .bottom-bar .corp-container { + flex-direction: column; } } + .site-footer .bottom-bar .corp-container div:only-of-type { + float: none; + text-align: center; + width: 100%; } + .site-footer .bottom-bar .widget { + display: inline-block; + margin: 0 0 0 15px; } + @media (max-width: 768px) { + .site-footer .bottom-bar .widget { + margin: 0; + padding-top: 15px; + text-align: center; + width: 100%; } } /*-------------------------------------------------------------- # Media @@ -2157,7 +2210,6 @@ body:not(.single) .hentry { margin-top: 0; padding: 0; } -/* Make sure embeds and iframes fit their containers. */ embed, iframe, object { @@ -2167,17 +2219,18 @@ object { ## Captions --------------------------------------------------------------*/ .wp-caption { - font-size: 14px; + color: #929292; + font-size: 13px; max-width: 100%; } .wp-caption img[class*="wp-image-"] { display: block; margin-left: auto; margin-right: auto; } .wp-caption .wp-caption-text { - margin: 12px 0; } + margin: 14px 0; } .wp-caption-text { - text-align: center; } + text-align: left; } /*-------------------------------------------------------------- ## - FlexSlider @@ -2197,38 +2250,45 @@ object { overflow: hidden; position: relative; } .flexslider .flex-direction-nav a { + background: rgba(0, 0, 0, 0.5); cursor: pointer; display: block; - margin-top: -12.5px; + height: 48px; + margin-top: -24px; opacity: 0; position: absolute; text-align: center; top: 50%; transition: all .3s ease-in-out; + width: 48px; z-index: 10; } - .flexslider .flex-direction-nav a:hover svg path { - fill: rgba(255, 255, 255, 0.9); } + .flexslider .flex-direction-nav a:hover { + background: rgba(0, 0, 0, 0.7); } .flexslider:hover .flex-direction-nav a { opacity: 1; } .flexslider .flex-direction-nav a.flex-prev { - left: 20px; } + left: 0; } .flexslider .flex-direction-nav a.flex-next { - right: 20px; } + right: 0; } .flexslider .flex-direction-nav a:focus { outline: 0; } .flexslider .flex-direction-nav a svg { - height: 27px; - width: auto; } + height: 20px; + margin-top: 14px; + width: 11px; } .flexslider .flex-direction-nav a svg path { - fill: rgba(255, 255, 255, 0.6); + fill: #fff; transition: .3s; } .flexslider .flex-control-nav { - bottom: 15px; + bottom: 30px; margin: 0; padding: 0; position: absolute; text-align: center; width: 100%; } + @media (max-width: 480px) { + .flexslider .flex-control-nav { + display: none; } } .flexslider .flex-control-nav li { display: inline-block; margin: 0 5px; } @@ -2294,7 +2354,8 @@ object { background-color: #626262; background-position: center; background-size: cover; - height: 520px; } + height: 500px; + position: relative; } @media (max-width: 768px) { .featured-posts-slider .slides .slide { height: 380px; } } @@ -2302,52 +2363,42 @@ object { .featured-posts-slider .slides .slide { height: 155px; } } .featured-posts-slider .slides .slide .overlay a { - background: rgba(0, 0, 0, 0.5); + background: rgba(0, 0, 0, 0.3); display: block; height: 100%; position: absolute; width: 100%; } .featured-posts-slider .slides .slide .slide-content { text-align: center; - padding: 160px 10% 0; + margin-top: -37.5px; position: absolute; + top: 50%; width: 100%; z-index: 3; } - @media (max-width: 768px) { - .featured-posts-slider .slides .slide .slide-content { - padding-top: 80px; } } @media (max-width: 480px) { .featured-posts-slider .slides .slide .slide-content { - padding-top: 30px; } } - .widget_siteorigin-panels-postloop .featured-posts-slider .slides .slide .slide-content { - padding: 15% 10%; } + margin-top: -15.5px; } } + .featured-posts-slider .slides .slide .slide-content .entry-meta span { + color: #fff; + margin-bottom: 20px; } + @media (max-width: 480px) { + .featured-posts-slider .slides .slide .slide-content .entry-meta span { + display: none; } } + .featured-posts-slider .slides .slide .slide-content .entry-meta span a:hover { + color: #fff; } .featured-posts-slider .slides .slide .slide-content .entry-title { font-size: 46px; + font-weight: normal; margin-bottom: 0; position: relative; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); z-index: 3; } @media (max-width: 768px) { .featured-posts-slider .slides .slide .slide-content .entry-title { - font-size: 41px; - line-height: 1.1; - margin-bottom: 10px; } } + font-size: 41px; } } @media (max-width: 480px) { .featured-posts-slider .slides .slide .slide-content .entry-title { font-size: 26px; } } .featured-posts-slider .slides .slide .slide-content .entry-title a { color: #fff; } - .featured-posts-slider .slides .slide .slide-content .entry-title a:hover { - color: rgba(255, 255, 255, 0.8); } - .featured-posts-slider .slides .slide .slide-content .entry-excerpt { - color: rgba(255, 255, 255, 0.9); - font-size: 18px; - text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } - @media (max-width: 768px) { - .featured-posts-slider .slides .slide .slide-content .entry-excerpt { - font-size: 16px; } } - @media (max-width: 480px) { - .featured-posts-slider .slides .slide .slide-content .entry-excerpt { - display: none; } } /*# sourceMappingURL=sass/maps/style.css.map */ diff --git a/template-parts/featured-slider.php b/template-parts/featured-slider.php new file mode 100644 index 0000000..1260657 --- /dev/null +++ b/template-parts/featured-slider.php @@ -0,0 +1,54 @@ + + + + +