From f6b0df4e0b95430cbb7fab5b6b1ef0abaaefbd2f Mon Sep 17 00:00:00 2001 From: Scott Evans Date: Mon, 18 Nov 2019 15:58:12 +0000 Subject: [PATCH 1/2] Fixes for related posts module in twentytwenty --- modules/theme-tools/compat/twentytwenty.css | 50 +++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/modules/theme-tools/compat/twentytwenty.css b/modules/theme-tools/compat/twentytwenty.css index 023115d830546..460403fc27f7c 100644 --- a/modules/theme-tools/compat/twentytwenty.css +++ b/modules/theme-tools/compat/twentytwenty.css @@ -151,12 +151,62 @@ /* Related Posts */ +.entry-content #jp-relatedposts { + max-width: 120rem; + margin: 1em auto; + width: calc(100% - 4rem); +} + +@media (min-width: 700px) { + .entry-content #jp-relatedposts { + width: calc(100% - 8rem); + } +} + +#jp-relatedposts .jp-relatedposts-grid { + display: flex; + flex-grow: 1; + flex-basis: 0; + justify-content: space-between; + box-sizing: border-box; +} + +#jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post, +#jp-relatedposts .jp-relatedposts-post { + width: calc(33% - 2rem); + margin-left: 0; + margin-right: 0; +} + +@media only screen and (max-width: 640px) { + #jp-relatedposts .jp-relatedposts-grid { + flex-direction: column; + } + + #jp-relatedposts .jp-relatedposts-items .jp-relatedposts-post, + #jp-relatedposts .jp-relatedposts-post { + width: 100%; + } +} + +#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post { + padding-right: 0; +} + #jp-relatedposts#jp-relatedposts .jp-relatedposts-items p, #jp-relatedposts#jp-relatedposts .jp-relatedposts-items-visual h4.jp-relatedposts-post-title { font-size: inherit; line-height: 1.5; } +#jp-relatedposts .jp-relatedposts-items-visual { + margin-right: 0; +} + +#jp-relatedposts .jp-relatedposts-items-visual .jp-relatedposts-post img.jp-relatedposts-post-img { + width: 100%; +} + /* Related Posts Block */ .jp-related-posts-i2__post li { margin: 0; From 675786b3d54dc0bcd5a3ab0865c574b6124dba7f Mon Sep 17 00:00:00 2001 From: Scott Evans Date: Mon, 18 Nov 2019 15:59:04 +0000 Subject: [PATCH 2/2] Fixes for GIF block CSS in twentytwenty --- modules/theme-tools/compat/twentytwenty.css | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/modules/theme-tools/compat/twentytwenty.css b/modules/theme-tools/compat/twentytwenty.css index 460403fc27f7c..c9f17ca6ad385 100644 --- a/modules/theme-tools/compat/twentytwenty.css +++ b/modules/theme-tools/compat/twentytwenty.css @@ -207,7 +207,17 @@ width: 100%; } +/** + * Blocks + */ + /* Related Posts Block */ .jp-related-posts-i2__post li { margin: 0; -} \ No newline at end of file +} + +/* GIF Block */ +.wp-block-jetpack-gif { + /* !important because the gif block styles are loaded in the footer after this file */ + margin: 1em auto !important; +}