Modern Business: Fix margins and font sizes for cover block h2 headings
This commit is contained in:
Allan Cole
parent
f2a5433363
commit
e511fc11a9
4 changed files with 86 additions and 81 deletions
|
|
@ -661,22 +661,25 @@
|
|||
padding: $size__spacing-unit 10%;
|
||||
}
|
||||
|
||||
.wp-block-cover__inner-container,
|
||||
.wp-block-cover-image-text,
|
||||
.wp-block-cover-text {
|
||||
color: #fff;
|
||||
font-family: $font__heading;
|
||||
font-size: $font__size-lg;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
padding: 0;
|
||||
text-shadow: 0 0 12px #000;
|
||||
|
||||
@include media(tablet) {
|
||||
font-size: $font__size-xxl;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.has-large-font-size,
|
||||
h2 {
|
||||
max-width: inherit;
|
||||
margin: inherit;
|
||||
text-align: inherit;
|
||||
}
|
||||
|
||||
&.alignleft,
|
||||
&.alignright {
|
||||
width: 100%;
|
||||
|
|
@ -692,6 +695,7 @@
|
|||
padding-left: calc(10% + 58px + (2 * #{$size__spacing-unit}));
|
||||
padding-right: calc(10% + 58px + (2 * #{$size__spacing-unit}));
|
||||
|
||||
.wp-block-cover__inner-container,
|
||||
.wp-block-cover-image-text,
|
||||
.wp-block-cover-text,
|
||||
h2 {
|
||||
|
|
@ -911,23 +915,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
//! Font Sizes
|
||||
.has-small-font-size {
|
||||
font-size: $font__size-sm;
|
||||
}
|
||||
|
||||
.has-normal-font-size {
|
||||
font-size: $font__size-md;
|
||||
}
|
||||
|
||||
.has-large-font-size {
|
||||
font-size: $font__size-lg;
|
||||
}
|
||||
|
||||
.has-huge-font-size {
|
||||
font-size: $font__size-xl;
|
||||
}
|
||||
|
||||
//! Custom background colors
|
||||
.has-primary-background-color,
|
||||
.has-secondary-background-color,
|
||||
|
|
|
|||
|
|
@ -71,25 +71,32 @@ h6 {
|
|||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.has-huge-font-size,
|
||||
h1 {
|
||||
font-size: $font__size-xl;
|
||||
font-size: $font__size-lg;
|
||||
|
||||
@include media(tablet) {
|
||||
font-size: $font__size-xxl;
|
||||
font-size: $font__size-xl;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title,
|
||||
.not-found .page-title,
|
||||
.error-404 .page-title,
|
||||
.has-larger-font-size,
|
||||
.has-large-font-size,
|
||||
.wp-block-cover-image .wp-block-cover-image-text,
|
||||
.wp-block-cover-image .wp-block-cover-text,
|
||||
.wp-block-cover-image h2,
|
||||
.wp-block-cover .wp-block-cover-image-text,
|
||||
.wp-block-cover .wp-block-cover-text,
|
||||
.wp-block-cover h2,
|
||||
h2 {
|
||||
font-size: $font__size-md;
|
||||
font-weight: 300;
|
||||
text-align: center;
|
||||
|
||||
@include media(tablet) {
|
||||
font-size: $font__size-xl;
|
||||
font-size: $font__size-lg;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -107,7 +114,6 @@ h3 {
|
|||
}
|
||||
|
||||
.has-regular-font-size,
|
||||
.has-large-font-size,
|
||||
.comments-title,
|
||||
h4 {
|
||||
font-size: $font__size-base;
|
||||
|
|
|
|||
|
|
@ -499,20 +499,28 @@ h6 {
|
|||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.has-huge-font-size,
|
||||
h1 {
|
||||
font-size: 2.25em;
|
||||
font-size: 1.6875em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.has-huge-font-size,
|
||||
h1 {
|
||||
font-size: 2.8125em;
|
||||
font-size: 2.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title,
|
||||
.not-found .page-title,
|
||||
.error-404 .page-title,
|
||||
.has-larger-font-size,
|
||||
.has-large-font-size,
|
||||
.wp-block-cover-image .wp-block-cover-image-text,
|
||||
.wp-block-cover-image .wp-block-cover-text,
|
||||
.wp-block-cover-image h2,
|
||||
.wp-block-cover .wp-block-cover-image-text,
|
||||
.wp-block-cover .wp-block-cover-text,
|
||||
.wp-block-cover h2,
|
||||
h2 {
|
||||
font-size: 1.125em;
|
||||
font-weight: 300;
|
||||
|
|
@ -523,9 +531,15 @@ h2 {
|
|||
.entry-title,
|
||||
.not-found .page-title,
|
||||
.error-404 .page-title,
|
||||
.has-larger-font-size,
|
||||
.has-large-font-size,
|
||||
.wp-block-cover-image .wp-block-cover-image-text,
|
||||
.wp-block-cover-image .wp-block-cover-text,
|
||||
.wp-block-cover-image h2,
|
||||
.wp-block-cover .wp-block-cover-image-text,
|
||||
.wp-block-cover .wp-block-cover-text,
|
||||
.wp-block-cover h2,
|
||||
h2 {
|
||||
font-size: 2.25em;
|
||||
font-size: 1.6875em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -543,7 +557,6 @@ h3 {
|
|||
}
|
||||
|
||||
.has-regular-font-size,
|
||||
.has-large-font-size,
|
||||
.comments-title,
|
||||
h4 {
|
||||
font-size: 22px;
|
||||
|
|
@ -4039,29 +4052,35 @@ body.page .main-navigation {
|
|||
}
|
||||
}
|
||||
|
||||
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
|
||||
.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 .wp-block-cover__inner-container,
|
||||
.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
|
||||
.entry .entry-content .wp-block-cover .wp-block-cover-text {
|
||||
color: #fff;
|
||||
font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 1.6875em;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
padding: 0;
|
||||
text-shadow: 0 0 12px #000;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
|
||||
.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 .wp-block-cover__inner-container,
|
||||
.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
|
||||
.entry .entry-content .wp-block-cover .wp-block-cover-text {
|
||||
font-size: 2.8125em;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.entry .entry-content .wp-block-cover-image h2,
|
||||
.entry .entry-content .wp-block-cover h2 {
|
||||
max-width: inherit;
|
||||
margin: 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 {
|
||||
|
|
@ -4082,9 +4101,11 @@ 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__inner-container,
|
||||
.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__inner-container,
|
||||
.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 {
|
||||
|
|
@ -4297,22 +4318,6 @@ body.page .main-navigation {
|
|||
font-size: 0.71111em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-small-font-size {
|
||||
font-size: 0.88889em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-normal-font-size {
|
||||
font-size: 1.125em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-large-font-size {
|
||||
font-size: 1.6875em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-huge-font-size {
|
||||
font-size: 2.25em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-primary-background-color,
|
||||
.entry .entry-content .has-secondary-background-color,
|
||||
.entry .entry-content .has-dark-gray-background-color,
|
||||
|
|
|
|||
|
|
@ -499,20 +499,28 @@ h6 {
|
|||
line-height: 1.25;
|
||||
}
|
||||
|
||||
.has-huge-font-size,
|
||||
h1 {
|
||||
font-size: 2.25em;
|
||||
font-size: 1.6875em;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.has-huge-font-size,
|
||||
h1 {
|
||||
font-size: 2.8125em;
|
||||
font-size: 2.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.entry-title,
|
||||
.not-found .page-title,
|
||||
.error-404 .page-title,
|
||||
.has-larger-font-size,
|
||||
.has-large-font-size,
|
||||
.wp-block-cover-image .wp-block-cover-image-text,
|
||||
.wp-block-cover-image .wp-block-cover-text,
|
||||
.wp-block-cover-image h2,
|
||||
.wp-block-cover .wp-block-cover-image-text,
|
||||
.wp-block-cover .wp-block-cover-text,
|
||||
.wp-block-cover h2,
|
||||
h2 {
|
||||
font-size: 1.125em;
|
||||
font-weight: 300;
|
||||
|
|
@ -523,9 +531,15 @@ h2 {
|
|||
.entry-title,
|
||||
.not-found .page-title,
|
||||
.error-404 .page-title,
|
||||
.has-larger-font-size,
|
||||
.has-large-font-size,
|
||||
.wp-block-cover-image .wp-block-cover-image-text,
|
||||
.wp-block-cover-image .wp-block-cover-text,
|
||||
.wp-block-cover-image h2,
|
||||
.wp-block-cover .wp-block-cover-image-text,
|
||||
.wp-block-cover .wp-block-cover-text,
|
||||
.wp-block-cover h2,
|
||||
h2 {
|
||||
font-size: 2.25em;
|
||||
font-size: 1.6875em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -543,7 +557,6 @@ h3 {
|
|||
}
|
||||
|
||||
.has-regular-font-size,
|
||||
.has-large-font-size,
|
||||
.comments-title,
|
||||
h4 {
|
||||
font-size: 22px;
|
||||
|
|
@ -4051,29 +4064,37 @@ body.page .main-navigation {
|
|||
}
|
||||
}
|
||||
|
||||
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
|
||||
.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 .wp-block-cover__inner-container,
|
||||
.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
|
||||
.entry .entry-content .wp-block-cover .wp-block-cover-text {
|
||||
color: #fff;
|
||||
font-family: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
|
||||
font-size: 1.6875em;
|
||||
font-weight: 300;
|
||||
line-height: 1.25;
|
||||
padding: 0;
|
||||
text-shadow: 0 0 12px #000;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 768px) {
|
||||
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container,
|
||||
.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 .wp-block-cover__inner-container,
|
||||
.entry .entry-content .wp-block-cover .wp-block-cover-image-text,
|
||||
.entry .entry-content .wp-block-cover .wp-block-cover-text {
|
||||
font-size: 2.8125em;
|
||||
max-width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.entry .entry-content .wp-block-cover-image .has-large-font-size,
|
||||
.entry .entry-content .wp-block-cover-image h2,
|
||||
.entry .entry-content .wp-block-cover .has-large-font-size,
|
||||
.entry .entry-content .wp-block-cover h2 {
|
||||
max-width: inherit;
|
||||
margin: 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 {
|
||||
|
|
@ -4094,9 +4115,11 @@ 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__inner-container,
|
||||
.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__inner-container,
|
||||
.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 {
|
||||
|
|
@ -4309,22 +4332,6 @@ body.page .main-navigation {
|
|||
font-size: 0.71111em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-small-font-size {
|
||||
font-size: 0.88889em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-normal-font-size {
|
||||
font-size: 1.125em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-large-font-size {
|
||||
font-size: 1.6875em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-huge-font-size {
|
||||
font-size: 2.25em;
|
||||
}
|
||||
|
||||
.entry .entry-content .has-primary-background-color,
|
||||
.entry .entry-content .has-secondary-background-color,
|
||||
.entry .entry-content .has-dark-gray-background-color,
|
||||
|
|
|
|||
Loading…
Add table
Reference in a new issue