From 3f11263d34875fe6c11534b3a5d075f96c7a05c8 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 8 Nov 2018 09:57:30 -0500 Subject: [PATCH] Update editor margins to match the front end on middle-breakpoints A followup to #502. Closes #236. Adjusts editor styles between `600px` and `768px` so that the margins are more closely aligned to the front end. Note that this doesn't make them 100% exact: the editor has about 10px more space on either side. This is because the editor requires more space for the hover/editor controls. We _could_ match these up exactly by adjusting the front end, but I tend to prefer tighter margins in general and I think this is close enough. --- sass/blocks/_blocks.scss | 2 +- sass/mixins/_utilities.scss | 7 +++++++ sass/variables-site/_structure.scss | 2 +- style-editor.css | 24 +++++++++++++++++++----- style-editor.scss | 26 +++++++++++++++++++++----- style-rtl.css | 26 +++----------------------- style.css | 23 ++++++++++++++++++++++- 7 files changed, 74 insertions(+), 36 deletions(-) diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss index 227645c9..df97d94b 100644 --- a/sass/blocks/_blocks.scss +++ b/sass/blocks/_blocks.scss @@ -110,7 +110,7 @@ &.alignleft audio, &.alignright audio { - max-width: (0.5 * $mobile_width); + max-width: (0.33 * $mobile_width); @include media(tablet) { max-width: (0.5 * $tablet_width); diff --git a/sass/mixins/_utilities.scss b/sass/mixins/_utilities.scss index 4a81e192..c753fe27 100644 --- a/sass/mixins/_utilities.scss +++ b/sass/mixins/_utilities.scss @@ -1,10 +1,17 @@ @mixin media( $res ) { + @if mobile == $res { + @media only screen and (min-width: $mobile_width) { + @content; + } + } + @if tablet == $res { @media only screen and (min-width: $tablet_width) { @content; } } + @if desktop == $res { @media only screen and (min-width: $desktop_width) { @content; diff --git a/sass/variables-site/_structure.scss b/sass/variables-site/_structure.scss index 6c43a5ba..dc62145b 100644 --- a/sass/variables-site/_structure.scss +++ b/sass/variables-site/_structure.scss @@ -9,7 +9,7 @@ $size__site-desktop-content: calc(6 * (100vw / 12) - 28px); // Responsive widths. -$mobile_width: 380px; +$mobile_width: 600px; $tablet_width: 768px; $desktop_width: 1168px; $wide_width: 1379px; diff --git a/style-editor.css b/style-editor.css index 5fca902e..2df09296 100644 --- a/style-editor.css +++ b/style-editor.css @@ -8,16 +8,30 @@ Twenty Nineteen Editor Styles /* Fallback for non-latin fonts */ /* Calculates maximum width for post content */ /** === Editor Frame === */ -@media screen and (min-width: 600px) { +body .wp-block[data-align="full"] { + width: 100%; +} + +@media only screen and (min-width: 600px) { + body { + overflow-x: hidden; + } + body .editor-block-list__layout, + body .editor-post-title { + padding-left: 0; + padding-right: 0; + } body .wp-block[data-align="full"] { - width: calc( 100% + 90px); - max-width: calc( 100% + 90px); + position: relative; + left: 45px; } } @media only screen and (min-width: 768px) { - body { - overflow-x: hidden; + body .editor-block-list__layout, + body .editor-post-title { + padding-left: 46px; + padding-right: 46px; } body .editor-writing-flow { max-width: 80%; diff --git a/style-editor.scss b/style-editor.scss index 78a1c72f..d11570ce 100644 --- a/style-editor.scss +++ b/style-editor.scss @@ -12,16 +12,32 @@ Twenty Nineteen Editor Styles body { - // Non-standard media query necessary to override a Gutenberg breakpoint style. - @media screen and (min-width: 600px) { + .wp-block[data-align="full"] { + width: 100%; + } + + @include media(mobile) { + overflow-x: hidden; + + .editor-block-list__layout, + .editor-post-title { + padding-left: 0; + padding-right: 0; + } + .wp-block[data-align="full"] { - width: calc( 100% + 90px ); - max-width: calc( 100% + 90px ); + position: relative; + left: 45px; } } @include media(tablet) { - overflow-x: hidden; + + .editor-block-list__layout, + .editor-post-title { + padding-left: 46px; + padding-right: 46px; + } .editor-writing-flow { max-width: 80%; diff --git a/style-rtl.css b/style-rtl.css index 8a856970..a84d29ff 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -1130,14 +1130,6 @@ body.page .main-navigation { margin-left: calc( .25 * 1rem); } -.main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu { - display: block; - right: 0; - margin-top: 0; - opacity: 1; - width: calc( 100vw - 2rem); -} - .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu { display: block; right: 0; @@ -1146,12 +1138,6 @@ body.page .main-navigation { width: calc( 100vw - 2rem); } -.main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu { - margin-top: inherit; - position: relative; - padding-right: 1rem; -} - .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu { margin-top: inherit; position: relative; @@ -1159,13 +1145,6 @@ body.page .main-navigation { } @media only screen and (min-width: 768px) { - .main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu { - padding-right: 0; - position: absolute; - right: 100%; - width: max-content; - top: 0; - } .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu { padding-right: 0; position: absolute; @@ -3168,7 +3147,8 @@ body.page .main-navigation { .entry .entry-content > *.alignright, .entry .entry-summary > *.alignright { max-width: calc(4 * (100vw / 12)); - margin-right: 0; + margin-left: calc(2 * 1rem); + margin-left: 0; } } @@ -3210,7 +3190,7 @@ body.page .main-navigation { .entry .entry-content .wp-block-audio.alignleft audio, .entry .entry-content .wp-block-audio.alignright audio { - max-width: 190px; + max-width: 198px; } @media only screen and (min-width: 768px) { diff --git a/style.css b/style.css index a0812b1f..2c853303 100644 --- a/style.css +++ b/style.css @@ -1138,6 +1138,14 @@ body.page .main-navigation { width: calc( 100vw - 2rem); } +.main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu { + display: block; + left: 0; + margin-top: 0; + opacity: 1; + width: calc( 100vw - 2rem); +} + .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu { display: block; left: 0; @@ -1152,6 +1160,12 @@ body.page .main-navigation { padding-left: 1rem; } +.main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu { + margin-top: inherit; + position: relative; + padding-left: 1rem; +} + .main-navigation .main-menu .menu-item-has-children:focus-within > .sub-menu .sub-menu { margin-top: inherit; position: relative; @@ -1159,6 +1173,13 @@ body.page .main-navigation { } @media only screen and (min-width: 768px) { + .main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu { + padding-left: 0; + position: absolute; + left: 100%; + width: max-content; + top: 0; + } .main-navigation .main-menu .menu-item-has-children[focus-within] > .sub-menu .sub-menu { padding-left: 0; position: absolute; @@ -3219,7 +3240,7 @@ body.page .main-navigation { .entry .entry-content .wp-block-audio.alignleft audio, .entry .entry-content .wp-block-audio.alignright audio { - max-width: 190px; + max-width: 198px; } @media only screen and (min-width: 768px) {