Skip to content

Commit

Permalink
Upd/alignwide on mobile (#15)
Browse files Browse the repository at this point in the history
* 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 <[email protected]>
  • Loading branch information
ckanitz and Luehrsen authored Sep 20, 2022
1 parent f4c83bc commit 01b5fdd
Show file tree
Hide file tree
Showing 10 changed files with 86 additions and 56 deletions.
5 changes: 4 additions & 1 deletion theme/src/css/blocks.css
Original file line number Diff line number Diff line change
@@ -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";
1 change: 1 addition & 0 deletions theme/src/css/editor-styles.css
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
@import "./base.css";
@import "./blocks.css";
@import "./src-editor-styles/_widths.css";
@import "./src-editor-styles/_z-index.css";
3 changes: 0 additions & 3 deletions theme/src/css/src-base/_alignment.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
23 changes: 22 additions & 1 deletion theme/src/css/src-blocks/core/columns.css
Original file line number Diff line number Diff line change
@@ -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;
}
}
13 changes: 12 additions & 1 deletion theme/src/css/src-blocks/core/cover.css
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
7 changes: 7 additions & 0 deletions theme/src/css/src-blocks/core/group.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
:root .wp-block-group {

& > *.alignfull {
margin-left: 0;
margin-right: 0;
}
}
26 changes: 26 additions & 0 deletions theme/src/css/src-blocks/core/media-text.css
Original file line number Diff line number Diff line change
@@ -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);
}
}
}
10 changes: 10 additions & 0 deletions theme/src/css/src-blocks/core/pullquote.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
:root .wp-block-pullquote {

@media (--xs-query) {

&.alignfull {
padding-left: var(--grid-gutter-width);
padding-right: var(--grid-gutter-width);
}
}
}
46 changes: 0 additions & 46 deletions theme/src/css/src-editor-styles/_widths.css
Original file line number Diff line number Diff line change
@@ -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;
}
8 changes: 4 additions & 4 deletions theme/src/css/vars/_media-queries.css
Original file line number Diff line number Diff line change
Expand Up @@ -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 **/

0 comments on commit 01b5fdd

Please sign in to comment.