Sophisticated Business: Fix Cover Block text to respect Block Editor settings

This commit is contained in:
Allan Cole 2019-05-17 15:55:23 -04:00
parent f4484e26a2
commit 150fa0a753
6 changed files with 118 additions and 171 deletions

View file

@ -534,6 +534,7 @@
//! Cover Image
.wp-block-cover-image,
.wp-block-cover {
position: relative;
min-height: 430px;
padding: $size__spacing-unit;
@ -543,24 +544,23 @@
min-height: 60vh;
}
.wp-block-cover-image-text,
.wp-block-cover-text,
h2 {
font-family: $font__heading;
font-size: $font__size-lg;
font-weight: 700;
line-height: 1.25;
.wp-block-cover__inner-container {
padding: 0;
color: #fff;
@include media(tablet) {
font-size: $font__size-xxl;
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
h2 {
margin: inherit;
max-width: inherit;
text-align: inherit;
}
&.alignleft,
&.alignright {
width: 100%;
@ -572,27 +572,20 @@
&.alignwide {
.wp-block-cover-image-text,
.wp-block-cover-text,
h2 {
.wp-block-cover__inner-container {
@include postContentMaxWidth();
}
@include media(tablet) {
.wp-block-cover-image-text,
.wp-block-cover-text,
h2 {
.wp-block-cover__inner-container {
padding: 0;
font-size: $font__size-xxxxl;
}
}
}
&.alignfull {
.wp-block-cover-image-text,
.wp-block-cover-text,
h2 {
.wp-block-cover__inner-container {
max-width: calc(8 * (100vw / 12));
}
@ -600,11 +593,8 @@
padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
.wp-block-cover-image-text,
.wp-block-cover-text,
h2 {
.wp-block-cover__inner-container {
padding: 0;
font-size: $font__size-xxxxl;
}
}
}

View file

@ -72,11 +72,21 @@ h1 {
}
}
.wp-block-cover .wp-block-cover-image-text,
.wp-block-cover .wp-block-cover-text,
.wp-block-cover h2,
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image .wp-block-cover-text,
.wp-block-cover-image h2,
.not-found .page-title,
.error-404 .page-title,
.has-larger-font-size,
h2 {
font-size: $font__size-md;
@include media(tablet) {
font-size: $font__size-lg;
}
}
.has-regular-font-size,

View file

@ -119,7 +119,7 @@ h2 {
@media only screen and (min-width: 768px) {
h2 {
font-size: 1.125em;
font-size: 1.6875em;
}
}
@ -273,24 +273,20 @@ figcaption,
min-height: 80vh;
}
.wp-block-cover h2,
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover-text {
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-weight: 700;
line-height: 1.25;
padding-left: 1rem;
padding-right: 1rem;
}
.wp-block-cover h2 strong,
.wp-block-cover .wp-block-cover__inner-container strong,
.wp-block-cover .wp-block-cover-text strong {
font-weight: bolder;
}
@media only screen and (min-width: 768px) {
.wp-block-cover h2,
.wp-block-cover .wp-block-cover__inner-container,
.wp-block-cover .wp-block-cover-text {
font-size: 2.8125em;
margin-left: auto;
margin-right: auto;
padding: 0;
@ -330,11 +326,10 @@ figcaption,
}
@media only screen and (min-width: 768px) {
.wp-block[data-type="core/cover"][data-align="wide"] h2,
.wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover-text,
.wp-block[data-type="core/cover"][data-align="full"] h2,
.wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover-text {
font-size: 4.5em;
.wp-block[data-type="core/cover"][data-align="wide"] .wp-block-cover__inner-container,
.wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover-text,
.wp-block[data-type="core/cover"][data-align="full"] .wp-block-cover__inner-container {
max-width: calc(8 * (100vw / 12));
}
}

View file

@ -120,7 +120,7 @@ h2 {
font-size: $font__size-md;
@include media(tablet) {
font-size: $font__size-md;
font-size: $font__size-lg;
}
}
@ -261,11 +261,8 @@ figcaption,
.wp-block-cover {
min-height: 80vh;
h2,
.wp-block-cover__inner-container,
.wp-block-cover-text {
font-family: $font__heading;
font-weight: 700;
line-height: 1.25;
padding-left: $size__spacing-unit;
padding-right: $size__spacing-unit;
@ -274,7 +271,6 @@ figcaption,
}
@include media(tablet) {
font-size: $font__size-xxl;
margin-left: auto;
margin-right: auto;
padding: 0;
@ -313,9 +309,9 @@ figcaption,
.wp-block[data-type="core/cover"][data-align="wide"],
.wp-block[data-type="core/cover"][data-align="full"] {
@include media(tablet) {
h2,
.wp-block-cover-text {
font-size: $font__size-xxxxl;
.wp-block-cover-text,
.wp-block-cover__inner-container {
max-width: calc(8 * (100vw / 12));
}
}

View file

@ -499,6 +499,12 @@ h1 {
}
}
.wp-block-cover .wp-block-cover-image-text,
.wp-block-cover .wp-block-cover-text,
.wp-block-cover h2,
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image .wp-block-cover-text,
.wp-block-cover-image h2,
.not-found .page-title,
.error-404 .page-title,
.has-larger-font-size,
@ -506,6 +512,21 @@ h2 {
font-size: 1.125em;
}
@media only screen and (min-width: 768px) {
.wp-block-cover .wp-block-cover-image-text,
.wp-block-cover .wp-block-cover-text,
.wp-block-cover h2,
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image .wp-block-cover-text,
.wp-block-cover-image h2,
.not-found .page-title,
.error-404 .page-title,
.has-larger-font-size,
h2 {
font-size: 1.6875em;
}
}
.has-regular-font-size,
.has-large-font-size,
.comments-title,
@ -3843,36 +3864,6 @@ body.page .main-navigation {
display: block;
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(8 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-image .aligncenter {
width: calc(8 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-image .aligncenter {
width: calc(6 * (100vw / 12) - 28px);
}
.entry .entry-content .wp-block-image .aligncenter img {
margin: 0 auto;
}
}
.entry .entry-content .wp-block-image.alignfull img {
width: 100vw;
max-width: calc( 100% + (2 * 1rem));
@ -3901,34 +3892,28 @@ body.page .main-navigation {
}
}
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image h2,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover .wp-block-cover-text,
.entry .entry-content .wp-block-cover h2 {
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 1.6875em;
font-weight: 700;
line-height: 1.25;
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
padding: 0;
color: #fff;
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image h2,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover .wp-block-cover-text,
.entry .entry-content .wp-block-cover h2 {
font-size: 2.8125em;
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
max-width: 100%;
margin-right: auto;
margin-left: auto;
}
}
.entry .entry-content .wp-block-cover-image h2,
.entry .entry-content .wp-block-cover h2 {
margin: inherit;
max-width: inherit;
text-align: inherit;
}
.entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright,
.entry .entry-content .wp-block-cover.alignleft,
.entry .entry-content .wp-block-cover.alignright {
@ -3944,45 +3929,28 @@ body.page .main-navigation {
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignwide h2,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignwide h2 {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
max-width: calc(8 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignwide h2,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignwide h2 {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignwide h2,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignwide h2 {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
padding: 0;
font-size: 4.5em;
}
}
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignfull h2,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignfull h2 {
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
max-width: calc(8 * (100vw / 12));
}
@ -3992,14 +3960,9 @@ body.page .main-navigation {
padding-right: calc(10% + 58px + (2 * 1rem));
padding-left: calc(10% + 58px + (2 * 1rem));
}
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignfull h2,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignfull h2 {
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
padding: 0;
font-size: 4.5em;
}
}

View file

@ -499,6 +499,12 @@ h1 {
}
}
.wp-block-cover .wp-block-cover-image-text,
.wp-block-cover .wp-block-cover-text,
.wp-block-cover h2,
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image .wp-block-cover-text,
.wp-block-cover-image h2,
.not-found .page-title,
.error-404 .page-title,
.has-larger-font-size,
@ -506,6 +512,21 @@ h2 {
font-size: 1.125em;
}
@media only screen and (min-width: 768px) {
.wp-block-cover .wp-block-cover-image-text,
.wp-block-cover .wp-block-cover-text,
.wp-block-cover h2,
.wp-block-cover-image .wp-block-cover-image-text,
.wp-block-cover-image .wp-block-cover-text,
.wp-block-cover-image h2,
.not-found .page-title,
.error-404 .page-title,
.has-larger-font-size,
h2 {
font-size: 1.6875em;
}
}
.has-regular-font-size,
.has-large-font-size,
.comments-title,
@ -3883,34 +3904,28 @@ body.page .main-navigation {
}
}
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image h2,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover .wp-block-cover-text,
.entry .entry-content .wp-block-cover h2 {
font-family: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
font-size: 1.6875em;
font-weight: 700;
line-height: 1.25;
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
padding: 0;
color: #fff;
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image h2,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover .wp-block-cover-text,
.entry .entry-content .wp-block-cover h2 {
font-size: 2.8125em;
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container {
max-width: 100%;
margin-left: auto;
margin-right: auto;
}
}
.entry .entry-content .wp-block-cover-image h2,
.entry .entry-content .wp-block-cover h2 {
margin: inherit;
max-width: inherit;
text-align: inherit;
}
.entry .entry-content .wp-block-cover-image.alignleft, .entry .entry-content .wp-block-cover-image.alignright,
.entry .entry-content .wp-block-cover.alignleft,
.entry .entry-content .wp-block-cover.alignright {
@ -3926,45 +3941,28 @@ body.page .main-navigation {
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignwide h2,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignwide h2 {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
max-width: calc(8 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 1168px) {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignwide h2,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignwide h2 {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
max-width: calc(6 * (100vw / 12) - 28px);
}
}
@media only screen and (min-width: 768px) {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignwide h2,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignwide h2 {
.entry .entry-content .wp-block-cover-image.alignwide .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignwide .wp-block-cover__inner-container {
padding: 0;
font-size: 4.5em;
}
}
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignfull h2,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignfull h2 {
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
max-width: calc(8 * (100vw / 12));
}
@ -3974,14 +3972,9 @@ body.page .main-navigation {
padding-left: calc(10% + 58px + (2 * 1rem));
padding-right: calc(10% + 58px + (2 * 1rem));
}
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover-text,
.entry .entry-content .wp-block-cover-image.alignfull h2,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-image-text,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover-text,
.entry .entry-content .wp-block-cover.alignfull h2 {
.entry .entry-content .wp-block-cover-image.alignfull .wp-block-cover__inner-container,
.entry .entry-content .wp-block-cover.alignfull .wp-block-cover__inner-container {
padding: 0;
font-size: 4.5em;
}
}