From a734d8eea1d6beca72bc0feaab9717b1572d59dc Mon Sep 17 00:00:00 2001 From: desrosj Date: Tue, 8 Oct 2019 19:08:07 +0000 Subject: [PATCH] Bundled Themes: Update Twenty Twenty. This brings `trunk`'s version of Twenty Twenty in-sync with GitHub. For a complete list of changes since [46357], see https://github.com/WordPress/twentytwenty/compare/7157870...7246fd6. Props anlino, ianbelanger, poena, williampatton, nielslange, acosmin, netweb, joyusly, luminuu, itowhid06, cbravobernal, intimez, glauberglauber, ocean90, amolv, briceduclos, aristath, mukesh27, garrett-eclipse, audrasjb, afercia, dianeco, utsav72640, mahesh901122, tobifjellner. See #48110. Built from https://develop.svn.wordpress.org/trunk@46445 git-svn-id: http://core.svn.wordpress.org/trunk@46243 1a063a9b-81f0-0310-95a4-ce76da25c4cd --- wp-content/themes/twentytwenty/404.php | 10 +- .../assets/css/editor-style-block-rtl.css | 70 +- .../assets/css/editor-style-block.css | 70 +- .../assets/css/editor-style-classic-rtl.css | 10 +- .../assets/css/editor-style-classic.css | 10 +- .../assets/js/color-calculations.js | 2 +- .../twentytwenty/assets/js/customize.js | 27 + .../themes/twentytwenty/assets/js/index.js | 183 +++- .../classes/class-twentytwenty-customize.php | 64 +- .../classes/class-twentytwenty-svg-icons.php | 195 +++- .../class-twentytwenty-walker-comment.php | 17 +- wp-content/themes/twentytwenty/comments.php | 38 +- wp-content/themes/twentytwenty/footer.php | 30 +- wp-content/themes/twentytwenty/functions.php | 98 +- wp-content/themes/twentytwenty/header.php | 53 +- .../themes/twentytwenty/inc/custom-css.php | 14 +- .../twentytwenty/inc/starter-content.php | 102 +- .../themes/twentytwenty/inc/svg-icons.php | 10 +- .../themes/twentytwenty/inc/template-tags.php | 216 +++-- wp-content/themes/twentytwenty/index.php | 17 +- .../themes/twentytwenty/package-lock.json | 507 ++++++++-- wp-content/themes/twentytwenty/package.json | 14 +- wp-content/themes/twentytwenty/readme.txt | 27 +- wp-content/themes/twentytwenty/searchform.php | 9 +- wp-content/themes/twentytwenty/singular.php | 4 +- wp-content/themes/twentytwenty/style-rtl.css | 888 ++++++++--------- wp-content/themes/twentytwenty/style.css | 894 +++++++++--------- .../template-parts/content-cover.php | 13 +- .../twentytwenty/template-parts/content.php | 7 +- .../template-parts/entry-author-bio.php | 6 +- .../template-parts/entry-header.php | 4 +- .../template-parts/featured-image.php | 2 +- .../template-parts/footer-menus-widgets.php | 50 +- .../template-parts/modal-menu.php | 12 +- .../template-parts/modal-search.php | 6 +- .../template-parts/navigation.php | 2 +- .../template-parts/pagination.php | 4 +- .../twentytwenty/templates/template-cover.php | 4 +- wp-includes/version.php | 2 +- 39 files changed, 2339 insertions(+), 1352 deletions(-) create mode 100644 wp-content/themes/twentytwenty/assets/js/customize.js diff --git a/wp-content/themes/twentytwenty/404.php b/wp-content/themes/twentytwenty/404.php index f00ae375d8..fbf509aa83 100644 --- a/wp-content/themes/twentytwenty/404.php +++ b/wp-content/themes/twentytwenty/404.php @@ -14,23 +14,23 @@ get_header();
-

+

-

+

