From 967d29d83da3f2d9399d6cf65cf7b62711e92443 Mon Sep 17 00:00:00 2001 From: desrosj Date: Thu, 12 Nov 2020 18:36:15 +0000 Subject: [PATCH] Twenty Twenty-One: Merge the latest changes changes from GitHub for Beta 4. MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit In addition to syncing the latest changes, this change also merges the theme’s `.scss` files and other related build tool configurations required to compile the theme’s CSS. This will allow development of the theme to continue on Trac after 5.6 is released and the GitHub repository is archived. For a full list of changes since [], see https://github.com/WordPress/twentytwentyone/compare/e7d5991...aa284fd. Props poena, luminuu kjellr, aristath, justinahinon. See #51526. Built from https://develop.svn.wordpress.org/trunk@49574 git-svn-id: http://core.svn.wordpress.org/trunk@49312 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- .../themes/twentytwentyone/.stylelintignore | 10 + .../twentytwentyone/.stylelintrc-css.json | 22 + .../themes/twentytwentyone/.stylelintrc.json | 15 + .../assets/css/custom-color-overrides.css | 4 +- .../twentytwentyone/assets/css/ie-editor.css | 2713 ++++----- .../themes/twentytwentyone/assets/css/ie.css | 5363 ++++++----------- .../twentytwentyone/assets/css/print.css | 140 +- .../assets/css/style-dark-mode-rtl.css | 115 + .../assets/css/style-dark-mode.css | 148 +- .../assets/css/style-editor-customizer.css | 2 +- .../assets/css/style-editor.css | 543 +- .../assets/js/customize-helpers.js | 2 +- .../assets/js/customize-preview.js | 19 +- .../twentytwentyone/assets/js/customize.js | 41 +- .../assets/js/dark-mode-toggler.js | 41 +- .../assets/js/editor-dark-mode-support.js | 76 +- .../twentytwentyone/assets/js/editor.js | 38 + .../assets/js/primary-navigation.js | 4 +- .../assets/js/unregister-block-style.js | 6 - .../assets/sass/01-settings/file-header.scss | 18 + .../assets/sass/01-settings/fonts.scss | 1 + .../assets/sass/01-settings/global.scss | 249 + .../assets/sass/02-tools/extends.scss | 42 + .../assets/sass/02-tools/functions.scss | 178 + .../assets/sass/02-tools/mixins.scss | 79 + .../assets/sass/03-generic/breakpoints.scss | 217 + .../assets/sass/03-generic/clearings.scss | 25 + .../assets/sass/03-generic/normalize.scss | 350 ++ .../assets/sass/03-generic/reset.scss | 75 + .../sass/03-generic/vertical-margins.scss | 172 + .../assets/sass/04-elements/blockquote.scss | 79 + .../assets/sass/04-elements/forms-editor.scss | 12 + .../assets/sass/04-elements/forms.scss | 328 + .../assets/sass/04-elements/links.scss | 66 + .../assets/sass/04-elements/media.scss | 46 + .../assets/sass/04-elements/misc.scss | 17 + .../assets/sass/05-blocks/_config.scss | 7 + .../assets/sass/05-blocks/audio/_style.scss | 7 + .../assets/sass/05-blocks/blocks-editor.scss | 35 + .../assets/sass/05-blocks/blocks.scss | 37 + .../assets/sass/05-blocks/button/_editor.scss | 118 + .../assets/sass/05-blocks/button/_style.scss | 134 + .../assets/sass/05-blocks/code/_editor.scss | 14 + .../assets/sass/05-blocks/code/_style.scss | 14 + .../sass/05-blocks/columns/_editor.scss | 66 + .../assets/sass/05-blocks/columns/_style.scss | 105 + .../assets/sass/05-blocks/cover/_editor.scss | 70 + .../assets/sass/05-blocks/cover/_style.scss | 111 + .../assets/sass/05-blocks/file/_editor.scss | 24 + .../assets/sass/05-blocks/file/_style.scss | 24 + .../sass/05-blocks/gallery/_editor.scss | 10 + .../assets/sass/05-blocks/gallery/_style.scss | 33 + .../assets/sass/05-blocks/group/_editor.scss | 47 + .../assets/sass/05-blocks/group/_style.scss | 70 + .../sass/05-blocks/heading/_editor.scss | 81 + .../assets/sass/05-blocks/heading/_style.scss | 65 + .../assets/sass/05-blocks/html/_editor.scss | 6 + .../assets/sass/05-blocks/image/_editor.scss | 20 + .../assets/sass/05-blocks/image/_style.scss | 69 + .../05-blocks/latest-comments/_editor.scss | 3 + .../05-blocks/latest-comments/_style.scss | 35 + .../sass/05-blocks/latest-posts/_editor.scss | 144 + .../sass/05-blocks/latest-posts/_style.scss | 169 + .../assets/sass/05-blocks/legacy/_editor.scss | 42 + .../assets/sass/05-blocks/legacy/_style.scss | 55 + .../assets/sass/05-blocks/list/_editor.scss | 32 + .../assets/sass/05-blocks/list/_style.scss | 36 + .../sass/05-blocks/media-text/_editor.scss | 24 + .../sass/05-blocks/media-text/_style.scss | 53 + .../sass/05-blocks/navigation/_editor.scss | 45 + .../sass/05-blocks/navigation/_style.scss | 128 + .../sass/05-blocks/paragraph/_editor.scss | 7 + .../sass/05-blocks/paragraph/_style.scss | 14 + .../sass/05-blocks/preformatted/_editor.scss | 6 + .../sass/05-blocks/preformatted/_style.scss | 4 + .../sass/05-blocks/pullquote/_editor.scss | 96 + .../sass/05-blocks/pullquote/_style.scss | 97 + .../assets/sass/05-blocks/quote/_editor.scss | 134 + .../assets/sass/05-blocks/quote/_style.scss | 113 + .../assets/sass/05-blocks/rss/_editor.scss | 109 + .../assets/sass/05-blocks/rss/_style.scss | 109 + .../assets/sass/05-blocks/search/_editor.scss | 183 + .../assets/sass/05-blocks/search/_style.scss | 162 + .../sass/05-blocks/separator/_editor.scss | 48 + .../sass/05-blocks/separator/_style.scss | 52 + .../sass/05-blocks/social-icons/_editor.scss | 20 + .../sass/05-blocks/social-icons/_style.scss | 11 + .../assets/sass/05-blocks/spacer/_style.scss | 13 + .../assets/sass/05-blocks/table/_editor.scss | 79 + .../assets/sass/05-blocks/table/_style.scss | 84 + .../sass/05-blocks/tag-clould/_editor.scss | 6 + .../sass/05-blocks/tag-clould/_style.scss | 7 + .../sass/05-blocks/utilities/_editor.scss | 143 + .../sass/05-blocks/utilities/_font-sizes.scss | 53 + .../sass/05-blocks/utilities/_style.scss | 160 + .../assets/sass/05-blocks/verse/_editor.scss | 4 + .../assets/sass/05-blocks/verse/_style.scss | 3 + .../assets/sass/05-blocks/video/_style.scss | 16 + .../assets/sass/06-components/404.scss | 4 + .../assets/sass/06-components/archives.scss | 68 + .../assets/sass/06-components/comments.scss | 292 + .../assets/sass/06-components/editor.scss | 44 + .../assets/sass/06-components/entry.scss | 214 + .../sass/06-components/footer-navigation.scss | 65 + .../assets/sass/06-components/footer.scss | 62 + .../assets/sass/06-components/header.scss | 207 + .../assets/sass/06-components/navigation.scss | 532 ++ .../assets/sass/06-components/pagination.scss | 231 + .../sass/06-components/posts-and-pages.scss | 24 + .../assets/sass/06-components/search.scss | 3 + .../assets/sass/06-components/single.scss | 17 + .../assets/sass/06-components/widgets.scss | 129 + .../assets/sass/07-utilities/a11y.scss | 48 + .../sass/07-utilities/color-palette.scss | 148 + .../assets/sass/07-utilities/ie.scss | 53 + .../assets/sass/07-utilities/measure.scss | 22 + .../assets/sass/07-utilities/print.scss | 184 + .../assets/sass/style-dark-mode.scss | 108 + .../assets/sass/style-editor.scss | 21 + .../twentytwentyone/assets/sass/style.scss | 122 + .../class-twenty-twenty-one-custom-colors.php | 4 +- .../class-twenty-twenty-one-customize.php | 4 +- .../class-twenty-twenty-one-dark-mode.php | 65 +- .../themes/twentytwentyone/comments.php | 2 +- wp-content/themes/twentytwentyone/footer.php | 6 +- .../themes/twentytwentyone/functions.php | 6 +- .../twentytwentyone/inc/block-patterns.php | 2 +- .../twentytwentyone/inc/menu-functions.php | 2 +- .../twentytwentyone/inc/starter-content.php | 10 +- .../inc/template-functions.php | 33 +- .../twentytwentyone/inc/template-tags.php | 25 +- .../themes/twentytwentyone/package-lock.json | 3956 +++--------- .../themes/twentytwentyone/package.json | 20 +- wp-content/themes/twentytwentyone/readme.txt | 5 + wp-content/themes/twentytwentyone/single.php | 36 +- .../themes/twentytwentyone/style-rtl.css | 1298 ++-- wp-content/themes/twentytwentyone/style.css | 1318 ++-- .../template-parts/content/content-none.php | 2 +- .../template-parts/header/site-nav.php | 4 +- wp-includes/version.php | 2 +- 140 files changed, 14698 insertions(+), 9622 deletions(-) create mode 100644 wp-content/themes/twentytwentyone/.stylelintignore create mode 100644 wp-content/themes/twentytwentyone/.stylelintrc-css.json create mode 100644 wp-content/themes/twentytwentyone/.stylelintrc.json create mode 100644 wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css create mode 100644 wp-content/themes/twentytwentyone/assets/js/editor.js delete mode 100644 wp-content/themes/twentytwentyone/assets/js/unregister-block-style.js create mode 100644 wp-content/themes/twentytwentyone/assets/sass/01-settings/file-header.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/01-settings/fonts.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/02-tools/extends.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/02-tools/functions.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/03-generic/breakpoints.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/03-generic/clearings.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/03-generic/normalize.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/03-generic/reset.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/03-generic/vertical-margins.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/04-elements/forms-editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/04-elements/misc.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/_config.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/audio/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks-editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/html/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/spacer/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_font-sizes.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/05-blocks/video/_style.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/404.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/archives.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/comments.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/entry.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/footer.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/posts-and-pages.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/search.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/single.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/07-utilities/ie.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/07-utilities/measure.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/07-utilities/print.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/style-editor.scss create mode 100644 wp-content/themes/twentytwentyone/assets/sass/style.scss diff --git a/wp-content/themes/twentytwentyone/.stylelintignore b/wp-content/themes/twentytwentyone/.stylelintignore new file mode 100644 index 0000000000..b732fe32e4 --- /dev/null +++ b/wp-content/themes/twentytwentyone/.stylelintignore @@ -0,0 +1,10 @@ +vendor/ +node_modules/ +assets/images +*.php +*.map +*.png +*.json +LICENSE +composer.lock +*.txt diff --git a/wp-content/themes/twentytwentyone/.stylelintrc-css.json b/wp-content/themes/twentytwentyone/.stylelintrc-css.json new file mode 100644 index 0000000000..c48e0bee62 --- /dev/null +++ b/wp-content/themes/twentytwentyone/.stylelintrc-css.json @@ -0,0 +1,22 @@ +{ + "extends": [ + "stylelint-config-wordpress" + ], + "rules": { + "indentation": "tab", + "no-duplicate-selectors": null, + "function-url-quotes": null, + "selector-attribute-quotes": null, + "declaration-block-no-duplicate-properties": null, + "function-calc-no-unspaced-operator": null, + "selector-pseudo-class-no-unknown": null, + "selector-class-pattern": null, + "font-weight-notation": null, + "selector-type-no-unknown": null, + "max-line-length": null, + "at-rule-empty-line-before": null, + "selector-pseudo-element-colon-notation": null, + "number-leading-zero": null, + "no-descending-specificity": null + } +} diff --git a/wp-content/themes/twentytwentyone/.stylelintrc.json b/wp-content/themes/twentytwentyone/.stylelintrc.json new file mode 100644 index 0000000000..bd92dd8248 --- /dev/null +++ b/wp-content/themes/twentytwentyone/.stylelintrc.json @@ -0,0 +1,15 @@ +{ + "extends": [ + "stylelint-config-wordpress/scss" + ], + "rules": { + "selector-class-pattern": null, + "font-weight-notation": null, + "selector-type-no-unknown": null, + "max-line-length": null, + "at-rule-empty-line-before": null, + "selector-pseudo-element-colon-notation": null, + "number-leading-zero": null, + "no-descending-specificity": null + } +} diff --git a/wp-content/themes/twentytwentyone/assets/css/custom-color-overrides.css b/wp-content/themes/twentytwentyone/assets/css/custom-color-overrides.css index 17b4981795..e81e15ccc5 100644 --- a/wp-content/themes/twentytwentyone/assets/css/custom-color-overrides.css +++ b/wp-content/themes/twentytwentyone/assets/css/custom-color-overrides.css @@ -1,5 +1,5 @@ /** * Custom Color Overrides - * + * * This file is automatically populated if the user chooses custom colors in the Customzier. - */ \ No newline at end of file + */ diff --git a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index ce79fb9c85..3ac7269630 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -1,85 +1,309 @@ @charset "UTF-8"; + /** * These styles should be loaded by the Block Editor only */ + /* Variables */ :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; + } } /** * Repsonsive Styles */ + /** * Required Variables */ + /** * 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; @@ -89,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 { @@ -106,98 +330,65 @@ 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, blockquote.alignright { +blockquote.alignleft, +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: normal; + font-weight: var(--quote--font-weight-strong); } blockquote:before { - content: "\201C"; - font-size: 1.25rem; - line-height: 1.7; - position: absolute; - left: -12px; -} - -blockquote .wp-block-quote__citation { - color: #28303d; - font-size: 1rem; - font-style: normal; -} - -blockquote cite { - color: #28303d; - font-size: 1rem; - font-style: normal; + content: "“"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); } +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 { left: 0; } @@ -223,39 +414,23 @@ video { } /* Media captions */ -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; -} +figcaption, +.wp-caption, .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; } .alignleft figcaption, -.alignright figcaption, .alignleft -.wp-caption, -.alignright -.wp-caption, .alignleft -.wp-caption-text, -.alignright -.wp-caption-text { +.alignright figcaption, +.alignleft .wp-caption, +.alignright .wp-caption, +.alignleft .wp-caption-text, +.alignright .wp-caption-text { margin-bottom: 0; } @@ -270,18 +445,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; - /* stylelint-disable */ - background: #fff url("data:image/svg+xml;utf8,") no-repeat; - /* stylelint-enable */ - 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%; } /* @@ -291,7 +464,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; } @@ -302,29 +475,28 @@ a:hover { } .site a:focus { + /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; background: rgba(255, 255, 255, 0.9); } -.has-background-dark .site a:focus { - color: #d1e4dd; -} - -.has-background-dark .site a:focus .meta-nav { - color: #d1e4dd; +.is-dark-theme .site a:focus, +.is-dark-theme .site a:focus .meta-nav { + color: var(--wp--style--color--link, var(--global--color-background)); } .has-background-white .site a:focus { 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; + color: var(--wp--style--color--link, var(--global--color-white)); } .site a:focus.skip-link { + /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; @@ -336,32 +508,30 @@ a:hover { } .site a:focus img { - outline: 2px dotted #28303d; -} - -.has-background:not(.has-background-background-color) .has-link-color a { - color: #28303d; + 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 { - color: #28303d; + 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; + padding: var(--button--padding-vertical) var(--button--padding-horizontal); } -.wp-block-button__link:before, .wp-block-button__link:after { +.wp-block-button__link:before, +.wp-block-button__link:after { content: ""; display: block; height: 0; @@ -369,11 +539,11 @@ a:hover { } .wp-block-button__link:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(.5em * var(--button--line-height) + -.38); } .wp-block-button__link:after { - margin-top: -calc(1em - 0); + margin-top: -calc(.5em * var(--button--line-height) + -.39); } .wp-block-button__link:focus { @@ -382,132 +552,129 @@ a:hover { outline: 2px dotted currentColor; } -.has-background-dark .wp-block-button__link:focus { - color: #39414d; +.is-dark-theme .wp-block-button__link:focus { + 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); } /** * Block Options */ -.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):active { - color: #39414d; - background-color: #d1e4dd; +[data-block].wp-block-buttons { + margin-top: 0; + margin-bottom: 0; } -.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover { - color: #39414d; - background: transparent; +[data-block].wp-block-buttons .wp-block-button:first-child { + margin-top: var(--global--spacing-vertical); } -.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:hover { - outline-offset: -7px; - outline: 2px dotted currentColor; +[data-block].wp-block-buttons .wp-block-button:last-child { + margin-bottom: var(--global--spacing-vertical); +} + +.wp-block-button:not(.is-style-outline) .wp-block-button__link:active { + color: var(--button--color-text-active) !important; + background: transparent !important; + border-color: var(--button--color-background); +} + +.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { + color: var(--button--color-text-hover) !important; + background: transparent !important; + 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: 3px solid #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: 3px solid #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 { - background: transparent !important; -} - -.wp-block-button.is-style-outline .wp-block-button__link.has-background:active { - color: #39414d; - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; + 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 { - color: #39414d; - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; + background-color: var(--button--color-background) !important; } -.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active { - color: #39414d; - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; +.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) { + 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: 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: 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, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover { - color: #39414d; - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; + color: var(--button--color-text) !important; + border-color: var(--button--color-background); } .wp-block-button.is-style-squared { border-radius: 0; } -.is-selected.is-style-outline .wp-block-button__link:hover { - background-color: transparent; - color: #39414d; -} - -.is-style-outline .wp-block-button__link[style*="radius"], -.wp-block-button__link[style*="radius"] { +.is-style-outline .wp-block-button__link[style*=radius], +.wp-block-button__link[style*=radius] { outline-offset: 2px; } .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; } @@ -517,6 +684,12 @@ a:hover { clear: both; } +[data-align=full] .wp-block-cover, +[data-align=full] .wp-block-cover-image { + margin-top: 0; + 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, @@ -539,112 +712,38 @@ 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; + color: var(--wp--style--color--link, var(--global--color-primary)); } -.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; -} - -.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; - } +.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: 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 { text-align: left; @@ -660,12 +759,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) { @@ -676,97 +772,47 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } - @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 { margin-top: 0; } } -.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 { @@ -781,21 +827,22 @@ 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 { +.wp-block-file .wp-block-file__button:before, +.wp-block-file .wp-block-file__button:after { content: ""; display: block; height: 0; @@ -803,11 +850,11 @@ a:hover { } .wp-block-file .wp-block-file__button:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(.5em * var(--button--line-height) + -.38); } .wp-block-file .wp-block-file__button:after { - margin-top: -calc(1em - 0); + margin-top: -calc(.5em * var(--button--line-height) + -.39); } .wp-block-file .wp-block-file__button:focus { @@ -816,22 +863,22 @@ a:hover { outline: 2px dotted currentColor; } -.has-background-dark .wp-block-file .wp-block-file__button:focus { - color: #39414d; +.is-dark-theme .wp-block-file .wp-block-file__button:focus { + 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; } @@ -840,7 +887,7 @@ a:hover { } .wp-block-gallery figcaption a { - color: #fff; + color: var(--global--color-white); } .wp-block-group { @@ -849,481 +896,162 @@ a:hover { display: flow-root; } -.wp-block-group:before, .wp-block-group:after { +.wp-block-group:before, +.wp-block-group:after { content: ""; display: block; clear: both; } .wp-block-group.has-background { - padding: 30px; + padding: var(--global--spacing-vertical); +} + +[data-align=full] .wp-block-group.has-background { + margin-top: 0; + margin-bottom: 0; } .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; +.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align=full] { + 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 { margin-bottom: 0; } -.wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { +.wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] { margin: 0; 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 */ @@ -1336,15 +1064,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: 3px solid #28303d; + border: calc(3 * var(--separator--height)) solid var(--global--color-border); } .wp-block-image.is-style-twentytwentyone-image-frame img { - padding: 20px; + padding: var(--global--spacing-unit); } .wp-block-latest-comments { @@ -1356,8 +1082,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 { @@ -1374,7 +1100,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 { @@ -1382,8 +1108,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 { @@ -1396,67 +1122,49 @@ 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, +[class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date, .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { 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, @@ -1466,51 +1174,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 { @@ -1556,16 +1268,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, @@ -1588,12 +1295,17 @@ 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; } +[data-align=full] .wp-block-media-text { + margin-top: 0; + margin-bottom: 0; +} + .wp-block-media-text .wp-block-media-text__content { - padding: 25px; + padding: var(--global--spacing-horizontal); } .wp-block-media-text .wp-block-media-text__content [data-block]:first-child { @@ -1605,34 +1317,31 @@ dt { } .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 { @@ -1640,23 +1349,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; @@ -1666,7 +1375,7 @@ pre.wp-block-preformatted { .wp-block-pullquote blockquote::before { color: currentColor; - content: "\201C"; + content: "“"; display: block; font-size: 3rem; font-weight: 500; @@ -1674,40 +1383,24 @@ pre.wp-block-preformatted { } .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; } @@ -1718,15 +1411,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)); } } @@ -1734,15 +1427,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; } @@ -1752,13 +1440,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, @@ -1767,188 +1449,150 @@ pre.wp-block-preformatted { color: currentColor; } -.wp-block[data-align="full"] .wp-block-pullquote:not(.is-style-solid-color) blockquote { - padding: 0 40px; +.wp-block[data-align=full] .wp-block-pullquote:not(.is-style-solid-color) blockquote { + padding: 0 calc(2 * 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: normal; + font-weight: var(--quote--font-weight-strong); } .wp-block-quote:before { - content: "\201C"; - font-size: 1.25rem; - line-height: 1.7; + content: "“"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); position: absolute; - left: -12px; + 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, -.wp-block-cover[style*="background-image"] .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, +.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 { - content: "\201D"; + content: "”"; left: initial; - right: -12px; + right: calc(-0.5 * var(--global--spacing-horizontal)); } .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; + right: calc(-1 * var(--global--spacing-horizontal)); } - @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, .wp-block-quote.is-style-large:before { + + .wp-block-quote.is-large:before, + .wp-block-quote.is-style-large:before { 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, .wp-block-quote.is-style-large.has-text-align-right:before { + + .wp-block-quote.is-large.has-text-align-right:before, + .wp-block-quote.is-style-large.has-text-align-right:before { right: 0; } } - @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 { left: 0; } + .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 { right: 0; } + .wp-block-quote.has-text-align-center { padding-left: 0; padding-right: 0; } } - @media only screen and (min-width: 482px) { + .wp-block-quote { margin-left: auto; } + .wp-block-quote.has-text-align-right { margin-right: auto; } @@ -1963,8 +1607,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 { @@ -1976,29 +1620,29 @@ 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 { margin-bottom: 0; } -.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), -.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, -.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), -.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, -.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), -.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, -.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), -.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, -.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), -.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { +.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), +.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, +.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), +.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, +.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), +.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, +.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), +.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, +.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), +.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { margin-bottom: 0; } .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 { @@ -2011,117 +1655,110 @@ 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, +[class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date, .has-background .wp-block-rss .wp-block-rss__item-publish-date { 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, +.entry-content [class*=inner-container] .wp-block-rss.alignfull, .entry-content .has-background .wp-block-rss.alignfull { padding-left: 0; padding-right: 0; } .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); } -.wp-block-search .wp-block-search__input:focus { - border-color: #39414d; +.is-dark-theme .wp-block-search .wp-block-search__input { + 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: 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: 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; + color: var(--button--color-text-hover); } -.wp-block-search .wp-block-search__button:before, .wp-block-search .wp-block-search__button:after { +.wp-block-search .wp-block-search__button:before, +.wp-block-search .wp-block-search__button:after { content: ""; display: block; height: 0; @@ -2129,11 +1766,11 @@ pre.wp-block-preformatted { } .wp-block-search .wp-block-search__button:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(.5em * var(--button--line-height) + -.38); } .wp-block-search .wp-block-search__button:after { - margin-top: -calc(1em - 0); + margin-top: -calc(.5em * var(--button--line-height) + -.39); } .wp-block-search .wp-block-search__button:focus { @@ -2142,107 +1779,184 @@ pre.wp-block-preformatted { outline: 2px dotted currentColor; } -.has-background-dark .wp-block-search .wp-block-search__button:focus { - color: #39414d; +.is-dark-theme .wp-block-search .wp-block-search__button:focus { + 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 { - background-color: #39414d; - color: #d1e4dd; + color: var(--button--color-text); + background-color: var(--button--color-background); } -.wp-block[data-align="center"] > * { +.wp-block-search .wp-block-search__button.has-icon { + padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)); +} + +.wp-block-search .wp-block-search__button.has-icon svg { + width: 40px; + height: 40px; +} + +.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: var(--global--color-white); + border-color: currentColor; +} + +.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: 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: 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: 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: var(--form--color-text); + border-color: currentColor; +} + +.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: 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, +.has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input { + border: none; +} + +.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button { + 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: var(--button--color-text); + border-color: currentColor; +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { + 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: 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, +.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: 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: 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, +.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: var(--global--color-white); + background-color: var(--button--color-text); + border-color: var(--button--color-text); +} + +.wp-block[data-align=center] > * { text-align: center; } -.wp-block[data-align="center"] .wp-block-search__button-only .wp-block-search__inside-wrapper { +.wp-block[data-align=center] .wp-block-search__button-only .wp-block-search__inside-wrapper { 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); + max-width: var(--responsive--aligndefault-width); } -@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); - } -} - -[data-align="full"] > .wp-block-separator, -[data-align="wide"] > .wp-block-separator, [data-align="full"] > -hr, -[data-align="wide"] > -hr { +[data-align=full] > .wp-block-separator, +[data-align=wide] > .wp-block-separator, +[data-align=full] > hr, +[data-align=wide] > hr { 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, @@ -2250,37 +1964,33 @@ hr.is-style-dots { border-bottom: none; } -.wp-block-separator.is-style-dots.has-background, .wp-block-separator.is-style-dots.has-text-color, +.wp-block-separator.is-style-dots.has-background, +.wp-block-separator.is-style-dots.has-text-color, hr.is-style-dots.has-background, hr.is-style-dots.has-text-color { background-color: transparent !important; } -.wp-block-separator.is-style-dots.has-background:before, .wp-block-separator.is-style-dots.has-text-color:before, +.wp-block-separator.is-style-dots.has-background:before, +.wp-block-separator.is-style-dots.has-text-color:before, hr.is-style-dots.has-background:before, 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, -.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, -.wp-block-cover[style*="background-image"] -hr { +[class*=background-color]:not(.has-background-background-color) .wp-block-separator, +[style*=background-color]:not(.has-background-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, +.wp-block-cover[style*=background-image] hr { border-color: currentColor; } @@ -2290,75 +2000,39 @@ hr { } .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, @@ -2368,12 +2042,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, @@ -2398,13 +2069,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 { @@ -2429,142 +2100,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); } /** @@ -2572,47 +2151,31 @@ 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), @@ -2627,31 +2190,31 @@ 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 { @@ -2664,115 +2227,71 @@ pre.wp-block-verse { /* 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); + max-width: var(--responsive--alignwide-width); } -@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); - } -} - -.wp-block[data-align="full"], .wp-block.alignfull { +.wp-block[data-align=full], +.wp-block.alignfull { max-width: none; } -.block-editor-block-list__layout:not(.edit-site-block-editor__block-list) .wp-block[data-align="full"] > [data-block], .block-editor-block-list__layout:not(.edit-site-block-editor__block-list) .wp-block.alignfull > [data-block] { - margin-top: 0; - margin-bottom: 0; -} - .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"] > * { + + .wp-block[data-align=left] > * { max-width: 290px; - margin-right: 25px; + margin-right: var(--global--spacing-horizontal); } - .wp-block[data-align="right"] > * { + + .wp-block[data-align=right] > * { max-width: 290px; - margin-left: 25px; + margin-left: var(--global--spacing-horizontal); } } 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 { @@ -2780,16 +2299,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, .has-background:not(.has-background-background-color).has-link-color a { - color: #28303d; + color: var(--wp--style--color--link, var(--global--color-primary)); } button, @@ -2798,43 +2314,43 @@ 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), @@ -2849,114 +2365,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)); } -/*# sourceMappingURL=ie-editor.css.map */ diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css index 9a825147fb..6e20c7fa57 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -1,4 +1,5 @@ @charset "UTF-8"; + /* Theme Name: Twenty Twenty-One Theme URI: https://wordpress.org/themes/twentytwentyone/ @@ -17,6 +18,7 @@ Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org Twenty Twenty-One is distributed under the terms of the GNU GPL. */ + /** * SETTINGS * File-header..........The file header for the themes style.css file. @@ -92,51 +94,274 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL. * Editor Font Sizes....Editor Font Sizes. * Measure..............The width of a line of text, in characters. */ + /* Categories 01 to 03 are the basics. */ + /* Variables */ :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 */ + /* Document ========================================================================== */ + /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; + /* 1 */ -webkit-text-size-adjust: 100%; + /* 2 */ } /* Sections ========================================================================== */ + /** * Remove the margin in all browsers. */ @@ -162,16 +387,20 @@ h1 { /* Grouping content ========================================================================== */ + /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; + /* 1 */ height: 0; + /* 1 */ overflow: visible; + /* 2 */ } @@ -181,13 +410,16 @@ hr { */ pre { font-family: monospace; + /* 1 */ font-size: 1em; + /* 2 */ } /* Text-level semantics ========================================================================== */ + /** * Remove the gray background on active links in IE 10. */ @@ -202,10 +434,13 @@ a { */ abbr[title] { border-bottom: none; + /* 1 */ text-decoration: underline; + /* 2 */ text-decoration-style: dotted; + /* 2 */ } @@ -225,8 +460,10 @@ code, kbd, samp { font-family: monospace; + /* 1 */ font-size: 1em; + /* 2 */ } @@ -259,6 +496,7 @@ sup { /* Embedded content ========================================================================== */ + /** * Remove the border on images inside links in IE 10. */ @@ -268,6 +506,7 @@ img { /* Forms ========================================================================== */ + /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. @@ -278,12 +517,16 @@ optgroup, select, textarea { font-family: inherit; + /* 1 */ font-size: 100%; + /* 1 */ line-height: 1.15; + /* 1 */ margin: 0; + /* 2 */ } @@ -293,6 +536,7 @@ textarea { */ button, input { + /* 1 */ overflow: visible; } @@ -303,6 +547,7 @@ input { */ button, select { + /* 1 */ text-transform: none; } @@ -311,9 +556,9 @@ select { * Correct the inability to style clickable types in iOS and Safari. */ button, -[type="button"], -[type="reset"], -[type="submit"] { +[type=button], +[type=reset], +[type=submit] { -webkit-appearance: button; } @@ -321,9 +566,9 @@ button, * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, -[type="button"]::-moz-focus-inner, -[type="reset"]::-moz-focus-inner, -[type="submit"]::-moz-focus-inner { +[type=button]::-moz-focus-inner, +[type=reset]::-moz-focus-inner, +[type=submit]::-moz-focus-inner { border-style: none; padding: 0; } @@ -332,9 +577,9 @@ button::-moz-focus-inner, * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, -[type="button"]:-moz-focusring, -[type="reset"]:-moz-focusring, -[type="submit"]:-moz-focusring { +[type=button]:-moz-focusring, +[type=reset]:-moz-focusring, +[type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } @@ -353,16 +598,22 @@ fieldset { */ legend { box-sizing: border-box; + /* 1 */ color: inherit; + /* 2 */ display: table; + /* 1 */ max-width: 100%; + /* 1 */ padding: 0; + /* 3 */ white-space: normal; + /* 1 */ } @@ -384,19 +635,21 @@ textarea { * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ -[type="checkbox"], -[type="radio"] { +[type=checkbox], +[type=radio] { box-sizing: border-box; + /* 1 */ padding: 0; + /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ -[type="number"]::-webkit-inner-spin-button, -[type="number"]::-webkit-outer-spin-button { +[type=number]::-webkit-inner-spin-button, +[type=number]::-webkit-outer-spin-button { height: auto; } @@ -404,17 +657,19 @@ textarea { * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ -[type="search"] { +[type=search] { -webkit-appearance: textfield; + /* 1 */ outline-offset: -2px; + /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ -[type="search"]::-webkit-search-decoration { +[type=search]::-webkit-search-decoration { -webkit-appearance: none; } @@ -424,13 +679,16 @@ textarea { */ ::-webkit-file-upload-button { -webkit-appearance: button; + /* 1 */ font: inherit; + /* 2 */ } /* Interactive ========================================================================== */ + /* * Add the correct display in Edge, IE 10+, and Firefox. */ @@ -447,6 +705,7 @@ summary { /* Misc ========================================================================== */ + /** * Add the correct display in IE 10+. */ @@ -464,393 +723,116 @@ template { /** * Repsonsive Styles */ + /** * Required Variables */ + /** * 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, +.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); + 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); - } -} -.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); - } -} -.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); - } -} -.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); - } -} +.widget-area, +.pagination, +.comments-pagination, +.post-navigation, +.site-footer, +.site-header, +.alignwide, .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); - } -} - -.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); - } -} - -.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); - } -} - -.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); - } -} - -.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); - } -} - -.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); - } -} - -.widget-area { - max-width: calc(100vw - 30px); - 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); - } -} - +.alignfull, +.wp-block-group .wp-block-group__inner-container > *.alignfull, .full-max-width { - 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%; - margin-left: auto; - margin-right: auto; -} - -.alignfull { - 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, .full-max-width { - max-width: 100%; - width: auto; - margin-left: auto; - margin-right: auto; - } - .alignfull { - max-width: 100%; + max-width: var(--responsive--alignfull-width); width: auto; margin-left: auto; margin-right: auto; } } -.alignwide [class*="inner-container"] > .alignwide { +.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); - } -} - -.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 { - 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); - } + width: var(--responsive--alignwide-width); + max-width: var(--responsive--alignfull-width); } @media only screen and (min-width: 482px) { + .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) { + .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); } } @@ -862,43 +844,29 @@ template { * - `--global--width-content` is a responsive veriable * - See: globals/_global-width-responsive.scss */ + /** * 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)); } } @@ -907,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 { @@ -922,44 +890,27 @@ template { /** * Set the default maximum responsive content-width */ + /** * Set the wide maximum responsive content-width */ + /** * Set the full maximum responsive content-width */ + /* * 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; } @@ -967,54 +918,30 @@ 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); } } .site-main > article > *:first-child, .site-main > .not-found > *:first-child, .entry-content > *:first-child, -[class*="inner-container"] > *:first-child, +[class*=inner-container] > *:first-child, .wp-block-template-part > *:first-child { margin-top: 0; } @@ -1022,29 +949,22 @@ template { .site-main > article > *:last-child, .site-main > .not-found > *:last-child, .entry-content > *:last-child, -[class*="inner-container"] > *:last-child, +[class*=inner-container] > *:last-child, .wp-block-template-part > *:last-child { 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); } } @@ -1052,25 +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, @@ -1094,25 +1002,26 @@ template { * - Adds special margin overrides for alignment utility classes */ .entry-content > * { + /* Reset alignleft and alignright margins after alignfull */ } -.entry-content > *.alignleft, .entry-content > *.alignright, +.entry-content > *.alignleft, +.entry-content > *.alignright, .entry-content > *.alignleft:first-child + *, -.entry-content > *.alignright:first-child + *, .entry-content > *.alignfull.has-background { +.entry-content > *.alignright:first-child + *, +.entry-content > *.alignfull.has-background { margin-top: 0; } -.entry-content > *:last-child, .entry-content > *.alignfull.has-background { +.entry-content > *:last-child, +.entry-content > *.alignfull.has-background { 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); } /** @@ -1154,25 +1063,28 @@ h6 { * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */ 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); } /** * Relax the definition a bit, to allow components to override it manually. */ -*, *::before, *::after { +*, +*::before, +*::after { box-sizing: inherit; } 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 { @@ -1209,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 { @@ -1226,463 +1138,189 @@ 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, blockquote.alignright { +blockquote.alignleft, +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: normal; + font-weight: var(--quote--font-weight-strong); } blockquote:before { - content: "\201C"; - font-size: 1.25rem; - line-height: 1.7; - position: absolute; - left: -12px; -} - -blockquote .wp-block-quote__citation { - color: #28303d; - font-size: 1rem; - font-style: normal; -} - -blockquote cite { - color: #28303d; - font-size: 1rem; - font-style: normal; + content: "“"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); } +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 { left: 0; } } -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, -input[type="email"]:disabled, -input[type="url"]:disabled, -input[type="password"]:disabled, -input[type="search"]:disabled, -input[type="number"]:disabled, -input[type="tel"]:disabled, -input[type="date"]:disabled, -input[type="month"]:disabled, -input[type="week"]:disabled, -input[type="time"]:disabled, -input[type="datetime"]:disabled, -input[type="datetime-local"]:disabled, -input[type="color"]:disabled, +input[type=text]:disabled, +input[type=email]:disabled, +input[type=url]:disabled, +input[type=password]:disabled, +input[type=search]:disabled, +input[type=number]:disabled, +input[type=tel]:disabled, +input[type=date]:disabled, +input[type=month]:disabled, +input[type=week]:disabled, +input[type=time]:disabled, +input[type=datetime]:disabled, +input[type=datetime-local]:disabled, +input[type=color]:disabled, .site textarea:disabled { opacity: 0.7; } -.has-background-dark input[type="text"] { - 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: var(--global--color-white-90); } -.has-background-dark -input[type="email"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="url"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="password"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="search"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="number"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="tel"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="date"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="month"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="week"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="time"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="datetime"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="datetime-local"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -input[type="color"] { - background: rgba(255, 255, 255, 0.9); -} - -.has-background-dark -.site textarea { - background: rgba(255, 255, 255, 0.9); -} - -input[type="search"]:focus { +input[type=search]:focus { outline-offset: -7px; } -.has-background-dark input[type="search"]:focus { - outline-color: #d1e4dd; +.is-dark-theme input[type=search]:focus { + outline-color: var(--global--color-background); } -input[type="color"] { - padding: 5px; - height: 40px; +input[type=color] { + padding: calc(var(--form--spacing-unit) / 2); + height: calc(4 * var(--form--spacing-unit)); } -input[type="email"], -input[type="url"] { +input[type=email], +input[type=url] { + /*rtl:ignore*/ direction: ltr; } 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; - /* stylelint-disable */ - background: #fff url("data:image/svg+xml;utf8,") no-repeat; - /* stylelint-enable */ - 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); } -.has-background-dark select { - /* stylelint-disable */ - background: rgba(255, 255, 255, 0.9) url("data:image/svg+xml;utf8,") no-repeat; - /* stylelint-enable */ - background-position: right 10px top 60%; +.is-dark-theme select { + background: var(--global--color-white-90) url("data:image/svg+xml;utf8,") no-repeat; + background-position: right var(--form--spacing-unit) top 60%; } textarea { @@ -1690,9 +1328,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); } /** @@ -1701,40 +1339,34 @@ https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker. License: MIT. */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { - input[type="checkbox"] { + + 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="radio"] { - -webkit-appearance: none; - -moz-appearance: none; - position: relative; - width: 25px; - height: 25px; - border: 3px solid #39414d; - background: #fff; - } - input[type="checkbox"]:disabled, - input[type="radio"]:disabled { + + input[type=checkbox]:disabled, + input[type=radio]:disabled { opacity: 0.7; } - .has-background-dark input[type="checkbox"] { - background: rgba(255, 255, 255, 0.9); + + .is-dark-theme input[type=checkbox], + .is-dark-theme input[type=radio] { + background: var(--global--color-white-90); } - .has-background-dark - input[type="radio"] { - background: rgba(255, 255, 255, 0.9); - } - input[type="checkbox"]:focus { + + input[type=checkbox]:focus { outline-offset: 2px; - outline: 2px dotted #39414d; + outline: 2px dotted var(--form--border-color); } - input[type="checkbox"]:after { + + input[type=checkbox]:after { content: ""; opacity: 0; display: block; @@ -1743,25 +1375,30 @@ 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; + + input[type=checkbox]:checked { + color: var(--form--color-text); } - input[type="checkbox"]:checked:after { + + input[type=checkbox]:checked:after { opacity: 1; } - input[type="radio"] { + + input[type=radio] { border-radius: 50%; } - input[type="radio"]:focus { + + input[type=radio]:focus { outline-offset: 2px; - outline: 2px dotted #39414d; + outline: 2px dotted var(--form--border-color); } - input[type="radio"]:after { + + input[type=radio]:after { content: ""; opacity: 0; display: block; @@ -1771,31 +1408,28 @@ License: MIT. width: 11px; height: 11px; border-radius: 50%; - background: #28303d; + background: var(--form--color-text); } - input[type="radio"]:checked { - border: 4px solid #39414d; + + input[type=radio]:checked { + border: 4px solid var(--form--border-color); } - input[type="radio"]:checked:after { + + input[type=radio]:checked:after { opacity: 1; } - input[type="radio"]:checked:focus { + + input[type=radio]:checked:focus { outline-offset: 4px; - outline: 2px dotted #39414d; + outline: 2px dotted var(--form--border-color); } } -input[type="checkbox"] + label { +input[type=checkbox] + label, +input[type=radio] + label { display: inline-block; padding-left: 10px; - font-size: 1rem; - vertical-align: top; -} - -input[type="radio"] + label { - display: inline-block; - padding-left: 10px; - font-size: 1rem; + font-size: var(--global--font-size-xs); vertical-align: top; } @@ -1803,106 +1437,138 @@ input[type="radio"] + label { * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ */ @supports (-webkit-appearance: none) or (-moz-appearance: none) { - input[type="range"] { + + input[type=range] { -webkit-appearance: none; + /* Hides the slider so that custom slider can be made */ width: 100%; + /* Specific width is required for Firefox. */ height: 6px; - background: #39414d; + background: var(--form--color-ranged); border-radius: 6px; outline-offset: 10px; } - input[type="range"]:disabled { + + input[type=range]:disabled { opacity: 0.7; } - input[type="range"]::-webkit-slider-thumb { + + input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; - border: 3px solid #39414d; + border: 3px solid var(--form--color-ranged); height: 25px; width: 25px; border-radius: 50%; - background: #d1e4dd; + background: var(--global--color-background); cursor: pointer; } - input[type="range"]::-moz-range-thumb { - border: 3px solid #39414d; + + input[type=range]::-moz-range-thumb { + border: 3px solid var(--form--color-ranged); height: 25px; width: 25px; border-radius: 50%; - background: #d1e4dd; + background: var(--global--color-background); cursor: pointer; } } -input[type="range"]::-ms-track { +input[type=range]::-ms-track { width: 100%; 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; +input[type=range]::-ms-fill-upper { + background: var(--form--color-ranged); border-radius: 6px; } -input[type="range"]::-ms-fill-lower { - background: #39414d; +input[type=range]::-ms-fill-lower { + background: var(--form--color-ranged); border-radius: 6px; } -input[type="range"]::-ms-thumb { - border: 3px solid #39414d; +input[type=range]::-ms-thumb { + border: 3px solid var(--form--color-ranged); height: 25px; width: 25px; 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"] { +fieldset input[type=submit] { max-width: max-content; } -fieldset input:not([type="submit"]) { - margin-bottom: 20px; +fieldset input:not([type=submit]) { + margin-bottom: var(--global--spacing-unit); } -fieldset input[type="radio"], fieldset input[type="checkbox"] { +fieldset input[type=radio], +fieldset input[type=checkbox] { margin-bottom: 0; } -fieldset input[type="radio"] + label { - font-size: 1.125rem; +fieldset input[type=radio] + label, +fieldset input[type=checkbox] + label { + font-size: var(--form--font-size); padding-left: 0; - margin-bottom: 20px; -} - -fieldset input[type="checkbox"] + label { - font-size: 1.125rem; - padding-left: 0; - margin-bottom: 20px; + margin-bottom: var(--global--spacing-unit); } ::-moz-placeholder { opacity: 1; } +.post-password-message { + font-size: var(--global--font-size-lg); +} + +.post-password-form { + display: flex; + flex-wrap: wrap; +} + +.post-password-form__label { + width: 100%; + margin-bottom: 0; +} + +.post-password-form input[type=password] { + flex-grow: 1; + margin-top: calc(var(--global--spacing-vertical) / 3); + margin-right: calc(0.66 * var(--global--spacing-horizontal)); +} + +.post-password-form__submit { + margin-top: calc(var(--global--spacing-vertical) / 3); +} +@media only screen and (min-width: 592px) { + + .post-password-form__submit { + margin-left: calc(0.4 * var(--global--spacing-horizontal)); + } +} + img { display: block; height: auto; @@ -1923,39 +1589,23 @@ video { } /* Media captions */ -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; -} +figcaption, +.wp-caption, .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; } .alignleft figcaption, -.alignright figcaption, .alignleft -.wp-caption, -.alignright -.wp-caption, .alignleft -.wp-caption-text, -.alignright -.wp-caption-text { +.alignright figcaption, +.alignleft .wp-caption, +.alignright .wp-caption, +.alignleft .wp-caption-text, +.alignright .wp-caption-text { margin-bottom: 0; } @@ -1994,7 +1644,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; } @@ -2005,29 +1655,28 @@ a:hover { } .site a:focus { + /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; background: rgba(255, 255, 255, 0.9); } -.has-background-dark .site a:focus { - color: #d1e4dd; -} - -.has-background-dark .site a:focus .meta-nav { - color: #d1e4dd; +.is-dark-theme .site a:focus, +.is-dark-theme .site a:focus .meta-nav { + color: var(--wp--style--color--link, var(--global--color-background)); } .has-background-white .site a:focus { 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; + color: var(--wp--style--color--link, var(--global--color-white)); } .site a:focus.skip-link { + /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; @@ -2039,97 +1688,47 @@ a:hover { } .site a:focus img { - outline: 2px dotted #28303d; -} - -.has-background:not(.has-background-background-color) .has-link-color a { - color: #28303d; + 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 { - color: #28303d; + 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; + 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, +.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, @@ -2140,49 +1739,25 @@ input[type="reset"]:after, 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); -} - +.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(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); + 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(1em - 0); + margin-top: -calc(.5em * var(--button--line-height) + -.39); } .site .button:focus, -input[type="submit"]:focus, -input[type="reset"]:focus, +input[type=submit]:focus, +input[type=reset]:focus, .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus { background: transparent; @@ -2190,251 +1765,146 @@ input[type="reset"]:focus, outline: 2px dotted currentColor; } -.has-background-dark .site .button:focus { - color: #39414d; -} - -.has-background-dark -input[type="submit"]:focus { - color: #39414d; -} - -.has-background-dark -input[type="reset"]:focus { - color: #39414d; -} - -.has-background-dark -.wp-block-search__button:focus { - color: #39414d; -} - -.has-background-dark -.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; +.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: 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; } /** * Block Options */ -.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):active { - color: #39414d; - background-color: #d1e4dd; +.wp-block-button:not(.is-style-outline) .wp-block-button__link:active { + color: var(--button--color-text-active) !important; + background: transparent !important; + border-color: var(--button--color-background); } -.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover { - color: #39414d; - background: transparent; +.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { + color: var(--button--color-text-hover) !important; + background: transparent !important; + border-color: var(--button--color-background); } -.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:focus, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:focus { - outline-offset: -7px; - outline: 2px dotted currentColor; +.wp-block-button:not(.is-style-outline) .wp-block-button__link:focus { + color: var(--button--color-text) !important; + background: var(--button--color-background) !important; } .wp-block-button.is-style-outline .wp-block-button__link { + padding: var(--button--padding-vertical) var(--button--padding-horizontal); +} + +.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background) { background: transparent; - padding: 15px 30px; } .wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color) { - color: #39414d; - border: 3px solid currentColor; -} - -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):active { - background-color: #39414d; - color: #d1e4dd; - border: 3px solid #39414d; -} - -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):hover { - background-color: #39414d; - color: #d1e4dd; - border: 3px solid #39414d; -} - -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):focus { - outline-offset: -7px; background: transparent; - outline: 2px dotted #39414d; - 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 { - border: 3px solid currentColor; +.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-text-color { - border: 3px solid currentColor; +.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: var(--global--color-white); } -.wp-block-button.is-style-outline .wp-block-button__link.has-background:active { - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; +.is-dark-theme .wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color).has-background { + color: var(--global--color-dark-gray); } -.wp-block-button.is-style-outline .wp-block-button__link.has-background:hover { - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; +.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: var(--global--color-white); } -.wp-block-button.is-style-outline .wp-block-button__link.has-background:focus { - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; +.wp-block-button.is-style-outline .wp-block-button__link.has-text-color, +.wp-block-button.is-style-outline .wp-block-button__link.has-background.has-text-color { + border-color: currentColor; } -.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:active { - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; +.wp-block-button.is-style-outline .wp-block-button__link:active, +.wp-block-button.is-style-outline .wp-block-button__link:hover { + 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.has-text-color:hover { - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; +.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: var(--button--color-background); } -.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:focus { - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: 3px solid currentColor; +.wp-block-button.is-style-outline .wp-block-button__link:focus { + color: var(--button--color-background) !important; + background: transparent !important; } .wp-block-button .is-style-squared .wp-block-button__link { border-radius: 0; } -.is-style-outline .wp-block-button__link[style*="radius"]:focus { +.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; -} - -.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; @@ -2445,14 +1915,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); } } @@ -2469,16 +1939,16 @@ 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) { + .wp-block-columns .wp-block-column:not(:last-child) { margin-bottom: 0; } @@ -2487,116 +1957,60 @@ input[type="reset"]:hover { .wp-block-columns.is-style-twentytwentyone-columns-overlap { justify-content: space-around; } - @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 { margin-top: 0; } } -.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; + /* default & custom background-color */ + /* Treating H2 separately to account for legacy /core styles */ + /* Block Styles */ } @@ -2605,40 +2019,21 @@ input[type="reset"]:hover { clear: both; } -.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.alignfull, +.wp-block-cover-image.alignfull { + margin-top: 0; + 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, +.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, @@ -2650,96 +2045,34 @@ input[type="reset"]: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-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; + color: var(--wp--style--color--link, var(--global--color-primary)); } -.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; -} - -.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; - } +.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: 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 { text-align: left; @@ -2755,32 +2088,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); } } @@ -2794,97 +2117,68 @@ input[type="reset"]:hover { margin-bottom: 0; } -.wp-block-cover.alignleft, .wp-block-cover.alignright, +.wp-block-cover.alignleft, +.wp-block-cover.alignright, .wp-block-cover-image.alignleft, .wp-block-cover-image.alignright { 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%; } -.wp-block-cover.has-left-content, .wp-block-cover.has-right-content, +.wp-block-cover.has-left-content, +.wp-block-cover.has-right-content, .wp-block-cover-image.has-left-content, .wp-block-cover-image.has-right-content { 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 { +.wp-block-file .wp-block-file__button:before, +.wp-block-file .wp-block-file__button:after { content: ""; display: block; height: 0; @@ -2892,11 +2186,11 @@ input[type="reset"]:hover { } .wp-block-file .wp-block-file__button:before { - margin-bottom: -calc(1em - 0); + margin-bottom: -calc(.5em * var(--button--line-height) + -.38); } .wp-block-file .wp-block-file__button:after { - margin-top: -calc(1em - 0); + margin-top: -calc(.5em * var(--button--line-height) + -.39); } .wp-block-file .wp-block-file__button:focus { @@ -2905,61 +2199,45 @@ input[type="reset"]:hover { outline: 2px dotted currentColor; } -.has-background-dark .wp-block-file .wp-block-file__button:focus { - color: #39414d; +.is-dark-theme .wp-block-file .wp-block-file__button:focus { + 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; } @@ -2974,7 +2252,8 @@ input[type="reset"]:hover { display: flow-root; } -.wp-block-group:before, .wp-block-group:after { +.wp-block-group:before, +.wp-block-group:after { content: ""; display: block; clear: both; @@ -2986,14 +2265,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); } } @@ -3006,288 +2285,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 { @@ -3295,34 +2390,34 @@ 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 { outline-offset: 2px; } -.entry-content > *[class="wp-block-image"], -.entry-content [class*="inner-container"] > *[class="wp-block-image"] { +.entry-content > *[class=wp-block-image], +.entry-content [class*=inner-container] > *[class=wp-block-image] { margin-top: 0; margin-bottom: 0; } -.entry-content > *[class="wp-block-image"] + *, -.entry-content [class*="inner-container"] > *[class="wp-block-image"] + * { +.entry-content > *[class=wp-block-image] + *, +.entry-content [class*=inner-container] > *[class=wp-block-image] + * { margin-top: 0; } @@ -3332,26 +2427,24 @@ 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) { + .entry-content > .wp-block-image > .alignleft, .entry-content > .wp-block-image > .alignright { max-width: 50%; } } - @media only screen and (max-width: 481px) { + .entry-content > .wp-block-image > .alignleft, .entry-content > .wp-block-image > .alignright { margin-left: 0; @@ -3364,11 +2457,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 { @@ -3380,17 +2474,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; } @@ -3399,8 +2493,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 { @@ -3417,29 +2511,29 @@ 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 { margin-bottom: 0; } -.wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), -.wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, -.wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), -.wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, -.wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), -.wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, -.wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), -.wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, -.wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), -.wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { +.wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), +.wp-block-latest-posts.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, +.wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), +.wp-block-latest-posts.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, +.wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), +.wp-block-latest-posts.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, +.wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), +.wp-block-latest-posts.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, +.wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), +.wp-block-latest-posts.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { margin-bottom: 0; } .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 { @@ -3452,78 +2546,60 @@ 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, +[class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date, .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { 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, +.entry-content [class*=inner-container] .wp-block-latest-posts.alignfull, .entry-content .has-background .wp-block-latest-posts.alignfull { padding-left: 0; padding-right: 0; } .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, @@ -3533,50 +2609,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 { @@ -3634,16 +2714,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, @@ -3668,19 +2743,25 @@ 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 { + /** - * Block Options - */ + * Block Options + */ +} + +.wp-block-media-text.alignfull { + margin-top: 0; + margin-bottom: 0; } .wp-block-media-text a:focus img { @@ -3688,24 +2769,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); } } @@ -3716,16 +2797,16 @@ dd { .wp-block-media-text .wp-block-media-text__content > *:last-child { margin-bottom: 0; } - @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 { @@ -3733,13 +2814,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 { @@ -3753,7 +2834,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; @@ -3763,71 +2844,58 @@ 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 { display: none; } -.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container, .wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container { +.wp-block-navigation > .wp-block-navigation__container .has-child:hover .wp-block-navigation__container, +.wp-block-navigation > .wp-block-navigation__container .has-child:focus-within .wp-block-navigation__container { display: block; opacity: 1; visibility: visible; } .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 { @@ -3840,45 +2908,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; -} - -.post-password-message { - font-size: 1.5rem; -} - -.post-password-form { - display: flex; - flex-wrap: wrap; -} - -.post-password-form__label { - width: 100%; - margin-bottom: 0; -} - -.post-password-form__input { - flex-grow: 1; - margin-top: 10px; - margin-right: 17px; -} - -.post-password-form__submit { - margin-top: 10px; -} - -@media only screen and (min-width: 592px) { - .post-password-form__submit { - margin-left: 10px; - } + color: var(--wp--style--color--link, var(--global--color-primary)); } pre.wp-block-preformatted { @@ -3887,20 +2925,21 @@ 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; position: relative; + /** - * Block Options - */ + * Block Options + */ } .wp-block-pullquote blockquote::before { color: currentColor; - content: "\201C"; + content: "“"; display: block; font-size: 3rem; font-weight: 500; @@ -3908,46 +2947,26 @@ pre.wp-block-preformatted { } .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; } @@ -3960,57 +2979,27 @@ pre.wp-block-preformatted { 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)); } } @@ -4023,13 +3012,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, @@ -4039,191 +3022,126 @@ pre.wp-block-preformatted { } .wp-block-quote { + /** - * Block Options - */ + * 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, -[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, -[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, -[style*="background-color"] -.wp-block-quote footer, -.wp-block-cover[style*="background-image"] -.wp-block-quote footer { +[class*=background-color]:not(.has-background-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, +[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, +[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 { - content: "\201D"; + content: "”"; left: initial; - right: -12px; + right: calc(-0.5 * var(--global--spacing-horizontal)); } .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; -} - -.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; + right: calc(-1 * var(--global--spacing-horizontal)); } +.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, .wp-block-quote.is-style-large:before { + + .wp-block-quote.is-large:before, + .wp-block-quote.is-style-large:before { 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, .wp-block-quote.is-style-large.has-text-align-right:before { + + .wp-block-quote.is-large.has-text-align-right:before, + .wp-block-quote.is-style-large.has-text-align-right:before { right: 0; } - .wp-block-quote.is-large.has-text-align-center, .wp-block-quote.is-style-large.has-text-align-center { + + .wp-block-quote.is-large.has-text-align-center, + .wp-block-quote.is-style-large.has-text-align-center { padding-left: 0; padding-right: 0; } } - @media only screen and (max-width: 481px) { + .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 { right: 0; } + .wp-block-quote.has-text-align-center { padding-left: 0; padding-right: 0; @@ -4239,8 +3157,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 { @@ -4252,29 +3170,29 @@ 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 { margin-bottom: 0; } -.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), -.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, -.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), -.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, -.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), -.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, -.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), -.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, -.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), -.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { +.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), +.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, +.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), +.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, +.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), +.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, +.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), +.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, +.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), +.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { margin-bottom: 0; } .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 { @@ -4287,79 +3205,55 @@ 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, +[class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date, .has-background .wp-block-rss .wp-block-rss__item-publish-date { 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, +.entry-content [class*=inner-container] .wp-block-rss.alignfull, .entry-content .has-background .wp-block-rss.alignfull { padding-left: 0; padding-right: 0; } .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__button-inside .wp-block-search__inside-wrapper { - background-color: #fff; + background-color: var(--global--color-white); } .wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper { @@ -4367,36 +3261,156 @@ 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; - background-color: #fff; + 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, +[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, +.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: 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 calc(0.5 * var(--button--padding-horizontal)); +} + +.wp-block-search button.wp-block-search__button.has-icon svg { + width: 40px; + height: 40px; + fill: 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: var(--global--color-white); + border-color: currentColor; +} + +.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: 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: var(--button--color-text); +} + +.has-background.has-white-background-color .wp-block-search button.wp-block-search__button, +.has-background.has-green-background-color .wp-block-search button.wp-block-search__button, +.has-background.has-blue-background-color .wp-block-search button.wp-block-search__button, +.has-background.has-purple-background-color .wp-block-search button.wp-block-search__button, +.has-background.has-red-background-color .wp-block-search button.wp-block-search__button, +.has-background.has-orange-background-color .wp-block-search button.wp-block-search__button, +.has-background.has-yellow-background-color .wp-block-search button.wp-block-search__button { + border-color: currentColor; + color: currentColor; +} + +.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: 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: 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__text-button button.wp-block-search__button { + 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: 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: 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: 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: var(--global--color-white); +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside button.wp-block-search__button { + 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: var(--button--color-text); + background-color: var(--button--color-text); + color: var(--button--color-background); } .wp-block-search__button { @@ -4405,73 +3419,58 @@ 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); + /** - * Block Options - */ + * Block Options + */ } 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%; + 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, hr.wp-block-separator.is-style-dots.has-text-color { +hr.wp-block-separator.is-style-dots.has-background, +hr.wp-block-separator.is-style-dots.has-text-color { background-color: transparent !important; } -hr.wp-block-separator.is-style-dots.has-background:before, hr.wp-block-separator.is-style-dots.has-text-color:before { +hr.wp-block-separator.is-style-dots.has-background:before, +hr.wp-block-separator.is-style-dots.has-text-color:before { color: currentColor !important; } 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, -[style*="background-color"] hr.wp-block-separator, -.wp-block-cover[style*="background-image"] hr.wp-block-separator { +[class*=background-color]:not(.has-background-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.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 { @@ -4483,10 +3482,10 @@ hr.wp-block-separator.is-style-dots:before { margin-bottom: 0 !important; margin-top: 0 !important; } - @media only screen and (max-width: 481px) { + .wp-block-spacer[style] { - height: 20px !important; + height: var(--global--spacing-unit) !important; } } @@ -4497,72 +3496,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, @@ -4572,12 +3532,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, @@ -4603,13 +3560,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 { @@ -4626,19 +3583,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; } @@ -4648,198 +3605,86 @@ 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 */ + /** * These selectors set the default max width for content appearing inside a post or page. */ + /** * .alignleft */ .alignleft { + /*rtl:ignore*/ text-align: left; margin-top: 0; } .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) { + .alignleft { + /*rtl:ignore*/ 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)); } } @@ -4860,54 +3705,31 @@ 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) { + .alignright { + /*rtl:ignore*/ 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)); } } -[class*="inner-container"] > .alignleft + *, -[class*="inner-container"] > .alignright + * { +[class*=inner-container] > .alignleft + *, +[class*=inner-container] > .alignright + * { margin-top: 0; } @@ -4938,20 +3760,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 { @@ -4964,8 +3780,8 @@ table.wp-calendar-table caption { .desktop-only { display: none; } - @media only screen and (min-width: 482px) { + .desktop-only { display: block; } @@ -4976,27 +3792,27 @@ 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 { align-items: center; } - @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; } @@ -5005,8 +3821,8 @@ table.wp-calendar-table caption { width: 100%; text-align: center; } - @media only screen and (min-width: 482px) { + .site-branding { margin-right: initial; margin-top: 4px; @@ -5014,42 +3830,41 @@ 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, .site-title a:visited, .site-title a:active { +.site-title a:link, +.site-title a:visited, +.site-title a:active { 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; } @@ -5058,16 +3873,16 @@ a.custom-logo-link { } .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; } @@ -5075,68 +3890,81 @@ 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; } - @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; } } @media only screen and (max-width: 481px) { + .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 { display: none; } + .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 { align-items: flex-start; } + .site-header.has-logo.has-title-and-tagline.has-menu { justify-content: space-between; } + .site-header.has-logo.has-title-and-tagline.has-menu .site-branding { max-width: calc(100% - 160px); } + .site-header.has-logo.has-title-and-tagline .site-branding { margin-right: 0; } + body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline:after { display: none; } + body:not(.primary-navigation-open) .site-header.has-logo.has-title-and-tagline .primary-navigation { position: relative; top: 0; } + 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 { margin-right: 0; max-width: calc(100% - 160px); } + .site-header:not(.has-menu) { justify-content: center; } @@ -5144,36 +3972,37 @@ 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)); } .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) { + .site-footer > .site-info { display: flex; align-items: center; } + .site-footer > .site-info .powered-by { margin-top: initial; margin-left: auto; @@ -5181,33 +4010,31 @@ 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: var(--wp--style--color--link, var(--global--color-background)); } .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 { @@ -5218,12 +4045,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 { @@ -5232,8 +4059,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; } @@ -5243,65 +4070,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 { @@ -5309,21 +4116,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; } @@ -5335,12 +4142,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 { @@ -5348,26 +4152,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, @@ -5386,14 +4190,16 @@ body:not(.single) .site-main > article:last-of-type .entry-footer { .single .site-main > article > .entry-footer .tags-links { display: block; } - @media only screen and (max-width: 481px) { + .single .site-main > article > .entry-footer { display: block; } + .single .site-main > article > .entry-footer .full-size-link { display: block; } + .single .site-main > article > .entry-footer .post-taxonomies, .single .site-main > article > .entry-footer .full-size-link { text-align: left; @@ -5410,23 +4216,10 @@ body:not(.single) .site-main > article:last-of-type .entry-footer { .post-thumbnail .wp-post-image { display: block; width: auto; - min-width: calc(100vw - 30px); max-width: 100%; margin-left: auto; margin-right: auto; - margin-top: 60px; -} - -@media only screen and (min-width: 482px){ - .post-thumbnail .wp-post-image{ - min-width: min(calc(100vw - 100px), 610px); - } -} - -@media only screen and (min-width: 822px){ - .post-thumbnail .wp-post-image{ - min-width: min(calc(100vw - 200px), 610px); - } + margin-top: calc(2 * var(--global--spacing-vertical)); } /** @@ -5434,22 +4227,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 { @@ -5460,131 +4243,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, @@ -5596,45 +4310,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 { @@ -5663,33 +4365,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 { @@ -5698,8 +4377,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; @@ -5707,7 +4386,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); } /** @@ -5719,8 +4398,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 { @@ -5729,16 +4408,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)); } } @@ -5746,11 +4424,11 @@ 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) { + .comment-meta .comment-author { margin-bottom: 0; padding-right: 0; @@ -5758,36 +4436,37 @@ 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) { + .comment-meta { margin-right: inherit; } + .comment-meta .comment-author { max-width: inherit; } } .reply { - font-size: 1.125rem; - line-height: 1.3; + font-size: var(--global--font-size-sm); + line-height: var(--global--line-height-heading); } .bypostauthor { @@ -5798,22 +4477,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 { @@ -5824,23 +4500,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 { @@ -5852,7 +4524,7 @@ h1.page-title { } .comment-respond > *:last-child.comment-form { - margin-bottom: 30px; + margin-bottom: var(--global--spacing-vertical); } .comment-author { @@ -5873,7 +4545,7 @@ h1.page-title { } .comment-form .comment-notes { - font-size: 1.125rem; + font-size: var(--global--font-size-sm); } .comment-form .comment-form-url, @@ -5886,26 +4558,22 @@ h1.page-title { flex-basis: 0; flex-grow: 1; } - @media only screen and (max-width: 481px) { + .comment-form .comment-form-author, .comment-form .comment-form-email { flex-basis: 100%; } } -.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 { @@ -5916,55 +4584,29 @@ 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 { display: flex; } - @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, .comment-form > p.logged-in-as { + + .comment-form > p.comment-notes, + .comment-form > p.logged-in-as { display: block; } } @@ -5974,17 +4616,16 @@ 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 25px; - margin-right: 10px; + 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) { + .menu-button-container { display: flex; } @@ -5992,11 +4633,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 { @@ -6005,7 +4646,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 { @@ -6017,15 +4658,15 @@ h1.page-title { display: none; } -.menu-button-container .button.button[aria-expanded*="true"] .dropdown-icon.open { +.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.open { display: none; } -.menu-button-container .button.button[aria-expanded*="true"] .dropdown-icon.close { +.menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { display: flex; } -.has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*="true"] .dropdown-icon.close { +.has-logo.has-title-and-tagline .menu-button-container .button.button[aria-expanded*=true] .dropdown-icon.close { animation-name: twentytwentyone-close-button-transition; animation-duration: 0.3s; } @@ -6033,7 +4674,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 { @@ -6042,10 +4683,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; @@ -6059,16 +4700,16 @@ 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; - transition: all .15s ease-in-out; - transform: translateY(30px); + 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(var(--global--spacing-vertical)); } - @media only screen and (max-width: 481px) { + .primary-navigation > .primary-menu-container { height: 100vh; z-index: 499; @@ -6076,32 +4717,26 @@ h1.page-title { overflow-y: auto; border: 2px solid transparent; } + .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { position: fixed; transform: translateY(0) translateX(100%); } + .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) { + .primary-navigation-open .primary-navigation { width: 100%; position: fixed; @@ -6115,18 +4750,19 @@ h1.page-title { opacity: 1; transform: translateY(0); } - @media only screen and (max-width: 481px) { + .primary-navigation-open .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { transform: translateX(0) translateY(0); } } - @media only screen and (min-width: 482px) { + .primary-navigation { position: relative; margin-left: auto; } + .primary-navigation > .primary-menu-container { visibility: visible; opacity: 1; @@ -6136,15 +4772,19 @@ h1.page-title { overflow: initial; transform: none; } + .primary-navigation #toggle-menu { display: none; } - .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul { + + .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded=false] ~ ul { display: none; } + .admin-bar .primary-navigation { top: initial; } + .admin-bar .primary-navigation > .primary-menu-container { top: initial; } @@ -6160,8 +4800,12 @@ h1.page-title { padding-left: 0; position: relative; } - @media only screen and (max-width: 481px) { + + .primary-navigation > div > .menu-wrapper { + padding-bottom: 100px; + } + .primary-navigation > div > .menu-wrapper ul { padding-left: 0; } @@ -6172,20 +4816,21 @@ h1.page-title { position: relative; width: 100%; } - @media only screen and (min-width: 482px) { + .primary-navigation > div > .menu-wrapper li { margin: 0; width: inherit; } - .primary-navigation > div > .menu-wrapper li:last-child { + + .primary-navigation > div > .menu-wrapper li:last-child() { margin-right: 0; } } .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; @@ -6196,10 +4841,10 @@ 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) { + .primary-navigation > div > .menu-wrapper .sub-menu-toggle { display: none; } @@ -6221,19 +4866,19 @@ h1.page-title { display: none; } -.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded="true"] .icon-minus { +.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-minus { display: flex; } -.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded="true"] .icon-plus { +.primary-navigation > div > .menu-wrapper .sub-menu-toggle[aria-expanded=true] .icon-plus { display: none; } .primary-navigation > div > .menu-wrapper > li > .sub-menu { position: relative; } - @media only screen and (min-width: 482px) { + .primary-navigation > div > .menu-wrapper > li > .sub-menu { left: 0; margin: 0; @@ -6244,126 +4889,118 @@ h1.page-title { transition: all 0.5s ease; 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 { + /* rtl:ignore */ left: 0; + /* rtl:ignore */ 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; } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right { + /* rtl:ignore */ right: 0; + /* rtl:ignore */ 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 { display: flex; } + .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(0px - 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 { @@ -6393,49 +5030,50 @@ 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 { border: none; } - @media only screen and (min-width: 482px) { + .primary-navigation .sub-menu > .menu-item > .sub-menu { padding: 0; } } - @media only screen and (max-width: 481px) { - .primary-navigation .sub-menu .menu-item:last-child { + + .primary-navigation .sub-menu .menu-item:last-child() { margin-bottom: 0; } } .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); } } .primary-navigation .menu-item-has-children > .svg-icon { display: none; } - @media only screen and (min-width: 482px) { + .primary-navigation .menu-item-has-children > .svg-icon { display: inline-block; height: 100%; } + .primary-navigation .menu-item-has-children .sub-menu .svg-icon { display: none; } @@ -6444,7 +5082,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; } @@ -6454,28 +5092,30 @@ h1.page-title { } @media only screen and (max-width: 481px) { + .lock-scrolling .site { position: fixed; max-width: 100%; width: 100%; } } - @keyframes twentytwentyone-close-button-transition { + from { opacity: 0; } + to { opacity: 1; } } .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 { @@ -6492,33 +5132,31 @@ 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: var(--wp--style--color--link, var(--global--color-background)); } .footer-navigation-wrapper li .svg-icon { vertical-align: middle; - fill: #28303d; + fill: var(--footer--color-link); } .footer-navigation-wrapper li .svg-icon:hover { @@ -6532,25 +5170,25 @@ 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; } .navigation a:focus { - color: #39414d; + color: var(--global--color-secondary); } .navigation a:active { - color: #28303d; + color: var(--global--color-primary); } .navigation .nav-links > * { @@ -6567,25 +5205,22 @@ h1.page-title { .navigation .nav-links .dots { text-align: center; } - @media only screen and (min-width: 592px) { + .navigation .nav-links { display: flex; justify-content: center; 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 { text-align: right; } @@ -6598,69 +5233,57 @@ 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) { + .post-navigation .nav-links { justify-content: space-between; } } -.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, @@ -6679,61 +5302,44 @@ h1.page-title { 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; + margin-top: calc(-1 * var(--global--spacing-vertical)); } -.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 a:hover, +.comments-pagination .nav-links a:hover { + color: var(--pagination--color-link-hover); } +.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; + border-bottom: 1px solid var(--pagination--color-text); } .pagination .nav-links > *:first-child, @@ -6741,14 +5347,6 @@ h1.page-title { margin-left: 0; } -.pagination .nav-links > *a:hover { - color: #28303d; -} - -.comments-pagination .nav-links > *a:hover { - color: #28303d; -} - .pagination .nav-links > *:last-child, .comments-pagination .nav-links > *:last-child { margin-right: 0; @@ -6763,57 +5361,67 @@ h1.page-title { .comments-pagination .nav-links > *.prev { margin-right: auto; } - @media only screen and (max-width: 821px) { + .pagination .nav-links, .comments-pagination .nav-links { display: flex; flex-wrap: wrap; } + .pagination .page-numbers, .comments-pagination .page-numbers { display: none; } - .pagination .page-numbers.prev, .pagination .page-numbers.next, + + .pagination .page-numbers.prev, + .pagination .page-numbers.next, .comments-pagination .page-numbers.prev, .comments-pagination .page-numbers.next { display: inline-block; flex: 0 1 auto; } } +@media only screen and (max-width: 481px) { -.comments-pagination { - padding-top: 20px; - margin: 90px auto; + .pagination .nav-short, + .comments-pagination .nav-short { + display: none; + } } +.comments-pagination { + 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) { + .widget-area { grid-template-columns: repeat(3, 1fr); } @@ -6825,15 +5433,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 { @@ -6841,36 +5446,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 { @@ -6880,64 +5479,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 { @@ -6987,6 +5574,7 @@ h1.page-title { } @media (prefers-reduced-motion) { + * { transition-delay: 0s !important; transition-duration: 0s !important; @@ -6994,43 +5582,43 @@ 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), @@ -7045,127 +5633,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, @@ -7182,43 +5740,43 @@ footer { max-width: none; } -.is-IE.has-background-dark { +.is-IE.is-dark-theme { color: #fff; } -.is-IE.has-background-dark *, -.is-IE.has-background-dark a, -.is-IE.has-background-dark .site-description, -.is-IE.has-background-dark .entry-title, -.is-IE.has-background-dark .entry-footer, -.is-IE.has-background-dark .widget-area, -.is-IE.has-background-dark .post-navigation .meta-nav, -.is-IE.has-background-dark .footer-navigation-wrapper li a:link, -.is-IE.has-background-dark .site-footer > .site-info, -.is-IE.has-background-dark .site-footer > .site-info a, -.is-IE.has-background-dark .site-footer > .site-info a:visited { +.is-IE.is-dark-theme *, +.is-IE.is-dark-theme a, +.is-IE.is-dark-theme .site-description, +.is-IE.is-dark-theme .entry-title, +.is-IE.is-dark-theme .entry-footer, +.is-IE.is-dark-theme .widget-area, +.is-IE.is-dark-theme .post-navigation .meta-nav, +.is-IE.is-dark-theme .footer-navigation-wrapper li a:link, +.is-IE.is-dark-theme .site-footer > .site-info, +.is-IE.is-dark-theme .site-footer > .site-info a, +.is-IE.is-dark-theme .site-footer > .site-info a:visited { color: #fff; } -.is-IE.has-background-dark .sub-menu-toggle svg, -.is-IE.has-background-dark .sub-menu-toggle path, -.is-IE.has-background-dark .post-navigation .meta-nav svg, -.is-IE.has-background-dark .post-navigation .meta-nav path { +.is-IE.is-dark-theme .sub-menu-toggle svg, +.is-IE.is-dark-theme .sub-menu-toggle path, +.is-IE.is-dark-theme .post-navigation .meta-nav svg, +.is-IE.is-dark-theme .post-navigation .meta-nav path { fill: #fff; } -.is-IE.has-background-dark .primary-navigation > div > .menu-wrapper > li > .sub-menu li { +.is-IE.is-dark-theme .primary-navigation > div > .menu-wrapper > li > .sub-menu li { background: #000; } - @media only screen and (max-width: 481px) { - .is-IE.has-background-dark.primary-navigation-open .primary-navigation > .primary-menu-container, - .is-IE.has-background-dark.primary-navigation-open .menu-button-container { + + .is-IE.is-dark-theme.primary-navigation-open .primary-navigation > .primary-menu-container, + .is-IE.is-dark-theme.primary-navigation-open .menu-button-container { background-color: #000; } } -.is-IE.has-background-dark .skip-link:focus { +.is-IE.is-dark-theme .skip-link:focus { color: #21759b; } @@ -7229,4 +5787,3 @@ footer { .is-IE .post-thumbnail .wp-post-image { min-width: auto; } -/*# sourceMappingURL=ie.css.map */ diff --git a/wp-content/themes/twentytwentyone/assets/css/print.css b/wp-content/themes/twentytwentyone/assets/css/print.css index 3937fb27a4..07fc5c4ca1 100644 --- a/wp-content/themes/twentytwentyone/assets/css/print.css +++ b/wp-content/themes/twentytwentyone/assets/css/print.css @@ -2,27 +2,38 @@ Adding print support. The print styles are based on the the great work of Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/. */ + /*-------------------------------------------------------------- >>> TABLE OF CONTENTS: ---------------------------------------------------------------- -# Margins +# Margins & paddings # Typography # Page breaks # Links # Visibility --------------------------------------------------------------*/ @media print { - /* Margins */ + + /* Margins & paddings */ @page { margin: 2cm; } - .entry { - margin-top: 1em; - } + .entry .entry-header, + .entry, + .single .site-main > article > .entry-footer { + margin-top: 0; + margin-bottom: 0; + } + .site-footer .site-info { margin: 0; } + + .site-header { + padding: 0; + } + /* Fonts */ body { font: 13pt Georgia, "Times New Roman", Times, serif; @@ -31,9 +42,19 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272 background: #fff !important; color: #000; } - h1 { - font-size: 24pt; + + .has-background-dark * { + color: #000 !important; } + + h1, + .entry-title, + .singular .entry-title, + .page-title { + font-size: 22pt; + font-weight: bold; + } + h2, h3, h4, @@ -41,17 +62,26 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272 .has-large-font-size, h2.author-title, p.author-bio, - .comments-title { + .comments-title, + .archive-description { font-size: 14pt; margin-top: 25px; } + + .comment-meta, + .comment-meta .comment-author .fn { + font-size: 13pt; + } + /* Page breaks */ a { page-break-inside: avoid; } + blockquote { page-break-inside: avoid; } + h1, h2, h3, @@ -61,19 +91,24 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272 page-break-after: avoid; page-break-inside: avoid; } + img { page-break-inside: avoid; page-break-after: avoid; } + table, - pre { + pre, + figure { page-break-inside: avoid; } + ul, ol, dl { page-break-before: avoid; } + /* Links */ a:link, a:visited, @@ -83,80 +118,61 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272 text-decoration: underline; text-align: left; } - a[href^="http"]:after { + + a[href^=http]:after { content: " < " attr(href) "> "; } + a:after > img { content: ""; } + article a[href^="#"]:after { content: ""; } + a:not(:local-link):after { content: " < " attr(href) "> "; } + + .entry-title a:after { + content: "\a< " attr(href) "> "; + white-space: pre; + font-size: 14pt; + } + + .cat-links a:after, + .tags-links a:after, + .byline a:after, + .comment-metadata a:after, + .wp-block-calendar a:after, + .wp-block-tag-cloud a:after, + .page-links a:after { + content: ""; + } + /* Visibility */ .primary-navigation, .site-title + .primary-navigation, - .site-branding-container:before, - .entry .entry-title:before, + .footer-navigation, .entry-footer, - .author-description:before, .post-navigation, + .navigation.pagination, .widget-area, - .comment-form-flex, + .edit-link, + .more-link, .comment-reply, - .comment .comment-metadata .edit-link { - display: none; + .reply, + .comment .comment-metadata .edit-link, + .comment-respond, + #dark-mode-toggler { + display: none !important; } + .entry .entry-content .wp-block-button .wp-block-button__link, - .entry .entry-content .button { + .entry .entry-content .button, + .entry .entry-content .wp-block-file__button { color: #000; background: none; } - /* Site Header (With Featured Image) */ - .site-header.featured-image { - min-height: 0; - } - .site-header.featured-image .primary-navigation a, - .site-header.featured-image .primary-navigation a + svg, - .site-header.featured-image .site-title a, - .site-header.featured-image .site-featured-image a, - .site-header.featured-image .site-branding .site-title, - .site-header.featured-image .site-branding .site-description, - .site-header.featured-image .primary-navigation a:after, - .site-header.featured-image .primary-navigation .menu-wrapper > li.menu-item-has-children:after, - .site-header.featured-image .primary-navigation li, - .site-header.featured-image .entry-title, - .site-header.featured-image#masthead .site-title a { - color: #000; - text-shadow: none; - } - .site-header.featured-image .site-featured-image .entry-header, - .site-header.featured-image .site-branding-container { - margin-top: 0; - margin-bottom: 0; - } - .site-header.featured-image .site-featured-image .post-thumbnail img { - position: relative; - height: initial; - width: initial; - object-fit: none; - min-width: 0; - min-height: 0; - max-width: 100%; - margin-top: 1rem; - } - /* Remove image filters from featured image */ - .image-filters-enabled *:after { - display: none !important; - } - .image-filters-enabled .site-header.featured-image .site-featured-image:before { - display: none; - } - .image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img { - filter: none; - } } - -/*# sourceMappingURL=print.css.map */ \ No newline at end of file diff --git a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css new file mode 100644 index 0000000000..f577623cd2 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css @@ -0,0 +1,115 @@ +/* OS dark theme preference */ +@media only screen { + + .is-dark-theme.is-dark-theme { + --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: #ffffff8c; + } + + .is-dark-theme.is-dark-theme .site a:focus, + .is-dark-theme.is-dark-theme .site a:focus .meta-nav { + background: #000; + color: #fff; + text-decoration: none; + } + + .is-dark-theme.is-dark-theme img { + filter: brightness(0.85) contrast(1.1); + } + + .respect-color-scheme-preference.is-dark-theme body { + background-color: var(--global--color-background); + } + + #dark-mode-toggler { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--global--font-size-xs); + padding: 0.5em; + min-height: 44px; + min-width: max-content; + border: 2px solid currentColor; + box-shadow: none; + background: var(--button--color-text); + color: var(--button--color-background); + z-index: 9998; + } + + .no-js #dark-mode-toggler { + display: none; + } + + .wp-admin #dark-mode-toggler { + display: none; + } + + #dark-mode-toggler.fixed-bottom { + position: fixed; + bottom: 5px; + left: 5px; + transition: bottom 0.5s; + } + + #dark-mode-toggler.fixed-bottom.hide:not(:focus) { + bottom: -80px; + } + + #dark-mode-toggler.relative { + position: absolute; + height: 44px; + top: calc(2.4 * var(--global--spacing-vertical) - 44px); + left: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em); + } + + .admin-bar #dark-mode-toggler.relative { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px); + } +} +@media only screen and (max-width: 782px) { + + .admin-bar #dark-mode-toggler.relative { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px); + } +} +@media only screen and (max-width: 481px) { + + .admin-bar #dark-mode-toggler.relative { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px); + } +} +@media only screen and (max-width: 481px) { + + body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav { + top: calc(44px + 44px); + } +} +@media only screen { + + .primary-navigation-open #dark-mode-toggler { + display: none; + } +} +@media only screen { + + #dark-mode-toggler:hover, + #dark-mode-toggler:focus { + color: var(--button--color-background-active); + border: 2px solid var(--button--color-text-active); + background-color: var(--button--color-text-active); + } +} +@media only screen { + + .is-IE #dark-mode-toggler { + display: none; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css index b7f45bf7d0..f463a1998b 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css @@ -1,95 +1,115 @@ /* OS dark theme preference */ -html.is-dark-mode { - --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); -} +@media only screen { -html.is-dark-mode body { - background-color: var(--global--color-background); -} + .is-dark-theme.is-dark-theme { + --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: #ffffff8c; + } -html.is-dark-mode .site a:focus { - background: #000; -} + .is-dark-theme.is-dark-theme .site a:focus, + .is-dark-theme.is-dark-theme .site a:focus .meta-nav { + background: #000; + color: #fff; + text-decoration: none; + } -html.is-dark-mode img { - filter: brightness(0.85) contrast(1.1); -} + .is-dark-theme.is-dark-theme img { + filter: brightness(0.85) contrast(1.1); + } -#dark-mode-toggler { - cursor: pointer; - display: flex; - align-items: center; - justify-content: center; - font-size: var(--global--font-size-xs); - padding: 0.5em; - min-height: 44px; - min-width: max-content; - border: 2px solid currentColor; - box-shadow: none; - background: var(--button--color-text); - color: var(--button--color-background); - z-index: 9998; -} + .respect-color-scheme-preference.is-dark-theme body { + background-color: var(--global--color-background); + } -.wp-admin #dark-mode-toggler { - z-index: 99999; - /* Necessary for the editor. */ -} + #dark-mode-toggler { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--global--font-size-xs); + padding: 0.5em; + min-height: 44px; + min-width: max-content; + border: 2px solid currentColor; + box-shadow: none; + background: var(--button--color-text); + color: var(--button--color-background); + z-index: 9998; + } -#dark-mode-toggler.fixed-bottom { - position: fixed; - bottom: 5px; - right: 5px; -} + .no-js #dark-mode-toggler { + display: none; + } -#dark-mode-toggler.relative { - position: absolute; - height: 44px; - top: calc(2.4 * var(--global--spacing-vertical) - 44px); - right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em); -} + .wp-admin #dark-mode-toggler { + display: none; + } -.admin-bar #dark-mode-toggler.relative { - top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px); -} + #dark-mode-toggler.fixed-bottom { + position: fixed; + bottom: 5px; + right: 5px; + transition: bottom 0.5s; + } + #dark-mode-toggler.fixed-bottom.hide:not(:focus) { + bottom: -80px; + } + + #dark-mode-toggler.relative { + position: absolute; + height: 44px; + top: calc(2.4 * var(--global--spacing-vertical) - 44px); + right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em); + } + + .admin-bar #dark-mode-toggler.relative { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px); + } +} @media only screen and (max-width: 782px) { + .admin-bar #dark-mode-toggler.relative { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px); } } - @media only screen and (max-width: 481px) { + .admin-bar #dark-mode-toggler.relative { top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px); } } - @media only screen and (max-width: 481px) { + body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav { top: calc(44px + 44px); } } +@media only screen { -.primary-navigation-open #dark-mode-toggler { - display: none; + .primary-navigation-open #dark-mode-toggler { + display: none; + } } +@media only screen { -#dark-mode-toggler:hover, #dark-mode-toggler:focus { - color: var(--button--color-background-active); - border: 2px solid var(--button--color-text-active); - background-color: var(--button--color-text-active); + #dark-mode-toggler:hover, + #dark-mode-toggler:focus { + color: var(--button--color-background-active); + border: 2px solid var(--button--color-text-active); + background-color: var(--button--color-text-active); + } } +@media only screen { -.is-IE #dark-mode-toggler { - display: none; + .is-IE #dark-mode-toggler { + display: none; + } } - -/*# sourceMappingURL=style-dark-mode.css.map */ \ No newline at end of file diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor-customizer.css b/wp-content/themes/twentytwentyone/assets/css/style-editor-customizer.css index 1ba66a20e3..4166745e33 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-editor-customizer.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-editor-customizer.css @@ -1,3 +1,3 @@ /** * These styles are generated by the Customizer and only loaded when a custom color scheme is active. - */ \ No newline at end of file + */ diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 774ce22597..3ac7269630 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -1,12 +1,16 @@ @charset "UTF-8"; + /** * These styles should be loaded by the Block Editor only */ + /* Variables */ :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; @@ -18,10 +22,12 @@ --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); @@ -45,6 +51,7 @@ --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); @@ -52,6 +59,7 @@ --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; @@ -67,21 +75,28 @@ --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); @@ -93,10 +108,12 @@ --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); @@ -111,6 +128,7 @@ --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; @@ -120,6 +138,7 @@ --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); @@ -136,6 +155,7 @@ --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); @@ -153,6 +173,7 @@ --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); @@ -160,12 +181,14 @@ --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); @@ -180,23 +203,26 @@ --quote--font-size: var(--global--font-size-md); --quote--font-size-large: var(--global--font-size-xl); --quote--font-style: normal; - --quote--font-weight: normal; - --quote--font-weight-strong: 700; + --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; } @@ -204,14 +230,15 @@ .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; @@ -224,9 +251,11 @@ /** * Repsonsive Styles */ + /** * Required Variables */ + /** * Root Media Query Variables */ @@ -240,6 +269,7 @@ } @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)); @@ -247,8 +277,8 @@ --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); @@ -271,6 +301,7 @@ } @media only screen and (min-width: 482px) { + .full-max-width { max-width: var(--responsive--alignfull-width); width: auto; @@ -303,7 +334,7 @@ blockquote p { font-family: var(--quote--font-family); font-size: var(--quote--font-size); font-style: var(--quote--font-style); - font-weight: var(--quote--font-weight-strong); + font-weight: var(--quote--font-weight); line-height: var(--quote--line-height); } @@ -315,33 +346,34 @@ blockquote footer { letter-spacing: var(--global--letter-spacing); } -blockquote.alignleft, blockquote.alignright { +blockquote.alignleft, +blockquote.alignright { padding-left: inherit; } -blockquote.alignleft p, blockquote.alignright p { +blockquote.alignleft p, +blockquote.alignright p { font-size: var(--heading--font-size-h5); max-width: inherit; width: inherit; } blockquote.alignleft cite, -blockquote.alignleft footer, blockquote.alignright cite, +blockquote.alignleft footer, +blockquote.alignright cite, blockquote.alignright footer { font-size: var(--global--font-size-xs); letter-spacing: var(--global--letter-spacing); } blockquote strong { - font-weight: var(--quote--font-weight); + font-weight: var(--quote--font-weight-strong); } blockquote:before { - content: "\201C"; + 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, @@ -351,11 +383,12 @@ blockquote footer { font-size: var(--global--font-size-xs); font-style: var(--quote--font-style-cite); } - @media only screen and (max-width: 481px) { + blockquote { padding-left: calc(0.5 * var(--global--spacing-horizontal)); } + blockquote:before { left: 0; } @@ -393,13 +426,11 @@ figcaption, } .alignleft figcaption, -.alignright figcaption, .alignleft -.wp-caption, -.alignright -.wp-caption, .alignleft -.wp-caption-text, -.alignright -.wp-caption-text { +.alignright figcaption, +.alignleft .wp-caption, +.alignright .wp-caption, +.alignleft .wp-caption-text, +.alignright .wp-caption-text { margin-bottom: 0; } @@ -422,9 +453,7 @@ select { -webkit-appearance: none; appearance: none; padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit); - /* stylelint-disable */ background: var(--global--color-white) url("data:image/svg+xml;utf8,") no-repeat; - /* stylelint-enable */ background-position: right var(--form--spacing-unit) top 60%; } @@ -446,13 +475,14 @@ a:hover { } .site a:focus { + /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; background: rgba(255, 255, 255, 0.9); } -.has-background-dark .site a:focus, -.has-background-dark .site a:focus .meta-nav { +.is-dark-theme .site a:focus, +.is-dark-theme .site a:focus .meta-nav { color: var(--wp--style--color--link, var(--global--color-background)); } @@ -466,6 +496,7 @@ a:hover { } .site a:focus.skip-link { + /* Only visible in Windows High Contrast mode */ outline: 2px solid transparent; outline-offset: -2px; @@ -499,7 +530,8 @@ a:hover { padding: var(--button--padding-vertical) var(--button--padding-horizontal); } -.wp-block-button__link:before, .wp-block-button__link:after { +.wp-block-button__link:before, +.wp-block-button__link:after { content: ""; display: block; height: 0; @@ -520,7 +552,7 @@ a:hover { outline: 2px dotted currentColor; } -.has-background-dark .wp-block-button__link:focus { +.is-dark-theme .wp-block-button__link:focus { color: var(--button--color-background); } @@ -537,19 +569,29 @@ a:hover { /** * Block Options */ -.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):active { - color: var(--button--color-text-active); - background-color: var(--button--color-background-active); +[data-block].wp-block-buttons { + margin-top: 0; + margin-bottom: 0; } -.wp-block-button:not(.is-style-outline) .wp-block-button__link:not(.has-background):not(.has-text-color):hover { - color: var(--button--color-text-hover); - background: transparent; +[data-block].wp-block-buttons .wp-block-button:first-child { + margin-top: var(--global--spacing-vertical); } -.wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-background:hover, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:active, .wp-block-button:not(.is-style-outline) .wp-block-button__link.has-text-color:hover { - outline-offset: -7px; - outline: 2px dotted currentColor; +[data-block].wp-block-buttons .wp-block-button:last-child { + margin-bottom: var(--global--spacing-vertical); +} + +.wp-block-button:not(.is-style-outline) .wp-block-button__link:active { + color: var(--button--color-text-active) !important; + background: transparent !important; + border-color: var(--button--color-background); +} + +.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover { + color: var(--button--color-text-hover) !important; + background: transparent !important; + border-color: var(--button--color-background); } .wp-block-button.is-style-outline .wp-block-button__link { @@ -559,35 +601,58 @@ a:hover { 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 { +.wp-block-button.is-style-outline .wp-block-button__link:active, +.wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--button--color-background); color: var(--button--color-text); - border: var(--button--border-width) solid var(--button--color-background); + border-color: var(--button--color-background); } .wp-block-button.is-style-outline .wp-block-button__link.has-background { - background: transparent !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, .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: var(--button--color-background); - outline-offset: -7px; - background: transparent; - outline: 2px dotted currentColor; - border: var(--button--border-width) solid currentColor; +.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: var(--button--color-background) !important; +} + +.wp-block-button.is-style-outline .wp-block-button__link.has-background:not(.has-text-color) { + 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: 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: 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, +.wp-block-button.is-style-outline .wp-block-button__link.has-text-color:hover { + color: var(--button--color-text) !important; + border-color: var(--button--color-background); } .wp-block-button.is-style-squared { border-radius: 0; } -.is-selected.is-style-outline .wp-block-button__link:hover { - background-color: transparent; - color: var(--button--color-background); -} - -.is-style-outline .wp-block-button__link[style*="radius"], -.wp-block-button__link[style*="radius"] { +.is-style-outline .wp-block-button__link[style*=radius], +.wp-block-button__link[style*=radius] { outline-offset: 2px; } @@ -619,6 +684,12 @@ a:hover { clear: both; } +[data-align=full] .wp-block-cover, +[data-align=full] .wp-block-cover-image { + margin-top: 0; + 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, @@ -652,14 +723,14 @@ a:hover { 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 { +.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: var(--cover--color-foreground); } @@ -701,13 +772,14 @@ a:hover { .wp-block-columns .wp-block-column { max-width: inherit; } - @media only screen and (min-width: 652px) { + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { 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), .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), @@ -721,22 +793,24 @@ a:hover { 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: calc(2 * var(--global--spacing-horizontal)); } + .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n).is-vertically-aligned-center { margin-top: 0; } } -.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); } @@ -767,7 +841,8 @@ a:hover { display: inline-block; } -.wp-block-file .wp-block-file__button:before, .wp-block-file .wp-block-file__button:after { +.wp-block-file .wp-block-file__button:before, +.wp-block-file .wp-block-file__button:after { content: ""; display: block; height: 0; @@ -788,7 +863,7 @@ a:hover { outline: 2px dotted currentColor; } -.has-background-dark .wp-block-file .wp-block-file__button:focus { +.is-dark-theme .wp-block-file .wp-block-file__button:focus { color: var(--button--color-background); } @@ -821,7 +896,8 @@ a:hover { display: flow-root; } -.wp-block-group:before, .wp-block-group:after { +.wp-block-group:before, +.wp-block-group:after { content: ""; display: block; clear: both; @@ -831,12 +907,17 @@ a:hover { padding: var(--global--spacing-vertical); } +[data-align=full] .wp-block-group.has-background { + margin-top: 0; + margin-bottom: 0; +} + .wp-block-group.is-style-twentytwentyone-border { 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"] { +.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align=full] { 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)); @@ -846,7 +927,7 @@ a:hover { margin-bottom: 0; } -.wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { +.wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align=full] { margin: 0; width: 100%; } @@ -1060,7 +1141,7 @@ h6, line-height: var(--global--line-height-body); } -[class*="inner-container"] .wp-block-latest-posts .wp-block-latest-posts__post-date, +[class*=inner-container] .wp-block-latest-posts .wp-block-latest-posts__post-date, .has-background .wp-block-latest-posts .wp-block-latest-posts__post-date { color: currentColor; } @@ -1106,20 +1187,24 @@ h6, .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid li:last-child { 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: calc((100% / 2)); } + .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-3 li { width: calc((100% / 3)); } + .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-4 li { width: calc((100% / 4)); } + .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-5 li { width: calc((100% / 5)); } + .wp-block-latest-posts.is-style-twentytwentyone-latest-posts-dividers.is-grid.columns-6 li { width: calc((100% / 6)); } @@ -1214,6 +1299,11 @@ dt { font-weight: bold; } +[data-align=full] .wp-block-media-text { + margin-top: 0; + margin-bottom: 0; +} + .wp-block-media-text .wp-block-media-text__content { padding: var(--global--spacing-horizontal); } @@ -1249,7 +1339,8 @@ dt { 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 { +.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: var(--primary-nav--color-link-hover); } @@ -1284,7 +1375,7 @@ pre.wp-block-preformatted { .wp-block-pullquote blockquote::before { color: currentColor; - content: "\201C"; + content: "“"; display: block; font-size: 3rem; font-weight: 500; @@ -1325,8 +1416,8 @@ pre.wp-block-preformatted { border-style: solid; border-color: var(--pullquote--border-color); } - @media (min-width: 600px) { + .wp-block-pullquote.is-style-solid-color { padding: calc(5 * var(--global--spacing-unit)); } @@ -1358,7 +1449,7 @@ pre.wp-block-preformatted { color: currentColor; } -.wp-block[data-align="full"] .wp-block-pullquote:not(.is-style-solid-color) blockquote { +.wp-block[data-align=full] .wp-block-pullquote:not(.is-style-solid-color) blockquote { padding: 0 calc(2 * var(--global--spacing-unit)); } @@ -1372,16 +1463,16 @@ pre.wp-block-preformatted { font-family: var(--quote--font-family); font-size: var(--quote--font-size); font-style: var(--quote--font-style); - font-weight: var(--quote--font-weight-strong); + font-weight: var(--quote--font-weight); line-height: var(--quote--line-height); } .wp-block-quote strong { - font-weight: var(--quote--font-weight); + font-weight: var(--quote--font-weight-strong); } .wp-block-quote:before { - content: "\201C"; + content: "“"; font-size: var(--quote--font-size); line-height: var(--quote--line-height); position: absolute; @@ -1395,9 +1486,9 @@ pre.wp-block-preformatted { } .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, -.wp-block-cover[style*="background-image"] .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, +.wp-block-cover[style*=background-image] .wp-block-quote .wp-block-quote__citation { color: currentColor; } @@ -1408,7 +1499,7 @@ pre.wp-block-preformatted { } .wp-block-quote.has-text-align-right:before { - content: "\201D"; + content: "”"; left: initial; right: calc(-0.5 * var(--global--spacing-horizontal)); } @@ -1421,70 +1512,87 @@ pre.wp-block-preformatted { display: none; } -.wp-block-quote.is-large, .wp-block-quote.is-style-large { +.wp-block-quote.is-large, +.wp-block-quote.is-style-large { padding-left: 0; + /* Resetting margins to match _block-container.scss */ 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 { +.wp-block-quote.is-large p, +.wp-block-quote.is-style-large p { 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 { +.wp-block-quote.is-large:before, +.wp-block-quote.is-style-large:before { 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 { +.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)); } - @media only screen and (max-width: 481px) { - .wp-block-quote.is-large, .wp-block-quote.is-style-large { + + .wp-block-quote.is-large, + .wp-block-quote.is-style-large { padding-left: var(--global--spacing-horizontal); } - .wp-block-quote.is-large:before, .wp-block-quote.is-style-large:before { + + .wp-block-quote.is-large:before, + .wp-block-quote.is-style-large:before { left: 0; } - .wp-block-quote.is-large.has-text-align-right, .wp-block-quote.is-style-large.has-text-align-right { + + .wp-block-quote.is-large.has-text-align-right, + .wp-block-quote.is-style-large.has-text-align-right { padding-left: 0; padding-right: 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 { + + .wp-block-quote.is-large.has-text-align-right:before, + .wp-block-quote.is-style-large.has-text-align-right:before { right: 0; } } - @media only screen and (max-width: 481px) { + .wp-block-quote { padding-left: calc(0.5 * var(--global--spacing-horizontal)); } + .wp-block-quote:before { left: 0; } + .wp-block-quote.has-text-align-right { padding-left: 0; padding-right: calc(0.5 * var(--global--spacing-horizontal)); } + .wp-block-quote.has-text-align-right:before { right: 0; } + .wp-block-quote.has-text-align-center { padding-left: 0; padding-right: 0; } } - @media only screen and (min-width: 482px) { + .wp-block-quote { margin-left: auto; } + .wp-block-quote.has-text-align-right { margin-right: auto; } @@ -1519,16 +1627,16 @@ pre.wp-block-preformatted { margin-bottom: 0; } -.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), -.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, -.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), -.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, -.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), -.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, -.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), -.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, -.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), -.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { +.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1), +.wp-block-rss.is-grid.columns-2 > li:nth-last-child(-n+2):nth-child(2n+1) ~ li, +.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1), +.wp-block-rss.is-grid.columns-3 > li:nth-last-child(-n+3):nth-child(3n+1) ~ li, +.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1), +.wp-block-rss.is-grid.columns-4 > li:nth-last-child(-n+4):nth-child(4n+1) ~ li, +.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1), +.wp-block-rss.is-grid.columns-5 > li:nth-last-child(-n+5):nth-child(5n+1) ~ li, +.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1), +.wp-block-rss.is-grid.columns-6 > li:nth-last-child(-n+6):nth-child(6n+1) ~ li { margin-bottom: 0; } @@ -1566,7 +1674,7 @@ pre.wp-block-preformatted { line-height: var(--global--line-height-body); } -[class*="inner-container"] .wp-block-rss .wp-block-rss__item-publish-date, +[class*=inner-container] .wp-block-rss .wp-block-rss__item-publish-date, .has-background .wp-block-rss .wp-block-rss__item-publish-date { color: currentColor; } @@ -1584,7 +1692,7 @@ pre.wp-block-preformatted { padding-right: var(--global--spacing-unit); } -.entry-content [class*="inner-container"] .wp-block-rss.alignfull, +.entry-content [class*=inner-container] .wp-block-rss.alignfull, .entry-content .has-background .wp-block-rss.alignfull { padding-left: 0; padding-right: 0; @@ -1611,8 +1719,24 @@ pre.wp-block-preformatted { padding: var(--form--spacing-unit); } -.wp-block-search .wp-block-search__input:focus { - border-color: var(--form--border-color); +.is-dark-theme .wp-block-search .wp-block-search__input { + 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: 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: var(--global--color-white); } .wp-block-search .wp-block-search__button { @@ -1633,7 +1757,8 @@ 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 { +.wp-block-search .wp-block-search__button:before, +.wp-block-search .wp-block-search__button:after { content: ""; display: block; height: 0; @@ -1654,7 +1779,7 @@ pre.wp-block-preformatted { outline: 2px dotted currentColor; } -.has-background-dark .wp-block-search .wp-block-search__button:focus { +.is-dark-theme .wp-block-search .wp-block-search__button:focus { color: var(--button--color-background); } @@ -1669,15 +1794,137 @@ pre.wp-block-preformatted { } .wp-block-search .wp-block-search__button:hover { - background-color: var(--button--color-background); color: var(--button--color-text); + background-color: var(--button--color-background); } -.wp-block[data-align="center"] > * { +.wp-block-search .wp-block-search__button.has-icon { + padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)); +} + +.wp-block-search .wp-block-search__button.has-icon svg { + width: 40px; + height: 40px; +} + +.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: var(--global--color-white); + border-color: currentColor; +} + +.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: 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: 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: 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: var(--form--color-text); + border-color: currentColor; +} + +.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: 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, +.has-background.has-white-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-green-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-blue-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-purple-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-red-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-orange-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input, +.has-background.has-yellow-background-color .wp-block-search.wp-block-search__button-inside .wp-block-search__input { + border: none; +} + +.wp-block-search.wp-block-search__button-inside.wp-block-search__text-button .wp-block-search__button { + 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: var(--button--color-text); + border-color: currentColor; +} + +.is-dark-theme .wp-block-search.wp-block-search__button-inside .wp-block-search__button:hover { + 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: 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, +.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: 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: 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, +.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: var(--global--color-white); + background-color: var(--button--color-text); + border-color: var(--button--color-text); +} + +.wp-block[data-align=center] > * { text-align: center; } -.wp-block[data-align="center"] .wp-block-search__button-only .wp-block-search__inside-wrapper { +.wp-block[data-align=center] .wp-block-search__button-only .wp-block-search__inside-wrapper { justify-content: center; } @@ -1688,7 +1935,8 @@ hr { opacity: 1; } -.wp-block-separator[style*="text-align:right"], .wp-block-separator[style*="text-align: right"], +.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: var(--separator--border-color); @@ -1699,11 +1947,10 @@ hr:not(.is-style-dots) { max-width: var(--responsive--aligndefault-width); } -[data-align="full"] > .wp-block-separator, -[data-align="wide"] > .wp-block-separator, [data-align="full"] > -hr, -[data-align="wide"] > -hr { +[data-align=full] > .wp-block-separator, +[data-align=wide] > .wp-block-separator, +[data-align=full] > hr, +[data-align=wide] > hr { max-width: inherit; } @@ -1717,13 +1964,15 @@ hr.is-style-dots { border-bottom: none; } -.wp-block-separator.is-style-dots.has-background, .wp-block-separator.is-style-dots.has-text-color, +.wp-block-separator.is-style-dots.has-background, +.wp-block-separator.is-style-dots.has-text-color, hr.is-style-dots.has-background, hr.is-style-dots.has-text-color { background-color: transparent !important; } -.wp-block-separator.is-style-dots.has-background:before, .wp-block-separator.is-style-dots.has-text-color:before, +.wp-block-separator.is-style-dots.has-background:before, +.wp-block-separator.is-style-dots.has-text-color:before, hr.is-style-dots.has-background:before, hr.is-style-dots.has-text-color:before { color: currentColor !important; @@ -1735,16 +1984,13 @@ hr.is-style-dots:before { } .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, -.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, -.wp-block-cover[style*="background-image"] -hr { +[class*=background-color]:not(.has-background-background-color) .wp-block-separator, +[style*=background-color]:not(.has-background-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, +.wp-block-cover[style*=background-image] hr { border-color: currentColor; } @@ -1984,19 +2230,16 @@ pre.wp-block-verse { max-width: var(--responsive--aligndefault-width); } -.wp-block[data-align="wide"], .wp-block.alignwide { +.wp-block[data-align=wide], +.wp-block.alignwide { max-width: var(--responsive--alignwide-width); } -.wp-block[data-align="full"], .wp-block.alignfull { +.wp-block[data-align=full], +.wp-block.alignfull { max-width: none; } -.block-editor-block-list__layout:not(.edit-site-block-editor__block-list) .wp-block[data-align="full"] > [data-block], .block-editor-block-list__layout:not(.edit-site-block-editor__block-list) .wp-block.alignfull > [data-block] { - margin-top: 0; - margin-bottom: 0; -} - .alignleft { margin: 0; margin-right: var(--global--spacing-horizontal); @@ -2019,11 +2262,13 @@ pre.wp-block-verse { } @media only screen and (min-width: 482px) { - .wp-block[data-align="left"] > * { + + .wp-block[data-align=left] > * { max-width: 290px; margin-right: var(--global--spacing-horizontal); } - .wp-block[data-align="right"] > * { + + .wp-block[data-align=right] > * { max-width: 290px; margin-left: var(--global--spacing-horizontal); } @@ -2159,11 +2404,19 @@ a { 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] { +: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: 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] { +: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: var(--global--color-dark-gray); } @@ -2198,5 +2451,3 @@ a { .has-red-to-purple-gradient-background { background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple)); } - -/*# sourceMappingURL=style-editor.css.map */ diff --git a/wp-content/themes/twentytwentyone/assets/js/customize-helpers.js b/wp-content/themes/twentytwentyone/assets/js/customize-helpers.js index 6523860a87..94e00ca617 100644 --- a/wp-content/themes/twentytwentyone/assets/js/customize-helpers.js +++ b/wp-content/themes/twentytwentyone/assets/js/customize-helpers.js @@ -5,7 +5,7 @@ * * @return {number} - Returns the luminance, number between 0 and 255. */ -function twentytwentyoneGetHexLum( hex ) { // jshint ignore:line +function twentytwentyoneGetHexLum( hex ) { // eslint-disable-line no-unused-vars var rgb = twentytwentyoneGetRgbFromHex( hex ); return Math.round( ( 0.2126 * rgb.r ) + ( 0.7152 * rgb.g ) + ( 0.0722 * rgb.b ) ); } diff --git a/wp-content/themes/twentytwentyone/assets/js/customize-preview.js b/wp-content/themes/twentytwentyone/assets/js/customize-preview.js index ccd54698ea..eb4c9ec393 100644 --- a/wp-content/themes/twentytwentyone/assets/js/customize-preview.js +++ b/wp-content/themes/twentytwentyone/assets/js/customize-preview.js @@ -11,20 +11,21 @@ stylesheet, styles; - // Modify the body class depending on whether this is a dark background or not. + // Modify the html & body classes depending on whether this is a dark background or not. if ( isDark ) { - if ( ! document.body.classList.contains( 'has-background-dark' ) ) { - document.body.classList.add( 'has-background-dark' ); - } - if ( document.documentElement.classList.contains( 'is-dark-mode' ) ) { - document.documentElement.classList.remove( 'is-dark-mode' ); - } + document.body.classList.add( 'is-dark-theme' ); + document.documentElement.classList.add( 'is-dark-theme' ); + document.documentElement.classList.remove( 'respect-color-scheme-preference' ); } else { - document.body.classList.remove( 'has-background-dark' ); + document.body.classList.remove( 'is-dark-theme' ); + document.documentElement.classList.remove( 'is-dark-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 ) { + if ( '#ffffff' === to.toLowerCase() ) { document.body.classList.add( 'has-background-white' ); } else { document.body.classList.remove( 'has-background-white' ); diff --git a/wp-content/themes/twentytwentyone/assets/js/customize.js b/wp-content/themes/twentytwentyone/assets/js/customize.js index 375f7e0f20..d79d3aa05d 100644 --- a/wp-content/themes/twentytwentyone/assets/js/customize.js +++ b/wp-content/themes/twentytwentyone/assets/js/customize.js @@ -1,59 +1,20 @@ -/* global twentytwentyoneGetHexLum, backgroundColorNotice */ +/* global twentytwentyoneGetHexLum */ ( function() { - /** - * Add/remove the notice. - * - * @param {boolean} enable - Whether we want to enable or disable the notice. - * - * @return {void} - */ - function twentytwentyoneBackgroundColorNotice( enable ) { - if ( enable ) { - wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', { - type: 'info', - message: backgroundColorNotice.message - } ) ); - } else { - wp.customize( 'background_color' ).notifications.remove( 'backgroundColorNotice' ); - } - } - // Wait until the customizer has finished loading. wp.customize.bind( 'ready', function() { - var supportsDarkMode = ( 127 <= twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) && wp.customize( 'respect_user_color_preference' ).get() ); - // Hide the "respect_user_color_preference" setting if the background-color is dark. if ( 127 > twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) ) { wp.customize.control( 'respect_user_color_preference' ).deactivate(); } - // Add notice on init if needed. - if ( wp.customize( 'respect_user_color_preference' ) ) { - twentytwentyoneBackgroundColorNotice( true ); - } - // Handle changes to the background-color. wp.customize( 'background_color', function( setting ) { setting.bind( function( value ) { if ( 127 > twentytwentyoneGetHexLum( value ) ) { wp.customize.control( 'respect_user_color_preference' ).deactivate(); - supportsDarkMode = false; } else { wp.customize.control( 'respect_user_color_preference' ).activate(); - supportsDarkMode = wp.customize( 'respect_user_color_preference' ).get(); - } - } ); - } ); - - // Handle changes to the "respect_user_color_preference" setting. - wp.customize( 'respect_user_color_preference', function( setting ) { - setting.bind( function( value ) { - supportsDarkMode = value && 127 < twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ); - if ( ! supportsDarkMode ) { - twentytwentyoneBackgroundColorNotice( false ); - } else { - twentytwentyoneBackgroundColorNotice( true ); } } ); } ); diff --git a/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js b/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js index 8ced8b5a99..f9b4ae2c63 100644 --- a/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js +++ b/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js @@ -1,22 +1,22 @@ -function toggleDarkMode() { // jshint ignore:line - var toggler = document.getElementById( 'dark-mode-toggler' ), - html = document.querySelector( 'html' ); +function toggleDarkMode() { // eslint-disable-line no-unused-vars + var toggler = document.getElementById( 'dark-mode-toggler' ); if ( 'false' === toggler.getAttribute( 'aria-pressed' ) ) { toggler.setAttribute( 'aria-pressed', 'true' ); - html.classList.add( 'is-dark-mode' ); + document.documentElement.classList.add( 'is-dark-theme' ); + document.body.classList.add( 'is-dark-theme' ); window.localStorage.setItem( 'twentytwentyoneDarkMode', 'yes' ); } else { toggler.setAttribute( 'aria-pressed', 'false' ); - html.classList.remove( 'is-dark-mode' ); + document.documentElement.classList.remove( 'is-dark-theme' ); + document.body.classList.remove( 'is-dark-theme' ); window.localStorage.setItem( 'twentytwentyoneDarkMode', 'no' ); } } function darkModeInitialLoad() { var toggler = document.getElementById( 'dark-mode-toggler' ), - isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches, - html; + isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches; if ( 'yes' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) { isDarkMode = true; @@ -31,12 +31,33 @@ function darkModeInitialLoad() { toggler.setAttribute( 'aria-pressed', 'true' ); } - html = document.querySelector( 'html' ); if ( isDarkMode ) { - html.classList.add( 'is-dark-mode' ); + document.documentElement.classList.add( 'is-dark-theme' ); + document.body.classList.add( 'is-dark-theme' ); } else { - html.classList.remove( 'is-dark-mode' ); + document.documentElement.classList.remove( 'is-dark-theme' ); + document.body.classList.remove( 'is-dark-theme' ); } } +function darkModeRepositionTogglerOnScroll() { + var prevScroll = window.scrollY || document.documentElement.scrollTop, + currentScroll, + + checkScroll = function() { + currentScroll = window.scrollY || document.documentElement.scrollTop; + if ( + currentScroll + ( window.innerHeight * 1.5 ) > document.body.clientHeight || + currentScroll < prevScroll + ) { + document.getElementById( 'dark-mode-toggler' ).classList.remove( 'hide' ); + } else if ( currentScroll > prevScroll && 250 < currentScroll ) { + document.getElementById( 'dark-mode-toggler' ).classList.add( 'hide' ); + } + prevScroll = currentScroll; + }; + window.addEventListener( 'scroll', checkScroll ); +} + darkModeInitialLoad(); +darkModeRepositionTogglerOnScroll(); diff --git a/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js b/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js index d4fa890501..f330e16611 100644 --- a/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js +++ b/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js @@ -1,4 +1,4 @@ -/* global ajaxurl, XMLHttpRequest, ResizeObserver, darkModeInitialLoad, setTimeout */ +/* global ajaxurl, XMLHttpRequest, darkModeInitialLoad, setTimeout */ // Check the body class to determine if we want to add the toggler and handle dark-mode or not. if ( document.body.classList.contains( 'twentytwentyone-supports-dark-theme' ) ) { @@ -51,12 +51,6 @@ function twentytwentyoneDarkModeEditorToggle() { // Inject the toggle. document.querySelector( selector ).insertAdjacentHTML( 'afterbegin', this.response ); - // Re-position the toggle. - twentytwentyoneDarkModeEditorTogglePosition(); - - // Add an observer so the toggle gets re-positioned when the sidebar opens/closes. - twentytwentyoneDarkModeEditorTogglePositionObserver(); - // Run toggler script. darkModeInitialLoad(); @@ -81,71 +75,7 @@ function twentytwentyoneDarkModeEditorToggleEditorStyles() { if ( 'true' === toggler.getAttribute( 'aria-pressed' ) ) { document.body.classList.add( 'is-dark-theme' ); - } - - toggler.addEventListener( 'click', function() { - if ( 'true' === toggler.getAttribute( 'aria-pressed' ) ) { - document.body.classList.add( 'is-dark-theme' ); - } else { - document.body.classList.remove( 'is-dark-theme' ); - } - } ); -} - -/** - * Reposition the toggle inside the editor wrapper. - * - * @since 1.0.0 - * - * @return {void} - */ -function twentytwentyoneDarkModeEditorTogglePosition() { - var toggle = document.getElementById( 'dark-mode-toggler' ), - toggleWidth, - workSpace, - workSpaceWidth, - attempt = 0, - attemptDelay = 25, - maxAttempts = 10; - - if ( null === toggle ) { - // Try again. - if ( attempt < maxAttempts ) { - setTimeout( function() { - twentytwentyoneDarkModeEditorTogglePosition(); - }, attemptDelay ); - - attempt++; - attemptDelay *= 2; - } - return; - } - - toggleWidth = window.getComputedStyle( document.getElementById( 'dark-mode-toggler' ) ).width; - workSpace = document.querySelector( '.editor-styles-wrapper,.edit-post-visual-editor' ); - workSpaceWidth = window.getComputedStyle( workSpace ).width; - - // Add styles to reposition toggle. - toggle.style.position = 'fixed'; - toggle.style.bottom = '30px'; - if ( document.body.classList.contains( 'is-fullscreen-mode' ) ) { - toggle.style.left = 'calc(' + workSpaceWidth + ' - ' + toggleWidth + ' - 5px)'; - } else { - toggle.style.left = 'calc(' + workSpaceWidth + ' - ' + toggleWidth + ' + 155px)'; + document.documentElement.classList.add( 'is-dark-theme' ); + document.querySelector( '.block-editor__typewriter' ).classList.add( 'is-dark-theme' ); } } - -/** - * Add a ResizeObserver to the editor wrapper - * and trigger the toggle repositioning when needed. - * - * @since 1.0.0 - * - * @return {void} - */ -function twentytwentyoneDarkModeEditorTogglePositionObserver() { - var observer = new ResizeObserver( function() { - twentytwentyoneDarkModeEditorTogglePosition(); - } ); - observer.observe( document.querySelector( '.editor-styles-wrapper,.edit-post-visual-editor' ) ); -} diff --git a/wp-content/themes/twentytwentyone/assets/js/editor.js b/wp-content/themes/twentytwentyone/assets/js/editor.js new file mode 100644 index 0000000000..b94c97c104 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/js/editor.js @@ -0,0 +1,38 @@ +/* global setTimeout */ +wp.domReady( function() { + // Unregister "Wide" Separator Style. + wp.blocks.unregisterBlockStyle( 'core/separator', 'wide' ); + + // Add to ".block-editor__typewriter" the "is-dark-theme" class if needed. + function twentytwentyoneCopyDarkThemeClass() { + var editor, + attemptDelay = 25, + attempt = 0, + maxAttempts = 10; + + if ( ! document.body.classList.contains( 'is-dark-theme' ) ) { + return; + } + + editor = document.querySelector( '.block-editor__typewriter' ); + if ( null === editor ) { + // Try again. + if ( attempt < maxAttempts ) { + setTimeout( function() { + twentytwentyoneCopyDarkThemeClass(); + }, attemptDelay ); + + // Increment the attempts counter. + attempt++; + + // Double the delay, give the server some time to breathe. + attemptDelay *= 2; + } + return; + } + + editor.classList.add( 'is-dark-theme' ); + } + + twentytwentyoneCopyDarkThemeClass(); +} ); diff --git a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js b/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js index 7525f7721e..bd52f69a53 100644 --- a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js +++ b/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js @@ -58,7 +58,7 @@ function twentytwentyoneSubmenuPosition( li ) { * * @param {Element} el - The element. */ -function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line +function twentytwentyoneExpandSubMenu( el ) { // eslint-disable-line no-unused-vars // Close other expanded items. el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) { if ( button !== el ) { @@ -114,7 +114,7 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line tabKey = event.keyCode === 9; shiftKey = event.shiftKey; escKey = event.keyCode === 27; - activeEl = document.activeElement; // jshint ignore:line + activeEl = document.activeElement; // eslint-disable-line @wordpress/no-global-active-element lastEl = elements[ elements.length - 1 ]; firstEl = elements[0]; diff --git a/wp-content/themes/twentytwentyone/assets/js/unregister-block-style.js b/wp-content/themes/twentytwentyone/assets/js/unregister-block-style.js deleted file mode 100644 index c6887c2f09..0000000000 --- a/wp-content/themes/twentytwentyone/assets/js/unregister-block-style.js +++ /dev/null @@ -1,6 +0,0 @@ -/** - * Unregister "Wide" Separator Style - */ -wp.domReady( function() { - wp.blocks.unregisterBlockStyle( 'core/separator', 'wide' ); -} ); diff --git a/wp-content/themes/twentytwentyone/assets/sass/01-settings/file-header.scss b/wp-content/themes/twentytwentyone/assets/sass/01-settings/file-header.scss new file mode 100644 index 0000000000..182f764ffb --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/01-settings/file-header.scss @@ -0,0 +1,18 @@ +/* +Theme Name: Twenty Twenty-One +Theme URI: https://wordpress.org/themes/twentytwentyone/ +Author: the WordPress team +Author URI: https://wordpress.org/ +Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog. +Requires at least: 5.3 +Tested up to: 5.6 +Requires PHP: 5.6 +Version: 1.0.0 +License: GNU General Public License v2 or later +License URI: http://www.gnu.org/licenses/gpl-2.0.html +Text Domain: twentytwentyone +Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready + +Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org +Twenty Twenty-One is distributed under the terms of the GNU GPL. +*/ diff --git a/wp-content/themes/twentytwentyone/assets/sass/01-settings/fonts.scss b/wp-content/themes/twentytwentyone/assets/sass/01-settings/fonts.scss new file mode 100644 index 0000000000..6eba5e21e0 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/01-settings/fonts.scss @@ -0,0 +1 @@ +// Do we need to serve a font? Add the @font-face styles here. diff --git a/wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss b/wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss new file mode 100644 index 0000000000..45d6086ccc --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss @@ -0,0 +1,249 @@ +/* Variables */ + +// Vertical Rhythm Multiplier +$baseline-unit: 10px; + +: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; // 20px / 16px + --global--font-size-xs: 1rem; // 16px / 16px + --global--font-size-sm: 1.125rem; // 18px / 16px + --global--font-size-md: 1.25rem; // 20px / 16px + --global--font-size-lg: 1.5rem; // 24px / 16px + --global--font-size-xl: 2.25rem; // 36px / 16px + --global--font-size-xxl: 4rem; // 64px / 16px + --global--font-size-xxxl: 5rem; // 80px / 16px + --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); // Used for disabled buttons + --global--color-white-90: rgba(255, 255, 255, 0.9); // Used in form fields. + + --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: #{2 * $baseline-unit}; // 20px + --global--spacing-measure: unset; // Use ch units here. ie: 60ch = 60 character max-width + --global--spacing-horizontal: #{2.5 * $baseline-unit}; // 25px + --global--spacing-vertical: #{3 * $baseline-unit}; // 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); // Text color in input fields is always dark over light background. + --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 */ + // Colors + --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); + // Fonts + --button--font-family: var(--global--font-primary); + --button--font-size: var(--global--font-size-base); + --button--font-weight: 500; + --button--line-height: 1.5; + // Borders + --button--border-width: 3px; + --button--border-radius: 0; + // Spacing + --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) { + --global--admin-bar--height: 46px; + } +} + +@media only screen and (min-width: 652px) { // Not using the mixin because it's compiled after this file + :root { + --global--font-size-xl: 2.5rem; // 40px / 16px + --global--font-size-xxl: 6rem; // 96px / 16px + --global--font-size-xxxl: 9rem; // 144px / 16px + --heading--font-size-h3: 2rem; // 32px / 16px + --heading--font-size-h2: 3rem; // 48px / 16px + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/02-tools/extends.scss b/wp-content/themes/twentytwentyone/assets/sass/02-tools/extends.scss new file mode 100644 index 0000000000..c15430961e --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/02-tools/extends.scss @@ -0,0 +1,42 @@ +/* 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/wp-content/themes/twentytwentyone/assets/sass/02-tools/functions.scss b/wp-content/themes/twentytwentyone/assets/sass/02-tools/functions.scss new file mode 100644 index 0000000000..ef7bb4efa9 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/02-tools/functions.scss @@ -0,0 +1,178 @@ +// Remove the unit of a length +// @param {Number} $number - Number to remove unit from +// @return {Number} - Unitless number +@function strip-unit($number) { + @if type-of($number) == "number" and not unitless($number) { + @return $number / ($number * 0 + 1); + } + + @return $number; +} + +// ---- +// Sass (v3.3.14) +// Compass (v1.0.0.rc.1) +// ---- + +@function pow($x, $y) { + $ret: 1; + + @if $y > 0 { + @for $i from 1 through $y { + $ret: $ret * $x; + } + } @else { + @for $i from $y to 0 { + $ret: $ret / $x; + } + } + + @return $ret; +} + +// Map deep get +// @author Hugo Giraudel +// @access public +// @param {Map} $map - Map +// @param {Arglist} $keys - Key chain +// @return {*} - Desired value +// +// Example: +// $m-breakpoint: map-deep-get($__prefix-default-config, "layouts", "M"); +@function map-deep-get($map, $keys...) { + @each $key in $keys { + $map: map-get($map, $key); + } + @return $map; +} + +// ep set function to set a value in nested maps +// uthor Hugo Giraudel +// ccess public +// aram {Map} $map - Map +// aram {List} $keys - Key chaine +// aram {*} $value - Value to assign +// eturn {Map} +// +// ample: +// _prefix-default-config: map-deep-set($__prefix-default-config, "layouts" "M", 650px); +@function map-deep-set($map, $keys, $value) { + $maps: ($map); + $result: null; + + // If the last key is a map already + // Warn the user we will be overriding it with $value + @if type-of(nth($keys, -1)) == "map" { + @warn "The last key you specified is a map; it will be overrided with `#{$value}`."; + } + + // If $keys is a single key + // Just merge and return + @if length($keys) == 1 { + @return map-merge($map, ($keys: $value)); + } + + // Loop from the first to the second to last key from $keys + // Store the associated map to this key in the $maps list + // If the key doesn't exist, throw an error + @for $i from 1 through length($keys) - 1 { + $current-key: nth($keys, $i); + $current-map: nth($maps, -1); + $current-get: map-get($current-map, $current-key); + @if $current-get == null { + @error "Key `#{$key}` doesn't exist at current level in map."; + } + $maps: append($maps, $current-get); + } + + // Loop from the last map to the first one + // Merge it with the previous one + @for $i from length($maps) through 1 { + $current-map: nth($maps, $i); + $current-key: nth($keys, $i); + $current-val: if($i == length($maps), $value, $result); + $result: map-merge($current-map, ($current-key: $current-val)); + } + + // Return result + @return $result; +} + +// jQuery-style extend function +// - Child themes can use this function to `reset` the values in +// config maps without editing the `master` Sass files. +// - src: https://www.sitepoint.com/extra-map-functions-sass/ +// - About `map-merge()`: +// - - only takes 2 arguments +// - - is not recursive +// @param {Map} $map - first map +// @param {ArgList} $maps - other maps +// @param {Bool} $deep - recursive mode +// @return {Map} + +// Examples: + +// $grid-configuration-default: ( +// 'columns': 12, +// 'layouts': ( +// 'small': 800px, +// 'medium': 1000px, +// 'large': 1200px, +// ), +// ); + +// $grid-configuration-custom: ( +// 'layouts': ( +// 'large': 1300px, +// 'huge': 1500px +// ), +// ); + +// $grid-configuration-user: ( +// 'direction': 'ltr', +// 'columns': 16, +// 'layouts': ( +// 'large': 1300px, +// 'huge': 1500px +// ), +// ); + +// $deep: false +// $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user); +// --> ("columns": 16, "layouts": (("large": 1300px, "huge": 1500px)), "direction": "ltr") + +// $deep: true +// $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, true); +// --> ("columns": 16, "layouts": (("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px)), "direction": "ltr") + +@function map-extend($map, $maps.../*, $deep */) { + $last: nth($maps, -1); + $deep: $last == true; + $max: if($deep, length($maps) - 1, length($maps)); + + // Loop through all maps in $maps... + @for $i from 1 through $max { + // Store current map + $current: nth($maps, $i); + + // If not in deep mode, simply merge current map with map + @if not $deep { + $map: map-merge($map, $current); + } @else { + // If in deep mode, loop through all tuples in current map + @each $key, $value in $current { + + // If value is a nested map and same key from map is a nested map as well + @if type-of($value) == "map" and type-of(map-get($map, $key)) == "map" { + // Recursive extend + $value: map-extend(map-get($map, $key), $value, true); + } + + // Merge current tuple with map + $map: map-merge($map, ($key: $value)); + } + } + } + + @return $map; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss b/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss new file mode 100644 index 0000000000..6988a8e6e4 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss @@ -0,0 +1,79 @@ +// Responsive breakpoints mixin +@mixin add_variables( $view: frontend ) { + + @if frontend == $view { + + :root { + @content; + } + } + + @if editor == $view { + + :root, + body { + @content; + } + } +} + +// 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)); + 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); + + &:focus { + background: transparent; + outline-offset: -6px; + outline: 2px dotted currentColor; + + .is-dark-theme & { + color: var(--button--color-background); + } + + &:not(.has-background) { + color: var(--button--color-text-hover); + } + } + + &:disabled { + background-color: var(--global--color-white-50); + border-color: var(--global--color-white-50); + color: var(--button--color-text-active); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/03-generic/breakpoints.scss b/wp-content/themes/twentytwentyone/assets/sass/03-generic/breakpoints.scss new file mode 100644 index 0000000000..995a3e24db --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/03-generic/breakpoints.scss @@ -0,0 +1,217 @@ +/** + * Repsonsive Styles + */ + +/** + * Required Variables + */ + +$default_width: 610px; +$max_content_width: 1240px; +$breakpoint_sm: 482px; +$breakpoint_md: 592px; +$breakpoint_lg: 652px; +$breakpoint_xl: 822px; +$breakpoint_xxl: 1024px; + +// Responsive breakpoints mixin +@mixin media( $res ) { + + @if mobile-only == $res { + @media only screen and (max-width: #{$breakpoint_sm - 1}) { + @content; + } + } + + @if mobile == $res { + @media only screen and (min-width: #{$breakpoint_sm}) { + @content; + } + } + + @if tablet-only == $res { + @media only screen and (max-width: #{$breakpoint_md - 1}) { + @content; + } + } + + @if tablet == $res { + @media only screen and (min-width: #{$breakpoint_md}) { + @content; + } + } + + @if laptop-only == $res { + @media only screen and (max-width: #{$breakpoint_lg - 1}) { + @content; + } + } + + @if laptop == $res { + @media only screen and (min-width: #{$breakpoint_lg}) { + @content; + } + } + + @if desktop-only == $res { + @media only screen and (max-width: #{$breakpoint_xl - 1}) { + @content; + } + } + + @if desktop == $res { + @media only screen and (min-width: #{$breakpoint_xl}) { + @content; + } + } + + @if wide-only == $res { + @media only screen and (max-width: #{$breakpoint_xxl - 1}) { + @content; + } + } + + @if wide == $res { + @media only screen and (min-width: #{$breakpoint_xxl}) { + @content; + } + } +} + +/** + * 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); +} + +@include media(mobile) { + + :root { + --responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), #{$default_width}); + --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))); + } +} + +@include media(desktop) { + + :root { + --responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), #{$default_width}); + --responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), #{$max_content_width}); + } +} + +/** + * Extends + */ +%responsive-aligndefault-width { + max-width: var(--responsive--aligndefault-width); + margin-left: auto; + margin-right: auto; +} + +%responsive-alignwide-width { + max-width: var(--responsive--alignwide-width); + margin-left: auto; + margin-right: auto; +} + +%responsive-alignfull-width-mobile { + max-width: var(--responsive--alignfull-width); + width: var(--responsive--alignfull-width); + margin-left: auto; + margin-right: auto; +} + +@include media(mobile) { + %responsive-alignfull-width { + max-width: var(--responsive--alignfull-width); + width: auto; + margin-left: auto; + margin-right: auto; + } +} + +%responsive-alignwide-width-nested { + margin-left: auto; + margin-right: auto; + width: var(--responsive--alignwide-width); + max-width: var(--responsive--alignfull-width); +} + +%responsive-alignfull-width-nested { + margin-left: auto; + margin-right: auto; + width: calc(var(--responsive--alignfull-width) - calc(2 * var(--responsive--spacing-horizontal))); + max-width: var(--responsive--alignfull-width); +} + +@include media(desktop) { + %responsive-alignfull-width-nested { + margin-left: auto; + margin-right: auto; + width: calc(var(--responsive--alignfull-width) - calc(4 * var(--responsive--spacing-horizontal))); + max-width: var(--responsive--alignfull-width); + } +} + + +%responsive-alignleft-mobile { + + /*rtl:ignore*/ + margin-left: 0; + + /*rtl:ignore*/ + margin-right: var(--responsive--spacing-horizontal); +} + +@include media(mobile) { + %responsive-alignleft { + + /*rtl:ignore*/ + margin-left: var(--responsive--alignleft-margin); + + /*rtl:ignore*/ + margin-right: var(--global--spacing-horizontal); + } +} + +%responsive-alignright-mobile { + + /*rtl:ignore*/ + margin-left: var(--responsive--spacing-horizontal); + + /*rtl:ignore*/ + margin-right: 0; +} + +@include media(mobile) { + %responsive-alignright { + + /*rtl:ignore*/ + margin-left: var(--global--spacing-horizontal); + + /*rtl:ignore*/ + margin-right: var(--responsive--alignright-margin); + } +} + +// Output +.default-max-width { + @extend %responsive-aligndefault-width; +} + +.wide-max-width { + @extend %responsive-alignwide-width; +} + +.full-max-width { + @extend %responsive-alignfull-width; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/03-generic/clearings.scss b/wp-content/themes/twentytwentyone/assets/sass/03-generic/clearings.scss new file mode 100644 index 0000000000..14a7887749 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/03-generic/clearings.scss @@ -0,0 +1,25 @@ +.clear:before, +.clear:after, +.entry-content:before, +.entry-content:after, +.comment-content:before, +.comment-content:after, +.site-header:before, +.site-header:after, +.site-content:before, +.site-content:after, +.site-footer:before, +.site-footer:after { + content: ""; + display: table; + table-layout: fixed; +} + +.clear:after, +.entry-content:after, +.comment-content:after, +.site-header:after, +.site-content:after, +.site-footer:after { + clear: both; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/03-generic/normalize.scss b/wp-content/themes/twentytwentyone/assets/sass/03-generic/normalize.scss new file mode 100644 index 0000000000..388182a03a --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/03-generic/normalize.scss @@ -0,0 +1,350 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; + text-decoration-thickness: 1px; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration-style: dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/03-generic/reset.scss b/wp-content/themes/twentytwentyone/assets/sass/03-generic/reset.scss new file mode 100644 index 0000000000..d539b0eb18 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/03-generic/reset.scss @@ -0,0 +1,75 @@ +/** + * Reset specific elements to make them easier to style in other contexts. + */ + +html, +body, +p, +ol, +ul, +li, +dl, +dt, +dd, +blockquote, +figure, +fieldset, +form, +legend, +textarea, +pre, +iframe, +hr, +h1, +h2, +h3, +h4, +h5, +h6 { + padding: 0; + margin: 0; + -moz-osx-font-smoothing: grayscale; + -webkit-font-smoothing: antialiased; +} + +/** + * Apply generic border-box to all elements. + * See: + * https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ + */ + +html { + + /* Apply border-box across the entire page. */ + box-sizing: border-box; + + // HTML resets + font-family: var(--global--font-secondary); + line-height: var(--global--line-height-body); +} + +/** + * Relax the definition a bit, to allow components to override it manually. + */ +* { + + &, + &::before, + &::after { + box-sizing: inherit; + } +} + +// body resets +body { + font-size: var(--global--font-size-base); + font-weight: normal; + color: var(--global--color-primary); + text-align: left; + background-color: var(--global--color-background); +} + + +button { + cursor: pointer; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/03-generic/vertical-margins.scss b/wp-content/themes/twentytwentyone/assets/sass/03-generic/vertical-margins.scss new file mode 100644 index 0000000000..d096fdcb30 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/03-generic/vertical-margins.scss @@ -0,0 +1,172 @@ +/** + * Site Structure + * + * - Set vertical margins and responsive widths on + * top-level wrappers and content wrappers + * - `--global--width-content` is a responsive veriable + * - See: globals/_global-width-responsive.scss + */ + +/** + * Top Level Wrappers (header, main, footer) + * - Set vertical padding and horizontal margins + */ +.site-header, +.site-main, +.widget-area, +.site-footer { + padding-top: var(--global--spacing-vertical); + padding-bottom: var(--global--spacing-vertical); + margin-left: auto; + margin-right: auto; +} + +.site-header { + padding-top: calc(0.75 * var(--global--spacing-vertical)); + padding-bottom: calc(2 * var(--global--spacing-vertical)); + + @include media(mobile) { + padding-bottom: calc(3 * var(--global--spacing-vertical)); + } +} + +/** + * Site-main children wrappers + * - Add double vertical margins here for clearer heirarchy + */ +.site-main > * { + margin-top: calc(3 * var(--global--spacing-vertical)); + margin-bottom: calc(3 * var(--global--spacing-vertical)); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } +} + +/** + * Set the default maximum responsive content-width + */ +.default-max-width { + @extend %responsive-aligndefault-width; +} + +/** + * Set the wide maximum responsive content-width + */ +.wide-max-width { + @extend %responsive-alignwide-width; +} + +/** + * Set the full maximum responsive content-width + */ +.full-max-width { + @extend %responsive-alignfull-width-mobile; + @extend %responsive-alignfull-width; +} + +/* + * Block & non-gutenberg content wrappers + * - Set margins + */ +.entry-header, +.post-thumbnail, +.entry-content, +.entry-footer, +.author-bio { + margin-top: var(--global--spacing-vertical); + margin-right: auto; + margin-bottom: var(--global--spacing-vertical); + margin-left: auto; +} + +/* + * Block & non-gutenberg content wrapper children + * - Sets spacing-vertical margin logic + */ +.site-main > article > *, // apply vertical margins to article level +.site-main > .not-found > *, // apply vertical margins to article level +.entry-content > *, +[class*="inner-container"] > *, +.wp-block-template-part > * { + + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); + + @include media(mobile) { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } +} + +.site-footer > *, +.widget-area > * { + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); + + @include media(mobile) { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } +} + +/* + * Block & non-gutenberg content wrapper children + * - Sets spacing-unit margins + */ +//.site-header > *, // Removed, to align site title and menu. +.entry-header > *, +.post-thumbnail > *, +.page-content > *, +.comment-content > *, +.widget > * { + margin-top: var(--global--spacing-unit); + margin-bottom: var(--global--spacing-unit); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } +} + + +/* + * .entry-content children specific controls + * - Adds special margin overrides for alignment utility classes + */ +.entry-content > * { + + &.alignleft, + &.alignright, + &.alignleft:first-child + *, + &.alignright:first-child + *, + &.alignfull.has-background { + margin-top: 0; + } + + &:last-child, + &.alignfull.has-background { + margin-bottom: 0; + } + + /* Reset alignleft and alignright margins after alignfull */ + &.alignfull + .alignleft, + &.alignfull + .alignright { + margin-top: var(--global--spacing-vertical); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss b/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss new file mode 100644 index 0000000000..70787ac2ea --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss @@ -0,0 +1,79 @@ +blockquote { + padding: 0; + position: relative; + margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); + + > * { + margin-top: var(--global--spacing-unit); + margin-bottom: var(--global--spacing-unit); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + p { + 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); + } + + cite, + footer { + font-weight: normal; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + letter-spacing: var(--global--letter-spacing); + } + + &.alignleft, + &.alignright { + + padding-left: inherit; + + p { + font-size: var(--heading--font-size-h5); + max-width: inherit; + width: inherit; + } + + cite, + footer { + font-size: var(--global--font-size-xs); + letter-spacing: var(--global--letter-spacing); + } + } + + strong { + font-weight: var(--quote--font-weight-strong); + } + + &:before { + content: "\201C"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + } + + .wp-block-quote__citation, + cite, + footer { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + font-style: var(--quote--font-style-cite); + } + + @include media(mobile-only) { + padding-left: calc(0.5 * var(--global--spacing-horizontal)); + + &:before { + left: 0; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms-editor.scss b/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms-editor.scss new file mode 100644 index 0000000000..5879c2385c --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms-editor.scss @@ -0,0 +1,12 @@ +select { + 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: 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; // stylelint-disable-line function-url-quotes + background-position: right var(--form--spacing-unit) top 60%; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss b/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss new file mode 100644 index 0000000000..7a0f83e0a6 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss @@ -0,0 +1,328 @@ +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: 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); + // Gives a little more space for the outline offset. + margin: 0 2px; + + &:focus { + color: var(--form--color-text); + outline-offset: 2px; + outline: 2px dotted var(--form--border-color); + } + + &:disabled { + opacity: 0.7; + } + + .is-dark-theme & { + background: var(--global--color-white-90); + } + +} + +// Reset the negative offset from normalize to make the thicker "border" work on focus. +input[type="search"] { + + &:focus { + outline-offset: -7px; + + .is-dark-theme & { + outline-color: var(--global--color-background); + } + } +} + +input[type="color"] { + padding: calc(var(--form--spacing-unit) / 2); + height: calc(4 * var(--form--spacing-unit)); +} + +input[type="email"], +input[type="url"] { + + /*rtl:ignore*/ + direction: ltr; +} + +select { + 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: 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; // stylelint-disable-line function-url-quotes + background-position: right var(--form--spacing-unit) top 60%; + + &:focus { + outline-offset: 2px; + outline: 2px dotted var(--form--border-color); + } + + .is-dark-theme & { + background: var(--global--color-white-90) url("data:image/svg+xml;utf8,") no-repeat; // stylelint-disable-line function-url-quotes + background-position: right var(--form--spacing-unit) top 60%; + } +} + +textarea { + width: 100%; +} + +label { + font-size: var(--form--font-size); + font-weight: var(--form--label-weight); + margin-bottom: calc(var(--global--spacing-vertical) / 3); +} + +/** +https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/ +https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker. +License: MIT. +*/ +@supports (-webkit-appearance: none) or (-moz-appearance: none) { + + input[type="checkbox"], + input[type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + position: relative; + width: 25px; + height: 25px; + border: var(--form--border-width) solid var(--form--border-color); + background: var(--global--color-white); + + &:disabled { + opacity: 0.7; + } + + .is-dark-theme & { + background: var(--global--color-white-90); + } + } + + input[type="checkbox"] { + + &:focus { + outline-offset: 2px; + outline: 2px dotted var(--form--border-color); + } + + &:after { + content: ""; + opacity: 0; + display: block; + left: 5px; + top: 2px; + position: absolute; + width: 7px; + height: 13px; + border: 3px solid var(--form--color-text); + border-top: 0; + border-left: 0; + transform: rotate(30deg); + } + + &:checked { + color: var(--form--color-text); + + &:after { + opacity: 1; + } + } + } + + input[type="radio"] { + border-radius: 50%; + + &:focus { + outline-offset: 2px; + outline: 2px dotted var(--form--border-color); + } + + &:after { + content: ""; + opacity: 0; + display: block; + left: 3px; + top: 3px; + position: absolute; + width: 11px; + height: 11px; + border-radius: 50%; + background: var(--form--color-text); + } + + &:checked { + border: 4px solid var(--form--border-color); + + &:after { + opacity: 1; + } + + // Focus style for checked radio buttons. + &:focus { + outline-offset: 4px; + outline: 2px dotted var(--form--border-color); + } + } + } +} + +input[type="checkbox"] + label, +input[type="radio"] + label { + display: inline-block; + padding-left: 10px; + font-size: var(--global--font-size-xs); + vertical-align: top; +} + +/** + * https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/ +*/ +@supports (-webkit-appearance: none) or (-moz-appearance: none) { + + input[type="range"] { + -webkit-appearance: none; /* Hides the slider so that custom slider can be made */ + width: 100%; /* Specific width is required for Firefox. */ + height: 6px; + background: var(--form--color-ranged); + border-radius: 6px; + outline-offset: 10px; + + &:disabled { + opacity: 0.7; + } + } + + input[type="range"]::-webkit-slider-thumb { + -webkit-appearance: none; + border: 3px solid var(--form--color-ranged); + height: 25px; + width: 25px; + border-radius: 50%; + background: var(--global--color-background); + cursor: pointer; + } + + input[type="range"]::-moz-range-thumb { + border: 3px solid var(--form--color-ranged); + height: 25px; + width: 25px; + border-radius: 50%; + background: var(--global--color-background); + cursor: pointer; + } +} + +input[type="range"]::-ms-track { + width: 100%; + height: 6px; + border-radius: 6px; + border-width: 19px 0; + border-color: var(--global--color-background); + background: transparent; + color: transparent; + cursor: pointer; +} + +input[type="range"]::-ms-fill-upper { + background: var(--form--color-ranged); + border-radius: 6px; +} + +input[type="range"]::-ms-fill-lower { + background: var(--form--color-ranged); + border-radius: 6px; +} + +input[type="range"]::-ms-thumb { + border: 3px solid var(--form--color-ranged); + height: 25px; + width: 25px; + border-radius: 50%; + background: var(--global--color-background); + cursor: pointer; +} + +fieldset { + display: grid; + border-color: var(--global--color-secondary); + padding: var(--global--spacing-horizontal); + + legend { + font-size: var(--global--font-size-lg); + } + + input { + + &[type="submit"] { + max-width: max-content; + } + + &:not([type="submit"]) { + margin-bottom: var(--global--spacing-unit); + } + + &[type="radio"], + &[type="checkbox"] { + margin-bottom: 0; + } + + &[type="radio"] + label, + &[type="checkbox"] + label { + font-size: var(--form--font-size); + padding-left: 0; + margin-bottom: var(--global--spacing-unit); + } + } +} + +::-moz-placeholder { // Firefox 19+ + opacity: 1; +} + +.post-password-message { + font-size: var(--global--font-size-lg); +} + +.post-password-form { + display: flex; + flex-wrap: wrap; + + &__label { + width: 100%; + margin-bottom: 0; + } + + input[type="password"] { + flex-grow: 1; + margin-top: calc(var(--global--spacing-vertical) / 3); + margin-right: calc(0.66 * var(--global--spacing-horizontal)); + } + + &__submit { + margin-top: calc(var(--global--spacing-vertical) / 3); + @include media(tablet) { + margin-left: calc(0.4 * var(--global--spacing-horizontal)); + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss b/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss new file mode 100644 index 0000000000..3e7355bd47 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss @@ -0,0 +1,66 @@ +/* + * text-underline-offset doesn't work in Chrome at all 👎 + * But looks nice in Safari/Firefox, so let's keep it and + * maybe Chrome will support it soon. + */ +a { + cursor: pointer; + color: var(--wp--style--color--link, var(--global--color-primary)); + text-underline-offset: 3px; + text-decoration-skip-ink: all; +} + +a:hover { + text-decoration-style: dotted; + text-decoration-skip-ink: none; +} + +.site a:focus { + + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + + background: rgba(255, 255, 255, .9); + + // Change text color when the body background is dark. + .is-dark-theme &, + .is-dark-theme & .meta-nav { + color: var(--wp--style--color--link, var(--global--color-background)); + } + + // Change colors when the body background is white. + .has-background-white & { + background: rgba(0, 0, 0, .9); + color: var(--wp--style--color--link, var(--global--color-white)); + + .meta-nav { + color: var(--wp--style--color--link, var(--global--color-white)); + } + } + + &.skip-link { + + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + outline-offset: -2px; + + &:focus { + color: #21759b; + background-color: #f1f1f1; + } + } + + img { + outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); + } +} + +// 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) { + // Target both current level and nested block. + .has-link-color a, + &.has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss b/wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss new file mode 100644 index 0000000000..8db3acf657 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss @@ -0,0 +1,46 @@ +img { + display: block; + height: auto; + max-width: 100%; +} + +/* Classic editor images */ +.entry-content img { + max-width: 100%; +} + +/* Make sure embeds and iframes fit their containers. */ +embed, +iframe, +object, +video { + max-width: 100%; +} + + +/* Media captions */ +figcaption, +.wp-caption, +.wp-caption-text { + color: currentColor; + 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; + + .alignleft &, + .alignright & { + margin-bottom: 0; + } +} + +/* WP Smiley */ +.page-content .wp-smiley, +.entry-content .wp-smiley, +.comment-content .wp-smiley { + border: none; + margin-bottom: 0; + margin-top: 0; + padding: 0; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/04-elements/misc.scss b/wp-content/themes/twentytwentyone/assets/sass/04-elements/misc.scss new file mode 100644 index 0000000000..9fe7247a26 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/04-elements/misc.scss @@ -0,0 +1,17 @@ +/* Over here, place any elements that do not need to have their own file. */ +b, +strong { + font-weight: 700; +} + +dfn, +cite, +em, +i { + font-style: italic; +} + +pre { + white-space: pre; + overflow-x: auto; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/_config.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/_config.scss new file mode 100644 index 0000000000..481c544c56 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/_config.scss @@ -0,0 +1,7 @@ +// Variable Configuration +// - Import all config files for display in +// the editor, customizer, and front end. + + +@import "separator/config"; +@import "utilities/config"; diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/audio/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/audio/_style.scss new file mode 100644 index 0000000000..0e2d1d0b16 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/audio/_style.scss @@ -0,0 +1,7 @@ +.wp-block-audio { + + audio:focus { + outline-offset: 5px; + outline: 2px solid var(--global--color-primary); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks-editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks-editor.scss new file mode 100644 index 0000000000..d7758c31a0 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks-editor.scss @@ -0,0 +1,35 @@ +// Block Styles for the Editor +// - These styles replace key Gutenberg Block styles for fonts, colors, and +// spacing with CSS-variables overrides in the Block Editor +// - In the future the Block styles may get compiled to individual .css +// files and conditionally loaded + +@import "button/editor"; +@import "code/editor"; +@import "cover/editor"; +@import "columns/editor"; +@import "file/editor"; +@import "gallery/editor"; +@import "group/editor"; +@import "heading/editor"; +@import "html/editor"; +@import "image/editor"; +@import "latest-comments/editor"; +@import "latest-posts/editor"; +@import "legacy/editor"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc. +@import "list/editor"; +@import "media-text/editor"; +@import "navigation/editor"; +@import "paragraph/editor"; +@import "preformatted/editor"; +@import "pullquote/editor"; +@import "quote/editor"; +@import "rss/editor"; +@import "search/editor"; +@import "separator/editor"; +@import "social-icons/editor"; +@import "table/editor"; +@import "tag-clould/editor"; +@import "verse/editor"; +@import "utilities/font-sizes"; +@import "utilities/editor"; // Import LAST to cascade properly diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks.scss new file mode 100644 index 0000000000..f04cd7ee32 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks.scss @@ -0,0 +1,37 @@ +// Blocks +// - These styles replace key Gutenberg Block styles with font, color, and +// spacing with CSS-variables overrides +// - In the future the Block styles may get compiled to individual .css +// files and conditionally loaded + +@import "audio/style"; +@import "button/style"; +@import "code/style"; +@import "columns/style"; +@import "cover/style"; +@import "file/style"; +@import "gallery/style"; +@import "group/style"; +@import "heading/style"; +@import "image/style"; +@import "latest-comments/style"; +@import "latest-posts/style"; +@import "legacy/style"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc. +@import "list/style"; +@import "media-text/style"; +@import "navigation/style"; +@import "paragraph/style"; +@import "preformatted/style"; +@import "pullquote/style"; +@import "quote/style"; +@import "rss/style"; +@import "search/style"; +@import "separator/style"; +@import "social-icons/style"; +@import "spacer/style"; +@import "table/style"; +@import "tag-clould/style"; +@import "verse/style"; +@import "video/style"; +@import "utilities/font-sizes"; +@import "utilities/style"; // Import LAST to cascade properly diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss new file mode 100644 index 0000000000..8ab5122b7e --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss @@ -0,0 +1,118 @@ +.wp-block-button__link { + // Extend button style + @include button-style(); +} + +/** + * Block Options + */ + +// The parent container does not need outer margins applied. +// The children should all have top and bottom margins. +[data-block].wp-block-buttons { + margin-top: 0; + margin-bottom: 0; + + .wp-block-button:first-child { + margin-top: var(--global--spacing-vertical); + } + + .wp-block-button:last-child { + margin-bottom: var(--global--spacing-vertical); + } +} + +.wp-block-button { + + // Target the default and filled button states. + &:not(.is-style-outline) { + + .wp-block-button__link { + + &:active { + color: var(--button--color-text-active) !important; + background: transparent !important; + border-color: var(--button--color-background); + } + + &:hover { + color: var(--button--color-text-hover) !important; + background: transparent !important; + border-color: var(--button--color-background); + } + } + } + + // Outline Style. + &.is-style-outline { + + .wp-block-button__link { + color: var(--button--color-background); + background: transparent; + border: var(--button--border-width) solid currentColor; + padding: var(--button--padding-vertical) var(--button--padding-horizontal); + + &:active, + &:hover { + background-color: var(--button--color-background); + color: var(--button--color-text); + border-color: var(--button--color-background); + } + + &.has-background { + border-color: var(--button--color-background); + + &:active, + &:hover { + background-color: var(--button--color-background) !important; + } + } + + &.has-background:not(.has-text-color) { + color: var(--global--color-dark-gray); + } + + &.has-background.has-gray-background-color:not(.has-text-color), + &.has-background.has-dark-gray-background-color:not(.has-text-color), + &.has-background.has-black-background-color:not(.has-text-color) { + color: var(--global--color-white); + } + + .is-dark-theme & { + + &:not(.has-text-color) { + + &.has-background.has-white-background-color, + &.has-background.has-green-background-color, + &.has-background.has-blue-background-color, + &.has-background.has-purple-background-color, + &.has-background.has-red-background-color, + &.has-background.has-orange-background-color, + &.has-background.has-yellow-background-color { + color: var(--global--color-dark-gray); + } + } + } + + &.has-text-color { + border-color: currentColor; + + &:active, + &:hover { + color: var(--button--color-text) !important; + border-color: var(--button--color-background); + } + } + } + } + + // Squared Style + &.is-style-squared { + border-radius: 0; + } +} + +.is-style-outline .wp-block-button__link[style*="radius"], +.wp-block-button__link[style*="radius"] { + outline-offset: 2px; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss new file mode 100644 index 0000000000..2763994a41 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss @@ -0,0 +1,134 @@ +/** + * Button + */ +.site .button, +input[type="submit"], +input[type="reset"], +.wp-block-search__button, +.wp-block-button .wp-block-button__link { + // Extend button style + @include button-style(); +} + +.site .button, +input[type="submit"], +input[type="reset"], +.wp-block-search .wp-block-search__button, +.wp-block-file .wp-block-file__button { + + &:active { + color: var(--button--color-text-active); + background-color: var(--button--color-background-active); + } + + &:hover { + color: var(--button--color-text-hover); + background: transparent; + } +} + +/** + * Block Options + */ +.wp-block-button { + + // Target the default and filled button states. + &:not(.is-style-outline) { + + .wp-block-button__link { + + &:active { + color: var(--button--color-text-active) !important; + background: transparent !important; + border-color: var(--button--color-background); + } + + &:hover { + color: var(--button--color-text-hover) !important; + background: transparent !important; + border-color: var(--button--color-background); + } + + &:focus { + color: var(--button--color-text) !important; + background: var(--button--color-background) !important; + } + } + } + + // Outline Style. + &.is-style-outline { + + .wp-block-button__link { + padding: var(--button--padding-vertical) var(--button--padding-horizontal); + + &:not(.has-background) { + background: transparent; + } + + &:not(.has-background):not(.has-text-color) { + background: transparent; + color: var(--button--color-background); + border-color: var(--button--color-background); + } + + &.has-background:not(.has-text-color) { + color: currentColor; + } + + &.has-background.has-gray-background-color:not(.has-text-color), + &.has-background.has-dark-gray-background-color:not(.has-text-color), + &.has-background.has-black-background-color:not(.has-text-color) { + color: var(--global--color-white); + } + + .is-dark-theme & { + + &:not(.has-text-color) { + + &.has-background { + color: var(--global--color-dark-gray); + } + + &.has-background.has-gray-background-color, + &.has-background.has-dark-gray-background-color, + &.has-background.has-black-background-color { + color: var(--global--color-white); + } + } + } + + &.has-text-color, + &.has-background.has-text-color { + border-color: currentColor; + } + + &:active, + &:hover { + color: var(--button--color-text) !important; + background: var(--button--color-background) !important; + border-color: var(--button--color-background); + + &.has-text-color { + border-color: var(--button--color-background); + } + } + + &:focus { + color: var(--button--color-background) !important; + background: transparent !important; + } + } + } + + // Squared Style + .is-style-squared .wp-block-button__link { + border-radius: 0; + } +} + +.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 var(--button--color-background); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_editor.scss new file mode 100644 index 0000000000..707f27a774 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_editor.scss @@ -0,0 +1,14 @@ +.wp-block-code code { + font-size: var(--global--font-size-xs); + white-space: pre !important; + overflow-x: auto; +} + +.wp-block-code { + border-color: var(--global--color-border); + border-radius: 0; + border-style: solid; + border-width: 0.1rem; + padding: var(--global--spacing-unit); + color: currentColor; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_style.scss new file mode 100644 index 0000000000..ce783f954f --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_style.scss @@ -0,0 +1,14 @@ +.wp-block-code { + border-color: var(--global--color-border); + border-radius: 0; + border-style: solid; + border-width: 0.1rem; + padding: var(--global--spacing-unit); + + code { + font-size: var(--global--font-size-xs); + white-space: pre; + overflow-x: auto; + display: block; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss new file mode 100644 index 0000000000..b6c257806e --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss @@ -0,0 +1,66 @@ +.wp-block-columns { + + &:not(.alignwide):not(.alignfull) { + clear: both; + } + + .wp-block, + .wp-block-column { + // Allow Gutenberg to set the width of a block that lives inside the columns block. + max-width: inherit; + } + + &.is-style-twentytwentyone-columns-overlap { + + @include media(laptop) { + + .wp-block-column:nth-child(2n) { + margin-left: calc(-2 * var(--global--spacing-horizontal)); + margin-top: calc(2.5 * var(--global--spacing-horizontal)); + z-index: 2; + + // Provide text-based child blocks with a default background color to ensure they're readable. + > p, + > h1, + > h2, + > h3, + > h4, + > h5, + > h6, + > ul, + > ol, + > pre { + + &:not(.has-background) { + background-color: var(--global--color-background); + padding: var(--global--spacing-unit); + } + } + + // Lists should still have their usual left padding. + > ul:not(.has-background), + > ol:not(.has-background) { + padding-left: calc(2 * var(--global--spacing-horizontal)); + } + + &.is-vertically-aligned-center { + margin-top: 0; + } + } + } + } + + .wp-block[data-align="full"] & { + + p:not(.has-background), + h1:not(.has-background), + h2:not(.has-background), + h3:not(.has-background), + h4:not(.has-background), + h5:not(.has-background), + h6:not(.has-background) { + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_style.scss new file mode 100644 index 0000000000..8fb713afbd --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_style.scss @@ -0,0 +1,105 @@ +.wp-block-columns { + + &:not(.alignwide):not(.alignfull) { + clear: both; + } + + .wp-block-column { + + > * { + margin-top: calc(0.66 * var(--global--spacing-vertical)); + margin-bottom: calc(0.66 * var(--global--spacing-vertical)); + + @include media(mobile) { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + &:last-child { + margin-bottom: 0; + } + } + + .wp-block-column:not(:last-child) { + margin-bottom: calc(0.66 * var(--global--spacing-vertical)); + + @include media(mobile) { + margin-bottom: var(--global--spacing-vertical); + } + + @include media(desktop) { + margin-bottom: 0; + } + } + + &.is-style-twentytwentyone-columns-overlap { + + justify-content: space-around; + + @include media(laptop) { + + .wp-block-column { + + &:nth-child(2n) { + margin-left: calc(-2 * var(--global--spacing-horizontal)); + margin-top: calc(2.5 * var(--global--spacing-horizontal)); + z-index: 2; + + // Provide text-based child blocks with a default background color to ensure they're readable. + > p, + > h1, + > h2, + > h3, + > h4, + > h5, + > h6, + > ul, + > ol, + > pre { + + &:not(.has-background) { + background-color: var(--global--color-background); + padding: var(--global--spacing-unit); + } + } + + // Lists should still have their usual left padding. + > ul:not(.has-background), + > ol:not(.has-background) { + padding-left: calc(2 * var(--global--spacing-horizontal)); + } + + &.is-vertically-aligned-center { + margin-top: 0; + } + } + } + } + } + + &.alignfull { + + .wp-block-column { + + p:not(.has-background), + h1:not(.has-background), + h2:not(.has-background), + h3:not(.has-background), + h4:not(.has-background), + h5:not(.has-background), + h6:not(.has-background) { + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); + } + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss new file mode 100644 index 0000000000..f7d1b1aa7c --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss @@ -0,0 +1,70 @@ +.wp-block-cover, +.wp-block-cover-image { + + &:not(.alignwide):not(.alignfull) { + clear: both; + } + + background-color: var(--cover--color-background); + min-height: var(--cover--height); + margin-top: inherit; + margin-bottom: inherit; + + [data-align="full"] & { + margin-top: 0; + margin-bottom: 0; + } + + .wp-block-cover__inner-container, + .wp-block-cover-image-text, + .wp-block-cover-text, + .block-editor-block-list__block { + color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss + + a { + color: currentColor; + } + + .has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); + } + } + + // Default & custom background-color + &:not([class*="background-color"]) { + + .wp-block-cover__inner-container, + .wp-block-cover-image-text, + .wp-block-cover-text, + .block-editor-block-list__block { + color: var(--cover--color-foreground); + } + } + + // Treating H2 separately to account for legacy /core styles + h2 { + 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; // undo opinionated styles + text-align: inherit; + + &.has-text-align-left { + text-align: left; + } + + &.has-text-align-center { + text-align: center; + } + + &.has-text-align-right { + text-align: right; + } + } + + // Block Styles + &.is-style-twentytwentyone-border { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss new file mode 100644 index 0000000000..4891864608 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss @@ -0,0 +1,111 @@ +.wp-block-cover, +.wp-block-cover-image { + + &:not(.alignwide):not(.alignfull) { + clear: both; + } + + &.alignfull { + margin-top: 0; + margin-bottom: 0; + } + + background-color: var(--cover--color-background); + min-height: var(--cover--height); + margin-top: inherit; + margin-bottom: inherit; + + .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 + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + + a { + color: currentColor; + } + + .has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); + } + } + + /* default & custom background-color */ + &:not([class*="background-color"]) { + + .wp-block-cover__inner-container, + .wp-block-cover-image-text, + .wp-block-cover-text { + color: var(--cover--color-foreground); + } + } + + /* Treating H2 separately to account for legacy /core styles */ + h2 { + font-size: var(--heading--font-size-h2); + letter-spacing: var(--heading--letter-spacing-h2); + line-height: var(--heading--line-height-h2); + max-width: inherit; // undo opinionated styles + text-align: inherit; // undo opinionated styles + padding: 0; + + &.has-text-align-left { + text-align: left; + } + + &.has-text-align-center { + text-align: center; + } + + &.has-text-align-right { + text-align: right; + } + } + + .wp-block-cover__inner-container { + + width: calc(100% - calc(2 * var(--global--spacing-vertical))); + + > * { + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); + + @include media(mobile) { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + } + + &.alignleft, + &.alignright { + margin-top: 0; + + > * { + 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%; + } + } + + &.has-left-content, + &.has-right-content { + justify-content: center; + } + + /* Block Styles */ + &.is-style-twentytwentyone-border { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss new file mode 100644 index 0000000000..4029851e1d --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss @@ -0,0 +1,24 @@ +.wp-block-file { + + .wp-block-file__textlink { + text-decoration: underline; + text-decoration-style: solid; + text-decoration-thickness: 1px; + + &:hover { + text-decoration: underline; + text-decoration-style: dotted; + } + } + + .wp-block-file__button { + // Extend button style + @include button-style(); + display: inline-block; + + &:hover { + color: var(--button--color-text-hover); + background: transparent; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss new file mode 100644 index 0000000000..faf7798aab --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss @@ -0,0 +1,24 @@ +.wp-block-file { + + // Undo Gutenberg hover defaults + a.wp-block-file__button:active, + a.wp-block-file__button:focus, + a.wp-block-file__button:hover { + color: var(--button--color-text-hover); + opacity: inherit; + } + + a.wp-block-file__button:visited { + color: var(--button--color-text); + + &:hover { + color: var(--button--color-text-hover); + } + } + + .wp-block-file__button { + // Extend button style + @include button-style(); + display: inline-block; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_editor.scss new file mode 100644 index 0000000000..f08dfa54f7 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_editor.scss @@ -0,0 +1,10 @@ +.wp-block-gallery { + + figcaption { + margin-bottom: 0; + + a { + color: var(--global--color-white); + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_style.scss new file mode 100644 index 0000000000..81c9d1acb2 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_style.scss @@ -0,0 +1,33 @@ +.wp-block-gallery { + + margin: 0 auto; + + .blocks-gallery-image, + .blocks-gallery-item { + + // On mobile and responsive viewports, we allow only 1 or 2 columns at the most. + width: calc((100% - var(--global--spacing-unit)) / 2); + + figcaption { + margin: 0; + // Text color is always white to account for default gradient background + color: var(--global--color-white); + font-size: var(--global--font-size-xs); + + a { + color: var(--global--color-white); + + &:focus { + background-color: transparent; + outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); + text-decoration: none; + } + } + } + + a:focus img { + outline-offset: 2px; + } + + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss new file mode 100644 index 0000000000..159c57a8c2 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss @@ -0,0 +1,47 @@ +.wp-block-group { + // Start IE clearfix. + // This hack is only necessary because we want to support IE11. + // If we don't want to support IE11, then "display: flow-root" would suffice. + display: block; + clear: both; + + display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties + + &:before, + &:after { + content: ""; + display: block; + clear: both; + } + // End IE clearfix. + + &.has-background { + padding: var(--global--spacing-vertical); + + [data-align="full"] & { + margin-top: 0; + margin-bottom: 0; + } + } + + // Block Styles + &.is-style-twentytwentyone-border { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + padding: var(--global--spacing-vertical); + + .wp-block-group__inner-container > [data-align="full"] { + 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__inner-container > *:last-child { + margin-bottom: 0; + } +} + +.wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] { + margin: 0; + width: 100%; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_style.scss new file mode 100644 index 0000000000..72c756d331 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_style.scss @@ -0,0 +1,70 @@ +.wp-block-group { + // Start IE clearfix. + // This hack is only necessary because we want to support IE11. + // If we don't want to support IE11, then "display: flow-root" would suffice. + display: block; + clear: both; + + display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties + + &:before, + &:after { + content: ""; + display: block; + clear: both; + } + // End IE clearfix. + + .wp-block-group__inner-container { + margin-left: auto; + margin-right: auto; + + > * { + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); + + &.alignfull { + @extend %responsive-alignfull-width-mobile; + } + + @include media(mobile) { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + } + + &.has-background { + padding: calc(0.666 * var(--global--spacing-vertical)); + + @include media(mobile) { + padding: var(--global--spacing-vertical); + } + } + + // Block Styles + &.is-style-twentytwentyone-border { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + padding: var(--global--spacing-vertical); + } + + // Adjust alignfull items to account for left and right padding. + &.has-background, + &.is-style-twentytwentyone-border { + + .wp-block-group__inner-container > .alignfull, + .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { + 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)); + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_editor.scss new file mode 100644 index 0000000000..4ade8c2763 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_editor.scss @@ -0,0 +1,81 @@ +.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: var(--heading--font-family); + font-weight: var(--heading--font-weight); + + strong { + font-weight: var(--heading--font-weight-strong); + } + + &[style*="--wp--typography--line-height"] { + line-height: var(--wp--typography--line-height, --global--line-height-body); + } +} + +.wp-block-heading h1, +h1, +.h1 { + 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: 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: 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: 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: 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: 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); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_style.scss new file mode 100644 index 0000000000..5e5e3070fd --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_style.scss @@ -0,0 +1,65 @@ +h1, +.h1, +h2, +.h2, +h3, +.h3, +h4, +.h4, +h5, +.h5, +h6, +.h6 { + clear: both; + font-family: var(--heading--font-family); + font-weight: var(--heading--font-weight); + + strong { + font-weight: var(--heading--font-weight-strong); + } +} + +h1, +.h1 { + 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: var(--heading--font-size-h2); + letter-spacing: var(--heading--letter-spacing-h2); + line-height: var(--heading--line-height-h2); +} + +h3, +.h3 { + 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: 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: 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: 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); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/html/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/html/_editor.scss new file mode 100644 index 0000000000..eae872ea51 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/html/_editor.scss @@ -0,0 +1,6 @@ +[data-type="core/html"] textarea { + // Make sure that the color is not white on white when a dark body background is used. + color: var(--global--color-dark-gray); + border-radius: 0; + padding: var(--global--spacing-unit); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_editor.scss new file mode 100644 index 0000000000..e4ed9d7a01 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_editor.scss @@ -0,0 +1,20 @@ +/* Center image block by default in the editor */ + +.wp-block-image > div { + text-align: center; +} + +[data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized { + margin: 0 auto; +} + +/* Block Styles */ + +.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 { + padding: var(--global--spacing-unit); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_style.scss new file mode 100644 index 0000000000..fe4155e855 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_style.scss @@ -0,0 +1,69 @@ +.wp-block-image { + text-align: center; + + figcaption { + 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; + } + + .alignright { + margin-left: var(--global--spacing-horizontal); + } + + .alignleft { + margin-right: var(--global--spacing-horizontal); + } + + a:focus img { + outline-offset: 2px; + } +} + +// Remove vertical margins from image block wrappers when floated +.entry-content > *[class="wp-block-image"], +.entry-content [class*="inner-container"] > *[class="wp-block-image"] { + margin-top: 0; + margin-bottom: 0; + + // Remove top margins from the following element when previous image block is floated + + * { + margin-top: 0; + } +} + +img { + height: auto; + max-width: 100%; + vertical-align: middle; +} + +// Block Styles +.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 { + padding: var(--global--spacing-unit); +} + +.entry-content { + + > .wp-block-image { + + > .alignleft, + > .alignright { + @include media(mobile) { + max-width: 50%; + } + @include media(mobile-only) { + margin-left: 0; + margin-right: 0; + } + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss new file mode 100644 index 0000000000..fa7703d5e5 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss @@ -0,0 +1,3 @@ +.wp-block-latest-comments { + padding-left: 0; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss new file mode 100644 index 0000000000..1ab2748656 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss @@ -0,0 +1,35 @@ +.wp-block-latest-comments { + padding-left: 0; + + .wp-block-latest-comments__comment { + font-size: var(--global--font-size-sm); + line-height: var(--global--line-height-body); + + /* Vertical margins logic */ + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + .wp-block-latest-comments__comment-meta { + font-family: var(--heading--font-family); + } + + .wp-block-latest-comments__comment-date { + color: var(--global--color-primary); + font-size: var(--global--font-size-sm); + } + + .wp-block-latest-comments__comment-excerpt p { + font-size: var(--global--font-size-sm); + line-height: var(--global--line-height-body); + margin: 0; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_editor.scss new file mode 100644 index 0000000000..a5cf5c4093 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_editor.scss @@ -0,0 +1,144 @@ +.wp-block-latest-posts { + padding-left: 0; + + // Vertical margins logic + &:not(.is-grid) > li { + margin-top: calc(1.666 * var(--global--spacing-vertical)); + margin-bottom: calc(1.666 * var(--global--spacing-vertical)); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.is-grid { + word-wrap: break-word; + word-break: break-word; + + > li { + margin-bottom: var(--global--spacing-vertical); + + &:last-child { + margin-bottom: 0; + } + } + } + + > li > * { + margin-top: calc(0.333 * var(--global--spacing-vertical)); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + // Post title + > li > a { + display: inline-block; + 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)); + } + + // Post author + .wp-block-latest-posts__post-author { + color: var(--global--color-primary); + font-size: var(--global--font-size-md); + line-height: var(--global--line-height-body); + } + + // Post date + .wp-block-latest-posts__post-date { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); + + [class*="inner-container"] &, + .has-background & { + color: currentColor; + } + } + + // Post content + .wp-block-latest-posts__post-excerpt, + .wp-block-latest-posts__post-full-content { + 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)); + } + + // Block Styles + &.is-style-twentytwentyone-latest-posts-dividers { + border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); + border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); + + &:not(.is-grid) > li, + > li { + 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); + + &:last-child { + padding-bottom: 0; + border-bottom: none; + } + } + + &.is-grid { + // Border moves up 1px to overlap the li borders in the last row. + box-shadow: inset 0 -1px 0 0 var(--global--color-border); + border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); + + li { + margin: 0; + padding-top: var(--global--spacing-vertical); + padding-right: var(--global--spacing-horizontal); + + &:last-child { + padding-bottom: var(--global--spacing-vertical); + } + } + + // This is using a non-standard media query because it is directly overriding the gutenberg-provided widths. + // https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34 + @media screen and (min-width: 600px) { + @for $i from 2 through 6 { + &.columns-#{ $i } li { + width: calc((100% / #{ $i })); + } + } + } + } + } + + &.is-style-twentytwentyone-latest-posts-borders { + + li { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); + + &:last-child { + padding-bottom: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } + } + + &:not(.is-grid) li { + margin-top: var(--global--spacing-horizontal); + margin-bottom: var(--global--spacing-horizontal); + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_style.scss new file mode 100644 index 0000000000..f9bf6dc3db --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_style.scss @@ -0,0 +1,169 @@ +.wp-block-latest-posts { + padding-left: 0; + + // Vertical margins logic + &:not(.is-grid) > li { + margin-top: calc(1.666 * var(--global--spacing-vertical)); + margin-bottom: calc(1.666 * var(--global--spacing-vertical)); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.is-grid { + word-wrap: break-word; + word-break: break-word; + + > li { + margin-bottom: var(--global--spacing-vertical); + + &:last-child { + margin-bottom: 0; + } + } + + // Remove bottom margins in grid columns + &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), + &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, + &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), + &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, + &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), + &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, + &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), + &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, + &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), + &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { + margin-bottom: 0; + } + } + + > li > * { + margin-top: calc(0.333 * var(--global--spacing-vertical)); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + // Post title + > li > a { + display: inline-block; + 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)); + } + + // Post author + .wp-block-latest-posts__post-author { + color: var(--global--color-primary); + font-size: var(--global--font-size-md); + line-height: var(--global--line-height-body); + } + + // Post date + .wp-block-latest-posts__post-date { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); + + [class*="inner-container"] &, + .has-background & { + color: currentColor; + } + } + + // Post content + .wp-block-latest-posts__post-excerpt, + .wp-block-latest-posts__post-full-content { + 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)); + } + + // Utility classes + &.alignfull { + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); + + .entry-content [class*="inner-container"] &, + .entry-content .has-background & { + padding-left: 0; + padding-right: 0; + } + } + + // Block Styles + &.is-style-twentytwentyone-latest-posts-dividers { + border-top: calc(3 * var(--separator--height)) solid var(--global--color-border); + border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border); + + &:not(.is-grid) > li, + > li { + 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); + + &:last-child { + padding-bottom: 0; + border-bottom: none; + } + } + + &.is-grid { + // Border moves up 1px to overlap the li borders in the last row. + box-shadow: inset 0 -1px 0 0 var(--global--color-border); + border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border); + + li { + margin: 0; + padding-top: var(--global--spacing-vertical); + padding-right: var(--global--spacing-horizontal); + + &:last-child { + padding-bottom: var(--global--spacing-vertical); + } + } + + // This is using a non-standard media query because it is directly overriding the gutenberg-provided widths. + // https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34 + @media screen and (min-width: 600px) { + @for $i from 2 through 6 { + &.columns-#{ $i } li { + width: calc((100% / #{ $i })); + } + } + } + } + } + + &.is-style-twentytwentyone-latest-posts-borders { + + li { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + padding: var(--global--spacing-vertical) var(--global--spacing-horizontal); + + &:last-child { + padding-bottom: var(--global--spacing-vertical); + } + } + + &:not(.is-grid) li { + margin-top: var(--global--spacing-horizontal); + margin-bottom: var(--global--spacing-horizontal); + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_editor.scss new file mode 100644 index 0000000000..c3b540ff60 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_editor.scss @@ -0,0 +1,42 @@ +.gallery-item { + display: inline-block; + text-align: center; + vertical-align: top; + width: 100%; + + .gallery-columns-2 & { + max-width: 50%; + } + + .gallery-columns-3 & { + max-width: 33.33%; + } + + .gallery-columns-4 & { + max-width: 25%; + } + + .gallery-columns-5 & { + max-width: 20%; + } + + .gallery-columns-6 & { + max-width: 16.66%; + } + + .gallery-columns-7 & { + max-width: 14.28%; + } + + .gallery-columns-8 & { + max-width: 12.5%; + } + + .gallery-columns-9 & { + max-width: 11.11%; + } +} + +.gallery-caption { + display: block; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_style.scss new file mode 100644 index 0000000000..efbc1bf14e --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_style.scss @@ -0,0 +1,55 @@ +.gallery-item { + display: inline-block; + text-align: center; + vertical-align: top; + width: 100%; + + a { + display: block; + } + + a:focus img { + outline-offset: -2px; + } + + .gallery-columns-2 & { + max-width: 50%; + } + + .gallery-columns-3 & { + max-width: 33.33%; + } + + .gallery-columns-4 & { + max-width: 25%; + } + + .gallery-columns-5 & { + max-width: 20%; + } + + .gallery-columns-6 & { + max-width: 16.66%; + } + + .gallery-columns-7 & { + max-width: 14.28%; + } + + .gallery-columns-8 & { + max-width: 12.5%; + } + + .gallery-columns-9 & { + max-width: 11.11%; + } +} + +.gallery-caption { + display: block; +} + +// Legacy images, linked +figure.wp-caption a:focus img { + outline-offset: 2px; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_editor.scss new file mode 100644 index 0000000000..1b27b3c3b1 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_editor.scss @@ -0,0 +1,32 @@ +ul, +ol { + font-family: var(--list--font-family); + margin: var(--global--spacing-vertical) 0; + padding-left: calc(2 * var(--global--spacing-horizontal)); + + // Utility classes + &.aligncenter { + list-style-position: inside; + padding: 0; + text-align: center; + } + + &.alignright { + list-style-position: inside; + padding: 0; + text-align: right; + } +} + +li { + + > ul, + > ol { + margin: 0; + } +} + +dt { + font-family: var(--definition-term--font-family); + font-weight: bold; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_style.scss new file mode 100644 index 0000000000..01e8581cea --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_style.scss @@ -0,0 +1,36 @@ +ul, +ol { + font-family: var(--list--font-family); + margin: 0; + padding-left: calc(2 * var(--global--spacing-horizontal)); + + // Utility classes + &.aligncenter { + list-style-position: inside; + padding: 0; + } + + &.alignright { + list-style-position: inside; + text-align: right; + padding: 0; + } +} + +ul { + list-style-type: disc; +} + +ol { + list-style-type: decimal; +} + +dt { + font-family: var(--definition-term--font-family); + font-weight: bold; +} + +dd { + margin: 0; + padding-left: calc(2 * var(--global--spacing-horizontal)); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss new file mode 100644 index 0000000000..3f3a5fcf5c --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss @@ -0,0 +1,24 @@ +.wp-block-media-text { + + [data-align="full"] & { + margin-top: 0; + margin-bottom: 0; + } + + .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 + &.is-style-twentytwentyone-border { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_style.scss new file mode 100644 index 0000000000..7879886f32 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_style.scss @@ -0,0 +1,53 @@ +.wp-block-media-text { + + &.alignfull { + margin-top: 0; + margin-bottom: 0; + } + + a:focus img { + outline-offset: -1px; + } + + .wp-block-media-text__content { + padding: var(--global--spacing-horizontal); + + @include media(tablet) { + padding: var(--global--spacing-vertical); + } + + > * { + margin-top: calc(0.666 * var(--global--spacing-vertical)); + margin-bottom: calc(0.666 * var(--global--spacing-vertical)); + + @include media(mobile) { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + } + + /** + * Block Options + */ + + &.is-stacked-on-mobile .wp-block-media-text__content { + @include media(mobile) { + padding-top: var(--global--spacing-vertical); + padding-bottom: var(--global--spacing-vertical); + } + } + + // Block Styles + &.is-style-twentytwentyone-border { + border: calc(3 * var(--separator--height)) solid var(--global--color-border); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_editor.scss new file mode 100644 index 0000000000..028376dabb --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_editor.scss @@ -0,0 +1,45 @@ +.wp-block-navigation { + + .wp-block-navigation__container { + background: var(--global--color-background); + padding: 0; + } + + .wp-block-navigation-link { + + .wp-block-navigation-link__content { + padding: var(--primary-nav--padding); + } + + .wp-block-navigation-link__label { + font-family: var(--primary-nav--font-family); + font-size: var(--primary-nav--font-size); + font-weight: var(--primary-nav--font-weight); + } + } + + .has-child { + + .wp-block-navigation__container { + box-shadow: var(--global--elevation); + } + } + + &:not(.has-text-color) { + + .wp-block-navigation-link { + + > a { + + &:hover, + &:focus { + color: var(--primary-nav--color-link-hover); + } + } + } + + .wp-block-navigation-link__content { + color: currentColor; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_style.scss new file mode 100644 index 0000000000..3e3b1ca348 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_style.scss @@ -0,0 +1,128 @@ +.wp-block-navigation { + + .wp-block-navigation-link { + padding: 0; + + .wp-block-navigation-link__content { + padding: var(--primary-nav--padding); + } + + .wp-block-navigation-link__label { + font-family: var(--primary-nav--font-family); + font-size: var(--primary-nav--font-size); + font-weight: var(--primary-nav--font-weight); + } + } + + .wp-block-navigation-link__submenu-icon { + padding: 0; + } + + // Top level navigation container. + > .wp-block-navigation__container { + + .has-child { + + .wp-block-navigation-link { + display: inherit; + } + + .wp-block-navigation__container { + border: none; + left: 0; + margin-left: var(--primary-nav--padding); + min-width: max-content; + opacity: 0; + padding: 0; + position: inherit; + top: inherit; + + .wp-block-navigation-link { + + .wp-block-navigation-link__content { + display: inline-block; + padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding); + } + } + + .wp-block-navigation-link__submenu-icon { + display: none; + } + } + + &:hover, + &:focus-within { + + .wp-block-navigation__container { + display: block; + opacity: 1; + visibility: visible; + } + } + } + + > .has-child { + + > .wp-block-navigation__container { + background: var(--global--color-background); + margin: 0; + padding: 0; + position: absolute; + top: 100%; + border: 1px solid var(--primary-nav--border-color); + + &:before, + &:after { + content: ""; + display: block; + position: absolute; + width: 0; + top: -10px; + left: var(--global--spacing-horizontal); + border-style: solid; + border-color: var(--primary-nav--border-color) transparent; + border-width: 0 7px 10px 7px; + } + + &:after { + top: -9px; + border-color: var(--global--color-background) transparent; + } + } + } + } + + &:not(.has-background) { + + .wp-block-navigation__container { + background: var(--global--color-background); + + .wp-block-navigation__container { + background: var(--global--color-background); + } + } + } + + &:not(.has-text-color) { + + .wp-block-navigation-link { + + > a { + + &:hover, + &:focus { + color: var(--primary-nav--color-link-hover); + } + + &:hover { + text-decoration: underline; + text-decoration-style: dotted; + } + } + } + + .wp-block-navigation-link__content { + color: currentColor; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_editor.scss new file mode 100644 index 0000000000..3e82235d22 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_editor.scss @@ -0,0 +1,7 @@ +p { + line-height: var(--wp--typography--line-height, --global--line-height-body); + + &.has-background { + padding: var(--global--spacing-unit); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_style.scss new file mode 100644 index 0000000000..f161f1e555 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_style.scss @@ -0,0 +1,14 @@ +p { + + line-height: var(--wp--typography--line-height, --global--line-height-body); + + // inherits general font style set at + &.has-background { + padding: var(--global--spacing-unit); + } + + // Override `color: inherit` from Core styles. + &.has-text-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_editor.scss new file mode 100644 index 0000000000..83c2654007 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_editor.scss @@ -0,0 +1,6 @@ +pre.wp-block-preformatted { + overflow-x: auto; + white-space: pre !important; + font-size: var(--global--font-size-xs); + +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_style.scss new file mode 100644 index 0000000000..342b116351 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_style.scss @@ -0,0 +1,4 @@ +pre.wp-block-preformatted { + overflow-x: auto; + white-space: pre; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss new file mode 100644 index 0000000000..490c8a1dfe --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss @@ -0,0 +1,96 @@ +.wp-block-pullquote { + padding: calc(2 * var(--global--spacing-unit)) 0; + text-align: center; + 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; + font-size: 3rem; + font-weight: 500; + line-height: 1; + } + + p { + font-family: var(--pullquote--font-family); + font-size: var(--pullquote--font-size); + font-style: var(--pullquote--font-style); + font-weight: 700; + letter-spacing: var(--pullquote--letter-spacing); + line-height: var(--pullquote--line-height); + margin: 0; + } + + a { + color: currentColor; + } + + .wp-block-pullquote__citation, + cite, + footer { + font-size: var(--global--font-size-xs); + font-style: var(--pullquote--font-style); + text-transform: none; + } + + // Block Options + &:not(.is-style-solid-color) { + background: none; + } + + &.is-style-solid-color { + margin-left: auto; + margin-right: auto; + padding: calc(2.5 * var(--global--spacing-unit)); + border-width: var(--pullquote--border-width); + border-style: solid; + border-color: var(--pullquote--border-color); + + @media ( min-width: 600px ) { + padding: calc(5 * var(--global--spacing-unit)); + } + + blockquote::before { + text-align: left; + } + + &.alignleft blockquote, + &.alignright blockquote { + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); + max-width: inherit; + } + + blockquote { + margin: 0; + max-width: 100%; + + p { + font-size: var(--pullquote--font-size); + } + } + + .wp-block-pullquote__citation, + cite, + footer { + color: currentColor; + } + } + +} + +.wp-block[data-align="full"] { + + .wp-block-pullquote:not(.is-style-solid-color) { + + blockquote { + padding: 0 calc(2 * var(--global--spacing-unit)); + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss new file mode 100644 index 0000000000..6433e76663 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss @@ -0,0 +1,97 @@ +.wp-block-pullquote { + padding: calc(2 * var(--global--spacing-unit)) 0; + text-align: center; + border-width: var(--pullquote--border-width); + border-bottom-style: solid; + border-top-style: solid; + position: relative; + + blockquote::before { + color: currentColor; + content: "\201C"; + display: block; + font-size: 3rem; + font-weight: 500; + line-height: 1; + } + + p { + font-family: var(--pullquote--font-family); + font-size: var(--pullquote--font-size); + font-style: var(--pullquote--font-style); + font-weight: 700; + letter-spacing: var(--pullquote--letter-spacing); + line-height: var(--pullquote--line-height); + margin: 0; + } + + a { + color: currentColor; + } + + .wp-block-pullquote__citation, + cite, + footer { + color: currentColor; + display: block; + font-size: var(--global--font-size-xs); + font-style: var(--pullquote--font-style); + text-transform: none; + } + + /** + * Block Options + */ + &:not(.is-style-solid-color) { + background: none; + } + + &.alignleft { + + blockquote:before, + cite { + text-align: center; + } + } + + &.alignwide > p, + &.alignwide blockquote { + max-width: var(--responsive--alignwide-width); + + } + + &.alignfull:not(.is-style-solid-color) > p, + &.alignfull:not(.is-style-solid-color) blockquote { + padding: 0 calc(2 * var(--global--spacing-unit)); + } + + &.is-style-solid-color { + color: var(--pullquote--color-foreground); + padding: calc(2.5 * var(--global--spacing-unit)); + border-width: var(--pullquote--border-width); + border-style: solid; + border-color: var(--pullquote--border-color); + + @media ( min-width: 600px ) { + padding: calc(5 * var(--global--spacing-unit)); + } + + blockquote::before { + text-align: left; + } + + blockquote { + max-width: inherit; + + p { + font-size: var(--pullquote--font-size); + } + } + + .wp-block-pullquote__citation, + cite, + footer { + color: currentColor; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss new file mode 100644 index 0000000000..93aeedca61 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss @@ -0,0 +1,134 @@ +.wp-block-quote { + position: relative; + border-left: none; + margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal); + + p { + 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); + } + + strong { + font-weight: var(--quote--font-weight-strong); + } + + &:before { + 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 { + 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) &, + [class*="background-color"]:not(.has-background-background-color) &, + [style*="background-color"]:not(.has-background-background-color) &, + .wp-block-cover[style*="background-image"] & { + color: currentColor; + } + } + + &.has-text-align-right { + margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; + padding-right: 0; + border-right: none; + + &:before { + content: "\201D"; + left: initial; + right: calc(-0.5 * var(--global--spacing-horizontal)); + } + } + + &.has-text-align-center { + margin: var(--global--spacing-vertical) auto; + + &:before { + display: none; + } + } + + &.is-large, + &.is-style-large { + padding-left: 0; + + /* Resetting margins to match _block-container.scss */ + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + + p { + font-size: var(--quote--font-size-large); + font-style: var(--quote--font-style-large); + line-height: var(--quote--line-height-large); + } + + &:before { + font-size: var(--quote--font-size-large); + line-height: var(--quote--line-height-large); + left: calc(-1 * var(--global--spacing-horizontal)); + } + + &.has-text-align-right { + + &:before { + left: initial; + right: calc(-1 * var(--global--spacing-horizontal)); + } + } + + @include media(mobile-only) { + padding-left: var(--global--spacing-horizontal); + + &:before { + left: 0; + } + + &.has-text-align-right { + padding-left: 0; + padding-right: var(--global--spacing-horizontal); + + &:before { + right: 0; + } + } + } + } + + @include media(mobile-only) { + padding-left: calc(0.5 * var(--global--spacing-horizontal)); + + &:before { + left: 0; + } + + &.has-text-align-right { + padding-left: 0; + padding-right: calc(0.5 * var(--global--spacing-horizontal)); + + &:before { + right: 0; + } + } + + &.has-text-align-center { + padding-left: 0; + padding-right: 0; + } + } + + @include media(mobile) { + margin-left: auto; + + &.has-text-align-right { + margin-right: auto; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss new file mode 100644 index 0000000000..4f6661e43b --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss @@ -0,0 +1,113 @@ +.wp-block-quote { + + .wp-block-quote__citation, + cite, + footer { + + .has-background:not(.has-background-background-color) &, + [class*="background-color"]:not(.has-background-background-color) &, + [style*="background-color"] &, + .wp-block-cover[style*="background-image"] & { + color: currentColor; + } + } + + /** + * Block Options + */ + &.has-text-align-right { + margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto; + padding-right: 0; + border-right: none; + + &:before { + content: "\201D"; + left: initial; + right: calc(-0.5 * var(--global--spacing-horizontal)); + } + } + + &.has-text-align-center { + margin: var(--global--spacing-vertical) auto; + + &:before { + display: none; + } + } + + &.is-large, + &.is-style-large { + padding-left: 0; + padding-right: 0; + + /* Resetting margins to match _block-container.scss */ + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + + p { + font-size: var(--quote--font-size-large); + font-style: var(--quote--font-style-large); + line-height: var(--quote--line-height-large); + } + + &:before { + font-size: var(--quote--font-size-large); + line-height: var(--quote--line-height-large); + left: calc(-1 * var(--global--spacing-horizontal)); + } + + &.has-text-align-right { + + &:before { + left: initial; + right: calc(-1 * var(--global--spacing-horizontal)); + } + } + + .wp-block-quote__citation, + cite, + footer { + color: var(--global--color-primary); + font-size: var(--global--font-size-sm); + } + + @include media(mobile-only) { + padding-left: var(--global--spacing-horizontal); + + &:before { + left: 0; + } + + &.has-text-align-right { + padding-left: 0; + padding-right: var(--global--spacing-horizontal); + + &:before { + right: 0; + } + } + + &.has-text-align-center { + padding-left: 0; + padding-right: 0; + } + } + } + + @include media(mobile-only) { + + &.has-text-align-right { + padding-left: 0; + padding-right: calc(0.5 * var(--global--spacing-horizontal)); + + &:before { + right: 0; + } + } + + &.has-text-align-center { + padding-left: 0; + padding-right: 0; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_editor.scss new file mode 100644 index 0000000000..d1e0f63670 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_editor.scss @@ -0,0 +1,109 @@ +.wp-block-rss { + padding-left: 0; + + > li { + list-style: none; + } + + // Vertical margins logic + &:not(.is-grid) > li { + margin-top: calc(1.666 * var(--global--spacing-vertical)); + margin-bottom: calc(1.666 * var(--global--spacing-vertical)); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.is-grid { + + > li { + margin-bottom: var(--global--spacing-vertical); + + &:last-child { + margin-bottom: 0; + } + } + + // Remove bottom margins in grid columns + &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), + &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, + &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), + &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, + &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), + &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, + &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), + &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, + &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), + &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { + margin-bottom: 0; + } + } + + > li > * { + margin-top: calc(0.333 * var(--global--spacing-vertical)); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + // Post title + .wp-block-rss__item-title > a { + display: inline-block; + 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)); + } + + // Post author + .wp-block-rss__item-author { + color: var(--global--color-primary); + font-size: var(--global--font-size-md); + line-height: var(--global--line-height-body); + } + + // Post date + .wp-block-rss__item-publish-date { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); + + [class*="inner-container"] &, + .has-background & { + color: currentColor; + } + } + + // Post content + .wp-block-rss__item-excerpt, + .wp-block-rss__item-full-content { + 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)); + } + + // Utility classes + &.alignfull { + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); + + .entry-content [class*="inner-container"] &, + .entry-content .has-background & { + padding-left: 0; + padding-right: 0; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_style.scss new file mode 100644 index 0000000000..d1e0f63670 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_style.scss @@ -0,0 +1,109 @@ +.wp-block-rss { + padding-left: 0; + + > li { + list-style: none; + } + + // Vertical margins logic + &:not(.is-grid) > li { + margin-top: calc(1.666 * var(--global--spacing-vertical)); + margin-bottom: calc(1.666 * var(--global--spacing-vertical)); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.is-grid { + + > li { + margin-bottom: var(--global--spacing-vertical); + + &:last-child { + margin-bottom: 0; + } + } + + // Remove bottom margins in grid columns + &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1), + &.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li, + &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1), + &.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li, + &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1), + &.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li, + &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1), + &.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li, + &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1), + &.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li { + margin-bottom: 0; + } + } + + > li > * { + margin-top: calc(0.333 * var(--global--spacing-vertical)); + margin-bottom: calc(0.333 * var(--global--spacing-vertical)); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + // Post title + .wp-block-rss__item-title > a { + display: inline-block; + 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)); + } + + // Post author + .wp-block-rss__item-author { + color: var(--global--color-primary); + font-size: var(--global--font-size-md); + line-height: var(--global--line-height-body); + } + + // Post date + .wp-block-rss__item-publish-date { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + line-height: var(--global--line-height-body); + + [class*="inner-container"] &, + .has-background & { + color: currentColor; + } + } + + // Post content + .wp-block-rss__item-excerpt, + .wp-block-rss__item-full-content { + 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)); + } + + // Utility classes + &.alignfull { + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); + + .entry-content [class*="inner-container"] &, + .entry-content .has-background & { + padding-left: 0; + padding-right: 0; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss new file mode 100644 index 0000000000..c895e65a4b --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss @@ -0,0 +1,183 @@ +.wp-block-search { + max-width: var(--responsive--aligndefault-width); + + .wp-block-search__label { + font-size: var(--form--font-size); + font-weight: var(--form--label-weight); + margin-bottom: calc(var(--global--spacing-vertical) / 3); + } + + .wp-block-search__input { + 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: calc(-1 * var(--button--border-width)); + padding: var(--form--spacing-unit); + + .is-dark-theme & { + background: var(--global--color-white-90); + } + + .has-background.has-white-background-color &, + .has-background.has-green-background-color &, + .has-background.has-blue-background-color &, + .has-background.has-purple-background-color &, + .has-background.has-red-background-color &, + .has-background.has-orange-background-color &, + .has-background.has-yellow-background-color & { + + .is-dark-theme & { + border-color: var(--form--color-text); + } + } + + .has-background.has-gray-background-color &, + .has-background.has-dark-gray-background-color &, + .has-background.has-black-background-color & { + border-color: var(--global--color-white); + } + } + + .wp-block-search__button { + @include button-style(); + box-shadow: none; + margin-left: 0; + background-color: transparent; + color: var(--button--color-text-hover); + + &:hover { + color: var(--button--color-text); + background-color: var(--button--color-background); + } + + &.has-icon { + padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal)); + + svg { + width: 40px; + height: 40px; + } + } + + .has-background.has-gray-background-color &, + .has-background.has-dark-gray-background-color &, + .has-background.has-black-background-color & { + color: var(--global--color-white); + border-color: currentColor; + + &:hover { + color: var(--global--color-white); + background-color: var(--button--color-background); + border-color: var(--global--color-white); + + .is-dark-theme & { + color: var(--button--color-text); + background-color: var(--button--color-background); + } + } + } + + .has-background.has-white-background-color &, + .has-background.has-green-background-color &, + .has-background.has-blue-background-color &, + .has-background.has-purple-background-color &, + .has-background.has-red-background-color &, + .has-background.has-orange-background-color &, + .has-background.has-yellow-background-color & { + + &:hover { + color: var(--global--color-white); + background-color: var(--form--border-color); + border-color: var(--form--border-color); + } + + .is-dark-theme & { + color: var(--form--color-text); + border-color: currentColor; + + &:hover { + color: var(--global--color-white); + background-color: var(--button--color-text); + border-color: var(--button--color-text); + } + } + } + } + + &.wp-block-search__button-inside { + + .wp-block-search__input, + .has-background.has-white-background-color & .wp-block-search__input, + .has-background.has-green-background-color & .wp-block-search__input, + .has-background.has-blue-background-color & .wp-block-search__input, + .has-background.has-purple-background-color & .wp-block-search__input, + .has-background.has-red-background-color & .wp-block-search__input, + .has-background.has-orange-background-color & .wp-block-search__input, + .has-background.has-yellow-background-color & .wp-block-search__input { + border: none; + } + + &.wp-block-search__text-button { + + .wp-block-search__button { + // Match the text button size with the icon button. + padding: var(--button--padding-vertical) var(--button--padding-horizontal); + } + } + + .wp-block-search__button { + + .is-dark-theme & { + color: var(--button--color-text); + border-color: currentColor; + + &:hover { + color: var(--global--color-white); + background-color: var(--button--color-text); + border-color: var(--button--color-text); + } + } + + .has-background.has-gray-background-color &, + .has-background.has-dark-gray-background-color &, + .has-background.has-black-background-color & { + color: var(--button--color-text-hover); + border-color: currentColor; + + &:hover { + color: var(--global--color-white); + background-color: var(--button--color-background); + border-color: var(--button--color-background); + } + + .is-dark-theme & { + color: var(--button--color-text); + border-color: currentColor; + + &:hover { + color: var(--global--color-white); + background-color: var(--button--color-text); + border-color: var(--button--color-text); + } + } + } + } + } +} + +.wp-block[data-align="center"] > * { + text-align: center; +} + +.wp-block[data-align="center"] { + + .wp-block-search__button-only { + + .wp-block-search__inside-wrapper { + justify-content: center; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss new file mode 100644 index 0000000000..31f9e545fa --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss @@ -0,0 +1,162 @@ +.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 { + justify-content: center; + } + } + + .wp-block-search__label { + font-size: var(--form--font-size); + font-weight: var(--form--label-weight); + margin-bottom: calc(var(--global--spacing-vertical) / 3); + } + + .wp-block-search__input { + 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: calc(-1 * var(--button--border-width)); + padding: var(--form--spacing-unit); + + &:focus { + color: var(--form--color-text); + border-color: var(--form--border-color); + } + + .has-background:not(.has-background-background-color) &, + [class*="background-color"]:not(.has-background-background-color) &, + [style*="background-color"] &, + .wp-block-cover[style*="background-image"] & { + border-color: currentColor; + } + + .has-background.has-gray-background-color &, + .has-background.has-dark-gray-background-color &, + .has-background.has-black-background-color & { + border-color: var(--global--color-white); + } + } + + button.wp-block-search__button { + margin-left: 0; + background-color: transparent; + color: var(--button--color-text-hover); + line-height: 1; + + &:hover { + background-color: var(--button--color-background); + color: var(--button--color-text); + } + + &.has-icon { + padding: 6px calc(0.5 * var(--button--padding-horizontal)); + + svg { + width: 40px; + height: 40px; + fill: currentColor; + } + } + + .has-background.has-gray-background-color &, + .has-background.has-dark-gray-background-color &, + .has-background.has-black-background-color & { + color: var(--global--color-white); + border-color: currentColor; + + &:hover { + background-color: var(--button--color-background); + border-color: var(--global--color-white); + color: var(--global--color-white); + + .is-dark-theme & { + color: var(--button--color-text); + } + } + } + + .has-background.has-white-background-color &, + .has-background.has-green-background-color &, + .has-background.has-blue-background-color &, + .has-background.has-purple-background-color &, + .has-background.has-red-background-color &, + .has-background.has-orange-background-color &, + .has-background.has-yellow-background-color & { + border-color: currentColor; + color: currentColor; + + &:hover { + background-color: var(--form--border-color); + border-color: var(--form--border-color); + color: var(--global--color-white); + + .is-dark-theme & { + border-color: var(--button--color-text); + background-color: var(--button--color-text); + color: var(--button--color-background); + } + } + } + } + + &.wp-block-search__button-inside { + + &.wp-block-search__text-button { + + button.wp-block-search__button { + // Match the text button size with the icon button. + padding: var(--button--padding-vertical) var(--button--padding-horizontal); + } + } + + button.wp-block-search__button { + + .has-background.has-gray-background-color &, + .has-background.has-dark-gray-background-color &, + .has-background.has-black-background-color & { + border-color: var(--button--color-background); + color: var(--button--color-background); + + &:hover { + color: var(--global--color-white); + } + + .is-dark-theme & { + border-color: var(--button--color-text); + color: var(--button--color-text); + + &:hover { + color: var(--global--color-white); + } + } + } + + .is-dark-theme & { + border-color: var(--button--color-text); + color: var(--button--color-text); + + &:hover { + border-color: var(--button--color-text); + background-color: var(--button--color-text); + color: var(--button--color-background); + } + } + } + } +} + +.wp-block-search__button { + box-shadow: none; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss new file mode 100644 index 0000000000..68d9736a78 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss @@ -0,0 +1,48 @@ +.wp-block-separator, +hr { + border-bottom: var(--separator--height) solid var(--separator--border-color); + clear: both; + opacity: 1; + + &[style*="text-align:right"], + &[style*="text-align: right"] { + border-right-color: var(--separator--border-color); + } + + &:not(.is-style-dots) { + max-width: var(--responsive--aligndefault-width); + } + + [data-align="full"] > &, + [data-align="wide"] > & { + max-width: inherit; + } + + &.is-style-twentytwentyone-separator-thick { + border-bottom-width: calc(3 * var(--separator--height)); + } + + &.is-style-dots { + border-bottom: none; + + &.has-background, + &.has-text-color { + background-color: transparent !important; + + &:before { + color: currentColor !important; + } + } + + &:before { + color: var(--separator--border-color); + } + } + + .has-background:not(.has-background-background-color) &, + [class*="background-color"]:not(.has-background-background-color) &, + [style*="background-color"]:not(.has-background-background-color) &, + .wp-block-cover[style*="background-image"] & { + border-color: currentColor; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss new file mode 100644 index 0000000000..396567d183 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss @@ -0,0 +1,52 @@ +hr { + border-style: none; + border-bottom: var(--separator--height) solid var(--separator--border-color); + clear: both; + margin-left: auto; + margin-right: auto; + + &.wp-block-separator { + border-bottom: var(--separator--height) solid var(--separator--border-color); + + &:not(.is-style-dots):not(.alignwide) { + max-width: var(--responsive--aligndefault-width); + + &.alignfull { + max-width: var(--responsive--alignfull-width); + } + } + + /** + * Block Options + */ + &.is-style-twentytwentyone-separator-thick { + border-bottom-width: calc(3 * var(--separator--height)); + } + + &.is-style-dots { + + &.has-background, + &.has-text-color { + background-color: transparent !important; + + &:before { + color: currentColor !important; + } + } + + &:before { + 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) &, + [class*="background-color"]:not(.has-background-background-color) &, + [style*="background-color"] &, + .wp-block-cover[style*="background-image"] & { + border-color: currentColor; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_editor.scss new file mode 100644 index 0000000000..e25846018d --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_editor.scss @@ -0,0 +1,20 @@ +.wp-block-social-links { + + // Social icons are horizontal, so they don't need vertical spacing. + [data-block] { + margin-top: 0; + margin-bottom: 0; + } + + &.is-style-twentytwentyone-social-icons-color { + + button { + color: var(--global--color-primary); + } + + .wp-social-link { + background: none; + } + } + +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss new file mode 100644 index 0000000000..c292e67cd5 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss @@ -0,0 +1,11 @@ +.wp-block-social-links.is-style-twentytwentyone-social-icons-color { + + a { + color: var(--global--color-primary); + } + + .wp-social-link { + background: none; + } + +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/spacer/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/spacer/_style.scss new file mode 100644 index 0000000000..7f9c4e1903 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/spacer/_style.scss @@ -0,0 +1,13 @@ +.wp-block-spacer { + display: block; + // Remove vertical margins + margin-bottom: 0 !important; + margin-top: 0 !important; + + @include media(mobile-only) { + + &[style] { + height: var(--global--spacing-unit) !important; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss new file mode 100644 index 0000000000..37b295ecb2 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss @@ -0,0 +1,79 @@ +table, +.wp-block-table { + + th { + font-family: var(--heading--font-family); + } + + td, + th { + padding: calc(0.5 * var(--global--spacing-unit)); + } + + &.is-style-regular .has-background, + &.is-style-stripes .has-background thead tr, + &.is-style-stripes .has-background tfoot tr, + &.is-style-stripes .has-background tbody tr:nth-child(even) { + color: var(--table--has-background-text-color); + } + + &.is-style-stripes { + border-color: var(--table--stripes-border-color); + + th, + td { + border-width: 0; + } + + tbody tr:nth-child(odd) { + background-color: var(--table--stripes-background-color); + } + } +} + +table.wp-calendar-table { + + td, + th { + background: transparent; + border: 0; + text-align: center; + line-height: 2; + vertical-align: middle; + } + + th { + font-weight: bold; + } + + thead, + tbody { + color: currentColor; + border: 1px solid; + } + + caption { + font-weight: bold; + text-align: left; + margin-bottom: var(--global--spacing-unit); + color: currentColor; + } +} + +.wp-calendar-nav { + text-align: left; + margin-top: calc(var(--global--spacing-unit) / 2); + + svg { + height: 1em; + vertical-align: middle; + + path { + fill: currentColor; + } + } + + .wp-calendar-nav-next { + float: right; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss new file mode 100644 index 0000000000..36558db0d5 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss @@ -0,0 +1,84 @@ +table, +.wp-block-table { + width: 100%; + min-width: 240px; + border-collapse: collapse; + + th { + font-family: var(--heading--font-family); + } + + td, + th { + padding: calc(0.5 * var(--global--spacing-unit)); + border: 1px solid; + } + + &.is-style-regular .has-background, + &.is-style-stripes .has-background thead tr, + &.is-style-stripes .has-background tfoot tr, + &.is-style-stripes .has-background tbody tr:nth-child(even) { + color: var(--table--has-background-text-color); + } + + &.is-style-stripes { + border-color: var(--table--stripes-border-color); + + th, + td { + border-width: 0; + } + + tbody tr:nth-child(odd) { + background-color: var(--table--stripes-background-color); + } + } +} + +table.wp-calendar-table { + + td, + th { + background: transparent; + border: 0; + text-align: center; + line-height: 2; + vertical-align: middle; + word-break: normal; + } + + th { + font-weight: bold; + } + + thead, + tbody { + color: currentColor; + border: 1px solid; + } + + caption { + font-weight: bold; + text-align: left; + margin-bottom: var(--global--spacing-unit); + color: currentColor; + } +} + +.wp-calendar-nav { + text-align: left; + margin-top: calc(var(--global--spacing-unit) / 2); + + svg { + height: 1em; + vertical-align: middle; + + path { + fill: currentColor; + } + } + + .wp-calendar-nav-next { + float: right; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_editor.scss new file mode 100644 index 0000000000..5efd121506 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_editor.scss @@ -0,0 +1,6 @@ +.wp-block-tag-cloud { + + &.aligncenter { + text-align: center; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_style.scss new file mode 100644 index 0000000000..dcf88acddb --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_style.scss @@ -0,0 +1,7 @@ +.wp-block-tag-cloud { + + &.alignfull { + padding-left: var(--global--spacing-unit); + padding-right: var(--global--spacing-unit); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss new file mode 100644 index 0000000000..3d963ca193 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss @@ -0,0 +1,143 @@ +/** +* Editor Post Title +* - Needs a special styles +*/ + +// Post title style +.wp-block.editor-post-title__block { + 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); + + .editor-post-title__input { + 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); + } +} + +// Editor UI font styles +.wp-block.block-editor-default-block-appender > textarea { + font-family: var(--global--font-secondary); + font-size: var(--global--font-size-md); +} + +// Gutenberg text color options + +.has-primary-color[class] { + color: var(--global--color-primary); +} + +.has-secondary-color[class] { + color: var(--global--color-secondary); +} + +// Gutenberg background-color options +.has-background { + + &:not(.has-background-background-color) a:not(.wp-block-button__link), + p, + h1, + h2, + h3, + h4, + h5, + h6 { + color: currentColor; + } +} + +.has-primary-background-color[class] { + background-color: var(--global--color-primary); + color: var(--global--color-background); +} + +.has-secondary-background-color[class] { + background-color: var(--global--color-secondary); + color: var(--global--color-background); +} + +.has-white-background-color[class] { + background-color: var(--global--color-white); + color: var(--global--color-secondary); +} + +.has-black-background-color[class] { + background-color: var(--global--color-black); + color: var(--global--color-primary); +} + +/** + * 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 */ +.wp-block { + + // Gutenberg injects a rule that limits the max width of .wp-block to 580px + // This line overrides it to use the responsive spacing rules for default width content + max-width: var(--responsive--aligndefault-width); + + // Use the theme's max-width for wide alignment. + &[data-align="wide"], + &.alignwide { + max-width: var(--responsive--alignwide-width); + } + + &[data-align="full"], + &.alignfull { + max-width: none; + } +} + +.alignleft { + margin: 0; + margin-right: var(--global--spacing-horizontal); +} + +.alignright { + margin: 0; + margin-left: var(--global--spacing-horizontal); +} + +// Drop cap +.has-drop-cap:not(:focus)::first-letter { + 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: 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: var(--global--spacing-horizontal); + } + + .wp-block[data-align="right"] > * { + max-width: 290px; + margin-left: var(--global--spacing-horizontal); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_font-sizes.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_font-sizes.scss new file mode 100644 index 0000000000..26f9739bb7 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_font-sizes.scss @@ -0,0 +1,53 @@ +// Gutenberg Font-size utility classes +:root { + + .is-extra-small-text, + .has-extra-small-font-size { + font-size: var(--global--font-size-xs); + } + + .is-small-text, + .has-small-font-size { + font-size: var(--global--font-size-sm); + } + + .is-regular-text, + .has-regular-font-size, + .is-normal-font-size, + .has-normal-font-size, + .has-medium-font-size { + font-size: var(--global--font-size-base); + } + + .is-large-text, + .has-large-font-size { + font-size: var(--global--font-size-lg); + line-height: var(--global--line-height-heading); + } + + .is-larger-text, + .has-larger-font-size, + .is-extra-large-text, + .has-extra-large-font-size { + font-size: var(--global--font-size-xl); + line-height: var(--global--line-height-heading); + } + + .is-huge-text, + .has-huge-font-size { + font-size: var(--global--font-size-xxl); + line-height: var(--global--line-height-heading); + + // This size is meant to mimic the page titles, so the font weight is reduced to match. + font-weight: var(--heading--font-weight-page-title); + } + + .is-gigantic-text, + .has-gigantic-font-size { + font-size: var(--global--font-size-xxxl); + line-height: var(--global--line-height-heading); + + // This size is meant to mimic the page titles, so the font weight is reduced to match. + font-weight: var(--heading--font-weight-page-title); + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss new file mode 100644 index 0000000000..07d06d2e23 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss @@ -0,0 +1,160 @@ +/* Block Alignments */ + +/** + * These selectors set the default max width for content appearing inside a post or page. + */ +.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) { + @extend %responsive-aligndefault-width; +} + +/** + * .alignleft + */ +.alignleft { + + /*rtl:ignore*/ + text-align: left; + + margin-top: 0; +} + +// Targeting the .entry-content class is necessary to ensure these styles +// only apply when the block isn't nested. +.entry-content > .alignleft { + max-width: var(--responsive--aligndefault-width); + @extend %responsive-alignleft; +} + +@include media(mobile) { + + .alignleft { + + /*rtl:ignore*/ + float: left; + + /*rtl:ignore*/ + margin-right: var(--global--spacing-horizontal); + margin-bottom: var(--global--spacing-vertical); + } + + .entry-content > .alignleft { + max-width: calc(50% - var(--responsive--alignleft-margin)); + } +} + +/** + * .aligncenter + */ +.aligncenter { + clear: both; + display: block; + float: none; + margin-right: auto; + margin-left: auto; + text-align: center; +} + +/** + * .alignright + */ +.alignright { + + margin-top: 0; + margin-bottom: var(--global--spacing-vertical); +} + +// Targeting the .entry-content class is necessary to ensure these styles +// only apply when the block isn't nested. +.entry-content > .alignright { + max-width: var(--responsive--aligndefault-width); + @extend %responsive-alignright; +} + +@include media(mobile) { + + .alignright { + + /*rtl:ignore*/ + float: right; + + /*rtl:ignore*/ + margin-left: var(--global--spacing-horizontal); + } + + .entry-content > .alignright { + max-width: calc(50% - var(--responsive--alignright-margin)); + } +} + +// Make sure siblings of floated elements are top-aligned when nested +[class*="inner-container"] > .alignleft + *, +[class*="inner-container"] > .alignright + * { + margin-top: 0; +} + +/** + * .alignwide + */ +.alignwide { + clear: both; + @extend %responsive-alignwide-width; +} + +.alignwide [class*="inner-container"] > .alignwide { + @extend %responsive-alignwide-width-nested; +} + +/** + * .alignfull + */ +.alignfull { + clear: both; + @extend %responsive-alignfull-width-mobile; + @extend %responsive-alignfull-width; +} + +.alignfull [class*="inner-container"] > .alignwide { + @extend %responsive-alignwide-width-nested; +} + +// Content alignment +.has-left-content { + justify-content: flex-start; +} + +.has-right-content { + justify-content: flex-end; +} + +// Parallax +.has-parallax { + background-attachment: fixed; +} + +// Drop caps +.has-drop-cap:not(:focus)::first-letter { + 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: calc(1.2 * var(--heading--font-size-h1)); +} + +.has-drop-cap:not(:focus)::after { + content: ""; + display: table; + clear: both; + padding-top: 14px; +} + +.desktop-only { + display: none; + + @include media(mobile) { + display: block; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_editor.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_editor.scss new file mode 100644 index 0000000000..fa449963ba --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_editor.scss @@ -0,0 +1,4 @@ +pre.wp-block-verse { + padding: 0; + color: currentColor; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_style.scss new file mode 100644 index 0000000000..264173bf3d --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_style.scss @@ -0,0 +1,3 @@ +.wp-block-verse { + font-family: var(--entry-content--font-family); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/05-blocks/video/_style.scss b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/video/_style.scss new file mode 100644 index 0000000000..6a4a38978e --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/05-blocks/video/_style.scss @@ -0,0 +1,16 @@ +.wp-block-video { + + figcaption { + 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; + } +} + +* > figure > video { + max-width: unset; + width: 100%; + vertical-align: middle; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/404.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/404.scss new file mode 100644 index 0000000000..d8309eb7e9 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/404.scss @@ -0,0 +1,4 @@ +.error404 main p { + font-size: var(--global--font-size-lg); + margin-bottom: calc(var(--global--spacing-vertical) * 1.6666666667); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/archives.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/archives.scss new file mode 100644 index 0000000000..d1b1a52204 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/archives.scss @@ -0,0 +1,68 @@ +.page-title { + font-size: var(--global--font-size-page-title); +} + +h1.page-title, +h2.page-title { + font-weight: var(--heading--font-weight-page-title); +} + +h1.page-title { + line-height: var(--heading--line-height-h1); +} + +.page-header { + border-bottom: 3px solid var(--global--color-border); + padding-bottom: calc(2 * var(--global--spacing-vertical)); +} + +.archive, +.search, +.blog { + + .content-area { + + .format-aside, + .format-status, + .format-link { + + .entry-content { + font-size: var(--global--font-size-lg); + } + } + + } + + .format-image, + .format-gallery, + .format-video { + + .entry-content { + margin-top: calc(2 * var(--global--spacing-vertical)); + } + } + + .entry-footer { + + .cat-links, + .tags-links { + display: block; + } + } + + &.logged-in { + + .entry-footer { + + .posted-on { + margin-right: calc(0.5 * var(--global--spacing-unit)); + } + } + } +} + +.archive-description { + margin-top: var(--global--spacing-vertical); + font-size: var(--global--font-size-xl); + line-height: var(--global--line-height-heading); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/comments.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/comments.scss new file mode 100644 index 0000000000..cb8a99d309 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/comments.scss @@ -0,0 +1,292 @@ +/** + * Comments Wrapper + */ +.comments-area { + + > * { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + } + + &.show-avatars { + + .avatar { + border-radius: 50%; + position: absolute; + top: 10px; + } + + .fn { + display: inline-block; + padding-left: 85px; + } + + .comment-metadata { + padding: 8px 0 9px 85px; + } + + } +} + +/** + * Comment Title + */ + +.comments-title, +.comment-reply-title { + font-size: var(--heading--font-size-h2); + letter-spacing: var(--heading--letter-spacing-h2); +} + +.comment-reply-title { + display: flex; + justify-content: space-between; + + small { + + a { + font-family: var(--global--font-secondary); + font-size: var(--global--font-size-xs); + font-style: normal; + font-weight: normal; + letter-spacing: normal; + } + } +} + +/* Nested comment reply title*/ +.comment .comment-respond .comment-reply-title { + font-size: var(--global--font-size-lg); +} + +/** + * Comment Lists + */ +.comment-list { + padding-left: 0; + list-style: none; + + > li { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } + +} + +.comment-list .children { + list-style: none; + padding-left: 0; + + > li { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } + +} + +.comment-list .depth-2, +.comment-list .depth-3 { + @include media(mobile) { + padding-left: calc(4 * var(--global--spacing-horizontal)); + } +} + +/** + * Comment Meta + */ +.comment-meta { + + .comment-author { + line-height: var(--global--line-height-heading); + margin-bottom: calc(0.25 * var(--global--spacing-unit)); + + @include media(mobile) { + margin-bottom: 0; + padding-right: 0; + } + + .fn { + font-family: var(--global--font-secondary); + font-weight: normal; + font-size: var(--global--font-size-lg); + hyphens: auto; + word-wrap: break-word; + word-break: break-word; + } + + } + + .comment-metadata { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + padding: 8px 0 9px 0; + + .edit-link { + margin-left: var(--global--spacing-horizontal); + } + + } + + @include media(mobile) { + margin-right: inherit; + + .comment-author { + max-width: inherit; + } + } +} + +.reply { + font-size: var(--global--font-size-sm); + line-height: var(--global--line-height-heading); +} + +.bypostauthor { + display: block; +} + +.says { + display: none; +} + +.pingback .url, +.trackback .url { + font-family: var(--global--font-primary); +} + +// Comment body +.comment-body { + position: relative; + margin-bottom: calc(1.7 * var(--global--spacing-vertical)); + + > * { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + } + + .reply { + margin: 0; + } +} + +.comment-content a { + word-wrap: break-word; +} + +// Pingbacks & Trackbacks +.pingback .comment-body, +.trackback .comment-body { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); +} + +.comment-respond { + margin-top: var(--global--spacing-vertical); +} + +.comment-respond > * { + margin-top: var(--global--spacing-unit); + margin-bottom: var(--global--spacing-unit); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + + &.comment-form { + margin-bottom: var(--global--spacing-vertical); + } + } +} + +.comment-author { + padding-top: 3px; + + .url { + color: currentColor; + } +} + +.comment-form { + display: flex; + flex-wrap: wrap; + + > * { + flex-basis: 100%; + } + + .comment-notes { + font-size: var(--global--font-size-sm); + } + + .comment-form-url, + .comment-form-comment { + width: 100%; + } + + .comment-form-author, + .comment-form-email { + flex-basis: 0; + flex-grow: 1; + + @include media(mobile-only) { + flex-basis: 100%; + } + } + + .comment-form-cookies-consent > label, + .comment-notes { + font-size: var(--global--font-size-xs); + font-weight: normal; + } +} + +.comment-form > p { + margin-bottom: var(--global--spacing-unit); + + &:first-of-type { + margin-top: 0; + } + + &:last-of-type { + margin-bottom: 0; + } + + label, + input[type="email"], + input[type="text"], + input[type="url"], + textarea { + display: block; + font-size: var(--global--font-size-sm); + margin-bottom: calc(.5 * var(--global--spacing-unit)); + width: 100%; + font-weight: var(--form--label-weight); + } + + &.comment-form-cookies-consent { + display: flex; + } + + @include media(mobile) { + + &.comment-form-author { + margin-right: calc(1.5 * var(--global--spacing-horizontal)); + } + + &.comment-notes, + &.logged-in-as { + display: block; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss new file mode 100644 index 0000000000..099df49a61 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/editor.scss @@ -0,0 +1,44 @@ +html { + font-family: var(--global--font-secondary); + line-height: var(--global--line-height-body); +} + +body { + --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; +} + +// Links styles +.wp-block a { + color: var(--wp--style--color--link, var(--global--color-primary)); + + &:hover { + text-decoration-style: dotted; + } + + &:focus { + outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); + text-decoration: none; + } +} + +// 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) { + // Target both current level and nested block. + .has-link-color a, + &.has-link-color a { + color: var(--wp--style--color--link, var(--global--color-primary)); + } +} + +button, +a { + cursor: pointer; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/entry.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/entry.scss new file mode 100644 index 0000000000..b30c9ac809 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/entry.scss @@ -0,0 +1,214 @@ +.entry-title { + + 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; + + a { + color: var(--entry-header--color-link); + text-underline-offset: 0.15em; + + &:hover { + color: var(--entry-header--color-hover); + } + + &:focus { + color: var(--entry-header--color-focus); + } + + &:active { + color: var(--entry-header--color-link); + } + } +} + +.singular .entry-title { + font-size: var(--global--font-size-page-title); +} + +h1.entry-title { + line-height: var(--heading--line-height-h1); + font-weight: var(--heading--font-weight-page-title); +} + +/** + * Entry Content + */ + +.entry-content, +.entry-summary { + font-family: var(--entry-content--font-family); +} + +.entry-content { + + p { + word-wrap: break-word; + } + + // Overwrite iframe embeds that have inline styles. + > iframe[style] { + + margin: var(--global--spacing-vertical) 0 !important; + max-width: 100% !important; + + @include media(mobile) { + max-width: var(--global--spacing-vertical) !important; + } + } + + // Classic editor audio embeds. + .wp-audio-shortcode { + @extend %responsive-aligndefault-width; + } +} + +.entry-footer { + + color: var(--global--color-primary); + clear: both; + float: none; + font-size: var(--global--font-size-xs); + display: block; + + > span { + display: inline-block; + } + + a { + color: currentColor; + + &:hover, + &:focus { + color: var(--global--color-primary-hover); + } + + &:active { + color: currentColor; + } + } +} + +// Extra specificity to override rules in _vertical-margins.scss +.site-main > article > .entry-footer { + 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: var(--separator--height) solid transparent; +} + +.single .site-main > article > .entry-footer { + margin-top: calc(3.4 * var(--global--spacing-vertical)); + margin-bottom: calc(3.4 * var(--global--spacing-vertical)); + padding-bottom: 0; + 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: calc(2 * var(--global--spacing-horizontal)); + + .post-taxonomies, + .full-size-link { + justify-content: flex-end; + text-align: right; + } + + .full-size-link:first-child:last-child { + grid-column: span 2; + } + + .posted-on, + .byline, + .cat-links, + .tags-links { + display: block; + } + + @include media(mobile-only) { + display: block; + + .full-size-link { + display: block; + } + + .post-taxonomies, + .full-size-link { + text-align: left; + } + } +} + +/** + * Post Thumbnails + */ + +.post-thumbnail { + @extend %responsive-aligndefault-width; + text-align: center; + + .entry-header &, + .singular & { + @extend %responsive-alignwide-width-nested; + } + + .wp-post-image { + display: block; + width: auto; + max-width: 100%; + margin-left: auto; + margin-right: auto; + margin-top: calc(2 * var(--global--spacing-vertical)); + } +} + +/** + * Author + */ + +.author-bio { + position: relative; + font-size: var(--global--font-size-xs); + max-width: var(--responsive--aligndefault-width); + + .site-main > article > & { + margin-top: calc(2 * var(--global--spacing-vertical)); + } + + // Avatars are optional and can be turned off. + &.show-avatars { + + .avatar { + display: inline-block; + vertical-align: top; + border-radius: 50%; + } + + .author-bio-content { + display: inline-block; + padding-left: var(--global--spacing-horizontal); + max-width: calc(var(--responsive--aligndefault-width) - 90px); + } + } + + .author-bio-content { + + .author-title { + font-family: var(--entry-author-bio--font-family); + font-size: var(--entry-author-bio--font-size); + display: inline; + } + + .author-description { + 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)); + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss new file mode 100644 index 0000000000..9c05ea1cb7 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/footer-navigation.scss @@ -0,0 +1,65 @@ + +.footer-navigation { + 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 { + display: flex; + justify-content: center; + flex-wrap: wrap; + list-style: none; + padding-left: 0; + + li { + display: inline; + // This is to prevent hover styles from overlapping when the menu wraps. + line-height: 3; + + a { + padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); + transition: transform 0.1s ease; + color: var(--footer--color-link); + + &:link, + &:visited, + &:active { + color: var(--footer--color-link); + } + + &:hover { + text-decoration: underline; + text-decoration-style: dotted; + text-decoration-skip-ink: none; + color: var(--footer--color-link-hover); + } + + &:focus { + + .is-dark-theme & { + + .svg-icon { + fill: var(--wp--style--color--link, var(--global--color-background)); + } + } + } + } + + .svg-icon { + vertical-align: middle; + fill: var(--footer--color-link); + + &:hover { + transform: scale(1.1); + } + } + } + + .sub-menu-toggle, + .menu-item-description { + display: none; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/footer.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/footer.scss new file mode 100644 index 0000000000..85f85a3a29 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/footer.scss @@ -0,0 +1,62 @@ +// Footer +.site-footer { + padding-top: 0; + padding-bottom: calc(1.7 * var(--global--spacing-vertical)); + @extend %responsive-alignwide-width; + + // Increase the top vertical spacing when there is no widget area. + .no-widgets & { + margin-top: calc(6 * var(--global--spacing-vertical)); + } +} + +// Footer Branding +.site-footer > .site-info { + 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-name { + text-transform: var(--branding--title--text-transform); + font-size: var(--branding--title--font-size); + } + + .powered-by { + margin-top: calc(0.5 * var(--global--spacing-vertical)); + } + + @include media(desktop) { + display: flex; + align-items: center; + + .powered-by { + margin-top: initial; + margin-left: auto; + } + } + + a { + color: var(--footer--color-link); + + &:link, + &:visited, + &:active { + color: var(--footer--color-link); + } + + &:hover { + color: var(--footer--color-link-hover); + } + + &:focus { + color: var(--footer--color-link-hover); + + .is-dark-theme & { + color: var(--wp--style--color--link, var(--global--color-background)); + } + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss new file mode 100644 index 0000000000..bea7994e9d --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/header.scss @@ -0,0 +1,207 @@ +// Site header +.site-header { + @extend %responsive-alignwide-width; + display: flex; + align-items: flex-start; + flex-wrap: wrap; + row-gap: var(--global--spacing-vertical); // Add space in case the menu wraps below the site branding. + + .wp-custom-logo & { + align-items: center; + } + + @include media(mobile) { + padding-top: calc(var(--global--spacing-vertical) / 0.75); // 40px + } + + @include media(desktop) { + padding-top: calc(2.4 * var(--global--spacing-vertical)); // 60px + } +} + +// Site branding +.site-branding { + color: var(--branding--color-text); + margin-right: 140px; + + &:last-child { + margin-right: 0; + width: 100%; + text-align: center; + } + + @include media(mobile) { + margin-right: initial; + margin-top: 4px; // Align the baseline of the site title with the primary menu + } +} + +// Site title +.site-title { + + 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: var(--branding--title--text-transform); + line-height: var(--global--line-height-heading); + margin-bottom: calc(var(--global--spacing-vertical) / 6); + + a { + color: currentColor; + font-weight: var(--branding--title--font-weight); + + &:link, + &:visited, + &:active { + color: currentColor; + } + + &:hover, + &:focus { + color: var(--branding--color-link-hover); + } + + } + + @include media(mobile) { + font-size: var(--branding--title--font-size); + } +} + +// Site description +.site-description { + color: currentColor; + font-family: var(--branding--description--font-family); + font-size: var(--branding--description--font-size); + line-height: 1.4; +} + +a.custom-logo-link { + text-decoration: none; +} + +.site-title > a { + text-decoration-color: var(--global--color-secondary); +} + +// Site logo + +.site-logo { + + margin: calc(var(--global--spacing-vertical) / 2) 0; + + .site-header > & { + width: 100%; + padding-bottom: calc(var(--global--spacing-vertical) * 1.5); + border-bottom: 1px solid; + text-align: center; + } + + .custom-logo { + margin-left: auto; + margin-right: auto; + max-width: var(--branding--logo--max-width-mobile); + max-height: var(--branding--logo--max-height-mobile); + height: auto; + display: inline-block; + width: auto; + } + + @include media(mobile) { + + .custom-logo { + max-width: var(--branding--logo--max-width); + max-height: var(--branding--logo--max-height); + height: auto; + width: auto; + } + } +} + +@include media(mobile-only) { + + .site-header { + + &.has-logo { + + &:not(.has-title-and-tagline) { + + &.has-menu { + + .site-logo { + position: absolute; + padding-top: calc(0.5 * var(--global--spacing-vertical)); + margin-top: 0; + top: var(--global--admin-bar--height); + + .primary-navigation-open & { + display: none; + } + + img { + max-height: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit)) + 1.7em); + } + } + } + } + + &.has-title-and-tagline { + align-items: flex-start; + + &.has-menu { + justify-content: space-between; + + .site-branding { + max-width: calc(100% - 160px); + } + } + + .site-branding { + margin-right: 0; + } + + body:not(.primary-navigation-open) & { + + &:after { + display: none; + } + + .primary-navigation { + position: relative; + top: 0; + } + + .menu-button-container { + position: relative; + padding-top: 0; + margin-top: calc(0px - var(--button--padding-vertical) + (0.25 * var(--global--spacing-unit))); + + #primary-mobile-menu { + // The 4.5px here is to offset the icon size horizontallly + // (the icon's width is larger than the path's width and has extra space on the sides). + 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); + } + } + } + } + } + + &:not(.has-logo) { + + &.has-title-and-tagline { + + .site-branding { + margin-right: 0; + max-width: calc(100% - 160px); + } + } + } + + &:not(.has-menu) { + justify-content: center; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss new file mode 100644 index 0000000000..777cd97e1e --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/navigation.scss @@ -0,0 +1,532 @@ + +// Navigation + +// Mobile menu toggles +.menu-button-container { + display: none; + justify-content: space-between; + position: absolute; + right: 0; + padding-top: calc(0.5 * var(--global--spacing-vertical)); + padding-bottom: calc(0.25 * var(--global--spacing-vertical)); + + #primary-mobile-menu { + margin-left: auto; + padding: calc(var(--button--padding-vertical) - (0.25 * var(--global--spacing-unit))) calc(0.5 * var(--button--padding-horizontal)); + } + + @include media(mobile-only) { + display: flex; + } + + // Override specificty from default button styles. + .button.button { + display: flex; + font-size: var(--primary-nav--font-size-button); + font-weight: var(--primary-nav--font-weight-button); + background-color: transparent; + border: none; + color: var(--primary-nav--color-link); + + .dropdown-icon { + display: flex; + align-items: center; + + .svg-icon { + margin-left: calc(0.25 * var(--global--spacing-unit)); + } + + // Menu icon is off-center vertically to prevent blurry pixels. + &.open .svg-icon { + position: relative; + top: -1px; + } + + &.close { + display: none; + } + } + + &[aria-expanded*="true"] { + + .dropdown-icon { + + &.open { + display: none; + } + + &.close { + display: flex; + + .has-logo.has-title-and-tagline & { + animation-name: twentytwentyone-close-button-transition; + animation-duration: 0.3s; + } + } + } + } + } + + // When the menu is open, hide the close button and show the hide button. + .primary-navigation-open & { + width: 100%; + z-index: 500; + background-color: var(--global--color-background); + + #primary-mobile-menu { + position: static; + } + } +} + +.primary-navigation { + position: absolute; + top: var(--global--admin-bar--height); + right: 0; + color: var(--primary-nav--color-text); + font-size: var(--primary-nav--font-size); + line-height: 1.15; + margin-top: 0; + margin-bottom: 0; + + // Mobile menu closed + > .primary-menu-container { + position: fixed; + visibility: hidden; + opacity: 0; + top: 0; + right: 0; + bottom: 0; + left: 0; + // Height of the menu-button-container using font size, line height, and total padding, plus 5px so the focus of the first item is visible. + 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 .15s ease-in-out; + transform: translateY(var(--global--spacing-vertical)); + + @include media(mobile-only) { + height: 100vh; + z-index: 499; + overflow-x: hidden; + overflow-y: auto; + border: 2px solid transparent; + + .has-logo.has-title-and-tagline & { + position: fixed; + transform: translateY(0) translateX(100%); + } + + .admin-bar .has-logo.has-title-and-tagline & { + top: var(--global--admin-bar--height); + } + + .admin-bar & { + height: calc(100vh - var(--global--admin-bar--height)); + } + + &:focus { + border: 2px solid var(--global--color-primary); + } + } + } + + // Mobile menu open + .primary-navigation-open & { + + @include media(mobile-only) { + width: 100%; + position: fixed; + z-index: 2; // To be greater than the cover block and embeds. + } + + > .primary-menu-container { + position: absolute; + visibility: visible; + opacity: 1; + transform: translateY(0); + } + } + + .primary-navigation-open .has-logo.has-title-and-tagline & { + @include media(mobile-only) { + + > .primary-menu-container { + transform: translateX(0) translateY(0); + } + } + } + + @include media(mobile) { + position: relative; + margin-left: auto; + + // Hide Mobile menu on desktop + > .primary-menu-container { + visibility: visible; + opacity: 1; + position: relative; + padding: 0; + background-color: transparent; + overflow: initial; + transform: none; + } + + // Hide mobile menu toggle + #toggle-menu { + display: none; + } + + // Hide sub-sub-menus + > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul { + display: none; + } + + // Don't adjust position when logged-in + .admin-bar & { + top: initial; + + > .primary-menu-container { + top: initial; + } + } + } + + // Menu list wrapper + > div > .menu-wrapper { + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + list-style: none; + margin: 0; + max-width: none; + padding-left: 0; + position: relative; + + @include media(mobile-only) { + padding-bottom: 100px; + + ul { + padding-left: 0; + } + } + + li { + display: block; + position: relative; + width: 100%; + + @include media(mobile) { + margin: 0; + width: inherit; + + &:last-child() { + margin-right: 0; + } + } + } + + // Sub-menu buttons + .sub-menu-toggle { + display: flex; + height: calc(2 * var(--primary-nav--padding) + 1.15em + 1px); + width: 44px; + padding: 0; + justify-content: center; + align-items: center; + background: transparent; + color: currentColor; + border: none; + + &:focus { + outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); + } + + @include media(mobile-only) { + display: none; + } + + .icon-plus, + .icon-minus { + height: 100%; + display: flex; + align-items: center; + + svg { + margin-top: -1px; + } + } + + .icon-minus { + display: none; + } + + // When the sub-menu is open, display the minus icon + &[aria-expanded="true"] { + + .icon-minus { + display: flex; + } + + .icon-plus { + display: none; + } + } + } + + // Sub-menus Flyout + > li > .sub-menu { + + position: relative; + + @include media(mobile) { + left: 0; + margin: 0; + min-width: max-content; + position: absolute; + top: 100%; + padding-top: 3px; + transition: all 0.5s ease; + z-index: 88888; + + &:before, + &:after { + content: ""; + display: block; + position: absolute; + width: 0; + top: -10px; + left: var(--global--spacing-horizontal); + border-style: solid; + border-color: var(--primary-nav--border-color) transparent; + border-width: 0 7px 10px 7px; + } + + &:after { + top: -9px; + border-color: var(--global--color-background) transparent; + } + + li { + background: var(--global--color-background); + } + + &.submenu-reposition-left { + + /* rtl:ignore */ + left: 0; + + /* rtl:ignore */ + right: auto; + + &:before, + &:after { + + /* rtl:ignore */ + left: var(--global--spacing-horizontal); + + /* rtl:ignore */ + right: auto; + } + } + + &.submenu-reposition-right { + + /* rtl:ignore */ + right: 0; + + /* rtl:ignore */ + left: auto; + + &:before, + &:after { + + /* rtl:ignore */ + left: auto; + + /* rtl:ignore */ + right: var(--global--spacing-horizontal); + } + } + } + } + } + + // Top-level Item Link Colors + .primary-menu > .menu-item:hover > a { + color: var(--primary-nav--color-link-hover); + } + + .primary-menu-container { + @include media(mobile) { + // Better align with the site title when the menu wraps. + margin-right: calc(0px - var(--primary-nav--padding)); + margin-left: calc(0px - var(--primary-nav--padding)); + + // Top-level Menu Item + > ul > .menu-item { + display: flex; + + > a { + padding-left: var(--primary-nav--padding); + padding-right: var(--primary-nav--padding); + + + .sub-menu-toggle { + margin-left: calc(0px - var(--primary-nav--padding)); + } + } + } + } + } + + // Menu Item Link + a { + display: block; + 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; + + @include media(mobile) { + display: block; + font-family: var(--primary-nav--font-family); + font-size: var(--primary-nav--font-size); + font-weight: var(--primary-nav--font-weight); + } + + + svg { + fill: var(--primary-nav--color-text); + } + + &:hover, + &:link, + &:visited { + color: var(--primary-nav--color-link-hover); + } + + &:hover { + text-decoration: underline; + text-decoration-style: dotted; + } + + &:focus { + position: relative; + z-index: 99999; // Ensure focus styles appear above absolute positioned elements + outline-offset: 0; + } + } + + .current-menu-item > a:first-child, + .current_page_item > a:first-child { + text-decoration: underline; + text-decoration-style: solid; + + &:hover { + text-decoration: underline; + text-decoration-style: dotted; + } + } + + // Sub-menu depth indicators + text styles + .sub-menu { + margin: 0; + padding: 0; + list-style: none; + margin-left: var(--primary-nav--padding); + border: 1px solid var(--primary-nav--border-color); + + .sub-menu { + border: none; + } + + // Sub-menu items om wide screens. + @include media(mobile) { + + // For nested sub-menus, don't duplicate the padding + > .menu-item > .sub-menu { + padding: 0; + } + } + + .menu-item { + + @include media(mobile-only) { + + &:last-child() { + margin-bottom: 0; + } + + } + + > a { + padding: calc(1.25 * var(--primary-nav--padding)) var(--primary-nav--padding); + display: block; + font-size: var(--primary-nav--font-size-sub-menu-mobile); + font-style: var(--primary-nav--font-style-sub-menu-mobile); + + @include media(mobile) { + font-size: var(--primary-nav--font-size-sub-menu); + font-style: var(--primary-nav--font-style); + } + } + } + } + + // Show top-level sub-menu indicators above mobile-breakpoint-only + .menu-item-has-children { + + > .svg-icon { + display: none; + } + + @include media(mobile) { + + > .svg-icon { + display: inline-block; + height: 100%; + } + + .sub-menu .svg-icon { + display: none; + } + } + + } + + .menu-item-description { + display: block; + clear: both; + font-size: var(--global--font-size-xs); + text-transform: none; + line-height: 1.7; + + > span { + display: inline-block; + } + } +} + +// Keep the menu pinned to the top when the menu is open. +@include media(mobile-only) { + + .lock-scrolling .site { + position: fixed; + max-width: 100%; + width: 100%; + } +} + +// Close button animation for when a custom logo is present. +@keyframes twentytwentyone-close-button-transition { + + from { + opacity: 0; + } + + to { + opacity: 1; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss new file mode 100644 index 0000000000..e3bcf54029 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/pagination.scss @@ -0,0 +1,231 @@ +/* Next/Previous navigation */ + +// All navigation +.navigation { + color: var(--global--color-primary); + + a { + color: var(--global--color-primary); + text-decoration: none; + + &:hover { + color: var(--global--color-primary-hover); + text-decoration: underline; + } + + &:focus { + color: var(--global--color-secondary); + } + + &:active { + color: var(--global--color-primary); + } + } + + .nav-links { + + > * { + min-width: 44px; + min-height: 44px; + } + + .nav-next a, + .nav-previous a { + display: flex; + flex-direction: column; + } + + .dots { + text-align: center; + } + + @include media(tablet) { + display: flex; + justify-content: center; + flex-wrap: wrap; + + .nav-next, + .nav-previous { + flex: 0 1 auto; + margin-bottom: inherit; + margin-top: inherit; + max-width: calc(50% - (0.5 * var(--global--spacing-unit))); + } + + .nav-next { + text-align: right; + } + } + } + + .svg-icon { + display: inline-block; + fill: currentColor; + vertical-align: middle; + position: relative; + } + + .nav-previous .svg-icon, + .prev .svg-icon { + top: -2px; + margin-right: calc(0.25 * var(--global--spacing-unit)); + } + + .nav-next .svg-icon, + .next .svg-icon { + top: -1px; + margin-left: calc(0.25 * var(--global--spacing-unit)); + } +} + +// Singular navigation +.post-navigation { + + margin: var(--global--spacing-vertical) auto; + + @include media(desktop) { + margin: var(--global--spacing-vertical) auto; + } + + @extend %responsive-alignwide-width; + + .meta-nav { + line-height: var(--global--line-height-body); + color: var(--global--color-primary); + } + + .post-title { + display: inline-block; + 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); + @include media(desktop) { + margin: 5px calc(24px + (0.25 * var(--global--spacing-unit))) 0; + } + } + + .nav-links { + @include media(mobile) { + justify-content: space-between; + } + } + + .nav-next, + .nav-previous { + margin-top: var(--global--spacing-vertical); + margin-bottom: var(--global--spacing-vertical); + + &:first-child { + margin-top: 0; + } + + &:last-child { + margin-bottom: 0; + } + + &:hover { + + .post-title { + text-decoration: underline; + text-decoration-thickness: 1px; + } + } + } + +} + +// Index/archive navigation +.pagination, +.comments-pagination { + + border-top: 3px solid var(--global--color-border); + padding-top: var(--global--spacing-vertical); + margin: var(--global--spacing-vertical) auto; + + @include media(desktop) { + margin: var(--global--spacing-vertical) auto; + } + + @extend %responsive-alignwide-width; + + // Resets the top margin added to the .nav-links items below. + .nav-links { + margin-top: calc(-1 * var(--global--spacing-vertical)); + + a:hover { + color: var(--pagination--color-link-hover); + } + + } + + .nav-links > * { + 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)); + + &.current { + border-bottom: 1px solid var(--pagination--color-text); + } + + &:first-child { + margin-left: 0; + } + + &:last-child { + margin-right: 0; + } + + &.next { + margin-left: auto; + } + + &.prev { + margin-right: auto; + } + } + + @include media(desktop-only) { + + .nav-links { + display: flex; + flex-wrap: wrap; + } + + .page-numbers { + display: none; + + &.prev, + &.next { + display: inline-block; + flex: 0 1 auto; + } + } + } + + @include media(mobile-only) { + + .nav-short { + display: none; + } + } +} + +// Comments pagination +.comments-pagination { + padding-top: calc(0.66 * var(--global--spacing-vertical)); + margin: calc(3 * var(--global--spacing-vertical)) auto; + + @include media(desktop) { + margin: calc(3 * var(--global--spacing-vertical)) auto calc(4 * var(--global--spacing-vertical)) auto; + } + + .nav-links > * { + font-size: var(--global--font-size-md); + } + +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/posts-and-pages.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/posts-and-pages.scss new file mode 100644 index 0000000000..a6f2876718 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/posts-and-pages.scss @@ -0,0 +1,24 @@ +.sticky { + // This class is required to pass ThemeCheck. +} + +.no-results.not-found > *:first-child { + margin-bottom: calc(3 * var(--global--spacing-vertical)); +} + +// Styling for wp_link_pages. +.page-links { + clear: both; + + .post-page-numbers { + display: inline-block; + margin-left: calc(0.66 * var(--global--spacing-unit)); + margin-right: calc(0.66 * var(--global--spacing-unit)); + min-width: 44px; + min-height: 44px; + + &:first-child { + margin-left: 0; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/search.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/search.scss new file mode 100644 index 0000000000..a4ccf52f02 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/search.scss @@ -0,0 +1,3 @@ +.search-no-results .page-content { + margin-top: calc(3 * var(--global--spacing-vertical)); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/single.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/single.scss new file mode 100644 index 0000000000..239aa85608 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/single.scss @@ -0,0 +1,17 @@ +.singular .entry-header { + 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 { + border-bottom: none; + padding-bottom: 0; + margin-bottom: 0; +} + +.singular .has-post-thumbnail .entry-header { + border-bottom: none; + padding-bottom: calc(1.3 * var(--global--spacing-vertical)); + margin-bottom: 0; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss b/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss new file mode 100644 index 0000000000..bbaf6acda5 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/06-components/widgets.scss @@ -0,0 +1,129 @@ +.widget-area { + @extend %responsive-alignwide-width; + 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); + + @include media(laptop) { + display: grid; + grid-template-columns: repeat(2, 1fr); + column-gap: calc(2 * var(--global--spacing-horizontal)); + } + + @include media(wide) { + grid-template-columns: repeat(3, 1fr); + } + + ul { + list-style-type: none; + padding: 0; + + li { + line-height: var(--widget--line-height-list); + } + + &.sub-menu, + &.children { + margin-left: var(--widget--spacing-menu); + } + + .sub-menu-toggle { + display: none; + } + } + + a { + color: var(--footer--color-link); + text-decoration: underline; + text-decoration-style: solid; + text-decoration-color: currentColor; + + &:link, + &:visited, + &:active { + color: var(--footer--color-link); + } + + &:hover { + color: var(--footer--color-link-hover); + text-decoration-style: dotted; + } + } + + .wp-block-social-links { + + &.alignright { + margin-top: var(--global--spacing-vertical); + justify-content: flex-end; + } + + &.alignleft { + margin-top: var(--global--spacing-vertical); + } + } + + &:after { + content: ""; + display: table; + clear: both; + } +} + +.widget-title { + font-size: var(--global--font-size-sm); + font-weight: var(--widget--font-weight-title); + line-height: var(--widget--line-height-title); +} + +// Search widget styles +.search-form { + display: flex; + flex-wrap: wrap; + margin: auto; + max-width: var(--responsive--aligndefault-width); + + > label { + width: 100%; + margin-bottom: 0; + font-weight: var(--form--label-weight); + } + + .search-field { + flex-grow: 1; + max-width: inherit; + margin-top: calc(var(--global--spacing-vertical) / 3); + margin-right: calc(0.66 * var(--global--spacing-horizontal)); + } + + .search-submit { + margin-top: calc(var(--global--spacing-vertical) / 3); + margin-left: 10px; + } +} + +.widget_search > .search-form { + + .search-field { + margin-right: calc(-1 * var(--button--border-width)); + -webkit-appearance: none; + margin-bottom: calc(0.5 * var(--global--spacing-vertical)); + } + + .search-submit { + margin-left: 0; + background-color: transparent; + color: var(--button--color-text-hover); + margin-bottom: calc(0.5 * var(--global--spacing-vertical)); + + &:hover { + background-color: var(--button--color-background); + color: var(--button--color-text); + } + } +} + +.widget_rss a.rsswidget .rss-widget-icon { + display: none; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss new file mode 100644 index 0000000000..6c56a19f89 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/a11y.scss @@ -0,0 +1,48 @@ +.screen-reader-text { + border: 0; + clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); + clip-path: inset(50%); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute !important; + width: 1px; + word-wrap: normal !important; + word-break: normal; +} + +.skip-link:focus { + background-color: #f1f1f1; + border-radius: 3px; + box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); + clip: auto !important; + -webkit-clip-path: none; + clip-path: none; + color: #21759b; + display: block; + font-size: 0.875rem; + font-weight: 700; + height: auto; + left: 5px; + line-height: normal; + padding: 15px 23px 14px; + text-decoration: none; + top: 5px; + width: auto; + z-index: 100000; +} + +/* Do not show the outline on the skip link target. */ +#content[tabindex="-1"]:focus { + outline: 0; +} + +@media (prefers-reduced-motion) { + + * { + transition-delay: 0s !important; + transition-duration: 0s !important; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss new file mode 100644 index 0000000000..fecac08472 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/color-palette.scss @@ -0,0 +1,148 @@ +// Gutenberg text color options + +.has-black-color[class] { + color: var(--global--color-black); +} + +.has-gray-color[class] { + color: var(--global--color-gray); +} + +.has-dark-gray-color[class] { + color: var(--global--color-dark-gray); +} + +.has-green-color[class] { + color: var(--global--color-green); +} + +.has-blue-color[class] { + color: var(--global--color-blue); +} + +.has-purple-color[class] { + color: var(--global--color-purple); +} + +.has-red-color[class] { + color: var(--global--color-red); +} + +.has-orange-color[class] { + color: var(--global--color-orange); +} + +.has-yellow-color[class] { + color: var(--global--color-yellow); +} + +.has-white-color[class] { + color: var(--global--color-white); +} + +// Gutenberg background-color options +.has-background { + + &:not(.has-background-background-color) a:not(.wp-block-button__link), + p, + h1, + h2, + h3, + h4, + h5, + h6 { + color: currentColor; + } +} + +.has-black-background-color[class] { + background-color: var(--global--color-black); +} + +.has-gray-background-color[class] { + background-color: var(--global--color-gray); +} + +.has-dark-gray-background-color[class] { + background-color: var(--global--color-dark-gray); +} + +.has-green-background-color[class] { + background-color: var(--global--color-green); +} + +.has-blue-background-color[class] { + background-color: var(--global--color-blue); +} + +.has-purple-background-color[class] { + background-color: var(--global--color-purple); +} + +.has-red-background-color[class] { + background-color: var(--global--color-red); +} + +.has-orange-background-color[class] { + background-color: var(--global--color-orange); +} + +.has-yellow-background-color[class] { + background-color: var(--global--color-yellow); +} + +.has-white-background-color[class] { + background-color: var(--global--color-white); +} + +:not(.has-text-color) { + + &.has-black-background-color[class], + &.has-gray-background-color[class], + &.has-dark-gray-background-color[class] { + color: var(--global--color-white); + } + + &.has-green-background-color[class], + &.has-blue-background-color[class], + &.has-purple-background-color[class], + &.has-red-background-color[class], + &.has-orange-background-color[class], + &.has-yellow-background-color[class], + &.has-white-background-color[class] { + color: var(--global--color-dark-gray); + } +} + +// Custom gradients +.has-purple-to-yellow-gradient-background { + background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-yellow)); +} + +.has-yellow-to-purple-gradient-background { + background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-purple)); +} + +.has-green-to-yellow-gradient-background { + background: linear-gradient(160deg, var(--global--color-green), var(--global--color-yellow)); +} + +.has-yellow-to-green-gradient-background { + background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-green)); +} + +.has-red-to-yellow-gradient-background { + background: linear-gradient(160deg, var(--global--color-red), var(--global--color-yellow)); +} + +.has-yellow-to-red-gradient-background { + background: linear-gradient(160deg, var(--global--color-yellow), var(--global--color-red)); +} + +.has-purple-to-red-gradient-background { + background: linear-gradient(160deg, var(--global--color-purple), var(--global--color-red)); +} + +.has-red-to-purple-gradient-background { + background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple)); +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/ie.scss b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/ie.scss new file mode 100644 index 0000000000..7df9025f21 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/ie.scss @@ -0,0 +1,53 @@ +.is-IE { + + &.is-dark-theme { + color: #fff; + + *, + a, + .site-description, + .entry-title, + .entry-footer, + .widget-area, + .post-navigation .meta-nav, + .footer-navigation-wrapper li a:link, + .site-footer > .site-info, + .site-footer > .site-info a, + .site-footer > .site-info a:visited { + color: #fff; + } + + .sub-menu-toggle svg, + .sub-menu-toggle path, + .post-navigation .meta-nav svg, + .post-navigation .meta-nav path { + fill: #fff; + } + + .primary-navigation > div > .menu-wrapper > li > .sub-menu li { + background: #000; + } + + &.primary-navigation-open { + @include media(mobile-only) { + + .primary-navigation > .primary-menu-container, + .menu-button-container { + background-color: #000; + } + } + } + + .skip-link:focus { + color: #21759b; + } + } + + .navigation .nav-links { + display: block; + } + + .post-thumbnail .wp-post-image { + min-width: auto; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/measure.scss b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/measure.scss new file mode 100644 index 0000000000..38026ed846 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/measure.scss @@ -0,0 +1,22 @@ +// Measure +// - The width of a line of text, in characters, is known as its measure. + +header *, +main *, +footer * { + max-width: var(--global--spacing-measure); +} + +html, +body, +div, +header, +nav, +article, +figure, +hr, +main, +section, +footer { + max-width: none; +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/07-utilities/print.scss b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/print.scss new file mode 100644 index 0000000000..b164156670 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/07-utilities/print.scss @@ -0,0 +1,184 @@ +/* +Adding print support. The print styles are based on the the great work of +Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/. +*/ + +/*-------------------------------------------------------------- +>>> TABLE OF CONTENTS: +---------------------------------------------------------------- +# Margins & paddings +# Typography +# Page breaks +# Links +# Visibility +--------------------------------------------------------------*/ + +@media print { + + /* Margins & paddings */ + + @page { + margin: 2cm; + } + + .entry .entry-header, + .entry, + .single .site-main > article > .entry-footer { + margin-top: 0; + margin-bottom: 0; + } + + .site-footer .site-info { + margin: 0; + } + + .site-header { + padding: 0; + } + + /* Fonts */ + + body { + font: 13pt Georgia, "Times New Roman", Times, serif; // Fallback for browsers without CSS variables support. + font: 13pt var(--global--font-secondary, Georgia, "Times New Roman", Times, serif); + line-height: 1.3; + background: #fff !important; + color: #000; + } + + // Override color settings that changes the text to white. + .has-background-dark * { + color: #000 !important; + } + + h1, + .entry-title, + .singular .entry-title, + .page-title { + font-size: 22pt; + font-weight: bold; + } + + h2, + h3, + h4, + .has-regular-font-size, + .has-large-font-size, + h2.author-title, + p.author-bio, + .comments-title, + .archive-description { + font-size: 14pt; + margin-top: 25px; + } + + .comment-meta, + .comment-meta .comment-author .fn { + font-size: 13pt; + } + + /* Page breaks */ + + a { + page-break-inside: avoid; + } + + blockquote { + page-break-inside: avoid; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + page-break-after: avoid; + page-break-inside: avoid; + } + + img { + page-break-inside: avoid; + page-break-after: avoid; + } + + table, + pre, + figure { + page-break-inside: avoid; + } + + ul, + ol, + dl { + page-break-before: avoid; + } + + /* Links */ + + a:link, + a:visited, + a { + background: transparent; + font-weight: bold; + text-decoration: underline; + text-align: left; + } + + a[href^="http"]:after { + content: " < " attr(href) "> "; + } + + a:after > img { + content: ""; + } + + article a[href^="#"]:after { + content: ""; + } + + a:not(:local-link):after { // stylelint-disable-line selector-pseudo-class-no-unknown + content: " < " attr(href) "> "; + } + + .entry-title a:after { + content: "\a < " attr(href) "> "; + white-space: pre; + font-size: 14pt; + } + + .cat-links a:after, + .tags-links a:after, + .byline a:after, + .comment-metadata a:after, + .wp-block-calendar a:after, + .wp-block-tag-cloud a:after, + .page-links a:after { + content: ""; + } + + /* Visibility */ + .primary-navigation, + .site-title + .primary-navigation, + .footer-navigation, + .entry-footer, + .post-navigation, + .navigation.pagination, + .widget-area, + .edit-link, + .more-link, + .comment-reply, + .reply, + .comment .comment-metadata .edit-link, + .comment-respond, + #dark-mode-toggler { + display: none !important; + } + + .entry .entry-content .wp-block-button .wp-block-button__link, + .entry .entry-content .button, + .entry .entry-content .wp-block-file__button { + color: #000; + background: none; + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss b/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss new file mode 100644 index 0000000000..10ca23a020 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/style-dark-mode.scss @@ -0,0 +1,108 @@ +/* OS dark theme preference */ +@media only screen { + + .is-dark-theme.is-dark-theme { + --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: #ffffff8c; //55% opacity + + .site a:focus, + .site a:focus .meta-nav { + background: #000; + color: #fff; + text-decoration: none; + } + + img { + filter: brightness(.85) contrast(1.1); + } + } + + .respect-color-scheme-preference.is-dark-theme body { + background-color: var(--global--color-background); + } + + #dark-mode-toggler { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--global--font-size-xs); + padding: 0.5em; + min-height: 44px; // A11y requirement for minimum clickable area. + min-width: max-content; + border: 2px solid currentColor; + box-shadow: none; + background: var(--button--color-text); + color: var(--button--color-background); + z-index: 9998; + + .no-js & { + display: none; + } + + .wp-admin & { + display: none; + } + + &.fixed-bottom { + position: fixed; + bottom: 5px; + right: 5px; + transition: bottom 0.5s; + + &.hide:not(:focus) { + bottom: -80px; + } + } + + &.relative { + position: absolute; + height: 44px; + top: calc(2.4 * var(--global--spacing-vertical) - 44px); + right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em); + + .admin-bar & { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px); + + @media only screen and (max-width: 782px) { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px); + } + + @media only screen and (max-width: 481px) { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px); + } + } + + ~ nav { + + body:not(.primary-navigation-open) & { + @media only screen and (max-width: 481px) { + top: calc(44px + 44px); + } + } + } + } + + .primary-navigation-open & { + display: none; + } + + &:hover, + &:focus { + color: var(--button--color-background-active); + border: 2px solid var(--button--color-text-active); + background-color: var(--button--color-text-active); + } + + .is-IE & { + display: none; + } + } +} diff --git a/wp-content/themes/twentytwentyone/assets/sass/style-editor.scss b/wp-content/themes/twentytwentyone/assets/sass/style-editor.scss new file mode 100644 index 0000000000..6106d38ab7 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/style-editor.scss @@ -0,0 +1,21 @@ +/** + * These styles should be loaded by the Block Editor only + */ +@import "01-settings/fonts"; +@import "01-settings/global"; + +@import "02-tools/mixins"; +@import "02-tools/functions"; + +@import "03-generic/breakpoints"; + +@import "04-elements/blockquote"; +@import "04-elements/media"; +@import "04-elements/forms-editor"; +@import "04-elements/links"; + +@import "05-blocks/blocks-editor"; + +@import "06-components/editor"; + +@import "07-utilities/color-palette"; diff --git a/wp-content/themes/twentytwentyone/assets/sass/style.scss b/wp-content/themes/twentytwentyone/assets/sass/style.scss new file mode 100644 index 0000000000..5350a7cc20 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/sass/style.scss @@ -0,0 +1,122 @@ +@import "01-settings/file-header"; + +/** + * SETTINGS + * File-header..........The file header for the themes style.css file. + * Fonts................Any font files, if the project needs specific fonts. + * Global...............Project-specific, globally available variables. + * + * TOOLS + * Functions............Global functions. + * Mixins...............Global mixins. + * + * GENERIC + * Normalize.css........Normalise browser defaults. + * Breakpoints..........Mixins and variables for responsive styles + * Vertical-margins.....Vertical spacing for the main components. + * Reset................Reset specific elements to make them easier to style in other contexts. + * Clearings............Clearnings for the main components. + * + * ELEMENTS + * Blockquote...........Default blockquote. + * Forms................Element-level form styling. + * Headings.............H1–H6 + * Links................Default links. + * Lists................Default lists. + * Media................Images, Figure, Figcaption, Embed, iFrame, Objects, Video. + * + * BLOCKS + * Audio................Specific styles for the audio block. + * Button...............Specific styles for the button block. + * Code.................Specific styles for the code block. + * Collumns.............Specific styles for the collumns block. + * Cover................Specific styles for the cover block. + * File.................Specific styles for the file block. + * Gallery..............Specific styles for the gallery block. + * Group................Specific styles for the group block. + * Heading..............Specific styles for the heading block. + * Image................Specific styles for the image block. + * Latest comments......Specific styles for the latest comments block. + * Latest posts.........Specific styles for the latest posts block. + * Legacy...............Specific styles for the legacy gallery. + * List.................Specific styles for the list block. + * Meda text............Specific styles for the media and text block. + * Navigation...........Specific styles for the navigation block. + * Paragraph............Specific styles for the paragraph block. + * Pullquote............Specific styles for the pullquote block. + * Quote................Specific styles for the quote block. + * Search...............Specific styles for the search block. + * Separator............Specific styles for the separator block. + * Spacer...............Specific styles for the spacer block. + * Table................Specific styles for the table block. + * Verse................Specific styles for the verse block. + * Video................Specific styles for the video block. + * Utilities............Block alignments. + * + * COMPONENTS + * Header...............Header styles. + * Footer...............Footer styles. + * Comments.............Comment styles. + * Archives.............Archive styles. + * 404..................404 styles. + * Search...............Search styles. + * Navigation...........Navigation styles. + * Footer Navigation....Footer Navigation styles. + * Pagination...........Pagination styles. + * Single...............Single page and post styles. + * Posts and pages......Misc, sticky post styles. + * Entry................Entry, author biography. + * Widget...............Widget styles. + * Editor...............Editor styles. + * + * UTILITIES + * A11y.................Screen reader text, prefers reduced motion etc. + * Color Palette........Classes for the color palette colors. + * Editor Font Sizes....Editor Font Sizes. + * Measure..............The width of a line of text, in characters. + */ +// Print................Print styles + +/* Categories 01 to 03 are the basics. */ +@import "01-settings/fonts"; +@import "01-settings/global"; + +@import "02-tools/mixins"; +@import "02-tools/functions"; + +@import "03-generic/normalize"; +@import "03-generic/breakpoints"; +@import "03-generic/vertical-margins"; +@import "03-generic/reset"; +@import "03-generic/clearings"; + +/* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */ +@import "04-elements/blockquote"; +@import "04-elements/forms"; +@import "04-elements/media"; +@import "04-elements/misc"; +@import "04-elements/links"; + +/* Category 05 is all about adjusting the default block styles to the given layout. I only added three blocks as examples. */ +@import "05-blocks/blocks"; + +/* Category 06 contains all "bigger" components which contain elements of the previous two categories like header, footer, page template, single template, comments section, archives, ... */ +@import "06-components/header"; +@import "06-components/footer"; +@import "06-components/single"; +@import "06-components/posts-and-pages"; +@import "06-components/entry"; +@import "06-components/archives"; +@import "06-components/404"; +@import "06-components/search"; +@import "06-components/comments"; +@import "06-components/navigation"; +@import "06-components/footer-navigation"; +@import "06-components/pagination"; +@import "06-components/widgets"; + +/* Category 07 is for any utility classes that are not assigned to a specific component. */ +@import "07-utilities/a11y"; +@import "07-utilities/color-palette"; +@import "07-utilities/measure"; +@import "07-utilities/ie"; diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php index 505d0c954b..89d1b637dd 100644 --- a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php +++ b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php @@ -169,9 +169,9 @@ 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 ) ) { - $classes[] = 'has-background-dark'; + $classes[] = 'is-dark-theme'; } else { - $classes[] = 'has-background-light'; + $classes[] = 'is-light-theme'; } if ( 'ffffff' === strtolower( $background_color ) ) { diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php index 056c3d96f7..fda1e6e094 100644 --- a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php +++ b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-customize.php @@ -108,7 +108,7 @@ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) { array( 'type' => 'radio', 'section' => 'excerpt_settings', - 'label' => esc_html__( 'On archive pages, posts show:', 'twentytwentyone' ), + 'label' => esc_html__( 'On Archive Pages, posts show:', 'twentytwentyone' ), 'choices' => array( 'excerpt' => esc_html__( 'Summary', 'twentytwentyone' ), 'full' => esc_html__( 'Full text', 'twentytwentyone' ), @@ -140,7 +140,7 @@ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) { $wp_customize, 'background_color', array( - 'label' => esc_html__( 'Background Control', 'twentytwentyone' ), + 'label' => esc_html_x( 'Background Color', 'Customizer control', 'twentytwentyone' ), 'section' => 'colors', 'palette' => $colors, ) diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php index 1a32fe4cfe..959c80dd6f 100644 --- a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php +++ b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php @@ -1,6 +1,6 @@ 127 ) { - // Add dark mode variable overrides. + // Add Dark Mode variable overrides. wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', - 'html.is-dark-mode .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); }' ); } wp_enqueue_script( @@ -98,12 +101,11 @@ class Twenty_Twenty_One_Dark_Mode { if ( ! $this->switch_should_render() ) { return; } - wp_enqueue_style( - 'tt1-dark-mode', - get_template_directory_uri() . '/assets/css/style-dark-mode.css', - array( 'twenty-twenty-one-style' ), - '1.0.0' - ); + $url = get_template_directory_uri() . '/assets/css/style-dark-mode.css'; + if ( is_rtl() ) { + $url = get_template_directory_uri() . '/assets/css/style-dark-mode-rtl.css'; + } + wp_enqueue_style( 'tt1-dark-mode', $url, array( 'twenty-twenty-one-style' ), wp_get_theme()->get( 'Version' ) ); // @phpstan-ignore-line. Version is always a string. } /** @@ -126,14 +128,6 @@ class Twenty_Twenty_One_Dark_Mode { '1.0.0', true ); - - wp_localize_script( - 'twentytwentyone-customize-controls', - 'backgroundColorNotice', - array( - 'message' => esc_html__( 'Changes will only be visible if Dark Mode is "Off" in the preview', 'twentytwentyone' ), - ) - ); } /** @@ -148,6 +142,13 @@ class Twenty_Twenty_One_Dark_Mode { * @return void */ public function customizer_controls( $wp_customize ) { + + $colors_section = $wp_customize->get_section( 'colors' ); + if ( is_object( $colors_section ) ) { + $colors_section->title = __( 'Colors & Dark Mode', 'twentytwentyone' ); + $colors_section->description = __( 'To access the Dark Mode settings, select a light background color.', 'twentytwentyone' ) . '
' . __( 'Learn more about Dark Mode.', 'twentytwentyone' ) . ''; + } + $wp_customize->add_setting( 'respect_user_color_preference', array( @@ -164,8 +165,8 @@ class Twenty_Twenty_One_Dark_Mode { array( 'type' => 'checkbox', 'section' => 'colors', - 'label' => esc_html__( 'Respect visitor\'s device dark mode settings', 'twentytwentyone' ), - '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.', 'twentytwentyone' ), + 'label' => esc_html__( 'Dark Mode Support', 'twentytwentyone' ), + 'description' => __( 'Respect visitor\'s device dark mode settings.
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.

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' ), 'active_callback' => function( $value ) { return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) ); }, @@ -328,7 +329,7 @@ class Twenty_Twenty_One_Dark_Mode { .components-editor-notices__pinned ~ .edit-post-visual-editor #dark-mode-toggler { z-index: 20; } - html.is-dark-mode #dark-mode-toggler:not(:hover):not(:focus) { + .is-dark-theme.is-dark-theme #dark-mode-toggler:not(:hover):not(:focus) { color: var(--global--color-primary); } @media only screen and (max-width: 782px) { @@ -386,4 +387,24 @@ class Twenty_Twenty_One_Dark_Mode { $this->the_styles(); wp_die(); } + + /** + * Adds information to the privacy policy. + * + * @access public + * + * @since 1.0.0 + * + * @return void + */ + public function add_privacy_policy_content() { + if ( ! function_exists( 'wp_add_privacy_policy_content' ) ) { + return; + } + $content = '

' . __( 'Twenty Twenty-One uses LocalStorage when Dark Mode support is enabled.', 'twentytwentyone' ) . '

' + . '' . __( 'Suggested Text:', 'twentytwentyone' ) . ' ' + . __( 'This website uses LocalStorage to save the setting when Dark Mode support is turned on or off.
LocalStorage is necessary for the setting to work and is only used when a user clicks on the Dark Mode button.
No data is saved in the database or transferred.', 'twentytwentyone' ); + wp_add_privacy_policy_content( 'Twenty Twenty-One', wp_kses_post( wpautop( $content, false ) ) ); + } + } diff --git a/wp-content/themes/twentytwentyone/comments.php b/wp-content/themes/twentytwentyone/comments.php index a105d6262e..d832fcf487 100644 --- a/wp-content/themes/twentytwentyone/comments.php +++ b/wp-content/themes/twentytwentyone/comments.php @@ -37,7 +37,7 @@ $twenty_twenty_one_comment_count = get_comments_number(); diff --git a/wp-content/themes/twentytwentyone/footer.php b/wp-content/themes/twentytwentyone/footer.php index b77ffa18b4..3c509c8913 100644 --- a/wp-content/themes/twentytwentyone/footer.php +++ b/wp-content/themes/twentytwentyone/footer.php @@ -21,18 +21,18 @@