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 8dc320fa60..847ef0b8eb 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 @@ -78,11 +78,6 @@ Inter variable font. Usage: max-width: 610px; } -.wp-block[data-align="wide"] .wp-block, -.wp-block[data-align="full"] .wp-block { - max-width: none; -} - .wp-block[data-align="wide"] .wp-block[data-align="wide"], .wp-block[data-align="full"] .wp-block[data-align="wide"] { max-width: 1200px; @@ -106,14 +101,10 @@ Inter variable font. Usage: } .wp-block[data-align="wide"] { - margin-bottom: 30px; - margin-top: 30px; max-width: 1200px; } .wp-block[data-align="full"] { - margin-bottom: 50px; - margin-top: 50px; max-width: none; } @@ -179,6 +170,30 @@ Inter variable font. Usage: background-color: #cd2653; } +.has-secondary-color { + color: #6d6d6d; +} + +.has-secondary-background-color { + background-color: #6d6d6d; +} + +.has-subtle-background-color { + color: #dcd7ca; +} + +.has-subtle-background-background-color { + background-color: #dcd7ca; +} + +.has-background-color { + color: #6d6d6d; +} + +.has-background-background-color { + background-color: #6d6d6d; +} + /* GENERAL COLORS */ .has-black-background-color { @@ -319,6 +334,7 @@ Inter variable font. Usage: font-size: 0.842em; } +.editor-styles-wrapper p.has-normal-font-size, .editor-styles-wrapper p.has-regular-font-size { font-size: 1em; } @@ -677,15 +693,29 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-cover-image .wp-block-cover__inner-container, .editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container { margin: 0 auto; - max-width: 1200px; width: calc(100% - 40px); } -[data-align="left"] .wp-block-cover, -[data-align="left"] .wp-block-cover-image, -[data-align="right"] .wp-block-cover, -[data-align="right"] .wp-block-cover-image { - max-width: 260px; +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"], +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] { + height: auto; + max-height: none; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover { + text-align: right; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { + text-align: left; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit, +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit { + float: none; + margin-right: 0; + margin-left: 0; + max-width: 100%; } .wp-block-cover-image .wp-block-cover-image-text, @@ -1051,6 +1081,33 @@ hr.wp-block-separator.is-style-dots::before { margin: 0; } + /* BLOCK: COVER */ + + .wp-block[data-type="core/cover"][data-align="left"] [data-block], + .wp-block[data-type="core/cover"][data-align="right"] [data-block] { + margin-top: 0; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit { + float: left; + margin-right: 20px; + max-width: 260px; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit { + float: right; + margin-left: 20px; + max-width: 260px; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-pullquote::before { + margin-left: 0; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-pullquote::before { + margin-right: 0; + } + /* BLOCK: PULL QUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"], @@ -1130,12 +1187,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 21px; } - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 60px; - margin-top: 60px; - } - /* TYPOGRAPHY */ .editor-post-title__block .editor-post-title__input, @@ -1207,10 +1258,17 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: GROUP */ - .editor-styles-wrapper .wp-block-group.has-background { + .editor-styles-wrapper .wp-block:not([data-align="wide"]):not([data-align="full"]) div:not([class*="__inner-container"]) .wp-block-group.has-background, + .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="wide"] .wp-block-group.has-background, + .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="full"] .wp-block-group.has-background { padding: 40px; } + .editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-group.has-background, + .editor-styles-wrapper .wp-block[data-align="full"] .wp-block-group.has-background { + padding: 80px; + } + /* BLOCK: LATEST POSTS */ /* BLOCK: PULLQUOTE */ @@ -1282,27 +1340,12 @@ hr.wp-block-separator.is-style-dots::before { @media ( min-width: 1000px ) { - /* STRUCTURE */ - - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 80px; - margin-top: 80px; - } - /* BLOCK: COLUMNS */ .wp-block-column { font-size: 18px; } - /* BLOCK: GROUP */ - - .wp-block[data-align="wide"] .wp-block-group.has-background, - .wp-block[data-align="full"] .wp-block-group.has-background { - padding: 80px 40px; - } - /* BLOCK: SEPARATOR */ hr.wp-block-separator { @@ -1333,14 +1376,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 18px; } - /* STRUCTURE */ - - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 80px; - margin-top: 80px; - } - /* BLOCK: PULLQUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color, 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 7371be7cbb..6475267258 100644 --- a/wp-content/themes/twentytwenty/assets/css/editor-style-block.css +++ b/wp-content/themes/twentytwenty/assets/css/editor-style-block.css @@ -78,11 +78,6 @@ Inter variable font. Usage: max-width: 610px; } -.wp-block[data-align="wide"] .wp-block, -.wp-block[data-align="full"] .wp-block { - max-width: none; -} - .wp-block[data-align="wide"] .wp-block[data-align="wide"], .wp-block[data-align="full"] .wp-block[data-align="wide"] { max-width: 1200px; @@ -106,14 +101,10 @@ Inter variable font. Usage: } .wp-block[data-align="wide"] { - margin-bottom: 30px; - margin-top: 30px; max-width: 1200px; } .wp-block[data-align="full"] { - margin-bottom: 50px; - margin-top: 50px; max-width: none; } @@ -179,6 +170,30 @@ Inter variable font. Usage: background-color: #cd2653; } +.has-secondary-color { + color: #6d6d6d; +} + +.has-secondary-background-color { + background-color: #6d6d6d; +} + +.has-subtle-background-color { + color: #dcd7ca; +} + +.has-subtle-background-background-color { + background-color: #dcd7ca; +} + +.has-background-color { + color: #6d6d6d; +} + +.has-background-background-color { + background-color: #6d6d6d; +} + /* GENERAL COLORS */ .has-black-background-color { @@ -319,6 +334,7 @@ Inter variable font. Usage: font-size: 0.842em; } +.editor-styles-wrapper p.has-normal-font-size, .editor-styles-wrapper p.has-regular-font-size { font-size: 1em; } @@ -677,15 +693,29 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-cover-image .wp-block-cover__inner-container, .editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container { margin: 0 auto; - max-width: 1200px; width: calc(100% - 40px); } -[data-align="left"] .wp-block-cover, -[data-align="left"] .wp-block-cover-image, -[data-align="right"] .wp-block-cover, -[data-align="right"] .wp-block-cover-image { - max-width: 260px; +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"], +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] { + height: auto; + max-height: none; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-cover { + text-align: left; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-cover { + text-align: right; +} + +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit, +.editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit { + float: none; + margin-left: 0; + margin-right: 0; + max-width: 100%; } .wp-block-cover-image .wp-block-cover-image-text, @@ -1051,6 +1081,33 @@ hr.wp-block-separator.is-style-dots::before { margin: 0; } + /* BLOCK: COVER */ + + .wp-block[data-type="core/cover"][data-align="left"] [data-block], + .wp-block[data-type="core/cover"][data-align="right"] [data-block] { + margin-top: 0; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .block-editor-block-list__block-edit { + float: right; + margin-left: 20px; + max-width: 260px; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .block-editor-block-list__block-edit { + float: left; + margin-right: 20px; + max-width: 260px; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="right"] .wp-block-pullquote::before { + margin-right: 0; + } + + .editor-styles-wrapper .wp-block[data-type="core/cover"][data-align="left"] .wp-block-pullquote::before { + margin-left: 0; + } + /* BLOCK: PULL QUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"], @@ -1130,12 +1187,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 21px; } - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 60px; - margin-top: 60px; - } - /* TYPOGRAPHY */ .editor-post-title__block .editor-post-title__input, @@ -1207,10 +1258,17 @@ hr.wp-block-separator.is-style-dots::before { /* BLOCK: GROUP */ - .editor-styles-wrapper .wp-block-group.has-background { + .editor-styles-wrapper .wp-block:not([data-align="wide"]):not([data-align="full"]) div:not([class*="__inner-container"]) .wp-block-group.has-background, + .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="wide"] .wp-block-group.has-background, + .editor-styles-wrapper .wp-block div[class*="__inner-container"] .wp-block[data-align="full"] .wp-block-group.has-background { padding: 40px; } + .editor-styles-wrapper .wp-block[data-align="wide"] .wp-block-group.has-background, + .editor-styles-wrapper .wp-block[data-align="full"] .wp-block-group.has-background { + padding: 80px; + } + /* BLOCK: LATEST POSTS */ /* BLOCK: PULLQUOTE */ @@ -1282,27 +1340,12 @@ hr.wp-block-separator.is-style-dots::before { @media ( min-width: 1000px ) { - /* STRUCTURE */ - - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 80px; - margin-top: 80px; - } - /* BLOCK: COLUMNS */ .wp-block-column { font-size: 18px; } - /* BLOCK: GROUP */ - - .wp-block[data-align="wide"] .wp-block-group.has-background, - .wp-block[data-align="full"] .wp-block-group.has-background { - padding: 80px 40px; - } - /* BLOCK: SEPARATOR */ hr.wp-block-separator { @@ -1333,14 +1376,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 18px; } - /* STRUCTURE */ - - .wp-block[data-align="wide"], - .wp-block[data-align="full"] { - margin-bottom: 80px; - margin-top: 80px; - } - /* BLOCK: PULLQUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="wide"] .wp-block-pullquote.is-style-solid-color, diff --git a/wp-content/themes/twentytwenty/assets/js/customize-controls.js b/wp-content/themes/twentytwenty/assets/js/customize-controls.js index f5e8af9dfa..f3d94a4597 100644 --- a/wp-content/themes/twentytwenty/assets/js/customize-controls.js +++ b/wp-content/themes/twentytwenty/assets/js/customize-controls.js @@ -1,4 +1,4 @@ -/* global twentyTwentyBgColors, twentyTwentyColor, Color, jQuery, wp, _ */ +/* global twentyTwentyBgColors, twentyTwentyColor, jQuery, wp, _ */ /** * Customizer enhancements for a better user experience. * @@ -74,11 +74,11 @@ .toCSS(); // Get secondary color. - value[ context ].secondary = Color( { - h: colors.bgColorObj.h(), - s: colors.bgColorObj.s() / 2, - l: ( colors.textColorObj.l() * 0.57 ) + ( colors.bgColorObj.l() * 0.43 ) - } ).toCSS(); + value[ context ].secondary = colors.bgColorObj + .clone() + .getReadableContrastingColor( colors.bgColorObj ) + .s( colors.bgColorObj.s() / 2 ) + .toCSS(); } // Change the value. diff --git a/wp-content/themes/twentytwenty/assets/js/index.js b/wp-content/themes/twentytwenty/assets/js/index.js index f0597e2c79..60b007ccef 100644 --- a/wp-content/themes/twentytwenty/assets/js/index.js +++ b/wp-content/themes/twentytwenty/assets/js/index.js @@ -30,10 +30,11 @@ if ( ! Element.prototype.closest ) { if ( window.NodeList && ! NodeList.prototype.forEach ) { NodeList.prototype.forEach = function( callback, thisArg ) { var i; + var len = this.length; thisArg = thisArg || window; - for ( i = 0; i < this.length; i++ ) { + for ( i = 0; i < len; i++ ) { callback.call( thisArg, this[ i ], i, this ); } }; @@ -68,6 +69,21 @@ if ( ! Element.prototype.matches ) { }; } +// Add a class to the body for when touch is enabled for browsers that don't support media queries +// for interaction media features. Adapted from +( function() { + var matchMedia = function() { + // Include the 'heartz' as a way to have a non matching MQ to help terminate the join. See . + var prefixes = [ '-webkit-', '-moz-', '-o-', '-ms-' ]; + var query = [ '(', prefixes.join( 'touch-enabled),(' ), 'heartz', ')' ].join( '' ); + return window.matchMedia && window.matchMedia( query ).matches; + }; + + if ( ( 'ontouchstart' in window ) || ( window.DocumentTouch && document instanceof window.DocumentTouch ) || matchMedia() ) { + document.body.classList.add( 'touch-enabled' ); + } +}() ); + /* ----------------------------------------------------------------------------------------------- Cover Modals --------------------------------------------------------------------------------------------------- */ @@ -523,37 +539,6 @@ twentytwenty.primaryMenu = { self = self.parentElement; } } - - /** - * Toggles `focus` class to allow submenu access on tablets. - */ - ( function( menuObj ) { - var touchStartFn, j, - parentLink = menuObj.querySelectorAll( '.primary-menu .menu-item-has-children > a' ); - - if ( 'ontouchstart' in window ) { - touchStartFn = function( e ) { - var menuItem = this.parentNode; - - if ( ! menuItem.classList.contains( 'focus' ) ) { - e.preventDefault(); - for ( j = 0; j < menuItem.parentNode.children.length; ++j ) { - if ( menuItem === menuItem.parentNode.children[j] ) { - continue; - } - menuItem.parentNode.children[i].classList.remove( 'focus' ); - } - menuItem.classList.add( 'focus' ); - } else { - menuItem.classList.remove( 'focus' ); - } - }; - - for ( j = 0; j < parentLink.length; ++j ) { - parentLink[j].addEventListener( 'touchstart', touchStartFn, false ); - } - } - }( menu ) ); } }; // twentytwenty.primaryMenu diff --git a/wp-content/themes/twentytwenty/footer.php b/wp-content/themes/twentytwenty/footer.php index eb00a1fd30..5db6505819 100644 --- a/wp-content/themes/twentytwenty/footer.php +++ b/wp-content/themes/twentytwenty/footer.php @@ -26,7 +26,7 @@ ); ?> -

