diff --git a/sass/blocks/_blocks.scss b/sass/blocks/_blocks.scss index e297174b..ed616ab0 100644 --- a/sass/blocks/_blocks.scss +++ b/sass/blocks/_blocks.scss @@ -199,7 +199,7 @@ li { color: $color__text-light; font-family: $font__heading; - font-size: calc(#{$font__size_base} * #{$font__size-lg / 1em} ); + font-size: calc(#{$font__size_base} * #{$font__size-lg} ); font-weight: bold; line-height: $font__line-height-heading; diff --git a/sass/site/secondary/_widgets.scss b/sass/site/secondary/_widgets.scss index 08a76f48..a2649661 100644 --- a/sass/site/secondary/_widgets.scss +++ b/sass/site/secondary/_widgets.scss @@ -28,7 +28,7 @@ li { color: $color__text-light; font-family: $font__heading; - font-size: calc(#{$font__size_base} * #{$font__size-lg / 1em} ); + font-size: calc(#{$font__size_base} * #{$font__size-lg} ); font-weight: bold; line-height: $font__line-height-heading; diff --git a/sass/typography/_typography.scss b/sass/typography/_typography.scss index 565cdd5a..15ee92ef 100644 --- a/sass/typography/_typography.scss +++ b/sass/typography/_typography.scss @@ -1,6 +1,6 @@ html { - font-size: $font__size_base; + font-size: 100%; } body { @@ -9,7 +9,7 @@ body { color: $color__text-main; font-family: $font__body; font-weight: 400; - font-size: 1em; + font-size: $font__size_base; line-height: $font__line-height-body; margin: 0; text-rendering: optimizeLegibility; diff --git a/sass/variables-site/_fonts.scss b/sass/variables-site/_fonts.scss index 0b7bfa3e..17417018 100644 --- a/sass/variables-site/_fonts.scss +++ b/sass/variables-site/_fonts.scss @@ -5,17 +5,16 @@ $font__heading: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen $font__code: Menlo, monaco, Consolas, Lucida Console, monospace; $font__pre: "Courier 10 Pitch", Courier, monospace; -$font__size_base: 22px; -$font__size-ratio: 1.125; +$font__size_base: 1.375rem; -$font__size-xxs: 1em / (1.5 * $font__size-ratio); -$font__size-xs: 1em / (1.25 * $font__size-ratio); -$font__size-sm: 1em / (1 * $font__size-ratio); -$font__size-md: 1em * (1 * $font__size-ratio); -$font__size-lg: 1em * (1.5 * $font__size-ratio); -$font__size-xl: 1em * (2 * $font__size-ratio); -$font__size-xxl: 1em * (2.5 * $font__size-ratio); -$font__size-xxxl: 1em * (3 * $font__size-ratio); +$font__size-xxs: 0.875rem; +$font__size-xs: 1rem; +$font__size-sm: 1.25rem; +$font__size-md: 1.375rem; +$font__size-lg: 1.75rem; +$font__size-xl: 3rem; +$font__size-xxl: 4rem; +$font__size-xxxl: 4.5rem; $font__line-height-body: 1.8; $font__line-height-pre: 1.6; diff --git a/style-editor-frame.css b/style-editor-frame.css index 3637a7a7..29a2ebf5 100644 --- a/style-editor-frame.css +++ b/style-editor-frame.css @@ -18,7 +18,7 @@ body.block-editor-page .block-editor .editor-post-title__block:before { } body.block-editor-page .block-editor .editor-post-title__block:before { - width: 2.8125em; + width: 4rem; margin-top: 0; margin-bottom: 0; margin-left: 1em; @@ -28,13 +28,13 @@ body.block-editor-page .block-editor .editor-post-title__block:before { body.block-editor-page .block-editor .editor-post-title__block .editor-post-title__input { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 2.8125em; + font-size: 4rem; } /** === Default Appender === */ body.block-editor-page .block-editor .editor-default-block-appender__content { font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; - font-size: 22px; + font-size: 1.375rem; } /** === Off-Center Content === */ diff --git a/style-editor.css b/style-editor.css index bdb5461e..0e90708e 100644 --- a/style-editor.css +++ b/style-editor.css @@ -28,13 +28,13 @@ when Gutenberg supports styling those variations more intuitively. /** === Base Typography === */ body { - font-size: 22px; + font-size: 1.375rem; font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; color: #111; } p { - font-size: 22px; + font-size: 1.375rem; } h1, @@ -47,7 +47,7 @@ h6 { } h1 { - font-size: 2.25em; + font-size: 3rem; } h1:before { @@ -61,12 +61,12 @@ h1:before { @media only screen and (min-width: 768px) { h1 { - font-size: 2.8125em; + font-size: 4rem; } } h2 { - font-size: 1.6875em; + font-size: 1.75rem; } h2:before { @@ -80,24 +80,24 @@ h2:before { @media only screen and (min-width: 768px) { h2 { - font-size: 2.25em; + font-size: 3rem; } } h3 { - font-size: 1.6875em; + font-size: 1.75rem; } h4 { - font-size: 1.125em; + font-size: 1.375rem; } h5 { - font-size: 0.88889em; + font-size: 1.25rem; } h6 { - font-size: 0.71111em; + font-size: 1rem; } a { @@ -131,7 +131,7 @@ a:focus { figcaption, .gallery-caption { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.71111em; + font-size: 1rem; line-height: 1.6; color: #767676; } @@ -139,7 +139,7 @@ figcaption, /** === Paragraph === */ .wp-block-paragraph.has-drop-cap:not(:focus)::first-letter { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 3.375em; + font-size: 4.5rem; line-height: 1; font-weight: bold; margin: 0 0.25em 0 0; @@ -149,7 +149,7 @@ figcaption, .wp-block-cover h2, .wp-block-cover .wp-block-cover-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 2.25em; + font-size: 3rem; font-weight: bold; line-height: 1.4; } @@ -195,7 +195,7 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text { .wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption, .wp-block-gallery .gallery-item .gallery-caption { - font-size: 0.71111em; + font-size: 1rem; line-height: 1.6; } @@ -203,7 +203,7 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text { .wp-block-button .wp-block-button__link { line-height: 1.8; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.88889em; + font-size: 1.25rem; font-weight: bold; } @@ -234,13 +234,13 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text { } .wp-block-quote.is-large, .wp-block-quote.is-style-large { - margin-top: 2.8125em; - margin-bottom: 2.8125em; + margin-top: 4rem; + margin-bottom: 4rem; } .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { - font-size: 1.6875em; + font-size: 1.75rem; line-height: 1.3; margin-bottom: 0.5em; margin-top: 0.5em; @@ -250,7 +250,7 @@ body[data-type="core/cover"][data-align="right"] .wp-block-cover-text { .wp-block-quote footer, .wp-block-quote .wp-block-quote__citation { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.71111em; + font-size: 1rem; line-height: 1.6; color: #767676; } @@ -301,7 +301,7 @@ body[data-type="core/pullquote"][data-align="left"] p, body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p, body[data-type="core/pullquote"][data-align="right"] p { - font-size: 1.6875em; + font-size: 1.75rem; font-style: italic; line-height: 1.3; margin-bottom: 0.5em; @@ -318,7 +318,7 @@ body[data-type="core/pullquote"][data-align="right"] p { body[data-type="core/pullquote"][data-align="right"] blockquote > .block-library-pullquote__content .editor-rich-text__tinymce[data-is-empty="true"]::before, body[data-type="core/pullquote"][data-align="right"] blockquote > .editor-rich-text p, body[data-type="core/pullquote"][data-align="right"] p { - font-size: 2.25em; + font-size: 3rem; } } @@ -326,7 +326,7 @@ body[data-type="core/pullquote"] .wp-block-pullquote__citation, body[data-type="core/pullquote"][data-align="left"] .wp-block-pullquote__citation, body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citation { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.71111em; + font-size: 1rem; line-height: 1.6; text-transform: none; } @@ -370,7 +370,7 @@ body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citati .wp-block-file .wp-block-file__button { line-height: 1.8; - font-size: 0.88889em; + font-size: 1.25rem; font-weight: bold; background-color: #0073aa; border-radius: 5px; @@ -398,14 +398,14 @@ body[data-type="core/pullquote"][data-align="right"] .wp-block-pullquote__citati } .wp-block-separator:not(.is-style-wide):not(.is-style-dots) { - width: 2.25em; + width: 3rem; margin-left: 0; } .wp-block-separator.is-style-dots:before { color: #767676; - font-size: 1.6875em; - letter-spacing: 0.88889em; + font-size: 1.75rem; + letter-spacing: 1.25rem; } /** === Latest Posts, Archives, Categories === */ @@ -427,7 +427,7 @@ ul.wp-block-archives li, .wp-block-categories li, .wp-block-latest-posts li { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 1.6875em; + font-size: 1.75rem; font-weight: bold; line-height: 1.2; } @@ -486,7 +486,7 @@ ul.wp-block-archives li ul, } .wp-block-latest-comments .wp-block-latest-comments__comment-date { - font-size: 0.71111em; + font-size: 1rem; } /** === Classic Editor === */ @@ -508,7 +508,7 @@ ul.wp-block-archives li ul, .wp-block-freeform blockquote cite { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.71111em; + font-size: 1rem; font-style: normal; line-height: 1.6; color: #767676; diff --git a/style-rtl.css b/style-rtl.css index 14f5ce8f..8b07cf02 100644 --- a/style-rtl.css +++ b/style-rtl.css @@ -392,7 +392,7 @@ template { /* Typography */ html { - font-size: 22px; + font-size: 100%; } body { @@ -401,7 +401,7 @@ body { color: #111; font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; font-weight: 400; - font-size: 1em; + font-size: 1.375rem; line-height: 1.8; margin: 0; text-rendering: optimizeLegibility; @@ -468,12 +468,12 @@ img:after, } h1 { - font-size: 2.25em; + font-size: 3rem; } @media only screen and (min-width: 768px) { h1 { - font-size: 2.8125em; + font-size: 4rem; } } @@ -482,7 +482,7 @@ h1 { .error-404 .page-title, .has-larger-font-size, h2 { - font-size: 1.6875em; + font-size: 1.75rem; } @media only screen and (min-width: 768px) { @@ -491,7 +491,7 @@ h2 { .error-404 .page-title, .has-larger-font-size, h2 { - font-size: 2.25em; + font-size: 3rem; } } @@ -499,7 +499,7 @@ h2 { .has-large-font-size, .comments-title, h3 { - font-size: 1.6875em; + font-size: 1.75rem; } .site-title, @@ -513,13 +513,13 @@ h3 { h2.author-title, p.author-bio, h4 { - font-size: 1.125em; + font-size: 1.375rem; } .pagination .nav-links, .comment-content, h5 { - font-size: 0.88889em; + font-size: 1.25rem; } .entry-meta, @@ -534,7 +534,7 @@ h5 { #cancel-comment-reply-link, img:after, h6 { - font-size: 0.71111em; + font-size: 1rem; } .site-title, @@ -582,20 +582,20 @@ dfn, cite, em, i { } blockquote cite { - font-size: 0.71111em; + font-size: 1rem; font-style: normal; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } pre { - font-size: 0.88889em; + font-size: 1.25rem; font-family: "Courier 10 Pitch", Courier, monospace; line-height: 1.8; overflow: auto; } code, kbd, tt, var { - font-size: 0.88889em; + font-size: 1.25rem; font-family: Menlo, monaco, Consolas, Lucida Console, monospace; } @@ -766,7 +766,7 @@ input[type="submit"] { box-sizing: border-box; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.88889em; + font-size: 1.25rem; font-weight: 600; line-height: 1.2; outline: none; @@ -958,8 +958,8 @@ body.page .main-navigation { top: 0.2rem; } -.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand, -.main-navigation .main-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand { +.main-navigation .main-menu > li.menu-item-has-children .mobile-submenu-expand, +.main-navigation .main-menu > li.menu-item-has-children .desktop-submenu-expand { margin-left: 0.5rem; } @@ -1014,8 +1014,8 @@ body.page .main-navigation { top: 0; } -.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .mobile-submenu-expand, -.main-navigation .sub-menu > li.menu-item-has-children:not(:last-child) .desktop-submenu-expand { +.main-navigation .sub-menu > li.menu-item-has-children .mobile-submenu-expand, +.main-navigation .sub-menu > li.menu-item-has-children .desktop-submenu-expand { margin-left: 0; } @@ -1042,7 +1042,7 @@ body.page .main-navigation { .main-navigation .sub-menu > li.mobile-parent-nav-menu-item { display: none; - font-size: 0.88889em; + font-size: 1.25rem; font-weight: normal; } @@ -1082,9 +1082,6 @@ body.page .main-navigation { .main-navigation .main-menu .menu-item-has-children:focus > .sub-menu, .main-navigation .main-menu .menu-item-has-children .sub-menu:hover, .main-navigation .main-menu .menu-item-has-children .sub-menu:focus { - display: table; - margin-top: 0; - opacity: 1; /* Non-mobile position */ } @@ -1093,6 +1090,9 @@ body.page .main-navigation { .main-navigation .main-menu .menu-item-has-children:focus > .sub-menu, .main-navigation .main-menu .menu-item-has-children .sub-menu:hover, .main-navigation .main-menu .menu-item-has-children .sub-menu:focus { + display: table; + margin-top: 0; + opacity: 1; position: absolute; right: 0; left: auto; @@ -2245,7 +2245,7 @@ body.page .main-navigation { .author-bio .author-description { display: inline; color: #767676; - font-size: 1.125em; + font-size: 1.375rem; line-height: 1.2; } @@ -2357,7 +2357,7 @@ body.page .main-navigation { #respond > small { display: block; - font-size: 22px; + font-size: 1.375rem; position: absolute; right: calc(1rem + 100%); top: calc(-3.5 * 1rem); @@ -2638,7 +2638,7 @@ body.page .main-navigation { .comment-form .comment-notes, .comment-form label { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.71111em; + font-size: 1rem; color: #767676; } @@ -2837,7 +2837,7 @@ body.page .main-navigation { .widget_rss ul li { color: #767676; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: calc(22px * 1.6875); + font-size: calc(1.375rem * 1.75rem); font-weight: bold; line-height: 1.2; } @@ -3037,7 +3037,7 @@ body.page .main-navigation { transition: background 150ms ease-in-out; border: none; background: #0073aa; - font-size: 0.88889em; + font-size: 1.25rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.2; box-sizing: border-box; @@ -3091,7 +3091,7 @@ body.page .main-navigation { .entry-content .wp-block-latest-posts li { color: #767676; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: calc(22px * 1.6875); + font-size: calc(1.375rem * 1.75rem); font-weight: bold; line-height: 1.2; } @@ -3133,20 +3133,20 @@ body.page .main-navigation { } .entry-content .wp-block-preformatted { - font-size: 0.71111em; + font-size: 1rem; line-height: 1.8; padding: 1rem; } .entry-content .wp-block-verse { font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; - font-size: 22px; + font-size: 1.375rem; line-height: 1.8; } .entry-content .has-drop-cap:not(:focus):first-letter { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 3.375em; + font-size: 4.5rem; line-height: 1; font-weight: bold; margin: 0 0 0 0.25em; @@ -3165,7 +3165,7 @@ body.page .main-navigation { } .entry-content .wp-block-pullquote p { - font-size: 1.6875em; + font-size: 1.75rem; font-style: italic; line-height: 1.3; margin-bottom: 0.5em; @@ -3178,14 +3178,14 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry-content .wp-block-pullquote p { - font-size: 2.25em; + font-size: 3rem; } } .entry-content .wp-block-pullquote cite { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.71111em; + font-size: 1rem; line-height: 1.6; text-transform: none; } @@ -3206,7 +3206,7 @@ body.page .main-navigation { } .entry-content .wp-block-pullquote.is-style-solid-color p { - font-size: 1.6875em; + font-size: 1.75rem; line-height: 1.3; margin-bottom: 0.5em; margin-top: 0.5em; @@ -3214,7 +3214,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry-content .wp-block-pullquote.is-style-solid-color p { - font-size: 2.25em; + font-size: 3rem; } } @@ -3260,7 +3260,7 @@ body.page .main-navigation { } .entry-content .wp-block-quote cite { - font-size: 0.71111em; + font-size: 1rem; } .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large { @@ -3270,7 +3270,7 @@ body.page .main-navigation { } .entry-content .wp-block-quote.is-large p, .entry-content .wp-block-quote.is-style-large p { - font-size: 1.6875em; + font-size: 1.75rem; line-height: 1.4; font-style: italic; } @@ -3278,7 +3278,7 @@ body.page .main-navigation { .entry-content .wp-block-quote.is-large cite, .entry-content .wp-block-quote.is-large footer, .entry-content .wp-block-quote.is-style-large cite, .entry-content .wp-block-quote.is-style-large footer { - font-size: 0.71111em; + font-size: 1rem; } @media only screen and (min-width: 768px) { @@ -3287,7 +3287,7 @@ body.page .main-navigation { max-width: calc(6 * (100vw / 12)); } .entry-content .wp-block-quote.is-large p, .entry-content .wp-block-quote.is-style-large p { - font-size: 1.6875em; + font-size: 1.75rem; } } @@ -3312,7 +3312,7 @@ body.page .main-navigation { .entry-content .wp-block-cover .wp-block-cover-text, .entry-content .wp-block-cover h2 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 1.6875em; + font-size: 1.75rem; font-weight: bold; width: calc(100vw - (2 * 1rem)); max-width: calc(100vw - (2 * 1rem)); @@ -3325,7 +3325,7 @@ body.page .main-navigation { .entry-content .wp-block-cover .wp-block-cover-image-text, .entry-content .wp-block-cover .wp-block-cover-text, .entry-content .wp-block-cover h2 { - font-size: 2.25em; + font-size: 3rem; width: calc(8 * (100vw / 12)); max-width: calc(8 * (100vw / 12)); } @@ -3411,7 +3411,7 @@ body.page .main-navigation { .entry-content .wp-block-image figcaption, .entry-content .wp-block-gallery .blocks-gallery-image figcaption, .entry-content .wp-block-gallery .blocks-gallery-item figcaption { - font-size: 0.71111em; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.6; margin: 0; @@ -3449,9 +3449,9 @@ body.page .main-navigation { .entry-content .wp-block-separator.is-style-dots:before, .entry-content hr.is-style-dots:before { color: #767676; - font-size: 1.6875em; - letter-spacing: 0.88889em; - padding-right: 0.88889em; + font-size: 1.75rem; + letter-spacing: 1.25rem; + padding-right: 1.25rem; } .entry-content .wp-block-embed-twitter { @@ -3471,7 +3471,7 @@ body.page .main-navigation { border: none; border-radius: 5px; background: #0073aa; - font-size: 22px; + font-size: 1.375rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.2; font-weight: bold; @@ -3480,7 +3480,7 @@ body.page .main-navigation { @media only screen and (min-width: 1168px) { .entry-content .wp-block-file .wp-block-file__button { - font-size: 22px; + font-size: 1.375rem; padding: 0.875rem 1.5rem; } } @@ -3503,7 +3503,7 @@ body.page .main-navigation { } .entry-content .wp-block-code code { - font-size: 1.125em; + font-size: 1.375rem; } .entry-content .wp-block-columns .wp-block-column > *:first-child { @@ -3538,7 +3538,7 @@ body.page .main-navigation { } .entry-content .wp-block-latest-comments.has-dates .wp-block-latest-comments__comment-date { - font-size: 0.71111em; + font-size: 1rem; } .entry-content .has-primary-background-color { @@ -3667,7 +3667,7 @@ svg { .gallery-caption { display: block; - font-size: 0.71111em; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.6; margin: 0; diff --git a/style.css b/style.css index af9220f9..ba8c76b0 100644 --- a/style.css +++ b/style.css @@ -392,7 +392,7 @@ template { /* Typography */ html { - font-size: 22px; + font-size: 100%; } body { @@ -401,7 +401,7 @@ body { color: #111; font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; font-weight: 400; - font-size: 1em; + font-size: 1.375rem; line-height: 1.8; margin: 0; text-rendering: optimizeLegibility; @@ -468,12 +468,12 @@ img:after, } h1 { - font-size: 2.25em; + font-size: 3rem; } @media only screen and (min-width: 768px) { h1 { - font-size: 2.8125em; + font-size: 4rem; } } @@ -482,7 +482,7 @@ h1 { .error-404 .page-title, .has-larger-font-size, h2 { - font-size: 1.6875em; + font-size: 1.75rem; } @media only screen and (min-width: 768px) { @@ -491,7 +491,7 @@ h2 { .error-404 .page-title, .has-larger-font-size, h2 { - font-size: 2.25em; + font-size: 3rem; } } @@ -499,7 +499,7 @@ h2 { .has-large-font-size, .comments-title, h3 { - font-size: 1.6875em; + font-size: 1.75rem; } .site-title, @@ -513,13 +513,13 @@ h3 { h2.author-title, p.author-bio, h4 { - font-size: 1.125em; + font-size: 1.375rem; } .pagination .nav-links, .comment-content, h5 { - font-size: 0.88889em; + font-size: 1.25rem; } .entry-meta, @@ -534,7 +534,7 @@ h5 { #cancel-comment-reply-link, img:after, h6 { - font-size: 0.71111em; + font-size: 1rem; } .site-title, @@ -582,20 +582,20 @@ dfn, cite, em, i { } blockquote cite { - font-size: 0.71111em; + font-size: 1rem; font-style: normal; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; } pre { - font-size: 0.88889em; + font-size: 1.25rem; font-family: "Courier 10 Pitch", Courier, monospace; line-height: 1.8; overflow: auto; } code, kbd, tt, var { - font-size: 0.88889em; + font-size: 1.25rem; font-family: Menlo, monaco, Consolas, Lucida Console, monospace; } @@ -766,7 +766,7 @@ input[type="submit"] { box-sizing: border-box; color: white; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.88889em; + font-size: 1.25rem; font-weight: 600; line-height: 1.2; outline: none; @@ -1042,7 +1042,7 @@ body.page .main-navigation { .main-navigation .sub-menu > li.mobile-parent-nav-menu-item { display: none; - font-size: 0.88889em; + font-size: 1.25rem; font-weight: normal; } @@ -2247,7 +2247,7 @@ body.page .main-navigation { .author-bio .author-description { display: inline; color: #767676; - font-size: 1.125em; + font-size: 1.375rem; line-height: 1.2; } @@ -2359,7 +2359,7 @@ body.page .main-navigation { #respond > small { display: block; - font-size: 22px; + font-size: 1.375rem; position: absolute; left: calc(1rem + 100%); top: calc(-3.5 * 1rem); @@ -2640,7 +2640,7 @@ body.page .main-navigation { .comment-form .comment-notes, .comment-form label { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.71111em; + font-size: 1rem; color: #767676; } @@ -2839,7 +2839,7 @@ body.page .main-navigation { .widget_rss ul li { color: #767676; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: calc(22px * 1.6875); + font-size: calc(1.375rem * 1.75rem); font-weight: bold; line-height: 1.2; } @@ -3039,7 +3039,7 @@ body.page .main-navigation { transition: background 150ms ease-in-out; border: none; background: #0073aa; - font-size: 0.88889em; + font-size: 1.25rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.2; box-sizing: border-box; @@ -3093,7 +3093,7 @@ body.page .main-navigation { .entry-content .wp-block-latest-posts li { color: #767676; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: calc(22px * 1.6875); + font-size: calc(1.375rem * 1.75rem); font-weight: bold; line-height: 1.2; } @@ -3135,20 +3135,20 @@ body.page .main-navigation { } .entry-content .wp-block-preformatted { - font-size: 0.71111em; + font-size: 1rem; line-height: 1.8; padding: 1rem; } .entry-content .wp-block-verse { font-family: "Hoefler Text", "Baskerville Old Face", Garamond, "Times New Roman", serif; - font-size: 22px; + font-size: 1.375rem; line-height: 1.8; } .entry-content .has-drop-cap:not(:focus):first-letter { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 3.375em; + font-size: 4.5rem; line-height: 1; font-weight: bold; margin: 0 0.25em 0 0; @@ -3167,7 +3167,7 @@ body.page .main-navigation { } .entry-content .wp-block-pullquote p { - font-size: 1.6875em; + font-size: 1.75rem; font-style: italic; line-height: 1.3; margin-bottom: 0.5em; @@ -3180,14 +3180,14 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry-content .wp-block-pullquote p { - font-size: 2.25em; + font-size: 3rem; } } .entry-content .wp-block-pullquote cite { display: inline-block; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 0.71111em; + font-size: 1rem; line-height: 1.6; text-transform: none; } @@ -3208,7 +3208,7 @@ body.page .main-navigation { } .entry-content .wp-block-pullquote.is-style-solid-color p { - font-size: 1.6875em; + font-size: 1.75rem; line-height: 1.3; margin-bottom: 0.5em; margin-top: 0.5em; @@ -3216,7 +3216,7 @@ body.page .main-navigation { @media only screen and (min-width: 768px) { .entry-content .wp-block-pullquote.is-style-solid-color p { - font-size: 2.25em; + font-size: 3rem; } } @@ -3262,7 +3262,7 @@ body.page .main-navigation { } .entry-content .wp-block-quote cite { - font-size: 0.71111em; + font-size: 1rem; } .entry-content .wp-block-quote.is-large, .entry-content .wp-block-quote.is-style-large { @@ -3272,7 +3272,7 @@ body.page .main-navigation { } .entry-content .wp-block-quote.is-large p, .entry-content .wp-block-quote.is-style-large p { - font-size: 1.6875em; + font-size: 1.75rem; line-height: 1.4; font-style: italic; } @@ -3280,7 +3280,7 @@ body.page .main-navigation { .entry-content .wp-block-quote.is-large cite, .entry-content .wp-block-quote.is-large footer, .entry-content .wp-block-quote.is-style-large cite, .entry-content .wp-block-quote.is-style-large footer { - font-size: 0.71111em; + font-size: 1rem; } @media only screen and (min-width: 768px) { @@ -3289,7 +3289,7 @@ body.page .main-navigation { max-width: calc(6 * (100vw / 12)); } .entry-content .wp-block-quote.is-large p, .entry-content .wp-block-quote.is-style-large p { - font-size: 1.6875em; + font-size: 1.75rem; } } @@ -3314,7 +3314,7 @@ body.page .main-navigation { .entry-content .wp-block-cover .wp-block-cover-text, .entry-content .wp-block-cover h2 { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; - font-size: 1.6875em; + font-size: 1.75rem; font-weight: bold; width: calc(100vw - (2 * 1rem)); max-width: calc(100vw - (2 * 1rem)); @@ -3327,7 +3327,7 @@ body.page .main-navigation { .entry-content .wp-block-cover .wp-block-cover-image-text, .entry-content .wp-block-cover .wp-block-cover-text, .entry-content .wp-block-cover h2 { - font-size: 2.25em; + font-size: 3rem; width: calc(8 * (100vw / 12)); max-width: calc(8 * (100vw / 12)); } @@ -3413,7 +3413,7 @@ body.page .main-navigation { .entry-content .wp-block-image figcaption, .entry-content .wp-block-gallery .blocks-gallery-image figcaption, .entry-content .wp-block-gallery .blocks-gallery-item figcaption { - font-size: 0.71111em; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.6; margin: 0; @@ -3451,9 +3451,9 @@ body.page .main-navigation { .entry-content .wp-block-separator.is-style-dots:before, .entry-content hr.is-style-dots:before { color: #767676; - font-size: 1.6875em; - letter-spacing: 0.88889em; - padding-left: 0.88889em; + font-size: 1.75rem; + letter-spacing: 1.25rem; + padding-left: 1.25rem; } .entry-content .wp-block-embed-twitter { @@ -3473,7 +3473,7 @@ body.page .main-navigation { border: none; border-radius: 5px; background: #0073aa; - font-size: 22px; + font-size: 1.375rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.2; font-weight: bold; @@ -3482,7 +3482,7 @@ body.page .main-navigation { @media only screen and (min-width: 1168px) { .entry-content .wp-block-file .wp-block-file__button { - font-size: 22px; + font-size: 1.375rem; padding: 0.875rem 1.5rem; } } @@ -3505,7 +3505,7 @@ body.page .main-navigation { } .entry-content .wp-block-code code { - font-size: 1.125em; + font-size: 1.375rem; } .entry-content .wp-block-columns .wp-block-column > *:first-child { @@ -3540,7 +3540,7 @@ body.page .main-navigation { } .entry-content .wp-block-latest-comments.has-dates .wp-block-latest-comments__comment-date { - font-size: 0.71111em; + font-size: 1rem; } .entry-content .has-primary-background-color { @@ -3669,7 +3669,7 @@ svg { .gallery-caption { display: block; - font-size: 0.71111em; + font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif; line-height: 1.6; margin: 0;