diff --git a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css index 441fb52e60..ce79fb9c85 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie-editor.css @@ -27,6 +27,7 @@ /* Block: Pull quote */ /* Block: Table */ /* Widgets */ + /* Admin-bar height */ } /** @@ -86,26 +87,9 @@ } blockquote { - margin: 0; padding: 0; -} - -blockquote p { - font-size: 1.5rem; - letter-spacing: normal; - line-height: 1.3; -} - -blockquote cite { - color: #28303d; - font-size: 1rem; - letter-spacing: normal; -} - -blockquote footer { - color: #28303d; - font-size: 1rem; - letter-spacing: normal; + position: relative; + margin: 30px 0 30px 25px; } blockquote > * { @@ -121,6 +105,29 @@ blockquote > *:last-child { margin-bottom: 0; } +blockquote p { + letter-spacing: normal; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 1.25rem; + font-style: normal; + font-weight: 700; + line-height: 1.7; +} + +blockquote cite { + font-weight: normal; + color: #28303d; + font-size: 1rem; + letter-spacing: normal; +} + +blockquote footer { + font-weight: normal; + color: #28303d; + font-size: 1rem; + letter-spacing: normal; +} + blockquote.alignleft, blockquote.alignright { padding-left: inherit; } @@ -157,6 +164,45 @@ blockquote.alignright footer { letter-spacing: normal; } +blockquote strong { + font-weight: normal; +} + +blockquote:before { + content: "\201C"; + font-size: 1.25rem; + line-height: 1.7; + position: absolute; + left: -12px; +} + +blockquote .wp-block-quote__citation { + color: #28303d; + font-size: 1rem; + font-style: normal; +} + +blockquote cite { + color: #28303d; + font-size: 1rem; + font-style: normal; +} + +blockquote footer { + color: #28303d; + font-size: 1rem; + font-style: normal; +} + +@media only screen and (max-width: 481px) { + blockquote { + padding-left: 13px; + } + blockquote:before { + left: 0; + } +} + img { display: block; height: auto; @@ -256,8 +302,26 @@ a:hover { } .site a:focus { - outline: 2px solid #28303d; - text-decoration: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + background: rgba(255, 255, 255, 0.9); +} + +.has-background-dark .site a:focus { + color: #d1e4dd; +} + +.has-background-dark .site a:focus .meta-nav { + color: #d1e4dd; +} + +.has-background-white .site a:focus { + background: rgba(0, 0, 0, 0.9); + color: #fff; +} + +.has-background-white .site a:focus .meta-nav { + color: #fff; } .site a:focus.skip-link { @@ -266,6 +330,15 @@ a:hover { outline-offset: -2px; } +.site a:focus.skip-link:focus { + color: #21759b; + background-color: #f1f1f1; +} + +.site a:focus img { + outline: 2px dotted #28303d; +} + .has-background:not(.has-background-background-color) .has-link-color a { color: #28303d; } @@ -304,10 +377,19 @@ a:hover { } .wp-block-button__link:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .wp-block-button__link:focus { + color: #39414d; +} + +.wp-block-button__link:focus:not(.has-background) { + color: #39414d; +} + .wp-block-button__link:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); @@ -339,10 +421,6 @@ a:hover { padding: 15px 30px; } -.wp-block-button.is-style-outline .wp-block-button__link:visited { - color: #39414d; -} - .wp-block-button.is-style-outline .wp-block-button__link:active { background-color: #39414d; color: #d1e4dd; @@ -434,6 +512,11 @@ a:hover { margin-bottom: inherit; } +.wp-block-cover:not(.alignwide):not(.alignfull), +.wp-block-cover-image:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -585,6 +668,10 @@ a:hover { border: 3px solid #28303d; } +.wp-block-columns:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-columns .wp-block, .wp-block-columns .wp-block-column { max-width: inherit; @@ -647,37 +734,37 @@ a:hover { } } -.wp-block[data-align="full"] p:not(.has-background) { +.wp-block[data-align="full"] .wp-block-columns p:not(.has-background) { padding-left: 20px; padding-right: 20px; } -.wp-block[data-align="full"] h1:not(.has-background) { +.wp-block[data-align="full"] .wp-block-columns h1:not(.has-background) { padding-left: 20px; padding-right: 20px; } -.wp-block[data-align="full"] h2:not(.has-background) { +.wp-block[data-align="full"] .wp-block-columns h2:not(.has-background) { padding-left: 20px; padding-right: 20px; } -.wp-block[data-align="full"] h3:not(.has-background) { +.wp-block[data-align="full"] .wp-block-columns h3:not(.has-background) { padding-left: 20px; padding-right: 20px; } -.wp-block[data-align="full"] h4:not(.has-background) { +.wp-block[data-align="full"] .wp-block-columns h4:not(.has-background) { padding-left: 20px; padding-right: 20px; } -.wp-block[data-align="full"] h5:not(.has-background) { +.wp-block[data-align="full"] .wp-block-columns h5:not(.has-background) { padding-left: 20px; padding-right: 20px; } -.wp-block[data-align="full"] h6:not(.has-background) { +.wp-block[data-align="full"] .wp-block-columns h6:not(.has-background) { padding-left: 20px; padding-right: 20px; } @@ -724,10 +811,19 @@ a:hover { } .wp-block-file .wp-block-file__button:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .wp-block-file .wp-block-file__button:focus { + color: #39414d; +} + +.wp-block-file .wp-block-file__button:focus:not(.has-background) { + color: #39414d; +} + .wp-block-file .wp-block-file__button:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); @@ -743,6 +839,10 @@ a:hover { margin-bottom: 0; } +.wp-block-gallery figcaption a { + color: #fff; +} + .wp-block-group { display: block; clear: both; @@ -764,7 +864,13 @@ a:hover { padding: 30px; } -.wp-block-group .wp-block-group__inner-container *:last-child { +.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align="full"] { + max-width: calc(100% + 60px); + width: calc(100% + 60px); + margin-left: -30px; +} + +.wp-block-group .wp-block-group__inner-container > *:last-child { margin-bottom: 0; } @@ -1242,7 +1348,7 @@ h6 { } .wp-block-latest-comments { - margin-left: 0; + padding-left: 0; } .wp-block-latest-posts { @@ -1262,6 +1368,11 @@ h6 { margin-bottom: 0; } +.wp-block-latest-posts.is-grid { + word-wrap: break-word; + word-break: break-word; +} + .wp-block-latest-posts.is-grid > li { margin-bottom: 30px; } @@ -1481,9 +1592,16 @@ dt { font-weight: bold; } -.wp-block-media-text .block-editor-inner-blocks { - padding-right: 25px; - padding-left: 25px; +.wp-block-media-text .wp-block-media-text__content { + padding: 25px; +} + +.wp-block-media-text .wp-block-media-text__content [data-block]:first-child { + margin-top: 0; +} + +.wp-block-media-text .wp-block-media-text__content [data-block]:last-child { + margin-bottom: 0; } .wp-block-media-text.is-style-twentytwentyone-border { @@ -2019,10 +2137,19 @@ pre.wp-block-preformatted { } .wp-block-search .wp-block-search__button:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .wp-block-search .wp-block-search__button:focus { + color: #39414d; +} + +.wp-block-search .wp-block-search__button:focus:not(.has-background) { + color: #39414d; +} + .wp-block-search .wp-block-search__button:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); @@ -2070,8 +2197,43 @@ hr[style*="text-align: right"] { border-right-color: #28303d; } -.wp-block-separator:not(.is-style-dots), +.wp-block-separator:not(.is-style-dots) { + max-width: calc(100vw - 30px); +} + +@media only screen and (min-width: 482px){ + .wp-block-separator:not(.is-style-dots){ + max-width: min(calc(100vw - 100px), 610px); + } +} + +@media only screen and (min-width: 822px){ + .wp-block-separator:not(.is-style-dots){ + max-width: min(calc(100vw - 200px), 610px); + } +} + hr:not(.is-style-dots) { + max-width: calc(100vw - 30px); +} + +@media only screen and (min-width: 482px){ + hr:not(.is-style-dots){ + max-width: min(calc(100vw - 100px), 610px); + } +} + +@media only screen and (min-width: 822px){ + hr:not(.is-style-dots){ + max-width: min(calc(100vw - 200px), 610px); + } +} + +[data-align="full"] > .wp-block-separator, +[data-align="wide"] > .wp-block-separator, [data-align="full"] > +hr, +[data-align="wide"] > +hr { max-width: inherit; } @@ -2122,8 +2284,9 @@ hr { border-color: currentColor; } -.wp-block-social-links li.wp-block-social-link:first-child { - margin-top: auto; +.wp-block-social-links [data-block] { + margin-top: 0; + margin-bottom: 0; } .wp-block-social-links.is-style-twentytwentyone-social-icons-color button { @@ -2796,4 +2959,4 @@ a { .has-red-to-purple-gradient-background { background: linear-gradient(160deg, #e4d1d1, #d1d1e4); } -/*# sourceMappingURL=ie-editor.css.map */ \ No newline at end of file +/*# sourceMappingURL=ie-editor.css.map */ diff --git a/wp-content/themes/twentytwentyone/assets/css/ie.css b/wp-content/themes/twentytwentyone/assets/css/ie.css index 5261455818..9a825147fb 100644 --- a/wp-content/themes/twentytwentyone/assets/css/ie.css +++ b/wp-content/themes/twentytwentyone/assets/css/ie.css @@ -118,6 +118,7 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL. /* Block: Pull quote */ /* Block: Table */ /* Widgets */ + /* Admin-bar height */ } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ @@ -1206,26 +1207,9 @@ button { /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */ blockquote { - margin: 0; padding: 0; -} - -blockquote p { - font-size: 1.5rem; - letter-spacing: normal; - line-height: 1.3; -} - -blockquote cite { - color: #28303d; - font-size: 1rem; - letter-spacing: normal; -} - -blockquote footer { - color: #28303d; - font-size: 1rem; - letter-spacing: normal; + position: relative; + margin: 30px 0 30px 25px; } blockquote > * { @@ -1241,6 +1225,29 @@ blockquote > *:last-child { margin-bottom: 0; } +blockquote p { + letter-spacing: normal; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; + font-size: 1.25rem; + font-style: normal; + font-weight: 700; + line-height: 1.7; +} + +blockquote cite { + font-weight: normal; + color: #28303d; + font-size: 1rem; + letter-spacing: normal; +} + +blockquote footer { + font-weight: normal; + color: #28303d; + font-size: 1rem; + letter-spacing: normal; +} + blockquote.alignleft, blockquote.alignright { padding-left: inherit; } @@ -1277,6 +1284,45 @@ blockquote.alignright footer { letter-spacing: normal; } +blockquote strong { + font-weight: normal; +} + +blockquote:before { + content: "\201C"; + font-size: 1.25rem; + line-height: 1.7; + position: absolute; + left: -12px; +} + +blockquote .wp-block-quote__citation { + color: #28303d; + font-size: 1rem; + font-style: normal; +} + +blockquote cite { + color: #28303d; + font-size: 1rem; + font-style: normal; +} + +blockquote footer { + color: #28303d; + font-size: 1rem; + font-style: normal; +} + +@media only screen and (max-width: 481px) { + blockquote { + padding-left: 13px; + } + blockquote:before { + left: 0; + } +} + input[type="text"] { border: 3px solid #39414d; border-radius: 0; @@ -1959,8 +2005,26 @@ a:hover { } .site a:focus { - outline: 2px solid #28303d; - text-decoration: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + background: rgba(255, 255, 255, 0.9); +} + +.has-background-dark .site a:focus { + color: #d1e4dd; +} + +.has-background-dark .site a:focus .meta-nav { + color: #d1e4dd; +} + +.has-background-white .site a:focus { + background: rgba(0, 0, 0, 0.9); + color: #fff; +} + +.has-background-white .site a:focus .meta-nav { + color: #fff; } .site a:focus.skip-link { @@ -1969,6 +2033,15 @@ a:hover { outline-offset: -2px; } +.site a:focus.skip-link:focus { + color: #21759b; + background-color: #f1f1f1; +} + +.site a:focus img { + outline: 2px dotted #28303d; +} + .has-background:not(.has-background-background-color) .has-link-color a { color: #28303d; } @@ -2112,10 +2185,55 @@ input[type="submit"]:focus, input[type="reset"]:focus, .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .site .button:focus { + color: #39414d; +} + +.has-background-dark +input[type="submit"]:focus { + color: #39414d; +} + +.has-background-dark +input[type="reset"]:focus { + color: #39414d; +} + +.has-background-dark +.wp-block-search__button:focus { + color: #39414d; +} + +.has-background-dark +.wp-block-button .wp-block-button__link:focus { + color: #39414d; +} + +.site .button:focus:not(.has-background) { + color: #39414d; +} + +input[type="submit"]:focus:not(.has-background) { + color: #39414d; +} + +input[type="reset"]:focus:not(.has-background) { + color: #39414d; +} + +.wp-block-search__button:focus:not(.has-background) { + color: #39414d; +} + +.wp-block-button .wp-block-button__link:focus:not(.has-background) { + color: #39414d; +} + .site .button:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); @@ -2243,10 +2361,6 @@ input[type="reset"]:hover { color: #39414d; } -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):visited { - color: #39414d; -} - .wp-block-button.is-style-outline .wp-block-button__link.has-background { border: 3px solid currentColor; } @@ -2326,6 +2440,10 @@ input[type="reset"]:hover { display: block; } +.wp-block-columns:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-columns .wp-block-column > * { margin-top: 20px; margin-bottom: 20px; @@ -2360,9 +2478,8 @@ input[type="reset"]:hover { } } -@media only screen and (min-width: 652px) { +@media only screen and (min-width: 822px) { .wp-block-columns .wp-block-column:not(:last-child) { - /* Resetting margins to match _block-container.scss */ margin-bottom: 0; } } @@ -2464,7 +2581,7 @@ input[type="reset"]:hover { } .wp-block-cover { - background-color: #fff; + background-color: #000; min-height: 450px; margin-top: inherit; margin-bottom: inherit; @@ -2474,7 +2591,7 @@ input[type="reset"]:hover { } .wp-block-cover-image { - background-color: #fff; + background-color: #000; min-height: 450px; margin-top: inherit; margin-bottom: inherit; @@ -2483,6 +2600,11 @@ input[type="reset"]:hover { /* Block Styles */ } +.wp-block-cover:not(.alignwide):not(.alignfull), +.wp-block-cover-image:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-cover .wp-block-cover__inner-container { color: currentColor; margin-top: 30px; @@ -2740,8 +2862,11 @@ input[type="reset"]:hover { } .wp-block-file a.wp-block-file__button:visited { + color: #d1e4dd; +} + +.wp-block-file a.wp-block-file__button:visited:hover { color: #39414d; - opacity: inherit; } .wp-block-file .wp-block-file__button { @@ -2775,10 +2900,19 @@ input[type="reset"]:hover { } .wp-block-file .wp-block-file__button:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .wp-block-file .wp-block-file__button:focus { + color: #39414d; +} + +.wp-block-file .wp-block-file__button:focus:not(.has-background) { + color: #39414d; +} + .wp-block-file .wp-block-file__button:disabled { background-color: rgba(255, 255, 255, 0.5); border-color: rgba(255, 255, 255, 0.5); @@ -2809,6 +2943,31 @@ input[type="reset"]:hover { font-size: 1rem; } +.wp-block-gallery .blocks-gallery-image figcaption a { + color: #fff; +} + +.wp-block-gallery .blocks-gallery-item figcaption a { + color: #fff; +} + +.wp-block-gallery .blocks-gallery-image figcaption a:focus { + background-color: transparent; + outline: 2px solid #28303d; + text-decoration: none; +} + +.wp-block-gallery .blocks-gallery-item figcaption a:focus { + background-color: transparent; + outline: 2px solid #28303d; + text-decoration: none; +} + +.wp-block-gallery .blocks-gallery-image a:focus img, +.wp-block-gallery .blocks-gallery-item a:focus img { + outline-offset: 2px; +} + .wp-block-group { display: block; clear: both; @@ -2861,6 +3020,30 @@ input[type="reset"]:hover { padding: 30px; } +.wp-block-group.has-background .wp-block-group__inner-container > .alignfull { + max-width: calc(100% + 60px); + width: calc(100% + 60px); + margin-left: -30px; +} + +.wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { + max-width: calc(100% + 60px); + width: calc(100% + 60px); + margin-left: -30px; +} + +.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull { + max-width: calc(100% + 60px); + width: calc(100% + 60px); + margin-left: -30px; +} + +.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { + max-width: calc(100% + 60px); + width: calc(100% + 60px); + margin-left: -30px; +} + h1 { clear: both; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -3128,6 +3311,10 @@ h6 { margin-right: 25px; } +.wp-block-image a:focus img { + outline-offset: 2px; +} + .entry-content > *[class="wp-block-image"], .entry-content [class*="inner-container"] > *[class="wp-block-image"] { margin-top: 0; @@ -3157,8 +3344,23 @@ img { padding: 20px; } +@media only screen and (min-width: 482px) { + .entry-content > .wp-block-image > .alignleft, + .entry-content > .wp-block-image > .alignright { + max-width: 50%; + } +} + +@media only screen and (max-width: 481px) { + .entry-content > .wp-block-image > .alignleft, + .entry-content > .wp-block-image > .alignright { + margin-left: 0; + margin-right: 0; + } +} + .wp-block-latest-comments { - margin-left: 0; + padding-left: 0; } .wp-block-latest-comments .wp-block-latest-comments__comment { @@ -3209,6 +3411,11 @@ img { margin-bottom: 0; } +.wp-block-latest-posts.is-grid { + word-wrap: break-word; + word-break: break-word; +} + .wp-block-latest-posts.is-grid > li { margin-bottom: 30px; } @@ -3383,6 +3590,10 @@ img { display: block; } +.gallery-item a:focus img { + outline-offset: -2px; +} + .gallery-columns-2 .gallery-item { max-width: 50%; } @@ -3419,6 +3630,10 @@ img { display: block; } +figure.wp-caption a:focus img { + outline-offset: 2px; +} + ul { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; margin: 0; @@ -3468,6 +3683,10 @@ dd { */ } +.wp-block-media-text a:focus img { + outline-offset: -1px; +} + .wp-block-media-text .wp-block-media-text__content { padding: 25px; } @@ -3820,64 +4039,11 @@ pre.wp-block-preformatted { } .wp-block-quote { - position: relative; - margin: 30px 0 30px 25px; /** * Block Options */ } -.wp-block-quote > * { - margin-top: 20px; - margin-bottom: 20px; -} - -.wp-block-quote > *:first-child { - margin-top: 0; -} - -.wp-block-quote > *:last-child { - margin-bottom: 0; -} - -.wp-block-quote p { - font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; - font-size: 1.25rem; - font-style: normal; - font-weight: 700; - line-height: 1.7; -} - -.wp-block-quote strong { - font-weight: normal; -} - -.wp-block-quote:before { - content: "\201C"; - font-size: 1.25rem; - line-height: 1.7; - position: absolute; - left: -12px; -} - -.wp-block-quote .wp-block-quote__citation { - color: #28303d; - font-size: 1rem; - font-style: normal; -} - -.wp-block-quote cite { - color: #28303d; - font-size: 1rem; - font-style: normal; -} - -.wp-block-quote footer { - color: #28303d; - font-size: 1rem; - font-style: normal; -} - .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, [class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, [style*="background-color"] .wp-block-quote .wp-block-quote__citation, @@ -4051,12 +4217,6 @@ pre.wp-block-preformatted { } @media only screen and (max-width: 481px) { - .wp-block-quote { - padding-left: 13px; - } - .wp-block-quote:before { - left: 0; - } .wp-block-quote.has-text-align-right { padding-left: 0; padding-right: 13px; @@ -4938,9 +5098,6 @@ a.custom-logo-link { margin-top: 0; top: 0; } - .admin-bar .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { - top: 46px; - } .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { display: none; } @@ -5924,10 +6081,20 @@ h1.page-title { transform: translateY(0) translateX(100%); } .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { + top: 32px; + } + @media only screen and (max-width: 782px){ + .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container{ top: 46px; + } } .admin-bar .primary-navigation > .primary-menu-container { + height: calc(100vh - 32px); + } + @media only screen and (max-width: 782px){ + .admin-bar .primary-navigation > .primary-menu-container{ height: calc(100vh - 46px); + } } .primary-navigation > .primary-menu-container:focus { border: 2px solid #28303d; @@ -5955,10 +6122,6 @@ h1.page-title { } } -.admin-bar .primary-navigation { - top: 46px; -} - @media only screen and (min-width: 482px) { .primary-navigation { position: relative; @@ -6110,6 +6273,42 @@ h1.page-title { .primary-navigation > div > .menu-wrapper > li > .sub-menu li { background: #d1e4dd; } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left { + /* rtl:ignore */ + left: 0; + /* rtl:ignore */ + right: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before { + /* rtl:ignore */ + left: 25px; + /* rtl:ignore */ + right: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after { + /* rtl:ignore */ + left: 25px; + /* rtl:ignore */ + right: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right { + /* rtl:ignore */ + right: 0; + /* rtl:ignore */ + left: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before { + /* rtl:ignore */ + left: auto; + /* rtl:ignore */ + right: 25px; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after { + /* rtl:ignore */ + left: auto; + /* rtl:ignore */ + right: 25px; + } } .primary-navigation .primary-menu > .menu-item:hover > a { @@ -6272,8 +6471,8 @@ h1.page-title { } .footer-navigation { - margin-top: 30px; - margin-bottom: 60px; + margin-top: 60px; + margin-bottom: 30px; color: #28303d; font-size: 1rem; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; @@ -6365,6 +6564,10 @@ h1.page-title { flex-direction: column; } +.navigation .nav-links .dots { + text-align: center; +} + @media only screen and (min-width: 592px) { .navigation .nav-links { display: flex; @@ -6497,11 +6700,20 @@ h1.page-title { } } +.pagination .nav-links { + margin-top: -30px; +} + +.comments-pagination .nav-links { + margin-top: -30px; +} + .pagination .nav-links > * { color: #28303d; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.5rem; font-weight: normal; + margin-top: 30px; margin-left: 13px; margin-right: 13px; } @@ -6511,6 +6723,7 @@ h1.page-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif; font-size: 1.5rem; font-weight: normal; + margin-top: 30px; margin-left: 13px; margin-right: 13px; } @@ -6551,7 +6764,7 @@ h1.page-title { margin-right: auto; } -@media only screen and (max-width: 591px) { +@media only screen and (max-width: 821px) { .pagination .nav-links, .comments-pagination .nav-links { display: flex; @@ -7016,4 +7229,4 @@ footer { .is-IE .post-thumbnail .wp-post-image { min-width: auto; } -/*# sourceMappingURL=ie.css.map */ \ No newline at end of file +/*# sourceMappingURL=ie.css.map */ diff --git a/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css new file mode 100644 index 0000000000..b7f45bf7d0 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css @@ -0,0 +1,95 @@ +/* OS dark theme preference */ +html.is-dark-mode { + --global--color-background: var(--global--color-dark-gray); + --global--color-primary: var(--global--color-light-gray); + --global--color-secondary: var(--global--color-light-gray); + --button--color-text: var(--global--color-background); + --button--color-text-hover: var(--global--color-secondary); + --button--color-text-active: var(--global--color-secondary); + --button--color-background: var(--global--color-secondary); + --button--color-background-active: var(--global--color-background); +} + +html.is-dark-mode body { + background-color: var(--global--color-background); +} + +html.is-dark-mode .site a:focus { + background: #000; +} + +html.is-dark-mode img { + filter: brightness(0.85) contrast(1.1); +} + +#dark-mode-toggler { + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + font-size: var(--global--font-size-xs); + padding: 0.5em; + min-height: 44px; + min-width: max-content; + border: 2px solid currentColor; + box-shadow: none; + background: var(--button--color-text); + color: var(--button--color-background); + z-index: 9998; +} + +.wp-admin #dark-mode-toggler { + z-index: 99999; + /* Necessary for the editor. */ +} + +#dark-mode-toggler.fixed-bottom { + position: fixed; + bottom: 5px; + right: 5px; +} + +#dark-mode-toggler.relative { + position: absolute; + height: 44px; + top: calc(2.4 * var(--global--spacing-vertical) - 44px); + right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em); +} + +.admin-bar #dark-mode-toggler.relative { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px); +} + +@media only screen and (max-width: 782px) { + .admin-bar #dark-mode-toggler.relative { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px); + } +} + +@media only screen and (max-width: 481px) { + .admin-bar #dark-mode-toggler.relative { + top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px); + } +} + +@media only screen and (max-width: 481px) { + body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav { + top: calc(44px + 44px); + } +} + +.primary-navigation-open #dark-mode-toggler { + display: none; +} + +#dark-mode-toggler:hover, #dark-mode-toggler:focus { + color: var(--button--color-background-active); + border: 2px solid var(--button--color-text-active); + background-color: var(--button--color-text-active); +} + +.is-IE #dark-mode-toggler { + display: none; +} + +/*# sourceMappingURL=style-dark-mode.css.map */ \ No newline at end of file diff --git a/wp-content/themes/twentytwentyone/assets/css/style-editor.css b/wp-content/themes/twentytwentyone/assets/css/style-editor.css index 8e70b1131d..774ce22597 100644 --- a/wp-content/themes/twentytwentyone/assets/css/style-editor.css +++ b/wp-content/themes/twentytwentyone/assets/css/style-editor.css @@ -197,6 +197,18 @@ --widget--line-height-title: 1.4; --widget--font-weight-title: 700; --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); + /* Admin-bar height */ + --global--admin-bar--height: 0; +} + +.admin-bar { + --global--admin-bar--height: 32px; +} + +@media only screen and (max-width: 782px) { + .admin-bar { + --global--admin-bar--height: 46px; + } } @media only screen and (min-width: 652px) { @@ -268,21 +280,9 @@ } blockquote { - margin: 0; padding: 0; -} - -blockquote p { - font-size: var(--heading--font-size-h4); - letter-spacing: var(--heading--letter-spacing-h4); - line-height: var(--heading--line-height-h4); -} - -blockquote cite, -blockquote footer { - color: var(--global--color-primary); - font-size: var(--global--font-size-xs); - letter-spacing: var(--global--letter-spacing); + position: relative; + margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); } blockquote > * { @@ -298,6 +298,23 @@ blockquote > *:last-child { margin-bottom: 0; } +blockquote p { + letter-spacing: var(--heading--letter-spacing-h4); + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight-strong); + line-height: var(--quote--line-height); +} + +blockquote cite, +blockquote footer { + font-weight: normal; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + letter-spacing: var(--global--letter-spacing); +} + blockquote.alignleft, blockquote.alignright { padding-left: inherit; } @@ -315,6 +332,35 @@ blockquote.alignright footer { letter-spacing: var(--global--letter-spacing); } +blockquote strong { + font-weight: var(--quote--font-weight); +} + +blockquote:before { + content: "\201C"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + position: absolute; + left: calc(-0.5 * var(--global--spacing-horizontal)); +} + +blockquote .wp-block-quote__citation, +blockquote cite, +blockquote footer { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + font-style: var(--quote--font-style-cite); +} + +@media only screen and (max-width: 481px) { + blockquote { + padding-left: calc(0.5 * var(--global--spacing-horizontal)); + } + blockquote:before { + left: 0; + } +} + img { display: block; height: auto; @@ -400,8 +446,23 @@ a:hover { } .site a:focus { - outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); - text-decoration: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + background: rgba(255, 255, 255, 0.9); +} + +.has-background-dark .site a:focus, +.has-background-dark .site a:focus .meta-nav { + color: var(--wp--style--color--link, var(--global--color-background)); +} + +.has-background-white .site a:focus { + background: rgba(0, 0, 0, 0.9); + color: var(--wp--style--color--link, var(--global--color-white)); +} + +.has-background-white .site a:focus .meta-nav { + color: var(--wp--style--color--link, var(--global--color-white)); } .site a:focus.skip-link { @@ -410,6 +471,15 @@ a:hover { outline-offset: -2px; } +.site a:focus.skip-link:focus { + color: #21759b; + background-color: #f1f1f1; +} + +.site a:focus img { + outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); +} + .has-background:not(.has-background-background-color) .has-link-color a, .has-background:not(.has-background-background-color).has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); @@ -445,10 +515,19 @@ a:hover { } .wp-block-button__link:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .wp-block-button__link:focus { + color: var(--button--color-background); +} + +.wp-block-button__link:focus:not(.has-background) { + color: var(--button--color-text-hover); +} + .wp-block-button__link:disabled { background-color: var(--global--color-white-50); border-color: var(--global--color-white-50); @@ -480,10 +559,6 @@ a:hover { padding: var(--button--padding-vertical) var(--button--padding-horizontal); } -.wp-block-button.is-style-outline .wp-block-button__link:visited { - color: var(--button--color-background); -} - .wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:hover { background-color: var(--button--color-background); color: var(--button--color-text); @@ -539,6 +614,11 @@ a:hover { margin-bottom: inherit; } +.wp-block-cover:not(.alignwide):not(.alignfull), +.wp-block-cover-image:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -613,6 +693,10 @@ a:hover { border: calc(3 * var(--separator--height)) solid var(--global--color-border); } +.wp-block-columns:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-columns .wp-block, .wp-block-columns .wp-block-column { max-width: inherit; @@ -646,13 +730,13 @@ a:hover { } } -.wp-block[data-align="full"] p:not(.has-background), -.wp-block[data-align="full"] h1:not(.has-background), -.wp-block[data-align="full"] h2:not(.has-background), -.wp-block[data-align="full"] h3:not(.has-background), -.wp-block[data-align="full"] h4:not(.has-background), -.wp-block[data-align="full"] h5:not(.has-background), -.wp-block[data-align="full"] h6:not(.has-background) { +.wp-block[data-align="full"] .wp-block-columns p:not(.has-background), +.wp-block[data-align="full"] .wp-block-columns h1:not(.has-background), +.wp-block[data-align="full"] .wp-block-columns h2:not(.has-background), +.wp-block[data-align="full"] .wp-block-columns h3:not(.has-background), +.wp-block[data-align="full"] .wp-block-columns h4:not(.has-background), +.wp-block[data-align="full"] .wp-block-columns h5:not(.has-background), +.wp-block[data-align="full"] .wp-block-columns h6:not(.has-background) { padding-left: var(--global--spacing-unit); padding-right: var(--global--spacing-unit); } @@ -699,10 +783,19 @@ a:hover { } .wp-block-file .wp-block-file__button:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .wp-block-file .wp-block-file__button:focus { + color: var(--button--color-background); +} + +.wp-block-file .wp-block-file__button:focus:not(.has-background) { + color: var(--button--color-text-hover); +} + .wp-block-file .wp-block-file__button:disabled { background-color: var(--global--color-white-50); border-color: var(--global--color-white-50); @@ -718,6 +811,10 @@ a:hover { margin-bottom: 0; } +.wp-block-gallery figcaption a { + color: var(--global--color-white); +} + .wp-block-group { display: block; clear: both; @@ -739,7 +836,13 @@ a:hover { padding: var(--global--spacing-vertical); } -.wp-block-group .wp-block-group__inner-container *:last-child { +.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align="full"] { + max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + margin-left: calc(-1 * var(--global--spacing-vertical)); +} + +.wp-block-group .wp-block-group__inner-container > *:last-child { margin-bottom: 0; } @@ -890,7 +993,7 @@ h6, } .wp-block-latest-comments { - margin-left: 0; + padding-left: 0; } .wp-block-latest-posts { @@ -910,6 +1013,11 @@ h6, margin-bottom: 0; } +.wp-block-latest-posts.is-grid { + word-wrap: break-word; + word-break: break-word; +} + .wp-block-latest-posts.is-grid > li { margin-bottom: var(--global--spacing-vertical); } @@ -1106,9 +1214,16 @@ dt { font-weight: bold; } -.wp-block-media-text .block-editor-inner-blocks { - padding-right: var(--global--spacing-horizontal); - padding-left: var(--global--spacing-horizontal); +.wp-block-media-text .wp-block-media-text__content { + padding: var(--global--spacing-horizontal); +} + +.wp-block-media-text .wp-block-media-text__content [data-block]:first-child { + margin-top: 0; +} + +.wp-block-media-text .wp-block-media-text__content [data-block]:last-child { + margin-bottom: 0; } .wp-block-media-text.is-style-twentytwentyone-border { @@ -1534,10 +1649,19 @@ pre.wp-block-preformatted { } .wp-block-search .wp-block-search__button:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .wp-block-search .wp-block-search__button:focus { + color: var(--button--color-background); +} + +.wp-block-search .wp-block-search__button:focus:not(.has-background) { + color: var(--button--color-text-hover); +} + .wp-block-search .wp-block-search__button:disabled { background-color: var(--global--color-white-50); border-color: var(--global--color-white-50); @@ -1572,6 +1696,14 @@ hr[style*="text-align: right"] { .wp-block-separator:not(.is-style-dots), hr:not(.is-style-dots) { + max-width: var(--responsive--aligndefault-width); +} + +[data-align="full"] > .wp-block-separator, +[data-align="wide"] > .wp-block-separator, [data-align="full"] > +hr, +[data-align="wide"] > +hr { max-width: inherit; } @@ -1616,8 +1748,9 @@ hr { border-color: currentColor; } -.wp-block-social-links li.wp-block-social-link:first-child { - margin-top: auto; +.wp-block-social-links [data-block] { + margin-top: 0; + margin-bottom: 0; } .wp-block-social-links.is-style-twentytwentyone-social-icons-color button { @@ -2066,4 +2199,4 @@ a { background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple)); } -/*# sourceMappingURL=style-editor.css.map */ \ No newline at end of file +/*# sourceMappingURL=style-editor.css.map */ diff --git a/wp-content/themes/twentytwentyone/assets/images/Daffodils.jpg b/wp-content/themes/twentytwentyone/assets/images/Daffodils.jpg index a69530098d..bd062b93cc 100644 Binary files a/wp-content/themes/twentytwentyone/assets/images/Daffodils.jpg and b/wp-content/themes/twentytwentyone/assets/images/Daffodils.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/Reading.jpg b/wp-content/themes/twentytwentyone/assets/images/Reading.jpg index 47933cfdf0..cfa732a57a 100644 Binary files a/wp-content/themes/twentytwentyone/assets/images/Reading.jpg and b/wp-content/themes/twentytwentyone/assets/images/Reading.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/in-the-bois-de-boulogne.jpg b/wp-content/themes/twentytwentyone/assets/images/in-the-bois-de-boulogne.jpg index bfcc3d96ca..cf74f5df04 100644 Binary files a/wp-content/themes/twentytwentyone/assets/images/in-the-bois-de-boulogne.jpg and b/wp-content/themes/twentytwentyone/assets/images/in-the-bois-de-boulogne.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/playing-in-the-sand.jpg b/wp-content/themes/twentytwentyone/assets/images/playing-in-the-sand.jpg index dda064b076..557ae0f7cd 100644 Binary files a/wp-content/themes/twentytwentyone/assets/images/playing-in-the-sand.jpg and b/wp-content/themes/twentytwentyone/assets/images/playing-in-the-sand.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks-1884.jpg b/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks-1884.jpg index 15f953be1f..ff534164dc 100644 Binary files a/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks-1884.jpg and b/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks-1884.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks.jpg b/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks.jpg deleted file mode 100644 index 15f953be1f..0000000000 Binary files a/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks.jpg and /dev/null differ diff --git a/wp-content/themes/twentytwentyone/assets/images/self-portrait-1885.jpg b/wp-content/themes/twentytwentyone/assets/images/self-portrait-1885.jpg index 6cb35413e4..623598b60c 100644 Binary files a/wp-content/themes/twentytwentyone/assets/images/self-portrait-1885.jpg and b/wp-content/themes/twentytwentyone/assets/images/self-portrait-1885.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/the-garden-at-bougival-1884.jpg b/wp-content/themes/twentytwentyone/assets/images/the-garden-at-bougival-1884.jpg index 4e466afc24..6594d3d1bd 100644 Binary files a/wp-content/themes/twentytwentyone/assets/images/the-garden-at-bougival-1884.jpg and b/wp-content/themes/twentytwentyone/assets/images/the-garden-at-bougival-1884.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/villa-with-orange-trees-nice.jpg b/wp-content/themes/twentytwentyone/assets/images/villa-with-orange-trees-nice.jpg index d71c266492..5b78d968d5 100644 Binary files a/wp-content/themes/twentytwentyone/assets/images/villa-with-orange-trees-nice.jpg and b/wp-content/themes/twentytwentyone/assets/images/villa-with-orange-trees-nice.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/images/young-woman-in-mauve.jpg b/wp-content/themes/twentytwentyone/assets/images/young-woman-in-mauve.jpg index 7329ffdb4e..df00d3147c 100644 Binary files a/wp-content/themes/twentytwentyone/assets/images/young-woman-in-mauve.jpg and b/wp-content/themes/twentytwentyone/assets/images/young-woman-in-mauve.jpg differ diff --git a/wp-content/themes/twentytwentyone/assets/js/customize-preview.js b/wp-content/themes/twentytwentyone/assets/js/customize-preview.js index dcf2f77e54..ccd54698ea 100644 --- a/wp-content/themes/twentytwentyone/assets/js/customize-preview.js +++ b/wp-content/themes/twentytwentyone/assets/js/customize-preview.js @@ -1,67 +1,57 @@ -( function( api ) { - /** - * Get luminance from a HEX color. - * - * @param {string} hex - The hex color. - * - * @return {number} - Returns the luminance, number between 0 and 255. - */ - function twentytwentyoneGetHexLum( hex ) { - var rgb = twentytwentyoneGetRgbFromHex( hex ); - return Math.round( ( 0.2126 * rgb.r ) + ( 0.7152 * rgb.g ) + ( 0.0722 * rgb.b ) ); - } - - /** - * Get RGB from HEX. - * - * @param {string} hex - The hex color. - * - * @return {Object} - Returns an object {r, g, b} - */ - function twentytwentyoneGetRgbFromHex( hex ) { - var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i, - result; - - // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF"). - hex = hex.replace( shorthandRegex, function( m, r, g, b ) { - return r.toString() + r.toString() + g.toString() + g.toString() + b.toString() + b.toString(); - } ); - - result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex ); - return result ? { - r: parseInt( result[1], 16 ), - g: parseInt( result[2], 16 ), - b: parseInt( result[3], 16 ) - } : null; - } - +/* global twentytwentyoneGetHexLum, jQuery */ +( function() { // Add listener for the "background_color" control. - api( 'background_color', function( value ) { + wp.customize( 'background_color', function( value ) { value.bind( function( to ) { var lum = twentytwentyoneGetHexLum( to ), isDark = 127 > lum, textColor = ! isDark ? 'var(--global--color-dark-gray)' : 'var(--global--color-light-gray)', - tableColor = ! isDark ? 'var(--global--color-light-gray)' : 'var(--global--color-dark-gray)'; + tableColor = ! isDark ? 'var(--global--color-light-gray)' : 'var(--global--color-dark-gray)', + stylesheetID = 'twentytwentyone-customizer-inline-styles', + stylesheet, + styles; // Modify the body class depending on whether this is a dark background or not. if ( isDark ) { if ( ! document.body.classList.contains( 'has-background-dark' ) ) { document.body.classList.add( 'has-background-dark' ); } + if ( document.documentElement.classList.contains( 'is-dark-mode' ) ) { + document.documentElement.classList.remove( 'is-dark-mode' ); + } } else { document.body.classList.remove( 'has-background-dark' ); } - document.documentElement.style.setProperty( '--global--color-primary', textColor ); - document.documentElement.style.setProperty( '--global--color-secondary', textColor ); - document.documentElement.style.setProperty( '--global--color-background', to ); + // Toggle the white background class. + if ( '#ffffff' === to ) { + document.body.classList.add( 'has-background-white' ); + } else { + document.body.classList.remove( 'has-background-white' ); + } - document.documentElement.style.setProperty( '--button--color-background', textColor ); - document.documentElement.style.setProperty( '--button--color-text', to ); - document.documentElement.style.setProperty( '--button--color-text-hover', textColor ); + stylesheet = jQuery( '#' + stylesheetID ); + styles = ''; + // If the stylesheet doesn't exist, create it and append it to . + if ( ! stylesheet.length ) { + jQuery( '#twenty-twenty-one-style-inline-css' ).after( '' ); + stylesheet = jQuery( '#' + stylesheetID ); + } - document.documentElement.style.setProperty( '--table--stripes-border-color', tableColor ); - document.documentElement.style.setProperty( '--table--stripes-background-color', tableColor ); + // Generate the styles. + styles += '--global--color-primary:' + textColor + ';'; + styles += '--global--color-secondary:' + textColor + ';'; + styles += '--global--color-background:' + to + ';'; + + styles += '--button--color-background:' + textColor + ';'; + styles += '--button--color-text:' + to + ';'; + styles += '--button--color-text-hover:' + textColor + ';'; + + styles += '--table--stripes-border-color:' + tableColor + ';'; + styles += '--table--stripes-background-color:' + tableColor + ';'; + + // Add the styles. + stylesheet.html( ':root{' + styles + '}' ); } ); } ); -}( wp.customize, _ ) ); +}() ); diff --git a/wp-content/themes/twentytwentyone/assets/js/customize.js b/wp-content/themes/twentytwentyone/assets/js/customize.js new file mode 100644 index 0000000000..375f7e0f20 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/js/customize.js @@ -0,0 +1,61 @@ +/* global twentytwentyoneGetHexLum, backgroundColorNotice */ + +( function() { + /** + * Add/remove the notice. + * + * @param {boolean} enable - Whether we want to enable or disable the notice. + * + * @return {void} + */ + function twentytwentyoneBackgroundColorNotice( enable ) { + if ( enable ) { + wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', { + type: 'info', + message: backgroundColorNotice.message + } ) ); + } else { + wp.customize( 'background_color' ).notifications.remove( 'backgroundColorNotice' ); + } + } + + // Wait until the customizer has finished loading. + wp.customize.bind( 'ready', function() { + var supportsDarkMode = ( 127 <= twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) && wp.customize( 'respect_user_color_preference' ).get() ); + + // Hide the "respect_user_color_preference" setting if the background-color is dark. + if ( 127 > twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) ) { + wp.customize.control( 'respect_user_color_preference' ).deactivate(); + } + + // Add notice on init if needed. + if ( wp.customize( 'respect_user_color_preference' ) ) { + twentytwentyoneBackgroundColorNotice( true ); + } + + // Handle changes to the background-color. + wp.customize( 'background_color', function( setting ) { + setting.bind( function( value ) { + if ( 127 > twentytwentyoneGetHexLum( value ) ) { + wp.customize.control( 'respect_user_color_preference' ).deactivate(); + supportsDarkMode = false; + } else { + wp.customize.control( 'respect_user_color_preference' ).activate(); + supportsDarkMode = wp.customize( 'respect_user_color_preference' ).get(); + } + } ); + } ); + + // Handle changes to the "respect_user_color_preference" setting. + wp.customize( 'respect_user_color_preference', function( setting ) { + setting.bind( function( value ) { + supportsDarkMode = value && 127 < twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ); + if ( ! supportsDarkMode ) { + twentytwentyoneBackgroundColorNotice( false ); + } else { + twentytwentyoneBackgroundColorNotice( true ); + } + } ); + } ); + } ); +}() ); diff --git a/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js b/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js new file mode 100644 index 0000000000..8ced8b5a99 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js @@ -0,0 +1,42 @@ +function toggleDarkMode() { // jshint ignore:line + var toggler = document.getElementById( 'dark-mode-toggler' ), + html = document.querySelector( 'html' ); + + if ( 'false' === toggler.getAttribute( 'aria-pressed' ) ) { + toggler.setAttribute( 'aria-pressed', 'true' ); + html.classList.add( 'is-dark-mode' ); + window.localStorage.setItem( 'twentytwentyoneDarkMode', 'yes' ); + } else { + toggler.setAttribute( 'aria-pressed', 'false' ); + html.classList.remove( 'is-dark-mode' ); + window.localStorage.setItem( 'twentytwentyoneDarkMode', 'no' ); + } +} + +function darkModeInitialLoad() { + var toggler = document.getElementById( 'dark-mode-toggler' ), + isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches, + html; + + if ( 'yes' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) { + isDarkMode = true; + } else if ( 'no' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) { + isDarkMode = false; + } + + if ( ! toggler ) { + return; + } + if ( isDarkMode ) { + toggler.setAttribute( 'aria-pressed', 'true' ); + } + + html = document.querySelector( 'html' ); + if ( isDarkMode ) { + html.classList.add( 'is-dark-mode' ); + } else { + html.classList.remove( 'is-dark-mode' ); + } +} + +darkModeInitialLoad(); diff --git a/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js b/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js new file mode 100644 index 0000000000..d4fa890501 --- /dev/null +++ b/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js @@ -0,0 +1,151 @@ +/* global ajaxurl, XMLHttpRequest, ResizeObserver, darkModeInitialLoad, setTimeout */ + +// Check the body class to determine if we want to add the toggler and handle dark-mode or not. +if ( document.body.classList.contains( 'twentytwentyone-supports-dark-theme' ) ) { + // Add the toggler. + twentytwentyoneDarkModeEditorToggle(); +} + +/** + * Make an AJAX request, inject the toggle and call any functions that need to run. + * + * @since 1.0.0 + * + * @return {void} + */ +function twentytwentyoneDarkModeEditorToggle() { + var request = new XMLHttpRequest(); + + // Define the request. + request.open( 'POST', ajaxurl, true ); + + // Add headers. + request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8' ); + + // On success call funtions that need to run. + request.onload = function() { + var selector = '.editor-styles-wrapper,.edit-post-visual-editor', + editor, + attemptDelay = 25, + attempt = 0, + maxAttempts = 8; + + if ( 200 <= this.status && 400 > this.status ) { + editor = document.querySelector( selector ); + + if ( null === editor ) { + // Try again. + if ( attempt < maxAttempts ) { + setTimeout( function() { + twentytwentyoneDarkModeEditorToggle(); + }, attemptDelay ); + + // Increment the attempts counter. + attempt++; + + // Double the delay, give the server some time to breathe. + attemptDelay *= 2; + } + return; + } + // Inject the toggle. + document.querySelector( selector ).insertAdjacentHTML( 'afterbegin', this.response ); + + // Re-position the toggle. + twentytwentyoneDarkModeEditorTogglePosition(); + + // Add an observer so the toggle gets re-positioned when the sidebar opens/closes. + twentytwentyoneDarkModeEditorTogglePositionObserver(); + + // Run toggler script. + darkModeInitialLoad(); + + // Switch editor styles if needed. + twentytwentyoneDarkModeEditorToggleEditorStyles(); + } + }; + + // Send the request. + request.send( 'action=tt1_dark_mode_editor_switch' ); +} + +/** + * Toggle the editor dark styles depending on the user's preferences in the toggler. + * + * @since 1.0.0 + * + * @return {void} + */ +function twentytwentyoneDarkModeEditorToggleEditorStyles() { + var toggler = document.getElementById( 'dark-mode-toggler' ); + + if ( 'true' === toggler.getAttribute( 'aria-pressed' ) ) { + document.body.classList.add( 'is-dark-theme' ); + } + + toggler.addEventListener( 'click', function() { + if ( 'true' === toggler.getAttribute( 'aria-pressed' ) ) { + document.body.classList.add( 'is-dark-theme' ); + } else { + document.body.classList.remove( 'is-dark-theme' ); + } + } ); +} + +/** + * Reposition the toggle inside the editor wrapper. + * + * @since 1.0.0 + * + * @return {void} + */ +function twentytwentyoneDarkModeEditorTogglePosition() { + var toggle = document.getElementById( 'dark-mode-toggler' ), + toggleWidth, + workSpace, + workSpaceWidth, + attempt = 0, + attemptDelay = 25, + maxAttempts = 10; + + if ( null === toggle ) { + // Try again. + if ( attempt < maxAttempts ) { + setTimeout( function() { + twentytwentyoneDarkModeEditorTogglePosition(); + }, attemptDelay ); + + attempt++; + attemptDelay *= 2; + } + return; + } + + toggleWidth = window.getComputedStyle( document.getElementById( 'dark-mode-toggler' ) ).width; + workSpace = document.querySelector( '.editor-styles-wrapper,.edit-post-visual-editor' ); + workSpaceWidth = window.getComputedStyle( workSpace ).width; + + // Add styles to reposition toggle. + toggle.style.position = 'fixed'; + toggle.style.bottom = '30px'; + if ( document.body.classList.contains( 'is-fullscreen-mode' ) ) { + toggle.style.left = 'calc(' + workSpaceWidth + ' - ' + toggleWidth + ' - 5px)'; + } else { + toggle.style.left = 'calc(' + workSpaceWidth + ' - ' + toggleWidth + ' + 155px)'; + } +} + +/** + * Add a ResizeObserver to the editor wrapper + * and trigger the toggle repositioning when needed. + * + * @since 1.0.0 + * + * @return {void} + */ +function twentytwentyoneDarkModeEditorTogglePositionObserver() { + var observer = new ResizeObserver( function() { + twentytwentyoneDarkModeEditorTogglePosition(); + } ); + observer.observe( document.querySelector( '.editor-styles-wrapper,.edit-post-visual-editor' ) ); +} diff --git a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js b/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js index 28cf67eefc..7525f7721e 100644 --- a/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js +++ b/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js @@ -14,6 +14,7 @@ function twentytwentyoneToggleAriaExpanded( el, withListeners ) { if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) { el.setAttribute( 'aria-expanded', 'true' ); + twentytwentyoneSubmenuPosition( el.parentElement ); if ( withListeners ) { document.addEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside ); } @@ -33,6 +34,25 @@ function twentytwentyoneCollapseMenuOnClickOutside( event ) { } } +/** + * Changes the position of submenus so they always fit the screen horizontally. + * + * @param {Element} li - The li element. + */ +function twentytwentyoneSubmenuPosition( li ) { + var subMenu = li.querySelector( 'ul.sub-menu' ), + rect = subMenu.getBoundingClientRect(), + right = Math.round( rect.right ), + left = Math.round( rect.left ), + windowWidth = Math.round( window.innerWidth ); + + if ( right > windowWidth ) { + subMenu.classList.add( 'submenu-reposition-right' ); + } else if ( document.body.classList.contains( 'rtl' ) && left < 0 ) { + subMenu.classList.add( 'submenu-reposition-left' ); + } +} + /** * Handle clicks on submenu toggles. * @@ -94,7 +114,7 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line tabKey = event.keyCode === 9; shiftKey = event.shiftKey; escKey = event.keyCode === 27; - activeEl = document.activeElement; + activeEl = document.activeElement; // jshint ignore:line lastEl = elements[ elements.length - 1 ]; firstEl = elements[0]; @@ -124,6 +144,7 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) { li.addEventListener( 'mouseenter', function() { this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' ); + twentytwentyoneSubmenuPosition( li ); } ); li.addEventListener( 'mouseleave', function() { this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'false' ); diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php index 96a3e8dcd9..505d0c954b 100644 --- a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php +++ b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php @@ -174,6 +174,10 @@ class Twenty_Twenty_One_Custom_Colors { $classes[] = 'has-background-light'; } + if ( 'ffffff' === strtolower( $background_color ) ) { + $classes[] = 'has-background-white'; + } + return $classes; } } diff --git a/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php new file mode 100644 index 0000000000..1a32fe4cfe --- /dev/null +++ b/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php @@ -0,0 +1,389 @@ + in the dashboard. + add_filter( 'admin_body_class', array( $this, 'admin_body_classes' ) ); + + // Add the switch on the frontend & customizer. + add_action( 'get_template_part_template-parts/header/site-nav', array( $this, 'the_switch' ) ); + + // Add the switch in the editor. + add_action( 'wp_ajax_tt1_dark_mode_editor_switch', array( $this, 'editor_ajax_callback' ) ); + } + + /** + * Editor custom color variables & scripts. + * + * @access public + * + * @since 1.0.0 + * + * @return void + */ + public function editor_custom_color_variables() { + if ( ! $this->switch_should_render() ) { + return; + } + $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); + $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false ); + if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) { + // Add dark mode variable overrides. + wp_add_inline_style( + 'twenty-twenty-one-custom-color-overrides', + 'html.is-dark-mode .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); }' + ); + } + wp_enqueue_script( + 'twentytwentyone-dark-mode-support-toggle', + get_template_directory_uri() . '/assets/js/dark-mode-toggler.js', + array(), + '1.0.0', + true + ); + + wp_enqueue_script( + 'twentytwentyone-editor-dark-mode-support', + get_template_directory_uri() . '/assets/js/editor-dark-mode-support.js', + array( 'twentytwentyone-dark-mode-support-toggle' ), + '1.0.0', + true + ); + } + + /** + * Enqueue scripts and styles. + * + * @access public + * + * @since 1.0.0 + * + * @return void + */ + public function enqueue_scripts() { + if ( ! $this->switch_should_render() ) { + return; + } + wp_enqueue_style( + 'tt1-dark-mode', + get_template_directory_uri() . '/assets/css/style-dark-mode.css', + array( 'twenty-twenty-one-style' ), + '1.0.0' + ); + } + + /** + * Enqueue scripts for the customizer. + * + * @access public + * + * @since 1.0.0 + * + * @return void + */ + public function customize_controls_enqueue_scripts() { + if ( ! $this->switch_should_render() ) { + return; + } + wp_enqueue_script( + 'twentytwentyone-customize-controls', + get_template_directory_uri() . '/assets/js/customize.js', + array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ), + '1.0.0', + true + ); + + wp_localize_script( + 'twentytwentyone-customize-controls', + 'backgroundColorNotice', + array( + 'message' => esc_html__( 'Changes will only be visible if Dark Mode is "Off" in the preview', 'twentytwentyone' ), + ) + ); + } + + /** + * Register customizer options. + * + * @access public + * + * @since 1.0.0 + * + * @param WP_Customize_Manager $wp_customize Theme Customizer object. + * + * @return void + */ + public function customizer_controls( $wp_customize ) { + $wp_customize->add_setting( + 'respect_user_color_preference', + array( + 'capability' => 'edit_theme_options', + 'default' => false, + 'sanitize_callback' => function( $value ) { + return (bool) $value; + }, + ) + ); + + $wp_customize->add_control( + 'respect_user_color_preference', + array( + 'type' => 'checkbox', + 'section' => 'colors', + 'label' => esc_html__( 'Respect visitor\'s device dark mode settings', 'twentytwentyone' ), + 'description' => __( 'Dark mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text.', 'twentytwentyone' ), + 'active_callback' => function( $value ) { + return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) ); + }, + ) + ); + + // Add partial for background_color. + $wp_customize->selective_refresh->add_partial( + 'background_color', + array( + 'selector' => '#dark-mode-toggler', + 'container_inclusive' => true, + 'render_callback' => function() { + $attrs = ( $this->switch_should_render() ) ? array() : array( 'style' => 'display:none;' ); + $this->the_html( $attrs ); + }, + ) + ); + } + + /** + * Calculate classes for the main element. + * + * @access public + * + * @since 1.0.0 + * + * @param string $classes The classes for element. + * + * @return string + */ + public function html_classes( $classes ) { + if ( ! $this->switch_should_render() ) { + return $classes; + } + + $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); + $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false ); + if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) { + return ( $classes ) ? ' respect-color-scheme-preference' : 'respect-color-scheme-preference'; + } + + return $classes; + } + + /** + * Adds a class to the element in the editor to accommodate dark-mode. + * + * @access public + * + * @since 1.0.0 + * + * @param string $classes The admin body-classes. + * + * @return string + */ + public function admin_body_classes( $classes ) { + if ( ! $this->switch_should_render() ) { + return $classes; + } + + global $current_screen; + if ( empty( $current_screen ) ) { + set_current_screen(); + } + + if ( $current_screen->is_block_editor() ) { + $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false ); + $background_color = get_theme_mod( 'background_color', 'D1E4DD' ); + + if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) { + $classes .= ' twentytwentyone-supports-dark-theme'; + } + } + + return $classes; + } + + /** + * Determine if we want to print the dark-mode switch or not. + * + * @access public + * + * @since 1.0.0 + * + * @return bool + */ + public function switch_should_render() { + global $is_IE; + return ( + get_theme_mod( 'respect_user_color_preference', false ) && + ! $is_IE && + 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) ) + ); + } + + /** + * Add night/day switch. + * + * @access public + * + * @since 1.0.0 + * + * @return void + */ + public function the_switch() { + if ( ! $this->switch_should_render() ) { + return; + } + $this->the_html(); + $this->the_script(); + } + + /** + * Print the dark-mode switch HTML. + * + * Inspired from https://codepen.io/aaroniker/pen/KGpXZo (MIT-licensed) + * + * @access public + * + * @since 1.0.0 + * + * @param array $attrs The attributes to add to our '; + ?> + + + '; + include get_template_directory() . '/assets/js/dark-mode-toggler.js'; // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude + echo ''; + } + + /** + * Print the dark-mode switch styles. + * + * @access public + * + * @since 1.0.0 + * + * @return void + */ + public function the_styles() { + echo ''; + } + + /** + * Call the tt1_the_dark_mode_switch and exit. + * + * @access public + * + * @since 1.0.0 + * + * @return void + */ + public function editor_ajax_callback() { + $this->the_html(); + $this->the_styles(); + wp_die(); + } +} diff --git a/wp-content/themes/twentytwentyone/footer.php b/wp-content/themes/twentytwentyone/footer.php index 67e3ac83dc..b77ffa18b4 100644 --- a/wp-content/themes/twentytwentyone/footer.php +++ b/wp-content/themes/twentytwentyone/footer.php @@ -32,6 +32,7 @@ 'depth' => 1, 'link_before' => '', 'link_after' => '', + 'fallback_cb' => 'false', ) ); ?> diff --git a/wp-content/themes/twentytwentyone/functions.php b/wp-content/themes/twentytwentyone/functions.php index b6db9fb979..f7c72acc83 100644 --- a/wp-content/themes/twentytwentyone/functions.php +++ b/wp-content/themes/twentytwentyone/functions.php @@ -527,6 +527,10 @@ require get_template_directory() . '/inc/block-patterns.php'; // Block Styles. require get_template_directory() . '/inc/block-styles.php'; +// Dark Mode. +require_once get_template_directory() . '/classes/class-twenty-twenty-one-dark-mode.php'; +new Twenty_Twenty_One_Dark_Mode(); + /** * Enqueue scripts for the customizer preview. * diff --git a/wp-content/themes/twentytwentyone/inc/block-patterns.php b/wp-content/themes/twentytwentyone/inc/block-patterns.php index aae696f4ff..b4e0181515 100644 --- a/wp-content/themes/twentytwentyone/inc/block-patterns.php +++ b/wp-content/themes/twentytwentyone/inc/block-patterns.php @@ -104,7 +104,7 @@ if ( function_exists( 'register_block_pattern' ) ) { 'title' => esc_html__( 'Portfolio List', 'twentytwentyone' ), 'categories' => array( 'twentytwentyone' ), 'description' => esc_html_x( 'A list of projects with thumbnail images.', 'Block pattern description', 'twentytwentyone' ), - 'content' => '

' . esc_html__( 'Roses Tremieres', 'twentytwentyone' ) . '

' . esc_attr__( '“Roses Tremieres” by Berthe Morisot', 'twentytwentyone' ) . '

' . esc_html__( 'Villa with Orange Trees, Nice', 'twentytwentyone' ) . '

“Villa with Orange Trees, Nice” by Berthe Morisot

' . esc_html__( 'In the Bois de Boulogne', 'twentytwentyone' ) . '

' . esc_attr__( '“In the Bois de Boulogne” by Berthe Morisot', 'twentytwentyone' ) . '

' . esc_html__( 'The Garden at Bougival', 'twentytwentyone' ) . '

' . esc_attr__( '“The Garden at Bougival” by Berthe Morisot', 'twentytwentyone' ) . '

' . esc_html__( 'Young Woman in Mauve', 'twentytwentyone' ) . '

' . esc_attr__( '“Young Woman in Mauve” by Berthe Morisot', 'twentytwentyone' ) . '

' . esc_html__( 'Reading', 'twentytwentyone' ) . '

' . esc_attr__( '“Reading” by Berthe Morisot', 'twentytwentyone' ) . '
', + 'content' => '

' . esc_html__( 'Roses Tremieres', 'twentytwentyone' ) . '

' . esc_attr__( '“Roses Tremieres” by Berthe Morisot', 'twentytwentyone' ) . '

' . esc_html__( 'Villa with Orange Trees, Nice', 'twentytwentyone' ) . '

“Villa with Orange Trees, Nice” by Berthe Morisot

' . esc_html__( 'In the Bois de Boulogne', 'twentytwentyone' ) . '

' . esc_attr__( '“In the Bois de Boulogne” by Berthe Morisot', 'twentytwentyone' ) . '

' . esc_html__( 'The Garden at Bougival', 'twentytwentyone' ) . '

' . esc_attr__( '“The Garden at Bougival” by Berthe Morisot', 'twentytwentyone' ) . '

' . esc_html__( 'Young Woman in Mauve', 'twentytwentyone' ) . '

' . esc_attr__( '“Young Woman in Mauve” by Berthe Morisot', 'twentytwentyone' ) . '

' . esc_html__( 'Reading', 'twentytwentyone' ) . '

' . esc_attr__( '“Reading” by Berthe Morisot', 'twentytwentyone' ) . '
', ) ); diff --git a/wp-content/themes/twentytwentyone/inc/starter-content.php b/wp-content/themes/twentytwentyone/inc/starter-content.php index 29e5ab7fe4..7f79cb5977 100644 --- a/wp-content/themes/twentytwentyone/inc/starter-content.php +++ b/wp-content/themes/twentytwentyone/inc/starter-content.php @@ -40,7 +40,7 @@ function twenty_twenty_one_get_starter_content() {
-
' . esc_attr__( 'Roses Tremieres (Hollyhocks), by Berthe Morisot, 1884', 'twentytwentyone' ) . '
+
' . esc_attr__( 'Roses Tremieres (Hollyhocks), by Berthe Morisot, 1884', 'twentytwentyone' ) . '
diff --git a/wp-content/themes/twentytwentyone/inc/template-functions.php b/wp-content/themes/twentytwentyone/inc/template-functions.php index 3badaa3631..4da63509f3 100644 --- a/wp-content/themes/twentytwentyone/inc/template-functions.php +++ b/wp-content/themes/twentytwentyone/inc/template-functions.php @@ -93,82 +93,6 @@ function twenty_twenty_one_comment_form_defaults( $defaults ) { } add_filter( 'comment_form_defaults', 'twenty_twenty_one_comment_form_defaults' ); -/** - * Filters the default archive titles. - * - * @since 1.0.0 - * - * @return string - */ -function twenty_twenty_one_get_the_archive_title() { - if ( is_category() ) { - return sprintf( - /* translators: %s: The term title. */ - esc_html__( 'Category Archives: %s', 'twentytwentyone' ), - '' . single_term_title( '', false ) . '' - ); - } - - if ( is_tag() ) { - return sprintf( - /* translators: %s: The term title. */ - esc_html__( 'Tag Archives: %s', 'twentytwentyone' ), - '' . single_term_title( '', false ) . '' - ); - } - - if ( is_author() ) { - return sprintf( - /* translators: %s: The author name. */ - esc_html__( 'Author Archives: %s', 'twentytwentyone' ), - '' . get_the_author_meta( 'display_name' ) . '' - ); - } - - if ( is_year() ) { - return sprintf( - /* translators: %s: The year. */ - esc_html__( 'Yearly Archives: %s', 'twentytwentyone' ), - '' . get_the_date( _x( 'Y', 'yearly archives date format', 'twentytwentyone' ) ) . '' - ); - } - - if ( is_month() ) { - return sprintf( - /* translators: %s: The month. */ - esc_html__( 'Monthly Archives: %s', 'twentytwentyone' ), - '' . get_the_date( _x( 'F Y', 'monthly archives date format', 'twentytwentyone' ) ) . '' - ); - } - - if ( is_day() ) { - return sprintf( - /* translators: %s: The day. */ - esc_html__( 'Daily Archives: %s', 'twentytwentyone' ), - '' . get_the_date() . '' - ); - } - - if ( is_post_type_archive() ) { - return sprintf( - /* translators: %s: Post type singular name. */ - esc_html__( '%s Archives', 'twentytwentyone' ), - get_post_type_object( get_queried_object()->name )->labels->singular_name - ); - } - - if ( is_tax() ) { - return sprintf( - /* translators: %s: Taxonomy singular name. */ - esc_html__( '%s Archives', 'twentytwentyone' ), - get_taxonomy( get_queried_object()->taxonomy )->labels->singular_name - ); - } - - return esc_html__( 'Archives:', 'twentytwentyone' ); -} -add_filter( 'get_the_archive_title', 'twenty_twenty_one_get_the_archive_title' ); - /** * Determines if post thumbnail can be displayed. * @@ -487,6 +411,11 @@ add_filter( 'the_password_form', 'twenty_twenty_one_password_form' ); * @return array */ function twenty_twenty_one_get_attachment_image_attributes( $attr, $attachment, $size ) { + + if ( isset( $attr['class'] ) && false !== strpos( $attr['class'], 'custom-logo' ) ) { + return $attr; + } + $width = false; $height = false; @@ -505,7 +434,7 @@ function twenty_twenty_one_get_attachment_image_attributes( $attr, $attachment, // Add style. $attr['style'] = isset( $attr['style'] ) ? $attr['style'] : ''; - $attr['style'] = 'width:100%;height:' . round( 100 * $meta['height'] / $meta['width'], 2 ) . '%;' . $attr['style']; + $attr['style'] = 'width:100%;height:' . round( 100 * $height / $width, 2 ) . '%;' . $attr['style']; } return $attr; diff --git a/wp-content/themes/twentytwentyone/package.json b/wp-content/themes/twentytwentyone/package.json index daa44f2ca4..7e54ef220f 100644 --- a/wp-content/themes/twentytwentyone/package.json +++ b/wp-content/themes/twentytwentyone/package.json @@ -53,7 +53,8 @@ "start": "chokidar \"**/*.scss\" -c \"npm run build\" --initial", "build:style": "node-sass assets/sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1 --source-map true", "build:style-editor": "node-sass assets/sass/style-editor.scss assets/css/style-editor.css --output-style expanded --indent-type tab --indent-width 1 --source-map true", - "build:rtl": "rtlcss style.css style-rtl.css", + "build:style-dark-mode": "node-sass assets/sass/style-dark-mode.scss assets/css/style-dark-mode.css --output-style expanded --indent-type tab --indent-width 1 --source-map true", + "build:rtl": "rtlcss style.css style-rtl.css style-dark-mode.css", "build:print": "node-sass assets/sass/07-utilities/print.scss assets/css/print.css --output-style expanded --indent-type tab --indent-width 1 --source-map true", "build:ie": "postcss style.css -o assets/css/ie.css", "build:ie-editor": "postcss assets/css/style-editor.css -o assets/css/ie-editor.css", diff --git a/wp-content/themes/twentytwentyone/style-rtl.css b/wp-content/themes/twentytwentyone/style-rtl.css index 8d93c3b92c..896fda02ff 100644 --- a/wp-content/themes/twentytwentyone/style-rtl.css +++ b/wp-content/themes/twentytwentyone/style-rtl.css @@ -288,6 +288,18 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL. --widget--line-height-title: 1.4; --widget--font-weight-title: 700; --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); + /* Admin-bar height */ + --global--admin-bar--height: 0; +} + +.admin-bar { + --global--admin-bar--height: 32px; +} + +@media only screen and (max-width: 782px) { + .admin-bar { + --global--admin-bar--height: 46px; + } } @media only screen and (min-width: 652px) { @@ -1001,21 +1013,9 @@ button { /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */ blockquote { - margin: 0; padding: 0; -} - -blockquote p { - font-size: var(--heading--font-size-h4); - letter-spacing: var(--heading--letter-spacing-h4); - line-height: var(--heading--line-height-h4); -} - -blockquote cite, -blockquote footer { - color: var(--global--color-primary); - font-size: var(--global--font-size-xs); - letter-spacing: var(--global--letter-spacing); + position: relative; + margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) 0; } blockquote > * { @@ -1031,6 +1031,23 @@ blockquote > *:last-child { margin-bottom: 0; } +blockquote p { + letter-spacing: var(--heading--letter-spacing-h4); + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight-strong); + line-height: var(--quote--line-height); +} + +blockquote cite, +blockquote footer { + font-weight: normal; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + letter-spacing: var(--global--letter-spacing); +} + blockquote.alignleft, blockquote.alignright { padding-right: inherit; } @@ -1048,6 +1065,35 @@ blockquote.alignright footer { letter-spacing: var(--global--letter-spacing); } +blockquote strong { + font-weight: var(--quote--font-weight); +} + +blockquote:before { + content: "\201C"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + position: absolute; + right: calc(-0.5 * var(--global--spacing-horizontal)); +} + +blockquote .wp-block-quote__citation, +blockquote cite, +blockquote footer { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + font-style: var(--quote--font-style-cite); +} + +@media only screen and (max-width: 481px) { + blockquote { + padding-right: calc(0.5 * var(--global--spacing-horizontal)); + } + blockquote:before { + right: 0; + } +} + input[type="text"], input[type="email"], input[type="url"], @@ -1455,8 +1501,23 @@ a:hover { } .site a:focus { - outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); - text-decoration: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + background: rgba(255, 255, 255, 0.9); +} + +.has-background-dark .site a:focus, +.has-background-dark .site a:focus .meta-nav { + color: var(--wp--style--color--link, var(--global--color-background)); +} + +.has-background-white .site a:focus { + background: rgba(0, 0, 0, 0.9); + color: var(--wp--style--color--link, var(--global--color-white)); +} + +.has-background-white .site a:focus .meta-nav { + color: var(--wp--style--color--link, var(--global--color-white)); } .site a:focus.skip-link { @@ -1465,6 +1526,15 @@ a:hover { outline-offset: -2px; } +.site a:focus.skip-link:focus { + color: #21759b; + background-color: #f1f1f1; +} + +.site a:focus img { + outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); +} + .has-background:not(.has-background-background-color) .has-link-color a, .has-background:not(.has-background-background-color).has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); @@ -1533,10 +1603,27 @@ input[type="submit"]:focus, input[type="reset"]:focus, .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .site .button:focus, .has-background-dark +input[type="submit"]:focus, .has-background-dark +input[type="reset"]:focus, .has-background-dark +.wp-block-search__button:focus, .has-background-dark +.wp-block-button .wp-block-button__link:focus { + color: var(--button--color-background); +} + +.site .button:focus:not(.has-background), +input[type="submit"]:focus:not(.has-background), +input[type="reset"]:focus:not(.has-background), +.wp-block-search__button:focus:not(.has-background), +.wp-block-button .wp-block-button__link:focus:not(.has-background) { + color: var(--button--color-text-hover); +} + .site .button:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, @@ -1606,10 +1693,6 @@ input[type="reset"]:hover, color: var(--button--color-background); } -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):visited { - color: var(--button--color-background); -} - .wp-block-button.is-style-outline .wp-block-button__link.has-background, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color { border: var(--button--border-width) solid currentColor; } @@ -1646,6 +1729,10 @@ input[type="reset"]:hover, display: block; } +.wp-block-columns:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-columns .wp-block-column > * { margin-top: calc(0.66 * var(--global--spacing-vertical)); margin-bottom: calc(0.66 * var(--global--spacing-vertical)); @@ -1680,9 +1767,8 @@ input[type="reset"]:hover, } } -@media only screen and (min-width: 652px) { +@media only screen and (min-width: 822px) { .wp-block-columns .wp-block-column:not(:last-child) { - /* Resetting margins to match _block-container.scss */ margin-bottom: 0; } } @@ -1732,7 +1818,7 @@ input[type="reset"]:hover, .wp-block-cover, .wp-block-cover-image { - background-color: var(--cover--color-foreground); + background-color: var(--cover--color-background); min-height: var(--cover--height); margin-top: inherit; margin-bottom: inherit; @@ -1741,6 +1827,11 @@ input[type="reset"]:hover, /* Block Styles */ } +.wp-block-cover:not(.alignwide):not(.alignfull), +.wp-block-cover-image:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -1862,12 +1953,19 @@ input[type="reset"]:hover, .wp-block-file a.wp-block-file__button:active, .wp-block-file a.wp-block-file__button:focus, -.wp-block-file a.wp-block-file__button:hover, -.wp-block-file a.wp-block-file__button:visited { +.wp-block-file a.wp-block-file__button:hover { color: var(--button--color-text-hover); opacity: inherit; } +.wp-block-file a.wp-block-file__button:visited { + color: var(--button--color-text); +} + +.wp-block-file a.wp-block-file__button:visited:hover { + color: var(--button--color-text-hover); +} + .wp-block-file .wp-block-file__button { line-height: var(--button--line-height); color: var(--button--color-text); @@ -1899,10 +1997,19 @@ input[type="reset"]:hover, } .wp-block-file .wp-block-file__button:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .wp-block-file .wp-block-file__button:focus { + color: var(--button--color-background); +} + +.wp-block-file .wp-block-file__button:focus:not(.has-background) { + color: var(--button--color-text-hover); +} + .wp-block-file .wp-block-file__button:disabled { background-color: var(--global--color-white-50); border-color: var(--global--color-white-50); @@ -1925,6 +2032,23 @@ input[type="reset"]:hover, font-size: var(--global--font-size-xs); } +.wp-block-gallery .blocks-gallery-image figcaption a, +.wp-block-gallery .blocks-gallery-item figcaption a { + color: var(--global--color-white); +} + +.wp-block-gallery .blocks-gallery-image figcaption a:focus, +.wp-block-gallery .blocks-gallery-item figcaption a:focus { + background-color: transparent; + outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); + text-decoration: none; +} + +.wp-block-gallery .blocks-gallery-image a:focus img, +.wp-block-gallery .blocks-gallery-item a:focus img { + outline-offset: 2px; +} + .wp-block-group { display: block; clear: both; @@ -1977,6 +2101,14 @@ input[type="reset"]:hover, padding: var(--global--spacing-vertical); } +.wp-block-group.has-background .wp-block-group__inner-container > .alignfull, +.wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull, .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull, +.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { + max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + margin-right: calc(-1 * var(--global--spacing-vertical)); +} + h1, .h1, h2, @@ -2075,6 +2207,10 @@ h6, margin-left: var(--global--spacing-horizontal); } +.wp-block-image a:focus img { + outline-offset: 2px; +} + .entry-content > *[class="wp-block-image"], .entry-content [class*="inner-container"] > *[class="wp-block-image"] { margin-top: 0; @@ -2101,8 +2237,23 @@ img { padding: var(--global--spacing-unit); } +@media only screen and (min-width: 482px) { + .entry-content > .wp-block-image > .alignleft, + .entry-content > .wp-block-image > .alignright { + max-width: 50%; + } +} + +@media only screen and (max-width: 481px) { + .entry-content > .wp-block-image > .alignleft, + .entry-content > .wp-block-image > .alignright { + margin-right: 0; + margin-left: 0; + } +} + .wp-block-latest-comments { - margin-right: 0; + padding-right: 0; } .wp-block-latest-comments .wp-block-latest-comments__comment { @@ -2153,6 +2304,11 @@ img { margin-bottom: 0; } +.wp-block-latest-posts.is-grid { + word-wrap: break-word; + word-break: break-word; +} + .wp-block-latest-posts.is-grid > li { margin-bottom: var(--global--spacing-vertical); } @@ -2309,6 +2465,10 @@ img { display: block; } +.gallery-item a:focus img { + outline-offset: -2px; +} + .gallery-columns-2 .gallery-item { max-width: 50%; } @@ -2345,6 +2505,10 @@ img { display: block; } +figure.wp-caption a:focus img { + outline-offset: 2px; +} + ul, ol { font-family: var(--list--font-family); @@ -2389,6 +2553,10 @@ dd { */ } +.wp-block-media-text a:focus img { + outline-offset: -1px; +} + .wp-block-media-text .wp-block-media-text__content { padding: var(--global--spacing-horizontal); } @@ -2669,54 +2837,11 @@ pre.wp-block-preformatted { } .wp-block-quote { - position: relative; - margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) 0; /** * Block Options */ } -.wp-block-quote > * { - margin-top: var(--global--spacing-unit); - margin-bottom: var(--global--spacing-unit); -} - -.wp-block-quote > *:first-child { - margin-top: 0; -} - -.wp-block-quote > *:last-child { - margin-bottom: 0; -} - -.wp-block-quote p { - font-family: var(--quote--font-family); - font-size: var(--quote--font-size); - font-style: var(--quote--font-style); - font-weight: var(--quote--font-weight-strong); - line-height: var(--quote--line-height); -} - -.wp-block-quote strong { - font-weight: var(--quote--font-weight); -} - -.wp-block-quote:before { - content: "\201C"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); - position: absolute; - right: calc(-0.5 * var(--global--spacing-horizontal)); -} - -.wp-block-quote .wp-block-quote__citation, -.wp-block-quote cite, -.wp-block-quote footer { - color: var(--global--color-primary); - font-size: var(--global--font-size-xs); - font-style: var(--quote--font-style-cite); -} - .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, [class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, [style*="background-color"] .wp-block-quote .wp-block-quote__citation, @@ -2813,12 +2938,6 @@ pre.wp-block-preformatted { } @media only screen and (max-width: 481px) { - .wp-block-quote { - padding-right: calc(0.5 * var(--global--spacing-horizontal)); - } - .wp-block-quote:before { - right: 0; - } .wp-block-quote.has-text-align-right { padding-right: 0; padding-left: calc(0.5 * var(--global--spacing-horizontal)); @@ -3453,10 +3572,7 @@ a.custom-logo-link { position: absolute; padding-top: calc(0.5 * var(--global--spacing-vertical)); margin-top: 0; - top: 0; - } - .admin-bar .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { - top: 46px; + top: var(--global--admin-bar--height); } .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { display: none; @@ -4199,7 +4315,7 @@ h1.page-title { .primary-navigation { position: absolute; - top: 0; + top: var(--global--admin-bar--height); left: 0; color: var(--primary-nav--color-text); font-size: var(--primary-nav--font-size); @@ -4238,10 +4354,10 @@ h1.page-title { transform: translateY(0) translateX(-100%); } .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { - top: 46px; + top: var(--global--admin-bar--height); } .admin-bar .primary-navigation > .primary-menu-container { - height: calc(100vh - 46px); + height: calc(100vh - var(--global--admin-bar--height)); } .primary-navigation > .primary-menu-container:focus { border: 2px solid var(--global--color-primary); @@ -4269,10 +4385,6 @@ h1.page-title { } } -.admin-bar .primary-navigation { - top: 46px; -} - @media only screen and (min-width: 482px) { .primary-navigation { position: relative; @@ -4413,6 +4525,22 @@ h1.page-title { .primary-navigation > div > .menu-wrapper > li > .sub-menu li { background: var(--global--color-background); } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left { + left: 0; + right: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after { + left: var(--global--spacing-horizontal); + right: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right { + right: 0; + left: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after { + left: auto; + right: var(--global--spacing-horizontal); + } } .primary-navigation .primary-menu > .menu-item:hover > a { @@ -4567,8 +4695,8 @@ h1.page-title { } .footer-navigation { - margin-top: var(--global--spacing-vertical); - margin-bottom: calc(2 * var(--global--spacing-vertical)); + margin-top: calc(2 * var(--global--spacing-vertical)); + margin-bottom: var(--global--spacing-vertical); color: var(--footer--color-text); font-size: var(--global--font-size-xs); font-family: var(--footer--font-family); @@ -4652,6 +4780,10 @@ h1.page-title { flex-direction: column; } +.navigation .nav-links .dots { + text-align: center; +} + @media only screen and (min-width: 592px) { .navigation .nav-links { display: flex; @@ -4760,12 +4892,18 @@ h1.page-title { } } +.pagination .nav-links, +.comments-pagination .nav-links { + margin-top: calc(-1 * var(--global--spacing-vertical)); +} + .pagination .nav-links > *, .comments-pagination .nav-links > * { color: var(--pagination--color-text); font-family: var(--pagination--font-family); font-size: var(--pagination--font-size); font-weight: var(--pagination--font-weight); + margin-top: var(--global--spacing-vertical); margin-right: calc(0.66 * var(--global--spacing-unit)); margin-left: calc(0.66 * var(--global--spacing-unit)); } @@ -4800,7 +4938,7 @@ h1.page-title { margin-left: auto; } -@media only screen and (max-width: 591px) { +@media only screen and (max-width: 821px) { .pagination .nav-links, .comments-pagination .nav-links { display: flex; @@ -5202,4 +5340,4 @@ footer { .is-IE .post-thumbnail .wp-post-image { min-width: auto; -} \ No newline at end of file +} diff --git a/wp-content/themes/twentytwentyone/style.css b/wp-content/themes/twentytwentyone/style.css index 07cc829efd..6caf08ae90 100644 --- a/wp-content/themes/twentytwentyone/style.css +++ b/wp-content/themes/twentytwentyone/style.css @@ -288,6 +288,18 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL. --widget--line-height-title: 1.4; --widget--font-weight-title: 700; --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit)); + /* Admin-bar height */ + --global--admin-bar--height: 0; +} + +.admin-bar { + --global--admin-bar--height: 32px; +} + +@media only screen and (max-width: 782px) { + .admin-bar { + --global--admin-bar--height: 46px; + } } @media only screen and (min-width: 652px) { @@ -1005,21 +1017,9 @@ button { /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */ blockquote { - margin: 0; padding: 0; -} - -blockquote p { - font-size: var(--heading--font-size-h4); - letter-spacing: var(--heading--letter-spacing-h4); - line-height: var(--heading--line-height-h4); -} - -blockquote cite, -blockquote footer { - color: var(--global--color-primary); - font-size: var(--global--font-size-xs); - letter-spacing: var(--global--letter-spacing); + position: relative; + margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); } blockquote > * { @@ -1035,6 +1035,23 @@ blockquote > *:last-child { margin-bottom: 0; } +blockquote p { + letter-spacing: var(--heading--letter-spacing-h4); + font-family: var(--quote--font-family); + font-size: var(--quote--font-size); + font-style: var(--quote--font-style); + font-weight: var(--quote--font-weight-strong); + line-height: var(--quote--line-height); +} + +blockquote cite, +blockquote footer { + font-weight: normal; + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + letter-spacing: var(--global--letter-spacing); +} + blockquote.alignleft, blockquote.alignright { padding-left: inherit; } @@ -1052,6 +1069,35 @@ blockquote.alignright footer { letter-spacing: var(--global--letter-spacing); } +blockquote strong { + font-weight: var(--quote--font-weight); +} + +blockquote:before { + content: "\201C"; + font-size: var(--quote--font-size); + line-height: var(--quote--line-height); + position: absolute; + left: calc(-0.5 * var(--global--spacing-horizontal)); +} + +blockquote .wp-block-quote__citation, +blockquote cite, +blockquote footer { + color: var(--global--color-primary); + font-size: var(--global--font-size-xs); + font-style: var(--quote--font-style-cite); +} + +@media only screen and (max-width: 481px) { + blockquote { + padding-left: calc(0.5 * var(--global--spacing-horizontal)); + } + blockquote:before { + left: 0; + } +} + input[type="text"], input[type="email"], input[type="url"], @@ -1460,8 +1506,23 @@ a:hover { } .site a:focus { - outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); - text-decoration: none; + /* Only visible in Windows High Contrast mode */ + outline: 2px solid transparent; + background: rgba(255, 255, 255, 0.9); +} + +.has-background-dark .site a:focus, +.has-background-dark .site a:focus .meta-nav { + color: var(--wp--style--color--link, var(--global--color-background)); +} + +.has-background-white .site a:focus { + background: rgba(0, 0, 0, 0.9); + color: var(--wp--style--color--link, var(--global--color-white)); +} + +.has-background-white .site a:focus .meta-nav { + color: var(--wp--style--color--link, var(--global--color-white)); } .site a:focus.skip-link { @@ -1470,6 +1531,15 @@ a:hover { outline-offset: -2px; } +.site a:focus.skip-link:focus { + color: #21759b; + background-color: #f1f1f1; +} + +.site a:focus img { + outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary)); +} + .has-background:not(.has-background-background-color) .has-link-color a, .has-background:not(.has-background-background-color).has-link-color a { color: var(--wp--style--color--link, var(--global--color-primary)); @@ -1538,10 +1608,27 @@ input[type="submit"]:focus, input[type="reset"]:focus, .wp-block-search__button:focus, .wp-block-button .wp-block-button__link:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .site .button:focus, .has-background-dark +input[type="submit"]:focus, .has-background-dark +input[type="reset"]:focus, .has-background-dark +.wp-block-search__button:focus, .has-background-dark +.wp-block-button .wp-block-button__link:focus { + color: var(--button--color-background); +} + +.site .button:focus:not(.has-background), +input[type="submit"]:focus:not(.has-background), +input[type="reset"]:focus:not(.has-background), +.wp-block-search__button:focus:not(.has-background), +.wp-block-button .wp-block-button__link:focus:not(.has-background) { + color: var(--button--color-text-hover); +} + .site .button:disabled, input[type="submit"]:disabled, input[type="reset"]:disabled, @@ -1611,10 +1698,6 @@ input[type="reset"]:hover, color: var(--button--color-background); } -.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):visited { - color: var(--button--color-background); -} - .wp-block-button.is-style-outline .wp-block-button__link.has-background, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color { border: var(--button--border-width) solid currentColor; } @@ -1651,6 +1734,10 @@ input[type="reset"]:hover, display: block; } +.wp-block-columns:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-columns .wp-block-column > * { margin-top: calc(0.66 * var(--global--spacing-vertical)); margin-bottom: calc(0.66 * var(--global--spacing-vertical)); @@ -1685,9 +1772,8 @@ input[type="reset"]:hover, } } -@media only screen and (min-width: 652px) { +@media only screen and (min-width: 822px) { .wp-block-columns .wp-block-column:not(:last-child) { - /* Resetting margins to match _block-container.scss */ margin-bottom: 0; } } @@ -1737,7 +1823,7 @@ input[type="reset"]:hover, .wp-block-cover, .wp-block-cover-image { - background-color: var(--cover--color-foreground); + background-color: var(--cover--color-background); min-height: var(--cover--height); margin-top: inherit; margin-bottom: inherit; @@ -1746,6 +1832,11 @@ input[type="reset"]:hover, /* Block Styles */ } +.wp-block-cover:not(.alignwide):not(.alignfull), +.wp-block-cover-image:not(.alignwide):not(.alignfull) { + clear: both; +} + .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover .wp-block-cover-image-text, .wp-block-cover .wp-block-cover-text, @@ -1867,12 +1958,19 @@ input[type="reset"]:hover, .wp-block-file a.wp-block-file__button:active, .wp-block-file a.wp-block-file__button:focus, -.wp-block-file a.wp-block-file__button:hover, -.wp-block-file a.wp-block-file__button:visited { +.wp-block-file a.wp-block-file__button:hover { color: var(--button--color-text-hover); opacity: inherit; } +.wp-block-file a.wp-block-file__button:visited { + color: var(--button--color-text); +} + +.wp-block-file a.wp-block-file__button:visited:hover { + color: var(--button--color-text-hover); +} + .wp-block-file .wp-block-file__button { line-height: var(--button--line-height); color: var(--button--color-text); @@ -1904,10 +2002,19 @@ input[type="reset"]:hover, } .wp-block-file .wp-block-file__button:focus { + background: transparent; outline-offset: -6px; outline: 2px dotted currentColor; } +.has-background-dark .wp-block-file .wp-block-file__button:focus { + color: var(--button--color-background); +} + +.wp-block-file .wp-block-file__button:focus:not(.has-background) { + color: var(--button--color-text-hover); +} + .wp-block-file .wp-block-file__button:disabled { background-color: var(--global--color-white-50); border-color: var(--global--color-white-50); @@ -1930,6 +2037,23 @@ input[type="reset"]:hover, font-size: var(--global--font-size-xs); } +.wp-block-gallery .blocks-gallery-image figcaption a, +.wp-block-gallery .blocks-gallery-item figcaption a { + color: var(--global--color-white); +} + +.wp-block-gallery .blocks-gallery-image figcaption a:focus, +.wp-block-gallery .blocks-gallery-item figcaption a:focus { + background-color: transparent; + outline: 2px solid var(--wp--style--color--link, var(--global--color-primary)); + text-decoration: none; +} + +.wp-block-gallery .blocks-gallery-image a:focus img, +.wp-block-gallery .blocks-gallery-item a:focus img { + outline-offset: 2px; +} + .wp-block-group { display: block; clear: both; @@ -1982,6 +2106,14 @@ input[type="reset"]:hover, padding: var(--global--spacing-vertical); } +.wp-block-group.has-background .wp-block-group__inner-container > .alignfull, +.wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull, .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull, +.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull { + max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical))); + margin-left: calc(-1 * var(--global--spacing-vertical)); +} + h1, .h1, h2, @@ -2080,6 +2212,10 @@ h6, margin-right: var(--global--spacing-horizontal); } +.wp-block-image a:focus img { + outline-offset: 2px; +} + .entry-content > *[class="wp-block-image"], .entry-content [class*="inner-container"] > *[class="wp-block-image"] { margin-top: 0; @@ -2106,8 +2242,23 @@ img { padding: var(--global--spacing-unit); } +@media only screen and (min-width: 482px) { + .entry-content > .wp-block-image > .alignleft, + .entry-content > .wp-block-image > .alignright { + max-width: 50%; + } +} + +@media only screen and (max-width: 481px) { + .entry-content > .wp-block-image > .alignleft, + .entry-content > .wp-block-image > .alignright { + margin-left: 0; + margin-right: 0; + } +} + .wp-block-latest-comments { - margin-left: 0; + padding-left: 0; } .wp-block-latest-comments .wp-block-latest-comments__comment { @@ -2158,6 +2309,11 @@ img { margin-bottom: 0; } +.wp-block-latest-posts.is-grid { + word-wrap: break-word; + word-break: break-word; +} + .wp-block-latest-posts.is-grid > li { margin-bottom: var(--global--spacing-vertical); } @@ -2314,6 +2470,10 @@ img { display: block; } +.gallery-item a:focus img { + outline-offset: -2px; +} + .gallery-columns-2 .gallery-item { max-width: 50%; } @@ -2350,6 +2510,10 @@ img { display: block; } +figure.wp-caption a:focus img { + outline-offset: 2px; +} + ul, ol { font-family: var(--list--font-family); @@ -2394,6 +2558,10 @@ dd { */ } +.wp-block-media-text a:focus img { + outline-offset: -1px; +} + .wp-block-media-text .wp-block-media-text__content { padding: var(--global--spacing-horizontal); } @@ -2674,54 +2842,11 @@ pre.wp-block-preformatted { } .wp-block-quote { - position: relative; - margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal); /** * Block Options */ } -.wp-block-quote > * { - margin-top: var(--global--spacing-unit); - margin-bottom: var(--global--spacing-unit); -} - -.wp-block-quote > *:first-child { - margin-top: 0; -} - -.wp-block-quote > *:last-child { - margin-bottom: 0; -} - -.wp-block-quote p { - font-family: var(--quote--font-family); - font-size: var(--quote--font-size); - font-style: var(--quote--font-style); - font-weight: var(--quote--font-weight-strong); - line-height: var(--quote--line-height); -} - -.wp-block-quote strong { - font-weight: var(--quote--font-weight); -} - -.wp-block-quote:before { - content: "\201C"; - font-size: var(--quote--font-size); - line-height: var(--quote--line-height); - position: absolute; - left: calc(-0.5 * var(--global--spacing-horizontal)); -} - -.wp-block-quote .wp-block-quote__citation, -.wp-block-quote cite, -.wp-block-quote footer { - color: var(--global--color-primary); - font-size: var(--global--font-size-xs); - font-style: var(--quote--font-style-cite); -} - .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, [class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation, [style*="background-color"] .wp-block-quote .wp-block-quote__citation, @@ -2818,12 +2943,6 @@ pre.wp-block-preformatted { } @media only screen and (max-width: 481px) { - .wp-block-quote { - padding-left: calc(0.5 * var(--global--spacing-horizontal)); - } - .wp-block-quote:before { - left: 0; - } .wp-block-quote.has-text-align-right { padding-left: 0; padding-right: calc(0.5 * var(--global--spacing-horizontal)); @@ -3463,10 +3582,7 @@ a.custom-logo-link { position: absolute; padding-top: calc(0.5 * var(--global--spacing-vertical)); margin-top: 0; - top: 0; - } - .admin-bar .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { - top: 46px; + top: var(--global--admin-bar--height); } .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo { display: none; @@ -4209,7 +4325,7 @@ h1.page-title { .primary-navigation { position: absolute; - top: 0; + top: var(--global--admin-bar--height); right: 0; color: var(--primary-nav--color-text); font-size: var(--primary-nav--font-size); @@ -4248,10 +4364,10 @@ h1.page-title { transform: translateY(0) translateX(100%); } .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container { - top: 46px; + top: var(--global--admin-bar--height); } .admin-bar .primary-navigation > .primary-menu-container { - height: calc(100vh - 46px); + height: calc(100vh - var(--global--admin-bar--height)); } .primary-navigation > .primary-menu-container:focus { border: 2px solid var(--global--color-primary); @@ -4279,10 +4395,6 @@ h1.page-title { } } -.admin-bar .primary-navigation { - top: 46px; -} - @media only screen and (min-width: 482px) { .primary-navigation { position: relative; @@ -4423,6 +4535,30 @@ h1.page-title { .primary-navigation > div > .menu-wrapper > li > .sub-menu li { background: var(--global--color-background); } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left { + /* rtl:ignore */ + left: 0; + /* rtl:ignore */ + right: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after { + /* rtl:ignore */ + left: var(--global--spacing-horizontal); + /* rtl:ignore */ + right: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right { + /* rtl:ignore */ + right: 0; + /* rtl:ignore */ + left: auto; + } + .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after { + /* rtl:ignore */ + left: auto; + /* rtl:ignore */ + right: var(--global--spacing-horizontal); + } } .primary-navigation .primary-menu > .menu-item:hover > a { @@ -4577,8 +4713,8 @@ h1.page-title { } .footer-navigation { - margin-top: var(--global--spacing-vertical); - margin-bottom: calc(2 * var(--global--spacing-vertical)); + margin-top: calc(2 * var(--global--spacing-vertical)); + margin-bottom: var(--global--spacing-vertical); color: var(--footer--color-text); font-size: var(--global--font-size-xs); font-family: var(--footer--font-family); @@ -4662,6 +4798,10 @@ h1.page-title { flex-direction: column; } +.navigation .nav-links .dots { + text-align: center; +} + @media only screen and (min-width: 592px) { .navigation .nav-links { display: flex; @@ -4770,12 +4910,18 @@ h1.page-title { } } +.pagination .nav-links, +.comments-pagination .nav-links { + margin-top: calc(-1 * var(--global--spacing-vertical)); +} + .pagination .nav-links > *, .comments-pagination .nav-links > * { color: var(--pagination--color-text); font-family: var(--pagination--font-family); font-size: var(--pagination--font-size); font-weight: var(--pagination--font-weight); + margin-top: var(--global--spacing-vertical); margin-left: calc(0.66 * var(--global--spacing-unit)); margin-right: calc(0.66 * var(--global--spacing-unit)); } @@ -4810,7 +4956,7 @@ h1.page-title { margin-right: auto; } -@media only screen and (max-width: 591px) { +@media only screen and (max-width: 821px) { .pagination .nav-links, .comments-pagination .nav-links { display: flex; @@ -5214,4 +5360,4 @@ footer { min-width: auto; } -/*# sourceMappingURL=style.css.map */ \ No newline at end of file +/*# sourceMappingURL=style.css.map */ diff --git a/wp-content/themes/twentytwentyone/template-parts/header/site-header.php b/wp-content/themes/twentytwentyone/template-parts/header/site-header.php index 738201a5ec..97ba28f87c 100644 --- a/wp-content/themes/twentytwentyone/template-parts/header/site-header.php +++ b/wp-content/themes/twentytwentyone/template-parts/header/site-header.php @@ -7,40 +7,15 @@ * @since 1.0.0 */ -$has_primary_nav = has_nav_menu( 'primary' ); - $wrapper_classes = 'site-header'; $wrapper_classes .= has_custom_logo() ? ' has-logo' : ''; $wrapper_classes .= true === get_theme_mod( 'display_title_and_tagline', true ) ? ' has-title-and-tagline' : ''; -$wrapper_classes .= $has_primary_nav ? ' has-menu' : ''; +$wrapper_classes .= has_nav_menu( 'primary' ) ? ' has-menu' : ''; ?> diff --git a/wp-content/themes/twentytwentyone/template-parts/header/site-nav.php b/wp-content/themes/twentytwentyone/template-parts/header/site-nav.php new file mode 100644 index 0000000000..ce8723b2e0 --- /dev/null +++ b/wp-content/themes/twentytwentyone/template-parts/header/site-nav.php @@ -0,0 +1,36 @@ + + + + + diff --git a/wp-includes/version.php b/wp-includes/version.php index 0caf46fc3d..33134a4601 100644 --- a/wp-includes/version.php +++ b/wp-includes/version.php @@ -13,7 +13,7 @@ * * @global string $wp_version */ -$wp_version = '5.6-beta2-49477'; +$wp_version = '5.6-beta2-49478'; /** * Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.