From 526884d79c96ea512c1bd660784edc3616c401a3 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 16 Apr 2020 19:39:19 -0400 Subject: [PATCH 1/4] Varia: Fix button styles to work alongside Gutenberg 7.9 --- varia/sass/blocks/button/_editor.scss | 39 +++++++++++++-------------- varia/style-editor.css | 24 +++++++++-------- varia/style-rtl.css | 4 +++ 3 files changed, 36 insertions(+), 31 deletions(-) diff --git a/varia/sass/blocks/button/_editor.scss b/varia/sass/blocks/button/_editor.scss index c0eb3d99ba..50e6d003fa 100644 --- a/varia/sass/blocks/button/_editor.scss +++ b/varia/sass/blocks/button/_editor.scss @@ -1,26 +1,24 @@ -.wp-block-button { - - /* Default Style */ - .wp-block-button__link { - color: #{map-deep-get($config-button, "color", "text")}; - font-weight: #{map-deep-get($config-button, "font", "weight")}; - @include font-family( map-deep-get($config-button, "font", "family") ); - font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em); - line-height: #{map-deep-get($config-button, "font", "line-height")}; - background-color: #{map-deep-get($config-button, "color", "background")}; - border-radius: #{map-deep-get($config-button, "border-radius")}; - padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")}; +/* Default Style */ +.wp-block-button__link { + color: #{map-deep-get($config-button, "color", "text")}; + font-weight: #{map-deep-get($config-button, "font", "weight")}; + @include font-family( map-deep-get($config-button, "font", "family") ); + font-size: (strip-unit(map-deep-get($config-button, "font", "size")) + 0em); + line-height: #{map-deep-get($config-button, "font", "line-height")}; + background-color: #{map-deep-get($config-button, "color", "background")}; + border-radius: #{map-deep-get($config-button, "border-radius")}; + padding: #{map-deep-get($config-button, "padding", "vertical")} #{map-deep-get($config-button, "padding", "horizontal")}; - &:hover, - &:focus, - &.has-focus { - color: #{map-deep-get($config-button, "color", "text-hover")}; - background-color: #{map-deep-get($config-button, "color", "background-hover")}; - } + &:hover, + &:focus, + &.has-focus { + color: #{map-deep-get($config-button, "color", "text-hover")}; + background-color: #{map-deep-get($config-button, "color", "background-hover")}; } /* Outline Style */ - &.is-style-outline { + &.is-style-outline, + .is-style-outline & { .wp-block-button__link { color: #{map-deep-get($config-button, "color", "background")}; @@ -36,7 +34,8 @@ } /* Squared Style */ - &.is-style-squared .wp-block-button__link { + &.is-style-squared, + .is-style-squared & { border-radius: 0; } } diff --git a/varia/style-editor.css b/varia/style-editor.css index 82cbe728a4..e72dcdbd22 100644 --- a/varia/style-editor.css +++ b/varia/style-editor.css @@ -528,13 +528,8 @@ object { color: currentColor; } -.wp-block-button { - /* Default Style */ - /* Outline Style */ - /* Squared Style */ -} - -.wp-block-button .wp-block-button__link { +/* Default Style */ +.wp-block-button__link { color: white; font-weight: bold; font-family: sans-serif; @@ -544,24 +539,31 @@ object { background-color: blue; border-radius: 9px; padding: 16px 16px; + /* Outline Style */ + /* Squared Style */ } -.wp-block-button .wp-block-button__link:hover, .wp-block-button .wp-block-button__link:focus, .wp-block-button .wp-block-button__link.has-focus { +.wp-block-button__link:hover, .wp-block-button__link:focus, .wp-block-button__link.has-focus { color: white; background-color: indigo; } -.wp-block-button.is-style-outline .wp-block-button__link { +.wp-block-button__link.is-style-outline .wp-block-button__link, +.is-style-outline .wp-block-button__link .wp-block-button__link { color: blue; background: transparent; border: 2px solid currentcolor; } -.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus { +.wp-block-button__link.is-style-outline .wp-block-button__link:hover, .wp-block-button__link.is-style-outline .wp-block-button__link:focus, .wp-block-button__link.is-style-outline .wp-block-button__link.has-focus, +.is-style-outline .wp-block-button__link .wp-block-button__link:hover, +.is-style-outline .wp-block-button__link .wp-block-button__link:focus, +.is-style-outline .wp-block-button__link .wp-block-button__link.has-focus { color: indigo; } -.wp-block-button.is-style-squared .wp-block-button__link { +.wp-block-button__link.is-style-squared, +.is-style-squared .wp-block-button__link { border-radius: 0; } diff --git a/varia/style-rtl.css b/varia/style-rtl.css index e85eb024c7..f22d73a35b 100644 --- a/varia/style-rtl.css +++ b/varia/style-rtl.css @@ -1439,6 +1439,10 @@ button[data-load-more-btn], .button { padding: 14px 16px; } +.wp-block-button.is-style-outline .wp-block-button__link:active { + color: blue; +} + .wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus { color: indigo; } From 68a276bbbd1f1b7f716b87b7f28d05534ddc75bf Mon Sep 17 00:00:00 2001 From: Allan Cole Date: Fri, 17 Apr 2020 14:40:12 -0400 Subject: [PATCH 2/4] Varia: revise outline button selector nesting. code tidying --- varia/sass/blocks/button/_editor.scss | 16 +++++++--------- varia/style-editor.css | 12 ++++++------ 2 files changed, 13 insertions(+), 15 deletions(-) diff --git a/varia/sass/blocks/button/_editor.scss b/varia/sass/blocks/button/_editor.scss index 50e6d003fa..ec55c74980 100644 --- a/varia/sass/blocks/button/_editor.scss +++ b/varia/sass/blocks/button/_editor.scss @@ -20,16 +20,14 @@ &.is-style-outline, .is-style-outline & { - .wp-block-button__link { - color: #{map-deep-get($config-button, "color", "background")}; - background: transparent; - border: 2px solid currentcolor; + color: #{map-deep-get($config-button, "color", "background")}; + background: transparent; + border: 2px solid currentcolor; - &:hover, - &:focus, - &.has-focus { - color: #{map-deep-get($config-button, "color", "background-hover")}; - } + &:hover, + &:focus, + &.has-focus { + color: #{map-deep-get($config-button, "color", "background-hover")}; } } diff --git a/varia/style-editor.css b/varia/style-editor.css index e72dcdbd22..d0c5a4dc17 100644 --- a/varia/style-editor.css +++ b/varia/style-editor.css @@ -548,17 +548,17 @@ object { background-color: indigo; } -.wp-block-button__link.is-style-outline .wp-block-button__link, -.is-style-outline .wp-block-button__link .wp-block-button__link { +.wp-block-button__link.is-style-outline, +.is-style-outline .wp-block-button__link { color: blue; background: transparent; border: 2px solid currentcolor; } -.wp-block-button__link.is-style-outline .wp-block-button__link:hover, .wp-block-button__link.is-style-outline .wp-block-button__link:focus, .wp-block-button__link.is-style-outline .wp-block-button__link.has-focus, -.is-style-outline .wp-block-button__link .wp-block-button__link:hover, -.is-style-outline .wp-block-button__link .wp-block-button__link:focus, -.is-style-outline .wp-block-button__link .wp-block-button__link.has-focus { +.wp-block-button__link.is-style-outline:hover, .wp-block-button__link.is-style-outline:focus, .wp-block-button__link.is-style-outline.has-focus, +.is-style-outline .wp-block-button__link:hover, +.is-style-outline .wp-block-button__link:focus, +.is-style-outline .wp-block-button__link.has-focus { color: indigo; } From 79e5f16995019fe79a56f71d253b5ede1594a14f Mon Sep 17 00:00:00 2001 From: Allan Cole Date: Fri, 17 Apr 2020 14:47:20 -0400 Subject: [PATCH 3/4] Varia: Add outline button styles for the frontend. --- varia/sass/blocks/button/_style.scss | 28 ++++++++++++++-------------- varia/style-rtl.css | 7 ++++++- varia/style.css | 8 +++++++- 3 files changed, 27 insertions(+), 16 deletions(-) diff --git a/varia/sass/blocks/button/_style.scss b/varia/sass/blocks/button/_style.scss index 6cb67cd1cc..37c7cb71ff 100644 --- a/varia/sass/blocks/button/_style.scss +++ b/varia/sass/blocks/button/_style.scss @@ -16,27 +16,27 @@ input[type="submit"], .wp-block-button { // Outline Style - &.is-style-outline { + &.is-style-outline, + &.is-style-outline .wp-block-button__link { - .wp-block-button__link { - color: #{map-deep-get($config-button, "color", "background")}; - background: transparent; - border: #{map-deep-get($config-button, "border-width")} solid currentcolor; - padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")}; + color: #{map-deep-get($config-button, "color", "background")}; + background: transparent; + border: #{map-deep-get($config-button, "border-width")} solid currentcolor; + padding: #{map-deep-get($config-button, "padding", "vertical") - map-deep-get($config-button, "border-width")} #{map-deep-get($config-button, "padding", "horizontal")}; - &:active { - color: #{map-deep-get($config-button, "color", "background")}; - } + &:active { + color: #{map-deep-get($config-button, "color", "background")}; + } - &:hover, - &:focus, - &.has-focus { - color: #{map-deep-get($config-button, "color", "background-hover")}; - } + &:hover, + &:focus, + &.has-focus { + color: #{map-deep-get($config-button, "color", "background-hover")}; } } // Squared Style + &.is-style-squared, &.is-style-squared .wp-block-button__link { border-radius: 0; } diff --git a/varia/style-rtl.css b/varia/style-rtl.css index f22d73a35b..22b94f525a 100644 --- a/varia/style-rtl.css +++ b/varia/style-rtl.css @@ -1432,6 +1432,7 @@ button[data-load-more-btn], .button { /** * Block Options */ +.wp-block-button.is-style-outline, .wp-block-button.is-style-outline .wp-block-button__link { color: blue; background: transparent; @@ -1439,11 +1440,15 @@ button[data-load-more-btn], .button { padding: 14px 16px; } +.wp-block-button.is-style-outline:active, .wp-block-button.is-style-outline .wp-block-button__link:active { color: blue; } -.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus { +.wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline.has-focus, +.wp-block-button.is-style-outline .wp-block-button__link:hover, +.wp-block-button.is-style-outline .wp-block-button__link:focus, +.wp-block-button.is-style-outline .wp-block-button__link.has-focus { color: indigo; } diff --git a/varia/style.css b/varia/style.css index 4693df48e0..aced91ba32 100644 --- a/varia/style.css +++ b/varia/style.css @@ -1432,6 +1432,7 @@ button[data-load-more-btn], .button { /** * Block Options */ +.wp-block-button.is-style-outline, .wp-block-button.is-style-outline .wp-block-button__link { color: blue; background: transparent; @@ -1439,14 +1440,19 @@ button[data-load-more-btn], .button { padding: 14px 16px; } +.wp-block-button.is-style-outline:active, .wp-block-button.is-style-outline .wp-block-button__link:active { color: blue; } -.wp-block-button.is-style-outline .wp-block-button__link:hover, .wp-block-button.is-style-outline .wp-block-button__link:focus, .wp-block-button.is-style-outline .wp-block-button__link.has-focus { +.wp-block-button.is-style-outline:hover, .wp-block-button.is-style-outline:focus, .wp-block-button.is-style-outline.has-focus, +.wp-block-button.is-style-outline .wp-block-button__link:hover, +.wp-block-button.is-style-outline .wp-block-button__link:focus, +.wp-block-button.is-style-outline .wp-block-button__link.has-focus { color: indigo; } +.wp-block-button.is-style-squared, .wp-block-button.is-style-squared .wp-block-button__link { border-radius: 0; } From ea620ddaa87aac07ea31d99712fc715fe3ff743e Mon Sep 17 00:00:00 2001 From: Allan Cole Date: Fri, 17 Apr 2020 15:45:20 -0400 Subject: [PATCH 4/4] Varia: Cleanup left/right align styles for button blocks before and after 7.9.1. --- varia/sass/blocks/button/_style.scss | 10 ++++++ varia/sass/blocks/utilities/_style.scss | 3 +- varia/style-rtl.css | 43 ++++++++++++++----------- varia/style.css | 42 +++++++++++++----------- 4 files changed, 61 insertions(+), 37 deletions(-) diff --git a/varia/sass/blocks/button/_style.scss b/varia/sass/blocks/button/_style.scss index 37c7cb71ff..96751f4c9a 100644 --- a/varia/sass/blocks/button/_style.scss +++ b/varia/sass/blocks/button/_style.scss @@ -40,4 +40,14 @@ input[type="submit"], &.is-style-squared .wp-block-button__link { border-radius: 0; } + + // Set alignleft as default floating behavior + .entry-content > &:not(.alignleft):not(.alignright) { + @extend %responsive-alignleft; + } + + // Set aligndefault as center floating behavior + .entry-content > &.aligncenter { + @extend %responsive-aligndefault; + } } diff --git a/varia/sass/blocks/utilities/_style.scss b/varia/sass/blocks/utilities/_style.scss index 4996d9bf51..bf9408f9b6 100644 --- a/varia/sass/blocks/utilities/_style.scss +++ b/varia/sass/blocks/utilities/_style.scss @@ -55,7 +55,8 @@ /** * .aligndefault */ -.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), +.entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator) { @extend %responsive-aligndefault; } diff --git a/varia/style-rtl.css b/varia/style-rtl.css index 22b94f525a..5a6b98d1ce 100644 --- a/varia/style-rtl.css +++ b/varia/style-rtl.css @@ -1452,6 +1452,7 @@ button[data-load-more-btn], .button { color: indigo; } +.wp-block-button.is-style-squared, .wp-block-button.is-style-squared .wp-block-button__link { border-radius: 0; } @@ -3590,10 +3591,11 @@ img#wpstats { * Page Layout Styles & Repsonsive Styles */ /* Responsive width-content overrides */ -.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, +.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, -.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), +.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), +.entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: 100%; margin-right: auto; @@ -3601,50 +3603,55 @@ img#wpstats { } @media only screen and (min-width: 560px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 560px - 32px); } } @media only screen and (min-width: 640px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 640px - 32px); } } @media only screen and (min-width: 782px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 782px - 32px); } } @media only screen and (min-width: 1024px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 782px - 32px); } } @media only screen and (min-width: 1280px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 782px - 32px); } @@ -3782,36 +3789,36 @@ img#wpstats { } } -.entry-content > .alignleft { +.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { margin-left: 16px; } @media only screen and (min-width: 560px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 560px - 32px))); } } @media only screen and (min-width: 640px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 640px - 32px))); } } @media only screen and (min-width: 782px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1024px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1280px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } diff --git a/varia/style.css b/varia/style.css index aced91ba32..3b085c3475 100644 --- a/varia/style.css +++ b/varia/style.css @@ -3608,10 +3608,11 @@ img#wpstats { * Page Layout Styles & Repsonsive Styles */ /* Responsive width-content overrides */ -.responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, +.responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, -.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), +.wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), +.entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: 100%; margin-left: auto; @@ -3619,50 +3620,55 @@ img#wpstats { } @media only screen and (min-width: 560px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 560px - 32px); } } @media only screen and (min-width: 640px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 640px - 32px); } } @media only screen and (min-width: 782px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 782px - 32px); } } @media only screen and (min-width: 1024px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 782px - 32px); } } @media only screen and (min-width: 1280px) { - .responsive-max-width, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, + .responsive-max-width, .entry-content > .wp-block-button.aligncenter, .wp-block-pullquote.is-style-solid-color:not(.alignleft):not(.alignright) blockquote, .wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignfull > p, .wp-block-pullquote.alignwide blockquote, - .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.entry-attachment), + .wp-block-pullquote.alignfull blockquote, hr.wp-block-separator.is-style-wide, .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.wp-block-button):not(.entry-attachment), + .entry-content > *:not(.wp-block-button), .entry-content [class*="inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator), .entry-content .wp-audio-shortcode, .post-navigation, .pagination { max-width: calc( 782px - 32px); } @@ -3806,41 +3812,41 @@ img#wpstats { } } -.entry-content > .alignleft { +.entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { /*rtl:ignore*/ margin-left: 16px; } @media only screen and (min-width: 560px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 560px - 32px))); } } @media only screen and (min-width: 640px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 640px - 32px))); } } @media only screen and (min-width: 782px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1024px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); } } @media only screen and (min-width: 1280px) { - .entry-content > .alignleft { + .entry-content > .wp-block-button:not(.alignleft):not(.alignright), .entry-content > .alignleft { /*rtl:ignore*/ margin-left: calc( 0.5 * (100vw - calc( 782px - 32px))); }