Bundled Theme: Ensure parity between the block editor and the front-end in twentynineteen.

Alignments and blocks were not always appearing as they should in the admin.

- Wide alignments sometimes appear only as wide as the text column.
- Full and wide appear centered on the text column
- Full-width blocks sometimes do not take up the full width of the page, and other times they cause a horizontal scroll.
- Wide and full group block children take up the full width of the block by default.

Fixes #49843.
Props kjellr, Joen, poena.


git-svn-id: https://develop.svn.wordpress.org/trunk@48602 602fd350-edb4-49c9-b593-d223f7449a82
This commit is contained in:
Jake Spurlock 2020-07-24 17:46:20 +00:00
parent 75048987d8
commit 2f98829e41
3 changed files with 224 additions and 215 deletions

View File

@ -550,33 +550,49 @@ h6:lang(vi), figcaption:lang(vi),
} }
/** === Editor Frame === */ /** === Editor Frame === */
body .wp-block[data-align="full"] { body .wp-block[data-align="full"],
width: calc(100% + 28px); body .wp-block.alignfull {
max-width: calc(100% + 28px); width: calc(100% + 20px);
max-width: calc(100% + 20px);
} }
@media only screen and (min-width: 600px) { body .wp-block[data-align="left"],
body .wp-block[data-align="full"] { body .wp-block.alignleft {
width: calc( 100% + 116px); margin-right: 1rem;
max-width: calc( 100% + 115px); width: inherit;
} }
body .wp-block[data-align="right"],
body .wp-block.alignright {
margin-left: 1rem;
width: inherit;
}
body .wp-block[data-align="center"],
body .wp-block.aligncenter {
margin-left: 0;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
body .editor-writing-flow { body .block-editor-writing-flow {
max-width: 80%; max-width: 80%;
margin: 0 10%; margin: 0 10%;
} }
body .editor-default-block-appender, body .block-editor-default-block-appender,
body .editor-block-list__block { body .block-editor-block-list__block {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
body .wp-block[data-align="wide"] { body .wp-block[data-align="wide"],
body .wp-block.alignwide {
width: 100%; width: 100%;
} }
body .wp-block[data-align="right"] { body .wp-block[data-align="full"],
max-width: 125%; body .wp-block.alignfull {
width: calc( 125% + 20px);
max-width: calc( 125% + 20px);
position: relative;
left: -12.5%;
} }
} }
@ -777,6 +793,10 @@ figcaption,
} }
/** === Post Title === */ /** === Post Title === */
.editor-post-title__block {
width: 100%;
}
.editor-post-title__block:before { .editor-post-title__block:before {
background: #767676; background: #767676;
content: "\020"; content: "\020";
@ -1346,139 +1366,138 @@ ul.wp-block-archives li ul,
} }
/** === Group Block === */ /** === Group Block === */
.wp-block[data-type="core/group"] > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
left: 0;
} }
.wp-block[data-type="core/group"] > .wp-block-group.has-background { .wp-block-group.has-background {
padding: 22px; padding: 22px;
} }
.wp-block[data-type="core/group"] > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: -22px; margin-left: -22px;
width: calc(100% + 44px); width: calc(100% + 44px);
max-width: calc(100% + 44px); max-width: calc(100% + 44px);
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { .wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
width: calc(8 * (100vw / 12)); width: calc(8 * (100vw / 12));
} }
} }
@media only screen and (min-width: 1168px) { @media only screen and (min-width: 1168px) {
.wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { .wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
width: calc(6 * (100vw / 12 )); width: calc(6 * (100vw / 12 ));
} }
} }
.wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { .wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block[data-align="wide"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { .wp-block[data-align="wide"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
width: calc(8 * (100vw / 12) - 44px); width: calc(8 * (100vw / 12) - 44px);
} }
} }
@media only screen and (min-width: 1168px) { @media only screen and (min-width: 1168px) {
.wp-block[data-type="core/group"][data-align="wide"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) { .wp-block[data-align="wide"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
width: calc(6 * (100vw / 12 ) - 44px); width: calc(6 * (100vw / 12 ) - 44px);
} }
} }
@media only screen and (min-width: 600px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout {
padding-left: 46px;
padding-right: 46px;
}
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout { .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container {
width: 80%; width: 80%;
margin-left: 10%; margin-left: 10%;
margin-right: 10%; margin-right: 10%;
padding-left: 48px; padding-left: 10px;
padding-right: 48px; padding-right: 10px;
} }
} }
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="full"]) {
max-width: calc(100vw - (2 * 1rem));
}
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="full"]) { .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
max-width: calc(8 * (100vw / 12)); max-width: calc(8 * (100vw / 12));
} }
} }
@media only screen and (min-width: 1168px) { @media only screen and (min-width: 1168px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="full"]) { .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
max-width: calc(6 * (100vw / 12)); max-width: calc(6 * (100vw / 12));
} }
} }
@media only screen and (min-width: 768px) { .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="full"]):not(.alignfull) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="right"] { padding-left: 10px;
max-width: 125%; padding-right: 10px;
}
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="wide"] { .wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block:not([data-align="full"]):not(.alignfull) {
width: calc(100% + 4px);
max-width: calc(100% + 4px);
}
}
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align=full] {
max-width: calc(100vw + (2 * 1rem));
}
@media only screen and (min-width: 600px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align=full] {
width: calc(100% + 92px);
left: -46px;
}
}
@media only screen and (min-width: 768px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align=full] {
left: calc(-12.5% - 58px);
width: calc(125% + 120px);
max-width: calc(125% + 119px);
}
}
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {
padding: 22px 0;
}
@media only screen and (min-width: 600px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background {
padding-left: 0; padding-left: 0;
padding-right: 0; padding-right: 0;
} }
} }
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { @media only screen and (min-width: 768px) {
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="right"] {
max-width: 125%;
}
}
@media only screen and (min-width: 768px) {
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align="wide"],
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignwide {
width: 100%;
max-width: 100%;
}
}
@media only screen and (min-width: 768px) {
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block[data-align=full],
.wp-block[data-align="full"] > .wp-block-group > .wp-block-group__inner-container > .wp-block.alignfull {
left: calc( -12.5% - 13px);
width: calc( 125% + 26px);
max-width: calc( 125% + 25px);
}
}
.wp-block[data-align="full"] > .wp-block-group.has-background {
padding: 22px 0;
}
@media only screen and (min-width: 600px) {
.wp-block[data-align="full"] > .wp-block-group.has-background {
padding-left: 0;
padding-right: 0;
}
}
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
} }
@media only screen and (min-width: 600px) { @media only screen and (min-width: 600px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
width: calc(100% + 92px); width: calc(100% + 92px);
} }
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.wp-block[data-type="core/group"][data-align="full"] > .is-block-content > .wp-block-group.has-background > .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { .wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block[data-align="full"],
.wp-block[data-align="full"] > .wp-block-group.has-background > .wp-block-group__inner-container > .wp-block.alignfull {
width: calc(125% + 120px); width: calc(125% + 120px);
} }
} }

