Modern Business: Fixes font weight for entry-title, archives, page titles, and cover block to prevent design regression

This commit is contained in:
Allan Cole 2019-05-20 15:49:45 -04:00
parent 92e5ce2bc2
commit 9f4b413641
6 changed files with 186 additions and 95 deletions

View file

@ -668,6 +668,16 @@
padding: 0; padding: 0;
text-shadow: 0 0 12px #000; text-shadow: 0 0 12px #000;
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 300;
}
@include media(tablet) { @include media(tablet) {
max-width: 100%; max-width: 100%;
} }

View file

@ -1,6 +1,7 @@
.archive .page-header, .archive .page-header,
.search .page-header, .search .page-header,
.error404 .page-header { .error404 .page-header,
.not-found .page-header {
margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit}); margin: $size__spacing-unit $size__spacing-unit calc(3 * #{$size__spacing-unit});
text-align: center; text-align: center;
@ -14,6 +15,12 @@
color: $color__text-light; color: $color__text-light;
display: inline; display: inline;
letter-spacing: normal; letter-spacing: normal;
font-size: $font__size-md;
font-weight: 300;
@include media(tablet) {
font-size: $font__size-lg;
}
&:before { &:before {
display: none; display: none;
@ -70,3 +77,4 @@
width: 100%; width: 100%;
} }
} }

View file

