diff --git a/wp-content/themes/twentytwenty/.stylelintrc.json b/wp-content/themes/twentytwenty/.stylelintrc.json index f88810795c..4db6c0198e 100644 --- a/wp-content/themes/twentytwenty/.stylelintrc.json +++ b/wp-content/themes/twentytwenty/.stylelintrc.json @@ -1,12 +1,12 @@ -{ - "extends": [ - "stylelint-config-wordpress" - ], - "plugins": ["stylelint-a11y"], - "rules": { - "font-family-no-missing-generic-family-keyword": null, - "no-descending-specificity": null, - "a11y/no-outline-none": true, - "a11y/selector-pseudo-class-focus": true - } -} +{ + "extends": [ + "stylelint-config-wordpress" + ], + "plugins": ["stylelint-a11y"], + "rules": { + "font-family-no-missing-generic-family-keyword": null, + "no-descending-specificity": null, + "a11y/no-outline-none": true, + "a11y/selector-pseudo-class-focus": true + } +} diff --git a/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css b/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css index 82f17acc90..2bba8d39dc 100644 --- a/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css +++ b/wp-content/themes/twentytwenty/assets/css/editor-style-block-rtl.css @@ -12,7 +12,6 @@ } .editor-styles-wrapper > * { - color: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 18px; } @@ -26,10 +25,16 @@ } .block-editor-default-block-appender textarea.block-editor-default-block-appender__content { + color: inherit; font-family: inherit; font-size: inherit; } +.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle:not(:hover):not(:focus), +.block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle:not(:hover):not(:focus) { + color: inherit; +} + /* Fonts ------------------------------------- */ @@ -195,7 +200,7 @@ Inter variable font. Usage: /* Typography -------------------------------- */ -.editor-styles-wrapper a { +.editor-styles-wrapper .editor-block-list__layout a { color: #cd2653; text-decoration: underline; } @@ -212,7 +217,6 @@ Inter variable font. Usage: .editor-styles-wrapper .wp-block h4, .editor-styles-wrapper .wp-block h5, .editor-styles-wrapper .wp-block h6 { - color: #000; font-feature-settings: "lnum"; font-variant-numeric: lining-nums; font-weight: 700; @@ -473,13 +477,13 @@ Inter variable font. Usage: border: none; } -.editor-styles-wrapper .wp-block-table caption { +.editor-styles-wrapper .wp-block-table caption { background: #dcd7ca; text-align: center; } -.editor-styles-wrapper .wp-block-table th, -.editor-styles-wrapper .wp-block-table td { +.editor-styles-wrapper .wp-block-table th, +.editor-styles-wrapper .wp-block-table td { line-height: 1.4; margin: 0; overflow: visible; @@ -575,7 +579,6 @@ hr.wp-block-separator.is-style-dots::before { border-color: #cd2653; border-style: solid; border-width: 0 2px 0 0; - color: inherit; margin: 20px 0; padding: 5px 20px 5px 0; } @@ -633,6 +636,10 @@ hr.wp-block-separator.is-style-dots::before { /* Block: Code, Verse and Preformatted ------- */ +.editor-styles-wrapper .wp-block-code { + color: inherit; +} + .editor-styles-wrapper .wp-block-code, .editor-styles-wrapper .wp-block-preformatted pre, .editor-styles-wrapper .wp-block-verse pre { @@ -641,10 +648,12 @@ hr.wp-block-separator.is-style-dots::before { padding: 30px; } +.editor-styles-wrapper .wp-block-freeform.block-library-rich-text__tinymce pre, .editor-styles-wrapper .wp-block-preformatted pre, .editor-styles-wrapper .wp-block-code .block-editor-plain-text, .editor-styles-wrapper .wp-block-verse pre { background: transparent; + color: inherit; font-family: monospace; font-size: 14px; } @@ -938,6 +947,12 @@ hr.wp-block-separator.is-style-dots::before { margin-top: 15px; } +/* Block: Shortcode -------------------------- */ + +.editor-styles-wrapper .wp-block-shortcode textarea { + color: #191e23; +} + /* Block: Embed ------------------------------ */ .editor-styles-wrapper .wp-block-embed { diff --git a/wp-content/themes/twentytwenty/assets/css/editor-style-block.css b/wp-content/themes/twentytwenty/assets/css/editor-style-block.css index 778ae47c8e..57b2e0bbb2 100644 --- a/wp-content/themes/twentytwenty/assets/css/editor-style-block.css +++ b/wp-content/themes/twentytwenty/assets/css/editor-style-block.css @@ -12,7 +12,6 @@ } .editor-styles-wrapper > * { - color: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; font-size: 18px; } @@ -26,10 +25,16 @@ } .block-editor-default-block-appender textarea.block-editor-default-block-appender__content { + color: inherit; font-family: inherit; font-size: inherit; } +.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle:not(:hover):not(:focus), +.block-editor-default-block-appender .block-editor-inserter .block-editor-inserter__toggle:not(:hover):not(:focus) { + color: inherit; +} + /* Fonts ------------------------------------- */ @@ -195,7 +200,7 @@ Inter variable font. Usage: /* Typography -------------------------------- */ -.editor-styles-wrapper a { +.editor-styles-wrapper .editor-block-list__layout a { color: #cd2653; text-decoration: underline; } @@ -212,7 +217,6 @@ Inter variable font. Usage: .editor-styles-wrapper .wp-block h4, .editor-styles-wrapper .wp-block h5, .editor-styles-wrapper .wp-block h6 { - color: #000; font-feature-settings: "lnum"; font-variant-numeric: lining-nums; font-weight: 700; @@ -473,13 +477,13 @@ Inter variable font. Usage: border: none; } -.editor-styles-wrapper .wp-block-table caption { +.editor-styles-wrapper .wp-block-table caption { background: #dcd7ca; text-align: center; } -.editor-styles-wrapper .wp-block-table th, -.editor-styles-wrapper .wp-block-table td { +.editor-styles-wrapper .wp-block-table th, +.editor-styles-wrapper .wp-block-table td { line-height: 1.4; margin: 0; overflow: visible; @@ -575,7 +579,6 @@ hr.wp-block-separator.is-style-dots::before { border-color: #cd2653; border-style: solid; border-width: 0 0 0 2px; - color: inherit; margin: 20px 0; padding: 5px 0 5px 20px; } @@ -633,6 +636,10 @@ hr.wp-block-separator.is-style-dots::before { /* Block: Code, Verse and Preformatted ------- */ +.editor-styles-wrapper .wp-block-code { + color: inherit; +} + .editor-styles-wrapper .wp-block-code, .editor-styles-wrapper .wp-block-preformatted pre, .editor-styles-wrapper .wp-block-verse pre { @@ -641,10 +648,12 @@ hr.wp-block-separator.is-style-dots::before { padding: 30px; } +.editor-styles-wrapper .wp-block-freeform.block-library-rich-text__tinymce pre, .editor-styles-wrapper .wp-block-preformatted pre, .editor-styles-wrapper .wp-block-code .block-editor-plain-text, .editor-styles-wrapper .wp-block-verse pre { background: transparent; + color: inherit; font-family: monospace; font-size: 14px; } @@ -938,6 +947,12 @@ hr.wp-block-separator.is-style-dots::before { margin-top: 15px; } +/* Block: Shortcode -------------------------- */ + +.editor-styles-wrapper .wp-block-shortcode textarea { + color: #191e23; +} + /* Block: Embed ------------------------------ */ .editor-styles-wrapper .wp-block-embed { diff --git a/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-brands-400.woff b/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-brands-400.woff deleted file mode 100644 index 21c2dd3063..0000000000 Binary files a/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-brands-400.woff and /dev/null differ diff --git a/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-brands-400.woff2 b/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-brands-400.woff2 deleted file mode 100644 index 8d8c89e963..0000000000 Binary files a/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-brands-400.woff2 and /dev/null differ diff --git a/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-fallback.woff b/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-fallback.woff deleted file mode 100644 index a7b24e5e20..0000000000 Binary files a/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-fallback.woff and /dev/null differ diff --git a/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-fallback.woff2 b/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-fallback.woff2 deleted file mode 100644 index 3722c518e4..0000000000 Binary files a/wp-content/themes/twentytwenty/assets/fonts/font-awesome/fa-fallback.woff2 and /dev/null differ diff --git a/wp-content/themes/twentytwenty/assets/fonts/inter/Inter-italic.var.woff2 b/wp-content/themes/twentytwenty/assets/fonts/inter/Inter-italic-var.woff2 similarity index 100% rename from wp-content/themes/twentytwenty/assets/fonts/inter/Inter-italic.var.woff2 rename to wp-content/themes/twentytwenty/assets/fonts/inter/Inter-italic-var.woff2 diff --git a/wp-content/themes/twentytwenty/assets/fonts/inter/Inter-upright.var.woff2 b/wp-content/themes/twentytwenty/assets/fonts/inter/Inter-upright-var.woff2 similarity index 100% rename from wp-content/themes/twentytwenty/assets/fonts/inter/Inter-upright.var.woff2 rename to wp-content/themes/twentytwenty/assets/fonts/inter/Inter-upright-var.woff2 diff --git a/wp-content/themes/twentytwenty/assets/images/2020-landscape-1.png b/wp-content/themes/twentytwenty/assets/images/2020-landscape-1.png new file mode 100644 index 0000000000..ab55b91be8 Binary files /dev/null and b/wp-content/themes/twentytwenty/assets/images/2020-landscape-1.png differ diff --git a/wp-content/themes/twentytwenty/assets/images/2020-landscape-2.png b/wp-content/themes/twentytwenty/assets/images/2020-landscape-2.png new file mode 100644 index 0000000000..844d377ea5 Binary files /dev/null and b/wp-content/themes/twentytwenty/assets/images/2020-landscape-2.png differ diff --git a/wp-content/themes/twentytwenty/assets/images/2020-square-1.png b/wp-content/themes/twentytwenty/assets/images/2020-square-1.png new file mode 100644 index 0000000000..3acd76be53 Binary files /dev/null and b/wp-content/themes/twentytwenty/assets/images/2020-square-1.png differ diff --git a/wp-content/themes/twentytwenty/assets/images/2020-square-2.png b/wp-content/themes/twentytwenty/assets/images/2020-square-2.png new file mode 100644 index 0000000000..e1ab8f8013 Binary files /dev/null and b/wp-content/themes/twentytwenty/assets/images/2020-square-2.png differ diff --git a/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-1.png b/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-1.png new file mode 100644 index 0000000000..d02d9176f0 Binary files /dev/null and b/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-1.png differ diff --git a/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-2.png b/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-2.png new file mode 100644 index 0000000000..6b1dd1abe3 Binary files /dev/null and b/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-2.png differ diff --git a/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-3.png b/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-3.png new file mode 100644 index 0000000000..3675b556f8 Binary files /dev/null and b/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-3.png differ diff --git a/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-4.png b/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-4.png new file mode 100644 index 0000000000..aa7c7f0d73 Binary files /dev/null and b/wp-content/themes/twentytwenty/assets/images/2020-three-quarters-4.png differ diff --git a/wp-content/themes/twentytwenty/assets/js/color-calculations.js b/wp-content/themes/twentytwenty/assets/js/color-calculations.js index 8ea6a7f94e..716eb2302f 100644 --- a/wp-content/themes/twentytwenty/assets/js/color-calculations.js +++ b/wp-content/themes/twentytwenty/assets/js/color-calculations.js @@ -35,19 +35,33 @@ function _twentyTwentyColor( backgroundColor, accentHue ) { */ _twentyTwentyColor.prototype.setAccentColorsArray = function() { var self = this, - minSaturation = 55, - maxSaturation = 90, - minLightness = 25, - maxLighness = 75, - stepSaturation = 2.5, - stepLightness = 2.5, + minSaturation = 65, + maxSaturation = 100, + minLightness = 30, + maxLighness = 80, + stepSaturation = 2, + stepLightness = 2, pushColor = function() { var colorObj = new Color( { h: self.accentHue, s: s, l: l } ), - item; + item, + /** + * Get a score for this color in contrast to its background color and surrounding text. + * + * @since 1.0.0 + * @param {number} contrastBackground - WCAG contrast with the background color. + * @param {number} contrastSurroundingText - WCAG contrast with surrounding text. + * @return {number} - 0 is best, higher numbers have bigger difference with the desired scores. + */ + getScore = function( contrastBackground, contrastSurroundingText ) { + var diffBackground = ( 7 >= contrastBackground ) ? 0 : 7 - contrastBackground, + diffSurroundingText = ( 3 >= contrastSurroundingText ) ? 0 : 3 - contrastSurroundingText; + + return diffBackground + diffSurroundingText; + }; item = { color: colorObj, @@ -62,7 +76,7 @@ _twentyTwentyColor.prototype.setAccentColorsArray = function() { // Get a score for this color by multiplying the 2 contrasts. // We'll use that to sort the array. - item.score = item.contrastBackground * item.contrastText; + item.score = getScore( item.contrastBackground, item.contrastText ); self.accentColorsArray.push( item ); }, @@ -89,7 +103,7 @@ _twentyTwentyColor.prototype.setAccentColorsArray = function() { // Sort colors by contrast. this.accentColorsArray.sort( function( a, b ) { - return b.score - a.score; + return a.score - b.score; } ); return this; }; diff --git a/wp-content/themes/twentytwenty/assets/js/customize-preview.js b/wp-content/themes/twentytwenty/assets/js/customize-preview.js index 414b1d4e77..28b8506769 100644 --- a/wp-content/themes/twentytwenty/assets/js/customize-preview.js +++ b/wp-content/themes/twentytwenty/assets/js/customize-preview.js @@ -94,7 +94,7 @@ api( 'header_footer_background_color', function( value ) { value.bind( function( to ) { // Add background color to header and footer wrappers. - $( '#site-header,#site-footer' ).css( 'background-color', to ); + $( 'body:not(.overlay-header)#site-header, #site-footer' ).css( 'background-color', to ); // Change body classes if this is the same background-color as the content background. if ( to.toLowerCase() === api( 'background_color' ).get().toLowerCase() ) { diff --git a/wp-content/themes/twentytwenty/assets/js/index.js b/wp-content/themes/twentytwenty/assets/js/index.js index f2c68748de..17074ff508 100644 --- a/wp-content/themes/twentytwenty/assets/js/index.js +++ b/wp-content/themes/twentytwenty/assets/js/index.js @@ -231,14 +231,14 @@ twentytwenty.coverModals = { modal.style.removeProperty( 'top' ); } - _win.scrollTo( 0, Math.abs( _win.twentytwenty.scrolled + getAdminBarHeight() ) ); - - _win.twentytwenty.scrolled = 0; - if ( clickedEl !== false ) { clickedEl.focus(); clickedEl = false; } + + _win.scrollTo( 0, Math.abs( _win.twentytwenty.scrolled + getAdminBarHeight() ) ); + + _win.twentytwenty.scrolled = 0; }, 500 ); } ); } ); @@ -621,9 +621,6 @@ twentytwenty.toggles = { _doc.querySelector( '*[data-toggle-target="' + targetString + '"]' ).classList.toggle( activeClass ); } - // Toggle aria-expanded on the target - twentytwentyToggleAttribute( target, 'aria-expanded', 'true', 'false' ); - // Toggle aria-expanded on the toggle twentytwentyToggleAttribute( toggle, 'aria-expanded', 'true', 'false' ); diff --git a/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php b/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php index 2678f7f4f3..d87c3f2636 100644 --- a/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php +++ b/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php @@ -26,12 +26,6 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { $wp_customize->get_setting( 'blogname' )->transport = 'postMessage'; $wp_customize->get_setting( 'blogdescription' )->transport = 'postMessage'; - /** - * Removes the background image section. - * The theme only supports the background color option. - */ - $wp_customize->remove_section( 'background_image' ); - $wp_customize->selective_refresh->add_partial( 'blogname', array( diff --git a/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-page.php b/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-page.php index 51815f7886..e1d74bf5da 100644 --- a/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-page.php +++ b/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-page.php @@ -131,7 +131,7 @@ if ( ! class_exists( 'TwentyTwenty_Walker_Page' ) ) { $toggle_duration = twentytwenty_toggle_duration(); // Add the sub menu toggle. - $args['list_item_after'] .= ''; + $args['list_item_after'] .= ''; } diff --git a/wp-content/themes/twentytwenty/functions.php b/wp-content/themes/twentytwenty/functions.php index 23288c25f7..d255b918b1 100644 --- a/wp-content/themes/twentytwenty/functions.php +++ b/wp-content/themes/twentytwenty/functions.php @@ -602,29 +602,29 @@ function twentytwenty_get_elements_array() { $elements = array( 'content' => array( 'accent' => array( - 'color' => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', '.has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ), + 'color' => array( '.color-accent', '.color-accent-hover:hover', '.color-accent-hover:focus', ':root .has-accent-color', '.has-drop-cap:not(:focus):first-letter', '.wp-block-button.is-style-outline', 'a' ), 'border-color' => array( 'blockquote', '.border-color-accent', '.border-color-accent-hover:hover', '.border-color-accent-hover:focus' ), - 'background' => array( 'button:not(.toggle)', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', '.has-accent-background-color', '.comment-reply-link' ), + 'background' => array( 'button:not(.toggle)', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file .wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', ':root .has-accent-background-color', '.comment-reply-link' ), 'fill' => array( '.fill-children-accent', '.fill-children-accent *' ), ), 'background' => array( - 'color' => array( 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-button__link:active', '.wp-block-button__link:focus', '.wp-block-button__link:visited', '.wp-block-button__link:hover', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.comment-reply-link' ), - 'background' => array( '.has-background-background-color' ), + 'color' => array( ':root .has-background-color', 'button', '.button', '.faux-button', '.wp-block-button__link', '.wp-block-file__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]', '.wp-block-button', '.comment-reply-link' ), + 'background' => array( ':root .has-background-background-color' ), ), 'text' => array( - 'color' => array( 'body', '.entry-title a', '.has-primary-color' ), - 'background' => array( '.has-primary-background-color' ), + 'color' => array( 'body', '.entry-title a', ':root .has-primary-color' ), + 'background' => array( ':root .has-primary-background-color' ), ), 'secondary' => array( - 'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', '.has-secondary-color' ), - 'background' => array( '.has-secondary-background-color' ), + 'color' => array( 'cite', 'figcaption', '.wp-caption-text', '.post-meta', '.entry-content .wp-block-archives li', '.entry-content .wp-block-categories li', '.entry-content .wp-block-latest-posts li', '.wp-block-latest-comments__comment-date', '.wp-block-latest-posts__post-date', '.wp-block-embed figcaption', '.wp-block-image figcaption', '.wp-block-pullquote cite', '.comment-metadata', '.comment-respond .comment-notes', '.comment-respond .logged-in-as', '.pagination .dots', '.entry-content hr:not(.has-background)', 'hr.styled-separator', ':root .has-secondary-color' ), + 'background' => array( ':root .has-secondary-background-color' ), ), 'borders' => array( 'border-color' => array( 'pre', 'fieldset', 'input', 'textarea', 'table', 'table *', 'hr' ), - 'background' => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', '.has-subtle-background-background-color' ), + 'background' => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', ':root .has-subtle-background-background-color' ), 'border-bottom-color' => array( '.wp-block-table.is-style-stripes' ), 'border-top-color' => array( '.wp-block-latest-posts.is-grid li' ), - 'color' => array( '.has-subtle-background-color' ), + 'color' => array( ':root .has-subtle-background-color' ), ), ), 'header-footer' => array( diff --git a/wp-content/themes/twentytwenty/inc/custom-css.php b/wp-content/themes/twentytwenty/inc/custom-css.php index 4bf3be81e7..90c8785efc 100644 --- a/wp-content/themes/twentytwenty/inc/custom-css.php +++ b/wp-content/themes/twentytwenty/inc/custom-css.php @@ -55,10 +55,15 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { function twentytwenty_get_customizer_css( $type = 'front-end' ) { // Get variables. - $body = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'text' ) ); - $body_default = '#000000'; - $accent = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'accent' ) ); - $accent_default = '#cd2653'; + $body = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'text' ) ); + $body_default = '#000000'; + $secondary = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'secondary' ) ); + $secondary_default = '#6d6d6d'; + $borders = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'borders' ) ); + $borders_default = '#dcd7ca'; + $accent = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'accent' ) ); + $accent_default = '#cd2653'; + /** * Filters the CSS selectors targeting button component on frontend to apply common css * @@ -69,8 +74,8 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { $buttons_targets = apply_filters( 'twentytwenty_buttons_targets_front_end', 'button, .button, .faux-button, .wp-block-button__link, .wp-block-file__button, input[type=\'button\'], input[type=\'reset\'], input[type=\'submit\']' ); // Header. - $header_footer_text = sanitize_hex_color( twentytwenty_get_color_for_area( 'header-footer', 'text' ) ); - $header_footer_accent = sanitize_hex_color( twentytwenty_get_color_for_area( 'header-footer', 'accent' ) ); + $header_footer_background = sanitize_hex_color( twentytwenty_get_color_for_area( 'header-footer', 'background' ) ); + $header_footer_background_default = '#ffffff'; // Cover. $cover = sanitize_hex_color( get_theme_mod( 'cover_template_overlay_text_color' ) ); @@ -126,12 +131,9 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { // Colors. // Accent color. if ( $accent && $accent !== $accent_default ) { - twentytwenty_generate_css( '.editor-styles-wrapper a, .editor-styles-wrapper .has-drop-cap:not(:focus):first-letter', 'color', $accent ); - twentytwenty_generate_css( '.editor-styles-wrapper blockquote, .editor-styles-wrapper .wp-block-quote', 'border-color', $accent, '', ' !important' ); - twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-file .wp-block-file__textlink', 'color', $accent ); - twentytwenty_generate_css( $buttons_targets, 'background', $accent ); - twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link', 'border-color', $accent ); - twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link', 'color', $accent ); + twentytwenty_generate_css( '.has-accent-color, .editor-styles-wrapper .editor-block-list__layout a, .editor-styles-wrapper .has-drop-cap:not(:focus)::first-letter, .editor-styles-wrapper .wp-block-button.is-style-outline .wp-block-button__link, .editor-styles-wrapper .wp-block-pullquote::before, .editor-styles-wrapper .wp-block-file .wp-block-file__textlink', 'color', $accent ); + twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-quote', 'border-color', $accent, '' ); + twentytwenty_generate_css( '.has-accent-background-color, .editor-styles-wrapper .wp-block-button__link, .editor-styles-wrapper .wp-block-file__button', 'background-color', $accent ); } // Background color. @@ -139,9 +141,25 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { twentytwenty_generate_css( '.editor-styles-wrapper', 'background', '#' . $background ); } + // Borders color. + if ( $borders && $borders !== $borders_default ) { + twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-code, .editor-styles-wrapper pre, .editor-styles-wrapper .wp-block-preformatted pre, .editor-styles-wrapper .wp-block-verse pre, .editor-styles-wrapper fieldset, .editor-styles-wrapper .wp-block-table, .editor-styles-wrapper .wp-block-table *, .editor-styles-wrapper .wp-block-table.is-style-stripes, .editor-styles-wrapper .wp-block-latest-posts.is-grid li', 'border-color', $borders ); + twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-table caption, .editor-styles-wrapper .wp-block-table.is-style-stripes tbody tr:nth-child(odd)', 'background-color', $borders ); + } + // Text color. if ( $body && $body !== $body_default ) { - twentytwenty_generate_css( 'body .editor-styles-wrapper, body .editor-post-title__block, body .editor-post-title__input, body textarea, .editor-post-title__block .editor-post-title__input', 'color', $body ); + twentytwenty_generate_css( 'body .editor-styles-wrapper, .editor-post-title__block .editor-post-title__input, .editor-post-title__block .editor-post-title__input:focus', 'color', $body ); + } + + // Secondary color. + if ( $secondary && $secondary !== $secondary_default ) { + twentytwenty_generate_css( '.editor-styles-wrapper figcaption, .editor-styles-wrapper cite, .editor-styles-wrapper .wp-block-quote__citation, .editor-styles-wrapper .wp-block-quote cite, .editor-styles-wrapper .wp-block-quote footer, .editor-styles-wrapper .wp-block-pullquote__citation, .editor-styles-wrapper .wp-block-pullquote cite, .editor-styles-wrapper .wp-block-pullquote footer, .editor-styles-wrapper ul.wp-block-archives li, .editor-styles-wrapper ul.wp-block-categories li, .editor-styles-wrapper ul.wp-block-latest-posts li, .editor-styles-wrapper ul.wp-block-categories__list li, .editor-styles-wrapper .wp-block-latest-comments time, .editor-styles-wrapper .wp-block-latest-posts time', 'color', $secondary ); + } + + // Header Footer Background Color. + if ( $header_footer_background && $header_footer_background !== $header_footer_background_default ) { + twentytwenty_generate_css( '.editor-styles-wrapper .wp-block-pullquote::before', 'background-color', $header_footer_background ); } } elseif ( 'classic-editor' === $type ) { diff --git a/wp-content/themes/twentytwenty/inc/starter-content.php b/wp-content/themes/twentytwenty/inc/starter-content.php index a35f62bc6b..e7ace1b200 100644 --- a/wp-content/themes/twentytwenty/inc/starter-content.php +++ b/wp-content/themes/twentytwenty/inc/starter-content.php @@ -21,7 +21,7 @@ function twentytwenty_get_starter_content() { // Define and register starter content to showcase the theme on new sites. $starter_content = array( - 'widgets' => array( + 'widgets' => array( // Place one core-defined widgets in the first footer widget area. 'sidebar-1' => array( 'text_about', @@ -32,11 +32,21 @@ function twentytwenty_get_starter_content() { ), ), + // Create the custom image attachments used as post thumbnails for pages. + 'attachments' => array( + 'image-opening' => array( + 'post_title' => _x( 'The New UMoMA Opens its Doors', 'Theme starter content', 'twentytwenty' ), + 'file' => 'assets/images/2020-landscape-1.png', // URL relative to the template directory. + ), + ), + // Specify the core-defined pages to create and add custom thumbnails to some of them. - 'posts' => array( + 'posts' => array( 'front' => array( 'post_type' => 'page', 'post_title' => __( 'The New UMoMA Opens its Doors', 'twentytwenty' ), + // Use the above featured image with the predefined about page. + 'thumbnail' => '{{image-opening}}', 'post_content' => join( '', array( @@ -49,6 +59,9 @@ function twentytwenty_get_starter_content() { '
', '
', '
', + '', + '
', + '', '', '

' . __( 'Works and Days', 'twentytwenty' ) . '

', '', @@ -61,6 +74,9 @@ function twentytwenty_get_starter_content() { '', '', '
', + '', + '
', + '', '', '

' . __( 'Theatre of Operations', 'twentytwenty' ) . '

', '', @@ -75,6 +91,9 @@ function twentytwenty_get_starter_content() { '', '
', '
', + '', + '
', + '', '', '

' . __( 'The Life I Deserve', 'twentytwenty' ) . '

', '', @@ -87,6 +106,9 @@ function twentytwenty_get_starter_content() { '', '', '
', + '', + '
', + '', '', '

' . __( 'From Signac to Matisse', 'twentytwenty' ) . '

', '', @@ -99,6 +121,9 @@ function twentytwenty_get_starter_content() { '
', '
', '', + '', + '
', + '', '', '
', '

' . __( '”Cyborgs, as the philosopher Donna Haraway established, are not reverent. They do not remember the cosmos.”', 'twentytwenty' ) . '

', @@ -126,6 +151,9 @@ function twentytwenty_get_starter_content() { '
', '
', '', + '', + '', + '', ) ), ), @@ -135,14 +163,14 @@ function twentytwenty_get_starter_content() { ), // Default to a static front page and assign the front and posts pages. - 'options' => array( + 'options' => array( 'show_on_front' => 'page', 'page_on_front' => '{{front}}', 'page_for_posts' => '{{blog}}', ), // Set up nav menus for each of the two areas registered in the theme. - 'nav_menus' => array( + 'nav_menus' => array( // Assign a menu to the "primary" location. 'primary' => array( 'name' => __( 'Primary', 'twentytwenty' ), diff --git a/wp-content/themes/twentytwenty/inc/template-tags.php b/wp-content/themes/twentytwenty/inc/template-tags.php index dee633d7ce..87361acbea 100644 --- a/wp-content/themes/twentytwenty/inc/template-tags.php +++ b/wp-content/themes/twentytwenty/inc/template-tags.php @@ -190,6 +190,9 @@ function twentytwenty_the_post_meta( $post_id = null, $location = 'single-top' ) * @param string $text Anchor text. */ function twentytwenty_edit_post_link( $link, $post_id, $text ) { + if ( is_admin() ) { + return $link; + } $edit_url = get_edit_post_link( $post_id ); @@ -219,7 +222,7 @@ add_filter( 'edit_post_link', 'twentytwenty_edit_post_link', 10, 3 ); /** * Get the post meta. * - * @param int $post_id The iD of the post. + * @param int $post_id The ID of the post. * @param string $location The location where the meta is shown. */ function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' ) { @@ -543,7 +546,7 @@ function twentytwenty_add_sub_toggles_to_main_menu( $args, $item, $depth ) { $toggle_duration = twentytwenty_toggle_duration(); // Add the sub menu toggle. - $args->after .= ''; + $args->after .= ''; } diff --git a/wp-content/themes/twentytwenty/style-rtl.css b/wp-content/themes/twentytwenty/style-rtl.css index 9762a8e48d..d3bac931ba 100644 --- a/wp-content/themes/twentytwenty/style-rtl.css +++ b/wp-content/themes/twentytwenty/style-rtl.css @@ -141,11 +141,6 @@ body { word-wrap: break-word; } -::selection { - background: #000; - color: #fff; -} - #site-content { overflow: hidden; } @@ -1415,6 +1410,8 @@ body:not(.enable-search-modal) .site-logo img { } .toggle-inner { + display: flex; + justify-content: center; height: 2.3rem; position: relative; } @@ -1460,11 +1457,6 @@ body:not(.enable-search-modal) .site-logo img { width: 2.3rem; } -.search-toggle .toggle-text { - right: 0; - text-align: right; -} - /* Navigation Toggle ------------------------- */ .nav-toggle { @@ -1485,11 +1477,6 @@ body:not(.enable-search-modal) .site-logo img { padding-top: 0.8rem; } -.nav-toggle .toggle-text { - left: 0; - text-align: left; -} - /* Primary Menu ---------------------------- */ .primary-menu-wrapper { @@ -2479,26 +2466,26 @@ h2.entry-title { .author-bio { margin-top: 4rem; + display: flex; + flex-wrap: wrap; + align-items: flex-start; } -.hide-avatars .author-bio { - padding-right: 0; +.author-info { + flex: 1; } -.author-bio-inner p:last-child { - margin-bottom: 0; +.hide-avatars img.avatar { + display: none; } .author-bio .avatar { margin-left: 1.5rem; - height: 5rem; width: 5rem; } .author-bio .author-title { - align-items: center; - display: flex; - margin: 0 0 1rem 0; + margin: 0; } .author-bio .author-link { @@ -2576,43 +2563,43 @@ h2.entry-title { /* CUSTOM COLORS */ -.has-accent-color { +:root .has-accent-color { color: #cd2653; } -.has-accent-background-color { +:root .has-accent-background-color { background-color: #cd2653; } -.has-primary-color { +:root .has-primary-color { color: #000; } -.has-primary-background-color { +:root .has-primary-background-color { background-color: #000; } -.has-secondary-color { +:root .has-secondary-color { color: #6d6d6d; } -.has-secondary-background-color { +:root .has-secondary-background-color { background-color: #6d6d6d; } -.has-subtle-background-color { +:root .has-subtle-background-color { color: #dcd7ca; } -.has-subtle-background-background-color { +:root .has-subtle-background-background-color { background-color: #dcd7ca; } -.has-background-color { +:root .has-background-color { color: #f5efe0; } -.has-background-background-color { +:root .has-background-background-color { background-color: #f5efe0; } @@ -2844,14 +2831,22 @@ h2.entry-title { /* Block: Button ----------------------------- */ +.wp-block-button { + margin: 3rem 0; +} + .wp-block-button.is-style-outline { color: #cd2653; } -.wp-block-button.is-style-outline .wp-block-button__link { +.is-style-outline .wp-block-button__link:not(.has-text-color) { color: inherit; } +.is-style-outline .wp-block-button__link { + padding: calc(1.1em - 0.2rem) calc(1.44em - 0.2rem); +} + /* Block: Columns ---------------------------- */ .wp-block-column { @@ -2993,6 +2988,10 @@ figure.wp-block-gallery.alignfull { max-width: none; } +.wp-block-media-text__content > *:first-child { + margin-top: 0; +} + .wp-block-media-text__content > *:last-child { margin-bottom: 0; } @@ -4335,25 +4334,25 @@ a.to-the-top > * { /* BLOCK: COLUMNS */ - .alignfull .wp-block-column > p:not(.has-background-color), + .alignfull:not(.has-background) .wp-block-column > p:not(.has-background-color), .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { max-width: calc(100% - 4rem); margin: auto; } } -@media ( min-width: 600px ) { +@media ( min-width: 600px ) and ( max-width: 781px ) { /* Blocks -------------------------------- */ /* BLOCK: COLUMNS */ - .alignfull .wp-block-column:nth-child(odd) > p:not(.has-background-color), + .alignfull:not(.has-background) .wp-block-column:nth-child(odd) > p:not(.has-background-color), .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { padding-right: 2rem; } - .alignfull .wp-block-column:nth-child(even) > p:not(.has-background-color), + .alignfull:not(.has-background) .wp-block-column:nth-child(even) > p:not(.has-background-color), .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { padding-left: 2rem; } @@ -4762,15 +4761,10 @@ a.to-the-top > * { .author-bio { margin-top: 8rem; min-height: 8rem; - padding-right: 10rem; position: relative; } .author-bio .avatar { - position: absolute; - right: 0; - top: 0; - height: 8rem; width: 8rem; } @@ -5251,12 +5245,16 @@ a.to-the-top > * { /* BLOCK: COLUMNS */ + .wp-block-column { + margin-bottom: 0; + } + .alignfull .wp-block-column:first-child > p, .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { padding-right: 2rem; } - .alignfull .wp-block-column:last-child > p, + .alignfull:not(.has-background) .wp-block-column:last-child > p, .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { padding-left: 2rem; } diff --git a/wp-content/themes/twentytwenty/style.css b/wp-content/themes/twentytwenty/style.css index 75d13eb91a..e6688cafd8 100644 --- a/wp-content/themes/twentytwenty/style.css +++ b/wp-content/themes/twentytwenty/style.css @@ -141,11 +141,6 @@ body { word-wrap: break-word; } -::selection { - background: #000; - color: #fff; -} - #site-content { overflow: hidden; } @@ -1421,6 +1416,8 @@ body:not(.enable-search-modal) .site-logo img { } .toggle-inner { + display: flex; + justify-content: center; height: 2.3rem; position: relative; } @@ -1466,11 +1463,6 @@ body:not(.enable-search-modal) .site-logo img { width: 2.3rem; } -.search-toggle .toggle-text { - left: 0; - text-align: left; -} - /* Navigation Toggle ------------------------- */ .nav-toggle { @@ -1491,11 +1483,6 @@ body:not(.enable-search-modal) .site-logo img { padding-top: 0.8rem; } -.nav-toggle .toggle-text { - right: 0; - text-align: right; -} - /* Primary Menu ---------------------------- */ .primary-menu-wrapper { @@ -2487,26 +2474,26 @@ h2.entry-title { .author-bio { margin-top: 4rem; + display: flex; + flex-wrap: wrap; + align-items: flex-start; } -.hide-avatars .author-bio { - padding-left: 0; +.author-info { + flex: 1; } -.author-bio-inner p:last-child { - margin-bottom: 0; +.hide-avatars img.avatar { + display: none; } .author-bio .avatar { margin-right: 1.5rem; - height: 5rem; width: 5rem; } .author-bio .author-title { - align-items: center; - display: flex; - margin: 0 0 1rem 0; + margin: 0; } .author-bio .author-link { @@ -2584,43 +2571,43 @@ h2.entry-title { /* CUSTOM COLORS */ -.has-accent-color { +:root .has-accent-color { color: #cd2653; } -.has-accent-background-color { +:root .has-accent-background-color { background-color: #cd2653; } -.has-primary-color { +:root .has-primary-color { color: #000; } -.has-primary-background-color { +:root .has-primary-background-color { background-color: #000; } -.has-secondary-color { +:root .has-secondary-color { color: #6d6d6d; } -.has-secondary-background-color { +:root .has-secondary-background-color { background-color: #6d6d6d; } -.has-subtle-background-color { +:root .has-subtle-background-color { color: #dcd7ca; } -.has-subtle-background-background-color { +:root .has-subtle-background-background-color { background-color: #dcd7ca; } -.has-background-color { +:root .has-background-color { color: #f5efe0; } -.has-background-background-color { +:root .has-background-background-color { background-color: #f5efe0; } @@ -2854,14 +2841,22 @@ h2.entry-title { /* Block: Button ----------------------------- */ +.wp-block-button { + margin: 3rem 0; +} + .wp-block-button.is-style-outline { color: #cd2653; } -.wp-block-button.is-style-outline .wp-block-button__link { +.is-style-outline .wp-block-button__link:not(.has-text-color) { color: inherit; } +.is-style-outline .wp-block-button__link { + padding: calc(1.1em - 0.2rem) calc(1.44em - 0.2rem); +} + /* Block: Columns ---------------------------- */ .wp-block-column { @@ -3003,6 +2998,10 @@ figure.wp-block-gallery.alignfull { max-width: none; } +.wp-block-media-text__content > *:first-child { + margin-top: 0; +} + .wp-block-media-text__content > *:last-child { margin-bottom: 0; } @@ -4353,25 +4352,25 @@ a.to-the-top > * { /* BLOCK: COLUMNS */ - .alignfull .wp-block-column > p:not(.has-background-color), + .alignfull:not(.has-background) .wp-block-column > p:not(.has-background-color), .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { max-width: calc(100% - 4rem); margin: auto; } } -@media ( min-width: 600px ) { +@media ( min-width: 600px ) and ( max-width: 781px ) { /* Blocks -------------------------------- */ /* BLOCK: COLUMNS */ - .alignfull .wp-block-column:nth-child(odd) > p:not(.has-background-color), + .alignfull:not(.has-background) .wp-block-column:nth-child(odd) > p:not(.has-background-color), .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { padding-left: 2rem; } - .alignfull .wp-block-column:nth-child(even) > p:not(.has-background-color), + .alignfull:not(.has-background) .wp-block-column:nth-child(even) > p:not(.has-background-color), .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { padding-right: 2rem; } @@ -4788,15 +4787,10 @@ a.to-the-top > * { .author-bio { margin-top: 8rem; min-height: 8rem; - padding-left: 10rem; position: relative; } .author-bio .avatar { - position: absolute; - left: 0; - top: 0; - height: 8rem; width: 8rem; } @@ -5277,12 +5271,16 @@ a.to-the-top > * { /* BLOCK: COLUMNS */ + .wp-block-column { + margin-bottom: 0; + } + .alignfull .wp-block-column:first-child > p, .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { padding-left: 2rem; } - .alignfull .wp-block-column:last-child > p, + .alignfull:not(.has-background) .wp-block-column:last-child > p, .alignfull:not(.has-background) .wp-block-group__inner-container > p:not(.has-background-color) { padding-right: 2rem; } diff --git a/wp-content/themes/twentytwenty/template-parts/entry-author-bio.php b/wp-content/themes/twentytwenty/template-parts/entry-author-bio.php index 28c6dd12ac..2290ee4974 100644 --- a/wp-content/themes/twentytwenty/template-parts/entry-author-bio.php +++ b/wp-content/themes/twentytwenty/template-parts/entry-author-bio.php @@ -9,25 +9,23 @@ if ( (bool) get_the_author_meta( 'description' ) ) : ?>
-

-
- -
- - - -

-

- - -

+ +
+

+ +

+

+ + +

+
diff --git a/wp-content/themes/twentytwenty/template-parts/modal-menu.php b/wp-content/themes/twentytwenty/template-parts/modal-menu.php index c84cceac91..20b962807e 100644 --- a/wp-content/themes/twentytwenty/template-parts/modal-menu.php +++ b/wp-content/themes/twentytwenty/template-parts/modal-menu.php @@ -9,7 +9,7 @@ ?> -