From 01b5fddc9fba0ecd09f52afd7b25fa34fd36c5a7 Mon Sep 17 00:00:00 2001 From: Christopher Kanitz Date: Tue, 20 Sep 2022 16:15:38 +0200 Subject: [PATCH] Upd/alignwide on mobile (#15) * update default width of alignwide elements on mobile * add media query px width comments * adjust specific block alignments * Update group.css * adjust columns mobile alignment * remove headline alignfull on mobile rules * load editor-styles _widths.css * Update _widths.css * FULL IS FULL *taps on book* Co-authored-by: Hendrik Luehrsen --- theme/src/css/blocks.css | 5 ++- theme/src/css/editor-styles.css | 1 + theme/src/css/src-base/_alignment.css | 3 -- theme/src/css/src-blocks/core/columns.css | 23 +++++++++- theme/src/css/src-blocks/core/cover.css | 13 +++++- theme/src/css/src-blocks/core/group.css | 7 +++ theme/src/css/src-blocks/core/media-text.css | 26 +++++++++++ theme/src/css/src-blocks/core/pullquote.css | 10 +++++ theme/src/css/src-editor-styles/_widths.css | 46 -------------------- theme/src/css/vars/_media-queries.css | 8 ++-- 10 files changed, 86 insertions(+), 56 deletions(-) create mode 100644 theme/src/css/src-blocks/core/group.css create mode 100644 theme/src/css/src-blocks/core/media-text.css create mode 100644 theme/src/css/src-blocks/core/pullquote.css diff --git a/theme/src/css/blocks.css b/theme/src/css/blocks.css index 4599f9d0..82e20fc6 100644 --- a/theme/src/css/blocks.css +++ b/theme/src/css/blocks.css @@ -1,4 +1,7 @@ @import "./src-blocks/core/columns.css"; @import "./src-blocks/core/cover.css"; -@import "./src-blocks/core/spacer.css"; @import "./src-blocks/core/embed.css"; +@import "./src-blocks/core/group.css"; +@import "./src-blocks/core/media-text.css"; +@import "./src-blocks/core/pullquote.css"; +@import "./src-blocks/core/spacer.css"; diff --git a/theme/src/css/editor-styles.css b/theme/src/css/editor-styles.css index 3952cf35..1ef9b722 100644 --- a/theme/src/css/editor-styles.css +++ b/theme/src/css/editor-styles.css @@ -1,3 +1,4 @@ @import "./base.css"; @import "./blocks.css"; +@import "./src-editor-styles/_widths.css"; @import "./src-editor-styles/_z-index.css"; diff --git a/theme/src/css/src-base/_alignment.css b/theme/src/css/src-base/_alignment.css index b053e864..88d53b09 100644 --- a/theme/src/css/src-base/_alignment.css +++ b/theme/src/css/src-base/_alignment.css @@ -22,9 +22,6 @@ :root .alignwide { clear: both; - max-width: var(--bp-xs); - margin-left: calc(var(--grid-gutter-width) * -1); - margin-right: calc(var(--grid-gutter-width) * -1); } :root .alignfull { diff --git a/theme/src/css/src-blocks/core/columns.css b/theme/src/css/src-blocks/core/columns.css index 991fa387..bf00e3b7 100644 --- a/theme/src/css/src-blocks/core/columns.css +++ b/theme/src/css/src-blocks/core/columns.css @@ -1 +1,22 @@ -/** I am now empty */ +@media (--xs-query) { + + :root .wp-block-columns { + + &.alignwide { + max-width: none; + margin-left: calc(var(--grid-gutter-width) * -1); + margin-right: calc(var(--grid-gutter-width) * -1); + + &:not(.has-background) > .wp-block-column:not(.has-background) { + padding-left: var(--grid-gutter-width); + padding-right: var(--grid-gutter-width); + } + } + } + + /* Retcon gutenberg styles. */ + :root .wp-block-column { + flex-basis: 100% !important; + flex-grow: 1; + } +} diff --git a/theme/src/css/src-blocks/core/cover.css b/theme/src/css/src-blocks/core/cover.css index 985c41fb..ca8ba4e2 100644 --- a/theme/src/css/src-blocks/core/cover.css +++ b/theme/src/css/src-blocks/core/cover.css @@ -1 +1,12 @@ -/** I am now empty. */ +@media (--xs-query) { + + :root .wp-block-cover { + + &.alignwide { + max-width: none; + width: auto; + margin-left: calc(var(--grid-gutter-width) * -1); + margin-right: calc(var(--grid-gutter-width) * -1); + } + } +} diff --git a/theme/src/css/src-blocks/core/group.css b/theme/src/css/src-blocks/core/group.css new file mode 100644 index 00000000..66e788f6 --- /dev/null +++ b/theme/src/css/src-blocks/core/group.css @@ -0,0 +1,7 @@ +:root .wp-block-group { + + & > *.alignfull { + margin-left: 0; + margin-right: 0; + } +} diff --git a/theme/src/css/src-blocks/core/media-text.css b/theme/src/css/src-blocks/core/media-text.css new file mode 100644 index 00000000..8de54f6e --- /dev/null +++ b/theme/src/css/src-blocks/core/media-text.css @@ -0,0 +1,26 @@ +:root .wp-block-media-text { + + @media (--xs-query) { + + &.is-stacked-on-mobile { + grid-template-columns: 100% !important; + grid-row-gap: var(--grid-gutter-width); + + & .wp-block-media-text__content { + grid-column: auto; + grid-row: auto; + padding-top: 0 !important; + } + } + } + + &.has-background { + padding-top: 0; + padding-bottom: 0; + + & .wp-block-media-text__content { + padding-top: calc(var(--grid-gutter-height) / 2); + padding-bottom: calc(var(--grid-gutter-height) / 2); + } + } +} diff --git a/theme/src/css/src-blocks/core/pullquote.css b/theme/src/css/src-blocks/core/pullquote.css new file mode 100644 index 00000000..e54f3815 --- /dev/null +++ b/theme/src/css/src-blocks/core/pullquote.css @@ -0,0 +1,10 @@ +:root .wp-block-pullquote { + + @media (--xs-query) { + + &.alignfull { + padding-left: var(--grid-gutter-width); + padding-right: var(--grid-gutter-width); + } + } +} diff --git a/theme/src/css/src-editor-styles/_widths.css b/theme/src/css/src-editor-styles/_widths.css index 1bebe71f..cbeb5cac 100644 --- a/theme/src/css/src-editor-styles/_widths.css +++ b/theme/src/css/src-editor-styles/_widths.css @@ -1,53 +1,7 @@ .wp-block { max-width: var(--content-width); - margin: 0 auto; - - & + * { - margin-top: var(--grid-gutter-height); - } -} - -:root .wp-block[data-align="wide"] { - max-width: var(--last-bp); -} - -:root .wp-block[data-align="full"] { - max-width: none !important; - margin-left: calc(var(--grid-gutter-width) * -1) !important; - margin-right: calc(var(--grid-gutter-width) * -1) !important; } :root { padding: var(--grid-gutter-height) var(--grid-gutter-width); - - & .alignfull { - margin-left: 0 !important; - margin-right: 0 !important; - } -} - -@media (--sm-query) { - - .wp-block[data-align="wide"] { - max-width: calc(var(--bp-sm) - var(--grid-gutter-width)); - } -} - -@media (--md-query) { - - .wp-block[data-align="wide"] { - max-width: calc(var(--bp-md) - var(--grid-gutter-width)); - } -} - -@media (--lg-query) { - - .wp-block[data-align="wide"] { - max-width: calc(var(--bp-lg) - var(--grid-gutter-width)); - } -} - -:root .acf-block-fields { - max-width: var(--last-bp); - margin: 0 auto; } diff --git a/theme/src/css/vars/_media-queries.css b/theme/src/css/vars/_media-queries.css index 918737ad..c4285804 100644 --- a/theme/src/css/vars/_media-queries.css +++ b/theme/src/css/vars/_media-queries.css @@ -7,7 +7,7 @@ * @link: https://drafts.csswg.org/mediaqueries-5/#custom-mq * @link: https://github.com/postcss/postcss-custom-media **/ -@custom-media --xs-query screen and (max-width: 47.9999999em); -@custom-media --sm-query screen and (min-width: 48em); -@custom-media --md-query screen and (min-width: 60em); -@custom-media --lg-query screen and (min-width: 75em); +@custom-media --xs-query screen and (max-width: 47.9999999em); /** < 768px **/ +@custom-media --sm-query screen and (min-width: 48em); /** >= 768px **/ +@custom-media --md-query screen and (min-width: 60em); /** >= 960px **/ +@custom-media --lg-query screen and (min-width: 75em); /** >= 1200px **/