diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss index 28572e08..5e9057a9 100644 --- a/sass/blocks/_blocks.scss +++ b/sass/blocks/_blocks.scss @@ -363,10 +363,14 @@ padding: 0; blockquote { - margin-left: 0; + margin: $size__spacing-unit 0; padding: 0; text-align: left; max-width: 100%; + + p:first-child { + margin-top: 0; + } } } @@ -400,10 +404,11 @@ } blockquote { - max-width: calc(100% - (2 * #{$size__spacing-unit})); + max-width: 100%; color: $color__background-body; padding-left: 0; margin-left: $size__spacing-unit; + margin-right: $size__spacing-unit; &.has-text-color p, &.has-text-color a, @@ -421,6 +426,14 @@ } } + &.alignright, + &.alignleft { + + @include media(tablet) { + padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); + } + } + &.alignfull { @include media(tablet) { @@ -545,7 +558,7 @@ width: 100%; @include media(tablet) { - padding: $size__spacing-unit; + padding: $size__spacing-unit calc(2 * #{$size__spacing-unit}); } } diff --git a/style-editor.css b/style-editor.css index 911bba16..7f698585 100644 --- a/style-editor.css +++ b/style-editor.css @@ -332,12 +332,19 @@ figcaption, .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { width: 100%; max-width: 100%; + padding: calc(1.375 * 1rem); +} + +.wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover p, +.wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover p { + padding-left: 0; + padding-right: 0; } @media only screen and (min-width: 768px) { .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover, .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { - padding: 1rem; + padding: calc(2.75 * 1rem) calc(2.75 * 1rem) calc(3.125 * 1rem); } } @@ -524,14 +531,39 @@ figcaption, max-width: 50%; } -.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color), -.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote:not(.is-style-solid-color) { +.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote, +.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote { + margin-top: 0; + margin-bottom: 0; +} + +.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote, +.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote { padding: 0; } -.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color, -.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color { - padding: 1em; +.wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color blockquote, +.wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color blockquote { + width: 100%; + max-width: 100%; + padding: calc(1.375 * 1rem); +} + +@media only screen and (min-width: 768px) { + .wp-block[data-type="core/pullquote"][data-align="left"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color blockquote, + .wp-block[data-type="core/pullquote"][data-align="right"] .editor-block-list__block-edit .wp-block-pullquote.is-style-solid-color blockquote { + padding: calc(2.75 * 1rem) calc(2.75 * 1rem) calc(3.125 * 1rem); + } +} + +.wp-block[data-type="core/pullquote"][data-align="left"] blockquote, +.wp-block[data-type="core/pullquote"][data-align="right"] blockquote { + margin: 1rem 0; +} + +.wp-block[data-type="core/pullquote"][data-align="left"] blockquote p:first-child, +.wp-block[data-type="core/pullquote"][data-align="right"] blockquote p:first-child { + margin-top: 0; } .wp-block[data-type="core/pullquote"][data-align="left"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, diff --git a/style-editor.scss b/style-editor.scss index 2467cf51..f2d3e75e 100644 --- a/style-editor.scss +++ b/style-editor.scss @@ -294,12 +294,15 @@ figcaption, .wp-block-cover { width: 100%; max-width: 100%; - } - - @include media(tablet) { - - .wp-block-cover { - padding: $size__spacing-unit; + padding: calc(1.375 * #{$size__spacing-unit}); + + p { + padding-left: 0; + padding-right: 0; + } + + @include media(tablet) { + padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit}); } } } @@ -497,12 +500,34 @@ figcaption, width: calc(4 * (100vw / 12)); max-width: 50%; - .wp-block-pullquote:not(.is-style-solid-color) { + .wp-block-pullquote { + margin-top: 0; + margin-bottom: 0; + } + + .wp-block-pullquote { padding: 0; } .wp-block-pullquote.is-style-solid-color { - padding: 1em; + + blockquote { + width: 100%; + max-width: 100%; + padding: calc(1.375 * #{$size__spacing-unit}); + + @include media(tablet) { + padding: calc(2.75 * #{$size__spacing-unit}) calc(2.75 * #{$size__spacing-unit}) calc(3.125 * #{$size__spacing-unit}); + } + } + } + } + + blockquote { + margin: $size__spacing-unit 0; + + p:first-child { + margin-top: 0; } } diff --git a/style-rtl.css b/style-rtl.css index d0fc3e66..01fcc590 100755 --- a/style-rtl.css +++ b/style-rtl.css @@ -3805,12 +3805,16 @@ body.page .main-navigation { } .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote { - margin-right: 0; + margin: 1rem 0; padding: 0; text-align: right; max-width: 100%; } +.entry .entry-content .wp-block-pullquote.alignleft blockquote p:first-child, .entry .entry-content .wp-block-pullquote.alignright blockquote p:first-child { + margin-top: 0; +} + .entry .entry-content .wp-block-pullquote.is-style-solid-color { background-color: #0073aa; padding-right: 0; @@ -3846,10 +3850,11 @@ body.page .main-navigation { } .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote { - max-width: calc(100% - (2 * 1rem)); + max-width: 100%; color: #fff; padding-right: 0; margin-right: 1rem; + margin-left: 1rem; } .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-text-color p, @@ -3864,6 +3869,12 @@ body.page .main-navigation { } } +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignright, .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignleft { + padding: 1rem calc(2 * 1rem); + } +} + @media only screen and (min-width: 768px) { .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignfull { padding-right: calc(10% + 58px + (2 * 1rem)); @@ -3996,7 +4007,7 @@ body.page .main-navigation { .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, .entry .entry-content .wp-block-cover.alignleft, .entry .entry-content .wp-block-cover.alignright { - padding: 1rem; + padding: 1rem calc(2 * 1rem); } } diff --git a/style.css b/style.css index 45b3e543..cfa252eb 100755 --- a/style.css +++ b/style.css @@ -3817,12 +3817,16 @@ body.page .main-navigation { } .entry .entry-content .wp-block-pullquote.alignleft blockquote, .entry .entry-content .wp-block-pullquote.alignright blockquote { - margin-left: 0; + margin: 1rem 0; padding: 0; text-align: left; max-width: 100%; } +.entry .entry-content .wp-block-pullquote.alignleft blockquote p:first-child, .entry .entry-content .wp-block-pullquote.alignright blockquote p:first-child { + margin-top: 0; +} + .entry .entry-content .wp-block-pullquote.is-style-solid-color { background-color: #0073aa; padding-left: 0; @@ -3858,10 +3862,11 @@ body.page .main-navigation { } .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote { - max-width: calc(100% - (2 * 1rem)); + max-width: 100%; color: #fff; padding-left: 0; margin-left: 1rem; + margin-right: 1rem; } .entry .entry-content .wp-block-pullquote.is-style-solid-color blockquote.has-text-color p, @@ -3876,6 +3881,12 @@ body.page .main-navigation { } } +@media only screen and (min-width: 768px) { + .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignright, .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignleft { + padding: 1rem calc(2 * 1rem); + } +} + @media only screen and (min-width: 768px) { .entry .entry-content .wp-block-pullquote.is-style-solid-color.alignfull { padding-left: calc(10% + 58px + (2 * 1rem)); @@ -4008,7 +4019,7 @@ body.page .main-navigation { .entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright, .entry .entry-content .wp-block-cover.alignleft, .entry .entry-content .wp-block-cover.alignright { - padding: 1rem; + padding: 1rem calc(2 * 1rem); } }