@ -41,8 +41,14 @@
} }
.entry-title { .entry-title {
font-size: $font__size-md;
font-weight: 300;
margin: 0; margin: 0;
text-align: center;
@include media(tablet) {
font-size: $font__size-lg;
}
a { a {
color: inherit; color: inherit;

View file

@ -38,21 +38,14 @@ h6 {
.comments-title, .comments-title,
.comment-author .fn, .comment-author .fn,
.no-comments, .no-comments,
.site-title { .site-title,
font-weight: 700;
letter-spacing: 0;
line-height: $font__line-height-heading;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight: 300; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
line-height: $font__line-height-heading; line-height: $font__line-height-heading;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -71,6 +64,7 @@ h6 {
line-height: 1.25; line-height: 1.25;
} }
.has-larger-font-size,
.has-huge-font-size, .has-huge-font-size,
h1 { h1 {
font-size: $font__size-lg; font-size: $font__size-lg;
@ -80,20 +74,9 @@ h1 {
} }
} }
.entry-title,
.not-found .page-title,
.error-404 .page-title,
.has-large-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 { h2 {
font-size: $font__size-md; font-size: $font__size-md;
font-weight: 300;
text-align: center;
@include media(tablet) { @include media(tablet) {
font-size: $font__size-lg; font-size: $font__size-lg;
@ -120,6 +103,7 @@ h4 {
} }
.pagination .nav-links, .pagination .nav-links,
.has-small-font-size,
.comment-content, .comment-content,
h5 { h5 {
font-size: $font__size-sm; font-size: $font__size-sm;
@ -129,7 +113,6 @@ h5 {
.entry-footer, .entry-footer,
.discussion-meta-info, .discussion-meta-info,
.site-info, .site-info,
.has-small-font-size,
.comment-reply-link, .comment-reply-link,
.comment-metadata, .comment-metadata,
.comment-notes, .comment-notes,

View file

@ -466,21 +466,14 @@ h6 {
.comments-title, .comments-title,
.comment-author .fn, .comment-author .fn,
.no-comments, .no-comments,
.site-title { .site-title,
font-weight: 700;
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight: 300; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
line-height: 1.2; line-height: 1.2;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -499,45 +492,27 @@ h6 {
line-height: 1.25; line-height: 1.25;
} }
.has-larger-font-size,
.has-huge-font-size, .has-huge-font-size,
h1 { h1 {
font-size: 1.6875em; font-size: 1.6875em;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.has-larger-font-size,
.has-huge-font-size, .has-huge-font-size,
h1 { h1 {
font-size: 2.25em; font-size: 2.25em;
} }
} }
.entry-title,
.not-found .page-title,
.error-404 .page-title,
.has-large-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 { h2 {
font-size: 1.125em; font-size: 1.125em;
font-weight: 300;
text-align: center;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.entry-title,
.not-found .page-title,
.error-404 .page-title,
.has-large-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 { h2 {
font-size: 1.6875em; font-size: 1.6875em;
} }
@ -563,6 +538,7 @@ h4 {
} }
.pagination .nav-links, .pagination .nav-links,
.has-small-font-size,
.comment-content, .comment-content,
h5 { h5 {
font-size: 0.88889em; font-size: 0.88889em;
@ -572,7 +548,6 @@ h5 {
.entry-footer, .entry-footer,
.discussion-meta-info, .discussion-meta-info,
.site-info, .site-info,
.has-small-font-size,
.comment-reply-link, .comment-reply-link,
.comment-metadata, .comment-metadata,
.comment-notes, .comment-notes,
@ -2377,7 +2352,16 @@ body.page .main-navigation {
} }
.entry .entry-title { .entry .entry-title {
font-size: 1.125em;
font-weight: 300;
margin: 0; margin: 0;
text-align: center;
}
@media only screen and (min-width: 768px) {
.entry .entry-title {
font-size: 1.6875em;
}
} }
.entry .entry-title a { .entry .entry-title a {
@ -3088,7 +3072,8 @@ body.page .main-navigation {
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.archive .page-header, .archive .page-header,
.search .page-header, .search .page-header,
.error404 .page-header { .error404 .page-header,
.not-found .page-header {
margin: 1rem 1rem calc(3 * 1rem); margin: 1rem 1rem calc(3 * 1rem);
text-align: center; text-align: center;
} }
@ -3096,22 +3081,36 @@ body.page .main-navigation {
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.archive .page-header, .archive .page-header,
.search .page-header, .search .page-header,
.error404 .page-header { .error404 .page-header,
.not-found .page-header {
margin: 0 calc(10% + 60px) calc(10% + 60px); margin: 0 calc(10% + 60px) calc(10% + 60px);
} }
} }
.archive .page-header .page-title, .archive .page-header .page-title,
.search .page-header .page-title, .search .page-header .page-title,
.error404 .page-header .page-title { .error404 .page-header .page-title,
.not-found .page-header .page-title {
color: #686868; color: #686868;
display: inline; display: inline;
letter-spacing: normal; letter-spacing: normal;
font-size: 1.125em;
font-weight: 300;
}
@media only screen and (min-width: 768px) {
.archive .page-header .page-title,
.search .page-header .page-title,
.error404 .page-header .page-title,
.not-found .page-header .page-title {
font-size: 1.6875em;
}
} }
.archive .page-header .page-title:before, .archive .page-header .page-title:before,
.search .page-header .page-title:before, .search .page-header .page-title:before,
.error404 .page-header .page-title:before { .error404 .page-header .page-title:before,
.not-found .page-header .page-title:before {
display: none; display: none;
} }
@ -3120,7 +3119,9 @@ body.page .main-navigation {
.search .page-header .search-term, .search .page-header .search-term,
.search .page-header .page-description, .search .page-header .page-description,
.error404 .page-header .search-term, .error404 .page-header .search-term,
.error404 .page-header .page-description { .error404 .page-header .page-description,
.not-found .page-header .search-term,
.not-found .page-header .page-description {
display: inherit; display: inherit;
clear: both; clear: both;
} }
@ -3130,7 +3131,9 @@ body.page .main-navigation {
.search .page-header .search-term:after, .search .page-header .search-term:after,
.search .page-header .page-description:after, .search .page-header .page-description:after,
.error404 .page-header .search-term:after, .error404 .page-header .search-term:after,
.error404 .page-header .page-description:after { .error404 .page-header .page-description:after,
.not-found .page-header .search-term:after,
.not-found .page-header .page-description:after {
content: "."; content: ".";
font-weight: bold; font-weight: bold;
color: #686868; color: #686868;
@ -4063,6 +4066,45 @@ body.page .main-navigation {
text-shadow: 0 0 12px #000; text-shadow: 0 0 12px #000;
} }
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h1,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h2,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h3,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h4,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h5,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h6,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h1,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h2,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h3,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h4,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h5,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h6,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h1,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h2,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h3,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h4,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h5,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h6,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h1,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h2,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h3,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h4,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h5,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h6,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h1,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h2,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h3,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h4,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h5,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h6,
.entry .entry-content .wp-block-cover .wp-block-cover-text h1,
.entry .entry-content .wp-block-cover .wp-block-cover-text h2,
.entry .entry-content .wp-block-cover .wp-block-cover-text h3,
.entry .entry-content .wp-block-cover .wp-block-cover-text h4,
.entry .entry-content .wp-block-cover .wp-block-cover-text h5,
.entry .entry-content .wp-block-cover .wp-block-cover-text h6 {
font-weight: 300;
}
@media only screen and (min-width: 768px) { @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__inner-container,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text, .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,

View file

@ -466,21 +466,14 @@ h6 {
.comments-title, .comments-title,
.comment-author .fn, .comment-author .fn,
.no-comments, .no-comments,
.site-title { .site-title,
font-weight: 700;
letter-spacing: 0;
line-height: 1.2;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h1,
h2, h2,
h3, h3,
h4, h4,
h5, h5,
h6 { h6 {
font-weight: 300; font-weight: 700;
letter-spacing: 0; letter-spacing: 0;
line-height: 1.2; line-height: 1.2;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -499,45 +492,27 @@ h6 {
line-height: 1.25; line-height: 1.25;
} }
.has-larger-font-size,
.has-huge-font-size, .has-huge-font-size,
h1 { h1 {
font-size: 1.6875em; font-size: 1.6875em;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.has-larger-font-size,
.has-huge-font-size, .has-huge-font-size,
h1 { h1 {
font-size: 2.25em; font-size: 2.25em;
} }
} }
.entry-title,
.not-found .page-title,
.error-404 .page-title,
.has-large-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 { h2 {
font-size: 1.125em; font-size: 1.125em;
font-weight: 300;
text-align: center;
} }
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.entry-title,
.not-found .page-title,
.error-404 .page-title,
.has-large-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 { h2 {
font-size: 1.6875em; font-size: 1.6875em;
} }
@ -563,6 +538,7 @@ h4 {
} }
.pagination .nav-links, .pagination .nav-links,
.has-small-font-size,
.comment-content, .comment-content,
h5 { h5 {
font-size: 0.88889em; font-size: 0.88889em;
@ -572,7 +548,6 @@ h5 {
.entry-footer, .entry-footer,
.discussion-meta-info, .discussion-meta-info,
.site-info, .site-info,
.has-small-font-size,
.comment-reply-link, .comment-reply-link,
.comment-metadata, .comment-metadata,
.comment-notes, .comment-notes,
@ -2383,7 +2358,16 @@ body.page .main-navigation {
} }
.entry .entry-title { .entry .entry-title {
font-size: 1.125em;
font-weight: 300;
margin: 0; margin: 0;
text-align: center;
}
@media only screen and (min-width: 768px) {
.entry .entry-title {
font-size: 1.6875em;
}
} }
.entry .entry-title a { .entry .entry-title a {
@ -3094,7 +3078,8 @@ body.page .main-navigation {
--------------------------------------------------------------*/ --------------------------------------------------------------*/
.archive .page-header, .archive .page-header,
.search .page-header, .search .page-header,
.error404 .page-header { .error404 .page-header,
.not-found .page-header {
margin: 1rem 1rem calc(3 * 1rem); margin: 1rem 1rem calc(3 * 1rem);
text-align: center; text-align: center;
} }
@ -3102,22 +3087,36 @@ body.page .main-navigation {
@media only screen and (min-width: 768px) { @media only screen and (min-width: 768px) {
.archive .page-header, .archive .page-header,
.search .page-header, .search .page-header,
.error404 .page-header { .error404 .page-header,
.not-found .page-header {
margin: 0 calc(10% + 60px) calc(10% + 60px); margin: 0 calc(10% + 60px) calc(10% + 60px);
} }
} }
.archive .page-header .page-title, .archive .page-header .page-title,
.search .page-header .page-title, .search .page-header .page-title,
.error404 .page-header .page-title { .error404 .page-header .page-title,
.not-found .page-header .page-title {
color: #686868; color: #686868;
display: inline; display: inline;
letter-spacing: normal; letter-spacing: normal;
font-size: 1.125em;
font-weight: 300;
}
@media only screen and (min-width: 768px) {
.archive .page-header .page-title,
.search .page-header .page-title,
.error404 .page-header .page-title,
.not-found .page-header .page-title {
font-size: 1.6875em;
}
} }
.archive .page-header .page-title:before, .archive .page-header .page-title:before,
.search .page-header .page-title:before, .search .page-header .page-title:before,
.error404 .page-header .page-title:before { .error404 .page-header .page-title:before,
.not-found .page-header .page-title:before {
display: none; display: none;
} }
@ -3126,7 +3125,9 @@ body.page .main-navigation {
.search .page-header .search-term, .search .page-header .search-term,
.search .page-header .page-description, .search .page-header .page-description,
.error404 .page-header .search-term, .error404 .page-header .search-term,
.error404 .page-header .page-description { .error404 .page-header .page-description,
.not-found .page-header .search-term,
.not-found .page-header .page-description {
display: inherit; display: inherit;
clear: both; clear: both;
} }
@ -3136,7 +3137,9 @@ body.page .main-navigation {
.search .page-header .search-term:after, .search .page-header .search-term:after,
.search .page-header .page-description:after, .search .page-header .page-description:after,
.error404 .page-header .search-term:after, .error404 .page-header .search-term:after,
.error404 .page-header .page-description:after { .error404 .page-header .page-description:after,
.not-found .page-header .search-term:after,
.not-found .page-header .page-description:after {
content: "."; content: ".";
font-weight: bold; font-weight: bold;
color: #686868; color: #686868;
@ -4075,6 +4078,45 @@ body.page .main-navigation {
text-shadow: 0 0 12px #000; text-shadow: 0 0 12px #000;
} }
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h1,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h2,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h3,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h4,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h5,
.entry .entry-content .wp-block-cover-image .wp-block-cover__inner-container h6,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h1,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h2,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h3,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h4,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h5,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text h6,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h1,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h2,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h3,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h4,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h5,
.entry .entry-content .wp-block-cover-image .wp-block-cover-text h6,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h1,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h2,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h3,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h4,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h5,
.entry .entry-content .wp-block-cover .wp-block-cover__inner-container h6,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h1,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h2,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h3,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h4,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h5,
.entry .entry-content .wp-block-cover .wp-block-cover-image-text h6,
.entry .entry-content .wp-block-cover .wp-block-cover-text h1,
.entry .entry-content .wp-block-cover .wp-block-cover-text h2,
.entry .entry-content .wp-block-cover .wp-block-cover-text h3,
.entry .entry-content .wp-block-cover .wp-block-cover-text h4,
.entry .entry-content .wp-block-cover .wp-block-cover-text h5,
.entry .entry-content .wp-block-cover .wp-block-cover-text h6 {
font-weight: 300;
}
@media only screen and (min-width: 768px) { @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__inner-container,
.entry .entry-content .wp-block-cover-image .wp-block-cover-image-text, .entry .entry-content .wp-block-cover-image .wp-block-cover-image-text,