From f790dd8e46c6a2ee5f4030440323c9c7c31a3b15 Mon Sep 17 00:00:00 2001 From: Kjell Reigstad Date: Thu, 22 Oct 2020 13:03:24 -0400 Subject: [PATCH] Remove flex-grow, use justify-content instead. --- assets/css/ie-editor.css | 12 ++-- assets/css/ie.css | 67 ++++++++++++----------- assets/sass/05-blocks/columns/_style.scss | 3 +- style-rtl.css | 7 ++- style.css | 7 ++- 5 files changed, 50 insertions(+), 46 deletions(-) diff --git a/assets/css/ie-editor.css b/assets/css/ie-editor.css index 60fb4dc05..c56981cdb 100644 --- a/assets/css/ie-editor.css +++ b/assets/css/ie-editor.css @@ -91,27 +91,27 @@ } .wp-block-button__link:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(1em + 0); } .wp-block-file .wp-block-file__button:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(1em + 0); } .wp-block-search .wp-block-search__button:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(1em + 0); } .wp-block-button__link:after { - margin-top: -calc(1em - 0); + margin-top: -calc(1em + 0); } .wp-block-file .wp-block-file__button:after { - margin-top: -calc(1em - 0); + margin-top: -calc(1em + 0); } .wp-block-search .wp-block-search__button:after { - margin-top: -calc(1em - 0); + margin-top: -calc(1em + 0); } .wp-block-button__link:active { diff --git a/assets/css/ie.css b/assets/css/ie.css index b58551933..0bbc133d4 100644 --- a/assets/css/ie.css +++ b/assets/css/ie.css @@ -230,51 +230,51 @@ input[type="reset"]:after, } .site .button:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(1em + 0); } input[type="submit"]:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(1em + 0); } input[type="reset"]:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(1em + 0); } .wp-block-search__button:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(1em + 0); } .wp-block-button .wp-block-button__link:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(1em + 0); } .wp-block-file .wp-block-file__button:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(1em + 0); } .site .button:after { - margin-top: -calc(1em - 0); + margin-top: -calc(1em + 0); } input[type="submit"]:after { - margin-top: -calc(1em - 0); + margin-top: -calc(1em + 0); } input[type="reset"]:after { - margin-top: -calc(1em - 0); + margin-top: -calc(1em + 0); } .wp-block-search__button:after { - margin-top: -calc(1em - 0); + margin-top: -calc(1em + 0); } .wp-block-button .wp-block-button__link:after { - margin-top: -calc(1em - 0); + margin-top: -calc(1em + 0); } .wp-block-file .wp-block-file__button:after { - margin-top: -calc(1em - 0); + margin-top: -calc(1em + 0); } .site .button:active { @@ -1074,23 +1074,23 @@ template { @media only screen and (min-width: 482px) { .entry-content > .alignleft { /*rtl:ignore*/ - margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1); + margin-left: calc(1*(100vw - min(calc(100vw - 4 * 25px), 610px))); /*rtl:ignore*/ margin-right: 25px; } @media only screen and (min-width: 482px){ .entry-content > .alignleft{ - margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1); + margin-left: calc(1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } @media only screen and (min-width: 482px){ .entry-content > .alignleft{ - margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1); + margin-left: calc(1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } @media only screen and (min-width: 822px){ .entry-content > .alignleft{ - margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1); + margin-left: calc(1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } } @@ -1100,21 +1100,21 @@ template { /*rtl:ignore*/ margin-left: 25px; /*rtl:ignore*/ - margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1); + margin-right: calc(1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } @media only screen and (min-width: 482px){ .entry-content > .alignright{ - margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1); + margin-right: calc(1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } @media only screen and (min-width: 482px){ .entry-content > .alignright{ - margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1); + margin-right: calc(1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } @media only screen and (min-width: 822px){ .entry-content > .alignright{ - margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px)*1); + margin-right: calc(1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } } @@ -2311,10 +2311,11 @@ a:hover { } } +.wp-block-columns.is-style-twentytwentyone-columns-overlap { + justify-content: space-around; +} + @media only screen and (min-width: 652px) { - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column { - flex-grow: 1; - } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { margin-left: -50px; margin-top: 63px; @@ -2696,11 +2697,11 @@ a:hover { } .wp-block-gallery .blocks-gallery-image { - width: calc(50% - 10px); + width: calc((100% - 20px)/2); } .wp-block-gallery .blocks-gallery-item { - width: calc(50% - 10px); + width: calc((100% - 20px)/2); } .wp-block-gallery .blocks-gallery-image figcaption { @@ -4522,21 +4523,21 @@ table.wp-calendar-table caption { margin-bottom: 30px; } .entry-content > .alignleft { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px)*1); + max-width: calc(50% - 1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } @media only screen and (min-width: 482px){ .entry-content > .alignleft{ - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px)*1); + max-width: calc(50% - 1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } @media only screen and (min-width: 482px){ .entry-content > .alignleft{ - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px)*1); + max-width: calc(50% - 1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } @media only screen and (min-width: 822px){ .entry-content > .alignleft{ - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px)*1); + max-width: calc(50% - 1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } } @@ -4585,21 +4586,21 @@ table.wp-calendar-table caption { margin-left: 25px; } .entry-content > .alignright { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px)*1); + max-width: calc(50% - 1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } @media only screen and (min-width: 482px){ .entry-content > .alignright{ - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px)*1); + max-width: calc(50% - 1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } @media only screen and (min-width: 482px){ .entry-content > .alignright{ - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px)*1); + max-width: calc(50% - 1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } @media only screen and (min-width: 822px){ .entry-content > .alignright{ - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px)*1); + max-width: calc(50% - 1*(100vw - min(calc(100vw - 4 * 25px), 610px))); } } } diff --git a/assets/sass/05-blocks/columns/_style.scss b/assets/sass/05-blocks/columns/_style.scss index bff729ac9..ac8a4f01d 100644 --- a/assets/sass/05-blocks/columns/_style.scss +++ b/assets/sass/05-blocks/columns/_style.scss @@ -41,10 +41,11 @@ &.is-style-twentytwentyone-columns-overlap { + justify-content: space-around; + @include media(laptop) { .wp-block-column { - flex-grow: 1; &:nth-child(2n) { margin-left: calc(-2 * var(--global--spacing-horizontal)); diff --git a/style-rtl.css b/style-rtl.css index f17dfc9e9..271c6c4da 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -1657,10 +1657,11 @@ a:hover { } } +.wp-block-columns.is-style-twentytwentyone-columns-overlap { + justify-content: space-around; +} + @media only screen and (min-width: 652px) { - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column { - flex-grow: 1; - } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { margin-right: calc(-2 * var(--global--spacing-horizontal)); margin-top: calc(2.5 * var(--global--spacing-horizontal)); diff --git a/style.css b/style.css index 2f1cfac9f..556685339 100644 --- a/style.css +++ b/style.css @@ -1662,10 +1662,11 @@ a:hover { } } +.wp-block-columns.is-style-twentytwentyone-columns-overlap { + justify-content: space-around; +} + @media only screen and (min-width: 652px) { - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column { - flex-grow: 1; - } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { margin-left: calc(-2 * var(--global--spacing-horizontal)); margin-top: calc(2.5 * var(--global--spacing-horizontal));