diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index 70b6c1ce6c..5658559f6f 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -8,52 +8,244 @@ :root { /* Font Family */ + --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); + --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); /* Font Size */ + --global--font-size-base: 1.25rem; + --global--font-size-xs: 1rem; + --global--font-size-sm: 1.125rem; + --global--font-size-md: 1.25rem; + --global--font-size-lg: 1.5rem; + --global--font-size-xl: 2.25rem; + --global--font-size-xxl: 4rem; + --global--font-size-xxxl: 5rem; + --global--font-size-page-title: var(--global--font-size-xxl); + --global--letter-spacing: normal; /* Line Height */ + --global--line-height-body: 1.7; + --global--line-height-heading: 1.3; + --global--line-height-page-title: 1.1; /* Headings */ + --heading--font-family: var(--global--font-primary); + --heading--font-size-h6: var(--global--font-size-xs); + --heading--font-size-h5: var(--global--font-size-sm); + --heading--font-size-h4: var(--global--font-size-lg); + --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg)); + --heading--font-size-h2: var(--global--font-size-xl); + --heading--font-size-h1: var(--global--font-size-page-title); + --heading--letter-spacing-h6: 0.05em; + --heading--letter-spacing-h5: 0.05em; + --heading--letter-spacing-h4: var(--global--letter-spacing); + --heading--letter-spacing-h3: var(--global--letter-spacing); + --heading--letter-spacing-h2: var(--global--letter-spacing); + --heading--letter-spacing-h1: var(--global--letter-spacing); + --heading--line-height-h6: var(--global--line-height-heading); + --heading--line-height-h5: var(--global--line-height-heading); + --heading--line-height-h4: var(--global--line-height-heading); + --heading--line-height-h3: var(--global--line-height-heading); + --heading--line-height-h2: var(--global--line-height-heading); + --heading--line-height-h1: var(--global--line-height-page-title); + --heading--font-weight: normal; + --heading--font-weight-page-title: 300; + --heading--font-weight-strong: 600; /* Block: Latest posts */ + --latest-posts--title-font-family: var(--heading--font-family); + --latest-posts--title-font-size: var(--heading--font-size-h3); + --latest-posts--description-font-family: var(--global--font-secondary); + --latest-posts--description-font-size: var(--global--font-size-sm); + --list--font-family: var(--global--font-secondary); + --definition-term--font-family: var(--global--font-primary); /* Colors */ + --global--color-black: #000; + --global--color-dark-gray: #28303d; + --global--color-gray: #39414d; + --global--color-light-gray: #f0f0f0; + --global--color-green: #d1e4dd; + --global--color-blue: #d1dfe4; + --global--color-purple: #d1d1e4; + --global--color-red: #e4d1d1; + --global--color-orange: #e4dad1; + --global--color-yellow: #eeeadd; + --global--color-white: #fff; + --global--color-white-50: rgba(255, 255, 255, 0.5); + --global--color-white-90: rgba(255, 255, 255, 0.9); + --global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */ + --global--color-secondary: var(--global--color-gray); /* Headings */ + --global--color-primary-hover: var(--global--color-primary); + --global--color-background: var(--global--color-green); /* Mint, default body background */ + --global--color-border: var(--global--color-primary); /* Used for borders (separators) */ /* Spacing */ + --global--spacing-unit: 20px; + --global--spacing-measure: unset; + --global--spacing-horizontal: 25px; + --global--spacing-vertical: 30px; /* Elevation */ + --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); /* Forms */ + --form--font-family: var(--global--font-secondary); + --form--font-size: var(--global--font-size-sm); + --form--line-height: var(--global--line-height-body); + --form--color-text: var(--global--color-dark-gray); + --form--color-ranged: var(--global--color-secondary); + --form--label-weight: 500; + --form--border-color: var(--global--color-secondary); + --form--border-width: 3px; + --form--border-radius: 0; + --form--spacing-unit: calc(0.5 * var(--global--spacing-unit)); /* Cover block */ + --cover--height: calc(15 * var(--global--spacing-vertical)); + --cover--color-foreground: var(--global--color-white); + --cover--color-background: var(--global--color-black); /* Buttons */ + --button--color-text: var(--global--color-background); + --button--color-text-hover: var(--global--color-secondary); + --button--color-text-active: var(--global--color-secondary); + --button--color-background: var(--global--color-secondary); + --button--color-background-active: var(--global--color-background); + --button--font-family: var(--global--font-primary); + --button--font-size: var(--global--font-size-base); + --button--font-weight: 500; + --button--line-height: 1.5; + --button--border-width: 3px; + --button--border-radius: 0; + --button--padding-vertical: 15px; + --button--padding-horizontal: calc(2 * var(--button--padding-vertical)); /* entry */ + --entry-header--color: var(--global--color-primary); + --entry-header--color-link: currentColor; + --entry-header--color-hover: var(--global--color-primary-hover); + --entry-header--color-focus: var(--global--color-secondary); + --entry-header--font-size: var(--heading--font-size-h2); + --entry-content--font-family: var(--global--font-secondary); + --entry-author-bio--font-family: var(--heading--font-family); + --entry-author-bio--font-size: var(--heading--font-size-h4); /* Header */ + --branding--color-text: var(--global--color-primary); + --branding--color-link: var(--global--color-primary); + --branding--color-link-hover: var(--global--color-secondary); + --branding--title--font-family: var(--global--font-primary); + --branding--title--font-size: var(--global--font-size-lg); + --branding--title--font-size-mobile: var(--heading--font-size-h4); + --branding--title--font-weight: normal; + --branding--title--text-transform: uppercase; + --branding--description--font-family: var(--global--font-secondary); + --branding--description--font-size: var(--global--font-size-sm); + --branding--description--font-family: var(--global--font-secondary); + --branding--logo--max-width: 300px; + --branding--logo--max-height: 100px; + --branding--logo--max-width-mobile: 96px; + --branding--logo--max-height-mobile: 96px; /* Main navigation */ + --primary-nav--font-family: var(--global--font-secondary); + --primary-nav--font-family-mobile: var(--global--font-primary); + --primary-nav--font-size: var(--global--font-size-md); + --primary-nav--font-size-sub-menu: var(--global--font-size-xs); + --primary-nav--font-size-mobile: var(--global--font-size-sm); + --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm); + --primary-nav--font-size-button: var(--global--font-size-xs); + --primary-nav--font-style: normal; + --primary-nav--font-style-sub-menu-mobile: normal; + --primary-nav--font-weight: normal; + --primary-nav--font-weight-button: 500; + --primary-nav--color-link: var(--global--color-primary); + --primary-nav--color-link-hover: var(--global--color-primary-hover); + --primary-nav--color-text: var(--global--color-primary); + --primary-nav--padding: calc(0.66 * var(--global--spacing-unit)); + --primary-nav--border-color: var(--global--color-primary); /* Pagination */ + --pagination--color-text: var(--global--color-primary); + --pagination--color-link-hover: var(--global--color-primary-hover); + --pagination--font-family: var(--global--font-secondary); + --pagination--font-size: var(--global--font-size-lg); + --pagination--font-weight: normal; + --pagination--font-weight-strong: 600; /* Footer */ + --footer--color-text: var(--global--color-primary); + --footer--color-link: var(--global--color-primary); + --footer--color-link-hover: var(--global--color-primary-hover); + --footer--font-family: var(--global--font-primary); + --footer--font-size: var(--global--font-size-sm); /* Block: Pull quote */ + --pullquote--font-family: var(--global--font-primary); + --pullquote--font-size: var(--heading--font-size-h3); + --pullquote--font-style: normal; + --pullquote--letter-spacing: var(--heading--letter-spacing-h4); + --pullquote--line-height: var(--global--line-height-heading); + --pullquote--border-width: 3px; + --pullquote--border-color: var(--global--color-primary); + --pullquote--color-foreground: var(--global--color-primary); + --pullquote--color-background: var(--global--color-background); + --quote--font-family: var(--global--font-secondary); + --quote--font-size: var(--global--font-size-md); + --quote--font-size-large: var(--global--font-size-xl); + --quote--font-style: normal; + --quote--font-weight: 700; + --quote--font-weight-strong: bolder; + --quote--font-style-large: normal; + --quote--font-style-cite: normal; + --quote--line-height: var(--global--line-height-body); + --quote--line-height-large: 1.35; + --separator--border-color: var(--global--color-border); + --separator--height: 1px; /* Block: Table */ + --table--stripes-border-color: var(--global--color-light-gray); + --table--stripes-background-color: var(--global--color-light-gray); + --table--has-background-text-color: var(--global--color-dark-gray); /* Widgets */ + --widget--line-height-list: 1.9; + --widget--line-height-title: 1.4; + --widget--font-weight-title: 700; + --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); /* Admin-bar height */ + --global--admin-bar--height: 0; +} + +.admin-bar { + --global--admin-bar--height: 32px; +} +@media only screen and (max-width: 782px) { + + .admin-bar { + --global--admin-bar--height: 46px; + } +} + +@media only screen and (min-width: 652px) { + + :root { + --global--font-size-xl: 2.5rem; + --global--font-size-xxl: 6rem; + --global--font-size-xxxl: 9rem; + --heading--font-size-h3: 2rem; + --heading--font-size-h2: 3rem; + } } /** @@ -67,52 +259,51 @@ /** * Root Media Query Variables */ +:root { + --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6); + --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal)); + --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal)); + --responsive--alignfull-width: 100%; + --responsive--alignright-margin: var(--global--spacing-horizontal); + --responsive--alignleft-margin: var(--global--spacing-horizontal); +} + +@media only screen and (min-width: 482px) { + + :root { + --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px); + --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal)); + --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); + --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); + } +} +@media only screen and (min-width: 822px) { + + :root { + --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px); + --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px); + } +} /** * Extends */ .default-max-width { - max-width: calc(100vw - 30px); + max-width: var(--responsive--aligndefault-width); margin-left: auto; margin-right: auto; } -@media only screen and (min-width: 482px) { - - .default-max-width { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - .default-max-width { - max-width: min(calc(100vw - 200px), 610px); - } -} .wide-max-width { - max-width: calc(100vw - 30px); + max-width: var(--responsive--alignwide-width); margin-left: auto; margin-right: auto; } -@media only screen and (min-width: 482px) { - - .wide-max-width { - max-width: calc(100vw - 100px); - } -} - -@media only screen and (min-width: 822px) { - - .wide-max-width { - max-width: min(calc(100vw - 200px), 1240px); - } -} - @media only screen and (min-width: 482px) { .full-max-width { - max-width: 100%; + max-width: var(--responsive--alignfull-width); width: auto; margin-left: auto; margin-right: auto; @@ -122,12 +313,12 @@ blockquote { padding: 0; position: relative; - margin: 30px 0 30px 25px; + margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); } blockquote > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: var(--global--spacing-unit); + margin-bottom: var(--global--spacing-unit); } blockquote > *:first-child { @@ -139,26 +330,20 @@ blockquote > *:last-child { } blockquote p { - letter-spacing: normal; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - font-style: normal; - font-weight: 700; - line-height: 1.7; -} - -blockquote cite { - font-weight: normal; - color: #28303d; - font-size: 1rem; - letter-spacing: normal; + letter-spacing: var(--heading--letter-spacing-h4); + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight); + line-height: var(--quote--line-height); } +blockquote cite, blockquote footer { font-weight: normal; - color: #28303d; - font-size: 1rem; - letter-spacing: normal; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + letter-spacing: var(--global--letter-spacing); } blockquote.alignleft, @@ -166,69 +351,44 @@ blockquote.alignright { padding-left: inherit; } -blockquote.alignleft p { - font-size: 1.125rem; - max-width: inherit; - width: inherit; -} - +blockquote.alignleft p, blockquote.alignright p { - font-size: 1.125rem; + font-size: var(--heading--font-size-h5); max-width: inherit; width: inherit; } -blockquote.alignleft cite { - font-size: 1rem; - letter-spacing: normal; -} - -blockquote.alignleft footer { - font-size: 1rem; - letter-spacing: normal; -} - -blockquote.alignright cite { - font-size: 1rem; - letter-spacing: normal; -} - +blockquote.alignleft cite, +blockquote.alignleft footer, +blockquote.alignright cite, blockquote.alignright footer { - font-size: 1rem; - letter-spacing: normal; + font-size: var(--global--font-size-xs); + letter-spacing: var(--global--letter-spacing); } blockquote strong { - font-weight: bolder; + font-weight: var(--quote--font-weight-strong); } blockquote:before { content: "“"; - font-size: 1.25rem; - line-height: 1.7; -} - -blockquote .wp-block-quote__citation { - color: #28303d; - font-size: 1rem; - font-style: normal; -} - -blockquote cite { - color: #28303d; - font-size: 1rem; - font-style: normal; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + position: absolute; + left: calc(-0.5 * var(--global--spacing-horizontal)); } +blockquote .wp-block-quote__citation, +blockquote cite, blockquote footer { - color: #28303d; - font-size: 1rem; - font-style: normal; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + font-style: var(--quote--font-style-cite); } @media only screen and (max-width: 481px) { blockquote { - padding-left: 13px; + padding-left: calc(0.5 * var(--global--spacing-horizontal)); } blockquote:before { @@ -256,30 +416,15 @@ video { } /* Media captions */ -figcaption { +figcaption, +.wp-caption, +.wp-caption-text, +.wp-block-embed figcaption { color: currentColor; - font-size: 1rem; - line-height: 1.7; - margin-top: 10px; - margin-bottom: 20px; - text-align: center; -} - -.wp-caption { - color: currentColor; - font-size: 1rem; - line-height: 1.7; - margin-top: 10px; - margin-bottom: 20px; - text-align: center; -} - -.wp-caption-text { - color: currentColor; - font-size: 1rem; - line-height: 1.7; - margin-top: 10px; - margin-bottom: 20px; + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); + margin-top: calc(0.5 * var(--global--spacing-unit)); + margin-bottom: var(--global--spacing-unit); text-align: center; } @@ -288,7 +433,9 @@ figcaption { .alignleft .wp-caption, .alignright .wp-caption, .alignleft .wp-caption-text, -.alignright .wp-caption-text { +.alignright .wp-caption-text, +.alignleft .wp-block-embed figcaption, +.alignright .wp-block-embed figcaption { margin-bottom: 0; } @@ -303,16 +450,16 @@ figcaption { } select { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - font-size: 1.125rem; + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); + color: var(--form--color-text); + font-size: var(--form--font-size); -moz-appearance: none; -webkit-appearance: none; appearance: none; - padding: 10px 30px 10px 10px; - background: #fff url("data:image/svg+xml;utf8,") no-repeat; - background-position: right 10px top 60%; + padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit); + background: var(--global--color-white) url("data:image/svg+xml;utf8,") no-repeat; + background-position: right var(--form--spacing-unit) top 60%; } /* @@ -322,7 +469,7 @@ select { */ a { cursor: pointer; - color: #28303d; + color: var(--wp--style--color--link, var(--global--color-primary)); text-underline-offset: 3px; text-decoration-skip-ink: all; } @@ -332,82 +479,62 @@ a:hover { text-decoration-skip-ink: none; } -.site a:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; + text-decoration: underline 1px dotted currentColor; + text-decoration-skip-ink: none; background: rgba(255, 255, 255, 0.9); } -.is-dark-theme .site a:focus { - color: #d1e4dd; +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { + color: var(--wp--style--color--link, var(--global--color-background)); } -.is-dark-theme .site a:focus .meta-nav { - color: #d1e4dd; -} - -.has-background-white .site a:focus { +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: rgba(0, 0, 0, 0.9); - color: #fff; + color: var(--wp--style--color--link, var(--global--color-white)); } -.has-background-white .site a:focus .meta-nav { - color: #fff; +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { + color: var(--wp--style--color--link, var(--global--color-white)); } -.site a:focus.skip-link { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } -.site a:focus.skip-link:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { color: #21759b; background-color: #f1f1f1; } -.site a:focus img { - outline: 2px dotted #28303d; +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { + outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } -.has-background:not(.has-background-background-color) .has-link-color a { - color: #28303d; -} - -.has-background:not(.has-background-background-color).has-link-color a { - color: #28303d; +.has-background .has-link-color a, +.has-background.has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); } .wp-block-button__link { - line-height: 1.5; - color: #d1e4dd; + line-height: var(--button--line-height); + color: var(--button--color-text); cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; + font-weight: var(--button--font-weight); + font-family: var(--button--font-family); + font-size: var(--button--font-size); + background-color: var(--button--color-background); + border-radius: var(--button--border-radius); + border: var(--button--border-width) solid var(--button--color-background); text-decoration: none; - padding: 15px 30px; -} - -.wp-block-button__link:before, -.wp-block-button__link:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.wp-block-button__link:before { - margin-bottom: -calc(1em - 0); -} - -.wp-block-button__link:after { - margin-top: -calc(1em - 0); + padding: var(--button--padding-vertical) var(--button--padding-horizontal); } .wp-block-button__link:focus { @@ -417,17 +544,17 @@ a:hover { } .is-dark-theme .wp-block-button__link:focus { - color: #39414d; + color: var(--button--color-background); } .wp-block-button__link:focus:not(.has-background) { - color: #39414d; + color: var(--button--color-text-hover); } .wp-block-button__link:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; + background-color: var(--global--color-white-50); + border-color: var(--global--color-white-50); + color: var(--button--color-text-active); } /** @@ -439,112 +566,76 @@ a:hover { } [data-block].wp-block-buttons .wp-block-button:first-child { - margin-top: 30px; + margin-top: var(--global--spacing-vertical); } [data-block].wp-block-buttons .wp-block-button:last-child { - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:active { - color: #39414d !important; + color: var(--button--color-text-active) !important; background: transparent !important; - border-color: #39414d; + border-color: var(--button--color-background); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { - color: #39414d !important; + color: var(--button--color-text-hover) !important; background: transparent !important; - border-color: #39414d; + border-color: var(--button--color-background); } .wp-block-button.is-style-outline .wp-block-button__link { - color: #39414d; + color: var(--button--color-background); background: transparent; - border: 3px solid currentColor; - padding: 15px 30px; -} - -.wp-block-button.is-style-outline .wp-block-button__link:active { - background-color: #39414d; - color: #d1e4dd; - border-color: #39414d; + border: var(--button--border-width) solid currentColor; + padding: var(--button--padding-vertical) var(--button--padding-horizontal); } +.wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:hover { - background-color: #39414d; - color: #d1e4dd; - border-color: #39414d; + background-color: var(--button--color-background); + color: var(--button--color-text); + border-color: var(--button--color-background); } .wp-block-button.is-style-outline .wp-block-button__link.has-background { - border-color: #39414d; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background:active { - background-color: #39414d !important; + border-color: var(--button--color-background); } +.wp-block-button.is-style-outline .wp-block-button__link.has-background:active, .wp-block-button.is-style-outline .wp-block-button__link.has-background:hover { - background-color: #39414d !important; + background-color: var(--button--color-background) !important; } .wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) { - color: #28303d; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) { - color: #fff; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) { - color: #fff; + color: var(--global--color-dark-gray); } +.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color), +.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color), .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) { - color: #fff; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color { - color: #28303d; + color: var(--global--color-white); } +.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-white-background-color, +.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-green-background-color, +.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-blue-background-color, +.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-purple-background-color, +.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-red-background-color, +.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-orange-background-color, .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-yellow-background-color { - color: #28303d; + color: var(--global--color-dark-gray); } .wp-block-button.is-style-outline .wp-block-button__link.has-text-color { border-color: currentColor; } -.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active { - color: #d1e4dd !important; - border-color: #39414d; -} - +.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover { - color: #d1e4dd !important; - border-color: #39414d; + color: var(--button--color-text) !important; + border-color: var(--button--color-background); } .wp-block-button.is-style-squared { @@ -557,30 +648,24 @@ a:hover { } .wp-block-code code { - font-size: 1rem; + font-size: var(--global--font-size-xs); white-space: pre !important; overflow-x: auto; } .wp-block-code { - border-color: #28303d; + border-color: var(--global--color-border); border-radius: 0; border-style: solid; border-width: 0.1rem; - padding: 20px; + padding: var(--global--spacing-unit); color: currentColor; } -.wp-block-cover { - background-color: #000; - min-height: 450px; - margin-top: inherit; - margin-bottom: inherit; -} - +.wp-block-cover, .wp-block-cover-image { - background-color: #000; - min-height: 450px; + background-color: var(--cover--color-background); + min-height: var(--cover--height); margin-top: inherit; margin-bottom: inherit; } @@ -596,6 +681,23 @@ a:hover { margin-bottom: 0; } +.wp-block-cover > .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), +.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -618,111 +720,37 @@ a:hover { color: currentColor; } -.wp-block-cover .wp-block-cover__inner-container .has-link-color a { - color: #28303d; -} - -.wp-block-cover .wp-block-cover-image-text .has-link-color a { - color: #28303d; -} - -.wp-block-cover .wp-block-cover-text .has-link-color a { - color: #28303d; -} - -.wp-block-cover .block-editor-block-list__block .has-link-color a { - color: #28303d; -} - -.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a { - color: #28303d; -} - -.wp-block-cover-image .wp-block-cover-image-text .has-link-color a { - color: #28303d; -} - -.wp-block-cover-image .wp-block-cover-text .has-link-color a { - color: #28303d; -} - +.wp-block-cover .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover .wp-block-cover-image-text .has-link-color a, +.wp-block-cover .wp-block-cover-text .has-link-color a, +.wp-block-cover .block-editor-block-list__block .has-link-color a, +.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover-image .wp-block-cover-image-text .has-link-color a, +.wp-block-cover-image .wp-block-cover-text .has-link-color a, .wp-block-cover-image .block-editor-block-list__block .has-link-color a { - color: #28303d; -} - -.wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container { - color: #fff; -} - -.wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text { - color: #fff; -} - -.wp-block-cover:not([class*=background-color]) .wp-block-cover-text { - color: #fff; -} - -.wp-block-cover:not([class*=background-color]) .block-editor-block-list__block { - color: #fff; -} - -.wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container { - color: #fff; -} - -.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text { - color: #fff; -} - -.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text { - color: #fff; + color: var(--wp--style--color--link, var(--global--color-primary)); } +.wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container, +.wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text, +.wp-block-cover:not([class*=background-color]) .wp-block-cover-text, +.wp-block-cover:not([class*=background-color]) .block-editor-block-list__block, +.wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container, +.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text, +.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text, .wp-block-cover-image:not([class*=background-color]) .block-editor-block-list__block { - color: #fff; -} - -.wp-block-cover h2 { - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; - padding: 0; - max-width: inherit; - text-align: inherit; -} -@media only screen and (min-width: 652px) { - - .wp-block-cover h2 { - font-size: 3rem; - } -} -@media only screen and (min-width: 652px) { - - .wp-block-cover h2 { - font-size: 3rem; - } + color: var(--cover--color-foreground); } +.wp-block-cover h2, .wp-block-cover-image h2 { - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; + font-size: var(--heading--font-size-h2); + letter-spacing: var(--heading--letter-spacing-h2); + line-height: var(--heading--line-height-h2); padding: 0; max-width: inherit; text-align: inherit; } -@media only screen and (min-width: 652px) { - - .wp-block-cover-image h2 { - font-size: 3rem; - } -} -@media only screen and (min-width: 652px) { - - .wp-block-cover-image h2 { - font-size: 3rem; - } -} .wp-block-cover h2.has-text-align-left, .wp-block-cover-image h2.has-text-align-left { @@ -739,12 +767,9 @@ a:hover { text-align: right; } -.wp-block-cover.is-style-twentytwentyone-border { - border: 3px solid #28303d; -} - +.wp-block-cover.is-style-twentytwentyone-border, .wp-block-cover-image.is-style-twentytwentyone-border { - border: 3px solid #28303d; + border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-columns:not(.alignwide):not(.alignfull) { @@ -755,70 +780,44 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } + +.wp-block-columns > .wp-block-column > *:first-child { + margin-top: 0; +} + +.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2), +.wp-block-columns.is-selected > .wp-block-column > *:nth-last-child(2) { + margin-bottom: 0; +} @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { - margin-left: -50px; - margin-top: 63px; + margin-left: calc(-2 * var(--global--spacing-horizontal)); + margin-top: calc(2.5 * var(--global--spacing-horizontal)); z-index: 2; } - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) { - padding-left: 50px; + background-color: var(--global--color-background); + padding: var(--global--spacing-unit); } + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) { - padding-left: 50px; + padding-left: calc(2 * var(--global--spacing-horizontal)); } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n).is-vertically-aligned-center { @@ -826,39 +825,15 @@ a:hover { } } -.wp-block[data-align=full] .wp-block-columns p:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block[data-align=full] .wp-block-columns h1:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block[data-align=full] .wp-block-columns h2:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block[data-align=full] .wp-block-columns h3:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block[data-align=full] .wp-block-columns h4:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block[data-align=full] .wp-block-columns h5:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block[data-align=full] .wp-block-columns h6:not(.has-background) { - padding-left: 20px; - padding-right: 20px; +.wp-block[data-align=full] > .wp-block-columns p:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h1:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h2:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h3:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h4:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h5:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h6:not(.has-background) { + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); } .wp-block-file .wp-block-file__textlink { @@ -873,36 +848,20 @@ a:hover { } .wp-block-file .wp-block-file__button { - line-height: 1.5; - color: #d1e4dd; + line-height: var(--button--line-height); + color: var(--button--color-text); cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; + font-weight: var(--button--font-weight); + font-family: var(--button--font-family); + font-size: var(--button--font-size); + background-color: var(--button--color-background); + border-radius: var(--button--border-radius); + border: var(--button--border-width) solid var(--button--color-background); text-decoration: none; - padding: 15px 30px; + padding: var(--button--padding-vertical) var(--button--padding-horizontal); display: inline-block; } -.wp-block-file .wp-block-file__button:before, -.wp-block-file .wp-block-file__button:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.wp-block-file .wp-block-file__button:before { - margin-bottom: -calc(1em - 0); -} - -.wp-block-file .wp-block-file__button:after { - margin-top: -calc(1em - 0); -} - .wp-block-file .wp-block-file__button:focus { background: transparent; outline-offset: -6px; @@ -910,21 +869,21 @@ a:hover { } .is-dark-theme .wp-block-file .wp-block-file__button:focus { - color: #39414d; + color: var(--button--color-background); } .wp-block-file .wp-block-file__button:focus:not(.has-background) { - color: #39414d; + color: var(--button--color-text-hover); } .wp-block-file .wp-block-file__button:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; + background-color: var(--global--color-white-50); + border-color: var(--global--color-white-50); + color: var(--button--color-text-active); } .wp-block-file .wp-block-file__button:hover { - color: #39414d; + color: var(--button--color-text-hover); background: transparent; } @@ -933,7 +892,7 @@ a:hover { } .wp-block-gallery figcaption a { - color: #fff; + color: var(--global--color-white); } .wp-block-group { @@ -950,7 +909,7 @@ a:hover { } .wp-block-group.has-background { - padding: 30px; + padding: var(--global--spacing-vertical); } [data-align=full] .wp-block-group.has-background { @@ -959,17 +918,26 @@ a:hover { } .wp-block-group.is-style-twentytwentyone-border { - border: 3px solid #28303d; - padding: 30px; + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + padding: var(--global--spacing-vertical); } .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align=full] { - max-width: calc(100% + 60px); - width: calc(100% + 60px); - margin-left: -30px; + max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + margin-left: calc(-1 * var(--global--spacing-vertical)); } -.wp-block-group .wp-block-group__inner-container > *:last-child { +.wp-block-group > .wp-block-group__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2), +.wp-block-group.is-selected > .wp-block-group__inner-container > *:nth-last-child(2) { margin-bottom: 0; } @@ -978,463 +946,126 @@ a:hover { width: 100%; } -.wp-block-heading h1 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h1 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h1 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.wp-block-heading h2 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h2 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h2 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.wp-block-heading h3 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h3 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h3 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.wp-block-heading h4 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h4 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h4 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.wp-block-heading h5 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h5 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h5 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.wp-block-heading h6 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h6 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - +.wp-block-heading h1, +h1, +.h1, +.wp-block-heading h2, +h2, +.h2, +.wp-block-heading h3, +h3, +.h3, +.wp-block-heading h4, +h4, +.h4, +.wp-block-heading h5, +h5, +.h5, +.wp-block-heading h6, +h6, .h6 { clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.wp-block-heading h1 strong { - font-weight: 600; -} - -h1 strong { - font-weight: 600; -} - -.h1 strong { - font-weight: 600; -} - -.wp-block-heading h2 strong { - font-weight: 600; -} - -h2 strong { - font-weight: 600; -} - -.h2 strong { - font-weight: 600; -} - -.wp-block-heading h3 strong { - font-weight: 600; -} - -h3 strong { - font-weight: 600; -} - -.h3 strong { - font-weight: 600; -} - -.wp-block-heading h4 strong { - font-weight: 600; -} - -h4 strong { - font-weight: 600; -} - -.h4 strong { - font-weight: 600; -} - -.wp-block-heading h5 strong { - font-weight: 600; -} - -h5 strong { - font-weight: 600; -} - -.h5 strong { - font-weight: 600; -} - -.wp-block-heading h6 strong { - font-weight: 600; -} - -h6 strong { - font-weight: 600; + font-family: var(--heading--font-family); + font-weight: var(--heading--font-weight); } +.wp-block-heading h1 strong, +h1 strong, +.h1 strong, +.wp-block-heading h2 strong, +h2 strong, +.h2 strong, +.wp-block-heading h3 strong, +h3 strong, +.h3 strong, +.wp-block-heading h4 strong, +h4 strong, +.h4 strong, +.wp-block-heading h5 strong, +h5 strong, +.h5 strong, +.wp-block-heading h6 strong, +h6 strong, .h6 strong { - font-weight: 600; -} - -.wp-block-heading h1[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -h1[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.h1[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.wp-block-heading h2[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -h2[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.h2[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.wp-block-heading h3[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -h3[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.h3[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.wp-block-heading h4[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -h4[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.h4[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.wp-block-heading h5[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -h5[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.h5[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.wp-block-heading h6[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -h6[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; + font-weight: var(--heading--font-weight-strong); } +.wp-block-heading h1[style*="--wp--typography--line-height"], +h1[style*="--wp--typography--line-height"], +.h1[style*="--wp--typography--line-height"], +.wp-block-heading h2[style*="--wp--typography--line-height"], +h2[style*="--wp--typography--line-height"], +.h2[style*="--wp--typography--line-height"], +.wp-block-heading h3[style*="--wp--typography--line-height"], +h3[style*="--wp--typography--line-height"], +.h3[style*="--wp--typography--line-height"], +.wp-block-heading h4[style*="--wp--typography--line-height"], +h4[style*="--wp--typography--line-height"], +.h4[style*="--wp--typography--line-height"], +.wp-block-heading h5[style*="--wp--typography--line-height"], +h5[style*="--wp--typography--line-height"], +.h5[style*="--wp--typography--line-height"], +.wp-block-heading h6[style*="--wp--typography--line-height"], +h6[style*="--wp--typography--line-height"], .h6[style*="--wp--typography--line-height"] { - line-height: --global--line-height-body; -} - -.wp-block-heading h1 { - font-size: 4rem; - letter-spacing: normal; - line-height: 1.1; -} - -@media only screen and (min-width: 652px) { - - .wp-block-heading h1 { - font-size: 6rem; - } -} - -h1 { - font-size: 4rem; - letter-spacing: normal; - line-height: 1.1; -} - -@media only screen and (min-width: 652px) { - - h1 { - font-size: 6rem; - } + line-height: var(--wp--typography--line-height, --global--line-height-body); } +.wp-block-heading h1, +h1, .h1 { - font-size: 4rem; - letter-spacing: normal; - line-height: 1.1; -} - -@media only screen and (min-width: 652px) { - - .h1 { - font-size: 6rem; - } -} - -.wp-block-heading h2 { - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - .wp-block-heading h2 { - font-size: 3rem; - } -} - -@media only screen and (min-width: 652px) { - - .wp-block-heading h2 { - font-size: 3rem; - } -} - -h2 { - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - h2 { - font-size: 3rem; - } -} - -@media only screen and (min-width: 652px) { - - h2 { - font-size: 3rem; - } + font-size: var(--heading--font-size-h1); + letter-spacing: var(--heading--letter-spacing-h1); + line-height: var(--heading--line-height-h1); } +.wp-block-heading h2, +h2, .h2 { - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - .h2 { - font-size: 3rem; - } -} - -@media only screen and (min-width: 652px) { - - .h2 { - font-size: 3rem; - } -} - -.wp-block-heading h3 { - font-size: 2rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - .wp-block-heading h3 { - font-size: 2rem; - } -} - -h3 { - font-size: 2rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - h3 { - font-size: 2rem; - } + font-size: var(--heading--font-size-h2); + letter-spacing: var(--heading--letter-spacing-h2); + line-height: var(--heading--line-height-h2); } +.wp-block-heading h3, +h3, .h3 { - font-size: 2rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - .h3 { - font-size: 2rem; - } -} - -.wp-block-heading h4 { - font-size: 1.5rem; - font-weight: 600; - letter-spacing: normal; - line-height: 1.3; -} - -h4 { - font-size: 1.5rem; - font-weight: 600; - letter-spacing: normal; - line-height: 1.3; + font-size: var(--heading--font-size-h3); + letter-spacing: var(--heading--letter-spacing-h3); + line-height: var(--heading--line-height-h3); } +.wp-block-heading h4, +h4, .h4 { - font-size: 1.5rem; - font-weight: 600; - letter-spacing: normal; - line-height: 1.3; -} - -.wp-block-heading h5 { - font-size: 1.125rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; -} - -h5 { - font-size: 1.125rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; + font-size: var(--heading--font-size-h4); + font-weight: var(--heading--font-weight-strong); + letter-spacing: var(--heading--letter-spacing-h4); + line-height: var(--heading--line-height-h4); } +.wp-block-heading h5, +h5, .h5 { - font-size: 1.125rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; -} - -.wp-block-heading h6 { - font-size: 1rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; -} - -h6 { - font-size: 1rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; + font-size: var(--heading--font-size-h5); + font-weight: var(--heading--font-weight-strong); + letter-spacing: var(--heading--letter-spacing-h5); + line-height: var(--heading--line-height-h5); } +.wp-block-heading h6, +h6, .h6 { - font-size: 1rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; + font-size: var(--heading--font-size-h6); + font-weight: var(--heading--font-weight-strong); + letter-spacing: var(--heading--letter-spacing-h6); + line-height: var(--heading--line-height-h6); } [data-type="core/html"] textarea { - color: #28303d; + color: var(--global--color-dark-gray); border-radius: 0; - padding: 20px; + padding: var(--global--spacing-unit); } /* Center image block by default in the editor */ @@ -1447,16 +1078,13 @@ h6 { } /* Block Styles */ -.wp-block-image.is-style-twentytwentyone-border img { - border: 3px solid #28303d; +.wp-block-image.is-style-twentytwentyone-border img, +.wp-block-image.is-style-twentytwentyone-image-frame img { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-image.is-style-twentytwentyone-image-frame img { - border: 3px solid #28303d; -} - -.wp-block-image.is-style-twentytwentyone-image-frame img { - padding: 20px; + padding: var(--global--spacing-unit); } .wp-block-latest-comments { @@ -1468,8 +1096,8 @@ h6 { } .wp-block-latest-posts:not(.is-grid) > li { - margin-top: 50px; - margin-bottom: 50px; + margin-top: calc(1.666 * var(--global--spacing-vertical)); + margin-bottom: calc(1.666 * var(--global--spacing-vertical)); } .wp-block-latest-posts:not(.is-grid) > li:first-child { @@ -1486,7 +1114,7 @@ h6 { } .wp-block-latest-posts.is-grid > li { - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); } .wp-block-latest-posts.is-grid > li:last-child { @@ -1494,8 +1122,8 @@ h6 { } .wp-block-latest-posts > li > * { - margin-top: 10px; - margin-bottom: 10px; + margin-top: calc(0.333 * var(--global--spacing-vertical)); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-latest-posts > li > *:first-child { @@ -1508,29 +1136,23 @@ h6 { .wp-block-latest-posts > li > a { display: inline-block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 2rem; - font-weight: normal; - line-height: 1.3; - margin-bottom: 10px; -} -@media only screen and (min-width: 652px) { - - .wp-block-latest-posts > li > a { - font-size: 2rem; - } + font-family: var(--latest-posts--title-font-family); + font-size: var(--latest-posts--title-font-size); + font-weight: var(--heading--font-weight); + line-height: var(--global--line-height-heading); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-latest-posts .wp-block-latest-posts__post-author { - color: #28303d; - font-size: 1.25rem; - line-height: 1.7; + color: var(--global--color-primary); + font-size: var(--global--font-size-md); + line-height: var(--global--line-height-body); } .wp-block-latest-posts .wp-block-latest-posts__post-date { - color: #28303d; - font-size: 1rem; - line-height: 1.7; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); } [class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date, @@ -1538,37 +1160,25 @@ h6 { color: currentColor; } -.wp-block-latest-posts .wp-block-latest-posts__post-excerpt { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; - margin-top: 20px; -} - +.wp-block-latest-posts .wp-block-latest-posts__post-excerpt, .wp-block-latest-posts .wp-block-latest-posts__post-full-content { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; - margin-top: 20px; + font-family: var(--latest-posts--description-font-family); + font-size: var(--latest-posts--description-font-size); + line-height: var(--global--line-height-body); + margin-top: calc(0.666 * var(--global--spacing-vertical)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers { - border-top: 3px solid #28303d; - border-bottom: 3px solid #28303d; -} - -.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li { - padding-bottom: 30px; - border-bottom: 1px solid #28303d; - margin-top: 30px; - margin-bottom: 30px; + border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); + border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); } +.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li, .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li { - padding-bottom: 30px; - border-bottom: 1px solid #28303d; - margin-top: 30px; - margin-bottom: 30px; + padding-bottom: var(--global--spacing-vertical); + border-bottom: var(--separator--height) solid var(--global--color-border); + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child, @@ -1578,55 +1188,55 @@ h6 { } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid { - box-shadow: inset 0 -1px 0 0 #28303d; - border-bottom: 2px solid #28303d; + box-shadow: inset 0 -1px 0 0 var(--global--color-border); + border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li { margin: 0; - padding-top: 30px; - padding-right: 25px; + padding-top: var(--global--spacing-vertical); + padding-right: var(--global--spacing-horizontal); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child { - padding-bottom: 30px; + padding-bottom: var(--global--spacing-vertical); } @media screen and (min-width: 600px) { .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li { - width: 50%; + width: calc((100% / 2)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li { - width: 33%; + width: calc((100% / 3)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li { - width: 25%; + width: calc((100% / 4)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li { - width: 20%; + width: calc((100% / 5)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li { - width: 17%; + width: calc((100% / 6)); } } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li { - border: 3px solid #28303d; - padding: 30px 25px; + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child { - padding-bottom: 30px; - margin-bottom: 30px; + padding-bottom: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li { - margin-top: 25px; - margin-bottom: 25px; + margin-top: var(--global--spacing-horizontal); + margin-bottom: var(--global--spacing-horizontal); } .gallery-item { @@ -1672,16 +1282,11 @@ h6 { display: block; } -ul { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - margin: 30px 0; - padding-left: 50px; -} - +ul, ol { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - margin: 30px 0; - padding-left: 50px; + font-family: var(--list--font-family); + margin: var(--global--spacing-vertical) 0; + padding-left: calc(2 * var(--global--spacing-horizontal)); } ul.aligncenter, @@ -1704,7 +1309,7 @@ li > ol { } dt { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: var(--definition-term--font-family); font-weight: bold; } @@ -1713,47 +1318,49 @@ dt { margin-bottom: 0; } -.wp-block-media-text .wp-block-media-text__content { - padding: 25px; -} - -.wp-block-media-text .wp-block-media-text__content [data-block]:first-child { +.wp-block-media-text > .wp-block-media-text__content > *:first-child { margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content [data-block]:last-child { +.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) { margin-bottom: 0; } +.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2), +.wp-block-media-text.is-selected > .wp-block-media-text__content > *:nth-last-child(2) { + margin-bottom: 0; +} + +.wp-block-media-text .wp-block-media-text__content { + padding: var(--global--spacing-horizontal); +} + .wp-block-media-text.is-style-twentytwentyone-border { - border: 3px solid #28303d; + border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-navigation .wp-block-navigation__container { - background: #d1e4dd; + background: var(--global--color-background); padding: 0; } .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content { - padding: 13px; + padding: var(--primary-nav--padding); } .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - font-weight: normal; + font-family: var(--primary-nav--font-family); + font-size: var(--primary-nav--font-size); + font-weight: var(--primary-nav--font-weight); } .wp-block-navigation .has-child .wp-block-navigation__container { - box-shadow: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); -} - -.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover { - color: #28303d; + box-shadow: var(--global--elevation); } +.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus { - color: #28303d; + color: var(--primary-nav--color-link-hover); } .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link__content { @@ -1761,23 +1368,23 @@ dt { } p { - line-height: --global--line-height-body; + line-height: var(--wp--typography--line-height, --global--line-height-body); } p.has-background { - padding: 20px; + padding: var(--global--spacing-unit); } pre.wp-block-preformatted { overflow-x: auto; white-space: pre !important; - font-size: 1rem; + font-size: var(--global--font-size-xs); } .wp-block-pullquote { - padding: 40px 0; + padding: calc(2 * var(--global--spacing-unit)) 0; text-align: center; - border-width: 3px; + border-width: var(--pullquote--border-width); border-bottom-style: solid; border-top-style: solid; color: currentColor; @@ -1789,46 +1396,32 @@ pre.wp-block-preformatted { color: currentColor; content: "“"; display: block; + position: relative; + left: 0; font-size: 3rem; font-weight: 500; line-height: 1; } .wp-block-pullquote p { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 2rem; - font-style: normal; + font-family: var(--pullquote--font-family); + font-size: var(--pullquote--font-size); + font-style: var(--pullquote--font-style); font-weight: 700; - letter-spacing: normal; - line-height: 1.3; + letter-spacing: var(--pullquote--letter-spacing); + line-height: var(--pullquote--line-height); margin: 0; } -@media only screen and (min-width: 652px) { - - .wp-block-pullquote p { - font-size: 2rem; - } -} .wp-block-pullquote a { color: currentColor; } -.wp-block-pullquote .wp-block-pullquote__citation { - font-size: 1rem; - font-style: normal; - text-transform: none; -} - -.wp-block-pullquote cite { - font-size: 1rem; - font-style: normal; - text-transform: none; -} - +.wp-block-pullquote .wp-block-pullquote__citation, +.wp-block-pullquote cite, .wp-block-pullquote footer { - font-size: 1rem; - font-style: normal; + font-size: var(--global--font-size-xs); + font-style: var(--pullquote--font-style); text-transform: none; } @@ -1839,15 +1432,15 @@ pre.wp-block-preformatted { .wp-block-pullquote.is-style-solid-color { margin-left: auto; margin-right: auto; - padding: 50px; - border-width: 3px; + padding: calc(2.5 * var(--global--spacing-unit)); + border-width: var(--pullquote--border-width); border-style: solid; - border-color: #28303d; + border-color: var(--pullquote--border-color); } @media (min-width: 600px) { .wp-block-pullquote.is-style-solid-color { - padding: 100px; + padding: calc(5 * var(--global--spacing-unit)); } } @@ -1855,15 +1448,10 @@ pre.wp-block-preformatted { text-align: left; } -.wp-block-pullquote.is-style-solid-color.alignleft blockquote { - padding-left: 20px; - padding-right: 20px; - max-width: inherit; -} - +.wp-block-pullquote.is-style-solid-color.alignleft blockquote, .wp-block-pullquote.is-style-solid-color.alignright blockquote { - padding-left: 20px; - padding-right: 20px; + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); max-width: inherit; } @@ -1873,13 +1461,7 @@ pre.wp-block-preformatted { } .wp-block-pullquote.is-style-solid-color blockquote p { - font-size: 2rem; -} -@media only screen and (min-width: 652px) { - - .wp-block-pullquote.is-style-solid-color blockquote p { - font-size: 2rem; - } + font-size: var(--pullquote--font-size); } .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation, @@ -1889,149 +1471,119 @@ pre.wp-block-preformatted { } .wp-block[data-align=full] .wp-block-pullquote:not(.is-style-solid-color) blockquote { - padding: 0 40px; + padding: 0 calc(2 * var(--global--spacing-unit)); +} + +.wp-block[data-align=left] .wp-block-pullquote.is-style-solid-color, +.wp-block[data-align=right] .wp-block-pullquote.is-style-solid-color { + padding: var(--global--spacing-unit); } .wp-block-quote { position: relative; border-left: none; - margin: 30px auto 30px 25px; + margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal); } .wp-block-quote p { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - font-style: normal; - font-weight: 700; - line-height: 1.7; + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight); + line-height: var(--quote--line-height); } .wp-block-quote strong { - font-weight: bolder; + font-weight: var(--quote--font-weight-strong); } .wp-block-quote:before { content: "“"; - font-size: 1.25rem; - line-height: 1.7; - position: absolute; - left: -12px; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + left: calc(-0.5 * var(--global--spacing-horizontal)); } .wp-block-quote .wp-block-quote__citation { - color: #28303d; - font-size: 1rem; - font-style: normal; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + font-style: var(--quote--font-style-cite); } -.has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, -[style*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, +.has-background .wp-block-quote .wp-block-quote__citation, +[class*=background-color] .wp-block-quote .wp-block-quote__citation, +[style*=background-color] .wp-block-quote .wp-block-quote__citation, .wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation { color: currentColor; } .wp-block-quote.has-text-align-right { - margin: 30px 25px 30px auto; + margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; padding-right: 0; border-right: none; } .wp-block-quote.has-text-align-right:before { + display: none; +} + +.wp-block-quote.has-text-align-right p:before { content: "”"; - left: initial; - right: -12px; + font-size: var(--quote--font-size); + font-weight: normal; + line-height: var(--quote--line-height); + margin-right: 5px; } .wp-block-quote.has-text-align-center { - margin: 30px auto; + margin: var(--global--spacing-vertical) auto; } .wp-block-quote.has-text-align-center:before { display: none; } -.wp-block-quote.is-large { - padding-left: 0; - - /* Resetting margins to match _block-container.scss */ - margin-top: 30px; - margin-bottom: 30px; -} - +.wp-block-quote.is-large, .wp-block-quote.is-style-large { padding-left: 0; /* Resetting margins to match _block-container.scss */ - margin-top: 30px; - margin-bottom: 30px; -} - -.wp-block-quote.is-large p { - font-size: 2.25rem; - font-style: normal; - line-height: 1.35; -} -@media only screen and (min-width: 652px) { - - .wp-block-quote.is-large p { - font-size: 2.5rem; - } + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } +.wp-block-quote.is-large p, .wp-block-quote.is-style-large p { - font-size: 2.25rem; - font-style: normal; - line-height: 1.35; -} -@media only screen and (min-width: 652px) { - - .wp-block-quote.is-style-large p { - font-size: 2.5rem; - } -} - -.wp-block-quote.is-large:before { - font-size: 2.25rem; - line-height: 1.35; - left: -25px; -} -@media only screen and (min-width: 652px) { - - .wp-block-quote.is-large:before { - font-size: 2.5rem; - } + font-size: var(--quote--font-size-large); + font-style: var(--quote--font-style-large); + line-height: var(--quote--line-height-large); } +.wp-block-quote.is-large:before, .wp-block-quote.is-style-large:before { - font-size: 2.25rem; - line-height: 1.35; - left: -25px; -} -@media only screen and (min-width: 652px) { - - .wp-block-quote.is-style-large:before { - font-size: 2.5rem; - } -} - -.wp-block-quote.is-large.has-text-align-right:before { - left: initial; - right: -25px; + font-size: var(--quote--font-size-large); + line-height: var(--quote--line-height-large); + left: calc(-1 * var(--global--spacing-horizontal)); } +.wp-block-quote.is-large.has-text-align-right:before, .wp-block-quote.is-style-large.has-text-align-right:before { - left: initial; - right: -25px; + display: none; +} + +.wp-block-quote.is-large.has-text-align-right p:before, +.wp-block-quote.is-style-large.has-text-align-right p:before { + content: "”"; + font-size: var(--quote--font-size-large); + font-weight: normal; + line-height: var(--quote--line-height-large); + margin-right: 10px; } @media only screen and (max-width: 481px) { - .wp-block-quote.is-large { - padding-left: 25px; - } - + .wp-block-quote.is-large, .wp-block-quote.is-style-large { - padding-left: 25px; + padding-left: var(--global--spacing-horizontal); } .wp-block-quote.is-large:before, @@ -2039,14 +1591,10 @@ pre.wp-block-preformatted { left: 0; } - .wp-block-quote.is-large.has-text-align-right { - padding-left: 0; - padding-right: 25px; - } - + .wp-block-quote.is-large.has-text-align-right, .wp-block-quote.is-style-large.has-text-align-right { padding-left: 0; - padding-right: 25px; + padding-right: var(--global--spacing-horizontal); } .wp-block-quote.is-large.has-text-align-right:before, @@ -2057,7 +1605,7 @@ pre.wp-block-preformatted { @media only screen and (max-width: 481px) { .wp-block-quote { - padding-left: 13px; + padding-left: calc(0.5 * var(--global--spacing-horizontal)); } .wp-block-quote:before { @@ -2066,7 +1614,7 @@ pre.wp-block-preformatted { .wp-block-quote.has-text-align-right { padding-left: 0; - padding-right: 13px; + padding-right: calc(0.5 * var(--global--spacing-horizontal)); } .wp-block-quote.has-text-align-right:before { @@ -2098,8 +1646,8 @@ pre.wp-block-preformatted { } .wp-block-rss:not(.is-grid) > li { - margin-top: 50px; - margin-bottom: 50px; + margin-top: calc(1.666 * var(--global--spacing-vertical)); + margin-bottom: calc(1.666 * var(--global--spacing-vertical)); } .wp-block-rss:not(.is-grid) > li:first-child { @@ -2111,7 +1659,7 @@ pre.wp-block-preformatted { } .wp-block-rss.is-grid > li { - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); } .wp-block-rss.is-grid > li:last-child { @@ -2132,8 +1680,8 @@ pre.wp-block-preformatted { } .wp-block-rss > li > * { - margin-top: 10px; - margin-bottom: 10px; + margin-top: calc(0.333 * var(--global--spacing-vertical)); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-rss > li > *:first-child { @@ -2146,29 +1694,23 @@ pre.wp-block-preformatted { .wp-block-rss .wp-block-rss__item-title > a { display: inline-block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 2rem; - font-weight: normal; - line-height: 1.3; - margin-bottom: 10px; -} -@media only screen and (min-width: 652px) { - - .wp-block-rss .wp-block-rss__item-title > a { - font-size: 2rem; - } + font-family: var(--latest-posts--title-font-family); + font-size: var(--latest-posts--title-font-size); + font-weight: var(--heading--font-weight); + line-height: var(--global--line-height-heading); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-rss .wp-block-rss__item-author { - color: #28303d; - font-size: 1.25rem; - line-height: 1.7; + color: var(--global--color-primary); + font-size: var(--global--font-size-md); + line-height: var(--global--line-height-body); } .wp-block-rss .wp-block-rss__item-publish-date { - color: #28303d; - font-size: 1rem; - line-height: 1.7; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); } [class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date, @@ -2176,23 +1718,17 @@ pre.wp-block-preformatted { color: currentColor; } -.wp-block-rss .wp-block-rss__item-excerpt { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; - margin-top: 20px; -} - +.wp-block-rss .wp-block-rss__item-excerpt, .wp-block-rss .wp-block-rss__item-full-content { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; - margin-top: 20px; + font-family: var(--latest-posts--description-font-family); + font-size: var(--latest-posts--description-font-size); + line-height: var(--global--line-height-body); + margin-top: calc(0.666 * var(--global--spacing-vertical)); } .wp-block-rss.alignfull { - padding-left: 20px; - padding-right: 20px; + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); } .entry-content [class*=inner-container] .wp-block-rss.alignfull, @@ -2202,116 +1738,62 @@ pre.wp-block-preformatted { } .wp-block-search { - max-width: calc(100vw - 30px); -} - -@media only screen and (min-width: 482px) { - - .wp-block-search { - max-width: min(calc(100vw - 100px), 610px); - } -} - -@media only screen and (min-width: 822px) { - - .wp-block-search { - max-width: min(calc(100vw - 200px), 610px); - } + max-width: var(--responsive--aligndefault-width); } .wp-block-search .wp-block-search__label { - font-size: 1.125rem; - font-weight: 500; - margin-bottom: 10px; + font-size: var(--form--font-size); + font-weight: var(--form--label-weight); + margin-bottom: calc(var(--global--spacing-vertical) / 3); } .wp-block-search .wp-block-search__input { - border: 3px solid #39414d; - border-radius: 0; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); + font-family: var(--form--font-family); + font-size: var(--form--font-size); + line-height: var(--form--line-height); max-width: inherit; - margin-right: -3px; - padding: 10px; + margin-right: calc(-1 * var(--button--border-width)); + padding: var(--form--spacing-unit); } .is-dark-theme .wp-block-search .wp-block-search__input { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; + background: var(--global--color-white-90); } +.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__input, +.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__input, +.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__input, +.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__input, +.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__input, +.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__input, .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__input { - border-color: #28303d; -} - -.has-background.has-gray-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; -} - -.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; + border-color: var(--form--color-text); } +.has-background.has-gray-background-color .wp-block-search .wp-block-search__input, +.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input, .has-background.has-black-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; + border-color: var(--global--color-white); } .wp-block-search .wp-block-search__button { - line-height: 1.5; - color: #d1e4dd; + line-height: var(--button--line-height); + color: var(--button--color-text); cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; + font-weight: var(--button--font-weight); + font-family: var(--button--font-family); + font-size: var(--button--font-size); + background-color: var(--button--color-background); + border-radius: var(--button--border-radius); + border: var(--button--border-width) solid var(--button--color-background); text-decoration: none; - padding: 15px 30px; + padding: var(--button--padding-vertical) var(--button--padding-horizontal); box-shadow: none; margin-left: 0; background-color: transparent; - color: #39414d; -} - -.wp-block-search .wp-block-search__button:before, -.wp-block-search .wp-block-search__button:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.wp-block-search .wp-block-search__button:before { - margin-bottom: -calc(1em - 0); -} - -.wp-block-search .wp-block-search__button:after { - margin-top: -calc(1em - 0); + color: var(--button--color-text-hover); } .wp-block-search .wp-block-search__button:focus { @@ -2321,26 +1803,26 @@ pre.wp-block-preformatted { } .is-dark-theme .wp-block-search .wp-block-search__button:focus { - color: #39414d; + color: var(--button--color-background); } .wp-block-search .wp-block-search__button:focus:not(.has-background) { - color: #39414d; + color: var(--button--color-text-hover); } .wp-block-search .wp-block-search__button:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; + background-color: var(--global--color-white-50); + border-color: var(--global--color-white-50); + color: var(--button--color-text-active); } .wp-block-search .wp-block-search__button:hover { - color: #d1e4dd; - background-color: #39414d; + color: var(--button--color-text); + background-color: var(--button--color-background); } .wp-block-search .wp-block-search__button.has-icon { - padding: 30px 15px; + padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)); } .wp-block-search .wp-block-search__button.has-icon svg { @@ -2348,171 +1830,61 @@ pre.wp-block-preformatted { height: 40px; } -.has-background.has-gray-background-color .wp-block-search .wp-block-search__button { - color: #fff; - border-color: currentColor; -} - -.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button { - color: #fff; - border-color: currentColor; -} - +.has-background.has-gray-background-color .wp-block-search .wp-block-search__button, +.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button, .has-background.has-black-background-color .wp-block-search .wp-block-search__button { - color: #fff; + color: var(--global--color-white); border-color: currentColor; } -.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #fff; -} - -.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #fff; -} - +.has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover, +.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover, .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #fff; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover { - color: #d1e4dd; - background-color: #39414d; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover { - color: #d1e4dd; - background-color: #39414d; + color: var(--global--color-white); + background-color: var(--button--color-background); + border-color: var(--global--color-white); } +.is-dark-theme .has-background.has-gray-background-color .wp-block-search .wp-block-search__button:hover, +.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__button:hover, .is-dark-theme .has-background.has-black-background-color .wp-block-search .wp-block-search__button:hover { - color: #d1e4dd; - background-color: #39414d; -} - -.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; + color: var(--button--color-text); + background-color: var(--button--color-background); } +.has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover, +.has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover, +.has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover, +.has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover, +.has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover, +.has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover, .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button { - color: #28303d; - border-color: currentColor; + color: var(--global--color-white); + background-color: var(--form--border-color); + border-color: var(--form--border-color); } +.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button, +.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button, +.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button, +.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button, +.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button, +.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button, .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button { - color: #28303d; + color: var(--form--color-text); border-color: currentColor; } -.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - +.is-dark-theme .has-background.has-white-background-color .wp-block-search .wp-block-search__button:hover, +.is-dark-theme .has-background.has-green-background-color .wp-block-search .wp-block-search__button:hover, +.is-dark-theme .has-background.has-blue-background-color .wp-block-search .wp-block-search__button:hover, +.is-dark-theme .has-background.has-purple-background-color .wp-block-search .wp-block-search__button:hover, +.is-dark-theme .has-background.has-red-background-color .wp-block-search .wp-block-search__button:hover, +.is-dark-theme .has-background.has-orange-background-color .wp-block-search .wp-block-search__button:hover, .is-dark-theme .has-background.has-yellow-background-color .wp-block-search .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; + color: var(--global--color-white); + background-color: var(--button--color-text); + border-color: var(--button--color-text); } .wp-block-search.wp-block-search__button-inside .wp-block-search__input, @@ -2527,84 +1899,48 @@ pre.wp-block-preformatted { } .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button { - padding: 15px 30px; + padding: var(--button--padding-vertical) var(--button--padding-horizontal); } .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #d1e4dd; + color: var(--button--color-text); border-color: currentColor; } .is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #39414d; - border-color: currentColor; -} - -.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #39414d; - border-color: currentColor; + color: var(--global--color-white); + background-color: var(--button--color-text); + border-color: var(--button--color-text); } +.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button, +.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button, .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #39414d; + color: var(--button--color-text-hover); border-color: currentColor; } -.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - +.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover, +.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover, .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #39414d; - border-color: #39414d; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #d1e4dd; - border-color: currentColor; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #d1e4dd; - border-color: currentColor; + color: var(--global--color-white); + background-color: var(--button--color-background); + border-color: var(--button--color-background); } +.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button, +.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button, .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button { - color: #d1e4dd; + color: var(--button--color-text); border-color: currentColor; } -.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; -} - +.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover, +.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover, .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { - color: #fff; - background-color: #d1e4dd; - border-color: #d1e4dd; + color: var(--global--color-white); + background-color: var(--button--color-text); + border-color: var(--button--color-text); } .wp-block[data-align=center] > * { @@ -2615,64 +1951,23 @@ pre.wp-block-preformatted { justify-content: center; } -.wp-block-separator { - border-bottom: 1px solid #28303d; - clear: both; - opacity: 1; -} - +.wp-block-separator, hr { - border-bottom: 1px solid #28303d; + border-bottom: var(--separator--height) solid var(--separator--border-color); clear: both; opacity: 1; } -.wp-block-separator[style*="text-align:right"] { - border-right-color: #28303d; -} - -.wp-block-separator[style*="text-align: right"] { - border-right-color: #28303d; -} - -hr[style*="text-align:right"] { - border-right-color: #28303d; -} - +.wp-block-separator[style*="text-align:right"], +.wp-block-separator[style*="text-align: right"], +hr[style*="text-align:right"], hr[style*="text-align: right"] { - border-right-color: #28303d; -} - -.wp-block-separator:not(.is-style-dots) { - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - .wp-block-separator:not(.is-style-dots) { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - .wp-block-separator:not(.is-style-dots) { - max-width: min(calc(100vw - 200px), 610px); - } + border-right-color: var(--separator--border-color); } +.wp-block-separator:not(.is-style-dots), hr:not(.is-style-dots) { - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - hr:not(.is-style-dots) { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - hr:not(.is-style-dots) { - max-width: min(calc(100vw - 200px), 610px); - } + max-width: var(--responsive--aligndefault-width); } [data-align=full] > .wp-block-separator, @@ -2682,12 +1977,9 @@ hr:not(.is-style-dots) { max-width: inherit; } -.wp-block-separator.is-style-twentytwentyone-separator-thick { - border-bottom-width: 3px; -} - +.wp-block-separator.is-style-twentytwentyone-separator-thick, hr.is-style-twentytwentyone-separator-thick { - border-bottom-width: 3px; + border-bottom-width: calc(3 * var(--separator--height)); } .wp-block-separator.is-style-dots, @@ -2709,21 +2001,18 @@ hr.is-style-dots.has-text-color:before { color: currentColor !important; } -.wp-block-separator.is-style-dots:before { - color: #28303d; -} - +.wp-block-separator.is-style-dots:before, hr.is-style-dots:before { - color: #28303d; + color: var(--separator--border-color); } -.has-background:not(.has-background-background-color) .wp-block-separator, -[class*=background-color]:not(.has-background-background-color) .wp-block-separator, -[style*=background-color]:not(.has-background-background-color) .wp-block-separator, +.has-background .wp-block-separator, +[class*=background-color] .wp-block-separator, +[style*=background-color] .wp-block-separator, .wp-block-cover[style*=background-image] .wp-block-separator, -.has-background:not(.has-background-background-color) hr, -[class*=background-color]:not(.has-background-background-color) hr, -[style*=background-color]:not(.has-background-background-color) hr, +.has-background hr, +[class*=background-color] hr, +[style*=background-color] hr, .wp-block-cover[style*=background-image] hr { border-color: currentColor; } @@ -2734,75 +2023,39 @@ hr.is-style-dots:before { } .wp-block-social-links.is-style-twentytwentyone-social-icons-color button { - color: #28303d; + color: var(--global--color-primary); } .wp-block-social-links.is-style-twentytwentyone-social-icons-color .wp-social-link { background: none; } -table th { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - +table th, .wp-block-table th { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - -table td { - padding: 10px; -} - -table th { - padding: 10px; -} - -.wp-block-table td { - padding: 10px; + font-family: var(--heading--font-family); } +table td, +table th, +.wp-block-table td, .wp-block-table th { - padding: 10px; -} - -table.is-style-regular .has-background { - color: #28303d; -} - -table.is-style-stripes .has-background thead tr { - color: #28303d; -} - -table.is-style-stripes .has-background tfoot tr { - color: #28303d; -} - -table.is-style-stripes .has-background tbody tr:nth-child(even) { - color: #28303d; -} - -.wp-block-table.is-style-regular .has-background { - color: #28303d; -} - -.wp-block-table.is-style-stripes .has-background thead tr { - color: #28303d; -} - -.wp-block-table.is-style-stripes .has-background tfoot tr { - color: #28303d; + padding: calc(0.5 * var(--global--spacing-unit)); } +table.is-style-regular .has-background, +table.is-style-stripes .has-background thead tr, +table.is-style-stripes .has-background tfoot tr, +table.is-style-stripes .has-background tbody tr:nth-child(even), +.wp-block-table.is-style-regular .has-background, +.wp-block-table.is-style-stripes .has-background thead tr, +.wp-block-table.is-style-stripes .has-background tfoot tr, .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) { - color: #28303d; -} - -table.is-style-stripes { - border-color: #f0f0f0; + color: var(--table--has-background-text-color); } +table.is-style-stripes, .wp-block-table.is-style-stripes { - border-color: #f0f0f0; + border-color: var(--table--stripes-border-color); } table.is-style-stripes th, @@ -2812,12 +2065,9 @@ table.is-style-stripes td, border-width: 0; } -table.is-style-stripes tbody tr:nth-child(odd) { - background-color: #f0f0f0; -} - +table.is-style-stripes tbody tr:nth-child(odd), .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { - background-color: #f0f0f0; + background-color: var(--table--stripes-background-color); } table.wp-calendar-table td, @@ -2842,13 +2092,13 @@ table.wp-calendar-table tbody { table.wp-calendar-table caption { font-weight: bold; text-align: left; - margin-bottom: 20px; + margin-bottom: var(--global--spacing-unit); color: currentColor; } .wp-calendar-nav { text-align: left; - margin-top: 10px; + margin-top: calc(var(--global--spacing-unit) / 2); } .wp-calendar-nav svg { @@ -2873,142 +2123,50 @@ pre.wp-block-verse { color: currentColor; } -:root .is-extra-small-text { - font-size: 1rem; -} - +:root .is-extra-small-text, :root .has-extra-small-font-size { - font-size: 1rem; -} - -:root .is-small-text { - font-size: 1.125rem; + font-size: var(--global--font-size-xs); } +:root .is-small-text, :root .has-small-font-size { - font-size: 1.125rem; -} - -:root .is-regular-text { - font-size: 1.25rem; -} - -:root .has-regular-font-size { - font-size: 1.25rem; -} - -:root .is-normal-font-size { - font-size: 1.25rem; -} - -:root .has-normal-font-size { - font-size: 1.25rem; + font-size: var(--global--font-size-sm); } +:root .is-regular-text, +:root .has-regular-font-size, +:root .is-normal-font-size, +:root .has-normal-font-size, :root .has-medium-font-size { - font-size: 1.25rem; -} - -:root .is-large-text { - font-size: 1.5rem; - line-height: 1.3; + font-size: var(--global--font-size-base); } +:root .is-large-text, :root .has-large-font-size { - font-size: 1.5rem; - line-height: 1.3; -} - -:root .is-larger-text { - font-size: 2.5rem; - line-height: 1.3; -} -@media only screen and (min-width: 652px) { - - :root .is-larger-text { - font-size: 2.5rem; - } -} - -:root .has-larger-font-size { - font-size: 2.5rem; - line-height: 1.3; -} -@media only screen and (min-width: 652px) { - - :root .has-larger-font-size { - font-size: 2.5rem; - } -} - -:root .is-extra-large-text { - font-size: 2.5rem; - line-height: 1.3; -} -@media only screen and (min-width: 652px) { - - :root .is-extra-large-text { - font-size: 2.5rem; - } + font-size: var(--global--font-size-lg); + line-height: var(--global--line-height-heading); } +:root .is-larger-text, +:root .has-larger-font-size, +:root .is-extra-large-text, :root .has-extra-large-font-size { - font-size: 2.5rem; - line-height: 1.3; -} -@media only screen and (min-width: 652px) { - - :root .has-extra-large-font-size { - font-size: 2.5rem; - } -} - -:root .is-huge-text { - font-size: 6rem; - line-height: 1.3; - font-weight: 300; -} -@media only screen and (min-width: 652px) { - - :root .is-huge-text { - font-size: 6rem; - } + font-size: var(--global--font-size-xl); + line-height: var(--global--line-height-heading); } +:root .is-huge-text, :root .has-huge-font-size { - font-size: 6rem; - line-height: 1.3; - font-weight: 300; -} -@media only screen and (min-width: 652px) { - - :root .has-huge-font-size { - font-size: 6rem; - } -} - -:root .is-gigantic-text { - font-size: 9rem; - line-height: 1.3; - font-weight: 300; -} -@media only screen and (min-width: 652px) { - - :root .is-gigantic-text { - font-size: 9rem; - } + font-size: var(--global--font-size-xxl); + line-height: var(--global--line-height-heading); + font-weight: var(--heading--font-weight-page-title); } +:root .is-gigantic-text, :root .has-gigantic-font-size { - font-size: 9rem; - line-height: 1.3; - font-weight: 300; -} -@media only screen and (min-width: 652px) { - - :root .has-gigantic-font-size { - font-size: 9rem; - } + font-size: var(--global--font-size-xxxl); + line-height: var(--global--line-height-heading); + font-weight: var(--heading--font-weight-page-title); } /** @@ -3016,52 +2174,34 @@ pre.wp-block-verse { * - Needs a special styles */ .wp-block.editor-post-title__block { - border-bottom: 3px solid #28303d; - padding-bottom: 60px; - margin-bottom: 90px; - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - .wp-block.editor-post-title__block { - max-width: calc(100vw - 100px); - } -} -@media only screen and (min-width: 822px) { - - .wp-block.editor-post-title__block { - max-width: min(calc(100vw - 200px), 1240px); - } + border-bottom: 3px solid var(--global--color-border); + padding-bottom: calc(2 * var(--global--spacing-vertical)); + margin-bottom: calc(3 * var(--global--spacing-vertical)); + max-width: var(--responsive--alignwide-width); } .wp-block.editor-post-title__block .editor-post-title__input { - color: #39414d; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 4rem; - font-weight: 300; - line-height: 1.1; -} -@media only screen and (min-width: 652px) { - - .wp-block.editor-post-title__block .editor-post-title__input { - font-size: 6rem; - } + color: var(--global--color-secondary); + font-family: var(--heading--font-family); + font-size: var(--global--font-size-page-title); + font-weight: var(--heading--font-weight-page-title); + line-height: var(--heading--line-height-h1); } .wp-block.block-editor-default-block-appender > textarea { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; + font-family: var(--global--font-secondary); + font-size: var(--global--font-size-md); } .has-primary-color[class] { - color: #28303d; + color: var(--global--color-primary); } .has-secondary-color[class] { - color: #39414d; + color: var(--global--color-secondary); } -.has-background:not(.has-background-background-color) a:not(.wp-block-button__link), +.has-background a, .has-background p, .has-background h1, .has-background h2, @@ -3073,88 +2213,37 @@ pre.wp-block-verse { } .has-primary-background-color[class] { - background-color: #28303d; - color: #d1e4dd; + background-color: var(--global--color-primary); + color: var(--global--color-background); } .has-secondary-background-color[class] { - background-color: #39414d; - color: #d1e4dd; + background-color: var(--global--color-secondary); + color: var(--global--color-background); } .has-white-background-color[class] { - background-color: #fff; - color: #39414d; + background-color: var(--global--color-white); + color: var(--global--color-secondary); } .has-black-background-color[class] { - background-color: #000; - color: #28303d; + background-color: var(--global--color-black); + color: var(--global--color-primary); } -/** - * Spacing Overrides - */ [data-block] { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } -[data-block] [data-block]:first-child { - margin-top: 0; -} - -[data-block] [data-block]:nth-last-child(2) { - margin-bottom: 0; -} - -/* Block Alignments */ .wp-block { - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - .wp-block { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - .wp-block { - max-width: min(calc(100vw - 200px), 610px); - } -} - -.wp-block[data-align=wide] { - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - .wp-block[data-align=wide] { - max-width: calc(100vw - 100px); - } -} -@media only screen and (min-width: 822px) { - - .wp-block[data-align=wide] { - max-width: min(calc(100vw - 200px), 1240px); - } + max-width: var(--responsive--aligndefault-width); } +.wp-block[data-align=wide], .wp-block.alignwide { - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - .wp-block.alignwide { - max-width: calc(100vw - 100px); - } -} -@media only screen and (min-width: 822px) { - - .wp-block.alignwide { - max-width: min(calc(100vw - 200px), 1240px); - } + max-width: var(--responsive--alignwide-width); } .wp-block[data-align=full], @@ -3164,62 +2253,64 @@ pre.wp-block-verse { .alignleft { margin: 0; - margin-right: 25px; + margin-right: var(--global--spacing-horizontal); } .alignright { margin: 0; - margin-left: 25px; + margin-left: var(--global--spacing-horizontal); } .has-drop-cap:not(:focus)::first-letter { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; + font-family: var(--heading--font-family); + font-weight: var(--heading--font-weight); line-height: 0.66; text-transform: uppercase; font-style: normal; float: left; margin: 0.1em 0.1em 0 0; - font-size: 5rem; -} - -@media only screen and (min-width: 652px) { - - .has-drop-cap:not(:focus)::first-letter { - font-size: 7rem; - } + font-size: calc(1.2 * var(--heading--font-size-h1)); } @media only screen and (min-width: 482px) { .wp-block[data-align=left] > * { max-width: 290px; - margin-right: 25px; + margin-right: var(--global--spacing-horizontal); } .wp-block[data-align=right] > * { max-width: 290px; - margin-left: 25px; + margin-left: var(--global--spacing-horizontal); } } +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + border: none; +} + +.wp-block-freeform.block-library-rich-text__tinymce blockquote:before { + left: 5px; +} + html { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - line-height: 1.7; + font-family: var(--global--font-secondary); + line-height: var(--global--line-height-body); } body { - color: #28303d; - background-color: #d1e4dd; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; + --wp--typography--line-height: var(--global--line-height-body); + color: var(--global--color-primary); + background-color: var(--global--color-background); + font-family: var(--global--font-secondary); + font-size: var(--global--font-size-base); font-weight: normal; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .wp-block a { - color: #28303d; + color: var(--wp--style--color--link, var(--global--color-primary)); } .wp-block a:hover { @@ -3227,16 +2318,13 @@ body { } .wp-block a:focus { - outline: 2px solid #28303d; + outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); text-decoration: none; } -.has-background:not(.has-background-background-color) .has-link-color a { - color: #28303d; -} - -.has-background:not(.has-background-background-color).has-link-color a { - color: #28303d; +.has-background .has-link-color a, +.has-background.has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); } button, @@ -3245,46 +2333,46 @@ a { } .has-black-color[class] { - color: #000; + color: var(--global--color-black); } .has-gray-color[class] { - color: #39414d; + color: var(--global--color-gray); } .has-dark-gray-color[class] { - color: #28303d; + color: var(--global--color-dark-gray); } .has-green-color[class] { - color: #d1e4dd; + color: var(--global--color-green); } .has-blue-color[class] { - color: #d1dfe4; + color: var(--global--color-blue); } .has-purple-color[class] { - color: #d1d1e4; + color: var(--global--color-purple); } .has-red-color[class] { - color: #e4d1d1; + color: var(--global--color-red); } .has-orange-color[class] { - color: #e4dad1; + color: var(--global--color-orange); } .has-yellow-color[class] { - color: #eeeadd; + color: var(--global--color-yellow); } .has-white-color[class] { - color: #fff; + color: var(--global--color-white); } -.has-background:not(.has-background-background-color) a:not(.wp-block-button__link), +.has-background a, .has-background p, .has-background h1, .has-background h2, @@ -3296,113 +2384,89 @@ a { } .has-black-background-color[class] { - background-color: #000; + background-color: var(--global--color-black); } .has-gray-background-color[class] { - background-color: #39414d; + background-color: var(--global--color-gray); } .has-dark-gray-background-color[class] { - background-color: #28303d; + background-color: var(--global--color-dark-gray); } .has-green-background-color[class] { - background-color: #d1e4dd; + background-color: var(--global--color-green); } .has-blue-background-color[class] { - background-color: #d1dfe4; + background-color: var(--global--color-blue); } .has-purple-background-color[class] { - background-color: #d1d1e4; + background-color: var(--global--color-purple); } .has-red-background-color[class] { - background-color: #e4d1d1; + background-color: var(--global--color-red); } .has-orange-background-color[class] { - background-color: #e4dad1; + background-color: var(--global--color-orange); } .has-yellow-background-color[class] { - background-color: #eeeadd; + background-color: var(--global--color-yellow); } .has-white-background-color[class] { - background-color: #fff; -} - -:not(.has-text-color).has-black-background-color[class] { - color: #fff; -} - -:not(.has-text-color).has-gray-background-color[class] { - color: #fff; + background-color: var(--global--color-white); } +:not(.has-text-color).has-black-background-color[class], +:not(.has-text-color).has-gray-background-color[class], :not(.has-text-color).has-dark-gray-background-color[class] { - color: #fff; -} - -:not(.has-text-color).has-green-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-blue-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-purple-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-red-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-orange-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-yellow-background-color[class] { - color: #28303d; + color: var(--global--color-white); } +:not(.has-text-color).has-green-background-color[class], +:not(.has-text-color).has-blue-background-color[class], +:not(.has-text-color).has-purple-background-color[class], +:not(.has-text-color).has-red-background-color[class], +:not(.has-text-color).has-orange-background-color[class], +:not(.has-text-color).has-yellow-background-color[class], :not(.has-text-color).has-white-background-color[class] { - color: #28303d; + color: var(--global--color-dark-gray); } .has-purple-to-yellow-gradient-background { - background: linear-gradient(160deg, #d1d1e4, #eeeadd); + background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow)); } .has-yellow-to-purple-gradient-background { - background: linear-gradient(160deg, #eeeadd, #d1d1e4); + background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple)); } .has-green-to-yellow-gradient-background { - background: linear-gradient(160deg, #d1e4dd, #eeeadd); + background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow)); } .has-yellow-to-green-gradient-background { - background: linear-gradient(160deg, #eeeadd, #d1e4dd); + background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green)); } .has-red-to-yellow-gradient-background { - background: linear-gradient(160deg, #e4d1d1, #eeeadd); + background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow)); } .has-yellow-to-red-gradient-background { - background: linear-gradient(160deg, #eeeadd, #e4d1d1); + background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red)); } .has-purple-to-red-gradient-background { - background: linear-gradient(160deg, #d1d1e4, #e4d1d1); + background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red)); } .has-red-to-purple-gradient-background { - background: linear-gradient(160deg, #e4d1d1, #d1d1e4); + background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple)); } diff --git a/src/wp-content/themes/twentytwentyone/assets/css/ie.css b/src/wp-content/themes/twentytwentyone/assets/css/ie.css index 4122b98887..2a161c21f7 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -101,52 +101,244 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL. :root { /* Font Family */ + --global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); + --global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif); /* Font Size */ + --global--font-size-base: 1.25rem; + --global--font-size-xs: 1rem; + --global--font-size-sm: 1.125rem; + --global--font-size-md: 1.25rem; + --global--font-size-lg: 1.5rem; + --global--font-size-xl: 2.25rem; + --global--font-size-xxl: 4rem; + --global--font-size-xxxl: 5rem; + --global--font-size-page-title: var(--global--font-size-xxl); + --global--letter-spacing: normal; /* Line Height */ + --global--line-height-body: 1.7; + --global--line-height-heading: 1.3; + --global--line-height-page-title: 1.1; /* Headings */ + --heading--font-family: var(--global--font-primary); + --heading--font-size-h6: var(--global--font-size-xs); + --heading--font-size-h5: var(--global--font-size-sm); + --heading--font-size-h4: var(--global--font-size-lg); + --heading--font-size-h3: calc(1.25 * var(--global--font-size-lg)); + --heading--font-size-h2: var(--global--font-size-xl); + --heading--font-size-h1: var(--global--font-size-page-title); + --heading--letter-spacing-h6: 0.05em; + --heading--letter-spacing-h5: 0.05em; + --heading--letter-spacing-h4: var(--global--letter-spacing); + --heading--letter-spacing-h3: var(--global--letter-spacing); + --heading--letter-spacing-h2: var(--global--letter-spacing); + --heading--letter-spacing-h1: var(--global--letter-spacing); + --heading--line-height-h6: var(--global--line-height-heading); + --heading--line-height-h5: var(--global--line-height-heading); + --heading--line-height-h4: var(--global--line-height-heading); + --heading--line-height-h3: var(--global--line-height-heading); + --heading--line-height-h2: var(--global--line-height-heading); + --heading--line-height-h1: var(--global--line-height-page-title); + --heading--font-weight: normal; + --heading--font-weight-page-title: 300; + --heading--font-weight-strong: 600; /* Block: Latest posts */ + --latest-posts--title-font-family: var(--heading--font-family); + --latest-posts--title-font-size: var(--heading--font-size-h3); + --latest-posts--description-font-family: var(--global--font-secondary); + --latest-posts--description-font-size: var(--global--font-size-sm); + --list--font-family: var(--global--font-secondary); + --definition-term--font-family: var(--global--font-primary); /* Colors */ + --global--color-black: #000; + --global--color-dark-gray: #28303d; + --global--color-gray: #39414d; + --global--color-light-gray: #f0f0f0; + --global--color-green: #d1e4dd; + --global--color-blue: #d1dfe4; + --global--color-purple: #d1d1e4; + --global--color-red: #e4d1d1; + --global--color-orange: #e4dad1; + --global--color-yellow: #eeeadd; + --global--color-white: #fff; + --global--color-white-50: rgba(255, 255, 255, 0.5); + --global--color-white-90: rgba(255, 255, 255, 0.9); + --global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */ + --global--color-secondary: var(--global--color-gray); /* Headings */ + --global--color-primary-hover: var(--global--color-primary); + --global--color-background: var(--global--color-green); /* Mint, default body background */ + --global--color-border: var(--global--color-primary); /* Used for borders (separators) */ /* Spacing */ + --global--spacing-unit: 20px; + --global--spacing-measure: unset; + --global--spacing-horizontal: 25px; + --global--spacing-vertical: 30px; /* Elevation */ + --global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2); /* Forms */ + --form--font-family: var(--global--font-secondary); + --form--font-size: var(--global--font-size-sm); + --form--line-height: var(--global--line-height-body); + --form--color-text: var(--global--color-dark-gray); + --form--color-ranged: var(--global--color-secondary); + --form--label-weight: 500; + --form--border-color: var(--global--color-secondary); + --form--border-width: 3px; + --form--border-radius: 0; + --form--spacing-unit: calc(0.5 * var(--global--spacing-unit)); /* Cover block */ + --cover--height: calc(15 * var(--global--spacing-vertical)); + --cover--color-foreground: var(--global--color-white); + --cover--color-background: var(--global--color-black); /* Buttons */ + --button--color-text: var(--global--color-background); + --button--color-text-hover: var(--global--color-secondary); + --button--color-text-active: var(--global--color-secondary); + --button--color-background: var(--global--color-secondary); + --button--color-background-active: var(--global--color-background); + --button--font-family: var(--global--font-primary); + --button--font-size: var(--global--font-size-base); + --button--font-weight: 500; + --button--line-height: 1.5; + --button--border-width: 3px; + --button--border-radius: 0; + --button--padding-vertical: 15px; + --button--padding-horizontal: calc(2 * var(--button--padding-vertical)); /* entry */ + --entry-header--color: var(--global--color-primary); + --entry-header--color-link: currentColor; + --entry-header--color-hover: var(--global--color-primary-hover); + --entry-header--color-focus: var(--global--color-secondary); + --entry-header--font-size: var(--heading--font-size-h2); + --entry-content--font-family: var(--global--font-secondary); + --entry-author-bio--font-family: var(--heading--font-family); + --entry-author-bio--font-size: var(--heading--font-size-h4); /* Header */ + --branding--color-text: var(--global--color-primary); + --branding--color-link: var(--global--color-primary); + --branding--color-link-hover: var(--global--color-secondary); + --branding--title--font-family: var(--global--font-primary); + --branding--title--font-size: var(--global--font-size-lg); + --branding--title--font-size-mobile: var(--heading--font-size-h4); + --branding--title--font-weight: normal; + --branding--title--text-transform: uppercase; + --branding--description--font-family: var(--global--font-secondary); + --branding--description--font-size: var(--global--font-size-sm); + --branding--description--font-family: var(--global--font-secondary); + --branding--logo--max-width: 300px; + --branding--logo--max-height: 100px; + --branding--logo--max-width-mobile: 96px; + --branding--logo--max-height-mobile: 96px; /* Main navigation */ + --primary-nav--font-family: var(--global--font-secondary); + --primary-nav--font-family-mobile: var(--global--font-primary); + --primary-nav--font-size: var(--global--font-size-md); + --primary-nav--font-size-sub-menu: var(--global--font-size-xs); + --primary-nav--font-size-mobile: var(--global--font-size-sm); + --primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm); + --primary-nav--font-size-button: var(--global--font-size-xs); + --primary-nav--font-style: normal; + --primary-nav--font-style-sub-menu-mobile: normal; + --primary-nav--font-weight: normal; + --primary-nav--font-weight-button: 500; + --primary-nav--color-link: var(--global--color-primary); + --primary-nav--color-link-hover: var(--global--color-primary-hover); + --primary-nav--color-text: var(--global--color-primary); + --primary-nav--padding: calc(0.66 * var(--global--spacing-unit)); + --primary-nav--border-color: var(--global--color-primary); /* Pagination */ + --pagination--color-text: var(--global--color-primary); + --pagination--color-link-hover: var(--global--color-primary-hover); + --pagination--font-family: var(--global--font-secondary); + --pagination--font-size: var(--global--font-size-lg); + --pagination--font-weight: normal; + --pagination--font-weight-strong: 600; /* Footer */ + --footer--color-text: var(--global--color-primary); + --footer--color-link: var(--global--color-primary); + --footer--color-link-hover: var(--global--color-primary-hover); + --footer--font-family: var(--global--font-primary); + --footer--font-size: var(--global--font-size-sm); /* Block: Pull quote */ + --pullquote--font-family: var(--global--font-primary); + --pullquote--font-size: var(--heading--font-size-h3); + --pullquote--font-style: normal; + --pullquote--letter-spacing: var(--heading--letter-spacing-h4); + --pullquote--line-height: var(--global--line-height-heading); + --pullquote--border-width: 3px; + --pullquote--border-color: var(--global--color-primary); + --pullquote--color-foreground: var(--global--color-primary); + --pullquote--color-background: var(--global--color-background); + --quote--font-family: var(--global--font-secondary); + --quote--font-size: var(--global--font-size-md); + --quote--font-size-large: var(--global--font-size-xl); + --quote--font-style: normal; + --quote--font-weight: 700; + --quote--font-weight-strong: bolder; + --quote--font-style-large: normal; + --quote--font-style-cite: normal; + --quote--line-height: var(--global--line-height-body); + --quote--line-height-large: 1.35; + --separator--border-color: var(--global--color-border); + --separator--height: 1px; /* Block: Table */ + --table--stripes-border-color: var(--global--color-light-gray); + --table--stripes-background-color: var(--global--color-light-gray); + --table--has-background-text-color: var(--global--color-dark-gray); /* Widgets */ + --widget--line-height-list: 1.9; + --widget--line-height-title: 1.4; + --widget--font-weight-title: 700; + --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); /* Admin-bar height */ + --global--admin-bar--height: 0; +} + +.admin-bar { + --global--admin-bar--height: 32px; +} +@media only screen and (max-width: 782px) { + + .admin-bar { + --global--admin-bar--height: 46px; + } +} + +@media only screen and (min-width: 652px) { + + :root { + --global--font-size-xl: 2.5rem; + --global--font-size-xxl: 6rem; + --global--font-size-xxxl: 9rem; + --heading--font-size-h3: 2rem; + --heading--font-size-h2: 3rem; + } } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ @@ -539,372 +731,86 @@ template { /** * Root Media Query Variables */ +:root { + --responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6); + --responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal)); + --responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal)); + --responsive--alignfull-width: 100%; + --responsive--alignright-margin: var(--global--spacing-horizontal); + --responsive--alignleft-margin: var(--global--spacing-horizontal); +} + +@media only screen and (min-width: 482px) { + + :root { + --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), 610px); + --responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal)); + --responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); + --responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width))); + } +} +@media only screen and (min-width: 822px) { + + :root { + --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 610px); + --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), 1240px); + } +} /** * Extends */ -.post-thumbnail { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} -@media only screen and (min-width: 482px) { - - .post-thumbnail { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - .post-thumbnail { - max-width: min(calc(100vw - 200px), 610px); - } -} - -.entry-content .wp-audio-shortcode { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} -@media only screen and (min-width: 482px) { - - .entry-content .wp-audio-shortcode { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - .entry-content .wp-audio-shortcode { - max-width: min(calc(100vw - 200px), 610px); - } -} - -.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} -@media only screen and (min-width: 482px) { - - .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - .entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { - max-width: min(calc(100vw - 200px), 610px); - } -} - -*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} -@media only screen and (min-width: 482px) { - - *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - *[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) { - max-width: min(calc(100vw - 200px), 610px); - } -} - +.post-thumbnail, +.entry-content .wp-audio-shortcode, +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), +*[class*=inner-container] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce), .default-max-width { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} -@media only screen and (min-width: 482px) { - - .default-max-width { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - .default-max-width { - max-width: min(calc(100vw - 200px), 610px); - } -} - -.widget-area { - max-width: calc(100vw - 30px); + max-width: var(--responsive--aligndefault-width); margin-left: auto; margin-right: auto; } -@media only screen and (min-width: 482px) { - - .widget-area { - max-width: calc(100vw - 100px); - } -} - -@media only screen and (min-width: 822px) { - - .widget-area { - max-width: min(calc(100vw - 200px), 1240px); - } -} - -.pagination { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} - -@media only screen and (min-width: 482px) { - - .pagination { - max-width: calc(100vw - 100px); - } -} - -@media only screen and (min-width: 822px) { - - .pagination { - max-width: min(calc(100vw - 200px), 1240px); - } -} - -.comments-pagination { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} - -@media only screen and (min-width: 482px) { - - .comments-pagination { - max-width: calc(100vw - 100px); - } -} - -@media only screen and (min-width: 822px) { - - .comments-pagination { - max-width: min(calc(100vw - 200px), 1240px); - } -} - -.post-navigation { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} - -@media only screen and (min-width: 482px) { - - .post-navigation { - max-width: calc(100vw - 100px); - } -} - -@media only screen and (min-width: 822px) { - - .post-navigation { - max-width: min(calc(100vw - 200px), 1240px); - } -} - -.site-footer { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} - -@media only screen and (min-width: 482px) { - - .site-footer { - max-width: calc(100vw - 100px); - } -} - -@media only screen and (min-width: 822px) { - - .site-footer { - max-width: min(calc(100vw - 200px), 1240px); - } -} - -.site-header { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} - -@media only screen and (min-width: 482px) { - - .site-header { - max-width: calc(100vw - 100px); - } -} - -@media only screen and (min-width: 822px) { - - .site-header { - max-width: min(calc(100vw - 200px), 1240px); - } -} - -.alignwide { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} - -@media only screen and (min-width: 482px) { - - .alignwide { - max-width: calc(100vw - 100px); - } -} - -@media only screen and (min-width: 822px) { - - .alignwide { - max-width: min(calc(100vw - 200px), 1240px); - } -} - +.widget-area, +.pagination, +.comments-pagination, +.post-navigation, +.site-footer, +.site-header, +.alignwide, .wide-max-width { - max-width: calc(100vw - 30px); - margin-left: auto; - margin-right: auto; -} - -@media only screen and (min-width: 482px) { - - .wide-max-width { - max-width: calc(100vw - 100px); - } -} - -@media only screen and (min-width: 822px) { - - .wide-max-width { - max-width: min(calc(100vw - 200px), 1240px); - } -} - -.alignfull { - max-width: 100%; - width: 100%; - margin-left: auto; - margin-right: auto; -} - -.wp-block-group .wp-block-group__inner-container > *.alignfull { - max-width: 100%; - width: 100%; + max-width: var(--responsive--alignwide-width); margin-left: auto; margin-right: auto; } +.alignfull, +.wp-block-group .wp-block-group__inner-container > *.alignfull, .full-max-width { - max-width: 100%; - width: 100%; + max-width: var(--responsive--alignfull-width); + width: var(--responsive--alignfull-width); margin-left: auto; margin-right: auto; } @media only screen and (min-width: 482px) { - .alignfull { - max-width: 100%; - width: auto; - margin-left: auto; - margin-right: auto; - } - + .alignfull, .full-max-width { - max-width: 100%; + max-width: var(--responsive--alignfull-width); width: auto; margin-left: auto; margin-right: auto; } } -.entry-header .post-thumbnail { - margin-left: auto; - margin-right: auto; - width: calc(100vw - 30px); - max-width: 100%; -} -@media only screen and (min-width: 482px) { - - .entry-header .post-thumbnail { - width: calc(100vw - 100px); - } -} -@media only screen and (min-width: 822px) { - - .entry-header .post-thumbnail { - width: min(calc(100vw - 200px), 1240px); - } -} - -.singular .post-thumbnail { - margin-left: auto; - margin-right: auto; - width: calc(100vw - 30px); - max-width: 100%; -} -@media only screen and (min-width: 482px) { - - .singular .post-thumbnail { - width: calc(100vw - 100px); - } -} -@media only screen and (min-width: 822px) { - - .singular .post-thumbnail { - width: min(calc(100vw - 200px), 1240px); - } -} - -.alignfull [class*=inner-container] > .alignwide { - margin-left: auto; - margin-right: auto; - width: calc(100vw - 30px); - max-width: 100%; -} -@media only screen and (min-width: 482px) { - - .alignfull [class*=inner-container] > .alignwide { - width: calc(100vw - 100px); - } -} -@media only screen and (min-width: 822px) { - - .alignfull [class*=inner-container] > .alignwide { - width: min(calc(100vw - 200px), 1240px); - } -} - +.entry-header .post-thumbnail, +.singular .post-thumbnail, +.alignfull [class*=inner-container] > .alignwide, .alignwide [class*=inner-container] > .alignwide { margin-left: auto; margin-right: auto; - width: calc(100vw - 30px); - max-width: 100%; -} -@media only screen and (min-width: 482px) { - - .alignwide [class*=inner-container] > .alignwide { - width: calc(100vw - 100px); - } -} -@media only screen and (min-width: 822px) { - - .alignwide [class*=inner-container] > .alignwide { - width: min(calc(100vw - 200px), 1240px); - } + width: var(--responsive--alignwide-width); + max-width: var(--responsive--alignfull-width); } @media only screen and (min-width: 482px) { @@ -912,28 +818,10 @@ template { .entry-content > .alignleft { /*rtl:ignore*/ - margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); + margin-left: var(--responsive--alignleft-margin); /*rtl:ignore*/ - margin-right: 25px; - } - @media only screen and (min-width: 482px) { - - .entry-content > .alignleft { - margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); - } - } - @media only screen and (min-width: 482px) { - - .entry-content > .alignleft { - margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); - } - } - @media only screen and (min-width: 822px) { - - .entry-content > .alignleft { - margin-left: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); - } + margin-right: var(--global--spacing-horizontal); } } @media only screen and (min-width: 482px) { @@ -941,28 +829,10 @@ template { .entry-content > .alignright { /*rtl:ignore*/ - margin-left: 25px; + margin-left: var(--global--spacing-horizontal); /*rtl:ignore*/ - margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); - } - @media only screen and (min-width: 482px) { - - .entry-content > .alignright { - margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); - } - } - @media only screen and (min-width: 482px) { - - .entry-content > .alignright { - margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); - } - } - @media only screen and (min-width: 822px) { - - .entry-content > .alignright { - margin-right: calc(50vw - min(calc(100vw - 4 * 25px), 610px) *1); - } + margin-right: var(--responsive--alignright-margin); } } @@ -979,42 +849,24 @@ template { * Top Level Wrappers (header, main, footer) * - Set vertical padding and horizontal margins */ -.site-header { - padding-top: 30px; - padding-bottom: 30px; - margin-left: auto; - margin-right: auto; -} - -.site-main { - padding-top: 30px; - padding-bottom: 30px; - margin-left: auto; - margin-right: auto; -} - -.widget-area { - padding-top: 30px; - padding-bottom: 30px; - margin-left: auto; - margin-right: auto; -} - +.site-header, +.site-main, +.widget-area, .site-footer { - padding-top: 30px; - padding-bottom: 30px; + padding-top: var(--global--spacing-vertical); + padding-bottom: var(--global--spacing-vertical); margin-left: auto; margin-right: auto; } .site-header { - padding-top: 23px; - padding-bottom: 60px; + padding-top: calc(0.75 * var(--global--spacing-vertical)); + padding-bottom: calc(2 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .site-header { - padding-bottom: 90px; + padding-bottom: calc(3 * var(--global--spacing-vertical)); } } @@ -1023,8 +875,8 @@ template { * - Add double vertical margins here for clearer heirarchy */ .site-main > * { - margin-top: 90px; - margin-bottom: 90px; + margin-top: calc(3 * var(--global--spacing-vertical)); + margin-bottom: calc(3 * var(--global--spacing-vertical)); } .site-main > *:first-child { @@ -1051,38 +903,14 @@ template { * Block & non-gutenberg content wrappers * - Set margins */ -.entry-header { - margin-top: 30px; - margin-right: auto; - margin-bottom: 30px; - margin-left: auto; -} - -.post-thumbnail { - margin-top: 30px; - margin-right: auto; - margin-bottom: 30px; - margin-left: auto; -} - -.entry-content { - margin-top: 30px; - margin-right: auto; - margin-bottom: 30px; - margin-left: auto; -} - -.entry-footer { - margin-top: 30px; - margin-right: auto; - margin-bottom: 30px; - margin-left: auto; -} - +.entry-header, +.post-thumbnail, +.entry-content, +.entry-footer, .author-bio { - margin-top: 30px; + margin-top: var(--global--spacing-vertical); margin-right: auto; - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); margin-left: auto; } @@ -1090,55 +918,23 @@ template { * Block & non-gutenberg content wrapper children * - Sets spacing-vertical margin logic */ -.site-main > article > * { - margin-top: 20px; - margin-bottom: 20px; -} - -.site-main > .not-found > * { - margin-top: 20px; - margin-bottom: 20px; -} - -.entry-content > * { - margin-top: 20px; - margin-bottom: 20px; -} - -[class*=inner-container] > * { - margin-top: 20px; - margin-bottom: 20px; -} - +.site-main > article > *, +.site-main > .not-found > *, +.entry-content > *, +[class*=inner-container] > *, .wp-block-template-part > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { - .site-main > article > * { - margin-top: 30px; - margin-bottom: 30px; - } - - .site-main > .not-found > * { - margin-top: 30px; - margin-bottom: 30px; - } - - .entry-content > * { - margin-top: 30px; - margin-bottom: 30px; - } - - [class*=inner-container] > * { - margin-top: 30px; - margin-bottom: 30px; - } - + .site-main > article > *, + .site-main > .not-found > *, + .entry-content > *, + [class*=inner-container] > *, .wp-block-template-part > * { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } } @@ -1158,25 +954,17 @@ template { margin-bottom: 0; } -.site-footer > * { - margin-top: 20px; - margin-bottom: 20px; -} - +.site-footer > *, .widget-area > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { - .site-footer > * { - margin-top: 30px; - margin-bottom: 30px; - } - + .site-footer > *, .widget-area > * { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } } @@ -1184,29 +972,13 @@ template { * Block & non-gutenberg content wrapper children * - Sets spacing-unit margins */ -.entry-header > * { - margin-top: 20px; - margin-bottom: 20px; -} - -.post-thumbnail > * { - margin-top: 20px; - margin-bottom: 20px; -} - -.page-content > * { - margin-top: 20px; - margin-bottom: 20px; -} - -.comment-content > * { - margin-top: 20px; - margin-bottom: 20px; -} - +.entry-header > *, +.post-thumbnail > *, +.page-content > *, +.comment-content > *, .widget > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: var(--global--spacing-unit); + margin-bottom: var(--global--spacing-unit); } .entry-header > *:first-child, @@ -1247,12 +1019,9 @@ template { margin-bottom: 0; } -.entry-content > *.alignfull + .alignleft { - margin-top: 30px; -} - +.entry-content > *.alignfull + .alignleft, .entry-content > *.alignfull + .alignright { - margin-top: 30px; + margin-top: var(--global--spacing-vertical); } /** @@ -1297,8 +1066,8 @@ html { /* Apply border-box across the entire page. */ box-sizing: border-box; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - line-height: 1.7; + font-family: var(--global--font-secondary); + line-height: var(--global--line-height-body); } /** @@ -1311,11 +1080,11 @@ html { } body { - font-size: 1.25rem; + font-size: var(--global--font-size-base); font-weight: normal; - color: #28303d; + color: var(--global--color-primary); text-align: left; - background-color: #d1e4dd; + background-color: var(--global--color-background); } button { @@ -1352,12 +1121,12 @@ button { blockquote { padding: 0; position: relative; - margin: 30px 0 30px 25px; + margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); } blockquote > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: var(--global--spacing-unit); + margin-bottom: var(--global--spacing-unit); } blockquote > *:first-child { @@ -1369,26 +1138,20 @@ blockquote > *:last-child { } blockquote p { - letter-spacing: normal; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - font-style: normal; - font-weight: 700; - line-height: 1.7; -} - -blockquote cite { - font-weight: normal; - color: #28303d; - font-size: 1rem; - letter-spacing: normal; + letter-spacing: var(--heading--letter-spacing-h4); + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight); + line-height: var(--quote--line-height); } +blockquote cite, blockquote footer { font-weight: normal; - color: #28303d; - font-size: 1rem; - letter-spacing: normal; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + letter-spacing: var(--global--letter-spacing); } blockquote.alignleft, @@ -1396,69 +1159,44 @@ blockquote.alignright { padding-left: inherit; } -blockquote.alignleft p { - font-size: 1.125rem; - max-width: inherit; - width: inherit; -} - +blockquote.alignleft p, blockquote.alignright p { - font-size: 1.125rem; + font-size: var(--heading--font-size-h5); max-width: inherit; width: inherit; } -blockquote.alignleft cite { - font-size: 1rem; - letter-spacing: normal; -} - -blockquote.alignleft footer { - font-size: 1rem; - letter-spacing: normal; -} - -blockquote.alignright cite { - font-size: 1rem; - letter-spacing: normal; -} - +blockquote.alignleft cite, +blockquote.alignleft footer, +blockquote.alignright cite, blockquote.alignright footer { - font-size: 1rem; - letter-spacing: normal; + font-size: var(--global--font-size-xs); + letter-spacing: var(--global--letter-spacing); } blockquote strong { - font-weight: bolder; + font-weight: var(--quote--font-weight-strong); } blockquote:before { content: "“"; - font-size: 1.25rem; - line-height: 1.7; -} - -blockquote .wp-block-quote__citation { - color: #28303d; - font-size: 1rem; - font-style: normal; -} - -blockquote cite { - color: #28303d; - font-size: 1rem; - font-style: normal; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + position: absolute; + left: calc(-0.5 * var(--global--spacing-horizontal)); } +blockquote .wp-block-quote__citation, +blockquote cite, blockquote footer { - color: #28303d; - font-size: 1rem; - font-style: normal; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + font-style: var(--quote--font-style-cite); } @media only screen and (max-width: 481px) { blockquote { - padding-left: 13px; + padding-left: calc(0.5 * var(--global--spacing-horizontal)); } blockquote:before { @@ -1466,229 +1204,47 @@ blockquote footer { } } -input[type=text] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=email] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=url] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=password] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=search] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=number] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=tel] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=date] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=month] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=week] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=time] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=datetime] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=datetime-local] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - -input[type=color] { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; - margin: 0 2px; -} - +input[type=text], +input[type=email], +input[type=url], +input[type=password], +input[type=search], +input[type=number], +input[type=tel], +input[type=date], +input[type=month], +input[type=week], +input[type=time], +input[type=datetime], +input[type=datetime-local], +input[type=color], .site textarea { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; - padding: 10px; + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); + color: var(--form--color-text); + line-height: var(--global--line-height-body); + padding: var(--form--spacing-unit); margin: 0 2px; } -input[type=text]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=email]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=url]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=password]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=search]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=number]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=tel]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=date]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=month]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=week]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=time]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=datetime]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=datetime-local]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - -input[type=color]:focus { - color: #28303d; - outline-offset: 2px; - outline: 2px dotted #39414d; -} - +input[type=text]:focus, +input[type=email]:focus, +input[type=url]:focus, +input[type=password]:focus, +input[type=search]:focus, +input[type=number]:focus, +input[type=tel]:focus, +input[type=date]:focus, +input[type=month]:focus, +input[type=week]:focus, +input[type=time]:focus, +input[type=datetime]:focus, +input[type=datetime-local]:focus, +input[type=color]:focus, .site textarea:focus { - color: #28303d; + color: var(--form--color-text); outline-offset: 2px; - outline: 2px dotted #39414d; + outline: 2px dotted var(--form--border-color); } input[type=text]:disabled, @@ -1709,64 +1265,22 @@ input[type=color]:disabled, opacity: 0.7; } -.is-dark-theme input[type=text] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=email] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=url] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=password] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=search] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=number] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=tel] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=date] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=month] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=week] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=time] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=datetime] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=datetime-local] { - background: rgba(255, 255, 255, 0.9); -} - -.is-dark-theme input[type=color] { - background: rgba(255, 255, 255, 0.9); -} - +.is-dark-theme input[type=text], +.is-dark-theme input[type=email], +.is-dark-theme input[type=url], +.is-dark-theme input[type=password], +.is-dark-theme input[type=search], +.is-dark-theme input[type=number], +.is-dark-theme input[type=tel], +.is-dark-theme input[type=date], +.is-dark-theme input[type=month], +.is-dark-theme input[type=week], +.is-dark-theme input[type=time], +.is-dark-theme input[type=datetime], +.is-dark-theme input[type=datetime-local], +.is-dark-theme input[type=color], .is-dark-theme .site textarea { - background: rgba(255, 255, 255, 0.9); + background: var(--global--color-white-90); } input[type=search]:focus { @@ -1774,12 +1288,12 @@ input[type=search]:focus { } .is-dark-theme input[type=search]:focus { - outline-color: #d1e4dd; + outline-color: var(--global--color-background); } input[type=color] { - padding: 5px; - height: 40px; + padding: calc(var(--form--spacing-unit) / 2); + height: calc(4 * var(--form--spacing-unit)); } input[type=email], @@ -1790,25 +1304,25 @@ input[type=url] { } select { - border: 3px solid #39414d; - color: #28303d; + border: var(--form--border-width) solid var(--form--border-color); + color: var(--form--color-text); -moz-appearance: none; -webkit-appearance: none; appearance: none; - line-height: 1.7; - padding: 10px 30px 10px 10px; - background: #fff url("data:image/svg+xml;utf8,") no-repeat; - background-position: right 10px top 60%; + line-height: var(--global--line-height-body); + padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit); + background: var(--global--color-white) url("data:image/svg+xml;utf8,") no-repeat; + background-position: right var(--form--spacing-unit) top 60%; } select:focus { outline-offset: 2px; - outline: 2px dotted #39414d; + outline: 2px dotted var(--form--border-color); } .is-dark-theme select { - background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml;utf8,") no-repeat; - background-position: right 10px top 60%; + background: var(--global--color-white-90) url("data:image/svg+xml;utf8,") no-repeat; + background-position: right var(--form--spacing-unit) top 60%; } textarea { @@ -1816,9 +1330,9 @@ textarea { } label { - font-size: 1.125rem; - font-weight: 500; - margin-bottom: 10px; + font-size: var(--form--font-size); + font-weight: var(--form--label-weight); + margin-bottom: calc(var(--global--spacing-vertical) / 3); } /** @@ -1828,24 +1342,15 @@ License: MIT. */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { - input[type=checkbox] { - -webkit-appearance: none; - -moz-appearance: none; - position: relative; - width: 25px; - height: 25px; - border: 3px solid #39414d; - background: #fff; - } - + input[type=checkbox], input[type=radio] { -webkit-appearance: none; -moz-appearance: none; position: relative; width: 25px; height: 25px; - border: 3px solid #39414d; - background: #fff; + border: var(--form--border-width) solid var(--form--border-color); + background: var(--global--color-white); } input[type=checkbox]:disabled, @@ -1853,17 +1358,14 @@ License: MIT. opacity: 0.7; } - .is-dark-theme input[type=checkbox] { - background: rgba(255, 255, 255, 0.9); - } - + .is-dark-theme input[type=checkbox], .is-dark-theme input[type=radio] { - background: rgba(255, 255, 255, 0.9); + background: var(--global--color-white-90); } input[type=checkbox]:focus { outline-offset: 2px; - outline: 2px dotted #39414d; + outline: 2px dotted var(--form--border-color); } input[type=checkbox]:after { @@ -1875,14 +1377,14 @@ License: MIT. position: absolute; width: 7px; height: 13px; - border: 3px solid #28303d; + border: 3px solid var(--form--color-text); border-top: 0; border-left: 0; transform: rotate(30deg); } input[type=checkbox]:checked { - color: #28303d; + color: var(--form--color-text); } input[type=checkbox]:checked:after { @@ -1895,7 +1397,7 @@ License: MIT. input[type=radio]:focus { outline-offset: 2px; - outline: 2px dotted #39414d; + outline: 2px dotted var(--form--border-color); } input[type=radio]:after { @@ -1908,11 +1410,11 @@ License: MIT. width: 11px; height: 11px; border-radius: 50%; - background: #28303d; + background: var(--form--color-text); } input[type=radio]:checked { - border: 4px solid #39414d; + border: 4px solid var(--form--border-color); } input[type=radio]:checked:after { @@ -1921,21 +1423,15 @@ License: MIT. input[type=radio]:checked:focus { outline-offset: 4px; - outline: 2px dotted #39414d; + outline: 2px dotted var(--form--border-color); } } -input[type=checkbox] + label { - display: inline-block; - padding-left: 10px; - font-size: 1rem; - vertical-align: top; -} - +input[type=checkbox] + label, input[type=radio] + label { display: inline-block; padding-left: 10px; - font-size: 1rem; + font-size: var(--global--font-size-xs); vertical-align: top; } @@ -1952,7 +1448,7 @@ input[type=radio] + label { /* Specific width is required for Firefox. */ height: 6px; - background: #39414d; + background: var(--form--color-ranged); border-radius: 6px; outline-offset: 10px; } @@ -1963,21 +1459,22 @@ input[type=radio] + label { input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; - border: 3px solid #39414d; - height: 25px; - width: 25px; + border: 3px solid var(--form--color-ranged); + height: 44px; + width: 44px; border-radius: 50%; - background: #d1e4dd; + background: var(--global--color-background); cursor: pointer; } input[type=range]::-moz-range-thumb { - border: 3px solid #39414d; - height: 25px; - width: 25px; + border: 3px solid var(--form--color-ranged); + height: 44px; + width: 44px; border-radius: 50%; - background: #d1e4dd; + background: var(--global--color-background); cursor: pointer; + box-sizing: border-box; } } @@ -1986,39 +1483,39 @@ input[type=range]::-ms-track { height: 6px; border-radius: 6px; border-width: 19px 0; - border-color: #d1e4dd; + border-color: var(--global--color-background); background: transparent; color: transparent; cursor: pointer; } input[type=range]::-ms-fill-upper { - background: #39414d; + background: var(--form--color-ranged); border-radius: 6px; } input[type=range]::-ms-fill-lower { - background: #39414d; + background: var(--form--color-ranged); border-radius: 6px; } input[type=range]::-ms-thumb { - border: 3px solid #39414d; - height: 25px; - width: 25px; + border: 3px solid var(--form--color-ranged); + height: 44px; + width: 44px; border-radius: 50%; - background: #d1e4dd; + background: var(--global--color-background); cursor: pointer; } fieldset { display: grid; - border-color: #39414d; - padding: 25px; + border-color: var(--global--color-secondary); + padding: var(--global--spacing-horizontal); } fieldset legend { - font-size: 1.5rem; + font-size: var(--global--font-size-lg); } fieldset input[type=submit] { @@ -2026,7 +1523,7 @@ fieldset input[type=submit] { } fieldset input:not([type=submit]) { - margin-bottom: 20px; + margin-bottom: var(--global--spacing-unit); } fieldset input[type=radio], @@ -2034,16 +1531,11 @@ fieldset input[type=checkbox] { margin-bottom: 0; } -fieldset input[type=radio] + label { - font-size: 1.125rem; - padding-left: 0; - margin-bottom: 20px; -} - +fieldset input[type=radio] + label, fieldset input[type=checkbox] + label { - font-size: 1.125rem; + font-size: var(--form--font-size); padding-left: 0; - margin-bottom: 20px; + margin-bottom: var(--global--spacing-unit); } ::-moz-placeholder { @@ -2051,7 +1543,7 @@ fieldset input[type=checkbox] + label { } .post-password-message { - font-size: 1.5rem; + font-size: var(--global--font-size-lg); } .post-password-form { @@ -2066,17 +1558,17 @@ fieldset input[type=checkbox] + label { .post-password-form input[type=password] { flex-grow: 1; - margin-top: 10px; - margin-right: 17px; + margin-top: calc(var(--global--spacing-vertical) / 3); + margin-right: calc(0.66 * var(--global--spacing-horizontal)); } .post-password-form__submit { - margin-top: 10px; + margin-top: calc(var(--global--spacing-vertical) / 3); } @media only screen and (min-width: 592px) { .post-password-form__submit { - margin-left: 10px; + margin-left: calc(0.4 * var(--global--spacing-horizontal)); } } @@ -2100,30 +1592,15 @@ video { } /* Media captions */ -figcaption { +figcaption, +.wp-caption, +.wp-caption-text, +.wp-block-embed figcaption { color: currentColor; - font-size: 1rem; - line-height: 1.7; - margin-top: 10px; - margin-bottom: 20px; - text-align: center; -} - -.wp-caption { - color: currentColor; - font-size: 1rem; - line-height: 1.7; - margin-top: 10px; - margin-bottom: 20px; - text-align: center; -} - -.wp-caption-text { - color: currentColor; - font-size: 1rem; - line-height: 1.7; - margin-top: 10px; - margin-bottom: 20px; + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); + margin-top: calc(0.5 * var(--global--spacing-unit)); + margin-bottom: var(--global--spacing-unit); text-align: center; } @@ -2132,7 +1609,9 @@ figcaption { .alignleft .wp-caption, .alignright .wp-caption, .alignleft .wp-caption-text, -.alignright .wp-caption-text { +.alignright .wp-caption-text, +.alignleft .wp-block-embed figcaption, +.alignright .wp-block-embed figcaption { margin-bottom: 0; } @@ -2171,7 +1650,7 @@ pre { */ a { cursor: pointer; - color: #28303d; + color: var(--wp--style--color--link, var(--global--color-primary)); text-underline-offset: 3px; text-decoration-skip-ink: all; } @@ -2181,187 +1660,75 @@ a:hover { text-decoration-skip-ink: none; } -.site a:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; + text-decoration: underline 1px dotted currentColor; + text-decoration-skip-ink: none; background: rgba(255, 255, 255, 0.9); } -.is-dark-theme .site a:focus { - color: #d1e4dd; +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { + color: var(--wp--style--color--link, var(--global--color-background)); } -.is-dark-theme .site a:focus .meta-nav { - color: #d1e4dd; -} - -.has-background-white .site a:focus { +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: rgba(0, 0, 0, 0.9); - color: #fff; + color: var(--wp--style--color--link, var(--global--color-white)); } -.has-background-white .site a:focus .meta-nav { - color: #fff; +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { + color: var(--wp--style--color--link, var(--global--color-white)); } -.site a:focus.skip-link { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } -.site a:focus.skip-link:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { color: #21759b; background-color: #f1f1f1; } -.site a:focus img { - outline: 2px dotted #28303d; +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { + outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } -.has-background:not(.has-background-background-color) .has-link-color a { - color: #28303d; -} - -.has-background:not(.has-background-background-color).has-link-color a { - color: #28303d; +.has-background .has-link-color a, +.has-background.has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); } /* Category 05 is all about adjusting the default block styles to the given layout. I only added three blocks as examples. */ .wp-block-audio audio:focus { outline-offset: 5px; - outline: 2px solid #28303d; + outline: 2px solid var(--global--color-primary); } /** * Button */ -.site .button { - line-height: 1.5; - color: #d1e4dd; - cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; - padding: 15px 30px; -} - -input[type=submit] { - line-height: 1.5; - color: #d1e4dd; - cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; - padding: 15px 30px; -} - -input[type=reset] { - line-height: 1.5; - color: #d1e4dd; - cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; - padding: 15px 30px; -} - -.wp-block-search__button { - line-height: 1.5; - color: #d1e4dd; - cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; - text-decoration: none; - padding: 15px 30px; -} - +.site .button, +input[type=submit], +input[type=reset], +.wp-block-search__button, .wp-block-button .wp-block-button__link { - line-height: 1.5; - color: #d1e4dd; + line-height: var(--button--line-height); + color: var(--button--color-text); cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; + font-weight: var(--button--font-weight); + font-family: var(--button--font-family); + font-size: var(--button--font-size); + background-color: var(--button--color-background); + border-radius: var(--button--border-radius); + border: var(--button--border-width) solid var(--button--color-background); text-decoration: none; - padding: 15px 30px; -} - -.site .button:before, -.site .button:after, -input[type=submit]:before, -input[type=submit]:after, -input[type=reset]:before, -input[type=reset]:after, -.wp-block-search__button:before, -.wp-block-search__button:after, -.wp-block-button .wp-block-button__link:before, -.wp-block-button .wp-block-button__link:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.site .button:before { - margin-bottom: -calc(1em - 0); -} - -input[type=submit]:before { - margin-bottom: -calc(1em - 0); -} - -input[type=reset]:before { - margin-bottom: -calc(1em - 0); -} - -.wp-block-search__button:before { - margin-bottom: -calc(1em - 0); -} - -.wp-block-button .wp-block-button__link:before { - margin-bottom: -calc(1em - 0); -} - -.site .button:after { - margin-top: -calc(1em - 0); -} - -input[type=submit]:after { - margin-top: -calc(1em - 0); -} - -input[type=reset]:after { - margin-top: -calc(1em - 0); -} - -.wp-block-search__button:after { - margin-top: -calc(1em - 0); -} - -.wp-block-button .wp-block-button__link:after { - margin-top: -calc(1em - 0); + padding: var(--button--padding-vertical) var(--button--padding-horizontal); } .site .button:focus, @@ -2374,123 +1741,47 @@ input[type=reset]:focus, outline: 2px dotted currentColor; } -.is-dark-theme .site .button:focus { - color: #39414d; -} - -.is-dark-theme input[type=submit]:focus { - color: #39414d; -} - -.is-dark-theme input[type=reset]:focus { - color: #39414d; -} - -.is-dark-theme .wp-block-search__button:focus { - color: #39414d; -} - +.is-dark-theme .site .button:focus, +.is-dark-theme input[type=submit]:focus, +.is-dark-theme input[type=reset]:focus, +.is-dark-theme .wp-block-search__button:focus, .is-dark-theme .wp-block-button .wp-block-button__link:focus { - color: #39414d; -} - -.site .button:focus:not(.has-background) { - color: #39414d; -} - -input[type=submit]:focus:not(.has-background) { - color: #39414d; -} - -input[type=reset]:focus:not(.has-background) { - color: #39414d; -} - -.wp-block-search__button:focus:not(.has-background) { - color: #39414d; + color: var(--button--color-background); } +.site .button:focus:not(.has-background), +input[type=submit]:focus:not(.has-background), +input[type=reset]:focus:not(.has-background), +.wp-block-search__button:focus:not(.has-background), .wp-block-button .wp-block-button__link:focus:not(.has-background) { - color: #39414d; -} - -.site .button:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; -} - -input[type=submit]:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; -} - -input[type=reset]:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; -} - -.wp-block-search__button:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; + color: var(--button--color-text-hover); } +.site .button:disabled, +input[type=submit]:disabled, +input[type=reset]:disabled, +.wp-block-search__button:disabled, .wp-block-button .wp-block-button__link:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; -} - -.site .button:active { - color: #39414d; - background-color: #d1e4dd; -} - -input[type=submit]:active { - color: #39414d; - background-color: #d1e4dd; -} - -input[type=reset]:active { - color: #39414d; - background-color: #d1e4dd; -} - -.wp-block-search .wp-block-search__button:active { - color: #39414d; - background-color: #d1e4dd; + background-color: var(--global--color-white-50); + border-color: var(--global--color-white-50); + color: var(--button--color-text-active); } +.site .button:active, +input[type=submit]:active, +input[type=reset]:active, +.wp-block-search .wp-block-search__button:active, .wp-block-file .wp-block-file__button:active { - color: #39414d; - background-color: #d1e4dd; -} - -.site .button:hover { - color: #39414d; - background: transparent; -} - -input[type=submit]:hover { - color: #39414d; - background: transparent; -} - -input[type=reset]:hover { - color: #39414d; - background: transparent; -} - -.wp-block-search .wp-block-search__button:hover { - color: #39414d; - background: transparent; + color: var(--button--color-text-active); + background-color: var(--button--color-background-active); } +.site .button:hover, +input[type=submit]:hover, +input[type=reset]:hover, +.wp-block-search .wp-block-search__button:hover, .wp-block-file .wp-block-file__button:hover { - color: #39414d; + color: var(--button--color-text-hover); background: transparent; } @@ -2498,24 +1789,24 @@ input[type=reset]:hover { * Block Options */ .wp-block-button:not(.is-style-outline) .wp-block-button__link:active { - color: #39414d !important; + color: var(--button--color-text-active) !important; background: transparent !important; - border-color: #39414d; + border-color: var(--button--color-background); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { - color: #39414d !important; + color: var(--button--color-text-hover) !important; background: transparent !important; - border-color: #39414d; + border-color: var(--button--color-background); } .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus { - color: #d1e4dd !important; - background: #39414d !important; + color: var(--button--color-text) !important; + background: var(--button--color-background) !important; } .wp-block-button.is-style-outline .wp-block-button__link { - padding: 15px 30px; + padding: var(--button--padding-vertical) var(--button--padding-horizontal); } .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) { @@ -2524,40 +1815,28 @@ input[type=reset]:hover { .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) { background: transparent; - color: #39414d; - border-color: #39414d; + color: var(--button--color-background); + border-color: var(--button--color-background); } .wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) { color: currentColor; } -.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color) { - color: #fff; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color) { - color: #fff; -} - +.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-gray-background-color:not(.has-text-color), +.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-dark-gray-background-color:not(.has-text-color), .wp-block-button.is-style-outline .wp-block-button__link.has-background.has-black-background-color:not(.has-text-color) { - color: #fff; + color: var(--global--color-white); } .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background { - color: #28303d; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color { - color: #fff; -} - -.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color { - color: #fff; + color: var(--global--color-dark-gray); } +.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-gray-background-color, +.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-dark-gray-background-color, .is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background.has-black-background-color { - color: #fff; + color: var(--global--color-white); } .wp-block-button.is-style-outline .wp-block-button__link.has-text-color, @@ -2565,28 +1844,20 @@ input[type=reset]:hover { border-color: currentColor; } -.wp-block-button.is-style-outline .wp-block-button__link:active { - color: #d1e4dd !important; - background: #39414d !important; - border-color: #39414d; -} - +.wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:hover { - color: #d1e4dd !important; - background: #39414d !important; - border-color: #39414d; -} - -.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color { - border-color: #39414d; + color: var(--button--color-text) !important; + background: var(--button--color-background) !important; + border-color: var(--button--color-background); } +.wp-block-button.is-style-outline .wp-block-button__link:active.has-text-color, .wp-block-button.is-style-outline .wp-block-button__link:hover.has-text-color { - border-color: #39414d; + border-color: var(--button--color-background); } .wp-block-button.is-style-outline .wp-block-button__link:focus { - color: #39414d !important; + color: var(--button--color-background) !important; background: transparent !important; } @@ -2594,26 +1865,22 @@ input[type=reset]:hover { border-radius: 0; } -.is-style-outline .wp-block-button__link[style*=radius]:focus { - outline-offset: 2px; - outline: 2px dotted #39414d; -} - +.is-style-outline .wp-block-button__link[style*=radius]:focus, .wp-block-button a.wp-block-button__link[style*=radius]:focus { outline-offset: 2px; - outline: 2px dotted #39414d; + outline: 2px dotted var(--button--color-background); } .wp-block-code { - border-color: #28303d; + border-color: var(--global--color-border); border-radius: 0; border-style: solid; border-width: 0.1rem; - padding: 20px; + padding: var(--global--spacing-unit); } .wp-block-code code { - font-size: 1rem; + font-size: var(--global--font-size-xs); white-space: pre; overflow-x: auto; display: block; @@ -2624,14 +1891,14 @@ input[type=reset]:hover { } .wp-block-columns .wp-block-column > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: calc(0.66 * var(--global--spacing-vertical)); + margin-bottom: calc(0.66 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-columns .wp-block-column > * { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } } @@ -2648,12 +1915,12 @@ input[type=reset]:hover { } .wp-block-columns .wp-block-column:not(:last-child) { - margin-bottom: 20px; + margin-bottom: calc(0.66 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-columns .wp-block-column:not(:last-child) { - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); } } @media only screen and (min-width: 822px) { @@ -2669,67 +1936,28 @@ input[type=reset]:hover { @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { - margin-left: -50px; - margin-top: 63px; + margin-left: calc(-2 * var(--global--spacing-horizontal)); + margin-top: calc(2.5 * var(--global--spacing-horizontal)); z-index: 2; } - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > p:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h1:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h2:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h3:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h4:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h5:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > h6:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > pre:not(.has-background) { - background-color: #d1e4dd; - padding: 20px; - } - - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background) { - padding-left: 50px; + background-color: var(--global--color-background); + padding: var(--global--spacing-unit); } + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ul:not(.has-background), .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) > ol:not(.has-background) { - padding-left: 50px; + padding-left: calc(2 * var(--global--spacing-horizontal)); } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n).is-vertically-aligned-center { @@ -2737,57 +1965,21 @@ input[type=reset]:hover { } } -.wp-block-columns.alignfull .wp-block-column p:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block-columns.alignfull .wp-block-column h1:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block-columns.alignfull .wp-block-column h2:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block-columns.alignfull .wp-block-column h3:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block-columns.alignfull .wp-block-column h4:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block-columns.alignfull .wp-block-column h5:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - +.wp-block-columns.alignfull .wp-block-column p:not(.has-background), +.wp-block-columns.alignfull .wp-block-column h1:not(.has-background), +.wp-block-columns.alignfull .wp-block-column h2:not(.has-background), +.wp-block-columns.alignfull .wp-block-column h3:not(.has-background), +.wp-block-columns.alignfull .wp-block-column h4:not(.has-background), +.wp-block-columns.alignfull .wp-block-column h5:not(.has-background), .wp-block-columns.alignfull .wp-block-column h6:not(.has-background) { - padding-left: 20px; - padding-right: 20px; -} - -.wp-block-cover { - background-color: #000; - min-height: 450px; - margin-top: inherit; - margin-bottom: inherit; - - /* default & custom background-color */ - - /* Treating H2 separately to account for legacy /core styles */ - - /* Block Styles */ + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); } +.wp-block-cover, .wp-block-cover-image { - background-color: #000; - min-height: 450px; + background-color: var(--cover--color-background); + min-height: var(--cover--height); margin-top: inherit; margin-bottom: inherit; @@ -2809,140 +2001,53 @@ input[type=reset]:hover { margin-bottom: 0; } -.wp-block-cover .wp-block-cover__inner-container { - color: currentColor; - margin-top: 30px; - margin-bottom: 30px; -} - -.wp-block-cover .wp-block-cover-image-text { - color: currentColor; - margin-top: 30px; - margin-bottom: 30px; -} - -.wp-block-cover .wp-block-cover-text { - color: currentColor; - margin-top: 30px; - margin-bottom: 30px; -} - -.wp-block-cover-image .wp-block-cover__inner-container { - color: currentColor; - margin-top: 30px; - margin-bottom: 30px; -} - -.wp-block-cover-image .wp-block-cover-image-text { - color: currentColor; - margin-top: 30px; - margin-bottom: 30px; -} - +.wp-block-cover .wp-block-cover__inner-container, +.wp-block-cover .wp-block-cover-image-text, +.wp-block-cover .wp-block-cover-text, +.wp-block-cover-image .wp-block-cover__inner-container, +.wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover-image .wp-block-cover-text { color: currentColor; - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } -.wp-block-cover .wp-block-cover__inner-container a, -.wp-block-cover .wp-block-cover-image-text a, -.wp-block-cover .wp-block-cover-text a, -.wp-block-cover-image .wp-block-cover__inner-container a, -.wp-block-cover-image .wp-block-cover-image-text a, -.wp-block-cover-image .wp-block-cover-text a { +.wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover-image .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover-image .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover-image .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button) { color: currentColor; } -.wp-block-cover .wp-block-cover__inner-container .has-link-color a { - color: #28303d; -} - -.wp-block-cover .wp-block-cover-image-text .has-link-color a { - color: #28303d; -} - -.wp-block-cover .wp-block-cover-text .has-link-color a { - color: #28303d; -} - -.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a { - color: #28303d; -} - -.wp-block-cover-image .wp-block-cover-image-text .has-link-color a { - color: #28303d; -} - +.wp-block-cover .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover .wp-block-cover-image-text .has-link-color a, +.wp-block-cover .wp-block-cover-text .has-link-color a, +.wp-block-cover-image .wp-block-cover__inner-container .has-link-color a, +.wp-block-cover-image .wp-block-cover-image-text .has-link-color a, .wp-block-cover-image .wp-block-cover-text .has-link-color a { - color: #28303d; -} - -.wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container { - color: #fff; -} - -.wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text { - color: #fff; -} - -.wp-block-cover:not([class*=background-color]) .wp-block-cover-text { - color: #fff; -} - -.wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container { - color: #fff; -} - -.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text { - color: #fff; + color: var(--wp--style--color--link, var(--global--color-primary)); } +.wp-block-cover:not([class*=background-color]) .wp-block-cover__inner-container, +.wp-block-cover:not([class*=background-color]) .wp-block-cover-image-text, +.wp-block-cover:not([class*=background-color]) .wp-block-cover-text, +.wp-block-cover-image:not([class*=background-color]) .wp-block-cover__inner-container, +.wp-block-cover-image:not([class*=background-color]) .wp-block-cover-image-text, .wp-block-cover-image:not([class*=background-color]) .wp-block-cover-text { - color: #fff; -} - -.wp-block-cover h2 { - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; - max-width: inherit; - text-align: inherit; - padding: 0; -} -@media only screen and (min-width: 652px) { - - .wp-block-cover h2 { - font-size: 3rem; - } -} -@media only screen and (min-width: 652px) { - - .wp-block-cover h2 { - font-size: 3rem; - } + color: var(--cover--color-foreground); } +.wp-block-cover h2, .wp-block-cover-image h2 { - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; + font-size: var(--heading--font-size-h2); + letter-spacing: var(--heading--letter-spacing-h2); + line-height: var(--heading--line-height-h2); max-width: inherit; text-align: inherit; padding: 0; } -@media only screen and (min-width: 652px) { - - .wp-block-cover-image h2 { - font-size: 3rem; - } -} -@media only screen and (min-width: 652px) { - - .wp-block-cover-image h2 { - font-size: 3rem; - } -} .wp-block-cover h2.has-text-align-left, .wp-block-cover-image h2.has-text-align-left { @@ -2959,33 +2064,22 @@ input[type=reset]:hover { text-align: right; } -.wp-block-cover .wp-block-cover__inner-container { - width: calc(100% - 60px); -} - +.wp-block-cover .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover__inner-container { - width: calc(100% - 60px); -} - -.wp-block-cover .wp-block-cover__inner-container > * { - margin-top: 20px; - margin-bottom: 20px; + width: calc(100% - calc(2 * var(--global--spacing-vertical))); } +.wp-block-cover .wp-block-cover__inner-container > *, .wp-block-cover-image .wp-block-cover__inner-container > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { - .wp-block-cover .wp-block-cover__inner-container > * { - margin-top: 30px; - margin-bottom: 30px; - } - + .wp-block-cover .wp-block-cover__inner-container > *, .wp-block-cover-image .wp-block-cover__inner-container > * { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } } @@ -3006,35 +2100,14 @@ input[type=reset]:hover { margin-top: 0; } -.wp-block-cover.alignleft > * { - margin-top: 60px; - margin-bottom: 60px; - padding-left: 25px; - padding-right: 25px; - width: 100%; -} - -.wp-block-cover.alignright > * { - margin-top: 60px; - margin-bottom: 60px; - padding-left: 25px; - padding-right: 25px; - width: 100%; -} - -.wp-block-cover-image.alignleft > * { - margin-top: 60px; - margin-bottom: 60px; - padding-left: 25px; - padding-right: 25px; - width: 100%; -} - +.wp-block-cover.alignleft > *, +.wp-block-cover.alignright > *, +.wp-block-cover-image.alignleft > *, .wp-block-cover-image.alignright > * { - margin-top: 60px; - margin-bottom: 60px; - padding-left: 25px; - padding-right: 25px; + margin-top: calc(2 * var(--global--spacing-vertical)); + margin-bottom: calc(2 * var(--global--spacing-vertical)); + padding-left: var(--global--spacing-horizontal); + padding-right: var(--global--spacing-horizontal); width: 100%; } @@ -3045,68 +2118,41 @@ input[type=reset]:hover { justify-content: center; } -.wp-block-cover.is-style-twentytwentyone-border { - border: 3px solid #28303d; -} - +.wp-block-cover.is-style-twentytwentyone-border, .wp-block-cover-image.is-style-twentytwentyone-border { - border: 3px solid #28303d; -} - -.wp-block-file a.wp-block-file__button:active { - color: #39414d; - opacity: inherit; -} - -.wp-block-file a.wp-block-file__button:focus { - color: #39414d; - opacity: inherit; + border: calc(3 * var(--separator--height)) solid var(--global--color-border); } +.wp-block-file a.wp-block-file__button:active, +.wp-block-file a.wp-block-file__button:focus, .wp-block-file a.wp-block-file__button:hover { - color: #39414d; + color: var(--button--color-text-hover); opacity: inherit; } .wp-block-file a.wp-block-file__button:visited { - color: #d1e4dd; + color: var(--button--color-text); } .wp-block-file a.wp-block-file__button:visited:hover { - color: #39414d; + color: var(--button--color-text-hover); } .wp-block-file .wp-block-file__button { - line-height: 1.5; - color: #d1e4dd; + line-height: var(--button--line-height); + color: var(--button--color-text); cursor: pointer; - font-weight: 500; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - background-color: #39414d; - border-radius: 0; - border: 3px solid #39414d; + font-weight: var(--button--font-weight); + font-family: var(--button--font-family); + font-size: var(--button--font-size); + background-color: var(--button--color-background); + border-radius: var(--button--border-radius); + border: var(--button--border-width) solid var(--button--color-background); text-decoration: none; - padding: 15px 30px; + padding: var(--button--padding-vertical) var(--button--padding-horizontal); display: inline-block; } -.wp-block-file .wp-block-file__button:before, -.wp-block-file .wp-block-file__button:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.wp-block-file .wp-block-file__button:before { - margin-bottom: -calc(1em - 0); -} - -.wp-block-file .wp-block-file__button:after { - margin-top: -calc(1em - 0); -} - .wp-block-file .wp-block-file__button:focus { background: transparent; outline-offset: -6px; @@ -3114,60 +2160,44 @@ input[type=reset]:hover { } .is-dark-theme .wp-block-file .wp-block-file__button:focus { - color: #39414d; + color: var(--button--color-background); } .wp-block-file .wp-block-file__button:focus:not(.has-background) { - color: #39414d; + color: var(--button--color-text-hover); } .wp-block-file .wp-block-file__button:disabled { - background-color: rgba(255, 255, 255, 0.5); - border-color: rgba(255, 255, 255, 0.5); - color: #39414d; + background-color: var(--global--color-white-50); + border-color: var(--global--color-white-50); + color: var(--button--color-text-active); } .wp-block-gallery { margin: 0 auto; } -.wp-block-gallery .blocks-gallery-image { - width: calc(50% - 10px); -} - +.wp-block-gallery .blocks-gallery-image, .wp-block-gallery .blocks-gallery-item { - width: calc(50% - 10px); -} - -.wp-block-gallery .blocks-gallery-image figcaption { - margin: 0; - color: #fff; - font-size: 1rem; + width: calc((100% - var(--global--spacing-unit)) / 2); } +.wp-block-gallery .blocks-gallery-image figcaption, .wp-block-gallery .blocks-gallery-item figcaption { margin: 0; - color: #fff; - font-size: 1rem; -} - -.wp-block-gallery .blocks-gallery-image figcaption a { - color: #fff; + color: var(--global--color-white); + font-size: var(--global--font-size-xs); } +.wp-block-gallery .blocks-gallery-image figcaption a, .wp-block-gallery .blocks-gallery-item figcaption a { - color: #fff; -} - -.wp-block-gallery .blocks-gallery-image figcaption a:focus { - background-color: transparent; - outline: 2px solid #28303d; - text-decoration: none; + color: var(--global--color-white); } +.wp-block-gallery .blocks-gallery-image figcaption a:focus, .wp-block-gallery .blocks-gallery-item figcaption a:focus { background-color: transparent; - outline: 2px solid #28303d; + outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); text-decoration: none; } @@ -3195,14 +2225,14 @@ input[type=reset]:hover { } .wp-block-group .wp-block-group__inner-container > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-group .wp-block-group__inner-container > * { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } } @@ -3215,296 +2245,104 @@ input[type=reset]:hover { } .wp-block-group.has-background { - padding: 20px; + padding: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-group.has-background { - padding: 30px; + padding: var(--global--spacing-vertical); } } .wp-block-group.is-style-twentytwentyone-border { - border: 3px solid #28303d; - padding: 30px; -} - -.wp-block-group.has-background .wp-block-group__inner-container > .alignfull { - max-width: calc(100% + 60px); - width: calc(100% + 60px); - margin-left: -30px; -} - -.wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { - max-width: calc(100% + 60px); - width: calc(100% + 60px); - margin-left: -30px; -} - -.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull { - max-width: calc(100% + 60px); - width: calc(100% + 60px); - margin-left: -30px; + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + padding: var(--global--spacing-vertical); } +.wp-block-group.has-background .wp-block-group__inner-container > .alignfull, +.wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull, +.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull, .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { - max-width: calc(100% + 60px); - width: calc(100% + 60px); - margin-left: -30px; -} - -h1 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h1 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h2 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h2 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h3 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h3 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h4 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h4 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h5 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -.h5 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h6 { - clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; + max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + margin-left: calc(-1 * var(--global--spacing-vertical)); } +h1, +.h1, +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, .h6 { clear: both; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; -} - -h1 strong { - font-weight: 600; -} - -.h1 strong { - font-weight: 600; -} - -h2 strong { - font-weight: 600; -} - -.h2 strong { - font-weight: 600; -} - -h3 strong { - font-weight: 600; -} - -.h3 strong { - font-weight: 600; -} - -h4 strong { - font-weight: 600; -} - -.h4 strong { - font-weight: 600; -} - -h5 strong { - font-weight: 600; -} - -.h5 strong { - font-weight: 600; -} - -h6 strong { - font-weight: 600; + font-family: var(--heading--font-family); + font-weight: var(--heading--font-weight); } +h1 strong, +.h1 strong, +h2 strong, +.h2 strong, +h3 strong, +.h3 strong, +h4 strong, +.h4 strong, +h5 strong, +.h5 strong, +h6 strong, .h6 strong { - font-weight: 600; -} - -h1 { - font-size: 4rem; - letter-spacing: normal; - line-height: 1.1; -} - -@media only screen and (min-width: 652px) { - - h1 { - font-size: 6rem; - } + font-weight: var(--heading--font-weight-strong); } +h1, .h1 { - font-size: 4rem; - letter-spacing: normal; - line-height: 1.1; -} - -@media only screen and (min-width: 652px) { - - .h1 { - font-size: 6rem; - } -} - -h2 { - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - h2 { - font-size: 3rem; - } -} - -@media only screen and (min-width: 652px) { - - h2 { - font-size: 3rem; - } + font-size: var(--heading--font-size-h1); + letter-spacing: var(--heading--letter-spacing-h1); + line-height: var(--heading--line-height-h1); } +h2, .h2 { - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - .h2 { - font-size: 3rem; - } -} - -@media only screen and (min-width: 652px) { - - .h2 { - font-size: 3rem; - } -} - -h3 { - font-size: 2rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - h3 { - font-size: 2rem; - } + font-size: var(--heading--font-size-h2); + letter-spacing: var(--heading--letter-spacing-h2); + line-height: var(--heading--line-height-h2); } +h3, .h3 { - font-size: 2rem; - letter-spacing: normal; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - .h3 { - font-size: 2rem; - } -} - -h4 { - font-size: 1.5rem; - font-weight: 600; - letter-spacing: normal; - line-height: 1.3; + font-size: var(--heading--font-size-h3); + letter-spacing: var(--heading--letter-spacing-h3); + line-height: var(--heading--line-height-h3); } +h4, .h4 { - font-size: 1.5rem; - font-weight: 600; - letter-spacing: normal; - line-height: 1.3; -} - -h5 { - font-size: 1.125rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; + font-size: var(--heading--font-size-h4); + font-weight: var(--heading--font-weight-strong); + letter-spacing: var(--heading--letter-spacing-h4); + line-height: var(--heading--line-height-h4); } +h5, .h5 { - font-size: 1.125rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; -} - -h6 { - font-size: 1rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; + font-size: var(--heading--font-size-h5); + font-weight: var(--heading--font-weight-strong); + letter-spacing: var(--heading--letter-spacing-h5); + line-height: var(--heading--line-height-h5); } +h6, .h6 { - font-size: 1rem; - font-weight: 600; - letter-spacing: 0.05em; - line-height: 1.3; + font-size: var(--heading--font-size-h6); + font-weight: var(--heading--font-weight-strong); + letter-spacing: var(--heading--letter-spacing-h6); + line-height: var(--heading--line-height-h6); } .wp-block-image { @@ -3512,20 +2350,20 @@ h6 { } .wp-block-image figcaption { - color: #28303d; - font-size: 1rem; - line-height: 1.7; - margin-top: 10px; - margin-bottom: 20px; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); + margin-top: calc(0.5 * var(--global--spacing-unit)); + margin-bottom: var(--global--spacing-unit); text-align: center; } .wp-block-image .alignright { - margin-left: 25px; + margin-left: var(--global--spacing-horizontal); } .wp-block-image .alignleft { - margin-right: 25px; + margin-right: var(--global--spacing-horizontal); } .wp-block-image a:focus img { @@ -3549,16 +2387,13 @@ img { vertical-align: middle; } -.wp-block-image.is-style-twentytwentyone-border img { - border: 3px solid #28303d; +.wp-block-image.is-style-twentytwentyone-border img, +.wp-block-image.is-style-twentytwentyone-image-frame img { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-image.is-style-twentytwentyone-image-frame img { - border: 3px solid #28303d; -} - -.wp-block-image.is-style-twentytwentyone-image-frame img { - padding: 20px; + padding: var(--global--spacing-unit); } @media only screen and (min-width: 482px) { @@ -3582,12 +2417,12 @@ img { } .wp-block-latest-comments .wp-block-latest-comments__comment { - font-size: 1.125rem; - line-height: 1.7; + font-size: var(--global--font-size-sm); + line-height: var(--global--line-height-body); /* Vertical margins logic */ - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } .wp-block-latest-comments .wp-block-latest-comments__comment:first-child { @@ -3599,17 +2434,17 @@ img { } .wp-block-latest-comments .wp-block-latest-comments__comment-meta { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: var(--heading--font-family); } .wp-block-latest-comments .wp-block-latest-comments__comment-date { - color: #28303d; - font-size: 1.125rem; + color: var(--global--color-primary); + font-size: var(--global--font-size-sm); } .wp-block-latest-comments .wp-block-latest-comments__comment-excerpt p { - font-size: 1.125rem; - line-height: 1.7; + font-size: var(--global--font-size-sm); + line-height: var(--global--line-height-body); margin: 0; } @@ -3618,8 +2453,8 @@ img { } .wp-block-latest-posts:not(.is-grid) > li { - margin-top: 50px; - margin-bottom: 50px; + margin-top: calc(1.666 * var(--global--spacing-vertical)); + margin-bottom: calc(1.666 * var(--global--spacing-vertical)); } .wp-block-latest-posts:not(.is-grid) > li:first-child { @@ -3636,7 +2471,7 @@ img { } .wp-block-latest-posts.is-grid > li { - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); } .wp-block-latest-posts.is-grid > li:last-child { @@ -3657,8 +2492,8 @@ img { } .wp-block-latest-posts > li > * { - margin-top: 10px; - margin-bottom: 10px; + margin-top: calc(0.333 * var(--global--spacing-vertical)); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-latest-posts > li > *:first-child { @@ -3671,29 +2506,23 @@ img { .wp-block-latest-posts > li > a { display: inline-block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 2rem; - font-weight: normal; - line-height: 1.3; - margin-bottom: 10px; -} -@media only screen and (min-width: 652px) { - - .wp-block-latest-posts > li > a { - font-size: 2rem; - } + font-family: var(--latest-posts--title-font-family); + font-size: var(--latest-posts--title-font-size); + font-weight: var(--heading--font-weight); + line-height: var(--global--line-height-heading); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-latest-posts .wp-block-latest-posts__post-author { - color: #28303d; - font-size: 1.25rem; - line-height: 1.7; + color: var(--global--color-primary); + font-size: var(--global--font-size-md); + line-height: var(--global--line-height-body); } .wp-block-latest-posts .wp-block-latest-posts__post-date { - color: #28303d; - font-size: 1rem; - line-height: 1.7; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); } [class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date, @@ -3701,23 +2530,17 @@ img { color: currentColor; } -.wp-block-latest-posts .wp-block-latest-posts__post-excerpt { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; - margin-top: 20px; -} - +.wp-block-latest-posts .wp-block-latest-posts__post-excerpt, .wp-block-latest-posts .wp-block-latest-posts__post-full-content { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; - margin-top: 20px; + font-family: var(--latest-posts--description-font-family); + font-size: var(--latest-posts--description-font-size); + line-height: var(--global--line-height-body); + margin-top: calc(0.666 * var(--global--spacing-vertical)); } .wp-block-latest-posts.alignfull { - padding-left: 20px; - padding-right: 20px; + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); } .entry-content [class*=inner-container] .wp-block-latest-posts.alignfull, @@ -3727,22 +2550,16 @@ img { } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers { - border-top: 3px solid #28303d; - border-bottom: 3px solid #28303d; -} - -.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li { - padding-bottom: 30px; - border-bottom: 1px solid #28303d; - margin-top: 30px; - margin-bottom: 30px; + border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); + border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); } +.wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li, .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers > li { - padding-bottom: 30px; - border-bottom: 1px solid #28303d; - margin-top: 30px; - margin-bottom: 30px; + padding-bottom: var(--global--spacing-vertical); + border-bottom: var(--separator--height) solid var(--global--color-border); + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers:not(.is-grid) > li:last-child, @@ -3752,54 +2569,54 @@ img { } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid { - box-shadow: inset 0 -1px 0 0 #28303d; - border-bottom: 2px solid #28303d; + box-shadow: inset 0 -1px 0 0 var(--global--color-border); + border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li { margin: 0; - padding-top: 30px; - padding-right: 25px; + padding-top: var(--global--spacing-vertical); + padding-right: var(--global--spacing-horizontal); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child { - padding-bottom: 30px; + padding-bottom: var(--global--spacing-vertical); } @media screen and (min-width: 600px) { .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-2 li { - width: 50%; + width: calc((100% / 2)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li { - width: 33%; + width: calc((100% / 3)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li { - width: 25%; + width: calc((100% / 4)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li { - width: 20%; + width: calc((100% / 5)); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li { - width: 17%; + width: calc((100% / 6)); } } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li { - border: 3px solid #28303d; - padding: 30px 25px; + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders li:last-child { - padding-bottom: 30px; + padding-bottom: var(--global--spacing-vertical); } .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-borders:not(.is-grid) li { - margin-top: 25px; - margin-bottom: 25px; + margin-top: var(--global--spacing-horizontal); + margin-bottom: var(--global--spacing-horizontal); } .gallery-item { @@ -3857,16 +2674,11 @@ figure.wp-caption a:focus img { outline-offset: 2px; } -ul { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - margin: 0; - padding-left: 50px; -} - +ul, ol { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: var(--list--font-family); margin: 0; - padding-left: 50px; + padding-left: calc(2 * var(--global--spacing-horizontal)); } ul.aligncenter, @@ -3891,13 +2703,13 @@ ol { } dt { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: var(--definition-term--font-family); font-weight: bold; } dd { margin: 0; - padding-left: 50px; + padding-left: calc(2 * var(--global--spacing-horizontal)); } .wp-block-media-text { @@ -3917,24 +2729,24 @@ dd { } .wp-block-media-text .wp-block-media-text__content { - padding: 25px; + padding: var(--global--spacing-horizontal); } @media only screen and (min-width: 592px) { .wp-block-media-text .wp-block-media-text__content { - padding: 30px; + padding: var(--global--spacing-vertical); } } .wp-block-media-text .wp-block-media-text__content > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); } @media only screen and (min-width: 482px) { .wp-block-media-text .wp-block-media-text__content > * { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } } @@ -3948,13 +2760,13 @@ dd { @media only screen and (min-width: 482px) { .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content { - padding-top: 30px; - padding-bottom: 30px; + padding-top: var(--global--spacing-vertical); + padding-bottom: var(--global--spacing-vertical); } } .wp-block-media-text.is-style-twentytwentyone-border { - border: 3px solid #28303d; + border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-navigation .wp-block-navigation-link { @@ -3962,13 +2774,13 @@ dd { } .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__content { - padding: 13px; + padding: var(--primary-nav--padding); } .wp-block-navigation .wp-block-navigation-link .wp-block-navigation-link__label { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - font-weight: normal; + font-family: var(--primary-nav--font-family); + font-size: var(--primary-nav--font-size); + font-weight: var(--primary-nav--font-weight); } .wp-block-navigation .wp-block-navigation-link__submenu-icon { @@ -3982,7 +2794,7 @@ dd { .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container { border: none; left: 0; - margin-left: 13px; + margin-left: var(--primary-nav--padding); min-width: max-content; opacity: 0; padding: 0; @@ -3992,7 +2804,7 @@ dd { .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link .wp-block-navigation-link__content { display: inline-block; - padding: 7px 13px; + padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding); } .wp-block-navigation > .wp-block-navigation__container .has-child .wp-block-navigation__container .wp-block-navigation-link__submenu-icon { @@ -4007,57 +2819,43 @@ dd { } .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container { - background: #d1e4dd; + background: var(--global--color-background); margin: 0; padding: 0; position: absolute; top: 100%; - border: 1px solid #28303d; -} - -.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before { - content: ""; - display: block; - position: absolute; - width: 0; - top: -10px; - left: 25px; - border-style: solid; - border-color: #28303d transparent; - border-width: 0 7px 10px 7px; + border: 1px solid var(--primary-nav--border-color); } +.wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:before, .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after { content: ""; display: block; position: absolute; width: 0; top: -10px; - left: 25px; + left: var(--global--spacing-horizontal); border-style: solid; - border-color: #28303d transparent; + border-color: var(--primary-nav--border-color) transparent; border-width: 0 7px 10px 7px; } .wp-block-navigation > .wp-block-navigation__container > .has-child > .wp-block-navigation__container:after { top: -9px; - border-color: #d1e4dd transparent; + border-color: var(--global--color-background) transparent; } .wp-block-navigation:not(.has-background) .wp-block-navigation__container { - background: #d1e4dd; + background: var(--global--color-background); } .wp-block-navigation:not(.has-background) .wp-block-navigation__container .wp-block-navigation__container { - background: #d1e4dd; -} - -.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover { - color: #28303d; + background: var(--global--color-background); } +.wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover, .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:focus { - color: #28303d; + color: var(--primary-nav--color-link-hover); } .wp-block-navigation:not(.has-text-color) .wp-block-navigation-link > a:hover { @@ -4070,15 +2868,15 @@ dd { } p { - line-height: --global--line-height-body; + line-height: var(--wp--typography--line-height, --global--line-height-body); } p.has-background { - padding: 20px; + padding: var(--global--spacing-unit); } p.has-text-color a { - color: #28303d; + color: var(--wp--style--color--link, var(--global--color-primary)); } pre.wp-block-preformatted { @@ -4087,11 +2885,13 @@ pre.wp-block-preformatted { } .wp-block-pullquote { - padding: 40px 0; + padding: calc(2 * var(--global--spacing-unit)) 0; text-align: center; - border-width: 3px; + border-width: var(--pullquote--border-width); border-bottom-style: solid; border-top-style: solid; + color: currentColor; + border-color: currentColor; position: relative; /** @@ -4103,52 +2903,34 @@ pre.wp-block-preformatted { color: currentColor; content: "“"; display: block; + position: relative; + left: 0; font-size: 3rem; font-weight: 500; line-height: 1; } .wp-block-pullquote p { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 2rem; - font-style: normal; + font-family: var(--pullquote--font-family); + font-size: var(--pullquote--font-size); + font-style: var(--pullquote--font-style); font-weight: 700; - letter-spacing: normal; - line-height: 1.3; + letter-spacing: var(--pullquote--letter-spacing); + line-height: var(--pullquote--line-height); margin: 0; } -@media only screen and (min-width: 652px) { - - .wp-block-pullquote p { - font-size: 2rem; - } -} .wp-block-pullquote a { color: currentColor; } -.wp-block-pullquote .wp-block-pullquote__citation { - color: currentColor; - display: block; - font-size: 1rem; - font-style: normal; - text-transform: none; -} - -.wp-block-pullquote cite { - color: currentColor; - display: block; - font-size: 1rem; - font-style: normal; - text-transform: none; -} - +.wp-block-pullquote .wp-block-pullquote__citation, +.wp-block-pullquote cite, .wp-block-pullquote footer { color: currentColor; display: block; - font-size: 1rem; - font-style: normal; + font-size: var(--global--font-size-xs); + font-style: var(--pullquote--font-style); text-transform: none; } @@ -4156,62 +2938,32 @@ pre.wp-block-preformatted { background: none; } -.wp-block-pullquote.alignleft blockquote:before, -.wp-block-pullquote.alignleft cite { +.wp-block-pullquote.alignleft:not(.is-style-solid-color) blockquote:before, +.wp-block-pullquote.alignleft:not(.is-style-solid-color) cite { text-align: center; } -.wp-block-pullquote.alignwide > p { - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - .wp-block-pullquote.alignwide > p { - max-width: calc(100vw - 100px); - } -} -@media only screen and (min-width: 822px) { - - .wp-block-pullquote.alignwide > p { - max-width: min(calc(100vw - 200px), 1240px); - } -} - +.wp-block-pullquote.alignwide > p, .wp-block-pullquote.alignwide blockquote { - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - .wp-block-pullquote.alignwide blockquote { - max-width: calc(100vw - 100px); - } -} -@media only screen and (min-width: 822px) { - - .wp-block-pullquote.alignwide blockquote { - max-width: min(calc(100vw - 200px), 1240px); - } -} - -.wp-block-pullquote.alignfull:not(.is-style-solid-color) > p { - padding: 0 40px; + max-width: var(--responsive--alignwide-width); } +.wp-block-pullquote.alignfull:not(.is-style-solid-color) > p, .wp-block-pullquote.alignfull:not(.is-style-solid-color) blockquote { - padding: 0 40px; + padding: 0 calc(2 * var(--global--spacing-unit)); } .wp-block-pullquote.is-style-solid-color { - color: #28303d; - padding: 50px; - border-width: 3px; + color: var(--pullquote--color-foreground); + padding: calc(2.5 * var(--global--spacing-unit)); + border-width: var(--pullquote--border-width); border-style: solid; - border-color: #28303d; + border-color: var(--pullquote--border-color); } @media (min-width: 600px) { .wp-block-pullquote.is-style-solid-color { - padding: 100px; + padding: calc(5 * var(--global--spacing-unit)); } } @@ -4220,17 +2972,12 @@ pre.wp-block-preformatted { } .wp-block-pullquote.is-style-solid-color blockquote { + margin: 0; max-width: inherit; } .wp-block-pullquote.is-style-solid-color blockquote p { - font-size: 2rem; -} -@media only screen and (min-width: 652px) { - - .wp-block-pullquote.is-style-solid-color blockquote p { - font-size: 2rem; - } + font-size: var(--pullquote--font-size); } .wp-block-pullquote.is-style-solid-color .wp-block-pullquote__citation, @@ -4239,161 +2986,124 @@ pre.wp-block-preformatted { color: currentColor; } +.wp-block-pullquote.is-style-solid-color.alignleft, +.wp-block-pullquote.is-style-solid-color.alignright { + padding: var(--global--spacing-unit); +} + +.wp-block-pullquote.is-style-solid-color.alignleft blockquote, +.wp-block-pullquote.is-style-solid-color.alignright blockquote { + max-width: initial; +} + .wp-block-quote { + border-left: none; /** * Block Options */ } -.has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, +.wp-block-quote:before { + content: "“"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + left: 8px; +} + +.has-background .wp-block-quote .wp-block-quote__citation, +[class*=background-color] .wp-block-quote .wp-block-quote__citation, [style*=background-color] .wp-block-quote .wp-block-quote__citation, .wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation, -.has-background:not(.has-background-background-color) .wp-block-quote cite, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote cite, +.has-background .wp-block-quote cite, +[class*=background-color] .wp-block-quote cite, [style*=background-color] .wp-block-quote cite, .wp-block-cover[style*=background-image] .wp-block-quote cite, -.has-background:not(.has-background-background-color) .wp-block-quote footer, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote footer, +.has-background .wp-block-quote footer, +[class*=background-color] .wp-block-quote footer, [style*=background-color] .wp-block-quote footer, .wp-block-cover[style*=background-image] .wp-block-quote footer { color: currentColor; } .wp-block-quote.has-text-align-right { - margin: 30px 25px 30px auto; + margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; padding-right: 0; border-right: none; } .wp-block-quote.has-text-align-right:before { + display: none; +} + +.wp-block-quote.has-text-align-right p:before { content: "”"; - left: initial; - right: -12px; + font-size: var(--quote--font-size); + font-weight: normal; + line-height: var(--quote--line-height); + margin-right: 5px; } .wp-block-quote.has-text-align-center { - margin: 30px auto; + margin: var(--global--spacing-vertical) auto; } .wp-block-quote.has-text-align-center:before { display: none; } -.wp-block-quote.is-large { - padding-left: 0; - padding-right: 0; - - /* Resetting margins to match _block-container.scss */ - margin-top: 30px; - margin-bottom: 30px; -} - +.wp-block-quote.is-large, .wp-block-quote.is-style-large { padding-left: 0; padding-right: 0; /* Resetting margins to match _block-container.scss */ - margin-top: 30px; - margin-bottom: 30px; -} - -.wp-block-quote.is-large p { - font-size: 2.25rem; - font-style: normal; - line-height: 1.35; -} -@media only screen and (min-width: 652px) { - - .wp-block-quote.is-large p { - font-size: 2.5rem; - } + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } +.wp-block-quote.is-large p, .wp-block-quote.is-style-large p { - font-size: 2.25rem; - font-style: normal; - line-height: 1.35; -} -@media only screen and (min-width: 652px) { - - .wp-block-quote.is-style-large p { - font-size: 2.5rem; - } -} - -.wp-block-quote.is-large:before { - font-size: 2.25rem; - line-height: 1.35; - left: -25px; -} -@media only screen and (min-width: 652px) { - - .wp-block-quote.is-large:before { - font-size: 2.5rem; - } + font-size: var(--quote--font-size-large); + font-style: var(--quote--font-style-large); + line-height: var(--quote--line-height-large); } +.wp-block-quote.is-large:before, .wp-block-quote.is-style-large:before { - font-size: 2.25rem; - line-height: 1.35; - left: -25px; -} -@media only screen and (min-width: 652px) { - - .wp-block-quote.is-style-large:before { - font-size: 2.5rem; - } -} - -.wp-block-quote.is-large.has-text-align-right:before { - left: initial; - right: -25px; + font-size: var(--quote--font-size-large); + line-height: var(--quote--line-height-large); + left: calc(-1 * var(--global--spacing-horizontal)); } +.wp-block-quote.is-large.has-text-align-right:before, .wp-block-quote.is-style-large.has-text-align-right:before { - left: initial; - right: -25px; + display: none; } -.wp-block-quote.is-large .wp-block-quote__citation { - color: #28303d; - font-size: 1.125rem; -} - -.wp-block-quote.is-large cite { - color: #28303d; - font-size: 1.125rem; -} - -.wp-block-quote.is-large footer { - color: #28303d; - font-size: 1.125rem; -} - -.wp-block-quote.is-style-large .wp-block-quote__citation { - color: #28303d; - font-size: 1.125rem; -} - -.wp-block-quote.is-style-large cite { - color: #28303d; - font-size: 1.125rem; +.wp-block-quote.is-large.has-text-align-right p:before, +.wp-block-quote.is-style-large.has-text-align-right p:before { + content: "”"; + font-size: var(--quote--font-size-large); + font-weight: normal; + line-height: var(--quote--line-height-large); + margin-right: 10px; } +.wp-block-quote.is-large .wp-block-quote__citation, +.wp-block-quote.is-large cite, +.wp-block-quote.is-large footer, +.wp-block-quote.is-style-large .wp-block-quote__citation, +.wp-block-quote.is-style-large cite, .wp-block-quote.is-style-large footer { - color: #28303d; - font-size: 1.125rem; + color: var(--global--color-primary); + font-size: var(--global--font-size-sm); } @media only screen and (max-width: 481px) { - .wp-block-quote.is-large { - padding-left: 25px; - } - + .wp-block-quote.is-large, .wp-block-quote.is-style-large { - padding-left: 25px; + padding-left: var(--global--spacing-horizontal); } .wp-block-quote.is-large:before, @@ -4401,14 +3111,10 @@ pre.wp-block-preformatted { left: 0; } - .wp-block-quote.is-large.has-text-align-right { - padding-left: 0; - padding-right: 25px; - } - + .wp-block-quote.is-large.has-text-align-right, .wp-block-quote.is-style-large.has-text-align-right { padding-left: 0; - padding-right: 25px; + padding-right: var(--global--spacing-horizontal); } .wp-block-quote.is-large.has-text-align-right:before, @@ -4426,7 +3132,7 @@ pre.wp-block-preformatted { .wp-block-quote.has-text-align-right { padding-left: 0; - padding-right: 13px; + padding-right: calc(0.5 * var(--global--spacing-horizontal)); } .wp-block-quote.has-text-align-right:before { @@ -4448,8 +3154,8 @@ pre.wp-block-preformatted { } .wp-block-rss:not(.is-grid) > li { - margin-top: 50px; - margin-bottom: 50px; + margin-top: calc(1.666 * var(--global--spacing-vertical)); + margin-bottom: calc(1.666 * var(--global--spacing-vertical)); } .wp-block-rss:not(.is-grid) > li:first-child { @@ -4461,7 +3167,7 @@ pre.wp-block-preformatted { } .wp-block-rss.is-grid > li { - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); } .wp-block-rss.is-grid > li:last-child { @@ -4482,8 +3188,8 @@ pre.wp-block-preformatted { } .wp-block-rss > li > * { - margin-top: 10px; - margin-bottom: 10px; + margin-top: calc(0.333 * var(--global--spacing-vertical)); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-rss > li > *:first-child { @@ -4496,29 +3202,23 @@ pre.wp-block-preformatted { .wp-block-rss .wp-block-rss__item-title > a { display: inline-block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 2rem; - font-weight: normal; - line-height: 1.3; - margin-bottom: 10px; -} -@media only screen and (min-width: 652px) { - - .wp-block-rss .wp-block-rss__item-title > a { - font-size: 2rem; - } + font-family: var(--latest-posts--title-font-family); + font-size: var(--latest-posts--title-font-size); + font-weight: var(--heading--font-weight); + line-height: var(--global--line-height-heading); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); } .wp-block-rss .wp-block-rss__item-author { - color: #28303d; - font-size: 1.25rem; - line-height: 1.7; + color: var(--global--color-primary); + font-size: var(--global--font-size-md); + line-height: var(--global--line-height-body); } .wp-block-rss .wp-block-rss__item-publish-date { - color: #28303d; - font-size: 1rem; - line-height: 1.7; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); } [class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date, @@ -4526,23 +3226,17 @@ pre.wp-block-preformatted { color: currentColor; } -.wp-block-rss .wp-block-rss__item-excerpt { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; - margin-top: 20px; -} - +.wp-block-rss .wp-block-rss__item-excerpt, .wp-block-rss .wp-block-rss__item-full-content { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; - margin-top: 20px; + font-family: var(--latest-posts--description-font-family); + font-size: var(--latest-posts--description-font-size); + line-height: var(--global--line-height-body); + margin-top: calc(0.666 * var(--global--spacing-vertical)); } .wp-block-rss.alignfull { - padding-left: 20px; - padding-right: 20px; + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); } .entry-content [class*=inner-container] .wp-block-rss.alignfull, @@ -4552,25 +3246,7 @@ pre.wp-block-preformatted { } .wp-block-search { - max-width: calc(100vw - 30px); -} - -@media only screen and (min-width: 482px) { - - .wp-block-search { - max-width: min(calc(100vw - 100px), 610px); - } -} - -@media only screen and (min-width: 822px) { - - .wp-block-search { - max-width: min(calc(100vw - 200px), 610px); - } -} - -.wp-block-search__button-inside .wp-block-search__inside-wrapper { - background-color: #fff; + max-width: var(--responsive--aligndefault-width); } .wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper { @@ -4578,59 +3254,53 @@ pre.wp-block-preformatted { } .wp-block-search .wp-block-search__label { - font-size: 1.125rem; - font-weight: 500; - margin-bottom: 10px; + font-size: var(--form--font-size); + font-weight: var(--form--label-weight); + margin-bottom: calc(var(--global--spacing-vertical) / 3); } .wp-block-search .wp-block-search__input { - border: 3px solid #39414d; - border-radius: 0; - color: #28303d; - line-height: 1.7; + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); + color: var(--form--color-text); + line-height: var(--form--line-height); max-width: inherit; - margin-right: -3px; - padding: 10px; + margin-right: calc(-1 * var(--button--border-width)); + padding: var(--form--spacing-unit); } .wp-block-search .wp-block-search__input:focus { - color: #28303d; - border-color: #39414d; + color: var(--form--color-text); + border-color: var(--form--border-color); } -.has-background:not(.has-background-background-color) .wp-block-search .wp-block-search__input, -[class*=background-color]:not(.has-background-background-color) .wp-block-search .wp-block-search__input, +.has-background .wp-block-search .wp-block-search__input, +[class*=background-color] .wp-block-search .wp-block-search__input, [style*=background-color] .wp-block-search .wp-block-search__input, .wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input { border-color: currentColor; } -.has-background.has-gray-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; -} - -.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; -} - +.has-background.has-gray-background-color .wp-block-search .wp-block-search__input, +.has-background.has-dark-gray-background-color .wp-block-search .wp-block-search__input, .has-background.has-black-background-color .wp-block-search .wp-block-search__input { - border-color: #fff; + border-color: var(--global--color-white); } .wp-block-search button.wp-block-search__button { margin-left: 0; background-color: transparent; - color: #39414d; + color: var(--button--color-text-hover); line-height: 1; } .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - color: #d1e4dd; + background-color: var(--button--color-background); + color: var(--button--color-text); } .wp-block-search button.wp-block-search__button.has-icon { - padding: 6px 15px; + padding: 6px calc(0.5 * var(--button--padding-horizontal)); } .wp-block-search button.wp-block-search__button.has-icon svg { @@ -4639,49 +3309,25 @@ pre.wp-block-preformatted { fill: currentColor; } -.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button { - color: #fff; - border-color: currentColor; -} - -.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button { - color: #fff; - border-color: currentColor; -} - +.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button, +.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button, .has-background.has-black-background-color .wp-block-search button.wp-block-search__button { - color: #fff; + color: var(--global--color-white); border-color: currentColor; } -.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #fff; - color: #fff; -} - -.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #fff; - color: #fff; -} - +.has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover, +.has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #fff; - color: #fff; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover { - color: #d1e4dd; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover { - color: #d1e4dd; + background-color: var(--button--color-background); + border-color: var(--global--color-white); + color: var(--global--color-white); } +.is-dark-theme .has-background.has-gray-background-color .wp-block-search button.wp-block-search__button:hover, +.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-black-background-color .wp-block-search button.wp-block-search__button:hover { - color: #d1e4dd; + color: var(--button--color-text); } .has-background.has-white-background-color .wp-block-search button.wp-block-search__button, @@ -4695,157 +3341,88 @@ pre.wp-block-preformatted { color: currentColor; } -.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - +.has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover, +.has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover, +.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover, +.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover, +.has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover, +.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover, .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover { - background-color: #39414d; - border-color: #39414d; - color: #fff; -} - -.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; -} - -.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; + background-color: var(--form--border-color); + border-color: var(--form--border-color); + color: var(--global--color-white); } +.is-dark-theme .has-background.has-white-background-color .wp-block-search button.wp-block-search__button:hover, +.is-dark-theme .has-background.has-green-background-color .wp-block-search button.wp-block-search__button:hover, +.is-dark-theme .has-background.has-blue-background-color .wp-block-search button.wp-block-search__button:hover, +.is-dark-theme .has-background.has-purple-background-color .wp-block-search button.wp-block-search__button:hover, +.is-dark-theme .has-background.has-red-background-color .wp-block-search button.wp-block-search__button:hover, +.is-dark-theme .has-background.has-orange-background-color .wp-block-search button.wp-block-search__button:hover, .is-dark-theme .has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; + border-color: var(--button--color-text); + background-color: var(--button--color-text); + color: var(--button--color-background); +} + +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { + background-color: var(--global--color-white); + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); +} + +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { + margin-right: 0; +} + +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { + outline: 2px dotted var(--form--border-color); + outline-offset: -5px; +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { + outline-color: currentColor; } .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button { - padding: 15px 30px; -} - -.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #39414d; - color: #39414d; -} - -.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #39414d; - color: #39414d; + padding: var(--button--padding-vertical) var(--button--padding-horizontal); } +.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, +.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #39414d; - color: #39414d; -} - -.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; -} - -.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; + border-color: var(--button--color-background); + color: var(--button--color-background); } +.has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, +.has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #d1e4dd; - color: #d1e4dd; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #d1e4dd; - color: #d1e4dd; + color: var(--global--color-white); } +.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, +.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button, .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #d1e4dd; - color: #d1e4dd; -} - -.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; -} - -.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; + border-color: var(--button--color-text); + color: var(--button--color-text); } +.is-dark-theme .has-background.has-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, +.is-dark-theme .has-background.has-dark-gray-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover, .is-dark-theme .has-background.has-black-background-color .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - color: #fff; + color: var(--global--color-white); } .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { - border-color: #d1e4dd; - color: #d1e4dd; + border-color: var(--button--color-text); + color: var(--button--color-text); } .is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button:hover { - border-color: #d1e4dd; - background-color: #d1e4dd; - color: #39414d; + border-color: var(--button--color-text); + background-color: var(--button--color-text); + color: var(--button--color-background); } .wp-block-search__button { @@ -4854,14 +3431,15 @@ pre.wp-block-preformatted { hr { border-style: none; - border-bottom: 1px solid #28303d; + border-bottom: var(--separator--height) solid var(--separator--border-color); clear: both; margin-left: auto; margin-right: auto; } hr.wp-block-separator { - border-bottom: 1px solid #28303d; + border-bottom: var(--separator--height) solid var(--separator--border-color); + opacity: 1; /** * Block Options @@ -4869,27 +3447,19 @@ hr.wp-block-separator { } hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { - max-width: min(calc(100vw - 200px), 610px); - } + max-width: var(--responsive--aligndefault-width); } -hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { - max-width: 100%; +hr.wp-block-separator:not(.is-style-dots).alignwide { + max-width: var(--responsive--alignwide-width); +} + +hr.wp-block-separator:not(.is-style-dots).alignfull { + max-width: var(--responsive--alignfull-width); } hr.wp-block-separator.is-style-twentytwentyone-separator-thick { - border-bottom-width: 3px; + border-bottom-width: calc(3 * var(--separator--height)); } hr.wp-block-separator.is-style-dots.has-background, @@ -4903,27 +3473,25 @@ hr.wp-block-separator.is-style-dots.has-text-color:before { } hr.wp-block-separator.is-style-dots:before { - color: #28303d; - font-size: 2.25rem; - letter-spacing: 1.125rem; - padding-left: 1.125rem; -} -@media only screen and (min-width: 652px) { - - hr.wp-block-separator.is-style-dots:before { - font-size: 2.5rem; - } + color: var(--separator--border-color); + font-size: var(--global--font-size-xl); + letter-spacing: var(--global--font-size-sm); + padding-left: var(--global--font-size-sm); } -.has-background:not(.has-background-background-color) hr.wp-block-separator, -[class*=background-color]:not(.has-background-background-color) hr.wp-block-separator, +.has-background hr.wp-block-separator, +[class*=background-color] hr.wp-block-separator, [style*=background-color] hr.wp-block-separator, .wp-block-cover[style*=background-image] hr.wp-block-separator { border-color: currentColor; } +.wp-block-social-links a:focus { + color: var(--global--color-primary); +} + .wp-block-social-links.is-style-twentytwentyone-social-icons-color a { - color: #28303d; + color: var(--global--color-primary); } .wp-block-social-links.is-style-twentytwentyone-social-icons-color .wp-social-link { @@ -4938,7 +3506,7 @@ hr.wp-block-separator.is-style-dots:before { @media only screen and (max-width: 481px) { .wp-block-spacer[style] { - height: 20px !important; + height: var(--global--spacing-unit) !important; } } @@ -4949,72 +3517,33 @@ table, border-collapse: collapse; } -table th { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - +table th, .wp-block-table th { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - -table td { - padding: 10px; - border: 1px solid; -} - -table th { - padding: 10px; - border: 1px solid; -} - -.wp-block-table td { - padding: 10px; - border: 1px solid; + font-family: var(--heading--font-family); } +table td, +table th, +.wp-block-table td, .wp-block-table th { - padding: 10px; + padding: calc(0.5 * var(--global--spacing-unit)); border: 1px solid; } -table.is-style-regular .has-background { - color: #28303d; -} - -table.is-style-stripes .has-background thead tr { - color: #28303d; -} - -table.is-style-stripes .has-background tfoot tr { - color: #28303d; -} - -table.is-style-stripes .has-background tbody tr:nth-child(even) { - color: #28303d; -} - -.wp-block-table.is-style-regular .has-background { - color: #28303d; -} - -.wp-block-table.is-style-stripes .has-background thead tr { - color: #28303d; -} - -.wp-block-table.is-style-stripes .has-background tfoot tr { - color: #28303d; -} - +table.is-style-regular .has-background, +table.is-style-stripes .has-background thead tr, +table.is-style-stripes .has-background tfoot tr, +table.is-style-stripes .has-background tbody tr:nth-child(even), +.wp-block-table.is-style-regular .has-background, +.wp-block-table.is-style-stripes .has-background thead tr, +.wp-block-table.is-style-stripes .has-background tfoot tr, .wp-block-table.is-style-stripes .has-background tbody tr:nth-child(even) { - color: #28303d; -} - -table.is-style-stripes { - border-color: #f0f0f0; + color: var(--table--has-background-text-color); } +table.is-style-stripes, .wp-block-table.is-style-stripes { - border-color: #f0f0f0; + border-color: var(--table--stripes-border-color); } table.is-style-stripes th, @@ -5024,12 +3553,9 @@ table.is-style-stripes td, border-width: 0; } -table.is-style-stripes tbody tr:nth-child(odd) { - background-color: #f0f0f0; -} - +table.is-style-stripes tbody tr:nth-child(odd), .wp-block-table.is-style-stripes tbody tr:nth-child(odd) { - background-color: #f0f0f0; + background-color: var(--table--stripes-background-color); } table.wp-calendar-table td, @@ -5055,13 +3581,13 @@ table.wp-calendar-table tbody { table.wp-calendar-table caption { font-weight: bold; text-align: left; - margin-bottom: 20px; + margin-bottom: var(--global--spacing-unit); color: currentColor; } .wp-calendar-nav { text-align: left; - margin-top: 10px; + margin-top: calc(var(--global--spacing-unit) / 2); } .wp-calendar-nav svg { @@ -5078,19 +3604,19 @@ table.wp-calendar-table caption { } .wp-block-tag-cloud.alignfull { - padding-left: 20px; - padding-right: 20px; + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); } .wp-block-verse { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: var(--entry-content--font-family); } .wp-block-video figcaption { - color: #28303d; - font-size: 1rem; - margin-top: 10px; - margin-bottom: 20px; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + margin-top: calc(0.5 * var(--global--spacing-unit)); + margin-bottom: var(--global--spacing-unit); text-align: center; } @@ -5100,142 +3626,50 @@ table.wp-calendar-table caption { vertical-align: middle; } -:root .is-extra-small-text { - font-size: 1rem; -} - +:root .is-extra-small-text, :root .has-extra-small-font-size { - font-size: 1rem; -} - -:root .is-small-text { - font-size: 1.125rem; + font-size: var(--global--font-size-xs); } +:root .is-small-text, :root .has-small-font-size { - font-size: 1.125rem; -} - -:root .is-regular-text { - font-size: 1.25rem; -} - -:root .has-regular-font-size { - font-size: 1.25rem; -} - -:root .is-normal-font-size { - font-size: 1.25rem; -} - -:root .has-normal-font-size { - font-size: 1.25rem; + font-size: var(--global--font-size-sm); } +:root .is-regular-text, +:root .has-regular-font-size, +:root .is-normal-font-size, +:root .has-normal-font-size, :root .has-medium-font-size { - font-size: 1.25rem; -} - -:root .is-large-text { - font-size: 1.5rem; - line-height: 1.3; + font-size: var(--global--font-size-base); } +:root .is-large-text, :root .has-large-font-size { - font-size: 1.5rem; - line-height: 1.3; -} - -:root .is-larger-text { - font-size: 2.5rem; - line-height: 1.3; -} -@media only screen and (min-width: 652px) { - - :root .is-larger-text { - font-size: 2.5rem; - } -} - -:root .has-larger-font-size { - font-size: 2.5rem; - line-height: 1.3; -} -@media only screen and (min-width: 652px) { - - :root .has-larger-font-size { - font-size: 2.5rem; - } -} - -:root .is-extra-large-text { - font-size: 2.5rem; - line-height: 1.3; -} -@media only screen and (min-width: 652px) { - - :root .is-extra-large-text { - font-size: 2.5rem; - } + font-size: var(--global--font-size-lg); + line-height: var(--global--line-height-heading); } +:root .is-larger-text, +:root .has-larger-font-size, +:root .is-extra-large-text, :root .has-extra-large-font-size { - font-size: 2.5rem; - line-height: 1.3; -} -@media only screen and (min-width: 652px) { - - :root .has-extra-large-font-size { - font-size: 2.5rem; - } -} - -:root .is-huge-text { - font-size: 6rem; - line-height: 1.3; - font-weight: 300; -} -@media only screen and (min-width: 652px) { - - :root .is-huge-text { - font-size: 6rem; - } + font-size: var(--global--font-size-xl); + line-height: var(--global--line-height-heading); } +:root .is-huge-text, :root .has-huge-font-size { - font-size: 6rem; - line-height: 1.3; - font-weight: 300; -} -@media only screen and (min-width: 652px) { - - :root .has-huge-font-size { - font-size: 6rem; - } -} - -:root .is-gigantic-text { - font-size: 9rem; - line-height: 1.3; - font-weight: 300; -} -@media only screen and (min-width: 652px) { - - :root .is-gigantic-text { - font-size: 9rem; - } + font-size: var(--global--font-size-xxl); + line-height: var(--global--line-height-heading); + font-weight: var(--heading--font-weight-page-title); } +:root .is-gigantic-text, :root .has-gigantic-font-size { - font-size: 9rem; - line-height: 1.3; - font-weight: 300; -} -@media only screen and (min-width: 652px) { - - :root .has-gigantic-font-size { - font-size: 9rem; - } + font-size: var(--global--font-size-xxxl); + line-height: var(--global--line-height-heading); + font-weight: var(--heading--font-weight-page-title); } /* Block Alignments */ @@ -5255,21 +3689,7 @@ table.wp-calendar-table caption { } .entry-content > .alignleft { - max-width: calc(100vw - 30px); -} - -@media only screen and (min-width: 482px) { - - .entry-content > .alignleft { - max-width: min(calc(100vw - 100px), 610px); - } -} - -@media only screen and (min-width: 822px) { - - .entry-content > .alignleft { - max-width: min(calc(100vw - 200px), 610px); - } + max-width: var(--responsive--aligndefault-width); } @media only screen and (min-width: 482px) { @@ -5280,33 +3700,12 @@ table.wp-calendar-table caption { float: left; /*rtl:ignore*/ - margin-right: 25px; - margin-bottom: 30px; + margin-right: var(--global--spacing-horizontal); + margin-bottom: var(--global--spacing-vertical); } .entry-content > .alignleft { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1); - } - - @media only screen and (min-width: 482px) { - - .entry-content > .alignleft { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1); - } - } - - @media only screen and (min-width: 482px) { - - .entry-content > .alignleft { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1); - } - } - - @media only screen and (min-width: 822px) { - - .entry-content > .alignleft { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1); - } + max-width: calc(50% - var(--responsive--alignleft-margin)); } } @@ -5327,25 +3726,11 @@ table.wp-calendar-table caption { */ .alignright { margin-top: 0; - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); } .entry-content > .alignright { - max-width: calc(100vw - 30px); -} - -@media only screen and (min-width: 482px) { - - .entry-content > .alignright { - max-width: min(calc(100vw - 100px), 610px); - } -} - -@media only screen and (min-width: 822px) { - - .entry-content > .alignright { - max-width: min(calc(100vw - 200px), 610px); - } + max-width: var(--responsive--aligndefault-width); } @media only screen and (min-width: 482px) { @@ -5356,32 +3741,11 @@ table.wp-calendar-table caption { float: right; /*rtl:ignore*/ - margin-left: 25px; + margin-left: var(--global--spacing-horizontal); } .entry-content > .alignright { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1); - } - - @media only screen and (min-width: 482px) { - - .entry-content > .alignright { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1); - } - } - - @media only screen and (min-width: 482px) { - - .entry-content > .alignright { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1); - } - } - - @media only screen and (min-width: 822px) { - - .entry-content > .alignright { - max-width: calc(50% - 50vw + min(calc(100vw - 4 * 25px), 610px) *1); - } + max-width: calc(50% - var(--responsive--alignright-margin)); } } @@ -5417,21 +3781,14 @@ table.wp-calendar-table caption { } .has-drop-cap:not(:focus)::first-letter { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-weight: normal; + font-family: var(--heading--font-family); + font-weight: var(--heading--font-weight); line-height: 0.66; text-transform: uppercase; font-style: normal; float: left; margin: 0.1em 0.1em 0 0; - font-size: 5rem; -} - -@media only screen and (min-width: 652px) { - - .has-drop-cap:not(:focus)::first-letter { - font-size: 7rem; - } + font-size: calc(1.2 * var(--heading--font-size-h1)); } .has-drop-cap:not(:focus)::after { @@ -5456,7 +3813,7 @@ table.wp-calendar-table caption { display: flex; align-items: flex-start; flex-wrap: wrap; - row-gap: 30px; + row-gap: var(--global--spacing-vertical); } .wp-custom-logo .site-header { @@ -5465,18 +3822,18 @@ table.wp-calendar-table caption { @media only screen and (min-width: 482px) { .site-header { - padding-top: 40px; + padding-top: calc(var(--global--spacing-vertical) / 0.75); } } @media only screen and (min-width: 822px) { .site-header { - padding-top: 72px; + padding-top: calc(2.4 * var(--global--spacing-vertical)); } } .site-branding { - color: #28303d; + color: var(--branding--color-text); margin-right: 140px; } @@ -5494,18 +3851,18 @@ table.wp-calendar-table caption { } .site-title { - color: #28303d; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.5rem; + color: var(--branding--color-link); + font-family: var(--branding--title--font-family); + font-size: var(--branding--title--font-size-mobile); letter-spacing: normal; - text-transform: uppercase; - line-height: 1.3; - margin-bottom: 5px; + text-transform: var(--branding--title--text-transform); + line-height: var(--global--line-height-heading); + margin-bottom: calc(var(--global--spacing-vertical) / 6); } .site-title a { color: currentColor; - font-weight: normal; + font-weight: var(--branding--title--font-weight); } .site-title a:link, @@ -5514,24 +3871,21 @@ table.wp-calendar-table caption { color: currentColor; } -.site-title a:hover { - color: #39414d; -} - +.site-title a:hover, .site-title a:focus { - color: #39414d; + color: var(--branding--color-link-hover); } @media only screen and (min-width: 482px) { .site-title { - font-size: 1.5rem; + font-size: var(--branding--title--font-size); } } .site-description { color: currentColor; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; + font-family: var(--branding--description--font-family); + font-size: var(--branding--description--font-size); line-height: 1.4; } @@ -5539,17 +3893,22 @@ a.custom-logo-link { text-decoration: none; } +.has-background-white a.custom-logo-link:focus, +.is-dark-theme a.custom-logo-link:focus { + background: none; +} + .site-title > a { - text-decoration-color: #39414d; + text-decoration-color: var(--global--color-secondary); } .site-logo { - margin: 15px 0; + margin: calc(var(--global--spacing-vertical) / 2) 0; } .site-header > .site-logo { width: 100%; - padding-bottom: 45px; + padding-bottom: calc(var(--global--spacing-vertical) * 1.5); border-bottom: 1px solid; text-align: center; } @@ -5557,8 +3916,8 @@ a.custom-logo-link { .site-logo .custom-logo { margin-left: auto; margin-right: auto; - max-width: 96px; - max-height: 96px; + max-width: var(--branding--logo--max-width-mobile); + max-height: var(--branding--logo--max-height-mobile); height: auto; display: inline-block; width: auto; @@ -5566,8 +3925,8 @@ a.custom-logo-link { @media only screen and (min-width: 482px) { .site-logo .custom-logo { - max-width: 300px; - max-height: 100px; + max-width: var(--branding--logo--max-width); + max-height: var(--branding--logo--max-height); height: auto; width: auto; } @@ -5577,9 +3936,9 @@ a.custom-logo-link { .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { position: absolute; - padding-top: 15px; + padding-top: calc(0.5 * var(--global--spacing-vertical)); margin-top: 0; - top: 0; + top: var(--global--admin-bar--height); } .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { @@ -5587,7 +3946,7 @@ a.custom-logo-link { } .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo img { - max-height: calc(10px + 2em); + max-height: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit)) + 1.7em); } .site-header.has-logo.has-title-and-tagline { @@ -5618,13 +3977,13 @@ a.custom-logo-link { body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container { position: relative; padding-top: 0; - margin-top: -10px; + margin-top: calc(0px - var(--button--padding-vertical) + (0.25 * var(--global--spacing-unit))); } body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .menu-button-container #primary-mobile-menu { - padding-left: 11px; - padding-right: 11px; - margin-right: -15px; + padding-left: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); + padding-right: calc(var(--global--spacing-horizontal) * 0.6 - 4.5px); + margin-right: calc(0px - var(--global--spacing-horizontal) * 0.6); } .site-header:not(.has-logo).has-title-and-tagline .site-branding { @@ -5639,29 +3998,35 @@ a.custom-logo-link { .site-footer { padding-top: 0; - padding-bottom: 51px; + padding-bottom: calc(1.7 * var(--global--spacing-vertical)); } .no-widgets .site-footer { - margin-top: 180px; + margin-top: calc(6 * var(--global--spacing-vertical)); +} +@media only screen and (max-width: 481px) { + + .no-widgets .site-footer { + margin-top: calc(3 * var(--global--spacing-vertical)); + } } .site-footer > .site-info { - padding-top: 30px; - color: #28303d; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - line-height: 1.7; - border-top: 3px solid #28303d; + padding-top: var(--global--spacing-vertical); + color: var(--footer--color-text); + font-family: var(--footer--font-family); + font-size: var(--footer--font-size); + line-height: var(--global--line-height-body); + border-top: 3px solid var(--global--color-border); } .site-footer > .site-info .site-name { - text-transform: uppercase; - font-size: 1.5rem; + text-transform: var(--branding--title--text-transform); + font-size: var(--branding--title--font-size); } .site-footer > .site-info .powered-by { - margin-top: 15px; + margin-top: calc(0.5 * var(--global--spacing-vertical)); } @media only screen and (min-width: 822px) { @@ -5677,37 +4042,35 @@ a.custom-logo-link { } .site-footer > .site-info a { - color: #28303d; -} - -.site-footer > .site-info a:link { - color: #28303d; -} - -.site-footer > .site-info a:visited { - color: #28303d; + color: var(--footer--color-link); } +.site-footer > .site-info a:link, +.site-footer > .site-info a:visited, .site-footer > .site-info a:active { - color: #28303d; + color: var(--footer--color-link); } .site-footer > .site-info a:hover { - color: #28303d; + color: var(--footer--color-link-hover); } .site-footer > .site-info a:focus { - color: #28303d; + color: var(--footer--color-link-hover); } .is-dark-theme .site-footer > .site-info a:focus { - color: #d1e4dd; + color: var(--wp--style--color--link, var(--global--color-background)); +} + +.has-background-white .site-footer > .site-info a:focus { + color: var(--wp--style--color--link, var(--global--color-white)); } .singular .entry-header { - border-bottom: 3px solid #28303d; - padding-bottom: 60px; - margin-bottom: 90px; + border-bottom: 3px solid var(--global--color-border); + padding-bottom: calc(2 * var(--global--spacing-vertical)); + margin-bottom: calc(3 * var(--global--spacing-vertical)); } .home .entry-header { @@ -5718,12 +4081,12 @@ a.custom-logo-link { .singular .has-post-thumbnail .entry-header { border-bottom: none; - padding-bottom: 39px; + padding-bottom: calc(1.3 * var(--global--spacing-vertical)); margin-bottom: 0; } .no-results.not-found > *:first-child { - margin-bottom: 90px; + margin-bottom: calc(3 * var(--global--spacing-vertical)); } .page-links { @@ -5732,8 +4095,8 @@ a.custom-logo-link { .page-links .post-page-numbers { display: inline-block; - margin-left: 13px; - margin-right: 13px; + margin-left: calc(0.66 * var(--global--spacing-unit)); + margin-right: calc(0.66 * var(--global--spacing-unit)); min-width: 44px; min-height: 44px; } @@ -5743,69 +4106,45 @@ a.custom-logo-link { } .entry-title { - color: #28303d; - font-size: 2.25rem; - letter-spacing: normal; - line-height: 1.3; + color: var(--entry-header--color); + font-size: var(--entry-header--font-size); + letter-spacing: var(--heading--letter-spacing-h2); + line-height: var(--heading--line-height-h2); overflow-wrap: break-word; } -@media only screen and (min-width: 652px) { - - .entry-title { - font-size: 3rem; - } -} - -@media only screen and (min-width: 652px) { - - .entry-title { - font-size: 3rem; - } -} - .entry-title a { - color: currentColor; + color: var(--entry-header--color-link); text-underline-offset: 0.15em; } .entry-title a:hover { - color: #28303d; + color: var(--entry-header--color-hover); } .entry-title a:focus { - color: #39414d; + color: var(--entry-header--color-focus); } .entry-title a:active { - color: currentColor; + color: var(--entry-header--color-link); } .singular .entry-title { - font-size: 4rem; -} - -@media only screen and (min-width: 652px) { - - .singular .entry-title { - font-size: 6rem; - } + font-size: var(--global--font-size-page-title); } h1.entry-title { - line-height: 1.1; - font-weight: 300; + line-height: var(--heading--line-height-h1); + font-weight: var(--heading--font-weight-page-title); } /** * Entry Content */ -.entry-content { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - +.entry-content, .entry-summary { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: var(--entry-content--font-family); } .entry-content p { @@ -5813,21 +4152,21 @@ h1.entry-title { } .entry-content > iframe[style] { - margin: 30px 0 !important; + margin: var(--global--spacing-vertical) 0 !important; max-width: 100% !important; } @media only screen and (min-width: 482px) { .entry-content > iframe[style] { - max-width: 30px !important; + max-width: var(--global--spacing-vertical) !important; } } .entry-footer { - color: #28303d; + color: var(--global--color-primary); clear: both; float: none; - font-size: 1rem; + font-size: var(--global--font-size-xs); display: block; } @@ -5839,12 +4178,9 @@ h1.entry-title { color: currentColor; } -.entry-footer a:hover { - color: #28303d; -} - +.entry-footer a:hover, .entry-footer a:focus { - color: #28303d; + color: var(--global--color-primary-hover); } .entry-footer a:active { @@ -5852,26 +4188,26 @@ h1.entry-title { } .site-main > article > .entry-footer { - margin-top: 30px; - padding-top: 20px; - padding-bottom: 90px; - border-bottom: 1px solid #28303d; + margin-top: var(--global--spacing-vertical); + padding-top: var(--global--spacing-unit); + padding-bottom: calc(3 * var(--global--spacing-vertical)); + border-bottom: var(--separator--height) solid var(--separator--border-color); } body:not(.single) .site-main > article:last-of-type .entry-footer { - border-bottom: 1px solid transparent; + border-bottom: var(--separator--height) solid transparent; } .single .site-main > article > .entry-footer { - margin-top: 102px; - margin-bottom: 102px; + margin-top: calc(3.4 * var(--global--spacing-vertical)); + margin-bottom: calc(3.4 * var(--global--spacing-vertical)); padding-bottom: 0; - padding-top: 24px; - border-top: 3px solid #28303d; - border-bottom: 1px solid transparent; + padding-top: calc(0.8 * var(--global--spacing-vertical)); + border-top: 3px solid var(--separator--border-color); + border-bottom: var(--separator--height) solid transparent; display: grid; grid-template-columns: repeat(2, 1fr); - column-gap: 50px; + column-gap: calc(2 * var(--global--spacing-horizontal)); } .single .site-main > article > .entry-footer .post-taxonomies, @@ -5919,7 +4255,7 @@ body:not(.single) .site-main > article:last-of-type .entry-footer { max-width: 100%; margin-left: auto; margin-right: auto; - margin-top: 60px; + margin-top: calc(2 * var(--global--spacing-vertical)); } /** @@ -5927,24 +4263,12 @@ body:not(.single) .site-main > article:last-of-type .entry-footer { */ .author-bio { position: relative; - font-size: 1rem; - max-width: calc(100vw - 30px); -} -@media only screen and (min-width: 482px) { - - .author-bio { - max-width: min(calc(100vw - 100px), 610px); - } -} -@media only screen and (min-width: 822px) { - - .author-bio { - max-width: min(calc(100vw - 200px), 610px); - } + font-size: var(--global--font-size-xs); + max-width: var(--responsive--aligndefault-width); } .site-main > article > .author-bio { - margin-top: 60px; + margin-top: calc(2 * var(--global--spacing-vertical)); } .author-bio.show-avatars .avatar { @@ -5955,132 +4279,62 @@ body:not(.single) .site-main > article:last-of-type .entry-footer { .author-bio.show-avatars .author-bio-content { display: inline-block; - padding-left: 25px; - max-width: calc(100vw - 120px); -} -@media only screen and (min-width: 482px) { - - .author-bio.show-avatars .author-bio-content { - max-width: calc(min(calc(100vw - 4 * 25px), 610px) - 90px); - } -} -@media only screen and (min-width: 822px) { - - .author-bio.show-avatars .author-bio-content { - max-width: calc(min(calc(100vw - 8 * 25px), 610px) - 90px); - } + padding-left: var(--global--spacing-horizontal); + max-width: calc(var(--responsive--aligndefault-width) - 90px); } .author-bio .author-bio-content .author-title { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.5rem; + font-family: var(--entry-author-bio--font-family); + font-size: var(--entry-author-bio--font-size); display: inline; } .author-bio .author-bio-content .author-description { - font-size: 1rem; - margin-top: 15px; - margin-bottom: 15px; + font-size: var(--global--font-size-xs); + margin-top: calc(0.5 * var(--global--spacing-vertical)); + margin-bottom: calc(0.5 * var(--global--spacing-vertical)); } .page-title { - font-size: 4rem; -} - -@media only screen and (min-width: 652px) { - - .page-title { - font-size: 6rem; - } -} - -h1.page-title { - font-weight: 300; + font-size: var(--global--font-size-page-title); } +h1.page-title, h2.page-title { - font-weight: 300; + font-weight: var(--heading--font-weight-page-title); } h1.page-title { - line-height: 1.1; + line-height: var(--heading--line-height-h1); } .page-header { - border-bottom: 3px solid #28303d; - padding-bottom: 60px; -} - -.archive .content-area .format-aside .entry-content { - font-size: 1.5rem; -} - -.archive .content-area .format-status .entry-content { - font-size: 1.5rem; -} - -.archive .content-area .format-link .entry-content { - font-size: 1.5rem; -} - -.search .content-area .format-aside .entry-content { - font-size: 1.5rem; -} - -.search .content-area .format-status .entry-content { - font-size: 1.5rem; -} - -.search .content-area .format-link .entry-content { - font-size: 1.5rem; -} - -.blog .content-area .format-aside .entry-content { - font-size: 1.5rem; -} - -.blog .content-area .format-status .entry-content { - font-size: 1.5rem; + border-bottom: 3px solid var(--global--color-border); + padding-bottom: calc(2 * var(--global--spacing-vertical)); } +.archive .content-area .format-aside .entry-content, +.archive .content-area .format-status .entry-content, +.archive .content-area .format-link .entry-content, +.search .content-area .format-aside .entry-content, +.search .content-area .format-status .entry-content, +.search .content-area .format-link .entry-content, +.blog .content-area .format-aside .entry-content, +.blog .content-area .format-status .entry-content, .blog .content-area .format-link .entry-content { - font-size: 1.5rem; -} - -.archive .format-image .entry-content { - margin-top: 60px; -} - -.archive .format-gallery .entry-content { - margin-top: 60px; -} - -.archive .format-video .entry-content { - margin-top: 60px; -} - -.search .format-image .entry-content { - margin-top: 60px; -} - -.search .format-gallery .entry-content { - margin-top: 60px; -} - -.search .format-video .entry-content { - margin-top: 60px; -} - -.blog .format-image .entry-content { - margin-top: 60px; -} - -.blog .format-gallery .entry-content { - margin-top: 60px; + font-size: var(--global--font-size-lg); } +.archive .format-image .entry-content, +.archive .format-gallery .entry-content, +.archive .format-video .entry-content, +.search .format-image .entry-content, +.search .format-gallery .entry-content, +.search .format-video .entry-content, +.blog .format-image .entry-content, +.blog .format-gallery .entry-content, .blog .format-video .entry-content { - margin-top: 60px; + margin-top: calc(2 * var(--global--spacing-vertical)); } .archive .entry-footer .cat-links, @@ -6092,46 +4346,33 @@ h1.page-title { display: block; } -.archive.logged-in .entry-footer .posted-on { - margin-right: 10px; -} - -.search.logged-in .entry-footer .posted-on { - margin-right: 10px; -} - +.archive.logged-in .entry-footer .posted-on, +.search.logged-in .entry-footer .posted-on, .blog.logged-in .entry-footer .posted-on { - margin-right: 10px; + margin-right: calc(0.5 * var(--global--spacing-unit)); } .archive-description { - margin-top: 30px; - font-size: 2.25rem; - line-height: 1.3; -} - -@media only screen and (min-width: 652px) { - - .archive-description { - font-size: 2.5rem; - } + margin-top: var(--global--spacing-vertical); + font-size: var(--global--font-size-xl); + line-height: var(--global--line-height-heading); } .error404 main p { - font-size: 1.5rem; - margin-bottom: 50px; + font-size: var(--global--font-size-lg); + margin-bottom: calc(var(--global--spacing-vertical) * 1.6666666667); } .search-no-results .page-content { - margin-top: 90px; + margin-top: calc(3 * var(--global--spacing-vertical)); } /** * Comments Wrapper */ .comments-area > * { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } .comments-area > *:first-child { @@ -6160,38 +4401,10 @@ h1.page-title { /** * Comment Title */ -.comments-title { - font-size: 2.25rem; - letter-spacing: normal; -} -@media only screen and (min-width: 652px) { - - .comments-title { - font-size: 3rem; - } -} -@media only screen and (min-width: 652px) { - - .comments-title { - font-size: 3rem; - } -} - +.comments-title, .comment-reply-title { - font-size: 2.25rem; - letter-spacing: normal; -} -@media only screen and (min-width: 652px) { - - .comment-reply-title { - font-size: 3rem; - } -} -@media only screen and (min-width: 652px) { - - .comment-reply-title { - font-size: 3rem; - } + font-size: var(--heading--font-size-h2); + letter-spacing: var(--heading--letter-spacing-h2); } .comment-reply-title { @@ -6200,8 +4413,8 @@ h1.page-title { } .comment-reply-title small a { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1rem; + font-family: var(--global--font-secondary); + font-size: var(--global--font-size-xs); font-style: normal; font-weight: normal; letter-spacing: normal; @@ -6209,7 +4422,7 @@ h1.page-title { /* Nested comment reply title*/ .comment .comment-respond .comment-reply-title { - font-size: 1.5rem; + font-size: var(--global--font-size-lg); } /** @@ -6221,8 +4434,8 @@ h1.page-title { } .comment-list > li { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } .comment-list .children { @@ -6231,18 +4444,15 @@ h1.page-title { } .comment-list .children > li { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } @media only screen and (min-width: 482px) { - .comment-list .depth-2 { - padding-left: 100px; - } - + .comment-list .depth-2, .comment-list .depth-3 { - padding-left: 100px; + padding-left: calc(4 * var(--global--spacing-horizontal)); } } @@ -6250,8 +4460,8 @@ h1.page-title { * Comment Meta */ .comment-meta .comment-author { - line-height: 1.3; - margin-bottom: 5px; + line-height: var(--global--line-height-heading); + margin-bottom: calc(0.25 * var(--global--spacing-unit)); } @media only screen and (min-width: 482px) { @@ -6262,22 +4472,22 @@ h1.page-title { } .comment-meta .comment-author .fn { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: var(--global--font-secondary); font-weight: normal; - font-size: 1.5rem; + font-size: var(--global--font-size-lg); hyphens: auto; word-wrap: break-word; word-break: break-word; } .comment-meta .comment-metadata { - color: #28303d; - font-size: 1rem; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); padding: 8px 0 9px 0; } .comment-meta .comment-metadata .edit-link { - margin-left: 25px; + margin-left: var(--global--spacing-horizontal); } @media only screen and (min-width: 482px) { @@ -6291,8 +4501,8 @@ h1.page-title { } .reply { - font-size: 1.125rem; - line-height: 1.3; + font-size: var(--global--font-size-sm); + line-height: var(--global--line-height-heading); } .bypostauthor { @@ -6303,22 +4513,19 @@ h1.page-title { display: none; } -.pingback .url { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; -} - +.pingback .url, .trackback .url { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-family: var(--global--font-primary); } .comment-body { position: relative; - margin-bottom: 51px; + margin-bottom: calc(1.7 * var(--global--spacing-vertical)); } .comment-body > * { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } .comment-body .reply { @@ -6329,23 +4536,19 @@ h1.page-title { word-wrap: break-word; } -.pingback .comment-body { - margin-top: 30px; - margin-bottom: 30px; -} - +.pingback .comment-body, .trackback .comment-body { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } .comment-respond { - margin-top: 30px; + margin-top: var(--global--spacing-vertical); } .comment-respond > * { - margin-top: 20px; - margin-bottom: 20px; + margin-top: var(--global--spacing-unit); + margin-bottom: var(--global--spacing-unit); } .comment-respond > *:first-child { @@ -6357,7 +4560,7 @@ h1.page-title { } .comment-respond > *:last-child.comment-form { - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); } .comment-author { @@ -6378,7 +4581,7 @@ h1.page-title { } .comment-form .comment-notes { - font-size: 1.125rem; + font-size: var(--global--font-size-sm); } .comment-form .comment-form-url, @@ -6399,18 +4602,14 @@ h1.page-title { } } -.comment-form .comment-form-cookies-consent > label { - font-size: 1rem; - font-weight: normal; -} - +.comment-form .comment-form-cookies-consent > label, .comment-form .comment-notes { - font-size: 1rem; + font-size: var(--global--font-size-xs); font-weight: normal; } .comment-form > p { - margin-bottom: 20px; + margin-bottom: var(--global--spacing-unit); } .comment-form > p:first-of-type { @@ -6421,44 +4620,16 @@ h1.page-title { margin-bottom: 0; } -.comment-form > p label { - display: block; - font-size: 1.125rem; - margin-bottom: 10px; - width: 100%; - font-weight: 500; -} - -.comment-form > p input[type=email] { - display: block; - font-size: 1.125rem; - margin-bottom: 10px; - width: 100%; - font-weight: 500; -} - -.comment-form > p input[type=text] { - display: block; - font-size: 1.125rem; - margin-bottom: 10px; - width: 100%; - font-weight: 500; -} - -.comment-form > p input[type=url] { - display: block; - font-size: 1.125rem; - margin-bottom: 10px; - width: 100%; - font-weight: 500; -} - +.comment-form > p label, +.comment-form > p input[type=email], +.comment-form > p input[type=text], +.comment-form > p input[type=url], .comment-form > p textarea { display: block; - font-size: 1.125rem; - margin-bottom: 10px; + font-size: var(--global--font-size-sm); + margin-bottom: calc(.5 * var(--global--spacing-unit)); width: 100%; - font-weight: 500; + font-weight: var(--form--label-weight); } .comment-form > p.comment-form-cookies-consent { @@ -6467,7 +4638,7 @@ h1.page-title { @media only screen and (min-width: 482px) { .comment-form > p.comment-form-author { - margin-right: 38px; + margin-right: calc(1.5 * var(--global--spacing-horizontal)); } .comment-form > p.comment-notes, @@ -6481,13 +4652,13 @@ h1.page-title { justify-content: space-between; position: absolute; right: 0; - padding-top: 15px; - padding-bottom: 8px; + padding-top: calc(0.5 * var(--global--spacing-vertical)); + padding-bottom: calc(0.25 * var(--global--spacing-vertical)); } .menu-button-container #primary-mobile-menu { margin-left: auto; - padding: 10px 15px; + padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); } @media only screen and (max-width: 481px) { @@ -6498,11 +4669,11 @@ h1.page-title { .menu-button-container .button.button { display: flex; - font-size: 1rem; - font-weight: 500; + font-size: var(--primary-nav--font-size-button); + font-weight: var(--primary-nav--font-weight-button); background-color: transparent; border: none; - color: #28303d; + color: var(--primary-nav--color-link); } .menu-button-container .button.button .dropdown-icon { @@ -6511,7 +4682,7 @@ h1.page-title { } .menu-button-container .button.button .dropdown-icon .svg-icon { - margin-left: 5px; + margin-left: calc(0.25 * var(--global--spacing-unit)); } .menu-button-container .button.button .dropdown-icon.open .svg-icon { @@ -6539,7 +4710,7 @@ h1.page-title { .primary-navigation-open .menu-button-container { width: 100%; z-index: 500; - background-color: #d1e4dd; + background-color: var(--global--color-background); } .primary-navigation-open .menu-button-container #primary-mobile-menu { @@ -6548,10 +4719,10 @@ h1.page-title { .primary-navigation { position: absolute; - top: 0; + top: var(--global--admin-bar--height); right: 0; - color: #28303d; - font-size: 1.25rem; + color: var(--primary-nav--color-text); + font-size: var(--primary-nav--font-size); line-height: 1.15; margin-top: 0; margin-bottom: 0; @@ -6565,13 +4736,13 @@ h1.page-title { right: 0; bottom: 0; left: 0; - padding-top: calc(2rem + 47px); - padding-left: 20px; - padding-right: 20px; - padding-bottom: 25px; - background-color: #d1e4dd; + padding-top: calc(var(--button--line-height) * var(--primary-nav--font-size-button) + 42px + 5px); + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); + padding-bottom: var(--global--spacing-horizontal); + background-color: var(--global--color-background); transition: all 0.15s ease-in-out; - transform: translateY(30px); + transform: translateY(var(--global--spacing-vertical)); } @media only screen and (max-width: 481px) { @@ -6589,27 +4760,15 @@ h1.page-title { } .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { - top: 32px; - } - @media only screen and (max-width: 782px) { - - .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { - top: 46px; - } + top: var(--global--admin-bar--height); } .admin-bar .primary-navigation > .primary-menu-container { - height: calc(100vh - 32px); - } - @media only screen and (max-width: 782px) { - - .admin-bar .primary-navigation > .primary-menu-container { - height: calc(100vh - 46px); - } + height: calc(100vh - var(--global--admin-bar--height)); } .primary-navigation > .primary-menu-container:focus { - border: 2px solid #28303d; + border: 2px solid var(--global--color-primary); } } @media only screen and (max-width: 481px) { @@ -6707,7 +4866,7 @@ h1.page-title { .primary-navigation > div > .menu-wrapper .sub-menu-toggle { display: flex; - height: calc(27px + 1em); + height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px); width: 44px; padding: 0; justify-content: center; @@ -6718,7 +4877,7 @@ h1.page-title { } .primary-navigation > div > .menu-wrapper .sub-menu-toggle:focus { - outline: 2px solid #28303d; + outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); } @media only screen and (max-width: 481px) { @@ -6767,37 +4926,26 @@ h1.page-title { z-index: 88888; } - .primary-navigation > div > .menu-wrapper > li > .sub-menu:before { - content: ""; - display: block; - position: absolute; - width: 0; - top: -10px; - left: 25px; - border-style: solid; - border-color: #28303d transparent; - border-width: 0 7px 10px 7px; - } - + .primary-navigation > div > .menu-wrapper > li > .sub-menu:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu:after { content: ""; display: block; position: absolute; width: 0; top: -10px; - left: 25px; + left: var(--global--spacing-horizontal); border-style: solid; - border-color: #28303d transparent; + border-color: var(--primary-nav--border-color) transparent; border-width: 0 7px 10px 7px; } .primary-navigation > div > .menu-wrapper > li > .sub-menu:after { top: -9px; - border-color: #d1e4dd transparent; + border-color: var(--global--color-background) transparent; } .primary-navigation > div > .menu-wrapper > li > .sub-menu li { - background: #d1e4dd; + background: var(--global--color-background); } .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left { @@ -6809,19 +4957,11 @@ h1.page-title { right: auto; } - .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before { - - /* rtl:ignore */ - left: 25px; - - /* rtl:ignore */ - right: auto; - } - + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after { /* rtl:ignore */ - left: 25px; + left: var(--global--spacing-horizontal); /* rtl:ignore */ right: auto; @@ -6836,33 +4976,25 @@ h1.page-title { left: auto; } - .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before { - - /* rtl:ignore */ - left: auto; - - /* rtl:ignore */ - right: 25px; - } - + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after { /* rtl:ignore */ left: auto; /* rtl:ignore */ - right: 25px; + right: var(--global--spacing-horizontal); } } .primary-navigation .primary-menu > .menu-item:hover > a { - color: #28303d; + color: var(--primary-nav--color-link-hover); } @media only screen and (min-width: 482px) { .primary-navigation .primary-menu-container { - margin-right: -13px; - margin-left: -13px; + margin-right: calc(0px - var(--primary-nav--padding)); + margin-left: calc(0px - var(--primary-nav--padding)); } .primary-navigation .primary-menu-container > ul > .menu-item { @@ -6870,47 +5002,41 @@ h1.page-title { } .primary-navigation .primary-menu-container > ul > .menu-item > a { - padding-left: 13px; - padding-right: 13px; + padding-left: var(--primary-nav--padding); + padding-right: var(--primary-nav--padding); } .primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle { - margin-left: -13px; + margin-left: calc(5px - var(--primary-nav--padding)); } } .primary-navigation a { display: block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.125rem; - font-weight: normal; - padding: 13px 0; + font-family: var(--primary-nav--font-family-mobile); + font-size: var(--primary-nav--font-size-mobile); + font-weight: var(--primary-nav--font-weight); + padding: var(--primary-nav--padding) 0; text-decoration: none; } @media only screen and (min-width: 482px) { .primary-navigation a { display: block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - font-weight: normal; + font-family: var(--primary-nav--font-family); + font-size: var(--primary-nav--font-size); + font-weight: var(--primary-nav--font-weight); } } .primary-navigation a + svg { - fill: #28303d; -} - -.primary-navigation a:hover { - color: #28303d; -} - -.primary-navigation a:link { - color: #28303d; + fill: var(--primary-nav--color-text); } +.primary-navigation a:hover, +.primary-navigation a:link, .primary-navigation a:visited { - color: #28303d; + color: var(--primary-nav--color-link-hover); } .primary-navigation a:hover { @@ -6922,6 +5048,7 @@ h1.page-title { position: relative; z-index: 99999; outline-offset: 0; + text-decoration-thickness: 2px; } .primary-navigation .current-menu-item > a:first-child, @@ -6940,8 +5067,8 @@ h1.page-title { margin: 0; padding: 0; list-style: none; - margin-left: 13px; - border: 1px solid #28303d; + margin-left: var(--primary-nav--padding); + border: 1px solid var(--primary-nav--border-color); } .primary-navigation .sub-menu .sub-menu { @@ -6961,16 +5088,16 @@ h1.page-title { } .primary-navigation .sub-menu .menu-item > a { - padding: 17px 13px; + padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); display: block; - font-size: 1.125rem; - font-style: normal; + font-size: var(--primary-nav--font-size-sub-menu-mobile); + font-style: var(--primary-nav--font-style-sub-menu-mobile); } @media only screen and (min-width: 482px) { .primary-navigation .sub-menu .menu-item > a { - font-size: 1rem; - font-style: normal; + font-size: var(--primary-nav--font-size-sub-menu); + font-style: var(--primary-nav--font-style); } } @@ -6992,7 +5119,7 @@ h1.page-title { .primary-navigation .menu-item-description { display: block; clear: both; - font-size: 1rem; + font-size: var(--global--font-size-xs); text-transform: none; line-height: 1.7; } @@ -7021,11 +5148,11 @@ h1.page-title { } .footer-navigation { - margin-top: 60px; - margin-bottom: 30px; - color: #28303d; - font-size: 1rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + margin-top: calc(2 * var(--global--spacing-vertical)); + margin-bottom: var(--global--spacing-vertical); + color: var(--footer--color-text); + font-size: var(--global--font-size-xs); + font-family: var(--footer--font-family); } .footer-navigation-wrapper { @@ -7042,37 +5169,35 @@ h1.page-title { } .footer-navigation-wrapper li a { - padding: 17px 13px; + padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); transition: transform 0.1s ease; - color: #28303d; -} - -.footer-navigation-wrapper li a:link { - color: #28303d; -} - -.footer-navigation-wrapper li a:visited { - color: #28303d; + color: var(--footer--color-link); } +.footer-navigation-wrapper li a:link, +.footer-navigation-wrapper li a:visited, .footer-navigation-wrapper li a:active { - color: #28303d; + color: var(--footer--color-link); } .footer-navigation-wrapper li a:hover { text-decoration: underline; text-decoration-style: dotted; text-decoration-skip-ink: none; - color: #28303d; + color: var(--footer--color-link-hover); } .is-dark-theme .footer-navigation-wrapper li a:focus .svg-icon { - fill: #d1e4dd; + fill: var(--wp--style--color--link, var(--global--color-background)); +} + +.has-background-white .footer-navigation-wrapper li a:focus .svg-icon { + fill: var(--wp--style--color--link, var(--global--color-white)); } .footer-navigation-wrapper li .svg-icon { vertical-align: middle; - fill: #28303d; + fill: var(--footer--color-link); } .footer-navigation-wrapper li .svg-icon:hover { @@ -7086,25 +5211,26 @@ h1.page-title { /* Next/Previous navigation */ .navigation { - color: #28303d; + color: var(--global--color-primary); } .navigation a { - color: #28303d; + color: var(--global--color-primary); text-decoration: none; } .navigation a:hover { - color: #28303d; + color: var(--global--color-primary-hover); text-decoration: underline; + text-decoration-style: dotted; } .navigation a:focus { - color: #39414d; + color: var(--global--color-secondary); } .navigation a:active { - color: #28303d; + color: var(--global--color-primary); } .navigation .nav-links > * { @@ -7129,18 +5255,12 @@ h1.page-title { flex-wrap: wrap; } - .navigation .nav-links .nav-next { - flex: 0 1 auto; - margin-bottom: inherit; - margin-top: inherit; - max-width: calc(50% - 10px); - } - + .navigation .nav-links .nav-next, .navigation .nav-links .nav-previous { flex: 0 1 auto; margin-bottom: inherit; margin-top: inherit; - max-width: calc(50% - 10px); + max-width: calc(50% - (0.5 * var(--global--spacing-unit))); } .navigation .nav-links .nav-next { @@ -7155,52 +5275,44 @@ h1.page-title { position: relative; } -.navigation .nav-previous .svg-icon { - top: -2px; - margin-right: 5px; -} - +.navigation .nav-previous .svg-icon, .navigation .prev .svg-icon { top: -2px; - margin-right: 5px; -} - -.navigation .nav-next .svg-icon { - top: -1px; - margin-left: 5px; + margin-right: calc(0.25 * var(--global--spacing-unit)); } +.navigation .nav-next .svg-icon, .navigation .next .svg-icon { top: -1px; - margin-left: 5px; + margin-left: calc(0.25 * var(--global--spacing-unit)); } .post-navigation { - margin: 30px auto; + margin: var(--global--spacing-vertical) auto; } @media only screen and (min-width: 822px) { .post-navigation { - margin: 30px auto; + margin: var(--global--spacing-vertical) auto; } } .post-navigation .meta-nav { - line-height: 1.7; - color: #28303d; + line-height: var(--global--line-height-body); + color: var(--global--color-primary); } .post-navigation .post-title { display: inline-block; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.5rem; - font-weight: 600; - line-height: 1.3; + font-family: var(--global--font-primary); + font-size: var(--global--font-size-lg); + font-weight: var(--pagination--font-weight-strong); + line-height: var(--global--line-height-heading); } @media only screen and (min-width: 822px) { .post-navigation .post-title { - margin: 5px 29px 0; + margin: 5px calc(24px + (0.25 * var(--global--spacing-unit))) 0; } } @media only screen and (min-width: 482px) { @@ -7210,14 +5322,10 @@ h1.page-title { } } -.post-navigation .nav-next { - margin-top: 30px; - margin-bottom: 30px; -} - +.post-navigation .nav-next, .post-navigation .nav-previous { - margin-top: 30px; - margin-bottom: 30px; + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); } .post-navigation .nav-next:first-child, @@ -7230,76 +5338,67 @@ h1.page-title { margin-bottom: 0; } -.post-navigation .nav-next:hover .post-title, -.post-navigation .nav-previous:hover .post-title { - text-decoration: underline; - text-decoration-thickness: 1px; -} - -.pagination { - border-top: 3px solid #28303d; - padding-top: 30px; - margin: 30px auto; -} - +.pagination, .comments-pagination { - border-top: 3px solid #28303d; - padding-top: 30px; - margin: 30px auto; + border-top: 3px solid var(--global--color-border); + padding-top: var(--global--spacing-vertical); + margin: var(--global--spacing-vertical) auto; } @media only screen and (min-width: 822px) { - .pagination { - margin: 30px auto; - } - + .pagination, .comments-pagination { - margin: 30px auto; + margin: var(--global--spacing-vertical) auto; } } -.pagination .nav-links { - margin-top: -30px; -} - +.pagination .nav-links, .comments-pagination .nav-links { - margin-top: -30px; -} - -.pagination .nav-links a:hover { - color: #28303d; + margin-top: calc(-1 * var(--global--spacing-vertical)); } +.pagination .nav-links a:hover, .comments-pagination .nav-links a:hover { - color: #28303d; + color: var(--pagination--color-link-hover); } -.pagination .nav-links > * { - color: #28303d; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.5rem; - font-weight: normal; - margin-top: 30px; - margin-left: 13px; - margin-right: 13px; +.is-dark-theme .pagination .nav-links a:active, +.is-dark-theme .pagination .nav-links a:hover:active, +.is-dark-theme .pagination .nav-links a:hover:focus, +.is-dark-theme .comments-pagination .nav-links a:active, +.is-dark-theme .comments-pagination .nav-links a:hover:active, +.is-dark-theme .comments-pagination .nav-links a:hover:focus { + color: var(--global--color-background); } +.has-background-white .pagination .nav-links a:active, +.has-background-white .pagination .nav-links a:hover:active, +.has-background-white .pagination .nav-links a:hover:focus, +.has-background-white .comments-pagination .nav-links a:active, +.has-background-white .comments-pagination .nav-links a:hover:active, +.has-background-white .comments-pagination .nav-links a:hover:focus { + color: var(--global--color-white); +} + +.pagination .nav-links > *, .comments-pagination .nav-links > * { - color: #28303d; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.5rem; - font-weight: normal; - margin-top: 30px; - margin-left: 13px; - margin-right: 13px; -} - -.pagination .nav-links > *.current { - border-bottom: 1px solid #28303d; + color: var(--pagination--color-text); + font-family: var(--pagination--font-family); + font-size: var(--pagination--font-size); + font-weight: var(--pagination--font-weight); + margin-top: var(--global--spacing-vertical); + margin-left: calc(0.66 * var(--global--spacing-unit)); + margin-right: calc(0.66 * var(--global--spacing-unit)); } +.pagination .nav-links > *.current, .comments-pagination .nav-links > *.current { - border-bottom: 1px solid #28303d; + text-decoration: underline; +} + +.pagination .nav-links > *:not(.dots):not(.current):hover, +.comments-pagination .nav-links > *:not(.dots):not(.current):hover { + text-decoration-style: dotted; } .pagination .nav-links > *:first-child, @@ -7351,33 +5450,33 @@ h1.page-title { } .comments-pagination { - padding-top: 20px; - margin: 90px auto; + padding-top: calc(0.66 * var(--global--spacing-vertical)); + margin: calc(3 * var(--global--spacing-vertical)) auto; } @media only screen and (min-width: 822px) { .comments-pagination { - margin: 90px auto 120px auto; + margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto; } } .comments-pagination .nav-links > * { - font-size: 1.25rem; + font-size: var(--global--font-size-md); } .widget-area { - margin-top: 180px; - padding-bottom: 10px; - color: #28303d; - font-size: 1.125rem; - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + margin-top: calc(6 * var(--global--spacing-vertical)); + padding-bottom: calc(var(--global--spacing-vertical) / 3); + color: var(--footer--color-text); + font-size: var(--footer--font-size); + font-family: var(--footer--font-family); } @media only screen and (min-width: 652px) { .widget-area { display: grid; grid-template-columns: repeat(2, 1fr); - column-gap: 50px; + column-gap: calc(2 * var(--global--spacing-horizontal)); } } @media only screen and (min-width: 1024px) { @@ -7386,6 +5485,12 @@ h1.page-title { grid-template-columns: repeat(3, 1fr); } } +@media only screen and (max-width: 481px) { + + .widget-area { + margin-top: calc(3 * var(--global--spacing-vertical)); + } +} .widget-area ul { list-style-type: none; @@ -7393,15 +5498,12 @@ h1.page-title { } .widget-area ul li { - line-height: 1.9; -} - -.widget-area ul.sub-menu { - margin-left: 13px; + line-height: var(--widget--line-height-list); } +.widget-area ul.sub-menu, .widget-area ul.children { - margin-left: 13px; + margin-left: var(--widget--spacing-menu); } .widget-area ul .sub-menu-toggle { @@ -7409,36 +5511,30 @@ h1.page-title { } .widget-area a { - color: #28303d; + color: var(--footer--color-link); text-decoration: underline; text-decoration-style: solid; text-decoration-color: currentColor; } -.widget-area a:link { - color: #28303d; -} - -.widget-area a:visited { - color: #28303d; -} - +.widget-area a:link, +.widget-area a:visited, .widget-area a:active { - color: #28303d; + color: var(--footer--color-link); } .widget-area a:hover { - color: #28303d; + color: var(--footer--color-link-hover); text-decoration-style: dotted; } .widget-area .wp-block-social-links.alignright { - margin-top: 30px; + margin-top: var(--global--spacing-vertical); justify-content: flex-end; } .widget-area .wp-block-social-links.alignleft { - margin-top: 30px; + margin-top: var(--global--spacing-vertical); } .widget-area:after { @@ -7448,66 +5544,52 @@ h1.page-title { } .widget-title { - font-size: 1.125rem; - font-weight: 700; - line-height: 1.4; + font-size: var(--global--font-size-sm); + font-weight: var(--widget--font-weight-title); + line-height: var(--widget--line-height-title); } .search-form { display: flex; flex-wrap: wrap; margin: auto; - max-width: calc(100vw - 30px); -} - -@media only screen and (min-width: 482px) { - - .search-form { - max-width: min(calc(100vw - 100px), 610px); - } -} - -@media only screen and (min-width: 822px) { - - .search-form { - max-width: min(calc(100vw - 200px), 610px); - } + max-width: var(--responsive--aligndefault-width); } .search-form > label { width: 100%; margin-bottom: 0; - font-weight: 500; + font-weight: var(--form--label-weight); } .search-form .search-field { flex-grow: 1; max-width: inherit; - margin-top: 10px; - margin-right: 17px; + margin-top: calc(var(--global--spacing-vertical) / 3); + margin-right: calc(0.66 * var(--global--spacing-horizontal)); } .search-form .search-submit { - margin-top: 10px; + margin-top: calc(var(--global--spacing-vertical) / 3); margin-left: 10px; } .widget_search > .search-form .search-field { - margin-right: -3px; + margin-right: calc(-1 * var(--button--border-width)); -webkit-appearance: none; - margin-bottom: 15px; + margin-bottom: calc(0.5 * var(--global--spacing-vertical)); } .widget_search > .search-form .search-submit { margin-left: 0; background-color: transparent; - color: #39414d; - margin-bottom: 15px; + color: var(--button--color-text-hover); + margin-bottom: calc(0.5 * var(--global--spacing-vertical)); } .widget_search > .search-form .search-submit:hover { - background-color: #39414d; - color: #d1e4dd; + background-color: var(--button--color-background); + color: var(--button--color-text); } .widget_rss a.rsswidget .rss-widget-icon { @@ -7565,46 +5647,46 @@ h1.page-title { } .has-black-color[class] { - color: #000; + color: var(--global--color-black); } .has-gray-color[class] { - color: #39414d; + color: var(--global--color-gray); } .has-dark-gray-color[class] { - color: #28303d; + color: var(--global--color-dark-gray); } .has-green-color[class] { - color: #d1e4dd; + color: var(--global--color-green); } .has-blue-color[class] { - color: #d1dfe4; + color: var(--global--color-blue); } .has-purple-color[class] { - color: #d1d1e4; + color: var(--global--color-purple); } .has-red-color[class] { - color: #e4d1d1; + color: var(--global--color-red); } .has-orange-color[class] { - color: #e4dad1; + color: var(--global--color-orange); } .has-yellow-color[class] { - color: #eeeadd; + color: var(--global--color-yellow); } .has-white-color[class] { - color: #fff; + color: var(--global--color-white); } -.has-background:not(.has-background-background-color) a:not(.wp-block-button__link), +.has-background a, .has-background p, .has-background h1, .has-background h2, @@ -7616,127 +5698,97 @@ h1.page-title { } .has-black-background-color[class] { - background-color: #000; + background-color: var(--global--color-black); } .has-gray-background-color[class] { - background-color: #39414d; + background-color: var(--global--color-gray); } .has-dark-gray-background-color[class] { - background-color: #28303d; + background-color: var(--global--color-dark-gray); } .has-green-background-color[class] { - background-color: #d1e4dd; + background-color: var(--global--color-green); } .has-blue-background-color[class] { - background-color: #d1dfe4; + background-color: var(--global--color-blue); } .has-purple-background-color[class] { - background-color: #d1d1e4; + background-color: var(--global--color-purple); } .has-red-background-color[class] { - background-color: #e4d1d1; + background-color: var(--global--color-red); } .has-orange-background-color[class] { - background-color: #e4dad1; + background-color: var(--global--color-orange); } .has-yellow-background-color[class] { - background-color: #eeeadd; + background-color: var(--global--color-yellow); } .has-white-background-color[class] { - background-color: #fff; -} - -:not(.has-text-color).has-black-background-color[class] { - color: #fff; -} - -:not(.has-text-color).has-gray-background-color[class] { - color: #fff; + background-color: var(--global--color-white); } +:not(.has-text-color).has-black-background-color[class], +:not(.has-text-color).has-gray-background-color[class], :not(.has-text-color).has-dark-gray-background-color[class] { - color: #fff; -} - -:not(.has-text-color).has-green-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-blue-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-purple-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-red-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-orange-background-color[class] { - color: #28303d; -} - -:not(.has-text-color).has-yellow-background-color[class] { - color: #28303d; + color: var(--global--color-white); } +:not(.has-text-color).has-green-background-color[class], +:not(.has-text-color).has-blue-background-color[class], +:not(.has-text-color).has-purple-background-color[class], +:not(.has-text-color).has-red-background-color[class], +:not(.has-text-color).has-orange-background-color[class], +:not(.has-text-color).has-yellow-background-color[class], :not(.has-text-color).has-white-background-color[class] { - color: #28303d; + color: var(--global--color-dark-gray); } .has-purple-to-yellow-gradient-background { - background: linear-gradient(160deg, #d1d1e4, #eeeadd); + background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow)); } .has-yellow-to-purple-gradient-background { - background: linear-gradient(160deg, #eeeadd, #d1d1e4); + background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple)); } .has-green-to-yellow-gradient-background { - background: linear-gradient(160deg, #d1e4dd, #eeeadd); + background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow)); } .has-yellow-to-green-gradient-background { - background: linear-gradient(160deg, #eeeadd, #d1e4dd); + background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green)); } .has-red-to-yellow-gradient-background { - background: linear-gradient(160deg, #e4d1d1, #eeeadd); + background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow)); } .has-yellow-to-red-gradient-background { - background: linear-gradient(160deg, #eeeadd, #e4d1d1); + background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red)); } .has-purple-to-red-gradient-background { - background: linear-gradient(160deg, #d1d1e4, #e4d1d1); + background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red)); } .has-red-to-purple-gradient-background { - background: linear-gradient(160deg, #e4d1d1, #d1d1e4); -} - -header * { - max-width: unset; -} - -main * { - max-width: unset; + background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple)); } +header *, +main *, footer * { - max-width: unset; + max-width: var(--global--spacing-measure); } html, diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css b/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css index 992ceb33b4..e3998da3ab 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css @@ -13,8 +13,8 @@ --global--color-border: #9ea1a7; } - .is-dark-theme.is-dark-theme .site a:focus, - .is-dark-theme.is-dark-theme .site a:focus .meta-nav { + .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), + .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { background: #000; color: #fff; text-decoration: none; diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css b/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css index dd2a99b729..25e7e90f51 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css @@ -13,8 +13,8 @@ --global--color-border: #9ea1a7; } - .is-dark-theme.is-dark-theme .site a:focus, - .is-dark-theme.is-dark-theme .site a:focus .meta-nav { + .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), + .is-dark-theme.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { background: #000; color: #fff; text-decoration: none; diff --git a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 3ac7269630..5658559f6f 100644 --- a/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -374,6 +374,8 @@ blockquote:before { content: "“"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); + position: absolute; + left: calc(-0.5 * var(--global--spacing-horizontal)); } blockquote .wp-block-quote__citation, @@ -416,7 +418,8 @@ video { /* Media captions */ figcaption, .wp-caption, -.wp-caption-text { +.wp-caption-text, +.wp-block-embed figcaption { color: currentColor; font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); @@ -430,7 +433,9 @@ figcaption, .alignleft .wp-caption, .alignright .wp-caption, .alignleft .wp-caption-text, -.alignright .wp-caption-text { +.alignright .wp-caption-text, +.alignleft .wp-block-embed figcaption, +.alignright .wp-block-embed figcaption { margin-bottom: 0; } @@ -474,45 +479,47 @@ a:hover { text-decoration-skip-ink: none; } -.site a:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; + text-decoration: underline 1px dotted currentColor; + text-decoration-skip-ink: none; background: rgba(255, 255, 255, 0.9); } -.is-dark-theme .site a:focus, -.is-dark-theme .site a:focus .meta-nav { +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-background)); } -.has-background-white .site a:focus { +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: rgba(0, 0, 0, 0.9); color: var(--wp--style--color--link, var(--global--color-white)); } -.has-background-white .site a:focus .meta-nav { +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-white)); } -.site a:focus.skip-link { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } -.site a:focus.skip-link:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { color: #21759b; background-color: #f1f1f1; } -.site a:focus img { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } -.has-background:not(.has-background-background-color) .has-link-color a, -.has-background:not(.has-background-background-color).has-link-color a { +.has-background .has-link-color a, +.has-background.has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } @@ -530,22 +537,6 @@ a:hover { padding: var(--button--padding-vertical) var(--button--padding-horizontal); } -.wp-block-button__link:before, -.wp-block-button__link:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.wp-block-button__link:before { - margin-bottom: -calc(.5em * var(--button--line-height) + -.38); -} - -.wp-block-button__link:after { - margin-top: -calc(.5em * var(--button--line-height) + -.39); -} - .wp-block-button__link:focus { background: transparent; outline-offset: -6px; @@ -690,6 +681,23 @@ a:hover { margin-bottom: 0; } +.wp-block-cover > .wp-block-cover__inner-container > *:first-child, +.wp-block-cover-image > .wp-block-cover__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-cover > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender), +.wp-block-cover-image > .wp-block-cover__inner-container > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-cover.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image.has-child-selected > .wp-block-cover__inner-container > *:nth-last-child(2), +.wp-block-cover-image.is-selected > .wp-block-cover__inner-container > *:nth-last-child(2) { + margin-bottom: 0; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -772,6 +780,19 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } + +.wp-block-columns > .wp-block-column > *:first-child { + margin-top: 0; +} + +.wp-block-columns > .wp-block-column > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-columns.has-child-selected > .wp-block-column > *:nth-last-child(2), +.wp-block-columns.is-selected > .wp-block-column > *:nth-last-child(2) { + margin-bottom: 0; +} @media only screen and (min-width: 652px) { .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { @@ -804,13 +825,13 @@ a:hover { } } -.wp-block[data-align=full] .wp-block-columns p:not(.has-background), -.wp-block[data-align=full] .wp-block-columns h1:not(.has-background), -.wp-block[data-align=full] .wp-block-columns h2:not(.has-background), -.wp-block[data-align=full] .wp-block-columns h3:not(.has-background), -.wp-block[data-align=full] .wp-block-columns h4:not(.has-background), -.wp-block[data-align=full] .wp-block-columns h5:not(.has-background), -.wp-block[data-align=full] .wp-block-columns h6:not(.has-background) { +.wp-block[data-align=full] > .wp-block-columns p:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h1:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h2:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h3:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h4:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h5:not(.has-background), +.wp-block[data-align=full] > .wp-block-columns h6:not(.has-background) { padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); } @@ -841,22 +862,6 @@ a:hover { display: inline-block; } -.wp-block-file .wp-block-file__button:before, -.wp-block-file .wp-block-file__button:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.wp-block-file .wp-block-file__button:before { - margin-bottom: -calc(.5em * var(--button--line-height) + -.38); -} - -.wp-block-file .wp-block-file__button:after { - margin-top: -calc(.5em * var(--button--line-height) + -.39); -} - .wp-block-file .wp-block-file__button:focus { background: transparent; outline-offset: -6px; @@ -923,7 +928,16 @@ a:hover { margin-left: calc(-1 * var(--global--spacing-vertical)); } -.wp-block-group .wp-block-group__inner-container > *:last-child { +.wp-block-group > .wp-block-group__inner-container > *:first-child { + margin-top: 0; +} + +.wp-block-group > .wp-block-group__inner-container > *:last-child:not(.block-list-appender) { + margin-bottom: 0; +} + +.wp-block-group.has-child-selected > .wp-block-group__inner-container > *:nth-last-child(2), +.wp-block-group.is-selected > .wp-block-group__inner-container > *:nth-last-child(2) { margin-bottom: 0; } @@ -1304,18 +1318,23 @@ dt { margin-bottom: 0; } -.wp-block-media-text .wp-block-media-text__content { - padding: var(--global--spacing-horizontal); -} - -.wp-block-media-text .wp-block-media-text__content [data-block]:first-child { +.wp-block-media-text > .wp-block-media-text__content > *:first-child { margin-top: 0; } -.wp-block-media-text .wp-block-media-text__content [data-block]:last-child { +.wp-block-media-text > .wp-block-media-text__content > *:last-child:not(.block-list-appender) { margin-bottom: 0; } +.wp-block-media-text.has-child-selected > .wp-block-media-text__content > *:nth-last-child(2), +.wp-block-media-text.is-selected > .wp-block-media-text__content > *:nth-last-child(2) { + margin-bottom: 0; +} + +.wp-block-media-text .wp-block-media-text__content { + padding: var(--global--spacing-horizontal); +} + .wp-block-media-text.is-style-twentytwentyone-border { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } @@ -1377,6 +1396,8 @@ pre.wp-block-preformatted { color: currentColor; content: "“"; display: block; + position: relative; + left: 0; font-size: 3rem; font-weight: 500; line-height: 1; @@ -1453,6 +1474,11 @@ pre.wp-block-preformatted { padding: 0 calc(2 * var(--global--spacing-unit)); } +.wp-block[data-align=left] .wp-block-pullquote.is-style-solid-color, +.wp-block[data-align=right] .wp-block-pullquote.is-style-solid-color { + padding: var(--global--spacing-unit); +} + .wp-block-quote { position: relative; border-left: none; @@ -1475,7 +1501,6 @@ pre.wp-block-preformatted { content: "“"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); - position: absolute; left: calc(-0.5 * var(--global--spacing-horizontal)); } @@ -1485,9 +1510,9 @@ pre.wp-block-preformatted { font-style: var(--quote--font-style-cite); } -.has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, -[style*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, +.has-background .wp-block-quote .wp-block-quote__citation, +[class*=background-color] .wp-block-quote .wp-block-quote__citation, +[style*=background-color] .wp-block-quote .wp-block-quote__citation, .wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation { color: currentColor; } @@ -1499,9 +1524,15 @@ pre.wp-block-preformatted { } .wp-block-quote.has-text-align-right:before { + display: none; +} + +.wp-block-quote.has-text-align-right p:before { content: "”"; - left: initial; - right: calc(-0.5 * var(--global--spacing-horizontal)); + font-size: var(--quote--font-size); + font-weight: normal; + line-height: var(--quote--line-height); + margin-right: 5px; } .wp-block-quote.has-text-align-center { @@ -1537,8 +1568,16 @@ pre.wp-block-preformatted { .wp-block-quote.is-large.has-text-align-right:before, .wp-block-quote.is-style-large.has-text-align-right:before { - left: initial; - right: calc(-1 * var(--global--spacing-horizontal)); + display: none; +} + +.wp-block-quote.is-large.has-text-align-right p:before, +.wp-block-quote.is-style-large.has-text-align-right p:before { + content: "”"; + font-size: var(--quote--font-size-large); + font-weight: normal; + line-height: var(--quote--line-height-large); + margin-right: 10px; } @media only screen and (max-width: 481px) { @@ -1757,22 +1796,6 @@ pre.wp-block-preformatted { color: var(--button--color-text-hover); } -.wp-block-search .wp-block-search__button:before, -.wp-block-search .wp-block-search__button:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.wp-block-search .wp-block-search__button:before { - margin-bottom: -calc(.5em * var(--button--line-height) + -.38); -} - -.wp-block-search .wp-block-search__button:after { - margin-top: -calc(.5em * var(--button--line-height) + -.39); -} - .wp-block-search .wp-block-search__button:focus { background: transparent; outline-offset: -6px; @@ -1983,13 +2006,13 @@ hr.is-style-dots:before { color: var(--separator--border-color); } -.has-background:not(.has-background-background-color) .wp-block-separator, -[class*=background-color]:not(.has-background-background-color) .wp-block-separator, -[style*=background-color]:not(.has-background-background-color) .wp-block-separator, +.has-background .wp-block-separator, +[class*=background-color] .wp-block-separator, +[style*=background-color] .wp-block-separator, .wp-block-cover[style*=background-image] .wp-block-separator, -.has-background:not(.has-background-background-color) hr, -[class*=background-color]:not(.has-background-background-color) hr, -[style*=background-color]:not(.has-background-background-color) hr, +.has-background hr, +[class*=background-color] hr, +[style*=background-color] hr, .wp-block-cover[style*=background-image] hr { border-color: currentColor; } @@ -2178,7 +2201,7 @@ pre.wp-block-verse { color: var(--global--color-secondary); } -.has-background:not(.has-background-background-color) a:not(.wp-block-button__link), +.has-background a, .has-background p, .has-background h1, .has-background h2, @@ -2209,23 +2232,11 @@ pre.wp-block-verse { color: var(--global--color-primary); } -/** - * Spacing Overrides - */ [data-block] { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); } -[data-block] [data-block]:first-child { - margin-top: 0; -} - -[data-block] [data-block]:nth-last-child(2) { - margin-bottom: 0; -} - -/* Block Alignments */ .wp-block { max-width: var(--responsive--aligndefault-width); } @@ -2274,6 +2285,14 @@ pre.wp-block-verse { } } +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + border: none; +} + +.wp-block-freeform.block-library-rich-text__tinymce blockquote:before { + left: 5px; +} + html { font-family: var(--global--font-secondary); line-height: var(--global--line-height-body); @@ -2303,8 +2322,8 @@ body { text-decoration: none; } -.has-background:not(.has-background-background-color) .has-link-color a, -.has-background:not(.has-background-background-color).has-link-color a { +.has-background .has-link-color a, +.has-background.has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } @@ -2353,7 +2372,7 @@ a { color: var(--global--color-white); } -.has-background:not(.has-background-background-color) a:not(.wp-block-button__link), +.has-background a, .has-background p, .has-background h1, .has-background h2, diff --git a/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js b/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js index eb4c9ec393..a9d9a6f69c 100644 --- a/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js +++ b/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js @@ -15,17 +15,21 @@ if ( isDark ) { document.body.classList.add( 'is-dark-theme' ); document.documentElement.classList.add( 'is-dark-theme' ); + document.body.classList.remove( 'is-light-theme' ); + document.documentElement.classList.remove( 'is-light-theme' ); document.documentElement.classList.remove( 'respect-color-scheme-preference' ); } else { document.body.classList.remove( 'is-dark-theme' ); document.documentElement.classList.remove( 'is-dark-theme' ); + document.body.classList.add( 'is-light-theme' ); + document.documentElement.classList.add( 'is-light-theme' ); if ( wp.customize( 'respect_user_color_preference' ).get() ) { document.documentElement.classList.add( 'respect-color-scheme-preference' ); } } // Toggle the white background class. - if ( '#ffffff' === to.toLowerCase() ) { + if ( 225 <= lum ) { document.body.classList.add( 'has-background-white' ); } else { document.body.classList.remove( 'has-background-white' ); diff --git a/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js b/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js index a7858752a8..7f6130f7e7 100644 --- a/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js +++ b/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js @@ -41,10 +41,19 @@ function twentytwentyoneCollapseMenuOnClickOutside( event ) { */ function twentytwentyoneSubmenuPosition( li ) { var subMenu = li.querySelector( 'ul.sub-menu' ), - rect = subMenu.getBoundingClientRect(), - right = Math.round( rect.right ), - left = Math.round( rect.left ), - windowWidth = Math.round( window.innerWidth ); + rect, + right, + left, + windowWidth; + + if ( ! subMenu ) { + return; + } + + rect = subMenu.getBoundingClientRect(); + right = Math.round( rect.right ); + left = Math.round( rect.left ); + windowWidth = Math.round( window.innerWidth ); if ( right > windowWidth ) { subMenu.classList.add( 'submenu-reposition-right' ); diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/extends.scss b/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/extends.scss deleted file mode 100644 index c15430961e..0000000000 --- a/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/extends.scss +++ /dev/null @@ -1,42 +0,0 @@ -/* Button extends */ -// Button Placeholder style -// - Since buttons appear in various blocks, -// let’s use a placeholder to keep them all -// in-sync -%button-style { - @include crop-text(var(--button--line-height)); - color: var(--button--color-text); - cursor: pointer; - font-weight: var(--button--font-weight); - font-family: var(--button--font-family); - font-size: var(--button--font-size); - background-color: var(--button--color-background); - border-radius: var(--button--border-radius); - border: var(--button--border-width) solid var(--button--color-background); - text-decoration: none; - padding: var(--button--padding-vertical) var(--button--padding-horizontal); - - &:active { - color: var(--button--color-text-active); - background-color: var(--button--color-background-active); - } - - &:hover { - color: var(--button--color-text-hover); - background: transparent; - } - - &:focus, - &.has-focus { - outline-offset: -6px; - outline: 2px dotted currentColor; - } - - &:disabled { - background-color: var(--global--color-white-50); - border-color: var(--global--color-white-50); - color: var(--button--color-text-active); - } - -} - diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss b/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss index 6988a8e6e4..a48e532a64 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss @@ -17,35 +17,10 @@ } } -// Crop Text Boundry -// - Sets a fixed-width on content within alignwide and alignfull blocks -@mixin crop-text($inset-line-height: 1) { - - line-height: $inset-line-height; - $offset-top: calc(.5em * #{$inset-line-height} + -.38); - $offset-bottom: calc(.5em * #{$inset-line-height} + -.39); - - &:before, - &:after { - content: ""; - display: block; - height: 0; - width: 0; - } - - &:before { - margin-bottom: -($offset-top); - } - - &:after { - margin-top: -($offset-bottom); - } -} - // Button style // - Applies button styles to blocks and elements that share them. @mixin button-style() { - @include crop-text(var(--button--line-height)); + line-height: var(--button--line-height); color: var(--button--color-text); cursor: pointer; font-weight: var(--button--font-weight); @@ -77,3 +52,22 @@ color: var(--button--color-text-active); } } + +@mixin innerblock-margin-clear($container) { + + // Clear the top margin for the first-child. + > #{$container} > *:first-child { + margin-top: 0; + } + + // Last child that is not the appender. + > #{$container} > *:last-child:not(.block-list-appender) { + margin-bottom: 0; + } + + // When selected, the last item becomes the second last because of the appender. + &.has-child-selected > #{$container} > *:nth-last-child(2), + &.is-selected > #{$container} > *:nth-last-child(2) { + margin-bottom: 0; + } +} diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss index 70787ac2ea..e599b0b206 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss @@ -59,6 +59,8 @@ blockquote { content: "\201C"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); + position: absolute; + left: calc(-0.5 * var(--global--spacing-horizontal)); } .wp-block-quote__citation, diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss index 7a0f83e0a6..08880c830f 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss @@ -34,7 +34,6 @@ input[type="color"], .is-dark-theme & { background: var(--global--color-white-90); } - } // Reset the negative offset from normalize to make the thicker "border" work on focus. @@ -216,8 +215,8 @@ input[type="radio"] + label { input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; border: 3px solid var(--form--color-ranged); - height: 25px; - width: 25px; + height: 44px; + width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; @@ -225,11 +224,12 @@ input[type="radio"] + label { input[type="range"]::-moz-range-thumb { border: 3px solid var(--form--color-ranged); - height: 25px; - width: 25px; + height: 44px; + width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; + box-sizing: border-box; } } @@ -256,8 +256,8 @@ input[type="range"]::-ms-fill-lower { input[type="range"]::-ms-thumb { border: 3px solid var(--form--color-ranged); - height: 25px; - width: 25px; + height: 44px; + width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss index 3e7355bd47..05b93f9d93 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss @@ -15,11 +15,13 @@ a:hover { text-decoration-skip-ink: none; } -.site a:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; + text-decoration: underline 1px dotted currentColor; + text-decoration-skip-ink: none; background: rgba(255, 255, 255, .9); // Change text color when the body background is dark. @@ -57,7 +59,7 @@ a:hover { // Enforce the custom link color even if a custom background color has been set. // The extra specificity here is required to override the background color styles. -.has-background:not(.has-background-background-color) { +.has-background { // Target both current level and nested block. .has-link-color a, &.has-link-color a { diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss index 8db3acf657..9eb8d419d0 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss @@ -17,11 +17,11 @@ video { max-width: 100%; } - /* Media captions */ figcaption, .wp-caption, -.wp-caption-text { +.wp-caption-text, +.wp-block-embed figcaption { color: currentColor; font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss index b6c257806e..7e259aadfb 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss @@ -10,6 +10,8 @@ max-width: inherit; } + @include innerblock-margin-clear(".wp-block-column"); + &.is-style-twentytwentyone-columns-overlap { @include media(laptop) { @@ -50,7 +52,7 @@ } } - .wp-block[data-align="full"] & { + .wp-block[data-align="full"] > & { p:not(.has-background), h1:not(.has-background), diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss index f7d1b1aa7c..9be38c1876 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss @@ -15,6 +15,8 @@ margin-bottom: 0; } + @include innerblock-margin-clear(".wp-block-cover__inner-container"); + .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text, diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss index 4891864608..bc66c0ae8b 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss @@ -18,11 +18,11 @@ .wp-block-cover__inner-container, .wp-block-cover-image-text, .wp-block-cover-text { - color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss + color: currentColor; // Uses text color specified with background-color options in 07-utilities\color-palette.scss margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); - a { + a:not(.wp-block-button__link):not(.wp-block-file__button) { color: currentColor; } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss index 159c57a8c2..c3f2bd6260 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss @@ -36,9 +36,7 @@ } } - .wp-block-group__inner-container > *:last-child { - margin-bottom: 0; - } + @include innerblock-margin-clear(".wp-block-group__inner-container"); } .wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss index 3f3a5fcf5c..583dc3d9c8 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss @@ -5,16 +5,10 @@ margin-bottom: 0; } + @include innerblock-margin-clear(".wp-block-media-text__content"); + .wp-block-media-text__content { padding: var(--global--spacing-horizontal); - - [data-block]:first-child { - margin-top: 0; - } - - [data-block]:last-child { - margin-bottom: 0; - } } // Block Styles diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss index 490c8a1dfe..5b223b19e2 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss @@ -12,6 +12,8 @@ color: currentColor; content: "\201C"; display: block; + position: relative; // Override the absolute position. + left: 0; font-size: 3rem; font-weight: 500; line-height: 1; @@ -94,3 +96,11 @@ } } } + +.wp-block[data-align="left"], +.wp-block[data-align="right"] { + + .wp-block-pullquote.is-style-solid-color { + padding: var(--global--spacing-unit); + } +} diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss index 6433e76663..ad0bc2cb9d 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss @@ -4,12 +4,16 @@ border-width: var(--pullquote--border-width); border-bottom-style: solid; border-top-style: solid; + color: currentColor; + border-color: currentColor; position: relative; blockquote::before { color: currentColor; content: "\201C"; display: block; + position: relative; // Override the absolute position. + left: 0; font-size: 3rem; font-weight: 500; line-height: 1; @@ -46,7 +50,7 @@ background: none; } - &.alignleft { + &.alignleft:not(.is-style-solid-color) { blockquote:before, cite { @@ -57,7 +61,6 @@ &.alignwide > p, &.alignwide blockquote { max-width: var(--responsive--alignwide-width); - } &.alignfull:not(.is-style-solid-color) > p, @@ -72,7 +75,7 @@ border-style: solid; border-color: var(--pullquote--border-color); - @media ( min-width: 600px ) { + @media (min-width: 600px) { padding: calc(5 * var(--global--spacing-unit)); } @@ -81,6 +84,7 @@ } blockquote { + margin: 0; max-width: inherit; p { @@ -93,5 +97,14 @@ footer { color: currentColor; } + + &.alignleft, + &.alignright { + padding: var(--global--spacing-unit); + + blockquote { + max-width: initial; + } + } } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss index 93aeedca61..4a33767653 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss @@ -19,7 +19,6 @@ content: "\201C"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); - position: absolute; left: calc(-0.5 * var(--global--spacing-horizontal)); } @@ -28,9 +27,9 @@ font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); - .has-background:not(.has-background-background-color) &, - [class*="background-color"]:not(.has-background-background-color) &, - [style*="background-color"]:not(.has-background-background-color) &, + .has-background &, + [class*="background-color"] &, + [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { color: currentColor; } @@ -41,10 +40,18 @@ padding-right: 0; border-right: none; + // Hide the left aligned quote. &:before { + display: none; + } + + // Align the quote left of the text. + p:before { content: "\201D"; - left: initial; - right: calc(-0.5 * var(--global--spacing-horizontal)); + font-size: var(--quote--font-size); + font-weight: normal; + line-height: var(--quote--line-height); + margin-right: 5px; } } @@ -78,9 +85,18 @@ &.has-text-align-right { + // Hide the left aligned quote. &:before { - left: initial; - right: calc(-1 * var(--global--spacing-horizontal)); + display: none; + } + + // Align the quote left of the text. + p:before { + content: "\201D"; + font-size: var(--quote--font-size-large); + font-weight: normal; + line-height: var(--quote--line-height-large); + margin-right: 10px; } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss index 4f6661e43b..8d8e3c44e5 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss @@ -1,11 +1,19 @@ .wp-block-quote { + border-left: none; + + &:before { + content: "\201C"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + left: 8px; + } .wp-block-quote__citation, cite, footer { - .has-background:not(.has-background-background-color) &, - [class*="background-color"]:not(.has-background-background-color) &, + .has-background &, + [class*="background-color"] &, [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { color: currentColor; @@ -20,10 +28,18 @@ padding-right: 0; border-right: none; + // Hide the left aligned quote. &:before { + display: none; + } + + // Align the quote left of the text. + p:before { content: "\201D"; - left: initial; - right: calc(-0.5 * var(--global--spacing-horizontal)); + font-size: var(--quote--font-size); + font-weight: normal; + line-height: var(--quote--line-height); + margin-right: 5px; } } @@ -58,9 +74,18 @@ &.has-text-align-right { + // Hide the left aligned quote. &:before { - left: initial; - right: calc(-1 * var(--global--spacing-horizontal)); + display: none; + } + + // Align the quote left of the text. + p:before { + content: "\201D"; + font-size: var(--quote--font-size-large); + font-weight: normal; + line-height: var(--quote--line-height-large); + margin-right: 10px; } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss index 31f9e545fa..f733715aa1 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss @@ -1,13 +1,6 @@ .wp-block-search { max-width: var(--responsive--aligndefault-width); - &__button-inside { - - .wp-block-search__inside-wrapper { - background-color: var(--global--color-white); - } - } - &__button-only.aligncenter { .wp-block-search__inside-wrapper { @@ -35,8 +28,8 @@ border-color: var(--form--border-color); } - .has-background:not(.has-background-background-color) &, - [class*="background-color"]:not(.has-background-background-color) &, + .has-background &, + [class*="background-color"] &, [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { border-color: currentColor; @@ -113,6 +106,25 @@ &.wp-block-search__button-inside { + .wp-block-search__inside-wrapper { + background-color: var(--global--color-white); + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); + + .wp-block-search__input { + margin-right: 0; + + &:focus { + outline: 2px dotted var(--form--border-color); + outline-offset: -5px; + + .is-dark-theme & { + outline-color: currentColor; + } + } + } + } + &.wp-block-search__text-button { button.wp-block-search__button { diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss index 68d9736a78..dc5b2bd96f 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss @@ -39,9 +39,9 @@ hr { } } - .has-background:not(.has-background-background-color) &, - [class*="background-color"]:not(.has-background-background-color) &, - [style*="background-color"]:not(.has-background-background-color) &, + .has-background &, + [class*="background-color"] &, + [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { border-color: currentColor; } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss index 396567d183..c088d3eba4 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss @@ -7,9 +7,17 @@ hr { &.wp-block-separator { border-bottom: var(--separator--height) solid var(--separator--border-color); + opacity: 1; &:not(.is-style-dots):not(.alignwide) { max-width: var(--responsive--aligndefault-width); + } + + &:not(.is-style-dots) { + + &.alignwide { + max-width: var(--responsive--alignwide-width); + } &.alignfull { max-width: var(--responsive--alignfull-width); @@ -42,8 +50,8 @@ hr { } } - .has-background:not(.has-background-background-color) &, - [class*="background-color"]:not(.has-background-background-color) &, + .has-background &, + [class*="background-color"] &, [style*="background-color"] &, .wp-block-cover[style*="background-image"] & { border-color: currentColor; diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss index c292e67cd5..82f6d8f829 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss @@ -1,11 +1,18 @@ -.wp-block-social-links.is-style-twentytwentyone-social-icons-color { +.wp-block-social-links { - a { + a:focus { color: var(--global--color-primary); } - .wp-social-link { - background: none; - } + &.is-style-twentytwentyone-social-icons-color { + a { + color: var(--global--color-primary); + } + + .wp-social-link { + background: none; + } + + } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss index 3d963ca193..ca1b43080d 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss @@ -26,7 +26,6 @@ } // Gutenberg text color options - .has-primary-color[class] { color: var(--global--color-primary); } @@ -38,7 +37,7 @@ // Gutenberg background-color options .has-background { - &:not(.has-background-background-color) a:not(.wp-block-button__link), + a, p, h1, h2, @@ -70,25 +69,13 @@ color: var(--global--color-primary); } -/** - * Spacing Overrides - */ - +// Spacing Overrides [data-block] { margin-top: var(--global--spacing-vertical); margin-bottom: var(--global--spacing-vertical); - - [data-block]:first-child { - margin-top: 0; - } - - // Needs to be the second-last child to avoid applying this to the appender. - [data-block]:nth-last-child(2) { - margin-bottom: 0; - } } -/* Block Alignments */ +// Block Alignments .wp-block { // Gutenberg injects a rule that limits the max width of .wp-block to 580px @@ -141,3 +128,13 @@ margin-left: var(--global--spacing-horizontal); } } + +// Remove the border of blockquotes inside the classic block. +.wp-block-freeform.block-library-rich-text__tinymce blockquote { + border: none; +} + +// Adjust the position of the quote symbol for blockquotes inside the classic block. +.wp-block-freeform.block-library-rich-text__tinymce blockquote:before { + left: 5px; +} diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss index 099df49a61..0279484b86 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss @@ -30,7 +30,7 @@ body { // Enforce the custom link color even if a custom background color has been set. // The extra specificity here is required to override the background color styles. -.has-background:not(.has-background-background-color) { +.has-background { // Target both current level and nested block. .has-link-color a, &.has-link-color a { diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss index 9c05ea1cb7..ed24fd03d7 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss @@ -45,6 +45,14 @@ fill: var(--wp--style--color--link, var(--global--color-background)); } } + + // Change colors when the body background is white. + .has-background-white & { + + .svg-icon { + fill: var(--wp--style--color--link, var(--global--color-white)); + } + } } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer.scss index 85f85a3a29..6223c3446a 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/footer.scss @@ -8,6 +8,13 @@ .no-widgets & { margin-top: calc(6 * var(--global--spacing-vertical)); } + + @include media(mobile-only) { + + .no-widgets & { + margin-top: calc(3 * var(--global--spacing-vertical)); + } + } } // Footer Branding @@ -57,6 +64,11 @@ .is-dark-theme & { color: var(--wp--style--color--link, var(--global--color-background)); } + + // Change colors when the body background is white. + .has-background-white & { + color: var(--wp--style--color--link, var(--global--color-white)); + } } } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss index bea7994e9d..58dd2e6cec 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss @@ -79,6 +79,14 @@ a.custom-logo-link { text-decoration: none; + + &:focus { + // Change colors when the body background is white. + .has-background-white &, + .is-dark-theme & { + background: none; + } + } } .site-title > a { @@ -86,7 +94,6 @@ a.custom-logo-link { } // Site logo - .site-logo { margin: calc(var(--global--spacing-vertical) / 2) 0; diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss index 777cd97e1e..88919dc350 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss @@ -374,7 +374,7 @@ padding-right: var(--primary-nav--padding); + .sub-menu-toggle { - margin-left: calc(0px - var(--primary-nav--padding)); + margin-left: calc(5px - var(--primary-nav--padding)); } } } @@ -416,6 +416,7 @@ position: relative; z-index: 99999; // Ensure focus styles appear above absolute positioned elements outline-offset: 0; + text-decoration-thickness: 2px; } } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss index e3bcf54029..0f3029c40c 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss @@ -11,6 +11,7 @@ &:hover { color: var(--global--color-primary-hover); text-decoration: underline; + text-decoration-style: dotted; } &:focus { @@ -123,16 +124,7 @@ &:last-child { margin-bottom: 0; } - - &:hover { - - .post-title { - text-decoration: underline; - text-decoration-thickness: 1px; - } - } } - } // Index/archive navigation @@ -157,6 +149,23 @@ color: var(--pagination--color-link-hover); } + .is-dark-theme & { + + a:active, + a:hover:active, + a:hover:focus { + color: var(--global--color-background); + } + } + + .has-background-white & { + + a:active, + a:hover:active, + a:hover:focus { + color: var(--global--color-white); + } + } } .nav-links > * { @@ -169,7 +178,11 @@ margin-right: calc(0.66 * var(--global--spacing-unit)); &.current { - border-bottom: 1px solid var(--pagination--color-text); + text-decoration: underline; + } + + &:not(.dots):not(.current):hover { + text-decoration-style: dotted; } &:first-child { @@ -227,5 +240,4 @@ .nav-links > * { font-size: var(--global--font-size-md); } - } diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss index bbaf6acda5..4dd3c3f6e8 100755 --- a/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss @@ -16,6 +16,10 @@ grid-template-columns: repeat(3, 1fr); } + @include media(mobile-only) { + margin-top: calc(3 * var(--global--spacing-vertical)); + } + ul { list-style-type: none; padding: 0; diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss b/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss index fecac08472..b5e5e24d1b 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss @@ -43,7 +43,7 @@ // Gutenberg background-color options .has-background { - &:not(.has-background-background-color) a:not(.wp-block-button__link), + a, p, h1, h2, diff --git a/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss b/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss index f2848883b8..18f0033e7e 100644 --- a/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss +++ b/src/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss @@ -12,8 +12,8 @@ --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; - .site a:focus, - .site a:focus .meta-nav { + .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), + .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { background: #000; color: #fff; text-decoration: none; diff --git a/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php b/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php index 89d1b637dd..9bb5cff8e5 100644 --- a/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php +++ b/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php @@ -168,13 +168,15 @@ class Twenty_Twenty_One_Custom_Colors { */ public function body_class( $classes ) { $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); - if ( 127 > self::get_relative_luminance_from_hex( $background_color ) ) { + $luminance = self::get_relative_luminance_from_hex( $background_color ); + + if ( 127 > $luminance ) { $classes[] = 'is-dark-theme'; } else { $classes[] = 'is-light-theme'; } - if ( 'ffffff' === strtolower( $background_color ) ) { + if ( 225 <= $luminance ) { $classes[] = 'has-background-white'; } diff --git a/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php b/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php index 04049792eb..88255fc709 100644 --- a/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php +++ b/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php @@ -65,7 +65,7 @@ class Twenty_Twenty_One_Dark_Mode { // Add Dark Mode variable overrides. wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', - '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); }' + '.is-dark-theme.is-dark-theme .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); --button--color-text: var(--global--color-background); --button--color-text-hover: var(--global--color-secondary); --button--color-text-active: var(--global--color-secondary); --button--color-background: var(--global--color-secondary); --button--color-background-active: var(--global--color-background); --global--color-border: #9ea1a7; }' ); } wp_enqueue_script( @@ -182,7 +182,13 @@ class Twenty_Twenty_One_Dark_Mode { ) ); - $description = '

' . __( 'Dark Mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text. Learn more about Dark Mode.', 'twentytwentyone' ) . '

'; + $description = '

'; + $description .= sprintf( + // translators: %s is the wordpress.org Twenty Twenty-One support article URL. + __( 'Dark Mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text. Learn more about Dark Mode.', 'twentytwentyone' ), + __( 'https://wordpress.org/support/article/twenty-twenty-one/', 'twentytwentyone' ) + ); + $description .= '

'; $description .= '

' . __( 'Dark Mode can also be turned on and off with a button that you can find in the bottom right corner of the page.', 'twentytwentyone' ) . '

'; $wp_customize->add_control( diff --git a/src/wp-content/themes/twentytwentyone/functions.php b/src/wp-content/themes/twentytwentyone/functions.php index e9f3fb6c2f..fa0cfbf1b3 100644 --- a/src/wp-content/themes/twentytwentyone/functions.php +++ b/src/wp-content/themes/twentytwentyone/functions.php @@ -272,42 +272,42 @@ if ( ! function_exists( 'twenty_twenty_one_setup' ) ) { array( array( 'name' => esc_html__( 'Purple to yellow', 'twentytwentyone' ), - 'gradient' => 'linear-gradient(160deg, ' . $purple . ', ' . $yellow . ')', + 'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $yellow . ' 100%)', 'slug' => 'purple-to-yellow', ), array( 'name' => esc_html__( 'Yellow to purple', 'twentytwentyone' ), - 'gradient' => 'linear-gradient(160deg, ' . $yellow . ', ' . $purple . ')', + 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $purple . ' 100%)', 'slug' => 'yellow-to-purple', ), array( 'name' => esc_html__( 'Green to yellow', 'twentytwentyone' ), - 'gradient' => 'linear-gradient(160deg, ' . $green . ', ' . $yellow . ')', + 'gradient' => 'linear-gradient(160deg, ' . $green . ' 0%, ' . $yellow . ' 100%)', 'slug' => 'green-to-yellow', ), array( 'name' => esc_html__( 'Yellow to green', 'twentytwentyone' ), - 'gradient' => 'linear-gradient(160deg, ' . $yellow . ', ' . $green . ')', + 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $green . ' 100%)', 'slug' => 'yellow-to-green', ), array( 'name' => esc_html__( 'Red to yellow', 'twentytwentyone' ), - 'gradient' => 'linear-gradient(160deg, ' . $red . ', ' . $yellow . ')', + 'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $yellow . ' 100%)', 'slug' => 'red-to-yellow', ), array( 'name' => esc_html__( 'Yellow to red', 'twentytwentyone' ), - 'gradient' => 'linear-gradient(160deg, ' . $yellow . ', ' . $red . ')', + 'gradient' => 'linear-gradient(160deg, ' . $yellow . ' 0%, ' . $red . ' 100%)', 'slug' => 'yellow-to-red', ), array( 'name' => esc_html__( 'Purple to red', 'twentytwentyone' ), - 'gradient' => 'linear-gradient(160deg, ' . $purple . ', ' . $red . ')', + 'gradient' => 'linear-gradient(160deg, ' . $purple . ' 0%, ' . $red . ' 100%)', 'slug' => 'purple-to-red', ), array( 'name' => esc_html__( 'Red to purple', 'twentytwentyone' ), - 'gradient' => 'linear-gradient(160deg, ' . $red . ', ' . $purple . ')', + 'gradient' => 'linear-gradient(160deg, ' . $red . ' 0%, ' . $purple . ' 100%)', 'slug' => 'red-to-purple', ), ) @@ -333,7 +333,7 @@ if ( ! function_exists( 'twenty_twenty_one_setup' ) ) { add_theme_support( 'experimental-link-color' ); // Add support for experimental cover block spacing. - add_theme_support( 'experimental-custom-spacing' ); + add_theme_support( 'custom-spacing' ); // Add support for custom units. // This was removed in WordPress 5.6 but is still required to properly support WP 5.5. diff --git a/src/wp-content/themes/twentytwentyone/inc/block-patterns.php b/src/wp-content/themes/twentytwentyone/inc/block-patterns.php index aed657d625..4651912948 100644 --- a/src/wp-content/themes/twentytwentyone/inc/block-patterns.php +++ b/src/wp-content/themes/twentytwentyone/inc/block-patterns.php @@ -114,7 +114,7 @@ if ( function_exists( 'register_block_pattern' ) ) { 'title' => esc_html__( 'Contact information', 'twentytwentyone' ), 'categories' => array( 'twentytwentyone' ), 'description' => esc_html_x( 'A block with 3 columns that display contact information and social media links.', 'Block pattern description', 'twentytwentyone' ), - 'content' => '

' . esc_html_x( 'example@example.com', 'Block pattern sample content', 'twentytwentyone' ) . '
' . esc_html_x( '123-456-7890', 'Block pattern sample content', 'twentytwentyone' ) . '

' . esc_html_x( '123 Main Street', 'Block pattern sample content', 'twentytwentyone' ) . '
' . esc_html_x( 'Cambridge, MA, 02139', 'Block pattern sample content', 'twentytwentyone' ) . '

', + 'content' => '

' . esc_html_x( 'example@example.com', 'Block pattern sample content', 'twentytwentyone' ) . '
' . esc_html_x( '123-456-7890', 'Block pattern sample content', 'twentytwentyone' ) . '

' . esc_html_x( '123 Main Street', 'Block pattern sample content', 'twentytwentyone' ) . '
' . esc_html_x( 'Cambridge, MA, 02139', 'Block pattern sample content', 'twentytwentyone' ) . '

', ) ); } diff --git a/src/wp-content/themes/twentytwentyone/inc/template-tags.php b/src/wp-content/themes/twentytwentyone/inc/template-tags.php index cdedd83562..dcec81ba96 100644 --- a/src/wp-content/themes/twentytwentyone/inc/template-tags.php +++ b/src/wp-content/themes/twentytwentyone/inc/template-tags.php @@ -193,6 +193,9 @@ if ( ! function_exists( 'twenty_twenty_one_post_thumbnail' ) ) { // Thumbnail is loaded eagerly because it's going to be in the viewport immediately. the_post_thumbnail( 'post-thumbnail', array( 'loading' => 'eager' ) ); ?> + +
+ @@ -201,6 +204,9 @@ if ( ! function_exists( 'twenty_twenty_one_post_thumbnail' ) ) { + +
+ diff --git a/src/wp-content/themes/twentytwentyone/package-lock.json b/src/wp-content/themes/twentytwentyone/package-lock.json index 8d67f4163f..6e946566fc 100644 --- a/src/wp-content/themes/twentytwentyone/package-lock.json +++ b/src/wp-content/themes/twentytwentyone/package-lock.json @@ -14,19 +14,19 @@ } }, "@babel/core": { - "version": "7.12.3", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.3.tgz", - "integrity": "sha512-0qXcZYKZp3/6N2jKYVxZv0aNCsxTSVCiK72DTiTYZAu7sjg73W0/aynWjMbiGd87EQL4WyA8reiJVh92AVla9g==", + "version": "7.12.9", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.12.9.tgz", + "integrity": "sha512-gTXYh3M5wb7FRXQy+FErKFAv90BnlOuNn1QkCK2lREoPAjrQCO49+HVSrFoe5uakFAF5eenS75KbO2vQiLrTMQ==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", - "@babel/generator": "^7.12.1", + "@babel/generator": "^7.12.5", "@babel/helper-module-transforms": "^7.12.1", - "@babel/helpers": "^7.12.1", - "@babel/parser": "^7.12.3", - "@babel/template": "^7.10.4", - "@babel/traverse": "^7.12.1", - "@babel/types": "^7.12.1", + "@babel/helpers": "^7.12.5", + "@babel/parser": "^7.12.7", + "@babel/template": "^7.12.7", + "@babel/traverse": "^7.12.9", + "@babel/types": "^7.12.7", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.1", @@ -77,12 +77,12 @@ } }, "@babel/helper-member-expression-to-functions": { - "version": "7.12.1", - "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.1.tgz", - "integrity": "sha512-k0CIe3tXUKTRSoEx1LQEPFU9vRQfqHtl+kf8eNnDqb4AUJEy5pz6aIiog+YWtVm2jpggjS1laH68bPsR+KWWPQ==", + "version": "7.12.7", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.12.7.tgz", + "integrity": "sha512-DCsuPyeWxeHgh1Dus7APn7iza42i/qXqiFPWyBDdOFtvS581JQePsc1F/nD+fHrcswhLlRc2UpYS1NwERxZhHw==", "dev": true, "requires": { - "@babel/types": "^7.12.1" + "@babel/types": "^7.12.7" } }, "@babel/helper-module-imports": { @@ -112,12 +112,12 @@ } }, "@babel/helper-optimise-call-expression": { - "version": "7.10.4", - "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz", - "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==", + "version": "7.12.7", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.12.7.tgz", + "integrity": "sha512-I5xc9oSJ2h59OwyUqjv95HRyzxj53DAubUERgQMrpcCEYQyToeHA+NEcUEsVWB4j53RDeskeBJ0SgRAYHDBckw==", "dev": true, "requires": { - "@babel/types": "^7.10.4" + "@babel/types": "^7.12.7" } }, "@babel/helper-replace-supers": { @@ -179,9 +179,9 @@ } }, "@babel/parser": { - "version": "7.12.5", - "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.5.tgz", - "integrity": "sha512-FVM6RZQ0mn2KCf1VUED7KepYeUWoVShczewOCfm3nzoBybaih51h+sYVVGthW9M6lPByEPTQf+xm27PBdlpwmQ==", + "version": "7.12.7", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.12.7.tgz", + "integrity": "sha512-oWR02Ubp4xTLCAqPRiNIuMVgNO5Aif/xpXtabhzW2HWUD47XJsAB4Zd/Rg30+XeQA3juXigV7hlquOTmwqLiwg==", "dev": true }, "@babel/runtime": { @@ -204,28 +204,28 @@ } }, "@babel/template": { - "version": "7.10.4", - "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz", - "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==", + "version": "7.12.7", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.12.7.tgz", + "integrity": "sha512-GkDzmHS6GV7ZeXfJZ0tLRBhZcMcY0/Lnb+eEbXDBfCAcZCjrZKe6p3J4we/D24O9Y8enxWAg1cWwof59yLh2ow==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", - "@babel/parser": "^7.10.4", - "@babel/types": "^7.10.4" + "@babel/parser": "^7.12.7", + "@babel/types": "^7.12.7" } }, "@babel/traverse": { - "version": "7.12.5", - "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.5.tgz", - "integrity": "sha512-xa15FbQnias7z9a62LwYAA5SZZPkHIXpd42C6uW68o8uTuua96FHZy1y61Va5P/i83FAAcMpW8+A/QayntzuqA==", + "version": "7.12.9", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.12.9.tgz", + "integrity": "sha512-iX9ajqnLdoU1s1nHt36JDI9KG4k+vmI8WgjK5d+aDTwQbL2fUnzedNedssA645Ede3PM2ma1n8Q4h2ohwXgMXw==", "dev": true, "requires": { "@babel/code-frame": "^7.10.4", "@babel/generator": "^7.12.5", "@babel/helper-function-name": "^7.10.4", "@babel/helper-split-export-declaration": "^7.11.0", - "@babel/parser": "^7.12.5", - "@babel/types": "^7.12.5", + "@babel/parser": "^7.12.7", + "@babel/types": "^7.12.7", "debug": "^4.1.0", "globals": "^11.1.0", "lodash": "^4.17.19" @@ -240,9 +240,9 @@ } }, "@babel/types": { - "version": "7.12.6", - "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.6.tgz", - "integrity": "sha512-hwyjw6GvjBLiyy3W0YQf0Z5Zf4NpYejUnKFcfcUhZCSffoBBp30w6wP2Wn6pk31jMYZvcOrB/1b7cGXvEoKogA==", + "version": "7.12.7", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.12.7.tgz", + "integrity": "sha512-MNyI92qZq6jrQkXvtIiykvl4WtoRrVV9MPn+ZfsoEENjiWcBQ3ZSHrkxnJWgWtLX3XXqX5hrSQ+X69wkmesXuQ==", "dev": true, "requires": { "@babel/helper-validator-identifier": "^7.10.4", @@ -313,13 +313,13 @@ } }, "@stylelint/postcss-markdown": { - "version": "0.36.1", - "resolved": "https://registry.npmjs.org/@stylelint/postcss-markdown/-/postcss-markdown-0.36.1.tgz", - "integrity": "sha512-iDxMBWk9nB2BPi1VFQ+Dc5+XpvODBHw2n3tYpaBZuEAFQlbtF9If0Qh5LTTwSi/XwdbJ2jt+0dis3i8omyggpw==", + "version": "0.36.2", + "resolved": "https://registry.npmjs.org/@stylelint/postcss-markdown/-/postcss-markdown-0.36.2.tgz", + "integrity": "sha512-2kGbqUVJUGE8dM+bMzXG/PYUWKkjLIkRLWNh39OaADkiabDRdw8ATFCgbMz5xdIcvwspPAluSL7uY+ZiTWdWmQ==", "dev": true, "requires": { - "remark": "^12.0.0", - "unist-util-find-all-after": "^3.0.1" + "remark": "^13.0.0", + "unist-util-find-all-after": "^3.0.2" } }, "@types/json-schema": { @@ -328,6 +328,15 @@ "integrity": "sha512-3c+yGKvVP5Y9TYBEibGNR+kLtijnj7mYrXRg+WpFb2X9xm04g/DXYkfg4hmzJQosc9snFNUPkbYIhu+KAm6jJw==", "dev": true }, + "@types/mdast": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-3.0.3.tgz", + "integrity": "sha512-SXPBMnFVQg1s00dlMCc/jCdvPqdE4mXaMMCeRlxLDmTAEoegHT53xKtkDnzDTOcmMHUfcjyf36/YYZ6SxRdnsw==", + "dev": true, + "requires": { + "@types/unist": "*" + } + }, "@types/minimist": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/@types/minimist/-/minimist-1.2.1.tgz", @@ -404,14 +413,6 @@ "globals": "^12.0.0", "prettier": "npm:wp-prettier@2.0.5", "requireindex": "^1.2.0" - }, - "dependencies": { - "prettier": { - "version": "npm:wp-prettier@2.0.5", - "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz", - "integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==", - "dev": true - } } }, "@wordpress/prettier-config": { @@ -495,13 +496,15 @@ } }, "array-includes": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.1.tgz", - "integrity": "sha512-c2VXaCHl7zPsvpkFsw4nxvFie4fh1ur9bpcgsVkIjqn0H/Xwdg+7fv3n2r/isyS8EBj5b06M9kHyZuIr4El6WQ==", + "version": "3.1.2", + "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.2.tgz", + "integrity": "sha512-w2GspexNQpx+PutG3QpT437/BenZBj0M/MZGn5mzv/MofYqo0xmRHzn4lFsoDlWJ+THYsGJmFlW68WlDFx7VRw==", "dev": true, "requires": { + "call-bind": "^1.0.0", "define-properties": "^1.1.3", - "es-abstract": "^1.17.0", + "es-abstract": "^1.18.0-next.1", + "get-intrinsic": "^1.0.1", "is-string": "^1.0.5" } }, @@ -512,13 +515,14 @@ "dev": true }, "array.prototype.flatmap": { - "version": "1.2.3", - "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.3.tgz", - "integrity": "sha512-OOEk+lkePcg+ODXIpvuU9PAryCikCJyo7GlDG1upleEpQRx6mzL9puEBkozQ5iAx20KV0l3DbyQwqciJtqe5Pg==", + "version": "1.2.4", + "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.2.4.tgz", + "integrity": "sha512-r9Z0zYoxqHz60vvQbWEdXIEtCwHF0yxaWfno9qzXeNHvfyl3BZqygmGzb84dsubyaXLH4husF+NFgMSdpZhk2Q==", "dev": true, "requires": { + "call-bind": "^1.0.0", "define-properties": "^1.1.3", - "es-abstract": "^1.17.0-next.1", + "es-abstract": "^1.18.0-next.1", "function-bind": "^1.1.1" } }, @@ -562,9 +566,9 @@ } }, "axe-core": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.0.2.tgz", - "integrity": "sha512-arU1h31OGFu+LPrOLGZ7nB45v940NMDMEJeNmbutu57P+UFDVnkZg3e+J1I2HJRZ9hT7gO8J91dn/PMrAiKakA==", + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/axe-core/-/axe-core-4.1.1.tgz", + "integrity": "sha512-5Kgy8Cz6LPC9DJcNb3yjAXTu3XihQgEdnIg50c//zOC/MyLP0Clg+Y8Sh9ZjjnvBrDZU4DgXS9C3T9r4/scGZQ==", "dev": true }, "axobject-query": { @@ -697,15 +701,9 @@ } }, "caniuse-lite": { - "version": "1.0.30001157", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001157.tgz", - "integrity": "sha512-gOerH9Wz2IRZ2ZPdMfBvyOi3cjaz4O4dgNwPGzx8EhqAs4+2IL/O+fJsbt+znSigujoZG8bVcIAUM/I/E5K3MA==", - "dev": true - }, - "ccount": { - "version": "1.1.0", - "resolved": "https://registry.npmjs.org/ccount/-/ccount-1.1.0.tgz", - "integrity": "sha512-vlNK021QdI7PNeiUh/lKkC/mNHHfV0m/Ad5JoI0TYtlBnJAslM/JIkm/tGC88bkLIwO6OQ5uV6ztS6kVAtCDlg==", + "version": "1.0.30001164", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001164.tgz", + "integrity": "sha512-G+A/tkf4bu0dSp9+duNiXc7bGds35DioCyC6vgK2m/rjA4Krpy5WeZgZyfH2f0wj2kI6yAWWucyap6oOwmY1mg==", "dev": true }, "chalk": { @@ -725,12 +723,6 @@ "integrity": "sha512-iBMyeEHxfVnIakwOuDXpVkc54HijNgCyQB2w0VfGQThle6NXn50zU6V/u+LDhxHcDUPojn6Kpga3PTAD8W1bQw==", "dev": true }, - "character-entities-html4": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-1.1.4.tgz", - "integrity": "sha512-HRcDxZuZqMx3/a+qrzxdBKBPUpxWEq9xw2OPZ3a/174ihfrQKVsFhqtthBInFy1zZ9GgZyFXOatNujm8M+El3g==", - "dev": true - }, "character-entities-legacy": { "version": "1.1.4", "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-1.1.4.tgz", @@ -791,12 +783,6 @@ "is-regexp": "^2.0.0" } }, - "collapse-white-space": { - "version": "1.0.6", - "resolved": "https://registry.npmjs.org/collapse-white-space/-/collapse-white-space-1.0.6.tgz", - "integrity": "sha512-jEovNnrhMuqyCcjfEJA56v0Xq8SkIoPKDyaHahwo3POf4qcSXqMYuwNcOTzp74vTsR9Tn08z4MxWqAhcekogkQ==", - "dev": true - }, "color-convert": { "version": "1.9.3", "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", @@ -846,9 +832,9 @@ } }, "core-js-pure": { - "version": "3.7.0", - "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.7.0.tgz", - "integrity": "sha512-EZD2ckZysv8MMt4J6HSvS9K2GdtlZtdBncKAmF9lr2n0c9dJUaUN88PSTjvgwCgQPWKTkERXITgS6JJRAnljtg==", + "version": "3.8.0", + "resolved": "https://registry.npmjs.org/core-js-pure/-/core-js-pure-3.8.0.tgz", + "integrity": "sha512-fRjhg3NeouotRoIV0L1FdchA6CK7ZD+lyINyMoz19SyV+ROpC4noS1xItWHFtwZdlqfMfVPJEyEGdfri2bD1pA==", "dev": true }, "cosmiconfig": { @@ -888,9 +874,9 @@ "dev": true }, "debug": { - "version": "4.2.0", - "resolved": "https://registry.npmjs.org/debug/-/debug-4.2.0.tgz", - "integrity": "sha512-IX2ncY78vDTjZMFUdmsvIRFY2Cf4FnD0wRs+nQwJU8Lu99/tPFdb0VybiiMTPe3I6rQmwsqQqRBvxU+bZ/I8sg==", + "version": "4.3.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.1.tgz", + "integrity": "sha512-doEwdvm4PCeK4K3RQN2ZC2BYUBaxwLARCqZmMjtF8a51J2Rb0xpVloFRnCODwqjpwnAoao4pelN8l3RJdv3gRQ==", "dev": true, "requires": { "ms": "2.1.2" @@ -1009,9 +995,9 @@ } }, "electron-to-chromium": { - "version": "1.3.593", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.593.tgz", - "integrity": "sha512-GvO7G1ZxvffnMvPCr4A7+iQPVuvpyqMrx2VWSERAjG+pHK6tmO9XqYdBfMIq9corRyi4bNImSDEiDvIoDb8HrA==", + "version": "1.3.612", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.612.tgz", + "integrity": "sha512-CdrdX1B6mQqxfw+51MPWB5qA6TKWjza9f5voBtUlRfEZEwZiFaxJLrhFI8zHE9SBAuGt4h84rQU6Ho9Bauo1LA==", "dev": true }, "emoji-regex": { @@ -1045,9 +1031,9 @@ } }, "es-abstract": { - "version": "1.17.7", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz", - "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==", + "version": "1.18.0-next.1", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz", + "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==", "dev": true, "requires": { "es-to-primitive": "^1.2.1", @@ -1055,6 +1041,7 @@ "has": "^1.0.3", "has-symbols": "^1.0.1", "is-callable": "^1.2.2", + "is-negative-zero": "^2.0.0", "is-regex": "^1.1.1", "object-inspect": "^1.8.0", "object-keys": "^1.1.1", @@ -1087,9 +1074,9 @@ "dev": true }, "eslint": { - "version": "7.13.0", - "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.13.0.tgz", - "integrity": "sha512-uCORMuOO8tUzJmsdRtrvcGq5qposf7Rw0LwkTJkoDbOycVQtQjmnhZSuLQnozLE4TmAzlMVV45eCHmQ1OpDKUQ==", + "version": "7.14.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-7.14.0.tgz", + "integrity": "sha512-5YubdnPXrlrYAFCKybPuHIAH++PINe1pmKNc5wQRB9HSbqIK1ywAnntE3Wwua4giKu0bjligf1gLF6qxMGOYRA==", "dev": true, "requires": { "@babel/code-frame": "^7.0.0", @@ -1231,9 +1218,9 @@ } }, "eslint-plugin-jsdoc": { - "version": "30.7.7", - "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-30.7.7.tgz", - "integrity": "sha512-DmVMJC2AbpYX7X1KhnVT1a9ex1AUvG+q9G8i6hzjp3cpjW8vmKQTUmZnRS0//W+7HvMqeb+eXPANdCOzGVVZBQ==", + "version": "30.7.8", + "resolved": "https://registry.npmjs.org/eslint-plugin-jsdoc/-/eslint-plugin-jsdoc-30.7.8.tgz", + "integrity": "sha512-OWm2AYvXjCl7nRbpcw5xisfSVkpVAyp4lGqL9T+DeK4kaPm6ecnmTc/G5s1PtcRrwbaI8bIWGzwScqv5CdGyxA==", "dev": true, "requires": { "comment-parser": "^0.7.6", @@ -1820,6 +1807,27 @@ "es-abstract": "^1.17.0-next.1", "has": "^1.0.3", "side-channel": "^1.0.2" + }, + "dependencies": { + "es-abstract": { + "version": "1.17.7", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz", + "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.2.2", + "is-regex": "^1.1.1", + "object-inspect": "^1.8.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.1", + "string.prototype.trimend": "^1.0.1", + "string.prototype.trimstart": "^1.0.1" + } + } } }, "is-alphabetical": { @@ -1828,12 +1836,6 @@ "integrity": "sha512-DwzsA04LQ10FHTZuL0/grVDk4rFoVH1pjAToYwBrHSxcrBIGQuXrQMtD5U1b0U2XVgKZCTLLP8u2Qxqhy3l2Vg==", "dev": true }, - "is-alphanumeric": { - "version": "1.0.0", - "resolved": "https://registry.npmjs.org/is-alphanumeric/-/is-alphanumeric-1.0.0.tgz", - "integrity": "sha1-Spzvcdr0wAHB2B1j0UDPU/1oifQ=", - "dev": true - }, "is-alphanumerical": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-1.0.4.tgz", @@ -1872,9 +1874,9 @@ "dev": true }, "is-core-module": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.1.0.tgz", - "integrity": "sha512-YcV7BgVMRFRua2FqQzKtTDMz8iCuLEyGKjr70q8Zm1yy2qKcurbFEd79PAdHV77oL3NrAaOVQIbMmiHQCHB7ZA==", + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.2.0.tgz", + "integrity": "sha512-XRAfAdyyY5F5cOXn7hYQDqh2Xmii+DEfIcQGxK/uNwMHhIkPWO0g8msXcbzLe+MpGoR951MlqM/2iIlU4vKDdQ==", "dev": true, "requires": { "has": "^1.0.3" @@ -1979,18 +1981,6 @@ "integrity": "sha1-5HnICFjfDBsR3dppQPlgEfzaSpo=", "dev": true }, - "is-whitespace-character": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-whitespace-character/-/is-whitespace-character-1.0.4.tgz", - "integrity": "sha512-SDweEzfIZM0SJV0EUga669UTKlmL0Pq8Lno0QDQsPnvECB3IM2aP0gdx5TrU0A01MAPfViaZiI2V1QMZLaKK5w==", - "dev": true - }, - "is-word-character": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/is-word-character/-/is-word-character-1.0.4.tgz", - "integrity": "sha512-5SMO8RVennx3nZrqtKwCGyyetPE9VDba5ugvKLaD4KopPG5kR4mQ7tNt/r7feL5yt5h3lpuBbIUmCOG2eSzXHA==", - "dev": true - }, "isexe": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/isexe/-/isexe-2.0.0.tgz", @@ -2093,9 +2083,9 @@ "dev": true }, "known-css-properties": { - "version": "0.19.0", - "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.19.0.tgz", - "integrity": "sha512-eYboRV94Vco725nKMlpkn3nV2+96p9c3gKXRsYqAJSswSENvBhN7n5L+uDhY58xQa0UukWsDMTGELzmD8Q+wTA==", + "version": "0.20.0", + "resolved": "https://registry.npmjs.org/known-css-properties/-/known-css-properties-0.20.0.tgz", + "integrity": "sha512-URvsjaA9ypfreqJ2/ylDr5MUERhJZ+DhguoWRr2xgS5C7aGCalXo+ewL+GixgKBfhT2vuL02nbIgNGqVWgTOYw==", "dev": true }, "language-subtag-registry": { @@ -2205,42 +2195,67 @@ "js-tokens": "^3.0.0 || ^4.0.0" } }, + "lru-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-6.0.0.tgz", + "integrity": "sha512-Jo6dJ04CmSjuznwJSS3pUeWmd/H0ffTlkXXgwZi+eq1UCmqQwCh+eLsYOYCwY991i2Fah4h1BEMCx4qThGbsiA==", + "dev": true, + "requires": { + "yallist": "^4.0.0" + } + }, "map-obj": { "version": "4.1.0", "resolved": "https://registry.npmjs.org/map-obj/-/map-obj-4.1.0.tgz", "integrity": "sha512-glc9y00wgtwcDmp7GaE/0b0OnxpNJsVf3ael/An6Fe2Q51LLwN1er6sdomLRzz5h0+yMpiYLhWYF5R7HeqVd4g==", "dev": true }, - "markdown-escapes": { - "version": "1.0.4", - "resolved": "https://registry.npmjs.org/markdown-escapes/-/markdown-escapes-1.0.4.tgz", - "integrity": "sha512-8z4efJYk43E0upd0NbVXwgSTQs6cT3T06etieCMEg7dRbzCbxUCK/GHlX8mhHRDcp+OLlHkPKsvqQTCvsRl2cg==", - "dev": true - }, - "markdown-table": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-2.0.0.tgz", - "integrity": "sha512-Ezda85ToJUBhM6WGaG6veasyym+Tbs3cMAw/ZhOPqXiYsr0jgocBV3j3nx+4lk47plLlIqjwuTm/ywVI+zjJ/A==", - "dev": true, - "requires": { - "repeat-string": "^1.0.0" - } - }, "mathml-tag-names": { "version": "2.1.3", "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz", "integrity": "sha512-APMBEanjybaPzUrfqU0IMU5I0AswKMH7k8OTLs0vvV4KZpExkTkY87nR/zpbuTPj+gARop7aGUbl11pnDfW6xg==", "dev": true }, - "mdast-util-compact": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/mdast-util-compact/-/mdast-util-compact-2.0.1.tgz", - "integrity": "sha512-7GlnT24gEwDrdAwEHrU4Vv5lLWrEer4KOkAiKT9nYstsTad7Oc1TwqT2zIMKRdZF7cTuaf+GA1E4Kv7jJh8mPA==", + "mdast-util-from-markdown": { + "version": "0.8.1", + "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-0.8.1.tgz", + "integrity": "sha512-qJXNcFcuCSPqUF0Tb0uYcFDIq67qwB3sxo9RPdf9vG8T90ViKnksFqdB/Coq2a7sTnxL/Ify2y7aIQXDkQFH0w==", "dev": true, "requires": { - "unist-util-visit": "^2.0.0" + "@types/mdast": "^3.0.0", + "mdast-util-to-string": "^1.0.0", + "micromark": "~2.10.0", + "parse-entities": "^2.0.0" } }, + "mdast-util-to-markdown": { + "version": "0.5.4", + "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-0.5.4.tgz", + "integrity": "sha512-0jQTkbWYx0HdEA/h++7faebJWr5JyBoBeiRf0u3F4F3QtnyyGaWIsOwo749kRb1ttKrLLr+wRtOkfou9yB0p6A==", + "dev": true, + "requires": { + "@types/unist": "^2.0.0", + "longest-streak": "^2.0.0", + "mdast-util-to-string": "^2.0.0", + "parse-entities": "^2.0.0", + "repeat-string": "^1.0.0", + "zwitch": "^1.0.0" + }, + "dependencies": { + "mdast-util-to-string": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-2.0.0.tgz", + "integrity": "sha512-AW4DRS3QbBayY/jJmD8437V1Gombjf8RSOUCMFBuo5iHi58AGEgVCKQ+ezHkZZDpAQS75hcBMpLqjpJTjtUL7w==", + "dev": true + } + } + }, + "mdast-util-to-string": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-1.1.0.tgz", + "integrity": "sha512-jVU0Nr2B9X3MU4tSK7JP1CMkSvOj7X5l/GboG1tKRw52lLF1x2Ju92Ms9tNetCcbfX3hzlM73zYo2NKkWSfF/A==", + "dev": true + }, "memorystream": { "version": "0.3.1", "resolved": "https://registry.npmjs.org/memorystream/-/memorystream-0.3.1.tgz", @@ -2248,9 +2263,9 @@ "dev": true }, "meow": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/meow/-/meow-7.1.1.tgz", - "integrity": "sha512-GWHvA5QOcS412WCo8vwKDlTelGLsCGBVevQB5Kva961rmNfun0PCbv5+xta2kUMFJyR8/oWnn7ddeKdosbAPbA==", + "version": "8.0.0", + "resolved": "https://registry.npmjs.org/meow/-/meow-8.0.0.tgz", + "integrity": "sha512-nbsTRz2fwniJBFgUkcdISq8y/q9n9VbiHYbfwklFh5V4V2uAcxtKQkDc0yCLPM/kP0d+inZBewn3zJqewHE7kg==", "dev": true, "requires": { "@types/minimist": "^1.2.0", @@ -2258,29 +2273,46 @@ "decamelize-keys": "^1.1.0", "hard-rejection": "^2.1.0", "minimist-options": "4.1.0", - "normalize-package-data": "^2.5.0", + "normalize-package-data": "^3.0.0", "read-pkg-up": "^7.0.1", "redent": "^3.0.0", "trim-newlines": "^3.0.0", - "type-fest": "^0.13.1", - "yargs-parser": "^18.1.3" + "type-fest": "^0.18.0", + "yargs-parser": "^20.2.3" }, "dependencies": { + "hosted-git-info": { + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-3.0.7.tgz", + "integrity": "sha512-fWqc0IcuXs+BmE9orLDyVykAG9GJtGLGuZAAqgcckPgv5xad4AcXGIv8galtQvlwutxSlaMcdw7BUtq2EIvqCQ==", + "dev": true, + "requires": { + "lru-cache": "^6.0.0" + } + }, + "normalize-package-data": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/normalize-package-data/-/normalize-package-data-3.0.0.tgz", + "integrity": "sha512-6lUjEI0d3v6kFrtgA/lOx4zHCWULXsFNIjHolnZCKCTLA6m/G625cdn3O7eNmT0iD3jfo6HZ9cdImGZwf21prw==", + "dev": true, + "requires": { + "hosted-git-info": "^3.0.6", + "resolve": "^1.17.0", + "semver": "^7.3.2", + "validate-npm-package-license": "^3.0.1" + } + }, "type-fest": { - "version": "0.13.1", - "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.13.1.tgz", - "integrity": "sha512-34R7HTnG0XIJcBSn5XhDd7nNFPRcXYRZrBB2O2jdKqYODldSzBAqzsWoZYYvduky73toYS/ESqxPvkDf/F0XMg==", + "version": "0.18.1", + "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.18.1.tgz", + "integrity": "sha512-OIAYXk8+ISY+qTOwkHtKqzAuxchoMiD9Udx+FSGQDuiRR+PJKJHc2NJAXlbhkGwTt/4/nKZxELY1w3ReWOL8mw==", "dev": true }, "yargs-parser": { - "version": "18.1.3", - "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-18.1.3.tgz", - "integrity": "sha512-o50j0JeToy/4K6OZcaQmW6lyXXKhq7csREXcDwk2omFPJEwUNOVtJKvmDr9EI1fAJZUyZcRF7kxGBWmRXudrCQ==", - "dev": true, - "requires": { - "camelcase": "^5.0.0", - "decamelize": "^1.2.0" - } + "version": "20.2.4", + "resolved": "https://registry.npmjs.org/yargs-parser/-/yargs-parser-20.2.4.tgz", + "integrity": "sha512-WOkpgNhPTlE73h4VFAFsOnomJVaovO8VqLDzy5saChRBFQFBoMYirowyW+Q9HB4HFF4Z7VZTiG3iSzJJA29yRA==", + "dev": true } } }, @@ -2290,6 +2322,16 @@ "integrity": "sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==", "dev": true }, + "micromark": { + "version": "2.10.1", + "resolved": "https://registry.npmjs.org/micromark/-/micromark-2.10.1.tgz", + "integrity": "sha512-fUuVF8sC1X7wsCS29SYQ2ZfIZYbTymp0EYr6sab3idFjigFFjGa5UwoniPlV9tAgntjuapW1t9U+S0yDYeGKHQ==", + "dev": true, + "requires": { + "debug": "^4.0.0", + "parse-entities": "^2.0.0" + } + }, "micromatch": { "version": "4.0.2", "resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.2.tgz", @@ -2368,9 +2410,9 @@ "dev": true }, "node-releases": { - "version": "1.1.66", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.66.tgz", - "integrity": "sha512-JHEQ1iWPGK+38VLB2H9ef2otU4l8s3yAMt9Xf934r6+ojCYDMHPMqvCc9TnzfeFSP1QEOeU6YZEd3+De0LTCgg==", + "version": "1.1.67", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-1.1.67.tgz", + "integrity": "sha512-V5QF9noGFl3EymEwUYzO+3NTDpGfQB4ve6Qfnzf3UNydMhjQRVPR1DZTuvWiLzaFJYw2fmDwAfnRNEVb64hSIg==", "dev": true }, "normalize-package-data": { @@ -2492,9 +2534,9 @@ "dev": true }, "object-inspect": { - "version": "1.8.0", - "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.8.0.tgz", - "integrity": "sha512-jLdtEOB112fORuypAyl/50VRVIBIdVQOSUUGQHzJ4xBSbit81zRarz7GThkEFZy1RceYrWYcPcBFPQwHyAc1gA==", + "version": "1.9.0", + "resolved": "https://registry.npmjs.org/object-inspect/-/object-inspect-1.9.0.tgz", + "integrity": "sha512-i3Bp9iTqwhaLZBxGkRfo5ZbE07BQRT7MGu8+nNgwW9ItGp1TzCTw2DLEoWwjClxBjOFI/hWljTAmYGCEwmtnOw==", "dev": true }, "object-keys": { @@ -2516,37 +2558,38 @@ } }, "object.entries": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.2.tgz", - "integrity": "sha512-BQdB9qKmb/HyNdMNWVr7O3+z5MUIx3aiegEIJqjMBbBf0YT9RRxTJSim4mzFqtyr7PDAHigq0N9dO0m0tRakQA==", + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.3.tgz", + "integrity": "sha512-ym7h7OZebNS96hn5IJeyUmaWhaSM4SVtAPPfNLQEI2MYWCO2egsITb9nab2+i/Pwibx+R0mtn+ltKJXRSeTMGg==", "dev": true, "requires": { + "call-bind": "^1.0.0", "define-properties": "^1.1.3", - "es-abstract": "^1.17.5", + "es-abstract": "^1.18.0-next.1", "has": "^1.0.3" } }, "object.fromentries": { - "version": "2.0.2", - "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.2.tgz", - "integrity": "sha512-r3ZiBH7MQppDJVLx6fhD618GKNG40CZYH9wgwdhKxBDDbQgjeWGGd4AtkZad84d291YxvWe7bJGuE65Anh0dxQ==", + "version": "2.0.3", + "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.3.tgz", + "integrity": "sha512-IDUSMXs6LOSJBWE++L0lzIbSqHl9KDCfff2x/JSEIDtEUavUnyMYC2ZGay/04Zq4UT8lvd4xNhU4/YHKibAOlw==", "dev": true, "requires": { + "call-bind": "^1.0.0", "define-properties": "^1.1.3", - "es-abstract": "^1.17.0-next.1", - "function-bind": "^1.1.1", + "es-abstract": "^1.18.0-next.1", "has": "^1.0.3" } }, "object.values": { - "version": "1.1.1", - "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.1.tgz", - "integrity": "sha512-WTa54g2K8iu0kmS/us18jEmdv1a4Wi//BZ/DTVYEcH0XhLM5NYdpDHja3gt57VrZLcNAO2WGA+KpWsDBaHt6eA==", + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.1.2.tgz", + "integrity": "sha512-MYC0jvJopr8EK6dPBiO8Nb9mvjdypOachO5REGk6MXzujbBrAisKo3HmdEI6kZDL6fC31Mwee/5YbtMebixeag==", "dev": true, "requires": { + "call-bind": "^1.0.0", "define-properties": "^1.1.3", - "es-abstract": "^1.17.0-next.1", - "function-bind": "^1.1.1", + "es-abstract": "^1.18.0-next.1", "has": "^1.0.3" } }, @@ -3128,6 +3171,12 @@ "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==", "dev": true }, + "prettier": { + "version": "npm:wp-prettier@2.0.5", + "resolved": "https://registry.npmjs.org/wp-prettier/-/wp-prettier-2.0.5.tgz", + "integrity": "sha512-5GCgdeevIXwR3cW4Qj5XWC5MO1iSCz8+IPn0mMw6awAt/PBiey8yyO7MhePRsaMqghJAhg6Q3QLYWSnUHWkG6A==", + "dev": true + }, "prettier-linter-helpers": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.0.tgz", @@ -3328,6 +3377,27 @@ "requires": { "define-properties": "^1.1.3", "es-abstract": "^1.17.0-next.1" + }, + "dependencies": { + "es-abstract": { + "version": "1.17.7", + "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.17.7.tgz", + "integrity": "sha512-VBl/gnfcJ7OercKA9MVaegWsBHFjV492syMudcnQZvt/Dw8ezpcOHYZXa/J96O8vx+g4x65YKhxOwDUh63aS5g==", + "dev": true, + "requires": { + "es-to-primitive": "^1.2.1", + "function-bind": "^1.1.1", + "has": "^1.0.3", + "has-symbols": "^1.0.1", + "is-callable": "^1.2.2", + "is-regex": "^1.1.1", + "object-inspect": "^1.8.0", + "object-keys": "^1.1.1", + "object.assign": "^4.1.1", + "string.prototype.trimend": "^1.0.1", + "string.prototype.trimstart": "^1.0.1" + } + } } }, "regexpp": { @@ -3343,60 +3413,32 @@ "dev": true }, "remark": { - "version": "12.0.1", - "resolved": "https://registry.npmjs.org/remark/-/remark-12.0.1.tgz", - "integrity": "sha512-gS7HDonkdIaHmmP/+shCPejCEEW+liMp/t/QwmF0Xt47Rpuhl32lLtDV1uKWvGoq+kxr5jSgg5oAIpGuyULjUw==", + "version": "13.0.0", + "resolved": "https://registry.npmjs.org/remark/-/remark-13.0.0.tgz", + "integrity": "sha512-HDz1+IKGtOyWN+QgBiAT0kn+2s6ovOxHyPAFGKVE81VSzJ+mq7RwHFledEvB5F1p4iJvOah/LOKdFuzvRnNLCA==", "dev": true, "requires": { - "remark-parse": "^8.0.0", - "remark-stringify": "^8.0.0", - "unified": "^9.0.0" + "remark-parse": "^9.0.0", + "remark-stringify": "^9.0.0", + "unified": "^9.1.0" } }, "remark-parse": { - "version": "8.0.3", - "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-8.0.3.tgz", - "integrity": "sha512-E1K9+QLGgggHxCQtLt++uXltxEprmWzNfg+MxpfHsZlrddKzZ/hZyWHDbK3/Ap8HJQqYJRXP+jHczdL6q6i85Q==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-9.0.0.tgz", + "integrity": "sha512-geKatMwSzEXKHuzBNU1z676sGcDcFoChMK38TgdHJNAYfFtsfHDQG7MoJAjs6sgYMqyLduCYWDIWZIxiPeafEw==", "dev": true, "requires": { - "ccount": "^1.0.0", - "collapse-white-space": "^1.0.2", - "is-alphabetical": "^1.0.0", - "is-decimal": "^1.0.0", - "is-whitespace-character": "^1.0.0", - "is-word-character": "^1.0.0", - "markdown-escapes": "^1.0.0", - "parse-entities": "^2.0.0", - "repeat-string": "^1.5.4", - "state-toggle": "^1.0.0", - "trim": "0.0.1", - "trim-trailing-lines": "^1.0.0", - "unherit": "^1.0.4", - "unist-util-remove-position": "^2.0.0", - "vfile-location": "^3.0.0", - "xtend": "^4.0.1" + "mdast-util-from-markdown": "^0.8.0" } }, "remark-stringify": { - "version": "8.1.1", - "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-8.1.1.tgz", - "integrity": "sha512-q4EyPZT3PcA3Eq7vPpT6bIdokXzFGp9i85igjmhRyXWmPs0Y6/d2FYwUNotKAWyLch7g0ASZJn/KHHcHZQ163A==", + "version": "9.0.0", + "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-9.0.0.tgz", + "integrity": "sha512-8x29DpTbVzEc6Dwb90qhxCtbZ6hmj3BxWWDpMhA+1WM4dOEGH5U5/GFe3Be5Hns5MvPSFAr1e2KSVtKZkK5nUw==", "dev": true, "requires": { - "ccount": "^1.0.0", - "is-alphanumeric": "^1.0.0", - "is-decimal": "^1.0.0", - "is-whitespace-character": "^1.0.0", - "longest-streak": "^2.0.1", - "markdown-escapes": "^1.0.0", - "markdown-table": "^2.0.0", - "mdast-util-compact": "^2.0.0", - "parse-entities": "^2.0.0", - "repeat-string": "^1.5.4", - "state-toggle": "^1.0.0", - "stringify-entities": "^3.0.0", - "unherit": "^1.0.4", - "xtend": "^4.0.1" + "mdast-util-to-markdown": "^0.5.0" } }, "repeat-string": { @@ -3461,9 +3503,9 @@ } }, "rtlcss": { - "version": "2.6.1", - "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.1.tgz", - "integrity": "sha512-WoKAYLxT123Gh/9dAPeMY0YWBx6D7IjORJhTbmmq8UJI4zaSxsA0uqPWsXEqGgZT2HEGtxWkhkIZ6g1IvOQ+eg==", + "version": "2.6.2", + "resolved": "https://registry.npmjs.org/rtlcss/-/rtlcss-2.6.2.tgz", + "integrity": "sha512-06LFAr+GAPo+BvaynsXRfoYTJvSaWRyOhURCQ7aeI1MKph9meM222F+Zkt3bDamyHHJuGi3VPtiRkpyswmQbGA==", "dev": true, "requires": { "@choojs/findup": "^0.2.1", @@ -3560,28 +3602,6 @@ "requires": { "es-abstract": "^1.18.0-next.0", "object-inspect": "^1.8.0" - }, - "dependencies": { - "es-abstract": { - "version": "1.18.0-next.1", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz", - "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==", - "dev": true, - "requires": { - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1", - "is-callable": "^1.2.2", - "is-negative-zero": "^2.0.0", - "is-regex": "^1.1.1", - "object-inspect": "^1.8.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.1", - "string.prototype.trimend": "^1.0.1", - "string.prototype.trimstart": "^1.0.1" - } - } } }, "signal-exit": { @@ -3640,9 +3660,9 @@ } }, "spdx-license-ids": { - "version": "3.0.6", - "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.6.tgz", - "integrity": "sha512-+orQK83kyMva3WyPf59k1+Y525csj5JejicWut55zeTWANuN17qSiSLUXWtzHeNWORSvT7GLDJ/E/XiIWoXBTw==", + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/spdx-license-ids/-/spdx-license-ids-3.0.7.tgz", + "integrity": "sha512-U+MTEOO0AiDzxwFvoa4JVnMV6mZlJKk2sBLt90s7G0Gd0Mlknc7kxEn3nuDPNZRta7O2uy8oLcZLVT+4sqNZHQ==", "dev": true }, "specificity": { @@ -3657,12 +3677,6 @@ "integrity": "sha1-BOaSb2YolTVPPdAVIDYzuFcpfiw=", "dev": true }, - "state-toggle": { - "version": "1.0.3", - "resolved": "https://registry.npmjs.org/state-toggle/-/state-toggle-1.0.3.tgz", - "integrity": "sha512-d/5Z4/2iiCnHw6Xzghyhb+GcmF89bxwgXG60wjIiZaxnymbyOmI8Hk4VqHXiVVp6u2ysaskFfXg3ekCj4WNftQ==", - "dev": true - }, "string-width": { "version": "3.1.0", "resolved": "https://registry.npmjs.org/string-width/-/string-width-3.1.0.tgz", @@ -3683,91 +3697,49 @@ } }, "string.prototype.matchall": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.2.tgz", - "integrity": "sha512-N/jp6O5fMf9os0JU3E72Qhf590RSRZU/ungsL/qJUYVTNv7hTG0P/dbPjxINVN9jpscu3nzYwKESU3P3RY5tOg==", + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.3.tgz", + "integrity": "sha512-OBxYDA2ifZQ2e13cP82dWFMaCV9CGF8GzmN4fljBVw5O5wep0lu4gacm1OL6MjROoUnB8VbkWRThqkV2YFLNxw==", "dev": true, "requires": { + "call-bind": "^1.0.0", "define-properties": "^1.1.3", - "es-abstract": "^1.17.0", + "es-abstract": "^1.18.0-next.1", "has-symbols": "^1.0.1", "internal-slot": "^1.0.2", "regexp.prototype.flags": "^1.3.0", - "side-channel": "^1.0.2" + "side-channel": "^1.0.3" } }, "string.prototype.padend": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.0.tgz", - "integrity": "sha512-3aIv8Ffdp8EZj8iLwREGpQaUZiPyrWrpzMBHvkiSW/bK/EGve9np07Vwy7IJ5waydpGXzQZu/F8Oze2/IWkBaA==", + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/string.prototype.padend/-/string.prototype.padend-3.1.1.tgz", + "integrity": "sha512-eCzTASPnoCr5Ht+Vn1YXgm8SB015hHKgEIMu9Nr9bQmLhRBxKRfmzSj/IQsxDFc8JInJDDFA0qXwK+xxI7wDkg==", "dev": true, "requires": { + "call-bind": "^1.0.0", "define-properties": "^1.1.3", - "es-abstract": "^1.17.0-next.1" + "es-abstract": "^1.18.0-next.1" } }, "string.prototype.trimend": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.2.tgz", - "integrity": "sha512-8oAG/hi14Z4nOVP0z6mdiVZ/wqjDtWSLygMigTzAb+7aPEDTleeFf+WrF+alzecxIRkckkJVn+dTlwzJXORATw==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string.prototype.trimend/-/string.prototype.trimend-1.0.3.tgz", + "integrity": "sha512-ayH0pB+uf0U28CtjlLvL7NaohvR1amUvVZk+y3DYb0Ey2PUV5zPkkKy9+U1ndVEIXO8hNg18eIv9Jntbii+dKw==", "dev": true, "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.1" - }, - "dependencies": { - "es-abstract": { - "version": "1.18.0-next.1", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz", - "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==", - "dev": true, - "requires": { - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1", - "is-callable": "^1.2.2", - "is-negative-zero": "^2.0.0", - "is-regex": "^1.1.1", - "object-inspect": "^1.8.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.1", - "string.prototype.trimend": "^1.0.1", - "string.prototype.trimstart": "^1.0.1" - } - } + "call-bind": "^1.0.0", + "define-properties": "^1.1.3" } }, "string.prototype.trimstart": { - "version": "1.0.2", - "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.2.tgz", - "integrity": "sha512-7F6CdBTl5zyu30BJFdzSTlSlLPwODC23Od+iLoVH8X6+3fvDPPuBVVj9iaB1GOsSTSIgVfsfm27R2FGrAPznWg==", + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/string.prototype.trimstart/-/string.prototype.trimstart-1.0.3.tgz", + "integrity": "sha512-oBIBUy5lea5tt0ovtOFiEQaBkoBBkyJhZXzJYrSmDo5IUUqbOPvVezuRs/agBIdZ2p2Eo1FD6bD9USyBLfl3xg==", "dev": true, "requires": { - "define-properties": "^1.1.3", - "es-abstract": "^1.18.0-next.1" - }, - "dependencies": { - "es-abstract": { - "version": "1.18.0-next.1", - "resolved": "https://registry.npmjs.org/es-abstract/-/es-abstract-1.18.0-next.1.tgz", - "integrity": "sha512-I4UGspA0wpZXWENrdA0uHbnhte683t3qT/1VFH9aX2dA5PPSf6QW5HHXf5HImaqPmjXaVeVk4RGWnaylmV7uAA==", - "dev": true, - "requires": { - "es-to-primitive": "^1.2.1", - "function-bind": "^1.1.1", - "has": "^1.0.3", - "has-symbols": "^1.0.1", - "is-callable": "^1.2.2", - "is-negative-zero": "^2.0.0", - "is-regex": "^1.1.1", - "object-inspect": "^1.8.0", - "object-keys": "^1.1.1", - "object.assign": "^4.1.1", - "string.prototype.trimend": "^1.0.1", - "string.prototype.trimstart": "^1.0.1" - } - } + "call-bind": "^1.0.0", + "define-properties": "^1.1.3" } }, "string_decoder": { @@ -3787,17 +3759,6 @@ } } }, - "stringify-entities": { - "version": "3.1.0", - "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-3.1.0.tgz", - "integrity": "sha512-3FP+jGMmMV/ffZs86MoghGqAoqXAdxLrJP4GUdrDN1aIScYih5tuIO3eF4To5AJZ79KDZ8Fpdy7QJnK8SsL1Vg==", - "dev": true, - "requires": { - "character-entities-html4": "^1.0.0", - "character-entities-legacy": "^1.0.0", - "xtend": "^4.0.0" - } - }, "strip-ansi": { "version": "5.2.0", "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", @@ -3835,22 +3796,22 @@ "dev": true }, "stylelint": { - "version": "13.7.2", - "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.7.2.tgz", - "integrity": "sha512-mmieorkfmO+ZA6CNDu1ic9qpt4tFvH2QUB7vqXgrMVHe5ENU69q7YDq0YUg/UHLuCsZOWhUAvcMcLzLDIERzSg==", + "version": "13.8.0", + "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-13.8.0.tgz", + "integrity": "sha512-iHH3dv3UI23SLDrH4zMQDjLT9/dDIz/IpoFeuNxZmEx86KtfpjDOscxLTFioQyv+2vQjPlRZnK0UoJtfxLICXQ==", "dev": true, "requires": { "@stylelint/postcss-css-in-js": "^0.37.2", - "@stylelint/postcss-markdown": "^0.36.1", + "@stylelint/postcss-markdown": "^0.36.2", "autoprefixer": "^9.8.6", "balanced-match": "^1.0.0", "chalk": "^4.1.0", "cosmiconfig": "^7.0.0", - "debug": "^4.1.1", + "debug": "^4.2.0", "execall": "^2.0.0", "fast-glob": "^3.2.4", "fastest-levenshtein": "^1.0.12", - "file-entry-cache": "^5.0.1", + "file-entry-cache": "^6.0.0", "get-stdin": "^8.0.0", "global-modules": "^2.0.0", "globby": "^11.0.1", @@ -3859,14 +3820,14 @@ "ignore": "^5.1.8", "import-lazy": "^4.0.0", "imurmurhash": "^0.1.4", - "known-css-properties": "^0.19.0", + "known-css-properties": "^0.20.0", "lodash": "^4.17.20", "log-symbols": "^4.0.0", "mathml-tag-names": "^2.1.3", - "meow": "^7.1.1", + "meow": "^8.0.0", "micromatch": "^4.0.2", "normalize-selector": "^0.2.0", - "postcss": "^7.0.32", + "postcss": "^7.0.35", "postcss-html": "^0.36.0", "postcss-less": "^3.1.4", "postcss-media-query-parser": "^0.2.3", @@ -3874,7 +3835,7 @@ "postcss-safe-parser": "^4.0.2", "postcss-sass": "^0.4.4", "postcss-scss": "^2.1.1", - "postcss-selector-parser": "^6.0.2", + "postcss-selector-parser": "^6.0.4", "postcss-syntax": "^0.36.2", "postcss-value-parser": "^4.1.0", "resolve-from": "^5.0.0", @@ -3885,8 +3846,8 @@ "style-search": "^0.1.0", "sugarss": "^2.0.0", "svg-tags": "^1.0.0", - "table": "^6.0.1", - "v8-compile-cache": "^2.1.1", + "table": "^6.0.3", + "v8-compile-cache": "^2.2.0", "write-file-atomic": "^3.0.3" }, "dependencies": { @@ -3942,6 +3903,31 @@ "integrity": "sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==", "dev": true }, + "file-entry-cache": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.0.tgz", + "integrity": "sha512-fqoO76jZ3ZnYrXLDRxBR1YvOvc0k844kcOg40bgsPrE25LAb/PDqTY+ho64Xh2c8ZXgIKldchCFHczG2UVRcWA==", + "dev": true, + "requires": { + "flat-cache": "^3.0.4" + } + }, + "flat-cache": { + "version": "3.0.4", + "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-3.0.4.tgz", + "integrity": "sha512-dm9s5Pw7Jc0GvMYbshN6zchCA9RgQlzzEZX3vylR9IqFfS8XciblUXOKfW6SiuJ0e13eDYZoZV5wdrev7P3Nwg==", + "dev": true, + "requires": { + "flatted": "^3.1.0", + "rimraf": "^3.0.2" + } + }, + "flatted": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.1.0.tgz", + "integrity": "sha512-tW+UkmtNg/jv9CSofAKvgVcO7c2URjhTdW1ZTkcAritblu8tajiYy7YisnIflEwtKssCtOxpnBRoCB7iap0/TA==", + "dev": true + }, "get-stdin": { "version": "8.0.0", "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-8.0.0.tgz", @@ -3981,6 +3967,15 @@ "integrity": "sha512-qYg9KP24dD5qka9J47d0aVky0N+b4fTU89LN9iDnjB5waksiC49rvMB0PrUJQGoTmH50XPiqOvAjDfaijGxYZw==", "dev": true }, + "rimraf": { + "version": "3.0.2", + "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-3.0.2.tgz", + "integrity": "sha512-JZkJMZkAGFFPP2YqXZXPbMlMBgsxzE8ILs4lMIX/2o0L9UBw9O/Y3o6wFw/i9YLapcUJWwqbi3kdxIPdC62TIA==", + "dev": true, + "requires": { + "glob": "^7.1.3" + } + }, "slice-ansi": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/slice-ansi/-/slice-ansi-4.0.0.tgz", @@ -4022,9 +4017,9 @@ } }, "table": { - "version": "6.0.3", - "resolved": "https://registry.npmjs.org/table/-/table-6.0.3.tgz", - "integrity": "sha512-8321ZMcf1B9HvVX/btKv8mMZahCjn2aYrDlpqHaBFCfnox64edeH9kEid0vTLTRR8gWR2A20aDgeuTTea4sVtw==", + "version": "6.0.4", + "resolved": "https://registry.npmjs.org/table/-/table-6.0.4.tgz", + "integrity": "sha512-sBT4xRLdALd+NFBvwOz8bw4b15htyythha+q+DVZqy2RS08PPC8O2sZFgJYEY7bJvbCFKccs+WIZ/cd+xxTWCw==", "dev": true, "requires": { "ajv": "^6.12.4", @@ -4131,24 +4126,12 @@ "is-number": "^7.0.0" } }, - "trim": { - "version": "0.0.1", - "resolved": "https://registry.npmjs.org/trim/-/trim-0.0.1.tgz", - "integrity": "sha1-WFhUf2spB1fulczMZm+1AITEYN0=", - "dev": true - }, "trim-newlines": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/trim-newlines/-/trim-newlines-3.0.0.tgz", "integrity": "sha512-C4+gOpvmxaSMKuEf9Qc134F1ZuOHVXKRbtEflf4NTtuuJDEIJ9p5PXsalL8SkeRw+qit1Mo+yuvMPAKwWg/1hA==", "dev": true }, - "trim-trailing-lines": { - "version": "1.1.4", - "resolved": "https://registry.npmjs.org/trim-trailing-lines/-/trim-trailing-lines-1.1.4.tgz", - "integrity": "sha512-rjUWSqnfTNrjbB9NQWfPMH/xRK1deHeGsHoVfpxJ++XeYXE0d6B1En37AHfw3jtfTU7dzMzZL2jjpe8Qb5gLIQ==", - "dev": true - }, "trough": { "version": "1.0.5", "resolved": "https://registry.npmjs.org/trough/-/trough-1.0.5.tgz", @@ -4194,16 +4177,6 @@ "is-typedarray": "^1.0.0" } }, - "unherit": { - "version": "1.1.3", - "resolved": "https://registry.npmjs.org/unherit/-/unherit-1.1.3.tgz", - "integrity": "sha512-Ft16BJcnapDKp0+J/rqFC3Rrk6Y/Ng4nzsC028k2jdDII/rdZ7Wd3pPT/6+vIIxRagwRc9K0IUX0Ra4fKvw+WQ==", - "dev": true, - "requires": { - "inherits": "^2.0.0", - "xtend": "^4.0.0" - } - }, "unified": { "version": "9.2.0", "resolved": "https://registry.npmjs.org/unified/-/unified-9.2.0.tgz", @@ -4234,20 +4207,11 @@ } }, "unist-util-is": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.3.tgz", - "integrity": "sha512-bTofCFVx0iQM8Jqb1TBDVRIQW03YkD3p66JOd/aCWuqzlLyUtx1ZAGw/u+Zw+SttKvSVcvTiKYbfrtLoLefykw==", + "version": "4.0.4", + "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-4.0.4.tgz", + "integrity": "sha512-3dF39j/u423v4BBQrk1AQ2Ve1FxY5W3JKwXxVFzBODQ6WEvccguhgp802qQLKSnxPODE6WuRZtV+ohlUg4meBA==", "dev": true }, - "unist-util-remove-position": { - "version": "2.0.1", - "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-2.0.1.tgz", - "integrity": "sha512-fDZsLYIe2uT+oGFnuZmy73K6ZxOPG/Qcm+w7jbEjaFcJgbQ6cqjs/eSPzXhsmGpAsWPkqZM9pYjww5QTn3LHMA==", - "dev": true, - "requires": { - "unist-util-visit": "^2.0.0" - } - }, "unist-util-stringify-position": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-2.0.3.tgz", @@ -4257,27 +4221,6 @@ "@types/unist": "^2.0.2" } }, - "unist-util-visit": { - "version": "2.0.3", - "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-2.0.3.tgz", - "integrity": "sha512-iJ4/RczbJMkD0712mGktuGpm/U4By4FfDonL7N/9tATGIF4imikjOuagyMY53tnZq3NP6BcmlrHhEKAfGWjh7Q==", - "dev": true, - "requires": { - "@types/unist": "^2.0.0", - "unist-util-is": "^4.0.0", - "unist-util-visit-parents": "^3.0.0" - } - }, - "unist-util-visit-parents": { - "version": "3.1.1", - "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-3.1.1.tgz", - "integrity": "sha512-1KROIZWo6bcMrZEwiH2UrXDyalAa0uqzWCxCJj6lPOvTve2WkfgCytoDTPaMnodXh1WrXOq0haVYHj99ynJlsg==", - "dev": true, - "requires": { - "@types/unist": "^2.0.0", - "unist-util-is": "^4.0.0" - } - }, "universalify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/universalify/-/universalify-1.0.0.tgz", @@ -4328,12 +4271,6 @@ "vfile-message": "^2.0.0" } }, - "vfile-location": { - "version": "3.2.0", - "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-3.2.0.tgz", - "integrity": "sha512-aLEIZKv/oxuCDZ8lkJGhuhztf/BW4M+iHdCwglA/eWc+vtuRFJj8EtgceYFX4LRjOhCAAiNHsKGssC6onJ+jbA==", - "dev": true - }, "vfile-message": { "version": "2.0.4", "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-2.0.4.tgz", @@ -4403,16 +4340,16 @@ "typedarray-to-buffer": "^3.1.5" } }, - "xtend": { - "version": "4.0.2", - "resolved": "https://registry.npmjs.org/xtend/-/xtend-4.0.2.tgz", - "integrity": "sha512-LKYU1iAXJXUgAXn9URjiu+MWhyUXHsvfp7mcuYm9dSUKK0/CjtrUwFAxD82/mCWbtLsGjFIad0wIsod4zrTAEQ==", + "y18n": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.1.tgz", + "integrity": "sha512-wNcy4NvjMYL8gogWWYAO7ZFWFfHcbdbE57tZO8e4cbpj8tfUcwrwqSl3ad8HxpYWCdXcJUCeKKZS62Av1affwQ==", "dev": true }, - "y18n": { + "yallist": { "version": "4.0.0", - "resolved": "https://registry.npmjs.org/y18n/-/y18n-4.0.0.tgz", - "integrity": "sha512-r9S/ZyXu/Xu9q1tYlpsLIsa3EeLXXk0VwlxqTcFRfg9EhMW+17kbt9G0NrgCmhGb5vT2hyhJZLfDGx+7+5Uj/w==", + "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz", + "integrity": "sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==", "dev": true }, "yaml": { @@ -4448,6 +4385,12 @@ "camelcase": "^5.0.0", "decamelize": "^1.2.0" } + }, + "zwitch": { + "version": "1.0.5", + "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-1.0.5.tgz", + "integrity": "sha512-V50KMwwzqJV0NpZIZFwfOD5/lyny3WlSzRiXgA0G7VUnRlqttta1L6UQIHzd6EuBY/cHGfwTIck7w1yH6Q5zUw==", + "dev": true } } } diff --git a/src/wp-content/themes/twentytwentyone/package.json b/src/wp-content/themes/twentytwentyone/package.json index f91046f327..fb63bcbacd 100644 --- a/src/wp-content/themes/twentytwentyone/package.json +++ b/src/wp-content/themes/twentytwentyone/package.json @@ -9,9 +9,9 @@ "Theme" ], "bugs": { - "url": "https://github.com/wordpress/twentytwentyone" + "url": "https://core.trac.wordpress.org/" }, - "homepage": "https://github.com/wordpress/twentytwentyone", + "homepage": "https://wordpress.org/themes/twentytwentyone/", "devDependencies": { "@wordpress/browserslist-config": "^2.2.2", "@wordpress/eslint-plugin": "^7.3.0", diff --git a/src/wp-content/themes/twentytwentyone/style-rtl.css b/src/wp-content/themes/twentytwentyone/style-rtl.css index 9bb95b6b84..227fb595a2 100644 --- a/src/wp-content/themes/twentytwentyone/style-rtl.css +++ b/src/wp-content/themes/twentytwentyone/style-rtl.css @@ -1174,6 +1174,8 @@ blockquote:before { content: "“"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); + position: absolute; + right: calc(-0.5 * var(--global--spacing-horizontal)); } blockquote .wp-block-quote__citation, @@ -1448,8 +1450,8 @@ input[type=radio] + label { input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 3px solid var(--form--color-ranged); - height: 25px; - width: 25px; + height: 44px; + width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; @@ -1457,11 +1459,12 @@ input[type=radio] + label { input[type=range]::-moz-range-thumb { border: 3px solid var(--form--color-ranged); - height: 25px; - width: 25px; + height: 44px; + width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; + box-sizing: border-box; } } @@ -1488,8 +1491,8 @@ input[type=range]::-ms-fill-lower { input[type=range]::-ms-thumb { border: 3px solid var(--form--color-ranged); - height: 25px; - width: 25px; + height: 44px; + width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; @@ -1581,7 +1584,8 @@ video { /* Media captions */ figcaption, .wp-caption, -.wp-caption-text { +.wp-caption-text, +.wp-block-embed figcaption { color: currentColor; font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); @@ -1595,7 +1599,9 @@ figcaption, .alignleft .wp-caption, .alignright .wp-caption, .alignleft .wp-caption-text, -.alignright .wp-caption-text { +.alignright .wp-caption-text, +.alignleft .wp-block-embed figcaption, +.alignright .wp-block-embed figcaption { margin-bottom: 0; } @@ -1644,45 +1650,47 @@ a:hover { text-decoration-skip-ink: none; } -.site a:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; + text-decoration: underline 1px dotted currentColor; + text-decoration-skip-ink: none; background: rgba(255, 255, 255, 0.9); } -.is-dark-theme .site a:focus, -.is-dark-theme .site a:focus .meta-nav { +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-background)); } -.has-background-white .site a:focus { +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: rgba(0, 0, 0, 0.9); color: var(--wp--style--color--link, var(--global--color-white)); } -.has-background-white .site a:focus .meta-nav { +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-white)); } -.site a:focus.skip-link { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } -.site a:focus.skip-link:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { color: #21759b; background-color: #f1f1f1; } -.site a:focus img { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } -.has-background:not(.has-background-background-color) .has-link-color a, -.has-background:not(.has-background-background-color).has-link-color a { +.has-background .has-link-color a, +.has-background.has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } @@ -1713,38 +1721,6 @@ input[type=reset], padding: var(--button--padding-vertical) var(--button--padding-horizontal); } -.site .button:before, -.site .button:after, -input[type=submit]:before, -input[type=submit]:after, -input[type=reset]:before, -input[type=reset]:after, -.wp-block-search__button:before, -.wp-block-search__button:after, -.wp-block-button .wp-block-button__link:before, -.wp-block-button .wp-block-button__link:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.site .button:before, -input[type=submit]:before, -input[type=reset]:before, -.wp-block-search__button:before, -.wp-block-button .wp-block-button__link:before { - margin-bottom: -calc(.5em * var(--button--line-height) + -.38); -} - -.site .button:after, -input[type=submit]:after, -input[type=reset]:after, -.wp-block-search__button:after, -.wp-block-button .wp-block-button__link:after { - margin-top: -calc(.5em * var(--button--line-height) + -.39); -} - .site .button:focus, input[type=submit]:focus, input[type=reset]:focus, @@ -2026,12 +2002,12 @@ input[type=reset]:hover, margin-bottom: var(--global--spacing-vertical); } -.wp-block-cover .wp-block-cover__inner-container a, -.wp-block-cover .wp-block-cover-image-text a, -.wp-block-cover .wp-block-cover-text a, -.wp-block-cover-image .wp-block-cover__inner-container a, -.wp-block-cover-image .wp-block-cover-image-text a, -.wp-block-cover-image .wp-block-cover-text a { +.wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover-image .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover-image .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover-image .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button) { color: currentColor; } @@ -2167,22 +2143,6 @@ input[type=reset]:hover, display: inline-block; } -.wp-block-file .wp-block-file__button:before, -.wp-block-file .wp-block-file__button:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.wp-block-file .wp-block-file__button:before { - margin-bottom: -calc(.5em * var(--button--line-height) + -.38); -} - -.wp-block-file .wp-block-file__button:after { - margin-top: -calc(.5em * var(--button--line-height) + -.39); -} - .wp-block-file .wp-block-file__button:focus { background: transparent; outline-offset: -6px; @@ -2920,6 +2880,8 @@ pre.wp-block-preformatted { border-width: var(--pullquote--border-width); border-bottom-style: solid; border-top-style: solid; + color: currentColor; + border-color: currentColor; position: relative; /** @@ -2931,6 +2893,8 @@ pre.wp-block-preformatted { color: currentColor; content: "“"; display: block; + position: relative; + right: 0; font-size: 3rem; font-weight: 500; line-height: 1; @@ -2964,8 +2928,8 @@ pre.wp-block-preformatted { background: none; } -.wp-block-pullquote.alignleft blockquote:before, -.wp-block-pullquote.alignleft cite { +.wp-block-pullquote.alignleft:not(.is-style-solid-color) blockquote:before, +.wp-block-pullquote.alignleft:not(.is-style-solid-color) cite { text-align: center; } @@ -2998,6 +2962,7 @@ pre.wp-block-preformatted { } .wp-block-pullquote.is-style-solid-color blockquote { + margin: 0; max-width: inherit; } @@ -3011,23 +2976,41 @@ pre.wp-block-preformatted { color: currentColor; } +.wp-block-pullquote.is-style-solid-color.alignleft, +.wp-block-pullquote.is-style-solid-color.alignright { + padding: var(--global--spacing-unit); +} + +.wp-block-pullquote.is-style-solid-color.alignleft blockquote, +.wp-block-pullquote.is-style-solid-color.alignright blockquote { + max-width: initial; +} + .wp-block-quote { + border-right: none; /** * Block Options */ } -.has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, +.wp-block-quote:before { + content: "“"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + right: 8px; +} + +.has-background .wp-block-quote .wp-block-quote__citation, +[class*=background-color] .wp-block-quote .wp-block-quote__citation, [style*=background-color] .wp-block-quote .wp-block-quote__citation, .wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation, -.has-background:not(.has-background-background-color) .wp-block-quote cite, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote cite, +.has-background .wp-block-quote cite, +[class*=background-color] .wp-block-quote cite, [style*=background-color] .wp-block-quote cite, .wp-block-cover[style*=background-image] .wp-block-quote cite, -.has-background:not(.has-background-background-color) .wp-block-quote footer, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote footer, +.has-background .wp-block-quote footer, +[class*=background-color] .wp-block-quote footer, [style*=background-color] .wp-block-quote footer, .wp-block-cover[style*=background-image] .wp-block-quote footer { color: currentColor; @@ -3040,9 +3023,15 @@ pre.wp-block-preformatted { } .wp-block-quote.has-text-align-right:before { + display: none; +} + +.wp-block-quote.has-text-align-right p:before { content: "”"; - right: initial; - left: calc(-0.5 * var(--global--spacing-horizontal)); + font-size: var(--quote--font-size); + font-weight: normal; + line-height: var(--quote--line-height); + margin-left: 5px; } .wp-block-quote.has-text-align-center { @@ -3079,8 +3068,16 @@ pre.wp-block-preformatted { .wp-block-quote.is-large.has-text-align-right:before, .wp-block-quote.is-style-large.has-text-align-right:before { - right: initial; - left: calc(-1 * var(--global--spacing-horizontal)); + display: none; +} + +.wp-block-quote.is-large.has-text-align-right p:before, +.wp-block-quote.is-style-large.has-text-align-right p:before { + content: "”"; + font-size: var(--quote--font-size-large); + font-weight: normal; + line-height: var(--quote--line-height-large); + margin-left: 10px; } .wp-block-quote.is-large .wp-block-quote__citation, @@ -3242,10 +3239,6 @@ pre.wp-block-preformatted { max-width: var(--responsive--aligndefault-width); } -.wp-block-search__button-inside .wp-block-search__inside-wrapper { - background-color: var(--global--color-white); -} - .wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper { justify-content: center; } @@ -3271,8 +3264,8 @@ pre.wp-block-preformatted { border-color: var(--form--border-color); } -.has-background:not(.has-background-background-color) .wp-block-search .wp-block-search__input, -[class*=background-color]:not(.has-background-background-color) .wp-block-search .wp-block-search__input, +.has-background .wp-block-search .wp-block-search__input, +[class*=background-color] .wp-block-search .wp-block-search__input, [style*=background-color] .wp-block-search .wp-block-search__input, .wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input { border-color: currentColor; @@ -3362,6 +3355,25 @@ pre.wp-block-preformatted { color: var(--button--color-background); } +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { + background-color: var(--global--color-white); + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); +} + +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { + margin-left: 0; +} + +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { + outline: 2px dotted var(--form--border-color); + outline-offset: -5px; +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { + outline-color: currentColor; +} + .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button { padding: var(--button--padding-vertical) var(--button--padding-horizontal); } @@ -3417,6 +3429,7 @@ hr { hr.wp-block-separator { border-bottom: var(--separator--height) solid var(--separator--border-color); + opacity: 1; /** * Block Options @@ -3427,7 +3440,11 @@ hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: var(--responsive--aligndefault-width); } -hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { +hr.wp-block-separator:not(.is-style-dots).alignwide { + max-width: var(--responsive--alignwide-width); +} + +hr.wp-block-separator:not(.is-style-dots).alignfull { max-width: var(--responsive--alignfull-width); } @@ -3452,13 +3469,17 @@ hr.wp-block-separator.is-style-dots:before { padding-right: var(--global--font-size-sm); } -.has-background:not(.has-background-background-color) hr.wp-block-separator, -[class*=background-color]:not(.has-background-background-color) hr.wp-block-separator, +.has-background hr.wp-block-separator, +[class*=background-color] hr.wp-block-separator, [style*=background-color] hr.wp-block-separator, .wp-block-cover[style*=background-image] hr.wp-block-separator { border-color: currentColor; } +.wp-block-social-links a:focus { + color: var(--global--color-primary); +} + .wp-block-social-links.is-style-twentytwentyone-social-icons-color a { color: var(--global--color-primary); } @@ -3852,6 +3873,11 @@ a.custom-logo-link { text-decoration: none; } +.has-background-white a.custom-logo-link:focus, +.is-dark-theme a.custom-logo-link:focus { + background: none; +} + .site-title > a { text-decoration-color: var(--global--color-secondary); } @@ -3958,6 +3984,12 @@ a.custom-logo-link { .no-widgets .site-footer { margin-top: calc(6 * var(--global--spacing-vertical)); } +@media only screen and (max-width: 481px) { + + .no-widgets .site-footer { + margin-top: calc(3 * var(--global--spacing-vertical)); + } +} .site-footer > .site-info { padding-top: var(--global--spacing-vertical); @@ -4011,6 +4043,10 @@ a.custom-logo-link { color: var(--wp--style--color--link, var(--global--color-background)); } +.has-background-white .site-footer > .site-info a:focus { + color: var(--wp--style--color--link, var(--global--color-white)); +} + .singular .entry-header { border-bottom: 3px solid var(--global--color-border); padding-bottom: calc(2 * var(--global--spacing-vertical)); @@ -4935,7 +4971,7 @@ h1.page-title { } .primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle { - margin-right: calc(0px - var(--primary-nav--padding)); + margin-right: calc(5px - var(--primary-nav--padding)); } } @@ -4976,6 +5012,7 @@ h1.page-title { position: relative; z-index: 99999; outline-offset: 0; + text-decoration-thickness: 2px; } .primary-navigation .current-menu-item > a:first-child, @@ -5118,6 +5155,10 @@ h1.page-title { fill: var(--wp--style--color--link, var(--global--color-background)); } +.has-background-white .footer-navigation-wrapper li a:focus .svg-icon { + fill: var(--wp--style--color--link, var(--global--color-white)); +} + .footer-navigation-wrapper li .svg-icon { vertical-align: middle; fill: var(--footer--color-link); @@ -5145,6 +5186,7 @@ h1.page-title { .navigation a:hover { color: var(--global--color-primary-hover); text-decoration: underline; + text-decoration-style: dotted; } .navigation a:focus { @@ -5260,12 +5302,6 @@ h1.page-title { margin-bottom: 0; } -.post-navigation .nav-next:hover .post-title, -.post-navigation .nav-previous:hover .post-title { - text-decoration: underline; - text-decoration-thickness: 1px; -} - .pagination, .comments-pagination { border-top: 3px solid var(--global--color-border); @@ -5290,6 +5326,24 @@ h1.page-title { color: var(--pagination--color-link-hover); } +.is-dark-theme .pagination .nav-links a:active, +.is-dark-theme .pagination .nav-links a:hover:active, +.is-dark-theme .pagination .nav-links a:hover:focus, +.is-dark-theme .comments-pagination .nav-links a:active, +.is-dark-theme .comments-pagination .nav-links a:hover:active, +.is-dark-theme .comments-pagination .nav-links a:hover:focus { + color: var(--global--color-background); +} + +.has-background-white .pagination .nav-links a:active, +.has-background-white .pagination .nav-links a:hover:active, +.has-background-white .pagination .nav-links a:hover:focus, +.has-background-white .comments-pagination .nav-links a:active, +.has-background-white .comments-pagination .nav-links a:hover:active, +.has-background-white .comments-pagination .nav-links a:hover:focus { + color: var(--global--color-white); +} + .pagination .nav-links > *, .comments-pagination .nav-links > * { color: var(--pagination--color-text); @@ -5303,7 +5357,12 @@ h1.page-title { .pagination .nav-links > *.current, .comments-pagination .nav-links > *.current { - border-bottom: 1px solid var(--pagination--color-text); + text-decoration: underline; +} + +.pagination .nav-links > *:not(.dots):not(.current):hover, +.comments-pagination .nav-links > *:not(.dots):not(.current):hover { + text-decoration-style: dotted; } .pagination .nav-links > *:first-child, @@ -5390,6 +5449,12 @@ h1.page-title { grid-template-columns: repeat(3, 1fr); } } +@media only screen and (max-width: 481px) { + + .widget-area { + margin-top: calc(3 * var(--global--spacing-vertical)); + } +} .widget-area ul { list-style-type: none; @@ -5585,7 +5650,7 @@ h1.page-title { color: var(--global--color-white); } -.has-background:not(.has-background-background-color) a:not(.wp-block-button__link), +.has-background a, .has-background p, .has-background h1, .has-background h2, diff --git a/src/wp-content/themes/twentytwentyone/style.css b/src/wp-content/themes/twentytwentyone/style.css index 6e20c7fa57..2a161c21f7 100644 --- a/src/wp-content/themes/twentytwentyone/style.css +++ b/src/wp-content/themes/twentytwentyone/style.css @@ -1182,6 +1182,8 @@ blockquote:before { content: "“"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); + position: absolute; + left: calc(-0.5 * var(--global--spacing-horizontal)); } blockquote .wp-block-quote__citation, @@ -1458,8 +1460,8 @@ input[type=radio] + label { input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; border: 3px solid var(--form--color-ranged); - height: 25px; - width: 25px; + height: 44px; + width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; @@ -1467,11 +1469,12 @@ input[type=radio] + label { input[type=range]::-moz-range-thumb { border: 3px solid var(--form--color-ranged); - height: 25px; - width: 25px; + height: 44px; + width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; + box-sizing: border-box; } } @@ -1498,8 +1501,8 @@ input[type=range]::-ms-fill-lower { input[type=range]::-ms-thumb { border: 3px solid var(--form--color-ranged); - height: 25px; - width: 25px; + height: 44px; + width: 44px; border-radius: 50%; background: var(--global--color-background); cursor: pointer; @@ -1591,7 +1594,8 @@ video { /* Media captions */ figcaption, .wp-caption, -.wp-caption-text { +.wp-caption-text, +.wp-block-embed figcaption { color: currentColor; font-size: var(--global--font-size-xs); line-height: var(--global--line-height-body); @@ -1605,7 +1609,9 @@ figcaption, .alignleft .wp-caption, .alignright .wp-caption, .alignleft .wp-caption-text, -.alignright .wp-caption-text { +.alignright .wp-caption-text, +.alignleft .wp-block-embed figcaption, +.alignright .wp-block-embed figcaption { margin-bottom: 0; } @@ -1654,45 +1660,47 @@ a:hover { text-decoration-skip-ink: none; } -.site a:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; + text-decoration: underline 1px dotted currentColor; + text-decoration-skip-ink: none; background: rgba(255, 255, 255, 0.9); } -.is-dark-theme .site a:focus, -.is-dark-theme .site a:focus .meta-nav { +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button), +.is-dark-theme .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-background)); } -.has-background-white .site a:focus { +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) { background: rgba(0, 0, 0, 0.9); color: var(--wp--style--color--link, var(--global--color-white)); } -.has-background-white .site a:focus .meta-nav { +.has-background-white .site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) .meta-nav { color: var(--wp--style--color--link, var(--global--color-white)); } -.site a:focus.skip-link { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link { /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; } -.site a:focus.skip-link:focus { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button).skip-link:focus { color: #21759b; background-color: #f1f1f1; } -.site a:focus img { +.site a:focus:not(.wp-block-button__link):not(.wp-block-file__button) img { outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); } -.has-background:not(.has-background-background-color) .has-link-color a, -.has-background:not(.has-background-background-color).has-link-color a { +.has-background .has-link-color a, +.has-background.has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); } @@ -1723,38 +1731,6 @@ input[type=reset], padding: var(--button--padding-vertical) var(--button--padding-horizontal); } -.site .button:before, -.site .button:after, -input[type=submit]:before, -input[type=submit]:after, -input[type=reset]:before, -input[type=reset]:after, -.wp-block-search__button:before, -.wp-block-search__button:after, -.wp-block-button .wp-block-button__link:before, -.wp-block-button .wp-block-button__link:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.site .button:before, -input[type=submit]:before, -input[type=reset]:before, -.wp-block-search__button:before, -.wp-block-button .wp-block-button__link:before { - margin-bottom: -calc(.5em * var(--button--line-height) + -.38); -} - -.site .button:after, -input[type=submit]:after, -input[type=reset]:after, -.wp-block-search__button:after, -.wp-block-button .wp-block-button__link:after { - margin-top: -calc(.5em * var(--button--line-height) + -.39); -} - .site .button:focus, input[type=submit]:focus, input[type=reset]:focus, @@ -2036,12 +2012,12 @@ input[type=reset]:hover, margin-bottom: var(--global--spacing-vertical); } -.wp-block-cover .wp-block-cover__inner-container a, -.wp-block-cover .wp-block-cover-image-text a, -.wp-block-cover .wp-block-cover-text a, -.wp-block-cover-image .wp-block-cover__inner-container a, -.wp-block-cover-image .wp-block-cover-image-text a, -.wp-block-cover-image .wp-block-cover-text a { +.wp-block-cover .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover-image .wp-block-cover__inner-container a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover-image .wp-block-cover-image-text a:not(.wp-block-button__link):not(.wp-block-file__button), +.wp-block-cover-image .wp-block-cover-text a:not(.wp-block-button__link):not(.wp-block-file__button) { color: currentColor; } @@ -2177,22 +2153,6 @@ input[type=reset]:hover, display: inline-block; } -.wp-block-file .wp-block-file__button:before, -.wp-block-file .wp-block-file__button:after { - content: ""; - display: block; - height: 0; - width: 0; -} - -.wp-block-file .wp-block-file__button:before { - margin-bottom: -calc(.5em * var(--button--line-height) + -.38); -} - -.wp-block-file .wp-block-file__button:after { - margin-top: -calc(.5em * var(--button--line-height) + -.39); -} - .wp-block-file .wp-block-file__button:focus { background: transparent; outline-offset: -6px; @@ -2930,6 +2890,8 @@ pre.wp-block-preformatted { border-width: var(--pullquote--border-width); border-bottom-style: solid; border-top-style: solid; + color: currentColor; + border-color: currentColor; position: relative; /** @@ -2941,6 +2903,8 @@ pre.wp-block-preformatted { color: currentColor; content: "“"; display: block; + position: relative; + left: 0; font-size: 3rem; font-weight: 500; line-height: 1; @@ -2974,8 +2938,8 @@ pre.wp-block-preformatted { background: none; } -.wp-block-pullquote.alignleft blockquote:before, -.wp-block-pullquote.alignleft cite { +.wp-block-pullquote.alignleft:not(.is-style-solid-color) blockquote:before, +.wp-block-pullquote.alignleft:not(.is-style-solid-color) cite { text-align: center; } @@ -3008,6 +2972,7 @@ pre.wp-block-preformatted { } .wp-block-pullquote.is-style-solid-color blockquote { + margin: 0; max-width: inherit; } @@ -3021,23 +2986,41 @@ pre.wp-block-preformatted { color: currentColor; } +.wp-block-pullquote.is-style-solid-color.alignleft, +.wp-block-pullquote.is-style-solid-color.alignright { + padding: var(--global--spacing-unit); +} + +.wp-block-pullquote.is-style-solid-color.alignleft blockquote, +.wp-block-pullquote.is-style-solid-color.alignright blockquote { + max-width: initial; +} + .wp-block-quote { + border-left: none; /** * Block Options */ } -.has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, +.wp-block-quote:before { + content: "“"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + left: 8px; +} + +.has-background .wp-block-quote .wp-block-quote__citation, +[class*=background-color] .wp-block-quote .wp-block-quote__citation, [style*=background-color] .wp-block-quote .wp-block-quote__citation, .wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation, -.has-background:not(.has-background-background-color) .wp-block-quote cite, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote cite, +.has-background .wp-block-quote cite, +[class*=background-color] .wp-block-quote cite, [style*=background-color] .wp-block-quote cite, .wp-block-cover[style*=background-image] .wp-block-quote cite, -.has-background:not(.has-background-background-color) .wp-block-quote footer, -[class*=background-color]:not(.has-background-background-color) .wp-block-quote footer, +.has-background .wp-block-quote footer, +[class*=background-color] .wp-block-quote footer, [style*=background-color] .wp-block-quote footer, .wp-block-cover[style*=background-image] .wp-block-quote footer { color: currentColor; @@ -3050,9 +3033,15 @@ pre.wp-block-preformatted { } .wp-block-quote.has-text-align-right:before { + display: none; +} + +.wp-block-quote.has-text-align-right p:before { content: "”"; - left: initial; - right: calc(-0.5 * var(--global--spacing-horizontal)); + font-size: var(--quote--font-size); + font-weight: normal; + line-height: var(--quote--line-height); + margin-right: 5px; } .wp-block-quote.has-text-align-center { @@ -3089,8 +3078,16 @@ pre.wp-block-preformatted { .wp-block-quote.is-large.has-text-align-right:before, .wp-block-quote.is-style-large.has-text-align-right:before { - left: initial; - right: calc(-1 * var(--global--spacing-horizontal)); + display: none; +} + +.wp-block-quote.is-large.has-text-align-right p:before, +.wp-block-quote.is-style-large.has-text-align-right p:before { + content: "”"; + font-size: var(--quote--font-size-large); + font-weight: normal; + line-height: var(--quote--line-height-large); + margin-right: 10px; } .wp-block-quote.is-large .wp-block-quote__citation, @@ -3252,10 +3249,6 @@ pre.wp-block-preformatted { max-width: var(--responsive--aligndefault-width); } -.wp-block-search__button-inside .wp-block-search__inside-wrapper { - background-color: var(--global--color-white); -} - .wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper { justify-content: center; } @@ -3281,8 +3274,8 @@ pre.wp-block-preformatted { border-color: var(--form--border-color); } -.has-background:not(.has-background-background-color) .wp-block-search .wp-block-search__input, -[class*=background-color]:not(.has-background-background-color) .wp-block-search .wp-block-search__input, +.has-background .wp-block-search .wp-block-search__input, +[class*=background-color] .wp-block-search .wp-block-search__input, [style*=background-color] .wp-block-search .wp-block-search__input, .wp-block-cover[style*=background-image] .wp-block-search .wp-block-search__input { border-color: currentColor; @@ -3372,6 +3365,25 @@ pre.wp-block-preformatted { color: var(--button--color-background); } +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper { + background-color: var(--global--color-white); + border: var(--form--border-width) solid var(--form--border-color); + border-radius: var(--form--border-radius); +} + +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input { + margin-right: 0; +} + +.wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { + outline: 2px dotted var(--form--border-color); + outline-offset: -5px; +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__inside-wrapper .wp-block-search__input:focus { + outline-color: currentColor; +} + .wp-block-search.wp-block-search__button-inside.wp-block-search__text-button button.wp-block-search__button { padding: var(--button--padding-vertical) var(--button--padding-horizontal); } @@ -3427,6 +3439,7 @@ hr { hr.wp-block-separator { border-bottom: var(--separator--height) solid var(--separator--border-color); + opacity: 1; /** * Block Options @@ -3437,7 +3450,11 @@ hr.wp-block-separator:not(.is-style-dots):not(.alignwide) { max-width: var(--responsive--aligndefault-width); } -hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { +hr.wp-block-separator:not(.is-style-dots).alignwide { + max-width: var(--responsive--alignwide-width); +} + +hr.wp-block-separator:not(.is-style-dots).alignfull { max-width: var(--responsive--alignfull-width); } @@ -3462,13 +3479,17 @@ hr.wp-block-separator.is-style-dots:before { padding-left: var(--global--font-size-sm); } -.has-background:not(.has-background-background-color) hr.wp-block-separator, -[class*=background-color]:not(.has-background-background-color) hr.wp-block-separator, +.has-background hr.wp-block-separator, +[class*=background-color] hr.wp-block-separator, [style*=background-color] hr.wp-block-separator, .wp-block-cover[style*=background-image] hr.wp-block-separator { border-color: currentColor; } +.wp-block-social-links a:focus { + color: var(--global--color-primary); +} + .wp-block-social-links.is-style-twentytwentyone-social-icons-color a { color: var(--global--color-primary); } @@ -3872,6 +3893,11 @@ a.custom-logo-link { text-decoration: none; } +.has-background-white a.custom-logo-link:focus, +.is-dark-theme a.custom-logo-link:focus { + background: none; +} + .site-title > a { text-decoration-color: var(--global--color-secondary); } @@ -3978,6 +4004,12 @@ a.custom-logo-link { .no-widgets .site-footer { margin-top: calc(6 * var(--global--spacing-vertical)); } +@media only screen and (max-width: 481px) { + + .no-widgets .site-footer { + margin-top: calc(3 * var(--global--spacing-vertical)); + } +} .site-footer > .site-info { padding-top: var(--global--spacing-vertical); @@ -4031,6 +4063,10 @@ a.custom-logo-link { color: var(--wp--style--color--link, var(--global--color-background)); } +.has-background-white .site-footer > .site-info a:focus { + color: var(--wp--style--color--link, var(--global--color-white)); +} + .singular .entry-header { border-bottom: 3px solid var(--global--color-border); padding-bottom: calc(2 * var(--global--spacing-vertical)); @@ -4971,7 +5007,7 @@ h1.page-title { } .primary-navigation .primary-menu-container > ul > .menu-item > a + .sub-menu-toggle { - margin-left: calc(0px - var(--primary-nav--padding)); + margin-left: calc(5px - var(--primary-nav--padding)); } } @@ -5012,6 +5048,7 @@ h1.page-title { position: relative; z-index: 99999; outline-offset: 0; + text-decoration-thickness: 2px; } .primary-navigation .current-menu-item > a:first-child, @@ -5154,6 +5191,10 @@ h1.page-title { fill: var(--wp--style--color--link, var(--global--color-background)); } +.has-background-white .footer-navigation-wrapper li a:focus .svg-icon { + fill: var(--wp--style--color--link, var(--global--color-white)); +} + .footer-navigation-wrapper li .svg-icon { vertical-align: middle; fill: var(--footer--color-link); @@ -5181,6 +5222,7 @@ h1.page-title { .navigation a:hover { color: var(--global--color-primary-hover); text-decoration: underline; + text-decoration-style: dotted; } .navigation a:focus { @@ -5296,12 +5338,6 @@ h1.page-title { margin-bottom: 0; } -.post-navigation .nav-next:hover .post-title, -.post-navigation .nav-previous:hover .post-title { - text-decoration: underline; - text-decoration-thickness: 1px; -} - .pagination, .comments-pagination { border-top: 3px solid var(--global--color-border); @@ -5326,6 +5362,24 @@ h1.page-title { color: var(--pagination--color-link-hover); } +.is-dark-theme .pagination .nav-links a:active, +.is-dark-theme .pagination .nav-links a:hover:active, +.is-dark-theme .pagination .nav-links a:hover:focus, +.is-dark-theme .comments-pagination .nav-links a:active, +.is-dark-theme .comments-pagination .nav-links a:hover:active, +.is-dark-theme .comments-pagination .nav-links a:hover:focus { + color: var(--global--color-background); +} + +.has-background-white .pagination .nav-links a:active, +.has-background-white .pagination .nav-links a:hover:active, +.has-background-white .pagination .nav-links a:hover:focus, +.has-background-white .comments-pagination .nav-links a:active, +.has-background-white .comments-pagination .nav-links a:hover:active, +.has-background-white .comments-pagination .nav-links a:hover:focus { + color: var(--global--color-white); +} + .pagination .nav-links > *, .comments-pagination .nav-links > * { color: var(--pagination--color-text); @@ -5339,7 +5393,12 @@ h1.page-title { .pagination .nav-links > *.current, .comments-pagination .nav-links > *.current { - border-bottom: 1px solid var(--pagination--color-text); + text-decoration: underline; +} + +.pagination .nav-links > *:not(.dots):not(.current):hover, +.comments-pagination .nav-links > *:not(.dots):not(.current):hover { + text-decoration-style: dotted; } .pagination .nav-links > *:first-child, @@ -5426,6 +5485,12 @@ h1.page-title { grid-template-columns: repeat(3, 1fr); } } +@media only screen and (max-width: 481px) { + + .widget-area { + margin-top: calc(3 * var(--global--spacing-vertical)); + } +} .widget-area ul { list-style-type: none; @@ -5621,7 +5686,7 @@ h1.page-title { color: var(--global--color-white); } -.has-background:not(.has-background-background-color) a:not(.wp-block-button__link), +.has-background a, .has-background p, .has-background h1, .has-background h2,