From 7f5609caf2ffe08bbb3d3f36ee3a98b63e0e0b29 Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Thu, 6 Feb 2020 19:22:47 +0000 Subject: [PATCH 1/2] Fix: Make Related Posts style more consistent between formats (in theme, shortcode, block), and with AMP and non-AMP versions. --- newspack-katharine/sass/style-editor.scss | 6 --- newspack-katharine/sass/style.scss | 6 --- newspack-theme/inc/typography.php | 9 ++-- newspack-theme/sass/blocks/_blocks.scss | 18 -------- .../sass/site/primary/_posts-and-pages.scss | 44 ++++++++++++++++--- newspack-theme/sass/style-editor-base.scss | 7 +-- 6 files changed, 48 insertions(+), 42 deletions(-) diff --git a/newspack-katharine/sass/style-editor.scss b/newspack-katharine/sass/style-editor.scss index 3908dd74f..f86b6b9f6 100644 --- a/newspack-katharine/sass/style-editor.scss +++ b/newspack-katharine/sass/style-editor.scss @@ -209,9 +209,3 @@ hr { } } } - -// Jetpack Blocks -.jp-relatedposts-i2 { - border-top: 1px dotted $color__text-main; - border-bottom: 1px dotted $color__text-main; -} diff --git a/newspack-katharine/sass/style.scss b/newspack-katharine/sass/style.scss index b3cb75764..f11de12cc 100644 --- a/newspack-katharine/sass/style.scss +++ b/newspack-katharine/sass/style.scss @@ -353,12 +353,6 @@ figcaption, hr { border-top: 1px dotted $color__text-main; } - - // Jetpack Blocks - .jp-relatedposts-i2 { - border-top: 1px dotted $color__text-main; - border-bottom: 1px dotted $color__text-main; - } } // Archives diff --git a/newspack-theme/inc/typography.php b/newspack-theme/inc/typography.php index 29ad13782..64a83fa31 100644 --- a/newspack-theme/inc/typography.php +++ b/newspack-theme/inc/typography.php @@ -114,9 +114,10 @@ function newspack_custom_typography_css() { blockquote cite, /* Jetpack */ - .entry-content #jp-relatedposts h3.jp-relatedposts-headline, - .entry-content #jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post .jp-relatedposts-post-title a - + .jp-relatedposts-i2, + #jp-relatedposts.jp-relatedposts, + .jp-relatedposts-i2 .jp-relatedposts-headline, + #jp-relatedposts.jp-relatedposts .jp-relatedposts-headline { font-family: $font_header; }"; @@ -238,6 +239,8 @@ function newspack_custom_typography_css() { /* Jetpack blocks */ .block-editor-block-list__layout .block-editor-block-list__block .jp-relatedposts-i2 a, .block-editor-block-list__layout .block-editor-block-list__block .jp-relatedposts-i2 strong, + .block-editor-block-list__layout .block-editor-block-list__block .jp-relatedposts-i2 .jp-related-posts-i2__post-date, + .block-editor-block-list__layout .block-editor-block-list__block .jp-relatedposts-i2 .jp-related-posts-i2__post-context, /* Classic Editor */ .block-editor-block-list__layout .block-editor-block-list__block .wp-caption dd, diff --git a/newspack-theme/sass/blocks/_blocks.scss b/newspack-theme/sass/blocks/_blocks.scss index bebbc82e3..9505d78f3 100755 --- a/newspack-theme/sass/blocks/_blocks.scss +++ b/newspack-theme/sass/blocks/_blocks.scss @@ -826,24 +826,6 @@ } } - //! Jetpack Blocks - .jp-relatedposts-i2 { - border-top: 1px solid $color__border; - border-bottom: 1px solid $color__border; - padding: $size__spacing-unit 0; - a { - font-family: $font__heading; - font-size: $font__size-base; - font-weight: bold; - text-decoration: none; - } - - .jp-related-posts-i2__post-date, - .jp-related-posts-i2__post-context { - font-size: $font__size-xs; - } - } - //! Font Sizes .has-small-font-size { font-size: $font__size-sm; diff --git a/newspack-theme/sass/site/primary/_posts-and-pages.scss b/newspack-theme/sass/site/primary/_posts-and-pages.scss index f6714e1f3..f7ac6fa44 100755 --- a/newspack-theme/sass/site/primary/_posts-and-pages.scss +++ b/newspack-theme/sass/site/primary/_posts-and-pages.scss @@ -638,15 +638,45 @@ body.page { } } -.entry-content #jp-relatedposts { - h3.jp-relatedposts-headline { - font-family: $font__heading; +/* Related Posts */ + +.jp-relatedposts-i2 { + em { + font-style: normal; + } + + a { + font: bold $font__size-base $font__heading; + text-decoration: none; + } + + .jp-related-posts-i2__post-date, + .jp-related-posts-i2__post-context { font-size: $font__size-xs; + } +} + +.entry-content .jp-relatedposts-i2 a, +.entry-content .jp-relatedposts-i2 a:visited { + color: $color__text-main; +} + +.jp-related-posts-i2__row { + margin: 0 -10px; +} + +.jp-relatedposts-i2, +#jp-relatedposts.jp-relatedposts { + font-family: $font__heading; + .jp-relatedposts-headline { + font: bold $font__size-xs $font__heading; em::before { display: none; } } +} +#jp-relatedposts.jp-relatedposts { .jp-relatedposts-items-visual .jp-relatedposts-post { opacity: 1; @@ -659,15 +689,17 @@ body.page { margin-bottom: #{0.25 * $size__spacing-unit}; a { color: $color__text-main; - font-family: $font__heading; font-size: $font__size-base; font-weight: bold; } } - .jp-relatedposts-post-context { - color: $color__text-light; + .jp-relatedposts-post-date, + .jp-relatedposts-post-content { opacity: 1; } } + .jp-reltaedposts-post-title { + font-family: $font__heading; + } } diff --git a/newspack-theme/sass/style-editor-base.scss b/newspack-theme/sass/style-editor-base.scss index d0457afdd..bc23df989 100644 --- a/newspack-theme/sass/style-editor-base.scss +++ b/newspack-theme/sass/style-editor-base.scss @@ -669,9 +669,9 @@ ul.wp-block-archives, // Jetpack Blocks .jp-relatedposts-i2 { - border-top: 1px solid $color__border; - border-bottom: 1px solid $color__border; - padding: $size__spacing-unit 0; + a { + color: $color__text-main; + } a, strong { font-family: $font__heading; @@ -682,6 +682,7 @@ ul.wp-block-archives, .jp-related-posts-i2__post-date, .jp-related-posts-i2__post-context { + font-family: $font__heading; font-size: $font__size-xs; } } From dcd65b760ed4af671b7257a996493ef0ae621df5 Mon Sep 17 00:00:00 2001 From: laurelfulford Date: Tue, 18 Feb 2020 19:04:19 +0000 Subject: [PATCH 2/2] Fix: Add clear: both to Related Posts styles, to prevent edge cases. --- newspack-theme/sass/site/primary/_posts-and-pages.scss | 1 + 1 file changed, 1 insertion(+) diff --git a/newspack-theme/sass/site/primary/_posts-and-pages.scss b/newspack-theme/sass/site/primary/_posts-and-pages.scss index f7ac6fa44..69db57678 100755 --- a/newspack-theme/sass/site/primary/_posts-and-pages.scss +++ b/newspack-theme/sass/site/primary/_posts-and-pages.scss @@ -667,6 +667,7 @@ body.page { .jp-relatedposts-i2, #jp-relatedposts.jp-relatedposts { + clear: both; font-family: $font__heading; .jp-relatedposts-headline { font: bold $font__size-xs $font__heading;