diff --git a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index 1a2f0abd91..2fc6c87e17 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -30,18 +30,6 @@ /* Widgets */ } -/* OS dark theme preference */ -@media (prefers-color-scheme: dark) { - html.respect-color-scheme-preference body { - background-color: #28303d; - } - @media (prefers-color-scheme: dark){ - html.respect-color-scheme-preference body{ - background-color: #28303d; - } - } -} - /* Button extends */ .wp-block-button__link { line-height: 1.5; @@ -480,6 +468,8 @@ a:hover { .wp-block-code code { font-size: 1rem; + white-space: pre !important; + overflow-x: auto; } .wp-block-code { @@ -488,6 +478,7 @@ a:hover { border-style: solid; border-width: 0.1rem; padding: 20px; + color: currentColor; } .wp-block-cover { @@ -1551,10 +1542,14 @@ p.has-background { padding: 20px; } +pre.wp-block-preformatted { + overflow-x: auto; + white-space: pre !important; + font-size: 1rem; +} + .wp-block-pullquote { padding: 40px 0; - margin-left: 0; - margin-right: 0; text-align: center; border-width: 3px; border-bottom-style: solid; @@ -1616,6 +1611,8 @@ p.has-background { } .wp-block-pullquote.is-style-solid-color { + margin-left: auto; + margin-right: auto; padding: 50px; border-width: 3px; border-style: solid; @@ -2013,6 +2010,14 @@ p.has-background { color: #d1e4dd; } +.wp-block[data-align="center"] > * { + text-align: center; +} + +.wp-block[data-align="center"] .wp-block-search__button-only .wp-block-search__inside-wrapper { + justify-content: center; +} + .wp-block-separator { border-bottom: 1px solid #28303d; clear: both; @@ -2228,6 +2233,10 @@ table.wp-calendar-table caption { float: right; } +.wp-block-tag-cloud.aligncenter { + text-align: center; +} + pre.wp-block-verse { padding: 0; } @@ -2762,4 +2771,4 @@ a { .has-red-to-purple-gradient-background { background: linear-gradient(160deg, #e4d1d1, #d1d1e4); } -/*# sourceMappingURL=ie-editor.css.map */ \ No newline at end of file +/*# sourceMappingURL=ie-editor.css.map */ diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css index a41c5569f3..0cd81a890b 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -10,7 +10,7 @@ Tested up to: 5.6 Requires PHP: 5.6 Version: 1.0.0 License: GNU General Public License v2 or later -License URI: LICENSE +License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: twentytwentyone Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready @@ -122,18 +122,6 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL. /* Widgets */ } -/* OS dark theme preference */ -@media (prefers-color-scheme: dark) { - html.respect-color-scheme-preference body { - background-color: #28303d; - } - @media (prefers-color-scheme: dark){ - html.respect-color-scheme-preference body{ - background-color: #28303d; - } - } -} - /* Button extends */ .site .button { line-height: 1.5; @@ -1800,6 +1788,12 @@ input[type="color"] { height: 40px; } +input[type="email"], +input[type="url"] { + /*rtl:ignore*/ + direction: ltr; +} + select { border: 3px solid #39414d; color: #28303d; @@ -1996,6 +1990,40 @@ input[type="range"]::-ms-thumb { cursor: pointer; } +fieldset { + display: grid; + border-color: #39414d; + padding: 25px; +} + +fieldset legend { + font-size: 1.5rem; +} + +fieldset input[type="submit"] { + max-width: max-content; +} + +fieldset input:not([type="submit"]) { + margin-bottom: 20px; +} + +fieldset input[type="radio"], fieldset input[type="checkbox"] { + margin-bottom: 0; +} + +fieldset input[type="radio"] + label { + font-size: 1.125rem; + padding-left: 0; + margin-bottom: 20px; +} + +fieldset input[type="checkbox"] + label { + font-size: 1.125rem; + padding-left: 0; + margin-bottom: 20px; +} + img { display: block; height: auto; @@ -2076,7 +2104,8 @@ i { } pre { - white-space: pre-wrap; + white-space: pre; + overflow-x: auto; } /* @@ -2224,7 +2253,9 @@ a:hover { .wp-block-code code { font-size: 1rem; - overflow: auto; + white-space: pre; + overflow-x: auto; + display: block; } .wp-block-columns .wp-block-column > * { @@ -2268,10 +2299,11 @@ a:hover { } } +.wp-block-columns.is-style-twentytwentyone-columns-overlap { + justify-content: space-around; +} + @media only screen and (min-width: 652px) { - .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column { - flex-grow: 1; - } .wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) { margin-left: -50px; margin-top: 63px; @@ -3491,6 +3523,11 @@ p.has-text-color a { } } +pre.wp-block-preformatted { + overflow-x: auto; + white-space: pre; +} + .wp-block-pullquote { padding: 40px 0; text-align: center; @@ -4022,6 +4059,14 @@ p.has-text-color a { } } +.wp-block-search__button-inside .wp-block-search__inside-wrapper { + background-color: #fff; +} + +.wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper { + justify-content: center; +} + .wp-block-search .wp-block-search__label { font-size: 1.125rem; font-weight: 500; @@ -4036,6 +4081,7 @@ p.has-text-color a { max-width: inherit; margin-right: -3px; padding: 10px; + background-color: #fff; } .wp-block-search .wp-block-search__input:focus { @@ -4280,6 +4326,11 @@ table.wp-calendar-table caption { float: right; } +.wp-block-tag-cloud.alignfull { + padding-left: 20px; + padding-right: 20px; +} + .wp-block-verse { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } @@ -4884,9 +4935,11 @@ a.custom-logo-link { } .page-links .post-page-numbers { + display: inline-block; margin-left: 13px; margin-right: 13px; - padding: 10px 0; + min-width: 44px; + min-height: 44px; } .page-links .post-page-numbers:first-child { @@ -4959,10 +5012,6 @@ h1.entry-title { word-wrap: break-word; } -.entry-content .more-link:hover { - text-decoration: none; -} - .entry-content > iframe[style] { margin: 30px 0 !important; max-width: 100% !important; @@ -4982,6 +5031,10 @@ h1.entry-title { display: block; } +.entry-footer > span { + display: inline-block; +} + .entry-footer a { color: currentColor; } @@ -5238,6 +5291,15 @@ h1.page-title { margin-top: 60px; } +.archive .entry-footer .cat-links, +.archive .entry-footer .tags-links, +.search .entry-footer .cat-links, +.search .entry-footer .tags-links, +.blog .entry-footer .cat-links, +.blog .entry-footer .tags-links { + display: block; +} + .archive.logged-in .entry-footer .posted-on { margin-right: 10px; } @@ -5694,8 +5756,6 @@ h1.page-title { padding-right: 20px; padding-bottom: 25px; background-color: #d1e4dd; - overflow-x: hidden; - overflow-y: auto; transition: all .15s ease-in-out; transform: translateY(30px); } @@ -5704,6 +5764,8 @@ h1.page-title { .primary-navigation > .primary-menu-container { height: 100vh; z-index: 499; + overflow-x: hidden; + overflow-y: auto; border: 2px solid transparent; } .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { @@ -5763,7 +5825,7 @@ h1.page-title { .primary-navigation #toggle-menu { display: none; } - .primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul { + .primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul { display: none; } .admin-bar .primary-navigation { @@ -5853,14 +5915,6 @@ h1.page-title { display: none; } -.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus { - display: flex; -} - -.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus { - display: none; -} - .primary-navigation > div > .menu-wrapper > li > .sub-menu { position: relative; } @@ -6122,6 +6176,11 @@ h1.page-title { color: #28303d; } +.navigation .nav-links > * { + min-width: 44px; + min-height: 44px; +} + .navigation .nav-links .nav-next a, .navigation .nav-links .nav-previous a { display: flex; @@ -6269,12 +6328,6 @@ h1.page-title { margin-right: 13px; } -@media (prefers-color-scheme: dark){ - .pagination .nav-links > *{ - color: #f0f0f0; - } -} - .comments-pagination .nav-links > * { color: #28303d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -6284,12 +6337,6 @@ h1.page-title { margin-right: 13px; } -@media (prefers-color-scheme: dark){ - .comments-pagination .nav-links > *{ - color: #f0f0f0; - } -} - .pagination .nav-links > *.current { border-bottom: 1px solid #28303d; } @@ -6367,14 +6414,20 @@ h1.page-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; } -@media only screen and (min-width: 822px) { +@media only screen and (min-width: 652px) { .widget-area { display: grid; - grid-template-columns: repeat(3, 1fr); + grid-template-columns: repeat(2, 1fr); column-gap: 50px; } } +@media only screen and (min-width: 1024px) { + .widget-area { + grid-template-columns: repeat(3, 1fr); + } +} + .widget-area ul { list-style-type: none; padding: 0; @@ -6737,4 +6790,44 @@ section, footer { max-width: none; } + +.is-IE.has-background-dark { + color: #fff; +} + +.is-IE.has-background-dark *, +.is-IE.has-background-dark a, +.is-IE.has-background-dark .site-description, +.is-IE.has-background-dark .entry-title, +.is-IE.has-background-dark .entry-footer, +.is-IE.has-background-dark .widget-area, +.is-IE.has-background-dark .post-navigation .meta-nav, +.is-IE.has-background-dark .footer-navigation-wrapper li a:link, +.is-IE.has-background-dark .site-footer > .site-info, +.is-IE.has-background-dark .site-footer > .site-info a, +.is-IE.has-background-dark .site-footer > .site-info a:visited { + color: #fff; +} + +.is-IE.has-background-dark .sub-menu-toggle svg, +.is-IE.has-background-dark .sub-menu-toggle path, +.is-IE.has-background-dark .post-navigation .meta-nav svg, +.is-IE.has-background-dark .post-navigation .meta-nav path { + fill: #fff; +} + +.is-IE.has-background-dark .primary-navigation > div > .menu-wrapper > li > .sub-menu li { + background: #000; +} + +@media only screen and (max-width: 481px) { + .is-IE.has-background-dark.primary-navigation-open .primary-navigation > .primary-menu-container, + .is-IE.has-background-dark.primary-navigation-open .menu-button-container { + background-color: #000; + } +} + +.is-IE.has-background-dark .skip-link:focus { + color: #21759b; +} /*# sourceMappingURL=ie.css.map */ \ No newline at end of file diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 3a05acaaf0..5804750f6a 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -208,23 +208,6 @@ } } -/* OS dark theme preference */ -@media (prefers-color-scheme: dark) { - html.respect-color-scheme-preference { - --global--color-background: var(--global--color-dark-gray); - --global--color-primary: var(--global--color-light-gray); - --global--color-secondary: var(--global--color-light-gray); - --button--color-text: var(--global--color-background); - --button--color-text-hover: var(--global--color-secondary); - --button--color-text-active: var(--global--color-secondary); - --button--color-background: var(--global--color-secondary); - --button--color-background-active: var(--global--color-background); - } - html.respect-color-scheme-preference body { - background-color: var(--global--color-background); - } -} - /* Button extends */ .wp-block-button__link, .wp-block-file .wp-block-file__button, .wp-block-search .wp-block-search__button { line-height: var(--button--line-height); @@ -526,6 +509,8 @@ a:hover { .wp-block-code code { font-size: var(--global--font-size-xs); + white-space: pre !important; + overflow-x: auto; } .wp-block-code { @@ -534,6 +519,7 @@ a:hover { border-style: solid; border-width: 0.1rem; padding: var(--global--spacing-unit); + color: currentColor; } .wp-block-cover, @@ -1107,10 +1093,14 @@ p.has-background { padding: var(--global--spacing-unit); } +pre.wp-block-preformatted { + overflow-x: auto; + white-space: pre !important; + font-size: var(--global--font-size-xs); +} + .wp-block-pullquote { padding: calc(2 * var(--global--spacing-unit)) 0; - margin-left: 0; - margin-right: 0; text-align: center; border-width: var(--pullquote--border-width); border-bottom-style: solid; @@ -1156,6 +1146,8 @@ p.has-background { } .wp-block-pullquote.is-style-solid-color { + margin-left: auto; + margin-right: auto; padding: calc(2.5 * var(--global--spacing-unit)); border-width: var(--pullquote--border-width); border-style: solid; @@ -1463,6 +1455,14 @@ p.has-background { color: var(--button--color-text); } +.wp-block[data-align="center"] > * { + text-align: center; +} + +.wp-block[data-align="center"] .wp-block-search__button-only .wp-block-search__inside-wrapper { + justify-content: center; +} + .wp-block-separator, hr { border-bottom: var(--separator--height) solid var(--separator--border-color); @@ -1618,6 +1618,10 @@ table.wp-calendar-table caption { float: right; } +.wp-block-tag-cloud.aligncenter { + text-align: center; +} + pre.wp-block-verse { padding: 0; } @@ -1967,4 +1971,4 @@ a { background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple)); } -/*# sourceMappingURL=style-editor.css.map */ \ No newline at end of file +/*# sourceMappingURL=style-editor.css.map */ diff --git a/wp-content/themes/twentytwentyone/assets/js/customize-preview.js b/wp-content/themes/twentytwentyone/assets/js/customize-preview.js index 8c71e5ed19..dcf2f77e54 100644 --- a/wp-content/themes/twentytwentyone/assets/js/customize-preview.js +++ b/wp-content/themes/twentytwentyone/assets/js/customize-preview.js @@ -45,11 +45,11 @@ // Modify the body class depending on whether this is a dark background or not. if ( isDark ) { - if ( ! document.body.classList.contains( 'is-background-dark' ) ) { - document.body.classList.add( 'is-background-dark' ); + if ( ! document.body.classList.contains( 'has-background-dark' ) ) { + document.body.classList.add( 'has-background-dark' ); } } else { - document.body.classList.remove( 'is-background-dark' ); + document.body.classList.remove( 'has-background-dark' ); } document.documentElement.style.setProperty( '--global--color-primary', textColor ); diff --git a/wp-content/themes/twentytwentyone/assets/js/customize.js b/wp-content/themes/twentytwentyone/assets/js/customize.js deleted file mode 100644 index 72e989fb58..0000000000 --- a/wp-content/themes/twentytwentyone/assets/js/customize.js +++ /dev/null @@ -1,60 +0,0 @@ -/* global twentytwentyoneGetHexLum, backgroundColorNotice */ - -( function() { - // Wait until the customizer has finished loading. - wp.customize.bind( 'ready', function() { - var supportsDarkMode = ( 127 <= twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) && wp.customize( 'respect_user_color_preference' ).get() ); - - // Hide the "respect_user_color_preference" setting if the background-color is dark. - if ( 127 > twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) ) { - wp.customize.control( 'respect_user_color_preference' ).deactivate(); - } - - // Add notice on init if needed. - if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches && wp.customize( 'respect_user_color_preference' ) ) { - if ( supportsDarkMode ) { - wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', { - type: 'info', - message: backgroundColorNotice.message - } ) ); - } - - // Remove notice when the value changes. - wp.customize( 'background_color', function( setting ) { - setting.bind( function() { - setting.notifications.remove( 'backgroundColorNotice' ); - } ); - } ); - } - - // Handle changes to the background-color. - wp.customize( 'background_color', function( setting ) { - setting.bind( function( value ) { - if ( 127 > twentytwentyoneGetHexLum( value ) ) { - wp.customize.control( 'respect_user_color_preference' ).deactivate(); - supportsDarkMode = false; - } else { - wp.customize.control( 'respect_user_color_preference' ).activate(); - supportsDarkMode = wp.customize( 'respect_user_color_preference' ).get(); - } - } ); - } ); - - // Handle changes to the "respect_user_color_preference" setting. - wp.customize( 'respect_user_color_preference', function( setting ) { - setting.bind( function( value ) { - supportsDarkMode = value && 127 < twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ); - if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) { - if ( ! supportsDarkMode ) { - wp.customize( 'background_color' ).notifications.remove( 'backgroundColorNotice' ); - } else { - wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', { - type: 'info', - message: backgroundColorNotice.message - } ) ); - } - } - } ); - } ); - } ); -}() ); diff --git a/wp-content/themes/twentytwentyone/assets/js/polyfills.js b/wp-content/themes/twentytwentyone/assets/js/polyfills.js index bbdc2dabe0..8c3a5cf9ea 100644 --- a/wp-content/themes/twentytwentyone/assets/js/polyfills.js +++ b/wp-content/themes/twentytwentyone/assets/js/polyfills.js @@ -1,7 +1,7 @@ /** - * File primary-navigation.js. + * File polyfills.js. * - * Required to open and close the mobile navigation. + * Polyfills for IE11. */ /** diff --git a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js b/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js index 54be8e3de1..28cf67eefc 100644 --- a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js +++ b/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js @@ -39,13 +39,6 @@ function twentytwentyoneCollapseMenuOnClickOutside( event ) { * @param {Element} el - The element. */ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line - // Close submenu that was opened from a hover action. - // We'll return early in this case to avoid changing the aria-expanded attribute. - if ( el.parentNode.classList.contains( 'hover' ) ) { - el.parentNode.classList.remove( 'hover' ); - return; - } - // Close other expanded items. el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) { if ( button !== el ) { @@ -130,12 +123,10 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) { li.addEventListener( 'mouseenter', function() { - if ( 'false' === this.querySelector( '.sub-menu-toggle' ).getAttribute( 'aria-expanded' ) ) { - this.classList.add( 'hover' ); - } + this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' ); } ); li.addEventListener( 'mouseleave', function() { - this.classList.remove( 'hover' ); + this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'false' ); } ); } ); }; diff --git a/wp-content/themes/twentytwentyone/assets/js/responsive-embeds.js b/wp-content/themes/twentytwentyone/assets/js/responsive-embeds.js new file mode 100644 index 0000000000..730019c38c --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/js/responsive-embeds.js @@ -0,0 +1,36 @@ +/** + * File responsive-embeds.js. + * + * Make embeds responsive so they don't overflow their container. + */ + +/** + * Add max-width & max-height to