From c893fa0d823e6d413ace7ba45bfd056fbf68fe3d Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 16 Nov 2018 11:27:58 -0500 Subject: [PATCH 1/4] Remove our aligncenter cover overrides. These are attempting to fix broken Gutenberg styles, and should be fixed upstream. --- sass/blocks/_blocks.scss | 13 ------------- style-rtl.css | 14 -------------- style.css | 14 -------------- 3 files changed, 41 deletions(-) diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss index cc481e49..c2b438b7 100644 --- a/sass/blocks/_blocks.scss +++ b/sass/blocks/_blocks.scss @@ -508,19 +508,6 @@ } } - &.aligncenter { - h2, - .wp-block-cover-image-text, - .wp-block-cover-text { - width: 100%; - z-index: 1; - left: 50%; - position: absolute; - transform: translate(-50%, -50%); - top: 50%; - } - } - &.alignleft, &.alignright { width: 100%; diff --git a/style-rtl.css b/style-rtl.css index 74c5822b..a0e3e672 100755 --- a/style-rtl.css +++ b/style-rtl.css @@ -4159,20 +4159,6 @@ body.page .main-navigation { } } -.entry .entry-content .wp-block-cover-image.aligncenter h2, -.entry .entry-content .wp-block-cover-image.aligncenter .wp-block-cover-image-text, -.entry .entry-content .wp-block-cover-image.aligncenter .wp-block-cover-text, -.entry .entry-content .wp-block-cover.aligncenter h2, -.entry .entry-content .wp-block-cover.aligncenter .wp-block-cover-image-text, -.entry .entry-content .wp-block-cover.aligncenter .wp-block-cover-text { - width: 100%; - z-index: 1; - right: 50%; - position: absolute; - transform: translate(50%, -50%); - top: 50%; -} - .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, .entry .entry-content .wp-block-cover.alignleft, .entry .entry-content .wp-block-cover.alignright { diff --git a/style.css b/style.css index bee290fc..5b2524da 100755 --- a/style.css +++ b/style.css @@ -4171,20 +4171,6 @@ body.page .main-navigation { } } -.entry .entry-content .wp-block-cover-image.aligncenter h2, -.entry .entry-content .wp-block-cover-image.aligncenter .wp-block-cover-image-text, -.entry .entry-content .wp-block-cover-image.aligncenter .wp-block-cover-text, -.entry .entry-content .wp-block-cover.aligncenter h2, -.entry .entry-content .wp-block-cover.aligncenter .wp-block-cover-image-text, -.entry .entry-content .wp-block-cover.aligncenter .wp-block-cover-text { - width: 100%; - z-index: 1; - left: 50%; - position: absolute; - transform: translate(-50%, -50%); - top: 50%; -} - .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, .entry .entry-content .wp-block-cover.alignleft, .entry .entry-content .wp-block-cover.alignright { From 894c3f5e5f660cd4272091f10bc9a578d742f5c8 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 16 Nov 2018 12:30:47 -0500 Subject: [PATCH 2/4] Set padding to 1rem for all alignleft/right covers ... at all breakpoints. --- sass/blocks/_blocks.scss | 4 ++++ style-editor.css | 7 +++++++ style-editor.scss | 7 +++++++ style-rtl.css | 8 ++++++++ style.css | 8 ++++++++ 5 files changed, 34 insertions(+) diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss index c2b438b7..1266b299 100644 --- a/sass/blocks/_blocks.scss +++ b/sass/blocks/_blocks.scss @@ -511,6 +511,10 @@ &.alignleft, &.alignright { width: 100%; + + @include media(tablet) { + padding: $size__spacing-unit; + } } &.alignfull { diff --git a/style-editor.css b/style-editor.css index 6b66ab35..90f72c4b 100644 --- a/style-editor.css +++ b/style-editor.css @@ -288,6 +288,13 @@ figcaption, max-width: 100%; } +@media only screen and (min-width: 768px) { + .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover, + .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { + padding: 1rem; + } +} + @media only screen and (min-width: 768px) { .wp-block[data-type="core/cover"][data-align="wide"] h2, .wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover-text, diff --git a/style-editor.scss b/style-editor.scss index 32592373..ffc6cec6 100644 --- a/style-editor.scss +++ b/style-editor.scss @@ -276,6 +276,13 @@ figcaption, width: 100%; max-width: 100%; } + + @include media(tablet) { + + .wp-block-cover { + padding: $size__spacing-unit; + } + } } .wp-block[data-type="core/cover"][data-align="wide"], diff --git a/style-rtl.css b/style-rtl.css index a0e3e672..c98e4691 100755 --- a/style-rtl.css +++ b/style-rtl.css @@ -4165,6 +4165,14 @@ body.page .main-navigation { width: 100%; } +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, + .entry .entry-content .wp-block-cover.alignleft, + .entry .entry-content .wp-block-cover.alignright { + padding: 1rem; + } +} + @media only screen and (min-width: 768px) { .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text, .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text, diff --git a/style.css b/style.css index 5b2524da..d3e59fb7 100755 --- a/style.css +++ b/style.css @@ -4177,6 +4177,14 @@ body.page .main-navigation { width: 100%; } +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, + .entry .entry-content .wp-block-cover.alignleft, + .entry .entry-content .wp-block-cover.alignright { + padding: 1rem; + } +} + @media only screen and (min-width: 768px) { .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text, .entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text, From 75ccf165380a78bbfd1d653da787f792b50657f3 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 16 Nov 2018 12:42:54 -0500 Subject: [PATCH 3/4] Add hyphens rule to the cover block --- sass/blocks/_blocks.scss | 4 ++++ style-rtl.css | 4 ++++ style.css | 4 ++++ 3 files changed, 12 insertions(+) diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss index 1266b299..5caa0a20 100644 --- a/sass/blocks/_blocks.scss +++ b/sass/blocks/_blocks.scss @@ -501,6 +501,10 @@ line-height: 1.25; padding: 0; color: #fff; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; @include media(tablet) { font-size: $font__size-xl; diff --git a/style-rtl.css b/style-rtl.css index c98e4691..a0323440 100755 --- a/style-rtl.css +++ b/style-rtl.css @@ -4145,6 +4145,10 @@ body.page .main-navigation { line-height: 1.25; padding: 0; color: #fff; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; } @media only screen and (min-width: 768px) { diff --git a/style.css b/style.css index d3e59fb7..026a9e39 100755 --- a/style.css +++ b/style.css @@ -4157,6 +4157,10 @@ body.page .main-navigation { line-height: 1.25; padding: 0; color: #fff; + -ms-hyphens: auto; + -moz-hyphens: auto; + -webkit-hyphens: auto; + hyphens: auto; } @media only screen and (min-width: 768px) { From 9131799e63091c1278d6706442f4ff8e3373a6c5 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Fri, 16 Nov 2018 12:49:49 -0500 Subject: [PATCH 4/4] Remove extra max-width rule for alignleft blocks. This isn't used for alignright block, so it produces uneven styles. --- sass/blocks/_blocks.scss | 4 ---- style-rtl.css | 7 ------- style.css | 7 ------- 3 files changed, 18 deletions(-) diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss index 5caa0a20..829f93df 100644 --- a/sass/blocks/_blocks.scss +++ b/sass/blocks/_blocks.scss @@ -60,10 +60,6 @@ /*rtl:ignore*/ margin-right: calc(2 * #{$size__spacing-unit}); } - - @include media(desktop) { - max-width: calc(3 * (100vw / 12)); - } } &.alignright { diff --git a/style-rtl.css b/style-rtl.css index a0323440..9168bc49 100755 --- a/style-rtl.css +++ b/style-rtl.css @@ -3652,13 +3652,6 @@ body.page .main-navigation { } } -@media only screen and (min-width: 1168px) { - .entry .entry-content > *.alignleft, - .entry .entry-summary > *.alignleft { - max-width: calc(3 * (100vw / 12)); - } -} - .entry .entry-content > *.alignright, .entry .entry-summary > *.alignright { float: right; diff --git a/style.css b/style.css index 026a9e39..ae130baa 100755 --- a/style.css +++ b/style.css @@ -3661,13 +3661,6 @@ body.page .main-navigation { } } -@media only screen and (min-width: 1168px) { - .entry .entry-content > *.alignleft, - .entry .entry-summary > *.alignleft { - max-width: calc(3 * (100vw / 12)); - } -} - .entry .entry-content > *.alignright, .entry .entry-summary > *.alignright { /*rtl:ignore*/