_x( '404 not found', 'Label', 'twentytwenty' ), + 'label' => __( '404 not found', 'twentytwenty' ), ) ); ?>
- - + + .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"], +.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { + margin-right: 0; + width: 100%; +} + /* Block: Paragraph -------------------------- */ @@ -1041,6 +1061,25 @@ hr.wp-block-separator.is-style-dots::before { @media ( min-width: 600px ) { + /* BLOCK: SHARED MEDIA STYLES */ + + .wp-block[data-type*="core-embed"][data-align="full"] figcaption, + .wp-block[data-type="core/image"][data-align="full"] figcaption, + .wp-block[data-type="core/gallery"][data-align="full"] .blocks-gallery-caption { + padding: 0 45px; + } + + /* BLOCK: COLUMNS */ + + .editor-styles-wrapper .wp-block[data-type="core/column"] h1, + .editor-styles-wrapper .wp-block[data-type="core/column"] h2, + .editor-styles-wrapper .wp-block[data-type="core/column"] h3, + .editor-styles-wrapper .wp-block[data-type="core/column"] h4, + .editor-styles-wrapper .wp-block[data-type="core/column"] h5, + .editor-styles-wrapper .wp-block[data-type="core/column"] h6 { + margin: 35px 0 20px 0; + } + /* BLOCK: PULLQUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit { @@ -1228,13 +1267,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 18px; } - /* BLOCK: COVER */ - - .editor-styles-wrapper .wp-block-cover-image .wp-block-cover__inner-container, - .editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container { - width: calc(100% - 100px); - } - /* BLOCK: GROUP */ .wp-block[data-align="wide"] .wp-block-group.has-background, 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 c6ff478998..054b1017ad 100644 --- a/wp-content/themes/twentytwenty/assets/css/editor-style-block.css +++ b/wp-content/themes/twentytwenty/assets/css/editor-style-block.css @@ -73,12 +73,26 @@ Inter variable font. Usage: max-width: 610px; } -.wp-block[data-align="wide"] .wp-block-group .wp-block { - max-width: 100%; +.wp-block[data-align="wide"] .wp-block, +.wp-block[data-align="full"] .wp-block { + max-width: none; } -.wp-block[data-align="full"] .wp-block-group .wp-block { - max-width: 100%; +.wp-block[data-align="wide"] .wp-block[data-align="wide"], +.wp-block[data-align="full"] .wp-block[data-align="wide"] { + max-width: 1200px; +} + +.wp-block .wp-block[data-type="core/group"]:not([data-align="full"]):not([data-align="wide"]):not([data-align="left"]):not([data-align="right"]), +.wp-block .wp-block[data-type="core/cover"]:not([data-align="full"]):not([data-align="wide"]):not([data-align="left"]):not([data-align="right"]) { + margin-left: auto; + margin-right: auto; + max-width: 610px; +} + +.wp-block .wp-block[data-align="full"] { + margin-left: 0; + margin-right: 0; } *[data-align="right"] .wp-block-edit, @@ -641,7 +655,7 @@ hr.wp-block-separator.is-style-dots::before { .editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container { margin: 0 auto; max-width: 1200px; - width: calc(100% - 50px); + width: calc(100% - 40px); } [data-align="left"] .wp-block-cover, @@ -651,8 +665,6 @@ hr.wp-block-separator.is-style-dots::before { max-width: 260px; } -.editor-styles-wrapper .wp-block-cover-image .wp-block, -.editor-styles-wrapper .wp-block-cover .wp-block, .wp-block-cover-image .wp-block-cover-image-text, .wp-block-cover-image .wp-block-cover-text, .wp-block-cover-image h2, @@ -660,17 +672,19 @@ hr.wp-block-separator.is-style-dots::before { .wp-block-cover .wp-block-cover-text, .wp-block-cover h2 { max-width: 100%; - padding: 0; -} - -.editor-styles-wrapper .wp-block-cover p { - font-family: inherit; } .editor-styles-wrapper .wp-block-cover a { color: inherit; } +/* Block: Shared Media Styles ---------------- */ + +.wp-block[data-type*="core-embed"][data-align="full"] figcaption, +.wp-block[data-type="core/image"][data-align="full"] figcaption, +.wp-block[data-type="core/gallery"][data-align="full"] .blocks-gallery-caption { + padding: 0 14px; +} /* Block: Paragraph -------------------------- */ @@ -982,6 +996,12 @@ hr.wp-block-separator.is-style-dots::before { margin-top: 0; } +.wp-block[data-type="core/group"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"], +.wp-block[data-type="core/group"][data-align="full"] > .editor-block-list__block-edit > div > .wp-block-group.has-background > .wp-block-group__inner-container > .editor-inner-blocks > .editor-block-list__layout > .wp-block[data-align="full"] { + margin-left: 0; + width: 100%; +} + /* Block: Paragraph -------------------------- */ @@ -1041,6 +1061,25 @@ hr.wp-block-separator.is-style-dots::before { @media ( min-width: 600px ) { + /* BLOCK: SHARED MEDIA STYLES */ + + .wp-block[data-type*="core-embed"][data-align="full"] figcaption, + .wp-block[data-type="core/image"][data-align="full"] figcaption, + .wp-block[data-type="core/gallery"][data-align="full"] .blocks-gallery-caption { + padding: 0 45px; + } + + /* BLOCK: COLUMNS */ + + .editor-styles-wrapper .wp-block[data-type="core/column"] h1, + .editor-styles-wrapper .wp-block[data-type="core/column"] h2, + .editor-styles-wrapper .wp-block[data-type="core/column"] h3, + .editor-styles-wrapper .wp-block[data-type="core/column"] h4, + .editor-styles-wrapper .wp-block[data-type="core/column"] h5, + .editor-styles-wrapper .wp-block[data-type="core/column"] h6 { + margin: 35px 0 20px 0; + } + /* BLOCK: PULLQUOTE */ .editor-styles-wrapper .wp-block[data-type="core/pullquote"][data-align="right"] .block-editor-block-list__block-edit { @@ -1228,13 +1267,6 @@ hr.wp-block-separator.is-style-dots::before { font-size: 18px; } - /* BLOCK: COVER */ - - .editor-styles-wrapper .wp-block-cover-image .wp-block-cover__inner-container, - .editor-styles-wrapper .wp-block-cover .wp-block-cover__inner-container { - width: calc(100% - 100px); - } - /* BLOCK: GROUP */ .wp-block[data-align="wide"] .wp-block-group.has-background, diff --git a/wp-content/themes/twentytwenty/assets/css/editor-style-classic-rtl.css b/wp-content/themes/twentytwenty/assets/css/editor-style-classic-rtl.css index 343f59415a..3f4fb91e0e 100644 --- a/wp-content/themes/twentytwenty/assets/css/editor-style-classic-rtl.css +++ b/wp-content/themes/twentytwenty/assets/css/editor-style-classic-rtl.css @@ -8,8 +8,8 @@ /* * Chrome renders extra-wide   characters for the Hoefler Text font. - * This results in a jumping cursor when typing in both the Classic and block - * editors. The following font-face override fixes the issue by manually + * This results in a jumping cursor when typing in both the classic editor and + * block editor. The following font-face override fixes the issue by manually * inserting a custom font that includes just a Hoefler Text space replacement * for that character instead. */ @@ -65,8 +65,6 @@ body#tinymce.wp-editor { /* stylelint-disable-line no-duplicate-selectors */ } body#tinymce.wp-editor * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; } @@ -373,13 +371,13 @@ body#tinymce.wp-editor .wp-caption .alignright { } body#tinymce.wp-editor .alignleft { - float: right; + float: left; margin-left: 25px; max-width: 260px; } body#tinymce.wp-editor .alignright { - float: left; + float: right; margin-right: 25px; max-width: 260px; } diff --git a/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css b/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css index 57718e44d1..6e6f2960b7 100644 --- a/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css +++ b/wp-content/themes/twentytwenty/assets/css/editor-style-classic.css @@ -8,8 +8,8 @@ /* * Chrome renders extra-wide   characters for the Hoefler Text font. - * This results in a jumping cursor when typing in both the Classic and block - * editors. The following font-face override fixes the issue by manually + * This results in a jumping cursor when typing in both the classic editor and + * block editor. The following font-face override fixes the issue by manually * inserting a custom font that includes just a Hoefler Text space replacement * for that character instead. */ @@ -65,8 +65,6 @@ body#tinymce.wp-editor { /* stylelint-disable-line no-duplicate-selectors */ } body#tinymce.wp-editor * { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; -webkit-font-smoothing: antialiased; } @@ -373,12 +371,16 @@ body#tinymce.wp-editor .wp-caption .alignright { } body#tinymce.wp-editor .alignleft { + + /*rtl:ignore*/ float: left; margin-right: 25px; max-width: 260px; } body#tinymce.wp-editor .alignright { + + /*rtl:ignore*/ float: right; margin-left: 25px; max-width: 260px; diff --git a/wp-content/themes/twentytwenty/assets/js/color-calculations.js b/wp-content/themes/twentytwenty/assets/js/color-calculations.js index 9780797433..8ea6a7f94e 100644 --- a/wp-content/themes/twentytwenty/assets/js/color-calculations.js +++ b/wp-content/themes/twentytwenty/assets/js/color-calculations.js @@ -133,7 +133,7 @@ _twentyTwentyColor.prototype.getAccentColor = function() { * @param {number} accentHue - The hue for our accent color. * @return {Object} - this */ -function twentyTwentyColor( backgroundColor, accentHue ) { // jshint ignore:line +function twentyTwentyColor( backgroundColor, accentHue ) {// jshint ignore:line var color = new _twentyTwentyColor( backgroundColor, accentHue ); color.setAccentColorsArray(); return color; diff --git a/wp-content/themes/twentytwenty/assets/js/customize.js b/wp-content/themes/twentytwenty/assets/js/customize.js new file mode 100644 index 0000000000..2a38ace1d8 --- /dev/null +++ b/wp-content/themes/twentytwenty/assets/js/customize.js @@ -0,0 +1,27 @@ +/* global wp, jQuery */ + +( function( $, api ) { + $( document ).ready( function() { + // Make it possible to reset the color based on a radio input's value. + // `active` can be either `custom` or `default`. + api.control( 'accent_hue_active' ).setting.bind( function( active ) { + var control = api.control( 'accent_hue' ); // Get the accent hue control. + + if ( 'custom' === active ) { + // Activate the hue color picker control and focus it. + control.activate( { + completeCallback: function() { + control.focus(); + } + } ); + } else { + // If the `custom` option isn't selected, deactivate the hue color picker and set a default. + control.deactivate( { + completeCallback: function() { + control.setting.set( control.params.defaultValue ); + } + } ); + } + } ); + } ); +}( jQuery, wp.customize ) ); diff --git a/wp-content/themes/twentytwenty/assets/js/index.js b/wp-content/themes/twentytwenty/assets/js/index.js index 3046247a20..17290b38fa 100644 --- a/wp-content/themes/twentytwenty/assets/js/index.js +++ b/wp-content/themes/twentytwenty/assets/js/index.js @@ -4,6 +4,9 @@ var twentytwenty = twentytwenty || {}; +// Set a default value for scrolled. +twentytwenty.scrolled = 0; + // polyfill closest // https://developer.mozilla.org/en-US/docs/Web/API/Element/closest#Polyfill if ( ! Element.prototype.closest ) { @@ -37,7 +40,6 @@ if ( window.NodeList && ! NodeList.prototype.forEach ) { } // event "polyfill" - twentytwenty.createEvent = function( eventName ) { var event; if ( typeof window.Event === 'function' ) { @@ -51,7 +53,6 @@ twentytwenty.createEvent = function( eventName ) { // matches "polyfill" // https://developer.mozilla.org/es/docs/Web/API/Element/matches - if ( ! Element.prototype.matches ) { Element.prototype.matches = Element.prototype.matchesSelector || @@ -137,27 +138,36 @@ twentytwenty.coverModals = { // Hide and show modals before and after their animations have played out hideAndShowModals: function() { - var modals = document.querySelectorAll( '.cover-modal' ), - htmlStyle = document.documentElement.style; + var modals, htmlStyle, adminBar, _doc, _win; - var getAdminBarHeight = function( negativeValue ) { - var adminBar = document.querySelector( '#wpadminbar' ); + _doc = document; + _win = window; + modals = _doc.querySelectorAll( '.cover-modal' ); + htmlStyle = _doc.documentElement.style; + adminBar = _doc.querySelector( '#wpadminbar' ); + + function getAdminBarHeight( negativeValue ) { + var currentScroll, height; + + currentScroll = _win.pageYOffset; if ( adminBar ) { - return ( negativeValue ? '-' : '' ) + adminBar.getBoundingClientRect().height + 'px'; + height = currentScroll + adminBar.getBoundingClientRect().height; + + return negativeValue ? -height : height; } - return 0; - }; + return currentScroll === 0 ? 0 : -currentScroll; + } function htmlStyles() { - var overflow = window.innerHeight > document.documentElement.getBoundingClientRect().height; + var overflow = _win.innerHeight > _doc.documentElement.getBoundingClientRect().height; return { 'overflow-y': overflow ? 'hidden' : 'scroll', position: 'fixed', width: '100%', - top: getAdminBarHeight( true ), + top: getAdminBarHeight( true ) + 'px', left: 0 }; } @@ -165,17 +175,34 @@ twentytwenty.coverModals = { // Show the modal modals.forEach( function( modal ) { modal.addEventListener( 'toggle-target-before-inactive', function( event ) { + var styles, paddingTop, offsetY, mQuery; + + styles = htmlStyles(); + offsetY = _win.pageYOffset; + paddingTop = ( Math.abs( getAdminBarHeight() ) - offsetY ) + 'px'; + mQuery = _win.matchMedia( '(max-width: 600px)' ); + if ( event.target !== modal ) { return; } - window.scrollTo( { top: 0 } ); - - Object.keys( htmlStyles() ).forEach( function( styleKey ) { - htmlStyle.setProperty( styleKey, htmlStyles()[ styleKey ] ); + Object.keys( styles ).forEach( function( styleKey ) { + htmlStyle.setProperty( styleKey, styles[ styleKey ] ); } ); - document.body.style.setProperty( 'padding-top', getAdminBarHeight() ); + _win.twentytwenty.scrolled = parseInt( styles.top ); + + if ( adminBar ) { + _doc.body.style.setProperty( 'padding-top', paddingTop ); + + if ( mQuery.matches ) { + if ( offsetY >= getAdminBarHeight() ) { + modal.style.setProperty( 'top', 0 ); + } else { + modal.style.setProperty( 'top', ( getAdminBarHeight() - offsetY ) + 'px' ); + } + } + } modal.classList.add( 'show-modal' ); } ); @@ -187,13 +214,29 @@ twentytwenty.coverModals = { } setTimeout( function() { + var clickedEl; + + clickedEl = twentytwenty.toggles.clickedEl; + modal.classList.remove( 'show-modal' ); Object.keys( htmlStyles() ).forEach( function( styleKey ) { htmlStyle.removeProperty( styleKey ); } ); - document.body.style.removeProperty( 'padding-top' ); + if ( adminBar ) { + _doc.body.style.removeProperty( 'padding-top' ); + modal.style.removeProperty( 'top' ); + } + + _win.scrollTo( 0, Math.abs( _win.twentytwenty.scrolled + getAdminBarHeight() ) ); + + _win.twentytwenty.scrolled = 0; + + if ( clickedEl !== false ) { + clickedEl.focus(); + clickedEl = false; + } }, 500 ); } ); } ); @@ -393,39 +436,72 @@ twentytwenty.modalMenu = { // If the current menu item is the last one, return to close button when tab goBackToCloseButton: function() { document.addEventListener( 'keydown', function( event ) { - var desktopMenuButton = document.querySelector( '.toggle.close-nav-toggle' ); - var mobileMenuButton = document.querySelector( '.toggle.mobile-nav-toggle' ); - var isMobileMenu = desktopMenuButton ? window.getComputedStyle( desktopMenuButton, null ).getPropertyValue( 'display' ) === 'none' : false; - var firstMenuItem = isMobileMenu ? mobileMenuButton : desktopMenuButton; + var closeMenuButton, mobileMenu, isDesktop, menuLinks, firstLevelmenuLinks, lastMenuLinkToggleButton, lastToogleSubMenuLinkNotOpened, lastMenuLinkHasSubClosedMenu, socialLinks, hasSocialMenu, lastModalMenuItems, focusedElementParentLi, focusedElementIsInsideModal, lastMenuItem, isFirstModalItem, isLastModalItem; - var menuLinks = isMobileMenu ? - document.querySelectorAll( '.menu-modal .mobile-menu li' ) : - document.querySelectorAll( '.menu-modal .expanded-menu li' ); + closeMenuButton = document.querySelector( '.toggle.close-nav-toggle' ); + mobileMenu = document.querySelector( '.mobile-menu' ); - var socialLinks = document.querySelectorAll( '.menu-modal .social-menu > li' ); - var hasSocialMenu = document.querySelectorAll( '.menu-modal .social-menu' ).length > 0; - var lastModalMenuItems = hasSocialMenu ? socialLinks : menuLinks; - var focusedElementParentLi = twentytwentyFindParents( event.target, 'li' ); - var focusedElementIsInsideModal = twentytwentyFindParents( event.target, '.menu-modal' ).length > 0; - var lastMenuItem = lastModalMenuItems[lastModalMenuItems.length - 1]; + if ( mobileMenu ) { + return false; + } - var isFirstModalItem = isMobileMenu ? - event.target === mobileMenuButton : - focusedElementIsInsideModal && event.target === desktopMenuButton; + isDesktop = window.getComputedStyle( mobileMenu, null ).getPropertyValue( 'display' ) === 'none'; - var isLastModalItem = focusedElementIsInsideModal && focusedElementParentLi[0] ? + menuLinks = isDesktop ? + document.querySelectorAll( '.menu-modal .expanded-menu .modal-menu li' ) : + document.querySelectorAll( '.menu-modal .mobile-menu .modal-menu li' ); + + firstLevelmenuLinks = isDesktop ? + document.querySelectorAll( '.menu-modal .expanded-menu .modal-menu > li' ) : + document.querySelectorAll( '.menu-modal .mobile-menu .modal-menu > li' ); + + if ( firstLevelmenuLinks ) { + return false; + } + + lastMenuLinkToggleButton = firstLevelmenuLinks[firstLevelmenuLinks.length - 1].querySelector( '.sub-menu-toggle' ) || undefined; + lastMenuLinkHasSubClosedMenu = lastMenuLinkToggleButton && ! lastMenuLinkToggleButton.classList.contains( 'active' ); + + lastToogleSubMenuLinkNotOpened = isDesktop ? + document.querySelector( '.menu-modal .expanded-menu .modal-menu .sub-menu .sub-menu-toggle:not(.active)' ) : + document.querySelector( '.menu-modal .mobile-menu .sub-menu .sub-menu-toggle:not(.active)' ); + + socialLinks = document.querySelectorAll( '.menu-modal .social-menu li' ); + hasSocialMenu = document.querySelectorAll( '.menu-modal .social-menu' ).length > 0; + lastModalMenuItems = hasSocialMenu ? socialLinks : menuLinks; + focusedElementParentLi = twentytwentyFindParents( event.target, 'li' ); + focusedElementIsInsideModal = twentytwentyFindParents( event.target, '.menu-modal' ).length > 0; + + lastMenuItem = lastModalMenuItems[lastModalMenuItems.length - 1]; + + isFirstModalItem = event.target === closeMenuButton; + + isLastModalItem = focusedElementIsInsideModal && focusedElementParentLi[0] ? focusedElementParentLi[0].className === lastMenuItem.className : undefined; + if ( lastMenuLinkToggleButton && lastMenuLinkHasSubClosedMenu && ! hasSocialMenu ) { // Last 1st level item has submenu and is closed + isLastModalItem = event.target === lastMenuLinkToggleButton; + lastMenuItem = lastMenuLinkToggleButton; + } + if ( lastMenuLinkToggleButton && ! lastMenuLinkHasSubClosedMenu && ! hasSocialMenu ) { // Last 1st level item has submenu is opened + isLastModalItem = event.target === lastToogleSubMenuLinkNotOpened || event.target === menuLinks[menuLinks.length - 1].querySelector( 'a' ); + lastMenuItem = lastToogleSubMenuLinkNotOpened || menuLinks[menuLinks.length - 1].querySelector( 'a' ); + } + if ( ! event.shiftKey && event.key === 'Tab' && isLastModalItem ) { // Forward event.preventDefault(); - firstMenuItem.focus(); + closeMenuButton.focus(); } if ( event.shiftKey && event.key === 'Tab' && isFirstModalItem ) { // Backward event.preventDefault(); - lastMenuItem.querySelector( 'a' ).focus(); + if ( lastMenuItem.querySelector( 'a' ) ) { + lastMenuItem.querySelector( 'a' ).focus(); + } else { + lastMenuItem.focus(); + } } } ); } @@ -445,9 +521,15 @@ twentytwenty.primaryMenu = { // by adding the '.focus' class to all 'li.menu-item-has-children' when the focus is on the 'a' element. focusMenuWithChildren: function() { // Get all the link elements within the primary menu. - var menu = document.querySelector( '.primary-menu-wrapper' ); - var links = menu.getElementsByTagName( 'a' ); - var i, len; + var menu, links, i, len; + + menu = document.querySelector( '.primary-menu-wrapper' ); + + if ( ! menu ) { + return false; + } + + links = menu.getElementsByTagName( 'a' ); // Each time a menu link is focused or blurred, toggle focus. for ( i = 0, len = links.length; i < len; i++ ) { @@ -481,6 +563,8 @@ twentytwenty.primaryMenu = { twentytwenty.toggles = { + clickedEl: false, + init: function() { // Do the toggle this.toggle(); @@ -493,17 +577,25 @@ twentytwenty.toggles = { }, performToggle: function( element, instantly ) { - var toggle, targetString, target, timeOutTime, classToToggle, activeClass; + var self, toggle, _doc, targetString, target, timeOutTime, classToToggle, activeClass; + + self = this; + _doc = document; // Get our targets toggle = element; targetString = toggle.dataset.toggleTarget; activeClass = 'active'; + // Elements to focus after modals are closed + if ( ! _doc.querySelectorAll( '.show-modal' ).length ) { + self.clickedEl = _doc.activeElement; + } + if ( targetString === 'next' ) { target = toggle.nextSibling; } else { - target = document.querySelector( targetString ); + target = _doc.querySelector( targetString ); } // Trigger events on the toggle targets before they are toggled @@ -544,7 +636,7 @@ twentytwenty.toggles = { toggle.classList.toggle( activeClass ); } else { // If not, toggle all toggles with this toggle target - document.querySelector( '*[data-toggle-target="' + targetString + '"]' ).classList.toggle( activeClass ); + _doc.querySelector( '*[data-toggle-target="' + targetString + '"]' ).classList.toggle( activeClass ); } // Toggle aria-expanded on the target @@ -555,12 +647,12 @@ twentytwenty.toggles = { // Toggle body class if ( toggle.dataset.toggleBodyClass ) { - document.querySelector( 'body' ).classList.toggle( toggle.dataset.toggleBodyClass ); + _doc.querySelector( 'body' ).classList.toggle( toggle.dataset.toggleBodyClass ); } // Check whether to set focus if ( toggle.dataset.setFocus ) { - focusElement = document.querySelector( toggle.dataset.setFocus ); + focusElement = _doc.querySelector( toggle.dataset.setFocus ); if ( focusElement ) { if ( target.classList.contains( activeClass ) ) { @@ -588,7 +680,8 @@ twentytwenty.toggles = { var self = this; document.querySelectorAll( '*[data-toggle-target]' ).forEach( function( element ) { - element.addEventListener( 'click', function() { + element.addEventListener( 'click', function( event ) { + event.preventDefault(); self.performToggle( element ); } ); } ); diff --git a/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php b/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php index a0ee4710e0..d87c3f2636 100644 --- a/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php +++ b/wp-content/themes/twentytwenty/classes/class-twentytwenty-customize.php @@ -90,12 +90,36 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { $wp_customize, 'header_footer_background_color', array( - 'label' => esc_html__( 'Header & Footer Background Color', 'twentytwenty' ), + 'label' => __( 'Header & Footer Background Color', 'twentytwenty' ), 'section' => 'colors', ) ) ); + // Enable picking an accent color. + $wp_customize->add_setting( + 'accent_hue_active', + array( + 'capability' => 'edit_theme_options', + 'sanitize_callback' => array( __CLASS__, 'sanitize_select' ), + 'transport' => 'postMessage', + 'default' => 'default', + ) + ); + + $wp_customize->add_control( + 'accent_hue_active', + array( + 'type' => 'radio', + 'section' => 'colors', + 'label' => __( 'Primary Color', 'twentytwenty' ), + 'choices' => array( + 'default' => __( 'Default', 'twentytwenty' ), + 'custom' => __( 'Custom', 'twentytwenty' ), + ), + ) + ); + /** * Implementation for the accent color. * This is different to all other color options because of the accessibility enhancements. @@ -136,7 +160,7 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { ), 'type' => 'theme_mod', 'transport' => 'postMessage', - 'sanitize_callback' => array( 'TwentyTwenty_Customize', 'sanitize_accent_accessible_colors' ), + 'sanitize_callback' => array( __CLASS__, 'sanitize_accent_accessible_colors' ), ) ); @@ -146,10 +170,13 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { $wp_customize, 'accent_hue', array( - 'label' => esc_html__( 'Accent Color Hue', 'twentytwenty' ), - 'section' => 'colors', - 'settings' => 'accent_hue', - 'mode' => 'hue', + 'section' => 'colors', + 'settings' => 'accent_hue', + 'description' => __( 'Apply a custom color for links, buttons, featured images.', 'twentytwenty' ), + 'mode' => 'hue', + 'active_callback' => function() use ( $wp_customize ) { + return ( 'custom' === $wp_customize->get_setting( 'accent_hue_active' )->value() ); + }, ) ) ); @@ -164,10 +191,9 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { $wp_customize->add_section( 'options', array( - 'title' => __( 'Theme Options', 'twentytwenty' ), - 'priority' => 40, - 'capability' => 'edit_theme_options', - 'description' => __( 'Specific settings for the Twenty Twenty theme.', 'twentytwenty' ), + 'title' => __( 'Theme Options', 'twentytwenty' ), + 'priority' => 40, + 'capability' => 'edit_theme_options', ) ); @@ -225,7 +251,7 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { array( 'title' => __( 'Cover Template', 'twentytwenty' ), 'capability' => 'edit_theme_options', - 'description' => __( 'Settings for the "Cover Template" page template.', 'twentytwenty' ), + 'description' => __( 'Settings for the "Cover Template" page template. Add a featured image to use as background.', 'twentytwenty' ), 'priority' => 42, ) ); @@ -294,8 +320,8 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { $wp_customize, 'cover_template_overlay_background_color', array( - 'label' => __( 'Image Overlay Background Color', 'twentytwenty' ), - 'description' => __( 'The color used for the featured image overlay. Defaults to the accent color.', 'twentytwenty' ), + 'label' => __( 'Overlay Background Color', 'twentytwenty' ), + 'description' => __( 'The color used for the overlay. Defaults to the accent color.', 'twentytwenty' ), 'section' => 'cover_template_options', ) ) @@ -316,8 +342,8 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { $wp_customize, 'cover_template_overlay_text_color', array( - 'label' => __( 'Image Overlay Text Color', 'twentytwenty' ), - 'description' => __( 'The color used for the text in the featured image overlay.', 'twentytwenty' ), + 'label' => __( 'Overlay Text Color', 'twentytwenty' ), + 'description' => __( 'The color used for the text in the overlay.', 'twentytwenty' ), 'section' => 'cover_template_options', ) ) @@ -337,7 +363,7 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { $wp_customize->add_control( 'cover_template_overlay_opacity', array( - 'label' => __( 'Image Overlay Opacity', 'twentytwenty' ), + 'label' => __( 'Overlay Opacity', 'twentytwenty' ), 'description' => __( 'Make sure that the contrast is high enough so that the text is readable.', 'twentytwenty' ), 'section' => 'cover_template_options', 'type' => 'range', @@ -383,6 +409,8 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { * * @param string $input The input from the setting. * @param object $setting The selected setting. + * + * @return string $input|$setting->default The input from the setting or the default setting. */ public static function sanitize_select( $input, $setting ) { $input = sanitize_key( $input ); @@ -393,7 +421,9 @@ if ( ! class_exists( 'TwentyTwenty_Customize' ) ) { /** * Sanitize boolean for checkbox. * - * @param bool $checked Wethere or not a blox is checked. + * @param bool $checked Whether or not a box is checked. + * + * @return bool */ public static function sanitize_checkbox( $checked ) { return ( ( isset( $checked ) && true === $checked ) ? true : false ); diff --git a/wp-content/themes/twentytwenty/classes/class-twentytwenty-svg-icons.php b/wp-content/themes/twentytwenty/classes/class-twentytwenty-svg-icons.php index 3ccccfa48d..c2d9766232 100644 --- a/wp-content/themes/twentytwenty/classes/class-twentytwenty-svg-icons.php +++ b/wp-content/themes/twentytwenty/classes/class-twentytwenty-svg-icons.php @@ -18,10 +18,17 @@ if ( ! class_exists( 'TwentyTwenty_SVG_Icons' ) ) { * Get the SVG code for the specified icon * * @param string $icon Icon name. + * @param string $group Icon group. * @param string $color Color. */ - public static function get_svg( $icon, $color = '#1A1A1B' ) { - $arr = apply_filters( 'twentytwenty_svg_icons', self::$icons ); + public static function get_svg( $icon, $group = 'ui', $color = '#1A1A1B' ) { + if ( 'ui' === $group ) { + $arr = self::$ui_icons; + } elseif ( 'social' === $group ) { + $arr = self::$social_icons; + } else { + $arr = array(); + } if ( array_key_exists( $icon, $arr ) ) { $repl = '', 'folder' => ' + ', + 'link' => ' + ', 'search' => ' @@ -82,5 +118,158 @@ if ( ! class_exists( 'TwentyTwenty_SVG_Icons' ) ) { ', ); + /** + * Social Icons – domain mappings. + * + * By default, each Icon ID is matched against a .com TLD. To override this behavior, + * specify all the domains it covers (including the .com TLD too, if applicable). + * + * @var array + */ + public static $social_icons_map = array( + 'amazon' => array( + 'amazon.com', + 'amazon.cn', + 'amazon.in', + 'amazon.fr', + 'amazon.de', + 'amazon.it', + 'amazon.nl', + 'amazon.es', + 'amazon.co', + 'amazon.ca', + ), + 'apple' => array( + 'apple.com', + 'itunes.com', + ), + 'behance' => array( + 'behance.net', + ), + 'codepen' => array( + 'codepen.io', + ), + 'facebook' => array( + 'facebook.com', + 'fb.me', + ), + 'feed' => array( + 'feed', + ), + 'google-plus' => array( + 'plus.google.com', + ), + 'lastfm' => array( + 'last.fm', + ), + 'mail' => array( + 'mailto:', + ), + 'slideshare' => array( + 'slideshare.net', + 'slideshare.com', + ), + 'pocket' => array( + 'getpocket.com', + ), + 'twitch' => array( + 'twitch.tv', + ), + 'wordpress' => array( + 'wordpress.com', + 'wordpress.org', + ), + ); + + /** + * Social Icons – svg sources. + * + * @var array + */ + public static $social_icons = array( + '500px' => '', + + 'amazon' => '', + + 'apple' => '', + + 'bandcamp' => '', + + 'behance' => '', + + 'codepen' => '', + + 'deviantart' => '', + + 'digg' => '', + + 'dribbble' => '', + + 'etsy' => '', + + 'facebook' => '', + + 'feed' => '', + + 'flickr' => '', + + 'foursquare' => '', + + 'goodreads' => '', + + 'google-plus' => '', + + 'google' => '', + + 'github' => '', + + 'instagram' => '', + + 'lastfm' => '', + + 'linkedin' => '', + + 'mail' => '', + + 'medium' => '', + + 'meetup' => '', + + 'pinterest' => '', + + 'pocket' => '', + + 'reddit' => '', + + 'skype' => '', + + 'slideshare' => '', + + 'snapchat' => '', + + 'soundcloud' => '', + + 'spotify' => '', + + 'stumbleupon' => '', + + 'tumblr' => '', + + 'twitch' => '', + + 'twitter' => '', + + 'vimeo' => '', + + 'vk' => '', + + 'wordpress' => '', + + 'yelp' => '', + + 'youtube' => '', + + ); + } } diff --git a/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-comment.php b/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-comment.php index 139a35e8c6..e3d223521c 100644 --- a/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-comment.php +++ b/wp-content/themes/twentytwenty/classes/class-twentytwenty-walker-comment.php @@ -33,7 +33,7 @@ if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) { $tag = ( 'div' === $args['style'] ) ? 'div' : 'li'; ?> - < id="comment-" has_children ? 'parent' : '', $comment ); ?>> + < id="comment-" has_children ? 'parent' : '', $comment ); ?>>
@@ -50,8 +50,11 @@ if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) { } } - /* Translators: '%1$s = comment author name */ - printf( '%1$s%2$s', esc_html( $comment_author ), __( 'says:', 'twentytwenty' ) ); // phpcs:ignore + printf( + '%1$s%2$s', + esc_html( $comment_author ), + __( 'says:', 'twentytwenty' ) + ); if ( ! empty( $comment_author_url ) ) { echo ''; @@ -71,14 +74,14 @@ if ( ! class_exists( 'TwentyTwenty_Walker_Comment' ) ) { ' . __( 'Edit', 'twentytwenty' ) . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations + echo ' • ' . __( 'Edit', 'twentytwenty' ) . ''; } ?>
-
+
comment_approved ) { ?> -

+

' . __( 'By Post Author', 'twentytwenty' ) . ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations + echo '' . __( 'By Post Author', 'twentytwenty' ) . ''; } ?> diff --git a/wp-content/themes/twentytwenty/comments.php b/wp-content/themes/twentytwenty/comments.php index 2002e9a354..7ff3a306f4 100644 --- a/wp-content/themes/twentytwenty/comments.php +++ b/wp-content/themes/twentytwenty/comments.php @@ -31,24 +31,22 @@ if ( $comments ) {

new TwentyTwenty_Walker_Comment(), @@ -80,16 +77,15 @@ if ( $comments ) { ); if ( $comment_pagination ) { + $pagination_classes = ''; // If we're only showing the "Next" link, add a class indicating so. - if ( strpos( $comment_pagination, 'prev page-numbers' ) === false ) { + if ( false === strpos( $comment_pagination, 'prev page-numbers' ) ) { $pagination_classes = ' only-next'; - } else { - $pagination_classes = ''; } ?> -

diff --git a/wp-content/themes/twentytwenty/functions.php b/wp-content/themes/twentytwenty/functions.php index e388a264a9..b3a901d17b 100644 --- a/wp-content/themes/twentytwenty/functions.php +++ b/wp-content/themes/twentytwenty/functions.php @@ -19,8 +19,8 @@ * Custom Logo * WP Body Open * Register Sidebars - * Enqueue Block editor assets - * Classic Editor Style + * Enqueue block editor assets + * Enqueue classic editor styles * Block editor settings */ @@ -60,7 +60,7 @@ function twentytwenty_theme_support() { // Set post thumbnail size. set_post_thumbnail_size( 1200, 9999 ); - // Add custom image sizes. + // Add custom image size used in Cover Template. add_image_size( 'twentytwenty-fullscreen', 1980, 9999 ); // Custom logo. @@ -174,27 +174,9 @@ require get_template_directory() . '/inc/starter-content.php'; */ function twentytwenty_register_styles() { - $theme_version = wp_get_theme()->get( 'Version' ); - $css_dependencies = array(); + $theme_version = wp_get_theme()->get( 'Version' ); - /** - * Filter to load, unload Font Awesome CSS - * - * By default, only load the Font Awesome fonts if the social menu is in use or - * using filter Font Awesome css be loaded - * - * @since 1.0.0 - * - * @param bool Whether to load font awesome, Default false. - */ - $load_font_awesome = apply_filters( 'twentytwenty_load_font_awesome', has_nav_menu( 'social' ) ); - - if ( $load_font_awesome ) { - wp_register_style( 'font-awesome', get_template_directory_uri() . '/assets/css/font-awesome.css', false, '5.10.2', 'all' ); - $css_dependencies[] = 'font-awesome'; - } - - wp_enqueue_style( 'twentytwenty-style', get_template_directory_uri() . '/style.css', $css_dependencies, $theme_version ); + wp_enqueue_style( 'twentytwenty-style', get_stylesheet_uri(), array(), $theme_version ); wp_style_add_data( 'twentytwenty-style', 'rtl', 'replace' ); // Add output of Customizer settings as inline style. @@ -247,6 +229,8 @@ add_action( 'init', 'twentytwenty_menus' ); * Get the information about the logo. * * @param string $html The HTML output from get_custom_logo (core function). + * + * @return string $html */ function twentytwenty_get_custom_logo( $html ) { @@ -302,7 +286,7 @@ if ( ! function_exists( 'wp_body_open' ) ) { * Include a skip to content link at the top of the page so that users can bypass the menu. */ function twentytwenty_skip_link() { - echo ''; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- core trusts translations + echo ''; } add_action( 'wp_body_open', 'twentytwenty_skip_link', 5 ); @@ -386,10 +370,12 @@ function twentytwenty_classic_editor_styles() { add_action( 'init', 'twentytwenty_classic_editor_styles' ); /** - * Output Customizer Settings in the Classic Editor. + * Output Customizer settings in the classic editor. * Adds styles to the head of the TinyMCE iframe. Kudos to @Otto42 for the original solution. * * @param array $mce_init TinyMCE styles. + * + * @return array $mce_init TinyMCE styles. */ function twentytwenty_add_classic_editor_customizer_styles( $mce_init ) { @@ -416,17 +402,22 @@ function twentytwenty_block_editor_settings() { // Block Editor Palette. $editor_color_palette = array( array( - 'name' => esc_html__( 'Accent Color', 'twentytwenty' ), + 'name' => __( 'Accent Color', 'twentytwenty' ), 'slug' => 'accent', 'color' => twentytwenty_get_color_for_area( 'content', 'accent' ), ), array( - 'name' => esc_html__( 'Secondary', 'twentytwenty' ), + 'name' => __( 'Primary', 'twentytwenty' ), + 'slug' => 'primary', + 'color' => twentytwenty_get_color_for_area( 'content', 'text' ), + ), + array( + 'name' => __( 'Secondary', 'twentytwenty' ), 'slug' => 'secondary', 'color' => twentytwenty_get_color_for_area( 'content', 'secondary' ), ), array( - 'name' => esc_html__( 'Subtle Background', 'twentytwenty' ), + 'name' => __( 'Subtle Background', 'twentytwenty' ), 'slug' => 'subtle-background', 'color' => twentytwenty_get_color_for_area( 'content', 'borders' ), ), @@ -449,31 +440,31 @@ function twentytwenty_block_editor_settings() { add_theme_support( 'editor-color-palette', $editor_color_palette ); } - // Gutenberg Font Sizes. + // Block Editor Font Sizes. add_theme_support( 'editor-font-sizes', array( array( - 'name' => _x( 'Small', 'Name of the small font size in Gutenberg', 'twentytwenty' ), - 'shortName' => _x( 'S', 'Short name of the small font size in the Gutenberg editor.', 'twentytwenty' ), - 'size' => 16, + 'name' => _x( 'Small', 'Name of the small font size in the block editor', 'twentytwenty' ), + 'shortName' => _x( 'S', 'Short name of the small font size in the block editor.', 'twentytwenty' ), + 'size' => 18, 'slug' => 'small', ), array( - 'name' => _x( 'Regular', 'Name of the regular font size in Gutenberg', 'twentytwenty' ), - 'shortName' => _x( 'M', 'Short name of the regular font size in the Gutenberg editor.', 'twentytwenty' ), - 'size' => 18, + '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', ), array( - 'name' => _x( 'Large', 'Name of the large font size in Gutenberg', 'twentytwenty' ), - 'shortName' => _x( 'L', 'Short name of the large font size in the Gutenberg editor.', 'twentytwenty' ), + 'name' => _x( 'Large', 'Name of the large font size in the block editor', 'twentytwenty' ), + 'shortName' => _x( 'L', 'Short name of the large font size in the block editor.', 'twentytwenty' ), 'size' => 24, 'slug' => 'large', ), array( - 'name' => _x( 'Larger', 'Name of the larger font size in Gutenberg', 'twentytwenty' ), - 'shortName' => _x( 'XL', 'Short name of the larger font size in the Gutenberg editor.', 'twentytwenty' ), + 'name' => _x( 'Larger', 'Name of the larger font size in the block editor', 'twentytwenty' ), + 'shortName' => _x( 'XL', 'Short name of the larger font size in the block editor.', 'twentytwenty' ), 'size' => 32, 'slug' => 'larger', ), @@ -498,8 +489,8 @@ function twentytwenty_read_more_tag() { return sprintf( '%2$s "%3$s"', esc_url( get_permalink( get_the_ID() ) ), - esc_html__( 'Continue reading', 'twentytwenty' ), - get_the_title( get_the_ID() ) + __( 'Continue reading', 'twentytwenty' ), + esc_html( get_the_title( get_the_ID() ) ) ); } add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' ); @@ -514,6 +505,9 @@ add_filter( 'the_content_more_link', 'twentytwenty_read_more_tag' ); function twentytwenty_customize_controls_enqueue_scripts() { $theme_version = wp_get_theme()->get( 'Version' ); + // Add main customizer js file. + wp_enqueue_script( 'twentytwenty-customize', get_template_directory_uri() . '/assets/js/customize.js', array( 'jquery' ), $theme_version, false ); + // Add script for color calculations. wp_enqueue_script( 'twentytwenty-color-calculations', get_template_directory_uri() . '/assets/js/color-calculations.js', array( 'wp-color-picker' ), $theme_version, false ); @@ -622,27 +616,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' ), - '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__button', 'input[type="button"]', 'input[type="reset"]', 'input[type="submit"]' ), - 'background-color' => array( '.bg-accent', '.bg-accent-hover:hover', '.bg-accent-hover:focus', '.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', '.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' ), + '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(), + 'background' => array( '.has-background-background-color' ), ), 'text' => array( - 'color' => array( 'body', '.entry-title a' ), + 'color' => array( 'body', '.entry-title a', '.has-primary-color' ), + 'background' => array( '.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' ), + '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' ), ), '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)' ), + 'background' => array( 'caption', 'code', 'code', 'kbd', 'samp', '.wp-block-table.is-style-stripes tbody tr:nth-child(odd)', '.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' ), ), ), 'header-footer' => array( @@ -651,7 +647,7 @@ function twentytwenty_get_elements_array() { '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"]' ), ), 'background' => array( - 'color' => array( '.social-icons a', '.overlay-header .header-inner', '.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"]' ), + 'color' => array( '.social-icons a', '.overlay-header .header-inner', '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' ), ), 'text' => array( diff --git a/wp-content/themes/twentytwenty/header.php b/wp-content/themes/twentytwenty/header.php index 651faa3530..467f602baf 100644 --- a/wp-content/themes/twentytwenty/header.php +++ b/wp-content/themes/twentytwenty/header.php @@ -9,8 +9,7 @@ * @since 1.0.0 */ -?> - +?> > @@ -31,7 +30,7 @@ wp_body_open(); ?> -
+ + + @@ -69,13 +68,13 @@ - @@ -129,7 +128,7 @@ } ?> -
+
-
+
-
-
+ +
@@ -159,11 +158,11 @@
-
+ +
diff --git a/wp-content/themes/twentytwenty/inc/custom-css.php b/wp-content/themes/twentytwenty/inc/custom-css.php index 8ad1601399..4bf3be81e7 100644 --- a/wp-content/themes/twentytwenty/inc/custom-css.php +++ b/wp-content/themes/twentytwenty/inc/custom-css.php @@ -60,11 +60,11 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { $accent = sanitize_hex_color( twentytwenty_get_color_for_area( 'content', 'accent' ) ); $accent_default = '#cd2653'; /** - * Filters the CSS selectors targetting button component on frontend to apply common css + * Filters the CSS selectors targeting button component on frontend to apply common css * * @since 1.0.0 * - * @param string $string The comma separated string of all CSS selectors targetting button component + * @param string $string The comma separated string of all CSS selectors targeting button component */ $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\']' ); @@ -102,7 +102,7 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { foreach ( $definitions as $property => $elements ) { /* * If we don't have an elements array or it is empty - * then skip this itteration early; + * then skip this iteration early; */ if ( ! is_array( $elements ) || empty( $elements ) ) { continue; @@ -120,14 +120,6 @@ if ( ! function_exists( 'twentytwenty_get_customizer_css' ) ) { twentytwenty_generate_css( '.cover-header .entry-header *', 'color', $cover ); } - // Helper Classes. - if ( $accent && $accent !== $accent_default ) { - twentytwenty_generate_css( '.color-accent, .color-accent-hover:hover, .has-accent-color', 'color', $accent ); - twentytwenty_generate_css( '.bg-accent, .bg-accent-hover:hover, .has-accent-background-color', 'background-color', $accent ); - twentytwenty_generate_css( '.border-color-accent, .border-color-accent-hover:hover', 'border-color', $accent ); - twentytwenty_generate_css( '.fill-children-accent, .fill-children-accent *', 'fill', $accent ); - } - // Block Editor Styles. } elseif ( 'block-editor' === $type ) { diff --git a/wp-content/themes/twentytwenty/inc/starter-content.php b/wp-content/themes/twentytwenty/inc/starter-content.php index d071724bfc..a35f62bc6b 100644 --- a/wp-content/themes/twentytwenty/inc/starter-content.php +++ b/wp-content/themes/twentytwenty/inc/starter-content.php @@ -22,11 +22,11 @@ function twentytwenty_get_starter_content() { // Define and register starter content to showcase the theme on new sites. $starter_content = array( 'widgets' => array( - // Place one core-defined widgets in the first tooter widget area. + // Place one core-defined widgets in the first footer widget area. 'sidebar-1' => array( 'text_about', ), - // Place one core-defined widgets in the second tooter widget area. + // Place one core-defined widgets in the second footer widget area. 'sidebar-2' => array( 'text_business_info', ), @@ -34,7 +34,101 @@ function twentytwenty_get_starter_content() { // Specify the core-defined pages to create and add custom thumbnails to some of them. 'posts' => array( - 'home', + 'front' => array( + 'post_type' => 'page', + 'post_title' => __( 'The New UMoMA Opens its Doors', 'twentytwenty' ), + 'post_content' => join( + '', + array( + '', + '
', + '

' . __( 'The premier destination for modern art in Northern Sweden. Open from 10 AM to 6 PM every day during the summer months.', 'twentytwenty' ) . '

', + '
', + '', + '', + '
', + '
', + '
', + '', + '

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

', + '', + '', + '

' . __( 'August 1 -- December 1', 'twentytwenty' ) . '

', + '', + '', + '
' . __( 'Read More', 'twentytwenty' ) . '
', + '
', + '', + '', + '
', + '', + '

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

', + '', + '', + '

' . __( 'October 1 -- December 1', 'twentytwenty' ) . '

', + '', + '', + '
' . __( 'Read More', 'twentytwenty' ) . '
', + '
', + '
', + '', + '', + '
', + '
', + '', + '

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

', + '', + '', + '

' . __( 'August 1 -- December 1', 'twentytwenty' ) . '

', + '', + '', + '
' . __( 'Read More', 'twentytwenty' ) . '
', + '
', + '', + '', + '
', + '', + '

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

', + '', + '', + '

' . __( 'October 1 -- December 1', 'twentytwenty' ) . '

', + '', + '', + '
' . __( 'Read More', 'twentytwenty' ) . '
', + '
', + '
', + '
', + '', + '', + '
', + '

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

', + '
', + '', + '', + '

' . __( 'With seven floors of striking architecture, UMoMA shows exhibitions of international contemporary art, sometimes along with art historical retrospectives. Existential, political and philosophical issues are intrinsic to our programme. As visitor you are invited to guided tours artist talks, lectures, film screenings and other events with free admission', 'twentytwenty' ) . '

', + '', + '', + '

' . __( 'The exhibitions are produced by UMoMA in collaboration with artists and museums around the world and they often attract international attention. UMoMA has received a Special Commendation from the European Museum of the Year, and was among the top candidates for the Swedish Museum of the Year Award as well as for the Council of Europe Museum Prize.', 'twentytwenty' ) . '

', + '', + '', + '

', + '', + '', + '
', + '
', + '

' . __( 'Become a Member and Get Exclusive Offers!', 'twentytwenty' ) . '

', + '', + '', + '

' . __( 'Members get access to exclusive exhibits and sales. Our memberships cost $99.99 and are billed annually.', 'twentytwenty' ) . '

', + '', + '', + '
' . __( 'Join the Club', 'twentytwenty' ) . '
', + '
', + '
', + '', + ) + ), + ), 'about', 'contact', 'blog', @@ -43,7 +137,7 @@ function twentytwenty_get_starter_content() { // Default to a static front page and assign the front and posts pages. 'options' => array( 'show_on_front' => 'page', - 'page_on_front' => '{{home}}', + 'page_on_front' => '{{front}}', 'page_for_posts' => '{{blog}}', ), diff --git a/wp-content/themes/twentytwenty/inc/svg-icons.php b/wp-content/themes/twentytwenty/inc/svg-icons.php index b2b994a1ab..75cdd38577 100644 --- a/wp-content/themes/twentytwenty/inc/svg-icons.php +++ b/wp-content/themes/twentytwenty/inc/svg-icons.php @@ -13,10 +13,11 @@ if ( ! function_exists( 'twentytwenty_the_theme_svg' ) ) { * Output and get the SVG markup for an icon in the TwentyTwenty_SVG_Icons class. * * @param string $svg_name The name of the icon. + * @param string $group The group the icon belongs to. * @param string $color Color code. */ - function twentytwenty_the_theme_svg( $svg_name, $color = '' ) { - echo twentytwenty_get_theme_svg( $svg_name, $color ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in twentytwenty_get_theme_svg();. + function twentytwenty_the_theme_svg( $svg_name, $group = 'ui', $color = '' ) { + echo twentytwenty_get_theme_svg( $svg_name, $group, $color ); //phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped in twentytwenty_get_theme_svg();. } } @@ -26,13 +27,14 @@ if ( ! function_exists( 'twentytwenty_get_theme_svg' ) ) { * Get information about the SVG icon. * * @param string $svg_name The name of the icon. + * @param string $group The group the icon belongs to. * @param string $color Color code. */ - function twentytwenty_get_theme_svg( $svg_name, $color = '' ) { + function twentytwenty_get_theme_svg( $svg_name, $group = 'ui', $color = '' ) { // Make sure that only our allowed tags and attributes are included. $svg = wp_kses( - TwentyTwenty_SVG_Icons::get_svg( $svg_name, $color ), + TwentyTwenty_SVG_Icons::get_svg( $svg_name, $group, $color ), array( 'svg' => array( 'class' => true, diff --git a/wp-content/themes/twentytwenty/inc/template-tags.php b/wp-content/themes/twentytwenty/inc/template-tags.php index b75947a344..dee633d7ce 100644 --- a/wp-content/themes/twentytwenty/inc/template-tags.php +++ b/wp-content/themes/twentytwenty/inc/template-tags.php @@ -9,17 +9,25 @@ /** * Table of Contents: + * Logo & Description * Comments * Post Meta * Menus * Classes + * Archives + * Miscellaneous */ +/** + * Logo & Description + */ /** * Displays the site logo, either text or image. * * @param array $args Arguments for displaying the site logo either as an image or text. - * @param boolean $echo Echo or return the html. + * @param boolean $echo Echo or return the HTML. + * + * @return string $html Compiled HTML based on our arguments. */ function twentytwenty_site_logo( $args = array(), $echo = true ) { $logo = get_custom_logo(); @@ -81,6 +89,8 @@ function twentytwenty_site_logo( $args = array(), $echo = true ) { * Displays the site description. * * @param boolean $echo Echo or return the html. + * + * @return string $html The HTML to display. */ function twentytwenty_site_description( $echo = true ) { $description = get_bloginfo( 'description' ); @@ -118,6 +128,8 @@ function twentytwenty_site_description( $echo = true ) { * Check if the specified comment is written by the author of the post commented on. * * @param object $comment Comment data. + * + * @return bool */ function twentytwenty_is_comment_by_post_author( $comment = null ) { @@ -142,6 +154,8 @@ function twentytwenty_is_comment_by_post_author( $comment = null ) { * makes it scroll to the wrong position on the page. * * @param string $link Link to the top of the page. + * + * @return string $link Link to the top of the page. */ function twentytwenty_filter_comment_reply_link( $link ) { @@ -168,6 +182,40 @@ function twentytwenty_the_post_meta( $post_id = null, $location = 'single-top' ) } +/** + * Filters the edit post link to add an icon and use the post meta structure. + * + * @param string $link Anchor tag for the edit link. + * @param int $post_id Post ID. + * @param string $text Anchor text. + */ +function twentytwenty_edit_post_link( $link, $post_id, $text ) { + + $edit_url = get_edit_post_link( $post_id ); + + if ( ! $edit_url ) { + return; + } + + $text = sprintf( + wp_kses( + /* translators: %s: Post title. Only visible to screen readers. */ + __( 'Edit %s', 'twentytwenty' ), + array( + 'span' => array( + 'class' => array(), + ), + ) + ), + get_the_title( $post_id ) + ); + + return '
'; + +} + +add_filter( 'edit_post_link', 'twentytwenty_edit_post_link', 10, 3 ); + /** * Get the post meta. * @@ -206,7 +254,7 @@ function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' ) /** * Filters post meta info visibility * - * Use this filter to hide post meta information like Author, Post date, Comments, Is stiky status + * Use this filter to hide post meta information like Author, Post date, Comments, Is sticky status * * @since 1.0.0 * @@ -289,14 +337,14 @@ function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' ) ?>
  • - + ' . esc_html( get_the_author_meta( 'display_name' ) ) . '' ); ?> @@ -314,7 +362,7 @@ function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' )
  • - + @@ -333,11 +381,11 @@ function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' ) ?>
  • - + - +
  • - + @@ -389,7 +437,7 @@ function twentytwenty_get_post_meta( $post_id = null, $location = 'single-top' ) - +
    • theme_location ) { + $svg = TwentyTwenty_SVG_Icons::get_social_link_svg( $item->url ); + if ( empty( $svg ) ) { + $svg = twentytwenty_get_theme_svg( 'link' ); + } + $item_output = str_replace( $args->link_after, '' . $svg, $item_output ); + } + + return $item_output; +} + +add_filter( 'walker_nav_menu_start_el', 'twentytwenty_nav_menu_social_icons', 10, 4 ); + /** * Classes */ @@ -530,58 +606,12 @@ function twentytwenty_no_js_class() { add_action( 'wp_head', 'twentytwenty_no_js_class' ); -/** - * Filters the archive title and styles the word before the first colon. - * - * @param string $title Current archive title. - */ -function twentytwenty_get_the_archive_title( $title ) { - - $regex = apply_filters( - 'twentytwenty_get_the_archive_title_regex', - array( - 'pattern' => '/(\A[^\:]+\:)/', - 'replacement' => '$1', - ) - ); - - if ( empty( $regex ) ) { - - return $title; - - } - - return preg_replace( $regex['pattern'], $regex['replacement'], $title ); - -} - -add_filter( 'get_the_archive_title', 'twentytwenty_get_the_archive_title' ); - -/** - * Filters the edit post link to add an icon and use the post meta structure. - * - * @param string $link Anchor tag for the edit link. - * @param int $post_id Post ID. - * @param string $text Anchor text. - */ -function twentytwenty_edit_post_link( $link, $post_id, $text ) { - - $edit_url = get_edit_post_link( $post_id ); - - if ( ! $edit_url ) { - return; - } - - return '
    '; - -} - -add_filter( 'edit_post_link', 'twentytwenty_edit_post_link', 10, 3 ); - /** * Add conditional body classes. * - * @param string $classes Classes added to the body tag. + * @param array $classes Classes added to the body tag. + * + * @return array $classes Classes added to the body tag. */ function twentytwenty_body_classes( $classes ) { @@ -674,6 +704,41 @@ function twentytwenty_body_classes( $classes ) { add_filter( 'body_class', 'twentytwenty_body_classes' ); +/** + * Archives + */ +/** + * Filters the archive title and styles the word before the first colon. + * + * @param string $title Current archive title. + * + * @return string $title Current archive title. + */ +function twentytwenty_get_the_archive_title( $title ) { + + $regex = apply_filters( + 'twentytwenty_get_the_archive_title_regex', + array( + 'pattern' => '/(\A[^\:]+\:)/', + 'replacement' => '$1', + ) + ); + + if ( empty( $regex ) ) { + + return $title; + + } + + return preg_replace( $regex['pattern'], $regex['replacement'], $title ); + +} + +add_filter( 'get_the_archive_title', 'twentytwenty_get_the_archive_title' ); + +/** + * Miscellaneous + */ /** * Toggle animation duration in milliseconds. * @@ -691,3 +756,26 @@ function twentytwenty_toggle_duration() { return $duration; } + +/** + * Get unique ID. + * + * This is a PHP implementation of Underscore's uniqueId method. A static variable + * contains an integer that is incremented with each call. This number is returned + * with the optional prefix. As such the returned value is not universally unique, + * but it is unique across the life of the PHP process. + * + * @see wp_unique_id() Themes requiring WordPress 5.0.3 and greater should use this instead. + * + * @staticvar int $id_counter + * + * @param string $prefix Prefix for the returned ID. + * @return string Unique ID. + */ +function twentytwenty_unique_id( $prefix = '' ) { + static $id_counter = 0; + if ( function_exists( 'wp_unique_id' ) ) { + return wp_unique_id( $prefix ); + } + return $prefix . (string) ++$id_counter; +} diff --git a/wp-content/themes/twentytwenty/index.php b/wp-content/themes/twentytwenty/index.php index 7ca0b97a06..434eae29b3 100644 --- a/wp-content/themes/twentytwenty/index.php +++ b/wp-content/themes/twentytwenty/index.php @@ -34,8 +34,16 @@ get_header(); ); if ( $wp_query->found_posts ) { - /* Translators: %s = Number of results */ - $archive_subtitle = sprintf( _nx( 'We found %s result for your search.', 'We found %s results for your search.', $wp_query->found_posts, '%s = Number of results', 'twentytwenty' ), $wp_query->found_posts ); + $archive_subtitle = sprintf( + /* translators: %s: Number of search results */ + _n( + 'We found %s result for your search.', + 'We found %s results for your search.', + $wp_query->found_posts, + 'twentytwenty' + ), + number_format_i18n( $wp_query->found_posts ) + ); } else { $archive_subtitle = __( 'We could not find any results for your search. You can give it another try through the search form below.', 'twentytwenty' ); } @@ -88,7 +96,7 @@ get_header(); _x( 'search again', 'Label', 'twentytwenty' ), + 'label' => __( 'search again', 'twentytwenty' ), ) ); ?> @@ -100,9 +108,10 @@ get_header(); ?> - + +
    method="get" class="search-form" action="">
    diff --git a/wp-content/themes/twentytwenty/singular.php b/wp-content/themes/twentytwenty/singular.php index dfbab40f2d..fcd88759bf 100644 --- a/wp-content/themes/twentytwenty/singular.php +++ b/wp-content/themes/twentytwenty/singular.php @@ -25,10 +25,10 @@ get_header(); } } - get_template_part( 'template-parts/footer-menus-widgets' ); - ?> + + diff --git a/wp-content/themes/twentytwenty/style-rtl.css b/wp-content/themes/twentytwenty/style-rtl.css index 35aa2ee644..080579d48c 100644 --- a/wp-content/themes/twentytwenty/style-rtl.css +++ b/wp-content/themes/twentytwenty/style-rtl.css @@ -117,8 +117,6 @@ html { body { background: #f5efe0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; @@ -137,8 +135,6 @@ body { *, *::before, *::after { - -webkit-box-sizing: inherit; - -moz-box-sizing: inherit; box-sizing: inherit; -webkit-font-smoothing: antialiased; word-break: break-word; @@ -178,6 +174,7 @@ path { .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; @@ -193,6 +190,7 @@ path { border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; + -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; @@ -237,8 +235,8 @@ path { /* * Chrome renders extra-wide   characters for the Hoefler Text font. - * This results in a jumping cursor when typing in both the Classic and block - * editors. The following font-face override fixes the issue by manually + * This results in a jumping cursor when typing in both the classic editor and + * block editor. The following font-face override fixes the issue by manually * inserting a custom font that includes just a Hoefler Text space replacement * for that character instead. */ @@ -711,6 +709,7 @@ button, input, textarea { border-color: #dcd7ca; + color: #000; } code, @@ -742,7 +741,6 @@ textarea { border-style: solid; border-width: 0.1rem; box-shadow: none; - color: inherit; display: block; font-size: 1.6rem; letter-spacing: -0.015em; @@ -850,13 +848,13 @@ td { line-height: 1.4; margin: 0; overflow: visible; - padding: 2.5%; + padding: 0.5em; } caption { background: #dcd7ca; font-weight: 600; - padding: 2.5%; + padding: 0.5em; text-align: center; } @@ -1004,7 +1002,6 @@ button.toggle { .no-select { -webkit-touch-callout: none; -webkit-user-select: none; - -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; @@ -1128,6 +1125,26 @@ button.toggle { opacity: 0.9; } +.blend-mode-exclusion { + mix-blend-mode: exclusion; +} + +.blend-mode-hue { + mix-blend-mode: hue; +} + +.blend-mode-saturation { + mix-blend-mode: saturation; +} + +.blend-mode-color { + mix-blend-mode: color; +} + +.blend-mode-luminosity { + mix-blend-mode: luminosity; +} + /* Image Classes ----------------------------- */ @@ -1186,17 +1203,23 @@ button.toggle { flex-shrink: 0; } +.search-form .search-submit:focus, +.search-form .search-submit:hover { + text-decoration: none; +} + /* Social Icons ------------------------------ */ ul.social-icons { display: flex; flex-wrap: wrap; - margin: -1rem -1rem 0 0; + margin: -0.9rem -0.9rem 0 0; + width: calc(100% + 0.9rem); } ul.social-icons li { - margin: 1rem 1rem 0 0; + margin: 0.9rem 0.9rem 0 0; } .social-icons a { @@ -1219,257 +1242,6 @@ ul.social-icons li { text-decoration: none; } -.social-icons a::before { - content: "\e805"; - display: block; - font-family: "Font Awesome 5"; - font-size: 2rem; -} - -/* NON-BRAND ICONS */ - -.s-icons a[href*="mailto"]::before { - content: "\f0e0"; -} - -.s-icons a[href*="/feed/"]::before, -.s-icons a[href*="rss"]::before { - content: "\f09e"; -} - -/* BRAND ICONS */ - -.s-icons a[href*="500px.com"]::before { - content: "\f26e"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="amazon.com"]::before { - content: "\f270"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="angel.co"]::before { - content: "\f209"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="audible.com"]::before { - content: "\f373"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="behance.net"]::before { - content: "\f1b4"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="blogger.com"]::before { - content: "\f37d"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="codepen.io"]::before { - content: "\f1cb"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="creativecommons.com"]::before { - content: "\f25e"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="deviantart.com"]::before { - content: "\f1bd"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="digg.com"]::before { - content: "\f1a6"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="discordapp.com"]::before { - content: "\f392"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="dribbble.com"]::before { - content: "\f17d"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="ebay"]::before { - content: "\f4f4"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="etsy.com"]::before { - content: "\f2d7"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="facebook.com"]::before { - content: "\f39e"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="flickr.com"]::before { - content: "\f16e"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="github.com"]::before { - content: "\f113"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="gitlab.com"]::before { - content: "\f296"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="goodreads.com"]::before { - content: "\f3a9"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="houzz"]::before { - content: "\f27c"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="imdb.com"]::before { - content: "\f2d8"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="instagram.com"]::before { - content: "\f16d"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="kickstarter.com"]::before { - content: "\f3bc"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="jsfiddle.net"]::before { - content: "\f1cc"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="linkedin.com"]::before { - content: "\f0e1"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="last.fm"]::before { - content: "\f202"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="medium.com"]::before { - content: "\f3c7"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="meetup.com"]::before { - content: "\f2e0"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="mixcloud.com"]::before { - content: "\f289"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="patreon.com"]::before { - content: "\f3d9"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="pscp.tv"]::before { - content: "\f3da"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="pinterest"]::before { - content: "\f231"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="play.google.com"]::before { - content: "\f3ab"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="plus.google.com"]::before { - content: "\f0d5"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="producthunt.com"]::before { - content: "\f288"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="quora.com"]::before { - content: "\f2c4"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="reddit.com"]::before { - content: "\f281"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="slack.com"]::before { - content: "\f198"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="soundcloud.com"]::before { - content: "\f1be"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="spotify.com"]::before { - content: "\f1bc"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="tumblr.com"]::before { - content: "\f173"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="twitch"]::before { - content: "\f1e8"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="twitter.com"]::before { - content: "\f099"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="vimeo.com"]::before { - content: "\f27d"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="wordpress.org"]::before, -.s-icons a[href*="wordpress.com"]::before { - content: "\f411"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="youtube.com"]::before { - content: "\f167"; - font-family: "Font Awesome 5 Brands"; -} - /* Cover Modals ------------------------------ */ @@ -1646,6 +1418,7 @@ body:not(.enable-search-modal) .site-logo img { } .toggle-icon { + display: block; overflow: hidden; } @@ -1655,7 +1428,8 @@ body:not(.enable-search-modal) .site-logo img { font-weight: 600; position: absolute; top: calc(100% + 0.5rem); - width: 10rem; + width: auto; + white-space: nowrap; word-break: break-all; } @@ -2212,6 +1986,7 @@ button.sub-menu-toggle.active svg { .search-modal-inner .section-inner { display: flex; justify-content: space-between; + max-width: 168rem; } .search-modal.active { @@ -2258,6 +2033,7 @@ button.search-untoggle { /* Modal Search Form ------------------------- */ .search-modal form { + margin: 0; position: relative; width: 100%; } @@ -2270,8 +2046,10 @@ button.search-untoggle { font-size: 2rem; letter-spacing: -0.0277em; height: 8.4rem; - padding: 0; - width: 100%; + margin: 0 -2rem 0 0; + max-width: calc(100% + 2rem); + padding: 0 2rem 0 0; + width: calc(100% + 2rem); } .search-modal .search-field::-webkit-input-placeholder { @@ -2312,6 +2090,7 @@ button.search-untoggle { .cover-header-inner-wrapper { display: flex; + position: relative; flex-direction: column; justify-content: flex-end; width: 100%; @@ -2444,7 +2223,7 @@ body.template-full-width .entry-content .alignright { /* Posts ------------------------------------- */ -body:not(.singular) main article:first-of-type { +body:not(.singular) main > article:first-of-type { padding: 4rem 0 0; } @@ -2798,6 +2577,38 @@ h2.entry-title { background-color: #cd2653; } +.has-primary-color { + color: #000; +} + +.has-primary-background-color { + background-color: #000; +} + +.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: #f5efe0; +} + +.has-background-background-color { + background-color: #f5efe0; +} + /* Block Typography Classes ------------------ */ @@ -2887,34 +2698,51 @@ h2.entry-title { /* Block: Base Margins ----------------------- */ -.wp-block-archives:not(.aligncenter):not(.alignleft):not(.alignright), -.wp-block-categories:not(.aligncenter):not(.alignleft):not(.alignright), +*[class*="_inner-container"] > *:first-child { + margin-top: 0; +} + +*[class*="_inner-container"] > *:last-child { + margin-bottom: 0; +} + +.wp-block-archives, +.wp-block-categories, .wp-block-code, -.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(.alignwide):not(.alignfull), -.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-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-preformatted, -.wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-pullquote, .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, -.wp-block-video:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) { +.wp-block-video { margin-bottom: 3rem; margin-top: 3rem; } +/* Block: Shared Nesting Alignment Resets ---- */ + +[class*="__inner-container"] .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright), +[class*="__inner-container"] .wp-block-cover:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) { + margin-right: auto; + margin-left: auto; + max-width: 58rem; +} + + /* Block: Shared Widget Styles --------------- */ .wp-block-archives, .wp-block-categories, -.wp-block-gallery ul, .wp-block-latest-posts, .wp-block-latest-comments { list-style: none; @@ -3019,6 +2847,10 @@ h2.entry-title { /* Block: Columns ---------------------------- */ +.wp-block-column { + margin-bottom: 3.2rem; +} + .wp-block-column > *:first-child { margin-top: 0; } @@ -3029,8 +2861,25 @@ h2.entry-title { /* Block: Cover ------------------------------ */ -.entry-content .wp-block-cover p { - font-family: inherit; +.wp-block-cover-image .wp-block-cover__inner-container, +.wp-block-cover .wp-block-cover__inner-container { + width: calc(100% - 4rem); + padding: 2rem 0; +} + +.wp-block-cover-image .wp-block-cover-image-text, +.wp-block-cover-image .wp-block-cover-text, +.wp-block-cover-image h2, +.wp-block-cover .wp-block-cover-image-text, +.wp-block-cover .wp-block-cover-text, +.wp-block-cover h2 { + max-width: 100%; + padding: 0; +} + +.wp-block-cover-image h2, +.wp-block-cover h2 { + font-size: 3.2rem; } /* Block: Embed ------------------------------ */ @@ -3081,20 +2930,41 @@ ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignl margin-right: 0; } +.wp-block-gallery ul { + list-style: none; + margin: 0 0 -1.6rem 0; +} + +figure.wp-block-gallery.alignnone, +figure.wp-block-gallery.aligncenter { + margin-bottom: 3rem; + margin-top: 3rem; +} + +figure.wp-block-gallery.alignleft { + margin: 0.3rem 0 2rem 2rem; +} + +figure.wp-block-gallery.alignright { + margin: 0.3rem 2rem 2rem 0; +} + +figure.wp-block-gallery.alignwide { + margin-bottom: 4rem; + margin-top: 4rem; +} + +figure.wp-block-gallery.alignfull { + margin-bottom: 5rem; + margin-top: 5rem; +} + /* Block: Group ------------------------------ */ .wp-block-group.has-background { padding: 2rem; } -.wp-block-group__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-group__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-group__inner-container { margin: 0 auto; } @@ -3149,6 +3019,11 @@ ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignl width: 4.4rem; } +.reduced-spacing .wp-block-pullquote::before { + border: 0.1rem solid currentColor; + font-size: 5.9rem; +} + .wp-block-pullquote blockquote { border: none; margin: 0; @@ -3300,8 +3175,6 @@ hr.wp-block-separator { padding: 0 0 0 2rem; } -/* STYLE: DEFAULT */ - /* STYLE: LARGE */ .wp-block-quote.is-large, @@ -3313,10 +3186,11 @@ hr.wp-block-separator { .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-family: inherit; + font-size: 2.4rem; font-style: normal; font-weight: 700; - letter-spacing: -0.035714286em; - line-height: 1.285714286; + letter-spacing: -0.02em; + line-height: 1.285; } .wp-block-quote.is-large cite, @@ -3399,10 +3273,6 @@ hr.wp-block-separator { max-width: 58rem; } -.entry-content > * { - margin-bottom: 1.25em; -} - .entry-content > *:first-child { margin-top: 0; } @@ -3470,37 +3340,14 @@ hr.wp-block-separator { /* Alignment Classes ------------------------- */ -.alignnone, -.aligncenter, -.alignleft, -.alignright, -.alignwide, -.alignfull { - margin: 3rem 0; -} - .alignnone, .aligncenter, .alignleft, .alignright { + margin: 3rem 0; max-width: 100%; } -.alignfull { - margin: 5rem 0; - max-width: 100vw; - position: relative; - right: calc(50% - 50vw); - width: 100vw; -} - -.alignwide { - max-width: calc(100vw - 4rem); - position: relative; - right: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); -} - .aligncenter, .aligncenter img { margin-right: auto; @@ -3513,20 +3360,43 @@ hr.wp-block-separator { } .alignleft { - float: right; + float: left; margin: 0.3rem 0 2rem 2rem; } .alignright { - float: left; + float: right; margin: 0.3rem 2rem 2rem 0; } +.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 { +.alignfull > figcaption, +.alignfull > .wp-caption-text { margin-right: auto; margin-left: auto; max-width: 120rem; @@ -3643,60 +3513,20 @@ div.comment:first-of-type { /* COMMENT CONTENT */ -.comment-content > *:first-child { - margin-top: 0; + +.comment-content.entry-content .alignleft { + margin-right: 0; } -.comment-content > *:last-child { - margin-bottom: 0; +.comment-content.entry-content .alignright { + margin-left: 0; } -.comment-content p, -.comment-content ol, -.comment-content ul, -.comment-content dl, -.comment-content dt { - font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif; - letter-spacing: normal; -} - -.comment-content cite, -.comment-content figcaption, -.comment-content .wp-caption-text { - font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; -} - -@supports ( font-variation-settings: normal ) { - - .comment-content cite, - .comment-content figcaption, - .comment-content .wp-caption-text { - font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; - } -} - -.comment-content h1 { - font-size: 2em; -} - -.comment-content h2 { - font-size: 1.8em; -} - -.comment-content h3 { - font-size: 1.6em; -} - -.comment-content h4 { - font-size: 1.4em; -} - -.comment-content h5 { - font-size: 1.2em; -} - -.comment-content h6 { - font-size: 1em; +.comment-content.entry-content > .alignwide, +.comment-content.entry-content > .alignfull { + right: auto; + max-width: 100%; + width: auto; } /* COMMENT FOOTER */ @@ -4182,7 +4012,7 @@ div.comment:first-of-type { /* Widget: RSS ------------------------------- */ -.widget_rss .rss-widget-icon { +.widget_rss a.rsswidget:first-of-type { display: none; } @@ -4239,6 +4069,9 @@ div.comment:first-of-type { .footer-nav-widgets-wrapper, #site-footer { background-color: #fff; + border-color: #dedfdf; + border-style: solid; + border-width: 0; } .footer-top-visible .footer-nav-widgets-wrapper, @@ -4248,7 +4081,7 @@ div.comment:first-of-type { .reduced-spacing.footer-top-visible .footer-nav-widgets-wrapper, .reduced-spacing.footer-top-hidden #site-footer { - border-top: 0.1rem solid #dedfdf; + border-top-width: 0.1rem; } .footer-top, @@ -4291,6 +4124,11 @@ div.comment:first-of-type { /* FOOTER SOCIAL */ .footer-social-wrapper { + margin: 0; + width: 100%; +} + +.has-footer-menu .footer-social-wrapper { flex-shrink: 0; margin-right: 1rem; width: 50%; @@ -4298,6 +4136,9 @@ div.comment:first-of-type { ul.footer-social { margin: -0.5rem -0.5rem 0 0; +} + +.has-footer-menu .footer-social { justify-content: flex-end; } @@ -4382,7 +4223,27 @@ a.to-the-top > * { @media ( max-width: 479px ) { - /* Lists ------------------------------------- */ + /* Blocks -------------------------------- */ + + .wp-block-pullquote.alignleft, + .wp-block-pullquote.alignright { + float: none; + margin: 3rem 0; + } + + .wp-block-pullquote.alignleft:first-child, + .wp-block-pullquote.alignright:first-child { + margin-top: 0; + } + + .wp-block-pullquote.alignleft:last-child, + .wp-block-pullquote.alignright:last-child { + margin-bottom: 0; + } + + /* Entry Content ------------------------- */ + + /* LISTS */ ul, ol { @@ -4421,32 +4282,100 @@ a.to-the-top > * { .alignright { max-width: 26rem; } +} - .alignleft { - float: right; +@media ( max-width: 599px ) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + /* While columns are stacked */ + .wp-block-column:last-child { + margin-bottom: 0; } - .alignright { - float: left; + .wp-block-columns + .wp-block-columns { + margin-top: 0.2rem; + } + + .wp-block-columns.alignwide + .wp-block-columns.alignwide { + margin-top: -0.8rem; + } + + .wp-block-columns.alignfull + .wp-block-columns.alignfull { + margin-top: -1.8rem; + } + +} + +@media ( min-width: 600px ) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + .wp-block-columns.alignwide + .wp-block-columns.alignwide, + .wp-block-columns.alignfull + .wp-block-columns.alignfull { + margin-top: -4rem; + } + +} + +@media ( max-width: 599px ) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + .alignfull .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 ) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + .alignfull .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-group__inner-container > p:not(.has-background-color) { + padding-left: 2rem; } } @media ( min-width: 660px ) { + /* Blocks -------------------------------- */ + + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignleft { + margin-left: calc(( 100vw - 58rem - 8rem ) / -2); + } + + figure.wp-block-gallery.alignright { + margin-right: calc(( 100vw - 58rem - 8rem ) / -2); + } + /* Entry Content ------------------------- */ /* ALIGNMENT CLASSES */ - .entry-content > .alignleft, - .entry-content > p .alignleft, - .entry-content > .wp-block-image .alignleft { - margin-right: calc(( 100vw - 58rem - 8rem ) / -2); + .entry-content .alignleft { + margin-left: calc(( 100vw - 58rem - 8rem ) / -2); } - .entry-content > .alignright, - .entry-content > p .alignright, - .entry-content > .wp-block-image .alignright { - margin-left: calc(( 100vw - 58rem - 8rem ) / -2); + .entry-content .alignright { + margin-right: calc(( 100vw - 58rem - 8rem ) / -2); } } @@ -4660,23 +4589,7 @@ a.to-the-top > * { } .modal-menu ul li { - border-right-width: 0; - } - - .modal-menu ul a { - padding-right: 2.5rem; - } - - .modal-menu ul ul a { - padding-right: 5rem; - } - - .modal-menu ul ul ul a { - padding-right: 7.5rem; - } - - .modal-menu ul ul ul ul a { - padding-right: 10rem; + border-right-color: transparent; } .modal-menu > li > .ancestor-wrapper > button.sub-menu-toggle { @@ -4765,7 +4678,7 @@ a.to-the-top > * { font-size: 3.2rem; } - body:not(.singular) main article:first-of-type { + body:not(.singular) main > article:first-of-type { padding: 8rem 0 0; } @@ -4906,24 +4819,24 @@ a.to-the-top > * { /* BLOCK: BASE MARGINS */ - .wp-block-archives:not(.aligncenter):not(.alignleft):not(.alignright), - .wp-block-categories:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-archives, + .wp-block-categories, .wp-block-code, - .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(.alignwide):not(.alignfull), - .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-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-preformatted, - .wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-pullquote, .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, - .wp-block-video:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) { + .wp-block-video { margin-bottom: 5rem; margin-top: 5rem; } @@ -4932,7 +4845,7 @@ a.to-the-top > * { .wp-block-columns.alignwide + .wp-block-columns.alignwide, .wp-block-columns.alignfull + .wp-block-columns.alignfull { - margin-top: -2rem; + margin-top: -6rem; } .entry-content .wp-block-columns h1, @@ -4944,6 +4857,32 @@ a.to-the-top > * { margin: 3.5rem 0 2rem; } + /* BLOCK: COVER */ + + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover__inner-container { + width: calc(100% - 8rem); + } + + .wp-block-cover-image h2, + .wp-block-cover h2 { + font-size: 4.8rem; + } + + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignnone, + figure.wp-block-gallery.aligncenter { + margin-bottom: 4rem; + margin-top: 4rem; + } + + figure.wp-block-gallery.alignwide, + figure.wp-block-gallery.alignfull { + margin-bottom: 6rem; + margin-top: 6rem; + } + /* BLOCK: GROUP */ .wp-block-group.has-background { @@ -5003,6 +4942,13 @@ a.to-the-top > * { font-size: 2.6rem; } + /* BLOCK: QUOTE */ + + .wp-block-quote.is-large p, + .wp-block-quote.is-style-large p { + font-size: 2.8rem; + } + /* BLOCK: SEPARATOR */ hr.wp-block-separator { @@ -5052,7 +4998,7 @@ a.to-the-top > * { margin-top: 6rem; } - .alignwide { + .entry-content > .alignwide { max-width: calc(100vw - 8rem); right: calc(50% - 50vw + 4rem); width: calc(100vw - 8rem); @@ -5060,8 +5006,8 @@ a.to-the-top > * { /* ENTRY MEDIA */ - .alignfull figcaption, - .alignfull .wp-caption-text { + .alignfull > figcaption, + .alignfull > .wp-caption-text { width: calc(100% - 8rem); } @@ -5089,10 +5035,6 @@ a.to-the-top > * { padding-top: 5rem; } - .comment-content { - font-size: 2.1rem; - } - div.comment:first-of-type { margin-top: 5rem; } @@ -5221,7 +5163,8 @@ a.to-the-top > * { margin: 0.8rem 1.6rem 0 0; } - .footer-social-wrapper { + .has-footer-menu .footer-social-wrapper { + flex: 1; margin-right: 4rem; width: auto; } @@ -5287,6 +5230,23 @@ a.to-the-top > * { } +@media (min-width: 782px) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + .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-group__inner-container > p:not(.has-background-color) { + padding-left: 2rem; + } +} + @media ( min-width: 1000px ) { @@ -5411,6 +5371,27 @@ a.to-the-top > * { width: auto; } + .header-toggles:only-child .nav-toggle .toggle-inner { + padding-top: 0; + } + + .header-toggles:only-child .toggle-inner { + display: flex; + flex-wrap: nowrap; + align-items: center; + } + + .header-toggles:only-child .toggle-inner .svg-icon { + order: 1; + } + + .header-toggles:only-child .toggle-inner .toggle-text { + position: static; + padding-left: 20px; + font-size: 15px; + color: inherit; + } + /* Menu Modal ---------------------------- */ .menu-modal { @@ -5488,7 +5469,15 @@ a.to-the-top > * { .wp-block-columns.alignwide + .wp-block-columns.alignwide, .wp-block-columns.alignfull + .wp-block-columns.alignfull { - margin-top: -4rem; + margin-top: -5.2rem; + } + + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignwide, + figure.wp-block-gallery.alignfull { + margin-bottom: 8rem; + margin-top: 8rem; } /* BLOCK: GROUP */ @@ -5516,8 +5505,8 @@ a.to-the-top > * { /* ENTRY MEDIA */ - .alignfull figcaption, - .alignfull .wp-caption-text { + .alignfull > figcaption, + .alignfull > .wp-caption-text { width: calc(100% - 10rem); } @@ -5649,6 +5638,13 @@ a.to-the-top > * { margin-top: -6rem; } + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignfull { + margin-bottom: 10rem; + margin-top: 10rem; + } + /* BLOCK: GROUP */ .wp-block-group.alignwide.has-background, @@ -5752,6 +5748,16 @@ a.to-the-top > * { /* Blocks -------------------------------- */ + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignleft { + margin-left: -31rem; + } + + figure.wp-block-gallery.alignright { + margin-right: -31rem; + } + /* BLOCK: SEPARATOR */ .wp-block-separator.is-style-wide { @@ -5764,19 +5770,15 @@ a.to-the-top > * { /* ALIGNMENT CLASSES */ - .entry-content > .alignleft, - .entry-content > p .alignleft, - .entry-content > .wp-block-image .alignleft { - margin-right: -31rem; - } - - .entry-content > .alignright, - .entry-content > p .alignright, - .entry-content > .wp-block-image .alignright { + .entry-content .alignleft { margin-left: -31rem; } - .alignwide { + .entry-content .alignright { + margin-right: -31rem; + } + + .entry-content > .alignwide { max-width: 120rem; right: calc(50% - 60rem); width: 120rem; diff --git a/wp-content/themes/twentytwenty/style.css b/wp-content/themes/twentytwenty/style.css index 594e2a22c7..a9793258a6 100644 --- a/wp-content/themes/twentytwenty/style.css +++ b/wp-content/themes/twentytwenty/style.css @@ -117,8 +117,6 @@ html { body { background: #f5efe0; - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; box-sizing: border-box; color: #000; font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; @@ -137,8 +135,6 @@ body { *, *::before, *::after { - -webkit-box-sizing: inherit; - -moz-box-sizing: inherit; box-sizing: inherit; -webkit-font-smoothing: antialiased; word-break: break-word; @@ -178,6 +174,7 @@ path { .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); + -webkit-clip-path: inset(50%); clip-path: inset(50%); height: 1px; margin: -1px; @@ -193,6 +190,7 @@ path { border-radius: 3px; box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6); clip: auto !important; + -webkit-clip-path: none; clip-path: none; color: #21759b; display: block; @@ -237,8 +235,8 @@ path { /* * Chrome renders extra-wide   characters for the Hoefler Text font. - * This results in a jumping cursor when typing in both the Classic and block - * editors. The following font-face override fixes the issue by manually + * This results in a jumping cursor when typing in both the classic editor and + * block editor. The following font-face override fixes the issue by manually * inserting a custom font that includes just a Hoefler Text space replacement * for that character instead. */ @@ -711,6 +709,7 @@ button, input, textarea { border-color: #dcd7ca; + color: #000; } code, @@ -744,7 +743,6 @@ textarea { border-style: solid; border-width: 0.1rem; box-shadow: none; - color: inherit; display: block; font-size: 1.6rem; letter-spacing: -0.015em; @@ -852,13 +850,13 @@ td { line-height: 1.4; margin: 0; overflow: visible; - padding: 2.5%; + padding: 0.5em; } caption { background: #dcd7ca; font-weight: 600; - padding: 2.5%; + padding: 0.5em; text-align: center; } @@ -1006,7 +1004,6 @@ button.toggle { .no-select { -webkit-touch-callout: none; -webkit-user-select: none; - -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; @@ -1130,6 +1127,26 @@ button.toggle { opacity: 0.9; } +.blend-mode-exclusion { + mix-blend-mode: exclusion; +} + +.blend-mode-hue { + mix-blend-mode: hue; +} + +.blend-mode-saturation { + mix-blend-mode: saturation; +} + +.blend-mode-color { + mix-blend-mode: color; +} + +.blend-mode-luminosity { + mix-blend-mode: luminosity; +} + /* Image Classes ----------------------------- */ @@ -1188,17 +1205,23 @@ button.toggle { flex-shrink: 0; } +.search-form .search-submit:focus, +.search-form .search-submit:hover { + text-decoration: none; +} + /* Social Icons ------------------------------ */ ul.social-icons { display: flex; flex-wrap: wrap; - margin: -1rem 0 0 -1rem; + margin: -0.9rem 0 0 -0.9rem; + width: calc(100% + 0.9rem); } ul.social-icons li { - margin: 1rem 0 0 1rem; + margin: 0.9rem 0 0 0.9rem; } .social-icons a { @@ -1221,257 +1244,6 @@ ul.social-icons li { text-decoration: none; } -.social-icons a::before { - content: "\e805"; - display: block; - font-family: "Font Awesome 5"; - font-size: 2rem; -} - -/* NON-BRAND ICONS */ - -.s-icons a[href*="mailto"]::before { - content: "\f0e0"; -} - -.s-icons a[href*="/feed/"]::before, -.s-icons a[href*="rss"]::before { - content: "\f09e"; -} - -/* BRAND ICONS */ - -.s-icons a[href*="500px.com"]::before { - content: "\f26e"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="amazon.com"]::before { - content: "\f270"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="angel.co"]::before { - content: "\f209"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="audible.com"]::before { - content: "\f373"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="behance.net"]::before { - content: "\f1b4"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="blogger.com"]::before { - content: "\f37d"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="codepen.io"]::before { - content: "\f1cb"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="creativecommons.com"]::before { - content: "\f25e"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="deviantart.com"]::before { - content: "\f1bd"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="digg.com"]::before { - content: "\f1a6"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="discordapp.com"]::before { - content: "\f392"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="dribbble.com"]::before { - content: "\f17d"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="ebay"]::before { - content: "\f4f4"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="etsy.com"]::before { - content: "\f2d7"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="facebook.com"]::before { - content: "\f39e"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="flickr.com"]::before { - content: "\f16e"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="github.com"]::before { - content: "\f113"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="gitlab.com"]::before { - content: "\f296"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="goodreads.com"]::before { - content: "\f3a9"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="houzz"]::before { - content: "\f27c"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="imdb.com"]::before { - content: "\f2d8"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="instagram.com"]::before { - content: "\f16d"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="kickstarter.com"]::before { - content: "\f3bc"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="jsfiddle.net"]::before { - content: "\f1cc"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="linkedin.com"]::before { - content: "\f0e1"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="last.fm"]::before { - content: "\f202"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="medium.com"]::before { - content: "\f3c7"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="meetup.com"]::before { - content: "\f2e0"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="mixcloud.com"]::before { - content: "\f289"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="patreon.com"]::before { - content: "\f3d9"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="pscp.tv"]::before { - content: "\f3da"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="pinterest"]::before { - content: "\f231"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="play.google.com"]::before { - content: "\f3ab"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="plus.google.com"]::before { - content: "\f0d5"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="producthunt.com"]::before { - content: "\f288"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="quora.com"]::before { - content: "\f2c4"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="reddit.com"]::before { - content: "\f281"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="slack.com"]::before { - content: "\f198"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="soundcloud.com"]::before { - content: "\f1be"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="spotify.com"]::before { - content: "\f1bc"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="tumblr.com"]::before { - content: "\f173"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="twitch"]::before { - content: "\f1e8"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="twitter.com"]::before { - content: "\f099"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="vimeo.com"]::before { - content: "\f27d"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="wordpress.org"]::before, -.s-icons a[href*="wordpress.com"]::before { - content: "\f411"; - font-family: "Font Awesome 5 Brands"; -} - -.s-icons a[href*="youtube.com"]::before { - content: "\f167"; - font-family: "Font Awesome 5 Brands"; -} - /* Cover Modals ------------------------------ */ @@ -1648,6 +1420,7 @@ body:not(.enable-search-modal) .site-logo img { } .toggle-icon { + display: block; overflow: hidden; } @@ -1657,7 +1430,8 @@ body:not(.enable-search-modal) .site-logo img { font-weight: 600; position: absolute; top: calc(100% + 0.5rem); - width: 10rem; + width: auto; + white-space: nowrap; word-break: break-all; } @@ -2214,6 +1988,7 @@ button.sub-menu-toggle.active svg { .search-modal-inner .section-inner { display: flex; justify-content: space-between; + max-width: 168rem; } .search-modal.active { @@ -2260,6 +2035,7 @@ button.search-untoggle { /* Modal Search Form ------------------------- */ .search-modal form { + margin: 0; position: relative; width: 100%; } @@ -2272,8 +2048,10 @@ button.search-untoggle { font-size: 2rem; letter-spacing: -0.0277em; height: 8.4rem; - padding: 0; - width: 100%; + margin: 0 0 0 -2rem; + max-width: calc(100% + 2rem); + padding: 0 0 0 2rem; + width: calc(100% + 2rem); } .search-modal .search-field::-webkit-input-placeholder { @@ -2314,6 +2092,7 @@ button.search-untoggle { .cover-header-inner-wrapper { display: flex; + position: relative; flex-direction: column; justify-content: flex-end; width: 100%; @@ -2446,7 +2225,7 @@ body.template-full-width .entry-content .alignright { /* Posts ------------------------------------- */ -body:not(.singular) main article:first-of-type { +body:not(.singular) main > article:first-of-type { padding: 4rem 0 0; } @@ -2800,6 +2579,38 @@ h2.entry-title { background-color: #cd2653; } +.has-primary-color { + color: #000; +} + +.has-primary-background-color { + background-color: #000; +} + +.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: #f5efe0; +} + +.has-background-background-color { + background-color: #f5efe0; +} + /* Block Typography Classes ------------------ */ @@ -2889,34 +2700,51 @@ h2.entry-title { /* Block: Base Margins ----------------------- */ -.wp-block-archives:not(.aligncenter):not(.alignleft):not(.alignright), -.wp-block-categories:not(.aligncenter):not(.alignleft):not(.alignright), +*[class*="_inner-container"] > *:first-child { + margin-top: 0; +} + +*[class*="_inner-container"] > *:last-child { + margin-bottom: 0; +} + +.wp-block-archives, +.wp-block-categories, .wp-block-code, -.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(.alignwide):not(.alignfull), -.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-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-preformatted, -.wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), +.wp-block-pullquote, .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, -.wp-block-video:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) { +.wp-block-video { margin-bottom: 3rem; margin-top: 3rem; } +/* Block: Shared Nesting Alignment Resets ---- */ + +[class*="__inner-container"] .wp-block-group:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright), +[class*="__inner-container"] .wp-block-cover:not(.alignfull):not(.alignwide):not(.alignleft):not(.alignright) { + margin-left: auto; + margin-right: auto; + max-width: 58rem; +} + + /* Block: Shared Widget Styles --------------- */ .wp-block-archives, .wp-block-categories, -.wp-block-gallery ul, .wp-block-latest-posts, .wp-block-latest-comments { list-style: none; @@ -3021,6 +2849,10 @@ h2.entry-title { /* Block: Columns ---------------------------- */ +.wp-block-column { + margin-bottom: 3.2rem; +} + .wp-block-column > *:first-child { margin-top: 0; } @@ -3031,8 +2863,25 @@ h2.entry-title { /* Block: Cover ------------------------------ */ -.entry-content .wp-block-cover p { - font-family: inherit; +.wp-block-cover-image .wp-block-cover__inner-container, +.wp-block-cover .wp-block-cover__inner-container { + width: calc(100% - 4rem); + padding: 2rem 0; +} + +.wp-block-cover-image .wp-block-cover-image-text, +.wp-block-cover-image .wp-block-cover-text, +.wp-block-cover-image h2, +.wp-block-cover .wp-block-cover-image-text, +.wp-block-cover .wp-block-cover-text, +.wp-block-cover h2 { + max-width: 100%; + padding: 0; +} + +.wp-block-cover-image h2, +.wp-block-cover h2 { + font-size: 3.2rem; } /* Block: Embed ------------------------------ */ @@ -3083,20 +2932,41 @@ ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignl margin-left: 0; } +.wp-block-gallery ul { + list-style: none; + margin: 0 0 -1.6rem 0; +} + +figure.wp-block-gallery.alignnone, +figure.wp-block-gallery.aligncenter { + margin-bottom: 3rem; + margin-top: 3rem; +} + +figure.wp-block-gallery.alignleft { + margin: 0.3rem 2rem 2rem 0; +} + +figure.wp-block-gallery.alignright { + margin: 0.3rem 0 2rem 2rem; +} + +figure.wp-block-gallery.alignwide { + margin-bottom: 4rem; + margin-top: 4rem; +} + +figure.wp-block-gallery.alignfull { + margin-bottom: 5rem; + margin-top: 5rem; +} + /* Block: Group ------------------------------ */ .wp-block-group.has-background { padding: 2rem; } -.wp-block-group__inner-container > *:first-child { - margin-top: 0; -} - -.wp-block-group__inner-container > *:last-child { - margin-bottom: 0; -} - .wp-block-group__inner-container { margin: 0 auto; } @@ -3151,6 +3021,11 @@ ul.wp-block-gallery:not(.alignwide):not(.alignfull):not(.alignright):not(.alignl width: 4.4rem; } +.reduced-spacing .wp-block-pullquote::before { + border: 0.1rem solid currentColor; + font-size: 5.9rem; +} + .wp-block-pullquote blockquote { border: none; margin: 0; @@ -3302,8 +3177,6 @@ hr.wp-block-separator { padding: 0 2rem 0 0; } -/* STYLE: DEFAULT */ - /* STYLE: LARGE */ .wp-block-quote.is-large, @@ -3315,10 +3188,11 @@ hr.wp-block-separator { .wp-block-quote.is-large p, .wp-block-quote.is-style-large p { font-family: inherit; + font-size: 2.4rem; font-style: normal; font-weight: 700; - letter-spacing: -0.035714286em; - line-height: 1.285714286; + letter-spacing: -0.02em; + line-height: 1.285; } .wp-block-quote.is-large cite, @@ -3401,10 +3275,6 @@ hr.wp-block-separator { max-width: 58rem; } -.entry-content > * { - margin-bottom: 1.25em; -} - .entry-content > *:first-child { margin-top: 0; } @@ -3472,37 +3342,14 @@ hr.wp-block-separator { /* Alignment Classes ------------------------- */ -.alignnone, -.aligncenter, -.alignleft, -.alignright, -.alignwide, -.alignfull { - margin: 3rem 0; -} - .alignnone, .aligncenter, .alignleft, .alignright { + margin: 3rem 0; max-width: 100%; } -.alignfull { - margin: 5rem 0; - max-width: 100vw; - position: relative; - left: calc(50% - 50vw); - width: 100vw; -} - -.alignwide { - max-width: calc(100vw - 4rem); - position: relative; - left: calc(50% - 50vw + 2rem); - width: calc(100vw - 4rem); -} - .aligncenter, .aligncenter img { margin-left: auto; @@ -3515,20 +3362,47 @@ hr.wp-block-separator { } .alignleft { + + /*rtl:ignore*/ float: left; margin: 0.3rem 2rem 2rem 0; } .alignright { + + /*rtl:ignore*/ float: right; margin: 0.3rem 0 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 { +.alignfull > figcaption, +.alignfull > .wp-caption-text { margin-left: auto; margin-right: auto; max-width: 120rem; @@ -3645,60 +3519,20 @@ div.comment:first-of-type { /* COMMENT CONTENT */ -.comment-content > *:first-child { - margin-top: 0; + +.comment-content.entry-content .alignleft { + margin-left: 0; } -.comment-content > *:last-child { - margin-bottom: 0; +.comment-content.entry-content .alignright { + margin-right: 0; } -.comment-content p, -.comment-content ol, -.comment-content ul, -.comment-content dl, -.comment-content dt { - font-family: NonBreakingSpaceOverride, "Hoefler Text", Garamond, "Times New Roman", serif; - letter-spacing: normal; -} - -.comment-content cite, -.comment-content figcaption, -.comment-content .wp-caption-text { - font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; -} - -@supports ( font-variation-settings: normal ) { - - .comment-content cite, - .comment-content figcaption, - .comment-content .wp-caption-text { - font-family: "Inter var", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, sans-serif; - } -} - -.comment-content h1 { - font-size: 2em; -} - -.comment-content h2 { - font-size: 1.8em; -} - -.comment-content h3 { - font-size: 1.6em; -} - -.comment-content h4 { - font-size: 1.4em; -} - -.comment-content h5 { - font-size: 1.2em; -} - -.comment-content h6 { - font-size: 1em; +.comment-content.entry-content > .alignwide, +.comment-content.entry-content > .alignfull { + left: auto; + max-width: 100%; + width: auto; } /* COMMENT FOOTER */ @@ -4184,7 +4018,7 @@ div.comment:first-of-type { /* Widget: RSS ------------------------------- */ -.widget_rss .rss-widget-icon { +.widget_rss a.rsswidget:first-of-type { display: none; } @@ -4241,6 +4075,9 @@ div.comment:first-of-type { .footer-nav-widgets-wrapper, #site-footer { background-color: #fff; + border-color: #dedfdf; + border-style: solid; + border-width: 0; } .footer-top-visible .footer-nav-widgets-wrapper, @@ -4250,7 +4087,7 @@ div.comment:first-of-type { .reduced-spacing.footer-top-visible .footer-nav-widgets-wrapper, .reduced-spacing.footer-top-hidden #site-footer { - border-top: 0.1rem solid #dedfdf; + border-top-width: 0.1rem; } .footer-top, @@ -4293,6 +4130,11 @@ div.comment:first-of-type { /* FOOTER SOCIAL */ .footer-social-wrapper { + margin: 0; + width: 100%; +} + +.has-footer-menu .footer-social-wrapper { flex-shrink: 0; margin-left: 1rem; width: 50%; @@ -4300,6 +4142,9 @@ div.comment:first-of-type { ul.footer-social { margin: -0.5rem 0 0 -0.5rem; +} + +.has-footer-menu .footer-social { justify-content: flex-end; } @@ -4384,7 +4229,27 @@ a.to-the-top > * { @media ( max-width: 479px ) { - /* Lists ------------------------------------- */ + /* Blocks -------------------------------- */ + + .wp-block-pullquote.alignleft, + .wp-block-pullquote.alignright { + float: none; + margin: 3rem 0; + } + + .wp-block-pullquote.alignleft:first-child, + .wp-block-pullquote.alignright:first-child { + margin-top: 0; + } + + .wp-block-pullquote.alignleft:last-child, + .wp-block-pullquote.alignright:last-child { + margin-bottom: 0; + } + + /* Entry Content ------------------------- */ + + /* LISTS */ ul, ol { @@ -4423,31 +4288,107 @@ a.to-the-top > * { .alignright { max-width: 26rem; } +} - .alignleft { - float: left; +@media ( max-width: 599px ) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + /* While columns are stacked */ + .wp-block-column:last-child { + margin-bottom: 0; } - .alignright { - float: right; + .wp-block-columns + .wp-block-columns { + margin-top: 0.2rem; + } + + .wp-block-columns.alignwide + .wp-block-columns.alignwide { + margin-top: -0.8rem; + } + + .wp-block-columns.alignfull + .wp-block-columns.alignfull { + margin-top: -1.8rem; + } + +} + +@media ( min-width: 600px ) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + .wp-block-columns.alignwide + .wp-block-columns.alignwide, + .wp-block-columns.alignfull + .wp-block-columns.alignfull { + margin-top: -4rem; + } + +} + +@media ( max-width: 599px ) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + .alignfull .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 ) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + .alignfull .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-group__inner-container > p:not(.has-background-color) { + padding-right: 2rem; } } @media ( min-width: 660px ) { + /* Blocks -------------------------------- */ + + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignleft { + + /*rtl:ignore*/ + margin-left: calc(( 100vw - 58rem - 8rem ) / -2); + } + + figure.wp-block-gallery.alignright { + + /*rtl:ignore*/ + margin-right: calc(( 100vw - 58rem - 8rem ) / -2); + } + /* Entry Content ------------------------- */ /* ALIGNMENT CLASSES */ - .entry-content > .alignleft, - .entry-content > p .alignleft, - .entry-content > .wp-block-image .alignleft { + .entry-content .alignleft { + + /*rtl:ignore*/ margin-left: calc(( 100vw - 58rem - 8rem ) / -2); } - .entry-content > .alignright, - .entry-content > p .alignright, - .entry-content > .wp-block-image .alignright { + .entry-content .alignright { + + /*rtl:ignore*/ margin-right: calc(( 100vw - 58rem - 8rem ) / -2); } @@ -4662,23 +4603,7 @@ a.to-the-top > * { } .modal-menu ul li { - border-left-width: 0; - } - - .modal-menu ul a { - padding-left: 2.5rem; - } - - .modal-menu ul ul a { - padding-left: 5rem; - } - - .modal-menu ul ul ul a { - padding-left: 7.5rem; - } - - .modal-menu ul ul ul ul a { - padding-left: 10rem; + border-left-color: transparent; } .modal-menu > li > .ancestor-wrapper > button.sub-menu-toggle { @@ -4767,7 +4692,7 @@ a.to-the-top > * { font-size: 3.2rem; } - body:not(.singular) main article:first-of-type { + body:not(.singular) main > article:first-of-type { padding: 8rem 0 0; } @@ -4908,24 +4833,24 @@ a.to-the-top > * { /* BLOCK: BASE MARGINS */ - .wp-block-archives:not(.aligncenter):not(.alignleft):not(.alignright), - .wp-block-categories:not(.aligncenter):not(.alignleft):not(.alignright), + .wp-block-archives, + .wp-block-categories, .wp-block-code, - .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(.alignwide):not(.alignfull), - .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-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-preformatted, - .wp-block-pullquote:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter), + .wp-block-pullquote, .wp-block-quote, .wp-block-quote.is-large, .wp-block-quote.is-style-large, .wp-block-verse, - .wp-block-video:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.aligncenter) { + .wp-block-video { margin-bottom: 5rem; margin-top: 5rem; } @@ -4934,7 +4859,7 @@ a.to-the-top > * { .wp-block-columns.alignwide + .wp-block-columns.alignwide, .wp-block-columns.alignfull + .wp-block-columns.alignfull { - margin-top: -2rem; + margin-top: -6rem; } .entry-content .wp-block-columns h1, @@ -4946,6 +4871,32 @@ a.to-the-top > * { margin: 3.5rem 0 2rem; } + /* BLOCK: COVER */ + + .wp-block-cover-image .wp-block-cover__inner-container, + .wp-block-cover .wp-block-cover__inner-container { + width: calc(100% - 8rem); + } + + .wp-block-cover-image h2, + .wp-block-cover h2 { + font-size: 4.8rem; + } + + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignnone, + figure.wp-block-gallery.aligncenter { + margin-bottom: 4rem; + margin-top: 4rem; + } + + figure.wp-block-gallery.alignwide, + figure.wp-block-gallery.alignfull { + margin-bottom: 6rem; + margin-top: 6rem; + } + /* BLOCK: GROUP */ .wp-block-group.has-background { @@ -5005,6 +4956,13 @@ a.to-the-top > * { font-size: 2.6rem; } + /* BLOCK: QUOTE */ + + .wp-block-quote.is-large p, + .wp-block-quote.is-style-large p { + font-size: 2.8rem; + } + /* BLOCK: SEPARATOR */ hr.wp-block-separator { @@ -5054,7 +5012,7 @@ a.to-the-top > * { margin-top: 6rem; } - .alignwide { + .entry-content > .alignwide { max-width: calc(100vw - 8rem); left: calc(50% - 50vw + 4rem); width: calc(100vw - 8rem); @@ -5062,8 +5020,8 @@ a.to-the-top > * { /* ENTRY MEDIA */ - .alignfull figcaption, - .alignfull .wp-caption-text { + .alignfull > figcaption, + .alignfull > .wp-caption-text { width: calc(100% - 8rem); } @@ -5091,10 +5049,6 @@ a.to-the-top > * { padding-top: 5rem; } - .comment-content { - font-size: 2.1rem; - } - div.comment:first-of-type { margin-top: 5rem; } @@ -5223,7 +5177,8 @@ a.to-the-top > * { margin: 0.8rem 0 0 1.6rem; } - .footer-social-wrapper { + .has-footer-menu .footer-social-wrapper { + flex: 1; margin-left: 4rem; width: auto; } @@ -5289,6 +5244,23 @@ a.to-the-top > * { } +@media (min-width: 782px) { + + /* Blocks -------------------------------- */ + + /* BLOCK: COLUMNS */ + + .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-group__inner-container > p:not(.has-background-color) { + padding-right: 2rem; + } +} + @media ( min-width: 1000px ) { @@ -5413,6 +5385,27 @@ a.to-the-top > * { width: auto; } + .header-toggles:only-child .nav-toggle .toggle-inner { + padding-top: 0; + } + + .header-toggles:only-child .toggle-inner { + display: flex; + flex-wrap: nowrap; + align-items: center; + } + + .header-toggles:only-child .toggle-inner .svg-icon { + order: 1; + } + + .header-toggles:only-child .toggle-inner .toggle-text { + position: static; + padding-right: 20px; + font-size: 15px; + color: inherit; + } + /* Menu Modal ---------------------------- */ .menu-modal { @@ -5490,7 +5483,15 @@ a.to-the-top > * { .wp-block-columns.alignwide + .wp-block-columns.alignwide, .wp-block-columns.alignfull + .wp-block-columns.alignfull { - margin-top: -4rem; + margin-top: -5.2rem; + } + + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignwide, + figure.wp-block-gallery.alignfull { + margin-bottom: 8rem; + margin-top: 8rem; } /* BLOCK: GROUP */ @@ -5518,8 +5519,8 @@ a.to-the-top > * { /* ENTRY MEDIA */ - .alignfull figcaption, - .alignfull .wp-caption-text { + .alignfull > figcaption, + .alignfull > .wp-caption-text { width: calc(100% - 10rem); } @@ -5651,6 +5652,13 @@ a.to-the-top > * { margin-top: -6rem; } + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignfull { + margin-bottom: 10rem; + margin-top: 10rem; + } + /* BLOCK: GROUP */ .wp-block-group.alignwide.has-background, @@ -5754,6 +5762,20 @@ a.to-the-top > * { /* Blocks -------------------------------- */ + /* BLOCK: GALLERY */ + + figure.wp-block-gallery.alignleft { + + /*rtl:ignore*/ + margin-left: -31rem; + } + + figure.wp-block-gallery.alignright { + + /*rtl:ignore*/ + margin-right: -31rem; + } + /* BLOCK: SEPARATOR */ .wp-block-separator.is-style-wide { @@ -5766,19 +5788,19 @@ a.to-the-top > * { /* ALIGNMENT CLASSES */ - .entry-content > .alignleft, - .entry-content > p .alignleft, - .entry-content > .wp-block-image .alignleft { + .entry-content .alignleft { + + /*rtl:ignore*/ margin-left: -31rem; } - .entry-content > .alignright, - .entry-content > p .alignright, - .entry-content > .wp-block-image .alignright { + .entry-content .alignright { + + /*rtl:ignore*/ margin-right: -31rem; } - .alignwide { + .entry-content > .alignwide { max-width: 120rem; left: calc(50% - 60rem); width: 120rem; diff --git a/wp-content/themes/twentytwenty/template-parts/content-cover.php b/wp-content/themes/twentytwenty/template-parts/content-cover.php index 6322ad3f88..74a8a334f5 100644 --- a/wp-content/themes/twentytwenty/template-parts/content-cover.php +++ b/wp-content/themes/twentytwenty/template-parts/content-cover.php @@ -44,7 +44,7 @@ $color_overlay_classes .= ' opacity-' . $color_overlay_opacity; ?> -
    > +
    >
    >
    @@ -67,7 +67,7 @@ ?>
    - +
    @@ -85,7 +85,7 @@ -
    +
    @@ -133,11 +133,12 @@
    '', + 'before' => '', + 'link_before' => '', + 'link_after' => '', ) ); diff --git a/wp-content/themes/twentytwenty/template-parts/content.php b/wp-content/themes/twentytwenty/template-parts/content.php index 50dbf6f9f4..662a61602f 100644 --- a/wp-content/themes/twentytwenty/template-parts/content.php +++ b/wp-content/themes/twentytwenty/template-parts/content.php @@ -40,11 +40,12 @@
    '', + 'before' => '', + 'link_before' => '', + 'link_after' => '', ) ); 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 629c657130..28c6dd12ac 100644 --- a/wp-content/themes/twentytwenty/template-parts/entry-author-bio.php +++ b/wp-content/themes/twentytwenty/template-parts/entry-author-bio.php @@ -16,8 +16,8 @@ if ( (bool) get_the_author_meta( 'description' ) ) : ?> @@ -26,7 +26,7 @@ if ( (bool) get_the_author_meta( 'description' ) ) : ?>

    diff --git a/wp-content/themes/twentytwenty/template-parts/entry-header.php b/wp-content/themes/twentytwenty/template-parts/entry-header.php index 856f877ee4..1f685503cc 100644 --- a/wp-content/themes/twentytwenty/template-parts/entry-header.php +++ b/wp-content/themes/twentytwenty/template-parts/entry-header.php @@ -33,7 +33,7 @@ if ( is_singular() ) { ?>
    - +
    @@ -59,7 +59,7 @@ if ( is_singular() ) { if ( has_excerpt() && is_singular() ) { ?> -
    +
    diff --git a/wp-content/themes/twentytwenty/template-parts/featured-image.php b/wp-content/themes/twentytwenty/template-parts/featured-image.php index ac77f557da..03e48df42f 100644 --- a/wp-content/themes/twentytwenty/template-parts/featured-image.php +++ b/wp-content/themes/twentytwenty/template-parts/featured-image.php @@ -19,7 +19,7 @@ if ( has_post_thumbnail() && ! post_password_required() ) {
    -
    +
    -
    +
    -
    diff --git a/wp-content/themes/twentytwenty/template-parts/modal-menu.php b/wp-content/themes/twentytwenty/template-parts/modal-menu.php index 6face01ff0..c84cceac91 100644 --- a/wp-content/themes/twentytwenty/template-parts/modal-menu.php +++ b/wp-content/themes/twentytwenty/template-parts/modal-menu.php @@ -17,8 +17,8 @@
    - @@ -45,7 +45,7 @@ ?> -