<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[45605] trunk/src/wp-content/themes/twentynineteen: Twenty Nineteen: Add styles for the new Group block.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/45605">45605</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/45605","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>laurelfulford</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2019-07-07 20:10:55 +0000 (Sun, 07 Jul 2019)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Twenty Nineteen: Add styles for the new Group block.
Add styles for the new Group block to the theme, to make sure nested blocks display correctly when using the wide and full alignments.
Props @kjellr, @dianeco.
Fixes <a href="https://core.trac.wordpress.org/ticket/46750">#46750</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentynineteensassblocks_blocksscss">trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentynineteenstyleeditorcss">trunk/src/wp-content/themes/twentynineteen/style-editor.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentynineteenstyleeditorscss">trunk/src/wp-content/themes/twentynineteen/style-editor.scss</a></li>
<li><a href="#trunksrcwpcontentthemestwentynineteenstylertlcss">trunk/src/wp-content/themes/twentynineteen/style-rtl.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentynineteenstylecss">trunk/src/wp-content/themes/twentynineteen/style.css</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpcontentthemestwentynineteensassblocks_blocksscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss 2019-07-05 08:03:40 UTC (rev 45604)
+++ trunk/src/wp-content/themes/twentynineteen/sass/blocks/_blocks.scss 2019-07-07 20:10:55 UTC (rev 45605)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,7 +1,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* !Block styles */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+// Default block margin and alignment rules.
+// These are replicated inside of the Group block
+// so that child blocks in there appear the same way.
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > * {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 32px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -11,14 +17,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 32px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- > *:first-child {
- margin-top: 0;
- }
-
- > *:last-child {
- margin-bottom: 0;
- }
-
</del><span class="cx" style="display: block; padding: 0 10px"> &.alignwide {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: auto;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -91,6 +89,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-content > *,
+.entry .entry-summary > * {
+
+ > *:first-child {
+ margin-top: 0;
+ }
+
+ > *:last-child {
+ margin-bottom: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * Unset nested content selector styles
</span><span class="cx" style="display: block; padding: 0 10px"> * - Prevents layout styles from cascading too deeply
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -512,6 +522,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // If an image does not have a left/center/right alignment,
+ // it's a direct child of .wp-block-img. If it has no other
+ // alignment added, we want to make sure the image does not
+ // extend beyond the width of the text column.
+ &:not(.alignwide):not(.alignfull) > img {
+ @include postContentMaxWidth();
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .aligncenter {
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @include postContentMaxWidth();
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -752,6 +770,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Ensure images do not expand beyond the column.
+ .wp-block-image > img:not(.alignwide):not(.alignfull) {
+
+ @include media(tablet) {
+ max-width: 100%;
+ }
+
+ @include media(desktop) {
+ max-width: 100%;
+ }
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @include media(tablet) {
</span><span class="cx" style="display: block; padding: 0 10px"> flex-wrap: nowrap;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -761,6 +791,76 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ //! Group
+ .wp-block-group {
+
+ // When the Group block is standard/wide, we need to prevent full-aligned
+ // child blocks from expanding out of their container.
+ &:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
+ &:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
+
+ @include media(tablet) {
+ left: 0;
+ max-width: 100%;
+ }
+ }
+
+ // The full-width Group block's inner container should mimic .entry-content styles.
+ &.alignfull > .wp-block-group__inner-container {
+ max-width: calc(100% - (2 * #{ $size__spacing-unit }));
+ margin: 0 $size__spacing-unit;
+
+ @include media(tablet) {
+ max-width: 80%;
+ margin: 0 10%;
+ padding: 0 60px;
+ }
+ }
+
+ // Group block with a colored background.
+ &.has-background {
+ padding: $size__spacing-unit;
+ margin-top: 0;
+ margin-bottom: 0;
+
+ // Remove the top and bottom margins of inner blocks.
+ .wp-block-group__inner-container {
+
+ > *:first-child {
+ margin-top: 0;
+ }
+
+ > *:last-child {
+ margin-bottom: 0;
+ }
+ }
+
+ // If the Group block is full-width, it does not need this extra padding.
+ &.alignfull {
+ padding-left: 0;
+ padding-right: 0;
+
+ @include media(tablet) {
+ padding-top: $size__spacing-unit;
+ padding-bottom: $size__spacing-unit;
+ }
+ }
+
+ // Full-aligned child blocks should take up the maximum width available in their container.
+ &:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+ width: 100%;
+ max-width: 100%;
+
+ @include media(tablet) {
+ width: calc( 100% + #{$size__spacing-unit * 2} );
+ max-width: calc( 100% + #{$size__spacing-unit * 2} );
+ margin-left: -#{$size__spacing-unit};
+ }
+ }
+ }
+
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> //! Latest Comments
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-comments {
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentynineteenstyleeditorcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentynineteen/style-editor.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentynineteen/style-editor.css 2019-07-05 08:03:40 UTC (rev 45604)
+++ trunk/src/wp-content/themes/twentynineteen/style-editor.css 2019-07-07 20:10:55 UTC (rev 45605)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1293,3 +1293,147 @@
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: 1.6;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #767676;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/** === Group Block === */
+.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ left: 0;
+}
+
+.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+ padding: 22px;
+}
+
+.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ margin-left: -22px;
+ width: calc(100% + 44px);
+ max-width: calc(100% + 44px);
+}
+
+@media only screen and (min-width: 768px) {
+ .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+ width: calc(8 * (100vw / 12));
+ }
+}
+
+@media only screen and (min-width: 1168px) {
+ .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+ width: calc(6 * (100vw / 12 ));
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+ width: calc(8 * (100vw / 12) - 44px);
+ }
+}
+
+@media only screen and (min-width: 1168px) {
+ .wp-block[data-type="core/group"][data-align="wide"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="wide"]):not([data-align="full"]) {
+ width: calc(6 * (100vw / 12 ) - 44px);
+ }
+}
+
+@media only screen and (min-width: 600px) {
+ .wp-block[data-type="core/group"][data-align="full"] {
+ max-width: calc(100% + 89px);
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .wp-block[data-type="core/group"][data-align="full"] {
+ max-width: calc(125% + 114px);
+ }
+}
+
+@media only screen and (min-width: 600px) {
+ .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
+ padding-left: 46px;
+ padding-right: 46px;
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout {
+ width: 80%;
+ margin-left: 10%;
+ margin-right: 10%;
+ padding-left: 48px;
+ padding-right: 48px;
+ }
+}
+
+.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
+ max-width: calc(100vw - (2 * 1rem));
+}
+
+@media only screen and (min-width: 768px) {
+ .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
+ max-width: calc(8 * (100vw / 12));
+ }
+}
+
+@media only screen and (min-width: 1168px) {
+ .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block:not([data-align="full"]) {
+ max-width: calc(6 * (100vw / 12));
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="right"] {
+ max-width: 125%;
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="wide"] {
+ width: calc(100% + 4px);
+ max-width: calc(100% + 4px);
+ }
+}
+
+.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .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"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .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"] > .editor-block-list__block-edit > div > .wp-block-group > .wp-block-group__inner-container > .editor-inner-blocks > .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"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+ padding: 22px 0;
+}
+
+@media only screen and (min-width: 600px) {
+ .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+ padding-left: 0;
+ padding-right: 0;
+ }
+}
+
+.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ margin-left: 0;
+ width: 100%;
+}
+
+@media only screen and (min-width: 600px) {
+ .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ width: calc(100% + 92px);
+ }
+}
+
+@media only screen and (min-width: 768px) {
+ .wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ width: calc(125% + 120px);
+ }
+}
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentynineteenstyleeditorscss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentynineteen/style-editor.scss</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentynineteen/style-editor.scss 2019-07-05 08:03:40 UTC (rev 45604)
+++ trunk/src/wp-content/themes/twentynineteen/style-editor.scss 2019-07-07 20:10:55 UTC (rev 45605)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -739,3 +739,180 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+/** === Group Block === */
+
+// This matches the 22px value for 1rem that used on the front end.
+// It must be specified in pixels for the editor, since the root font
+// size is different here.
+$group-block-background__padding: $font__size_base;
+
+.wp-block[data-type="core/group"] {
+
+ // Group block base styles
+ > .editor-block-list__block-edit > div > .wp-block-group {
+
+ // Child: Full alignment
+ > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ left: 0;
+ }
+ }
+
+ // Group block with background color
+ > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+ padding: $group-block-background__padding;
+
+ // Child: Full alignment
+ > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ margin-left: -$group-block-background__padding;
+ width: calc(100% + #{$group-block-background__padding * 2});
+ max-width: calc(100% + #{$group-block-background__padding * 2});
+ }
+ }
+
+ // Wide and full alignments
+ &[data-align="wide"] {
+
+ // Group block base styles.
+ > .editor-block-list__block-edit > div > .wp-block-group {
+
+ // Child blocks: Default alignments
+ > .wp-block-group__inner-container > .editor-inner-blocks > .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 ));
+ }
+ }
+ }
+
+ // Group block with background color
+ > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+
+ // Child blocks: Default alignments
+ > .wp-block-group__inner-container > .editor-inner-blocks > .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
+ &[data-align="full"] {
+
+ // Max-width needs to be a pixel narrower than usual to prevent horizontal scrolling.
+ @include media(mobile) {
+ max-width: calc(100% + 89px);
+ }
+ @include media(tablet) {
+ max-width: calc(125% + 114px);
+ }
+
+ // Group block base styles
+ > .editor-block-list__block-edit > div > .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 > .editor-inner-blocks > .editor-block-list__layout {
+
+ @include media(mobile) {
+ padding-left: 46px;
+ padding-right: 46px;
+ }
+
+ // 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: 48px;
+ padding-right: 48px;
+ }
+
+ // Child blocks: All alignments except full
+ > .wp-block:not([data-align="full"]) {
+ 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
+ > .wp-block[data-align="right"] {
+
+ @include media(tablet) {
+ max-width: 125%;
+ }
+ }
+
+ // Child blocks: Wide alignments
+ > .wp-block[data-align="wide"] {
+
+ @include media(tablet) {
+ width: calc(100% + 4px);
+ max-width: calc(100% + 4px);
+ }
+ }
+
+ // Child blocks: Full alignments
+ > .wp-block[data-align=full] {
+ max-width: calc(100vw + (2 * 1rem));
+
+ @include media(mobile) {
+ width: calc(100% + 92px);
+ left: -46px;
+ }
+
+ @include media(tablet) {
+ left: calc(-12.5% - 58px);
+ width: calc(125% + 120px);
+ max-width: calc(125% + 119px);
+ }
+ }
+ }
+ }
+
+ // Group block with background color
+ > .editor-block-list__block-edit > div > .wp-block-group.has-background {
+
+ // 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;
+
+ @include media(mobile) {
+ padding-left: 0;
+ padding-right: 0;
+ }
+
+ // Child blocks: Full alignment
+ > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] {
+ margin-left: 0;
+ width: 100%;
+
+ @include media(mobile) {
+ width: calc(100% + 92px);
+ }
+
+ @include media(tablet) {
+ width: calc(125% + 120px);
+ }
+ }
+ }
+ }
+}
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentynineteenstylertlcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentynineteen/style-rtl.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentynineteen/style-rtl.css 2019-07-05 08:03:40 UTC (rev 45604)
+++ trunk/src/wp-content/themes/twentynineteen/style-rtl.css 2019-07-07 20:10:55 UTC (rev 45605)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5186,7 +5186,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Blocks */
</span><span class="cx" style="display: block; padding: 0 10px"> /* !Block styles */
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > * {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 32px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5193,7 +5195,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > * {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(8 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5200,7 +5204,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 1168px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > * {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(6 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5207,23 +5213,17 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > * {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 32px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-content > * > *:first-child,
-.entry .entry-summary > * > *:first-child {
- margin-top: 0;
-}
-
-.entry .entry-content > * > *:last-child,
-.entry .entry-summary > * > *:last-child {
- margin-bottom: 0;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignwide,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.alignwide {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.alignwide,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5231,7 +5231,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignwide,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.alignwide {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.alignwide,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5238,7 +5240,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignfull,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.alignfull {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.alignfull,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
</ins><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> right: -1rem;
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc( 100% + (2 * 1rem));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5248,7 +5252,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignfull,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.alignfull {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.alignfull,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-top: calc(2 * 1rem);
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: calc(2 * 1rem);
</span><span class="cx" style="display: block; padding: 0 10px"> right: calc( -12.5% - 75px);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5258,7 +5264,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignleft,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.alignleft {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.alignleft,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
</ins><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(5 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5268,7 +5276,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignleft,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.alignleft {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.alignleft,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(4 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: calc(2 * 1rem);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5275,7 +5285,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignright,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.alignright {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.alignright,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
</ins><span class="cx" style="display: block; padding: 0 10px"> float: right;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(5 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5285,7 +5297,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignright,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.alignright {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.alignright,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(4 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: calc(2 * 1rem);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5293,7 +5307,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.aligncenter,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.aligncenter {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.aligncenter,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5300,7 +5316,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.aligncenter,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.aligncenter {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.aligncenter,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(8 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5307,7 +5325,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 1168px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.aligncenter,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.aligncenter {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.aligncenter,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(6 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5314,12 +5334,24 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.aligncenter,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.aligncenter {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.aligncenter,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-content > * > *:first-child,
+.entry .entry-summary > * > *:first-child {
+ margin-top: 0;
+}
+
+.entry .entry-content > * > *:last-child,
+.entry .entry-summary > * > *:last-child {
+ margin-bottom: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * Unset nested content selector styles
</span><span class="cx" style="display: block; padding: 0 10px"> * - Prevents layout styles from cascading too deeply
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5739,6 +5771,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
+ max-width: calc(8 * (100vw / 12) - 28px);
+ }
+}
+
+@media only screen and (min-width: 1168px) {
+ .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
+ max-width: calc(6 * (100vw / 12) - 28px);
+ }
+}
+
+@media only screen and (min-width: 768px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content .wp-block-image .aligncenter {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(8 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6038,6 +6082,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width: 1168px) {
+ .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width: 768px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content .wp-block-columns {
</span><span class="cx" style="display: block; padding: 0 10px"> flex-wrap: nowrap;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6046,6 +6102,66 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (min-width: 768px) {
+ .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
+ .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
+ right: 0;
+ max-width: 100%;
+ }
+}
+
+.entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
+ max-width: calc(100% - (2 * 1rem));
+ margin: 0 1rem;
+}
+
+@media only screen and (min-width: 768px) {
+ .entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
+ max-width: 80%;
+ margin: 0 10%;
+ padding: 0 60px;
+ }
+}
+
+.entry .entry-content .wp-block-group.has-background {
+ padding: 1rem;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:first-child {
+ margin-top: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:last-child {
+ margin-bottom: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background.alignfull {
+ padding-right: 0;
+ padding-left: 0;
+}
+
+@media only screen and (min-width: 768px) {
+ .entry .entry-content .wp-block-group.has-background.alignfull {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+}
+
+.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+ width: 100%;
+ max-width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+ .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+ width: calc( 100% + 2rem);
+ max-width: calc( 100% + 2rem);
+ margin-right: -1rem;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: bold;
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentynineteenstylecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentynineteen/style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentynineteen/style.css 2019-07-05 08:03:40 UTC (rev 45604)
+++ trunk/src/wp-content/themes/twentynineteen/style.css 2019-07-07 20:10:55 UTC (rev 45605)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5192,7 +5192,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Blocks */
</span><span class="cx" style="display: block; padding: 0 10px"> /* !Block styles */
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > * {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 32px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5199,7 +5201,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > * {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(8 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5206,7 +5210,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 1168px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > * {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(6 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5213,23 +5219,17 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > * {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > * {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin: 32px 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-content > * > *:first-child,
-.entry .entry-summary > * > *:first-child {
- margin-top: 0;
-}
-
-.entry .entry-content > * > *:last-child,
-.entry .entry-summary > * > *:last-child {
- margin-bottom: 0;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignwide,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.alignwide {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.alignwide,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5237,7 +5237,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignwide,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.alignwide {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.alignwide,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignwide,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignwide {
</ins><span class="cx" style="display: block; padding: 0 10px"> width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 100%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5244,7 +5246,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignfull,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.alignfull {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.alignfull,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
</ins><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="cx" style="display: block; padding: 0 10px"> left: -1rem;
</span><span class="cx" style="display: block; padding: 0 10px"> width: calc( 100% + (2 * 1rem));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5254,7 +5258,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignfull,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.alignfull {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.alignfull,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignfull,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignfull {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-top: calc(2 * 1rem);
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: calc(2 * 1rem);
</span><span class="cx" style="display: block; padding: 0 10px"> left: calc( -12.5% - 75px);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5264,7 +5270,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignleft,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.alignleft {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.alignleft,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
</ins><span class="cx" style="display: block; padding: 0 10px"> /*rtl:ignore*/
</span><span class="cx" style="display: block; padding: 0 10px"> float: left;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(5 * (100vw / 12));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5276,7 +5284,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignleft,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.alignleft {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.alignleft,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignleft,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignleft {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(4 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> /*rtl:ignore*/
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: calc(2 * 1rem);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5284,7 +5294,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignright,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.alignright {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.alignright,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
</ins><span class="cx" style="display: block; padding: 0 10px"> /*rtl:ignore*/
</span><span class="cx" style="display: block; padding: 0 10px"> float: right;
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(5 * (100vw / 12));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5296,7 +5308,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.alignright,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.alignright {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.alignright,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.alignright,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.alignright {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(4 * (100vw / 12));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> /*rtl:ignore*/
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5305,7 +5319,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.aligncenter,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.entry .entry-summary > *.aligncenter {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-summary > *.aligncenter,
+.entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+.entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5312,7 +5328,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.aligncenter,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.aligncenter {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.aligncenter,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(8 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5319,7 +5337,9 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 1168px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.aligncenter,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.aligncenter {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.aligncenter,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(6 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5326,12 +5346,24 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content > *.aligncenter,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .entry .entry-summary > *.aligncenter {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-summary > *.aligncenter,
+ .entry .entry-summary > .wp-block-group > .wp-block-group__inner-container > *.aligncenter,
+ .entry .entry-content > .wp-block-group > .wp-block-group__inner-container > *.aligncenter {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.entry .entry-content > * > *:first-child,
+.entry .entry-summary > * > *:first-child {
+ margin-top: 0;
+}
+
+.entry .entry-content > * > *:last-child,
+.entry .entry-summary > * > *:last-child {
+ margin-bottom: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /*
</span><span class="cx" style="display: block; padding: 0 10px"> * Unset nested content selector styles
</span><span class="cx" style="display: block; padding: 0 10px"> * - Prevents layout styles from cascading too deeply
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5751,6 +5783,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
+ max-width: calc(8 * (100vw / 12) - 28px);
+ }
+}
+
+@media only screen and (min-width: 1168px) {
+ .entry .entry-content .wp-block-image:not(.alignwide):not(.alignfull) > img {
+ max-width: calc(6 * (100vw / 12) - 28px);
+ }
+}
+
+@media only screen and (min-width: 768px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content .wp-block-image .aligncenter {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: calc(8 * (100vw / 12) - 28px);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6050,6 +6094,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 768px) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width: 1168px) {
+ .entry .entry-content .wp-block-columns .wp-block-image > img:not(.alignwide):not(.alignfull) {
+ max-width: 100%;
+ }
+}
+
+@media only screen and (min-width: 768px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content .wp-block-columns {
</span><span class="cx" style="display: block; padding: 0 10px"> flex-wrap: nowrap;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6058,6 +6114,66 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (min-width: 768px) {
+ .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .alignfull,
+ .entry .entry-content .wp-block-group:not(.alignfull) > .wp-block-group__inner-container > .wp-block-image > img {
+ left: 0;
+ max-width: 100%;
+ }
+}
+
+.entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
+ max-width: calc(100% - (2 * 1rem));
+ margin: 0 1rem;
+}
+
+@media only screen and (min-width: 768px) {
+ .entry .entry-content .wp-block-group.alignfull > .wp-block-group__inner-container {
+ max-width: 80%;
+ margin: 0 10%;
+ padding: 0 60px;
+ }
+}
+
+.entry .entry-content .wp-block-group.has-background {
+ padding: 1rem;
+ margin-top: 0;
+ margin-bottom: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:first-child {
+ margin-top: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background .wp-block-group__inner-container > *:last-child {
+ margin-bottom: 0;
+}
+
+.entry .entry-content .wp-block-group.has-background.alignfull {
+ padding-left: 0;
+ padding-right: 0;
+}
+
+@media only screen and (min-width: 768px) {
+ .entry .entry-content .wp-block-group.has-background.alignfull {
+ padding-top: 1rem;
+ padding-bottom: 1rem;
+ }
+}
+
+.entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+ width: 100%;
+ max-width: 100%;
+}
+
+@media only screen and (min-width: 768px) {
+ .entry .entry-content .wp-block-group.has-background:not(.alignfull) > .wp-block-group__inner-container > .alignfull {
+ width: calc( 100% + 2rem);
+ max-width: calc( 100% + 2rem);
+ margin-left: -1rem;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry .entry-content .wp-block-latest-comments .wp-block-latest-comments__comment-meta {
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: bold;
</span></span></pre>
</div>
</div>
</body>
</html>