diff --git a/newspack-joseph/sass/style.scss b/newspack-joseph/sass/style.scss index 4cf923100..bacd2eacb 100644 --- a/newspack-joseph/sass/style.scss +++ b/newspack-joseph/sass/style.scss @@ -68,6 +68,21 @@ body { } } +// Yoast Breadcrumbs +.site-breadcrumb { + border-bottom: 1px solid; + + .has-highlight-menu & { + border-top: 1px solid; + margin-top: 0.25rem; + padding-top: 0; + + .wrapper { + border: 0; + } + } +} + /* Font Family */ figcaption, .entry-meta, diff --git a/newspack-katharine/inc/child-color-patterns.php b/newspack-katharine/inc/child-color-patterns.php index 853d6d666..0e78a5b4c 100644 --- a/newspack-katharine/inc/child-color-patterns.php +++ b/newspack-katharine/inc/child-color-patterns.php @@ -48,7 +48,8 @@ function newspack_katharine_custom_colors_css() { .cat-links:before, .archive .page-title:before, figcaption:after, - .wp-caption-text:after { + .wp-caption-text:after, + .has-highlight-menu .site-breadcrumb .wrapper > span::before { background-color: ' . esc_html( $primary_color ) . '; } diff --git a/newspack-katharine/sass/style.scss b/newspack-katharine/sass/style.scss index 7bef9986a..942e973b4 100644 --- a/newspack-katharine/sass/style.scss +++ b/newspack-katharine/sass/style.scss @@ -408,3 +408,14 @@ figcaption, color: inherit; } } + +// Yoast Breadcrumbs + +.site-breadcrumb { + .has-highlight-menu & { + .wrapper { + border-top-color: currentColor; + border-top-style: dotted; + } + } +} diff --git a/newspack-nelson/inc/child-color-patterns.php b/newspack-nelson/inc/child-color-patterns.php index 816f831a8..05fb5c75e 100644 --- a/newspack-nelson/inc/child-color-patterns.php +++ b/newspack-nelson/inc/child-color-patterns.php @@ -69,7 +69,9 @@ function newspack_nelson_custom_colors_css() { /* Header short height; default background */ .h-sh.h-db .site-header, .site-content #primary, - #page .site-header { + #page .site-header, + /* Yoast Breadcrumb */ + .has-highlight-menu .site-breadcrumb .wrapper { border-color: ' . esc_html( newspack_adjust_brightness( $header_color, -40 ) ) . '; } @@ -88,6 +90,9 @@ function newspack_nelson_custom_colors_css() { .nav1 .sub-menu a, .h-sb .site-header .highlight-menu .menu-label, .h-sb .site-header .highlight-menu a, + .h-sb .site-breadcrumb, + .h-sb .site-breadcrumb a, + .h-sb .site-breadcrumb .breadcrumb_last, .h-sb .site-footer { color: ' . esc_html( $header_color_contrast ) . '; } diff --git a/newspack-nelson/sass/style.scss b/newspack-nelson/sass/style.scss index edc567df1..3a307e4cf 100644 --- a/newspack-nelson/sass/style.scss +++ b/newspack-nelson/sass/style.scss @@ -64,7 +64,8 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ } .site-content, -.newspack-front-page.hide-homepage-title .site-content { +.newspack-front-page.hide-homepage-title .site-content, +.site-breadcrumb { @include media( tablet ) { margin-top: #{-3.5 * $size__spacing-unit}; } @@ -509,3 +510,36 @@ blockquote { } } } + +// Yoast Breadcrumb + +.site-breadcrumb { + @include media( tablet ) { + margin-bottom: #{3.5 * $size__spacing-unit}; + } + + @include media( desktop ) { + margin-bottom: #{6 * $size__spacing-unit}; + } + + .h-sb & { + color: $color__background-body; + + a, + .breadcrumb_last { + color: inherit; + } + + a:active, + a:focus, + a:hover { + opacity: 0.75; + } + } + + .has-highlight-menu & { + .wrapper { + border-top-color: $color__primary-variation; + } + } +} diff --git a/newspack-sacha/sass/style.scss b/newspack-sacha/sass/style.scss index efcd1804b..2d43f912e 100644 --- a/newspack-sacha/sass/style.scss +++ b/newspack-sacha/sass/style.scss @@ -465,6 +465,14 @@ cite { } } +// Yoast Breadcrumbs + +.site-breadcrumb { + .wrapper { + justify-content: center; + } +} + // Pop-up .entry-content { diff --git a/newspack-scott/inc/child-color-patterns.php b/newspack-scott/inc/child-color-patterns.php index 9ce9fc066..1e642214c 100644 --- a/newspack-scott/inc/child-color-patterns.php +++ b/newspack-scott/inc/child-color-patterns.php @@ -32,7 +32,8 @@ function newspack_scott_custom_colors_css() { .accent-header:not(.widget-title):before, .article-section-title:before, .cat-links:before, - .page-title:before { + .page-title:before, + .site-breadcrumb .wrapper > span::before { background-color: ' . esc_html( $primary_color ) . '; } diff --git a/newspack-scott/sass/style.scss b/newspack-scott/sass/style.scss index 4f27f41b5..51568c30a 100644 --- a/newspack-scott/sass/style.scss +++ b/newspack-scott/sass/style.scss @@ -296,3 +296,18 @@ Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/ .site-info { font-family: $font__heading; } + +/* Yoast Breadcrumbs */ + +.site-breadcrumb { + .wrapper { + > span::before { + background-color: $color__primary; + content: ''; + display: inline-block; + height: 0.75em; + margin: 0 0.5em 0 0; + width: 0.75em; + } + } +} diff --git a/newspack-theme/header.php b/newspack-theme/header.php index f90d514e9..2e420ea34 100755 --- a/newspack-theme/header.php +++ b/newspack-theme/header.php @@ -217,6 +217,12 @@ +
','
' ); + } + ?> +
diff --git a/newspack-theme/inc/template-functions.php b/newspack-theme/inc/template-functions.php index 734e27850..d8a943441 100755 --- a/newspack-theme/inc/template-functions.php +++ b/newspack-theme/inc/template-functions.php @@ -112,6 +112,10 @@ function newspack_body_classes( $classes ) { $classes[] = 'has-tertiary-menu'; } + if ( has_nav_menu( 'highlight-menu' ) ) { + $classes[] = 'has-highlight-menu'; + } + // Adds a class of has-sidebar when there is a sidebar present. if ( is_active_sidebar( 'sidebar-1' ) && ! ( is_front_page() && 'posts' !== get_option( 'show_on_front' ) ) ) { $classes[] = 'has-sidebar'; diff --git a/newspack-theme/inc/typography.php b/newspack-theme/inc/typography.php index 077e75fe5..aca237e8b 100644 --- a/newspack-theme/inc/typography.php +++ b/newspack-theme/inc/typography.php @@ -121,7 +121,10 @@ function newspack_custom_typography_css() { .jp-relatedposts-i2, #jp-relatedposts.jp-relatedposts, .jp-relatedposts-i2 .jp-relatedposts-headline, - #jp-relatedposts.jp-relatedposts .jp-relatedposts-headline + #jp-relatedposts.jp-relatedposts .jp-relatedposts-headline, + + /* Yoast Breadcrumbs */ + .site-breadcrumb .wrapper > span { font-family: ' . wp_kses( $font_header, null ) . '; }'; diff --git a/newspack-theme/js/src/amp-fallback.js b/newspack-theme/js/src/amp-fallback.js index 5c591e45a..edc8489eb 100644 --- a/newspack-theme/js/src/amp-fallback.js +++ b/newspack-theme/js/src/amp-fallback.js @@ -86,7 +86,7 @@ // Make sure comments exist before going any further. if ( null !== commentsToggle ) { const commentsWrapper = document.getElementById( 'comments-wrapper' ), - commentsToggleTextContain = commentsToggle.getElementsByTagName( 'span' )[ 0 ]; + commentsToggleTextContain = commentsToggle.getElementsByTagName( 'span' )[ 0 ]; commentsToggle.addEventListener( 'click', diff --git a/newspack-theme/sass/plugins/yoast-breadcrumb.scss b/newspack-theme/sass/plugins/yoast-breadcrumb.scss new file mode 100644 index 000000000..f16beaadc --- /dev/null +++ b/newspack-theme/sass/plugins/yoast-breadcrumb.scss @@ -0,0 +1,33 @@ +.site-breadcrumb { + color: $color__text-light; + + .wrapper { + padding: 0.5em 0; + + > span { + font-family: $font__heading; + font-size: $font__size-xxs; + line-height: $font__line-height-heading; + } + } + + .breadcrumb_last { + color: $color__text-main; + } + + // Hide on homepage and if the Featured Image is Behind or Beside + .home &, + .single-featured-image-behind &, + .single-featured-image-beside & { + display: none; + } + + // Has Highlight Menu + .has-highlight-menu & { + padding-top: 0.25rem; + + .wrapper { + border-top: 1px solid $color__border; + } + } +} diff --git a/newspack-theme/sass/style-base.scss b/newspack-theme/sass/style-base.scss index 2cf817591..f6bbcc5c3 100644 --- a/newspack-theme/sass/style-base.scss +++ b/newspack-theme/sass/style-base.scss @@ -55,3 +55,6 @@ /* Newspack Ads support */ @import 'plugins/newspack-ads'; + +/* Yoast Breadcrumb support */ +@import 'plugins/yoast-breadcrumb';