View File

@ -11,38 +11,53 @@ Twenty Nineteen Editor Styles
body { body {
.wp-block[data-align="full"] { .wp-block[data-align="full"],
width: calc(100% + 28px); .wp-block.alignfull {
max-width: calc(100% + 28px); width: calc(100% + 20px);
max-width: calc(100% + 20px);
} }
@include media(mobile) { .wp-block[data-align="left"],
.wp-block.alignleft, {
margin-right: $size__spacing-unit;
width: inherit;
}
.wp-block[data-align="full"] { .wp-block[data-align="right"],
width: calc( 100% + 116px ); .wp-block.alignright, {
max-width: calc( 100% + 115px ); margin-left: $size__spacing-unit;
} width: inherit;
}
.wp-block[data-align="center"],
.wp-block.aligncenter, {
margin-left: 0;
} }
@include media(tablet) { @include media(tablet) {
.editor-writing-flow { .block-editor-writing-flow {
max-width: 80%; max-width: 80%;
margin: 0 10%; margin: 0 10%;
} }
.editor-default-block-appender, .block-editor-default-block-appender,
.editor-block-list__block { .block-editor-block-list__block {
margin-left: 0; margin-left: 0;
margin-right: 0; margin-right: 0;
} }
.wp-block[data-align="wide"] { .wp-block[data-align="wide"],
.wp-block.alignwide {
width: 100%; width: 100%;
} }
.wp-block[data-align="right"] { .wp-block[data-align="full"],
max-width: 125%; .wp-block.alignfull {
width: calc( 125% + 20px );
max-width: calc( 125% + 20px );
position: relative;
left: -12.5%;
} }
} }
} }
@ -190,6 +205,7 @@ figcaption,
/** === Post Title === */ /** === Post Title === */
.editor-post-title__block { .editor-post-title__block {
width: 100%;
@include post-section-dash; @include post-section-dash;
&:before { &:before {
@ -779,151 +795,144 @@ ul.wp-block-archives,
// size is different here. // size is different here.
$group-block-background__padding: $font__size_base; $group-block-background__padding: $font__size_base;
.wp-block[data-type="core/group"] { .wp-block-group {
// Group block base styles // Child: Full alignment
> .wp-block-group { > .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
// Child: Full alignment margin-left: 0;
> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { margin-right: 0;
margin-left: 0; left: 0;
margin-right: 0;
}
} }
// Group block with background color // Group block with background color
> .wp-block-group.has-background { &.has-background {
padding: $group-block-background__padding; padding: $group-block-background__padding;
// Child: Full alignment // Child: Full alignment
> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { > .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: -$group-block-background__padding; margin-left: -$group-block-background__padding;
width: calc(100% + #{$group-block-background__padding * 2}); width: calc(100% + #{$group-block-background__padding * 2});
max-width: calc(100% + #{$group-block-background__padding * 2}); max-width: calc(100% + #{$group-block-background__padding * 2});
} }
} }
}
// Wide and full alignments // Wide and full alignments
&[data-align="wide"] > .is-block-content { .wp-block[data-align="wide"] > .wp-block-group {
// Group block base styles. > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
> .wp-block-group { @include media(tablet) {
width: calc(8 * (100vw / 12));
// Child blocks: Default alignments
> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
@include media(tablet) {
width: calc(8 * (100vw / 12));
}
@include media(desktop) {
width: calc(6 * (100vw / 12 ));
}
}
// Child blocks: Full alignment
> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] {
padding-left: 0;
padding-right: 0;
}
} }
// Group block with background color @include media(desktop) {
> .wp-block-group.has-background { width: calc(6 * (100vw / 12 ));
// Child blocks: Default alignments
> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
@include media(tablet) {
width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
}
@include media(desktop) {
width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
}
}
} }
} }
// Full alignment // Child blocks: Full alignment
&[data-align="full"] { > .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
padding-left: 0;
padding-right: 0;
}
// Group block base styles
> .is-block-content > .wp-block-group {
// Margins & padding are added to this container to mimic // Group block with background color
// the style + spacing of the .editor-writing-flow global &.has-background {
// container. This way, child items sync up with the placement
// and size of other top-level blocks. // Child blocks: Default alignments
> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout { > .wp-block-group__inner-container > .wp-block:not([data-align="wide"]):not([data-align="full"]):not(.alignwide):not(.alignfull) {
@include media(tablet) {
width: calc(8 * (100vw / 12) - #{$group-block-background__padding * 2});
}
@include media(mobile) { @include media(desktop) {
padding-left: 46px; width: calc(6 * (100vw / 12 ) - #{$group-block-background__padding * 2});
padding-right: 46px; }
} }
}
}
// Full alignment
.wp-block[data-align="full"] > .wp-block-group {
// Margins & padding are added to this container to mimic
// the style + spacing of the .editor-writing-flow global
// container. This way, child items sync up with the placement
// and size of other top-level blocks.
> .wp-block-group__inner-container {
// 2px of extra padding are added to each side here
// To better match up with the spacing of the whole
// document.
@include media(tablet) {
width: 80%;
margin-left: 10%;
margin-right: 10%;
padding-left: 10px;
padding-right: 10px;
}
// Child blocks: Normal Alignments
> .wp-block:not([data-align="wide"]):not(.alignwide):not([data-align="full"]):not(.alignfull) {
// 2px of extra padding are added to each side here
// To better match up with the spacing of the whole
// document.
@include media(tablet) { @include media(tablet) {
width: 80%; max-width: calc(8 * (100vw / 12));
margin-left: 10%;
margin-right: 10%;
padding-left: 48px;
padding-right: 48px;
} }
// Child blocks: All alignments except full @include media(desktop) {
> .wp-block:not([data-align="full"]) { max-width: calc(6 * (100vw / 12));
max-width: calc(100vw - (2 * 1rem));
@include media(tablet) {
max-width: calc(8 * (100vw / 12));
}
@include media(desktop) {
max-width: calc(6 * (100vw / 12));
}
} }
}
// Child blocks: Right alignments // Child blocks: Not Full Alignments
> .wp-block[data-align="right"] { > .wp-block:not([data-align="full"]):not(.alignfull) {
padding-left: 10px;
padding-right: 10px;
@include media(tablet) { @include media(tablet) {
max-width: 125%; padding-left: 0;
} padding-right: 0;
} }
}
// Child blocks: Wide alignments // Child blocks: Right alignments
> .wp-block[data-align="wide"] { > .wp-block[data-align="right"] {
@include media(tablet) { @include media(tablet) {
width: calc(100% + 4px); max-width: 125%;
max-width: calc(100% + 4px);
}
} }
}
// Child blocks: Full alignments // Child blocks: Wide alignments
> .wp-block[data-align=full] { > .wp-block[data-align="wide"],
max-width: calc(100vw + (2 * 1rem)); > .wp-block.alignwide {
@include media(mobile) { @include media(tablet) {
width: calc(100% + 92px); width: 100%;
left: -46px; max-width: 100%;
} }
}
@include media(tablet) { // Child blocks: Full alignments
left: calc(-12.5% - 58px); > .wp-block[data-align=full],
width: calc(125% + 120px); > .wp-block.alignfull {
max-width: calc(125% + 119px);
} @include media(tablet) {
left: calc( -12.5% - 13px );
width: calc( 125% + 26px );
max-width: calc( 125% + 25px );
} }
} }
} }
// Group block with background color // Group block with background color
> .is-block-content > .wp-block-group.has-background { &.has-background {
// When the Group block is full width, we can remove the left/right padding // When the Group block is full width, we can remove the left/right padding.
// and let this inherit the
padding: $group-block-background__padding 0; padding: $group-block-background__padding 0;
@include media(mobile) { @include media(mobile) {
@ -932,7 +941,8 @@ $group-block-background__padding: $font__size_base;
} }
// Child blocks: Full alignment // Child blocks: Full alignment
> .wp-block-group__inner-container > .block-editor-inner-blocks > .block-editor-block-list__layout > .wp-block[data-align="full"] { > .wp-block-group__inner-container > .wp-block[data-align="full"],
> .wp-block-group__inner-container > .wp-block.alignfull {
margin-left: 0; margin-left: 0;
width: 100%; width: 100%;
@ -946,4 +956,3 @@ $group-block-background__padding: $font__size_base;
} }
} }
} }
}

View File

@ -5640,7 +5640,7 @@ body.page .main-navigation {
} }
@-moz-document url-prefix() { @-moz-document url-prefix() {
.entry .entry-content .has-drop-cap:not(:focus):first-letter { .entry .entry-content .has-drop-cap:not(:focus)::first-letter {
margin-top: 0.2em; margin-top: 0.2em;
} }
} }
@ -6023,25 +6023,6 @@ body.page .main-navigation {
* is followed by an H1, or H2 */ * is followed by an H1, or H2 */
} }
.entry .entry-content .wp-block-separator:not(.wp-block-separator),
.entry .entry-content hr:not(.wp-block-separator) {
max-width: 100%;
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-separator:not(.wp-block-separator),
.entry .entry-content hr:not(.wp-block-separator) {
max-width: calc(8 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-separator:not(.wp-block-separator),
.entry .entry-content hr:not(.wp-block-separator) {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
.entry .entry-content .wp-block-separator.is-style-wide, .entry .entry-content .wp-block-separator.is-style-wide,
.entry .entry-content hr.is-style-wide { .entry .entry-content hr.is-style-wide {
max-width: 100%; max-width: 100%;