Skip to content
This repository has been archived by the owner on Dec 1, 2019. It is now read-only.

Commit

Permalink
Various alignment fixes (#1008)
Browse files Browse the repository at this point in the history 
* Fix full-width template issue at 1280px

* Combined double selectors for .read-more-button-wrap

* Fixes to alignleft/alignright within groups

* lint: add space before comment
  • Loading branch information
@andersnoren @pattonwebz
andersnoren authored and pattonwebz committed Nov 12, 2019
1 parent 9ac5ba3 commit 082877e
Show file tree
Hide file tree
Showing 2 changed files with 110 additions and 40 deletions.
69 changes: 49 additions & 20 deletions style-rtl.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2969,10 +2969,6 @@ h2.entry-title {
padding: calc(1.1em - 0.2rem) calc(1.44em - 0.2rem);
}

.read-more-button-wrap {
margin-top: 1em;
}

/* Block: Columns ---------------------------- */

.wp-block-columns.alignfull,
Expand Down Expand Up @@ -3426,6 +3422,7 @@ figure.wp-block-table.is-style-stripes {
}

.read-more-button-wrap {
margin-top: 1em;
text-align: center;
}

Expand Down Expand Up @@ -3567,6 +3564,18 @@ figure.wp-block-table.is-style-stripes {
margin: 0.3rem 2rem 2rem 2rem;
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
margin-left: 2rem;
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
margin-right: 2rem;
}

/* Entry Media ------------------------------- */

.alignfull > figcaption,
Expand Down Expand Up @@ -4522,13 +4531,7 @@ a.to-the-top > * {
}

.entry-content > p .alignleft,
.entry-content > .wp-block-image .alignleft,
[class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft:not(.wp-block-pullquote),
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
.entry-content > .wp-block-image .alignleft {
margin-left: calc(( 100vw - 58rem - 8rem ) / -2);
}

Expand All @@ -4543,13 +4546,7 @@ a.to-the-top > * {
}

.entry-content > p .alignright,
.entry-content > .wp-block-image .alignright,
[class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright:not(.wp-block-pullquote),
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
.entry-content > .wp-block-image .alignright {
margin-right: calc(( 100vw - 58rem - 8rem ) / -2);
}

Expand Down Expand Up @@ -5096,6 +5093,11 @@ a.to-the-top > * {
margin-bottom: 0;
}

.alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) {
padding-right: 0;
padding-left: 0;
}

/* BLOCK: MEDIA AND TEXT */

.wp-block-media-text .wp-block-media-text__content {
Expand Down Expand Up @@ -5214,6 +5216,18 @@ a.to-the-top > * {
width: calc(100vw - 8rem);
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
margin-left: 4rem;
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
margin-right: 4rem;
}

/* ENTRY MEDIA */

.alignfull > figcaption,
Expand Down Expand Up @@ -5731,7 +5745,7 @@ a.to-the-top > * {
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
position: absolute;
right: calc((100% - 58rem) / 2 + 58rem);
right: calc((100% - 58rem) / 2 + 58rem + 4rem);
max-width: calc((100% - 58rem) / 2 - 4rem);
}

Expand Down Expand Up @@ -5759,7 +5773,7 @@ a.to-the-top > * {
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
position: absolute;
left: calc((100% - 58rem) / 2 + 58rem);
left: calc((100% - 58rem) / 2 + 58rem + 4rem);
max-width: calc((100% - 58rem) / 2 - 4rem);
}

Expand Down Expand Up @@ -6076,6 +6090,21 @@ a.to-the-top > * {
width: 100%;
}

/* Template: Full Width ------------------ */

body.template-full-width .alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) {
padding-right: 0;
padding-left: 0;
}

body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
margin-left: 0;
}

body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
margin-right: 0;
}

}

@media ( min-width: 1330px ) {
Expand Down
81 changes: 61 additions & 20 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2987,10 +2987,6 @@ h2.entry-title {
padding: calc(1.1em - 0.2rem) calc(1.44em - 0.2rem);
}

.read-more-button-wrap {
margin-top: 1em;
}

/* Block: Columns ---------------------------- */

.wp-block-columns.alignfull,
Expand Down Expand Up @@ -3448,6 +3444,7 @@ figure.wp-block-table.is-style-stripes {
}

.read-more-button-wrap {
margin-top: 1em;
text-align: center;
}

Expand Down Expand Up @@ -3593,6 +3590,22 @@ figure.wp-block-table.is-style-stripes {
margin: 0.3rem 2rem 2rem 2rem;
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {

/*rtl:ignore*/
margin-left: 2rem;
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {

/*rtl:ignore*/
margin-right: 2rem;
}

/* Entry Media ------------------------------- */

.alignfull > figcaption,
Expand Down Expand Up @@ -4558,13 +4571,7 @@ a.to-the-top > * {
}

.entry-content > p .alignleft,
.entry-content > .wp-block-image .alignleft,
[class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft:not(.wp-block-pullquote),
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {
.entry-content > .wp-block-image .alignleft {

/*rtl:ignore*/
margin-left: calc(( 100vw - 58rem - 8rem ) / -2);
Expand All @@ -4585,13 +4592,7 @@ a.to-the-top > * {
}

.entry-content > p .alignright,
.entry-content > .wp-block-image .alignright,
[class*="wp-block"].alignwide [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright:not(.wp-block-pullquote),
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {
.entry-content > .wp-block-image .alignright {

/*rtl:ignore*/
margin-right: calc(( 100vw - 58rem - 8rem ) / -2);
Expand Down Expand Up @@ -5146,6 +5147,11 @@ a.to-the-top > * {
margin-bottom: 0;
}

.alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) {
padding-left: 0;
padding-right: 0;
}

/* BLOCK: MEDIA AND TEXT */

.wp-block-media-text .wp-block-media-text__content {
Expand Down Expand Up @@ -5268,6 +5274,22 @@ a.to-the-top > * {
width: calc(100vw - 8rem);
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {

/*rtl:ignore*/
margin-left: 4rem;
}

[class*="wp-block"].alignfull [class*="__inner-container"] > .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright,
[class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {

/*rtl:ignore*/
margin-right: 4rem;
}

/* ENTRY MEDIA */

.alignfull > figcaption,
Expand Down Expand Up @@ -5791,7 +5813,7 @@ a.to-the-top > * {
position: absolute;

/*rtl:ignore*/
right: calc((100% - 58rem) / 2 + 58rem);
right: calc((100% - 58rem) / 2 + 58rem + 4rem);
max-width: calc((100% - 58rem) / 2 - 4rem);
}

Expand Down Expand Up @@ -5825,7 +5847,7 @@ a.to-the-top > * {
position: absolute;

/*rtl:ignore*/
left: calc((100% - 58rem) / 2 + 58rem);
left: calc((100% - 58rem) / 2 + 58rem + 4rem);
max-width: calc((100% - 58rem) / 2 - 4rem);
}

Expand Down Expand Up @@ -6154,6 +6176,25 @@ a.to-the-top > * {
width: 100%;
}

/* Template: Full Width ------------------ */

body.template-full-width .alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) {
padding-left: 0;
padding-right: 0;
}

body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft {

/*rtl:ignore*/
margin-left: 0;
}

body.template-full-width [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright {

/*rtl:ignore*/
margin-right: 0;
}

}

@media ( min-width: 1330px ) {
Expand Down

0 comments on commit 082877e

Please sign in to comment.