+

diff --git a/wp-content/themes/twentytwenty/functions.php b/wp-content/themes/twentytwenty/functions.php index ad1a3f614c..70a5c0202a 100644 --- a/wp-content/themes/twentytwenty/functions.php +++ b/wp-content/themes/twentytwenty/functions.php @@ -19,9 +19,9 @@ * Custom Logo * WP Body Open * Register Sidebars - * Enqueue block editor assets - * Enqueue classic editor styles - * Block editor settings + * Enqueue Block Editor Assets + * Enqueue Classic Editor Styles + * Block Editor Settings */ /** @@ -119,8 +119,15 @@ function twentytwenty_theme_support() { // Add support for full and wide align images. add_theme_support( 'align-wide' ); - // Adds starter content to highlight the theme on fresh sites. - add_theme_support( 'starter-content', twentytwenty_get_starter_content() ); + /* + * Adds starter content to highlight the theme on fresh sites. + * This is done conditionally to avoid loading the starter content on every + * page load, as it is a one-off operation only needed once in the customizer. + */ + if ( is_customize_preview() ) { + require get_template_directory() . '/inc/starter-content.php'; + add_theme_support( 'starter-content', twentytwenty_get_starter_content() ); + } // Add theme support for selective refresh for widgets. add_theme_support( 'customize-selective-refresh-widgets' ); @@ -167,9 +174,6 @@ require get_template_directory() . '/classes/class-twentytwenty-non-latin-langua // Custom CSS. require get_template_directory() . '/inc/custom-css.php'; -// Custom starter content to highlight the theme on fresh sites. -require get_template_directory() . '/inc/starter-content.php'; - /** * Register and Enqueue Styles. */ @@ -531,7 +535,7 @@ function twentytwenty_block_editor_settings() { 'name' => _x( 'Regular', 'Name of the regular font size in the block editor', 'twentytwenty' ), 'shortName' => _x( 'M', 'Short name of the regular font size in the block editor.', 'twentytwenty' ), 'size' => 21, - 'slug' => 'regular', + 'slug' => 'normal', ), array( 'name' => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ), @@ -692,26 +696,26 @@ function twentytwenty_get_elements_array() { $elements = array( 'content' => array( 'accent' => array( - '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', ':root .has-accent-background-color', '.comment-reply-link' ), - 'fill' => array( '.fill-children-accent', '.fill-children-accent *' ), + '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-color' => 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( ':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' ), + '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', '.has-background.has-primary-background-color:not(.has-text-color)', '.has-background.has-primary-background-color *:not(.has-text-color)', '.has-background.has-accent-background-color:not(.has-text-color)', '.has-background.has-accent-background-color *:not(.has-text-color)' ), + 'background-color' => array( ':root .has-background-background-color' ), ), 'text' => array( - 'color' => array( 'body', '.entry-title a', ':root .has-primary-color' ), - 'background' => array( ':root .has-primary-background-color' ), + 'color' => array( 'body', '.entry-title a', ':root .has-primary-color' ), + 'background-color' => 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', ':root .has-secondary-color' ), - 'background' => array( ':root .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-color' => 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)', ':root .has-subtle-background-background-color' ), + 'background-color' => 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( ':root .has-subtle-background-color' ), @@ -719,16 +723,16 @@ function twentytwenty_get_elements_array() { ), 'header-footer' => array( 'accent' => array( - 'color' => array( 'body:not(.overlay-header) .primary-menu > li > a', 'body:not(.overlay-header) .primary-menu > li > .icon', '.modal-menu a', '.footer-menu a, .footer-widgets a', '#site-footer .wp-block-button.is-style-outline', '.wp-block-pullquote:before', '.singular:not(.overlay-header) .entry-header a', '.archive-header a', '.header-footer-group .color-accent', '.header-footer-group .color-accent-hover:hover' ), - 'background' => array( '.social-icons a', '#site-footer button:not(.toggle)', '#site-footer .button', '#site-footer .faux-button', '#site-footer .wp-block-button__link', '#site-footer .wp-block-file__button', '#site-footer input[type="button"]', '#site-footer input[type="reset"]', '#site-footer input[type="submit"]' ), + 'color' => array( 'body:not(.overlay-header) .primary-menu > li > a', 'body:not(.overlay-header) .primary-menu > li > .icon', '.modal-menu a', '.footer-menu a, .footer-widgets a', '#site-footer .wp-block-button.is-style-outline', '.wp-block-pullquote:before', '.singular:not(.overlay-header) .entry-header a', '.archive-header a', '.header-footer-group .color-accent', '.header-footer-group .color-accent-hover:hover' ), + 'background-color' => array( '.social-icons a', '#site-footer button:not(.toggle)', '#site-footer .button', '#site-footer .faux-button', '#site-footer .wp-block-button__link', '#site-footer .wp-block-file__button', '#site-footer input[type="button"]', '#site-footer input[type="reset"]', '#site-footer input[type="submit"]' ), ), 'background' => array( - 'color' => array( '.social-icons a', 'body:not(.overlay-header) .primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ), - 'background' => array( '#site-header', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ), + 'color' => array( '.social-icons a', 'body:not(.overlay-header) .primary-menu ul', '.header-footer-group button', '.header-footer-group .button', '.header-footer-group .faux-button', '.header-footer-group .wp-block-button:not(.is-style-outline) .wp-block-button__link', '.header-footer-group .wp-block-file__button', '.header-footer-group input[type="button"]', '.header-footer-group input[type="reset"]', '.header-footer-group input[type="submit"]' ), + 'background-color' => array( '#site-header', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal', '.menu-modal-inner', '.search-modal-inner', '.archive-header', '.singular .entry-header', '.singular .featured-media:before', '.wp-block-pullquote:before' ), ), 'text' => array( 'color' => array( '.header-footer-group', 'body:not(.overlay-header) #site-header .toggle', '.menu-modal .toggle' ), - 'background' => array( 'body:not(.overlay-header) .primary-menu ul' ), + 'background-color' => array( 'body:not(.overlay-header) .primary-menu ul' ), 'border-bottom-color' => array( 'body:not(.overlay-header) .primary-menu > li > ul:after' ), 'border-left-color' => array( 'body:not(.overlay-header) .primary-menu ul ul:after' ), ), @@ -736,8 +740,8 @@ function twentytwenty_get_elements_array() { 'color' => array( '.site-description', 'body:not(.overlay-header) .toggle-inner .toggle-text', '.widget .post-date', '.widget .rss-date', '.widget_archive li', '.widget_categories li', '.widget cite', '.widget_pages li', '.widget_meta li', '.widget_nav_menu li', '.powered-by-wordpress', '.to-the-top', '.singular .entry-header .post-meta', '.singular:not(.overlay-header) .entry-header .post-meta a' ), ), 'borders' => array( - 'border-color' => array( '.header-footer-group pre', '.header-footer-group fieldset', '.header-footer-group input', '.header-footer-group textarea', '.header-footer-group table', '.header-footer-group table *', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal nav *', '.footer-widgets-outer-wrapper', '.footer-top' ), - 'background' => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ), + 'border-color' => array( '.header-footer-group pre', '.header-footer-group fieldset', '.header-footer-group input', '.header-footer-group textarea', '.header-footer-group table', '.header-footer-group table *', '.footer-nav-widgets-wrapper', '#site-footer', '.menu-modal nav *', '.footer-widgets-outer-wrapper', '.footer-top' ), + 'background-color' => array( '.header-footer-group table caption', 'body:not(.overlay-header) .header-inner .toggle-wrapper::before' ), ), ), ); diff --git a/wp-content/themes/twentytwenty/inc/custom-css.php b/wp-content/themes/twentytwenty/inc/custom-css.php index d9ce6f9596..a1c560dea4 100644 --- a/wp-content/themes/twentytwenty/inc/custom-css.php +++ b/wp-content/themes/twentytwenty/inc/custom-css.php @@ -129,7 +129,8 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { // Background color. if ( $background && $background !== $background_default ) { - twentytwenty_generate_css( '.editor-styles-wrapper', 'background', '#' . $background ); + twentytwenty_generate_css( '.editor-styles-wrapper', 'background-color', '#' . $background ); + twentytwenty_generate_css( '.has-background.has-primary-background-color:not(.has-text-color),.has-background.has-primary-background-color *:not(.has-text-color),.has-background.has-accent-background-color:not(.has-text-color),.has-background.has-accent-background-color *:not(.has-text-color)', 'color', '#' . $background ); } // Borders color. @@ -164,7 +165,7 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { // Background color. if ( $background && $background !== $background_default ) { - twentytwenty_generate_css( 'body#tinymce.wp-editor.content', 'background', '#' . $background ); + twentytwenty_generate_css( 'body#tinymce.wp-editor.content', 'background-color', '#' . $background ); } // Text color. diff --git a/wp-content/themes/twentytwenty/inc/starter-content.php b/wp-content/themes/twentytwenty/inc/starter-content.php index e7ace1b200..ad1f8c5838 100644 --- a/wp-content/themes/twentytwenty/inc/starter-content.php +++ b/wp-content/themes/twentytwenty/inc/starter-content.php @@ -175,16 +175,20 @@ function twentytwenty_get_starter_content() { 'primary' => array( 'name' => __( 'Primary', 'twentytwenty' ), 'items' => array( + 'link_home', // Note that the core "home" page is actually a link in case a static front page is not used. + 'page_about', + 'page_blog', 'page_contact', ), ), - // Assign a menu to the "expanded" (modal) menu location. + // This replicates primary just to demonstrate the expanded menu. 'expanded' => array( 'name' => __( 'Primary', 'twentytwenty' ), 'items' => array( 'link_home', // Note that the core "home" page is actually a link in case a static front page is not used. 'page_about', 'page_blog', + 'page_contact', ), ), // Assign a menu to the "social" location. diff --git a/wp-content/themes/twentytwenty/print.css b/wp-content/themes/twentytwenty/print.css index 9fd3ebe015..0ab0ce9fb8 100644 --- a/wp-content/themes/twentytwenty/print.css +++ b/wp-content/themes/twentytwenty/print.css @@ -66,6 +66,7 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272 h2.entry-title, h3, h4, + .has-normal-font-size, .has-regular-font-size, .has-large-font-size, .comments-header { diff --git a/wp-content/themes/twentytwenty/style-rtl.css b/wp-content/themes/twentytwenty/style-rtl.css index 28a56b04bf..6e521a6523 100644 --- a/wp-content/themes/twentytwenty/style-rtl.css +++ b/wp-content/themes/twentytwenty/style-rtl.css @@ -180,6 +180,7 @@ path { position: absolute !important; width: 1px; word-wrap: normal !important; + word-break: normal; } .screen-reader-text:focus { @@ -826,6 +827,29 @@ input[type="submit"]:hover { text-decoration: underline; } +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +input[type="range"]: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, +textarea:focus { + border-color: currentColor; +} + +input[type="search"]:focus { + outline: thin dotted; + outline-offset: -4px; +} + /* Tables ------------------------------------ */ table { @@ -1679,6 +1703,38 @@ ul.primary-menu { transform: rotate(-180deg); } +/* + * Enable nav submenu expansion with tapping on arrows on large-viewport + * touch interfaces (e.g. tablets or laptops with touch screens). + * These rules are supported by all browsers (>IE11) and when JS is disabled. + */ +@media (any-pointer: coarse) { + + .primary-menu > li.menu-item-has-children > a { + padding-left: 0; + margin-left: 2rem; + } + + .primary-menu ul li.menu-item-has-children > a { + margin-left: 4.5rem; + padding-left: 0; + width: unset; + } + +} + +/* Repeat previous rules for IE11 (when JS enabled for polyfill). */ +body.touch-enabled .primary-menu > li.menu-item-has-children > a { + padding-left: 0; + margin-left: 2rem; +} + +body.touch-enabled .primary-menu ul li.menu-item-has-children > a { + margin-left: 4.5rem; + padding-left: 0; + width: unset; +} + /* -------------------------------------------------------------------------- */ /* 5. Menu Modal @@ -2316,6 +2372,10 @@ h2.entry-title { .post-meta-wrapper { margin-top: 2rem; + margin-left: auto; + margin-right: auto; + max-width: 58rem; + width: calc(100% - 4rem); } .post-meta { @@ -2476,6 +2536,10 @@ h2.entry-title { .author-bio { margin-top: 4rem; + margin-left: auto; + margin-right: auto; + max-width: 58rem; + width: calc(100% - 4rem); } .hide-avatars .author-bio { @@ -2685,6 +2749,7 @@ h2.entry-title { font-size: 0.842em; } +.entry-content .has-normal-font-size, .entry-content .has-regular-font-size { font-size: 1em; } @@ -2715,24 +2780,25 @@ h2.entry-title { margin-bottom: 0; } -.wp-block-archives, -.wp-block-categories, +.wp-block-archives:not(.alignwide):not(.alignfull), +.wp-block-categories:not(.alignwide):not(.alignfull), .wp-block-code, -.wp-block-columns, -.wp-block-cover, -.wp-block-embed, -.wp-block-gallery, -.wp-block-group, -.wp-block-latest-comments, -.wp-block-latest-posts, -.wp-block-media-text, +.wp-block-columns:not(.alignwide):not(.alignfull), +.wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull), +.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright), +.wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright), +.wp-block-media-text:not(.alignwide):not(.alignfull), .wp-block-preformatted, -.wp-block-pullquote, +.wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, -.wp-block-video { +.wp-block-video:not(.alignwide):not(.alignfull) { margin-bottom: 3rem; margin-top: 3rem; } @@ -2864,6 +2930,12 @@ h2.entry-title { /* Block: Columns ---------------------------- */ +.wp-block-columns.alignfull, +.alignfull:not(.has-background) .wp-block-columns { + padding-right: 2rem; + padding-left: 2rem; +} + .wp-block-column { margin-bottom: 3.2rem; } @@ -2943,10 +3015,6 @@ h2.entry-title { /* Block: Gallery ---------------------------- */ -ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignleft) { - margin-right: 0; -} - .wp-block-gallery ul { list-style: none; margin: 0 0 -1.6rem 0; @@ -2991,6 +3059,11 @@ figure.wp-block-gallery.alignfull { max-width: 100%; } +.alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) { + padding-right: 2rem; + padding-left: 2rem; +} + /* Block: Image ------------------------------ */ /* Block: Media And Text --------------------- */ @@ -3139,8 +3212,7 @@ hr.wp-block-separator { .wp-block-separator.is-style-wide { max-width: calc(100vw - 4rem); position: relative; - right: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); + width: 100%; } /* STYLE: DOTS */ @@ -3175,10 +3247,14 @@ hr.wp-block-separator { background: #dcd7ca; } -.wp-block-table.is-style-stripes { +figure.wp-block-table.is-style-stripes { border-bottom: none; } +.wp-block-table.is-style-stripes table { + border-collapse: inherit; +} + /* Block: Quote ------------------------------ */ .wp-block-quote p, @@ -3202,6 +3278,8 @@ hr.wp-block-separator { .wp-block-quote.is-style-large { border: none; padding: 0; + margin-right: auto; + margin-left: auto; } .wp-block-quote.is-large p, @@ -3224,9 +3302,8 @@ hr.wp-block-separator { /* Block: Widget Latest Comments ------------- */ -.entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-comments li { - margin-right: 0; + margin: 2rem 0; } .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt, @@ -3291,7 +3368,12 @@ hr.wp-block-separator { .entry-content { line-height: 1.5; - max-width: 58rem; +} + +.entry-content > * { + margin-right: auto; + margin-left: auto; + margin-bottom: 1.25em; } .entry-content > *:first-child { @@ -3318,7 +3400,7 @@ hr.wp-block-separator { .entry-content h4, .entry-content h5, .entry-content h6 { - margin: 3.5rem 0 2rem; + margin: 3.5rem auto 2rem; } .entry-content ul ul, @@ -3329,7 +3411,7 @@ hr.wp-block-separator { } .entry-content hr { - margin: 4rem 0; + margin: 4rem auto; } /* Font Families ----------------------------- */ @@ -3361,20 +3443,70 @@ hr.wp-block-separator { /* Alignment Classes ------------------------- */ +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: 58rem; + width: calc(100% - 4rem); +} + +[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: 58rem; + width: 100%; +} + .alignnone, .aligncenter, .alignleft, -.alignright { - margin: 3rem 0; +.alignright, +.alignwide { + margin-top: 4rem; + margin-left: auto; + margin-bottom: 4rem; + margin-right: auto; +} + +[class*="__inner-container"] > *:not(.alignwide):not(.alignfull) { + margin-right: auto; + margin-left: auto; +} + +/* Full */ + +.alignfull { + margin-top: 5rem; + margin-left: auto; + margin-bottom: 5rem; + margin-right: auto; + max-width: 100vw; + position: relative; + width: 100%; +} + +[class*="__inner-container"] > .alignfull { max-width: 100%; } +/* Wide */ + +.alignwide { + max-width: 120rem; + position: relative; + width: calc(100% - 4rem); +} + +[class*="__inner-container"] > .alignwide { + width: 100%; +} + +/* Center */ + .aligncenter, .aligncenter img { margin-right: auto; margin-left: auto; } +/* Left and right */ + .alignleft, .alignright { max-width: 50%; @@ -3382,45 +3514,21 @@ hr.wp-block-separator { .alignleft { float: left; - margin: 0.3rem 0 2rem 2rem; + margin: 0.3rem 2rem 2rem 2rem; } .alignright { float: right; - margin: 0.3rem 2rem 2rem 0; + margin: 0.3rem 2rem 2rem 2rem; } -.alignwide { - margin: 4rem auto; - max-width: 120rem; -} - -.entry-content > .alignwide { - max-width: calc(100vw - 4rem); - position: relative; - right: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); -} - -.alignfull { - margin: 5rem 0; -} - -.entry-content > .alignfull { - max-width: 100vw; - position: relative; - right: calc(50% - 50vw); - width: 100vw; -} - - /* Entry Media ------------------------------- */ .alignfull > figcaption, .alignfull > .wp-caption-text { margin-right: auto; margin-left: auto; - max-width: 120rem; + max-width: 58rem; width: calc(100% - 4rem); } @@ -4349,36 +4457,6 @@ a.to-the-top > * { } -@media ( max-width: 599px ) { - - /* Blocks -------------------------------- */ - - /* BLOCK: COLUMNS */ - - .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 ) and ( max-width: 781px ) { - - /* Blocks -------------------------------- */ - - /* BLOCK: COLUMNS */ - - .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: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; - } -} - @media ( min-width: 660px ) { /* Blocks -------------------------------- */ @@ -4399,16 +4477,40 @@ a.to-the-top > * { .entry-content > .alignleft, .entry-content > p .alignleft, - .entry-content > .wp-block-image .alignleft { + .entry-content > .wp-block-image .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft { margin-left: calc(( 100vw - 58rem - 8rem ) / -2); } + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft { + margin-left: 0; + } + .entry-content > .alignright, .entry-content > p .alignright, - .entry-content > .wp-block-image .alignright { + .entry-content > .wp-block-image .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright { margin-right: calc(( 100vw - 58rem - 8rem ) / -2); } + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright { + margin-right: 0; + } + } @media ( min-width: 700px ) { @@ -4425,7 +4527,7 @@ a.to-the-top > * { } hr { - margin: 8rem 0; + margin: 8rem auto; } table { @@ -4474,7 +4576,7 @@ a.to-the-top > * { .heading-size-2, h3, .heading-size-3 { - margin: 6rem 0 3rem; + margin: 6rem auto 3rem; } h4, @@ -4483,7 +4585,7 @@ a.to-the-top > * { .heading-size-5, h6, .heading-size-6 { - margin: 4.5rem 0 2.5rem; + margin: 4.5rem auto 2.5rem; } h1, @@ -4850,26 +4952,27 @@ a.to-the-top > * { /* BLOCK: BASE MARGINS */ - .wp-block-archives, - .wp-block-categories, + .wp-block-archives:not(.alignwide):not(.alignfull), + .wp-block-categories:not(.alignwide):not(.alignfull), .wp-block-code, - .wp-block-columns, - .wp-block-cover, - .wp-block-embed, - .wp-block-gallery, - .wp-block-group, - .wp-block-latest-comments, - .wp-block-latest-posts, - .wp-block-media-text, + .wp-block-columns:not(.alignwide):not(.alignfull), + .wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull), + .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-media-text:not(.alignwide):not(.alignfull), .wp-block-preformatted, - .wp-block-pullquote, + .wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, - .wp-block-video { - margin-bottom: 5rem; - margin-top: 5rem; + .wp-block-video:not(.alignwide):not(.alignfull) { + margin-bottom: 4rem; + margin-top: 4rem; } /* BLOCK: COLUMNS */ @@ -4983,13 +5086,11 @@ a.to-the-top > * { /* BLOCK: SEPARATOR */ hr.wp-block-separator { - margin: 6rem 0; + margin: 6rem auto; } .wp-block-separator.is-style-wide { max-width: calc(100vw - 8rem); - right: calc(50% - 50vw + 4rem); - width: calc(100vw - 8rem); } /* Entry Content ------------------------- */ @@ -5006,17 +5107,15 @@ a.to-the-top > * { .entry-content h1, .entry-content h2, .entry-content h3 { - margin: 6rem 0 3rem; + margin: 6rem auto 3rem; } .entry-content h4, .entry-content h5, .entry-content h6 { - margin: 4.5rem 0 2.5rem; + margin: 4.5rem auto 2.5rem; } - /* ALIGNMENT CLASSES */ - .alignnone, .aligncenter { margin-bottom: 4rem; @@ -5031,15 +5130,14 @@ a.to-the-top > * { margin: 0.3rem 0 2rem 2rem; } - .alignwide, - .alignfull { + .entry-content > .alignwide, + .entry-content > .alignfull { margin-bottom: 6rem; margin-top: 6rem; } .entry-content > .alignwide { max-width: calc(100vw - 8rem); - right: calc(50% - 50vw + 4rem); width: calc(100vw - 8rem); } @@ -5279,14 +5377,9 @@ a.to-the-top > * { 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: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; + .wp-block-columns.alignwide + .wp-block-columns.alignwide, + .wp-block-columns.alignfull + .wp-block-columns.alignfull { + margin-top: -2.8rem; } } @@ -5512,7 +5605,7 @@ a.to-the-top > * { .wp-block-columns.alignwide + .wp-block-columns.alignwide, .wp-block-columns.alignfull + .wp-block-columns.alignfull { - margin-top: -5.2rem; + margin-top: -4.8rem; } /* BLOCK: GALLERY */ @@ -5525,23 +5618,78 @@ a.to-the-top > * { /* BLOCK: GROUP */ - .wp-block-group.alignwide.has-background, - .wp-block-group.alignfull.has-background { + .entry-content > .wp-block-group.alignwide.has-background, + .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 4rem; } /* BLOCK: SEPARATOR */ hr.wp-block-separator { - margin: 8rem 0; + margin: 8rem auto; } /* Entry Content ------------------------- */ /* ALIGNMENT CLASSES */ - .alignwide, - .alignfull { + .entry-content > .alignleft, + .entry-content > p .alignleft, + .entry-content > .wp-block-image .alignleft { + position: absolute; + left: calc((100vw - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft { + position: relative; + left: inherit; + max-width: inherit; + } + + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft { + position: absolute; + left: calc((100% - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + .entry-content > .alignright, + .entry-content > p .alignright, + .entry-content > .wp-block-image .alignright, + [class*="__inner-container"] > .alignright { + position: absolute; + right: calc((100vw - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright { + position: relative; + right: inherit; + max-width: inherit; + } + + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright { + position: absolute; + right: calc((100% - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + .entry-content > .alignwide, + .entry-content > .alignfull { margin-bottom: 8rem; margin-top: 8rem; } @@ -5690,8 +5838,8 @@ a.to-the-top > * { /* BLOCK: GROUP */ - .wp-block-group.alignwide.has-background, - .wp-block-group.alignfull.has-background { + .entry-content > .wp-block-group.alignwide.has-background, + .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 6rem; } @@ -5711,7 +5859,7 @@ a.to-the-top > * { /* ALIGNMENT CLASSES */ - .alignfull { + .entry-content > .alignfull { margin-bottom: 10rem; margin-top: 10rem; } @@ -5805,7 +5953,6 @@ a.to-the-top > * { .wp-block-separator.is-style-wide { max-width: 120rem; - right: calc(50% - 60rem); width: 120rem; } @@ -5827,10 +5974,14 @@ a.to-the-top > * { .entry-content > .alignwide { max-width: 120rem; - right: calc(50% - 60rem); width: 120rem; } + [class*="__inner-container"] > .alignwide { + max-width: 120rem; + width: 100%; + } + } @media ( min-width: 1330px ) { diff --git a/wp-content/themes/twentytwenty/style.css b/wp-content/themes/twentytwenty/style.css index 094a2d8d0d..4a0b22542e 100644 --- a/wp-content/themes/twentytwenty/style.css +++ b/wp-content/themes/twentytwenty/style.css @@ -180,6 +180,7 @@ path { position: absolute !important; width: 1px; word-wrap: normal !important; + word-break: normal; } .screen-reader-text:focus { @@ -832,6 +833,29 @@ input[type="submit"]:hover { text-decoration: underline; } +input[type="text"]:focus, +input[type="email"]:focus, +input[type="url"]:focus, +input[type="password"]:focus, +input[type="number"]:focus, +input[type="tel"]:focus, +input[type="range"]: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, +textarea:focus { + border-color: currentColor; +} + +input[type="search"]:focus { + outline: thin dotted; + outline-offset: -4px; +} + /* Tables ------------------------------------ */ table { @@ -1687,6 +1711,38 @@ ul.primary-menu { transform: rotate(180deg); } +/* + * Enable nav submenu expansion with tapping on arrows on large-viewport + * touch interfaces (e.g. tablets or laptops with touch screens). + * These rules are supported by all browsers (>IE11) and when JS is disabled. + */ +@media (any-pointer: coarse) { + + .primary-menu > li.menu-item-has-children > a { + padding-right: 0; + margin-right: 2rem; + } + + .primary-menu ul li.menu-item-has-children > a { + margin-right: 4.5rem; + padding-right: 0; + width: unset; + } + +} + +/* Repeat previous rules for IE11 (when JS enabled for polyfill). */ +body.touch-enabled .primary-menu > li.menu-item-has-children > a { + padding-right: 0; + margin-right: 2rem; +} + +body.touch-enabled .primary-menu ul li.menu-item-has-children > a { + margin-right: 4.5rem; + padding-right: 0; + width: unset; +} + /* -------------------------------------------------------------------------- */ /* 5. Menu Modal @@ -2328,6 +2384,10 @@ h2.entry-title { .post-meta-wrapper { margin-top: 2rem; + margin-right: auto; + margin-left: auto; + max-width: 58rem; + width: calc(100% - 4rem); } .post-meta { @@ -2488,6 +2548,10 @@ h2.entry-title { .author-bio { margin-top: 4rem; + margin-right: auto; + margin-left: auto; + max-width: 58rem; + width: calc(100% - 4rem); } .hide-avatars .author-bio { @@ -2699,6 +2763,7 @@ h2.entry-title { font-size: 0.842em; } +.entry-content .has-normal-font-size, .entry-content .has-regular-font-size { font-size: 1em; } @@ -2729,24 +2794,25 @@ h2.entry-title { margin-bottom: 0; } -.wp-block-archives, -.wp-block-categories, +.wp-block-archives:not(.alignwide):not(.alignfull), +.wp-block-categories:not(.alignwide):not(.alignfull), .wp-block-code, -.wp-block-columns, -.wp-block-cover, -.wp-block-embed, -.wp-block-gallery, -.wp-block-group, -.wp-block-latest-comments, -.wp-block-latest-posts, -.wp-block-media-text, +.wp-block-columns:not(.alignwide):not(.alignfull), +.wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-group:not(.has-background):not(.alignwide):not(.alignfull), +.wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright), +.wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright), +.wp-block-media-text:not(.alignwide):not(.alignfull), .wp-block-preformatted, -.wp-block-pullquote, +.wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, -.wp-block-video { +.wp-block-video:not(.alignwide):not(.alignfull) { margin-bottom: 3rem; margin-top: 3rem; } @@ -2878,6 +2944,12 @@ h2.entry-title { /* Block: Columns ---------------------------- */ +.wp-block-columns.alignfull, +.alignfull:not(.has-background) .wp-block-columns { + padding-left: 2rem; + padding-right: 2rem; +} + .wp-block-column { margin-bottom: 3.2rem; } @@ -2957,10 +3029,6 @@ h2.entry-title { /* Block: Gallery ---------------------------- */ -ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignleft) { - margin-left: 0; -} - .wp-block-gallery ul { list-style: none; margin: 0 0 -1.6rem 0; @@ -3005,6 +3073,11 @@ figure.wp-block-gallery.alignfull { max-width: 100%; } +.alignfull:not(.has-background) > .wp-block-group__inner-container > p:not(.has-background-color) { + padding-left: 2rem; + padding-right: 2rem; +} + /* Block: Image ------------------------------ */ /* Block: Media And Text --------------------- */ @@ -3153,8 +3226,7 @@ hr.wp-block-separator { .wp-block-separator.is-style-wide { max-width: calc(100vw - 4rem); position: relative; - left: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); + width: 100%; } /* STYLE: DOTS */ @@ -3189,10 +3261,14 @@ hr.wp-block-separator { background: #dcd7ca; } -.wp-block-table.is-style-stripes { +figure.wp-block-table.is-style-stripes { border-bottom: none; } +.wp-block-table.is-style-stripes table { + border-collapse: inherit; +} + /* Block: Quote ------------------------------ */ .wp-block-quote p, @@ -3220,6 +3296,8 @@ hr.wp-block-separator { .wp-block-quote.is-style-large { border: none; padding: 0; + margin-left: auto; + margin-right: auto; } .wp-block-quote.is-large p, @@ -3242,9 +3320,8 @@ hr.wp-block-separator { /* Block: Widget Latest Comments ------------- */ -.entry-content .wp-block-latest-comments, .entry-content .wp-block-latest-comments li { - margin-left: 0; + margin: 2rem 0; } .has-avatars .wp-block-latest-comments__comment .wp-block-latest-comments__comment-excerpt, @@ -3309,7 +3386,12 @@ hr.wp-block-separator { .entry-content { line-height: 1.5; - max-width: 58rem; +} + +.entry-content > * { + margin-left: auto; + margin-right: auto; + margin-bottom: 1.25em; } .entry-content > *:first-child { @@ -3336,7 +3418,7 @@ hr.wp-block-separator { .entry-content h4, .entry-content h5, .entry-content h6 { - margin: 3.5rem 0 2rem; + margin: 3.5rem auto 2rem; } .entry-content ul ul, @@ -3347,7 +3429,7 @@ hr.wp-block-separator { } .entry-content hr { - margin: 4rem 0; + margin: 4rem auto; } /* Font Families ----------------------------- */ @@ -3379,20 +3461,70 @@ hr.wp-block-separator { /* Alignment Classes ------------------------- */ +.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: 58rem; + width: calc(100% - 4rem); +} + +[class*="__inner-container"] > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.is-style-wide) { + max-width: 58rem; + width: 100%; +} + .alignnone, .aligncenter, .alignleft, -.alignright { - margin: 3rem 0; +.alignright, +.alignwide { + margin-top: 4rem; + margin-right: auto; + margin-bottom: 4rem; + margin-left: auto; +} + +[class*="__inner-container"] > *:not(.alignwide):not(.alignfull) { + margin-left: auto; + margin-right: auto; +} + +/* Full */ + +.alignfull { + margin-top: 5rem; + margin-right: auto; + margin-bottom: 5rem; + margin-left: auto; + max-width: 100vw; + position: relative; + width: 100%; +} + +[class*="__inner-container"] > .alignfull { max-width: 100%; } +/* Wide */ + +.alignwide { + max-width: 120rem; + position: relative; + width: calc(100% - 4rem); +} + +[class*="__inner-container"] > .alignwide { + width: 100%; +} + +/* Center */ + .aligncenter, .aligncenter img { margin-left: auto; margin-right: auto; } +/* Left and right */ + .alignleft, .alignright { max-width: 50%; @@ -3402,47 +3534,23 @@ hr.wp-block-separator { /*rtl:ignore*/ float: left; - margin: 0.3rem 2rem 2rem 0; + margin: 0.3rem 2rem 2rem 2rem; } .alignright { /*rtl:ignore*/ float: right; - margin: 0.3rem 0 2rem 2rem; + margin: 0.3rem 2rem 2rem 2rem; } -.alignwide { - margin: 4rem auto; - max-width: 120rem; -} - -.entry-content > .alignwide { - max-width: calc(100vw - 4rem); - position: relative; - left: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); -} - -.alignfull { - margin: 5rem 0; -} - -.entry-content > .alignfull { - max-width: 100vw; - position: relative; - left: calc(50% - 50vw); - width: 100vw; -} - - /* Entry Media ------------------------------- */ .alignfull > figcaption, .alignfull > .wp-caption-text { margin-left: auto; margin-right: auto; - max-width: 120rem; + max-width: 58rem; width: calc(100% - 4rem); } @@ -4371,36 +4479,6 @@ a.to-the-top > * { } -@media ( max-width: 599px ) { - - /* Blocks -------------------------------- */ - - /* BLOCK: COLUMNS */ - - .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 ) and ( max-width: 781px ) { - - /* Blocks -------------------------------- */ - - /* BLOCK: COLUMNS */ - - .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: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; - } -} - @media ( min-width: 660px ) { /* Blocks -------------------------------- */ @@ -4425,20 +4503,48 @@ a.to-the-top > * { .entry-content > .alignleft, .entry-content > p .alignleft, - .entry-content > .wp-block-image .alignleft { + .entry-content > .wp-block-image .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft { /*rtl:ignore*/ margin-left: calc(( 100vw - 58rem - 8rem ) / -2); } + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft { + + /*rtl:ignore*/ + margin-left: 0; + } + .entry-content > .alignright, .entry-content > p .alignright, - .entry-content > .wp-block-image .alignright { + .entry-content > .wp-block-image .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright { /*rtl:ignore*/ margin-right: calc(( 100vw - 58rem - 8rem ) / -2); } + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright { + + /*rtl:ignore*/ + margin-right: 0; + } + } @media ( min-width: 700px ) { @@ -4455,7 +4561,7 @@ a.to-the-top > * { } hr { - margin: 8rem 0; + margin: 8rem auto; } table { @@ -4504,7 +4610,7 @@ a.to-the-top > * { .heading-size-2, h3, .heading-size-3 { - margin: 6rem 0 3rem; + margin: 6rem auto 3rem; } h4, @@ -4513,7 +4619,7 @@ a.to-the-top > * { .heading-size-5, h6, .heading-size-6 { - margin: 4.5rem 0 2.5rem; + margin: 4.5rem auto 2.5rem; } h1, @@ -4880,26 +4986,27 @@ a.to-the-top > * { /* BLOCK: BASE MARGINS */ - .wp-block-archives, - .wp-block-categories, + .wp-block-archives:not(.alignwide):not(.alignfull), + .wp-block-categories:not(.alignwide):not(.alignfull), .wp-block-code, - .wp-block-columns, - .wp-block-cover, - .wp-block-embed, - .wp-block-gallery, - .wp-block-group, - .wp-block-latest-comments, - .wp-block-latest-posts, - .wp-block-media-text, + .wp-block-columns:not(.alignwide):not(.alignfull), + .wp-block-cover:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-embed:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-group:not(.has-background):not(.alignwide):not(.alignfull), + .wp-block-image:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-latest-comments:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-latest-posts:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-media-text:not(.alignwide):not(.alignfull), .wp-block-preformatted, - .wp-block-pullquote, + .wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright), .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, - .wp-block-video { - margin-bottom: 5rem; - margin-top: 5rem; + .wp-block-video:not(.alignwide):not(.alignfull) { + margin-bottom: 4rem; + margin-top: 4rem; } /* BLOCK: COLUMNS */ @@ -5013,13 +5120,11 @@ a.to-the-top > * { /* BLOCK: SEPARATOR */ hr.wp-block-separator { - margin: 6rem 0; + margin: 6rem auto; } .wp-block-separator.is-style-wide { max-width: calc(100vw - 8rem); - left: calc(50% - 50vw + 4rem); - width: calc(100vw - 8rem); } /* Entry Content ------------------------- */ @@ -5036,17 +5141,15 @@ a.to-the-top > * { .entry-content h1, .entry-content h2, .entry-content h3 { - margin: 6rem 0 3rem; + margin: 6rem auto 3rem; } .entry-content h4, .entry-content h5, .entry-content h6 { - margin: 4.5rem 0 2.5rem; + margin: 4.5rem auto 2.5rem; } - /* ALIGNMENT CLASSES */ - .alignnone, .aligncenter { margin-bottom: 4rem; @@ -5065,15 +5168,14 @@ a.to-the-top > * { margin: 0.3rem 0 2rem 2rem; } - .alignwide, - .alignfull { + .entry-content > .alignwide, + .entry-content > .alignfull { margin-bottom: 6rem; margin-top: 6rem; } .entry-content > .alignwide { max-width: calc(100vw - 8rem); - left: calc(50% - 50vw + 4rem); width: calc(100vw - 8rem); } @@ -5313,14 +5415,9 @@ a.to-the-top > * { 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: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; + .wp-block-columns.alignwide + .wp-block-columns.alignwide, + .wp-block-columns.alignfull + .wp-block-columns.alignfull { + margin-top: -2.8rem; } } @@ -5546,7 +5643,7 @@ a.to-the-top > * { .wp-block-columns.alignwide + .wp-block-columns.alignwide, .wp-block-columns.alignfull + .wp-block-columns.alignfull { - margin-top: -5.2rem; + margin-top: -4.8rem; } /* BLOCK: GALLERY */ @@ -5559,23 +5656,78 @@ a.to-the-top > * { /* BLOCK: GROUP */ - .wp-block-group.alignwide.has-background, - .wp-block-group.alignfull.has-background { + .entry-content > .wp-block-group.alignwide.has-background, + .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 4rem; } /* BLOCK: SEPARATOR */ hr.wp-block-separator { - margin: 8rem 0; + margin: 8rem auto; } /* Entry Content ------------------------- */ /* ALIGNMENT CLASSES */ - .alignwide, - .alignfull { + .entry-content > .alignleft, + .entry-content > p .alignleft, + .entry-content > .wp-block-image .alignleft { + position: absolute; + right: calc((100vw - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignleft, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignleft { + position: relative; + right: inherit; + max-width: inherit; + } + + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignleft, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignleft { + position: absolute; + right: calc((100% - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + .entry-content > .alignright, + .entry-content > p .alignright, + .entry-content > .wp-block-image .alignright, + [class*="__inner-container"] > .alignright { + position: absolute; + left: calc((100vw - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > p .alignright, + [class*="wp-block"]:not(.alignwide):not(.alignfull) [class*="__inner-container"] > .wp-block-image .alignright { + position: relative; + left: inherit; + max-width: inherit; + } + + [class*="wp-block"].alignwide [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignwide [class*="__inner-container"] > .wp-block-image .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > p .alignright, + [class*="wp-block"].alignfull [class*="__inner-container"] > .wp-block-image .alignright { + position: absolute; + left: calc((100% - 58rem) / 2 + 58rem); + max-width: calc((100% - 58rem) / 2 - 4rem); + } + + .entry-content > .alignwide, + .entry-content > .alignfull { margin-bottom: 8rem; margin-top: 8rem; } @@ -5724,8 +5876,8 @@ a.to-the-top > * { /* BLOCK: GROUP */ - .wp-block-group.alignwide.has-background, - .wp-block-group.alignfull.has-background { + .entry-content > .wp-block-group.alignwide.has-background, + .entry-content > .wp-block-group.alignfull.has-background { padding: 8rem 6rem; } @@ -5745,7 +5897,7 @@ a.to-the-top > * { /* ALIGNMENT CLASSES */ - .alignfull { + .entry-content > .alignfull { margin-bottom: 10rem; margin-top: 10rem; } @@ -5843,7 +5995,6 @@ a.to-the-top > * { .wp-block-separator.is-style-wide { max-width: 120rem; - left: calc(50% - 60rem); width: 120rem; } @@ -5869,10 +6020,14 @@ a.to-the-top > * { .entry-content > .alignwide { max-width: 120rem; - left: calc(50% - 60rem); width: 120rem; } + [class*="__inner-container"] > .alignwide { + max-width: 120rem; + width: 100%; + } + } @media ( min-width: 1330px ) { diff --git a/wp-content/themes/twentytwenty/template-parts/content.php b/wp-content/themes/twentytwenty/template-parts/content.php index cd8d78ec28..4b745fa9f9 100644 --- a/wp-content/themes/twentytwenty/template-parts/content.php +++ b/wp-content/themes/twentytwenty/template-parts/content.php @@ -25,7 +25,7 @@ ?> -

+
@@ -39,6 +39,9 @@
+
+ +
-
+