mirror of
https://github.com/WordPress/WordPress.git
synced 2024-09-29 15:47:38 +02:00
Twenty Twenty-One: Import the latest changes for 5.6 beta 2.
For a full list of changes since beta 1, see 9e34dca...e580895.
Props poena, melchoyce, luminuu, aristath, justinahinon, jffng, ryelle, kishanjasani, rolfsiebers.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49320
git-svn-id: http://core.svn.wordpress.org/trunk@49081 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
desrosj
parent
8b3071bc1a
commit
87b6c253b5
@ -30,18 +30,6 @@
|
||||
/* Widgets */
|
||||
}
|
||||
|
||||
/* OS dark theme preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html.respect-color-scheme-preference body {
|
||||
background-color: #28303d;
|
||||
}
|
||||
@media (prefers-color-scheme: dark){
|
||||
html.respect-color-scheme-preference body{
|
||||
background-color: #28303d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Button extends */
|
||||
.wp-block-button__link {
|
||||
line-height: 1.5;
|
||||
@ -480,6 +468,8 @@ a:hover {
|
||||
|
||||
.wp-block-code code {
|
||||
font-size: 1rem;
|
||||
white-space: pre !important;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.wp-block-code {
|
||||
@ -488,6 +478,7 @@ a:hover {
|
||||
border-style: solid;
|
||||
border-width: 0.1rem;
|
||||
padding: 20px;
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.wp-block-cover {
|
||||
@ -1551,10 +1542,14 @@ p.has-background {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
pre.wp-block-preformatted {
|
||||
overflow-x: auto;
|
||||
white-space: pre !important;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
.wp-block-pullquote {
|
||||
padding: 40px 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
border-width: 3px;
|
||||
border-bottom-style: solid;
|
||||
@ -1616,6 +1611,8 @@ p.has-background {
|
||||
}
|
||||
|
||||
.wp-block-pullquote.is-style-solid-color {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: 50px;
|
||||
border-width: 3px;
|
||||
border-style: solid;
|
||||
@ -2013,6 +2010,14 @@ p.has-background {
|
||||
color: #d1e4dd;
|
||||
}
|
||||
|
||||
.wp-block[data-align="center"] > * {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wp-block[data-align="center"] .wp-block-search__button-only .wp-block-search__inside-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wp-block-separator {
|
||||
border-bottom: 1px solid #28303d;
|
||||
clear: both;
|
||||
@ -2228,6 +2233,10 @@ table.wp-calendar-table caption {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wp-block-tag-cloud.aligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
pre.wp-block-verse {
|
||||
padding: 0;
|
||||
}
|
||||
@ -2762,4 +2771,4 @@ a {
|
||||
.has-red-to-purple-gradient-background {
|
||||
background: linear-gradient(160deg, #e4d1d1, #d1d1e4);
|
||||
}
|
||||
/*# sourceMappingURL=ie-editor.css.map */
|
||||
/*# sourceMappingURL=ie-editor.css.map */
|
||||
|
||||
@ -10,7 +10,7 @@ Tested up to: 5.6
|
||||
Requires PHP: 5.6
|
||||
Version: 1.0.0
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: LICENSE
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: twentytwentyone
|
||||
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
|
||||
|
||||
@ -122,18 +122,6 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
||||
/* Widgets */
|
||||
}
|
||||
|
||||
/* OS dark theme preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html.respect-color-scheme-preference body {
|
||||
background-color: #28303d;
|
||||
}
|
||||
@media (prefers-color-scheme: dark){
|
||||
html.respect-color-scheme-preference body{
|
||||
background-color: #28303d;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* Button extends */
|
||||
.site .button {
|
||||
line-height: 1.5;
|
||||
@ -1800,6 +1788,12 @@ input[type="color"] {
|
||||
height: 40px;
|
||||
}
|
||||
|
||||
input[type="email"],
|
||||
input[type="url"] {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
select {
|
||||
border: 3px solid #39414d;
|
||||
color: #28303d;
|
||||
@ -1996,6 +1990,40 @@ input[type="range"]::-ms-thumb {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: grid;
|
||||
border-color: #39414d;
|
||||
padding: 25px;
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
font-size: 1.5rem;
|
||||
}
|
||||
|
||||
fieldset input[type="submit"] {
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
fieldset input:not([type="submit"]) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
fieldset input[type="radio"], fieldset input[type="checkbox"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
fieldset input[type="radio"] + label {
|
||||
font-size: 1.125rem;
|
||||
padding-left: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
fieldset input[type="checkbox"] + label {
|
||||
font-size: 1.125rem;
|
||||
padding-left: 0;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
@ -2076,7 +2104,8 @@ i {
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -2224,7 +2253,9 @@ a:hover {
|
||||
|
||||
.wp-block-code code {
|
||||
font-size: 1rem;
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-block-columns .wp-block-column > * {
|
||||
@ -2268,10 +2299,11 @@ a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-columns.is-style-twentytwentyone-columns-overlap {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 652px) {
|
||||
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
|
||||
margin-left: -50px;
|
||||
margin-top: 63px;
|
||||
@ -3491,6 +3523,11 @@ p.has-text-color a {
|
||||
}
|
||||
}
|
||||
|
||||
pre.wp-block-preformatted {
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.wp-block-pullquote {
|
||||
padding: 40px 0;
|
||||
text-align: center;
|
||||
@ -4022,6 +4059,14 @@ p.has-text-color a {
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wp-block-search .wp-block-search__label {
|
||||
font-size: 1.125rem;
|
||||
font-weight: 500;
|
||||
@ -4036,6 +4081,7 @@ p.has-text-color a {
|
||||
max-width: inherit;
|
||||
margin-right: -3px;
|
||||
padding: 10px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.wp-block-search .wp-block-search__input:focus {
|
||||
@ -4280,6 +4326,11 @@ table.wp-calendar-table caption {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wp-block-tag-cloud.alignfull {
|
||||
padding-left: 20px;
|
||||
padding-right: 20px;
|
||||
}
|
||||
|
||||
.wp-block-verse {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
@ -4884,9 +4935,11 @@ a.custom-logo-link {
|
||||
}
|
||||
|
||||
.page-links .post-page-numbers {
|
||||
display: inline-block;
|
||||
margin-left: 13px;
|
||||
margin-right: 13px;
|
||||
padding: 10px 0;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.page-links .post-page-numbers:first-child {
|
||||
@ -4959,10 +5012,6 @@ h1.entry-title {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.entry-content .more-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-content > iframe[style] {
|
||||
margin: 30px 0 !important;
|
||||
max-width: 100% !important;
|
||||
@ -4982,6 +5031,10 @@ h1.entry-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.entry-footer > span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.entry-footer a {
|
||||
color: currentColor;
|
||||
}
|
||||
@ -5238,6 +5291,15 @@ h1.page-title {
|
||||
margin-top: 60px;
|
||||
}
|
||||
|
||||
.archive .entry-footer .cat-links,
|
||||
.archive .entry-footer .tags-links,
|
||||
.search .entry-footer .cat-links,
|
||||
.search .entry-footer .tags-links,
|
||||
.blog .entry-footer .cat-links,
|
||||
.blog .entry-footer .tags-links {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.archive.logged-in .entry-footer .posted-on {
|
||||
margin-right: 10px;
|
||||
}
|
||||
@ -5694,8 +5756,6 @@ h1.page-title {
|
||||
padding-right: 20px;
|
||||
padding-bottom: 25px;
|
||||
background-color: #d1e4dd;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: all .15s ease-in-out;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
@ -5704,6 +5764,8 @@ h1.page-title {
|
||||
.primary-navigation > .primary-menu-container {
|
||||
height: 100vh;
|
||||
z-index: 499;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
|
||||
@ -5763,7 +5825,7 @@ h1.page-title {
|
||||
.primary-navigation #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
.primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
|
||||
.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
|
||||
display: none;
|
||||
}
|
||||
.admin-bar .primary-navigation {
|
||||
@ -5853,14 +5915,6 @@ h1.page-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
|
||||
position: relative;
|
||||
}
|
||||
@ -6122,6 +6176,11 @@ h1.page-title {
|
||||
color: #28303d;
|
||||
}
|
||||
|
||||
.navigation .nav-links > * {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.navigation .nav-links .nav-next a,
|
||||
.navigation .nav-links .nav-previous a {
|
||||
display: flex;
|
||||
@ -6269,12 +6328,6 @@ h1.page-title {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
.pagination .nav-links > *{
|
||||
color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.comments-pagination .nav-links > * {
|
||||
color: #28303d;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
@ -6284,12 +6337,6 @@ h1.page-title {
|
||||
margin-right: 13px;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark){
|
||||
.comments-pagination .nav-links > *{
|
||||
color: #f0f0f0;
|
||||
}
|
||||
}
|
||||
|
||||
.pagination .nav-links > *.current {
|
||||
border-bottom: 1px solid #28303d;
|
||||
}
|
||||
@ -6367,14 +6414,20 @@ h1.page-title {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 822px) {
|
||||
@media only screen and (min-width: 652px) {
|
||||
.widget-area {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: 50px;
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.widget-area {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.widget-area ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
@ -6737,4 +6790,44 @@ section,
|
||||
footer {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark *,
|
||||
.is-IE.has-background-dark a,
|
||||
.is-IE.has-background-dark .site-description,
|
||||
.is-IE.has-background-dark .entry-title,
|
||||
.is-IE.has-background-dark .entry-footer,
|
||||
.is-IE.has-background-dark .widget-area,
|
||||
.is-IE.has-background-dark .post-navigation .meta-nav,
|
||||
.is-IE.has-background-dark .footer-navigation-wrapper li a:link,
|
||||
.is-IE.has-background-dark .site-footer > .site-info,
|
||||
.is-IE.has-background-dark .site-footer > .site-info a,
|
||||
.is-IE.has-background-dark .site-footer > .site-info a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark .sub-menu-toggle svg,
|
||||
.is-IE.has-background-dark .sub-menu-toggle path,
|
||||
.is-IE.has-background-dark .post-navigation .meta-nav svg,
|
||||
.is-IE.has-background-dark .post-navigation .meta-nav path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 481px) {
|
||||
.is-IE.has-background-dark.primary-navigation-open .primary-navigation > .primary-menu-container,
|
||||
.is-IE.has-background-dark.primary-navigation-open .menu-button-container {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark .skip-link:focus {
|
||||
color: #21759b;
|
||||
}
|
||||
/*# sourceMappingURL=ie.css.map */
|
||||
@ -208,23 +208,6 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* OS dark theme preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html.respect-color-scheme-preference {
|
||||
--global--color-background: var(--global--color-dark-gray);
|
||||
--global--color-primary: var(--global--color-light-gray);
|
||||
--global--color-secondary: var(--global--color-light-gray);
|
||||
--button--color-text: var(--global--color-background);
|
||||
--button--color-text-hover: var(--global--color-secondary);
|
||||
--button--color-text-active: var(--global--color-secondary);
|
||||
--button--color-background: var(--global--color-secondary);
|
||||
--button--color-background-active: var(--global--color-background);
|
||||
}
|
||||
html.respect-color-scheme-preference body {
|
||||
background-color: var(--global--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
/* Button extends */
|
||||
.wp-block-button__link, .wp-block-file .wp-block-file__button, .wp-block-search .wp-block-search__button {
|
||||
line-height: var(--button--line-height);
|
||||
@ -526,6 +509,8 @@ a:hover {
|
||||
|
||||
.wp-block-code code {
|
||||
font-size: var(--global--font-size-xs);
|
||||
white-space: pre !important;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.wp-block-code {
|
||||
@ -534,6 +519,7 @@ a:hover {
|
||||
border-style: solid;
|
||||
border-width: 0.1rem;
|
||||
padding: var(--global--spacing-unit);
|
||||
color: currentColor;
|
||||
}
|
||||
|
||||
.wp-block-cover,
|
||||
@ -1107,10 +1093,14 @@ p.has-background {
|
||||
padding: var(--global--spacing-unit);
|
||||
}
|
||||
|
||||
pre.wp-block-preformatted {
|
||||
overflow-x: auto;
|
||||
white-space: pre !important;
|
||||
font-size: var(--global--font-size-xs);
|
||||
}
|
||||
|
||||
.wp-block-pullquote {
|
||||
padding: calc(2 * var(--global--spacing-unit)) 0;
|
||||
margin-left: 0;
|
||||
margin-right: 0;
|
||||
text-align: center;
|
||||
border-width: var(--pullquote--border-width);
|
||||
border-bottom-style: solid;
|
||||
@ -1156,6 +1146,8 @@ p.has-background {
|
||||
}
|
||||
|
||||
.wp-block-pullquote.is-style-solid-color {
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
padding: calc(2.5 * var(--global--spacing-unit));
|
||||
border-width: var(--pullquote--border-width);
|
||||
border-style: solid;
|
||||
@ -1463,6 +1455,14 @@ p.has-background {
|
||||
color: var(--button--color-text);
|
||||
}
|
||||
|
||||
.wp-block[data-align="center"] > * {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.wp-block[data-align="center"] .wp-block-search__button-only .wp-block-search__inside-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wp-block-separator,
|
||||
hr {
|
||||
border-bottom: var(--separator--height) solid var(--separator--border-color);
|
||||
@ -1618,6 +1618,10 @@ table.wp-calendar-table caption {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wp-block-tag-cloud.aligncenter {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
pre.wp-block-verse {
|
||||
padding: 0;
|
||||
}
|
||||
@ -1967,4 +1971,4 @@ a {
|
||||
background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style-editor.css.map */
|
||||
/*# sourceMappingURL=style-editor.css.map */
|
||||
|
||||
@ -45,11 +45,11 @@
|
||||
|
||||
// Modify the body class depending on whether this is a dark background or not.
|
||||
if ( isDark ) {
|
||||
if ( ! document.body.classList.contains( 'is-background-dark' ) ) {
|
||||
document.body.classList.add( 'is-background-dark' );
|
||||
if ( ! document.body.classList.contains( 'has-background-dark' ) ) {
|
||||
document.body.classList.add( 'has-background-dark' );
|
||||
}
|
||||
} else {
|
||||
document.body.classList.remove( 'is-background-dark' );
|
||||
document.body.classList.remove( 'has-background-dark' );
|
||||
}
|
||||
|
||||
document.documentElement.style.setProperty( '--global--color-primary', textColor );
|
||||
|
||||
@ -1,60 +0,0 @@
|
||||
/* global twentytwentyoneGetHexLum, backgroundColorNotice */
|
||||
|
||||
( function() {
|
||||
// Wait until the customizer has finished loading.
|
||||
wp.customize.bind( 'ready', function() {
|
||||
var supportsDarkMode = ( 127 <= twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) && wp.customize( 'respect_user_color_preference' ).get() );
|
||||
|
||||
// Hide the "respect_user_color_preference" setting if the background-color is dark.
|
||||
if ( 127 > twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) ) {
|
||||
wp.customize.control( 'respect_user_color_preference' ).deactivate();
|
||||
}
|
||||
|
||||
// Add notice on init if needed.
|
||||
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches && wp.customize( 'respect_user_color_preference' ) ) {
|
||||
if ( supportsDarkMode ) {
|
||||
wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', {
|
||||
type: 'info',
|
||||
message: backgroundColorNotice.message
|
||||
} ) );
|
||||
}
|
||||
|
||||
// Remove notice when the value changes.
|
||||
wp.customize( 'background_color', function( setting ) {
|
||||
setting.bind( function() {
|
||||
setting.notifications.remove( 'backgroundColorNotice' );
|
||||
} );
|
||||
} );
|
||||
}
|
||||
|
||||
// Handle changes to the background-color.
|
||||
wp.customize( 'background_color', function( setting ) {
|
||||
setting.bind( function( value ) {
|
||||
if ( 127 > twentytwentyoneGetHexLum( value ) ) {
|
||||
wp.customize.control( 'respect_user_color_preference' ).deactivate();
|
||||
supportsDarkMode = false;
|
||||
} else {
|
||||
wp.customize.control( 'respect_user_color_preference' ).activate();
|
||||
supportsDarkMode = wp.customize( 'respect_user_color_preference' ).get();
|
||||
}
|
||||
} );
|
||||
} );
|
||||
|
||||
// Handle changes to the "respect_user_color_preference" setting.
|
||||
wp.customize( 'respect_user_color_preference', function( setting ) {
|
||||
setting.bind( function( value ) {
|
||||
supportsDarkMode = value && 127 < twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() );
|
||||
if ( window.matchMedia( '(prefers-color-scheme: dark)' ).matches ) {
|
||||
if ( ! supportsDarkMode ) {
|
||||
wp.customize( 'background_color' ).notifications.remove( 'backgroundColorNotice' );
|
||||
} else {
|
||||
wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', {
|
||||
type: 'info',
|
||||
message: backgroundColorNotice.message
|
||||
} ) );
|
||||
}
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
}() );
|
||||
@ -1,7 +1,7 @@
|
||||
/**
|
||||
* File primary-navigation.js.
|
||||
* File polyfills.js.
|
||||
*
|
||||
* Required to open and close the mobile navigation.
|
||||
* Polyfills for IE11.
|
||||
*/
|
||||
|
||||
/**
|
||||
|
||||
@ -39,13 +39,6 @@ function twentytwentyoneCollapseMenuOnClickOutside( event ) {
|
||||
* @param {Element} el - The element.
|
||||
*/
|
||||
function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
|
||||
// Close submenu that was opened from a hover action.
|
||||
// We'll return early in this case to avoid changing the aria-expanded attribute.
|
||||
if ( el.parentNode.classList.contains( 'hover' ) ) {
|
||||
el.parentNode.classList.remove( 'hover' );
|
||||
return;
|
||||
}
|
||||
|
||||
// Close other expanded items.
|
||||
el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
|
||||
if ( button !== el ) {
|
||||
@ -130,12 +123,10 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
|
||||
|
||||
document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {
|
||||
li.addEventListener( 'mouseenter', function() {
|
||||
if ( 'false' === this.querySelector( '.sub-menu-toggle' ).getAttribute( 'aria-expanded' ) ) {
|
||||
this.classList.add( 'hover' );
|
||||
}
|
||||
this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' );
|
||||
} );
|
||||
li.addEventListener( 'mouseleave', function() {
|
||||
this.classList.remove( 'hover' );
|
||||
this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'false' );
|
||||
} );
|
||||
} );
|
||||
};
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
/**
|
||||
* File responsive-embeds.js.
|
||||
*
|
||||
* Make embeds responsive so they don't overflow their container.
|
||||
*/
|
||||
|
||||
/**
|
||||
* Add max-width & max-height to <iframe> elements, depending on their width & height props.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @return {void}
|
||||
*/
|
||||
function twentytwentyoneResponsiveEmbeds() {
|
||||
var proportion, parentWidth;
|
||||
|
||||
// Loop iframe elements.
|
||||
document.querySelectorAll( 'iframe' ).forEach( function( iframe ) {
|
||||
// Only continue if the iframe has a width & height defined.
|
||||
if ( iframe.width && iframe.height ) {
|
||||
// Calculate the proportion/ratio based on the width & height.
|
||||
proportion = parseFloat( iframe.width ) / parseFloat( iframe.height );
|
||||
// Get the parent element's width.
|
||||
parentWidth = parseFloat( window.getComputedStyle( iframe.parentElement, null ).width.replace( 'px', '' ) );
|
||||
// Set the max-width & height.
|
||||
iframe.style.maxWidth = '100%';
|
||||
iframe.style.maxHeight = Math.round( parentWidth / proportion ).toString() + 'px';
|
||||
}
|
||||
} );
|
||||
}
|
||||
|
||||
// Run on initial load.
|
||||
twentytwentyoneResponsiveEmbeds();
|
||||
|
||||
// Run on resize.
|
||||
window.onresize = twentytwentyoneResponsiveEmbeds;
|
||||
@ -120,12 +120,6 @@ class Twenty_Twenty_One_Custom_Colors {
|
||||
if ( 'd1e4dd' !== strtolower( $background_color ) ) {
|
||||
wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', $this->generate_custom_color_variables( 'editor' ) );
|
||||
}
|
||||
|
||||
$should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true ); // @phpstan-ignore-line. Passing true instead of default value of false to get_theme_mod.
|
||||
if ( $should_respect_color_scheme && self::get_relative_luminance_from_hex( $background_color ) > 127 ) {
|
||||
// Add dark mode variable overrides.
|
||||
wp_add_inline_style( 'twenty-twenty-one-custom-color-overrides', '@media (prefers-color-scheme: dark) { :root .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); } }' );
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
@ -175,9 +169,9 @@ class Twenty_Twenty_One_Custom_Colors {
|
||||
public function body_class( $classes ) {
|
||||
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
|
||||
if ( 127 > self::get_relative_luminance_from_hex( $background_color ) ) {
|
||||
$classes[] = 'is-background-dark';
|
||||
$classes[] = 'has-background-dark';
|
||||
} else {
|
||||
$classes[] = 'is-background-light';
|
||||
$classes[] = 'has-background-light';
|
||||
}
|
||||
|
||||
return $classes;
|
||||
|
||||
@ -146,30 +146,6 @@ if ( ! class_exists( 'Twenty_Twenty_One_Customize' ) ) {
|
||||
)
|
||||
)
|
||||
);
|
||||
|
||||
$wp_customize->add_setting(
|
||||
'respect_user_color_preference',
|
||||
array(
|
||||
'capability' => 'edit_theme_options',
|
||||
'default' => true,
|
||||
'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' ) );
|
||||
},
|
||||
)
|
||||
);
|
||||
}
|
||||
|
||||
/**
|
||||
|
||||
@ -32,12 +32,12 @@ $twenty_twenty_one_comment_count = get_comments_number();
|
||||
?>
|
||||
<h2 class="comments-title">
|
||||
<?php if ( '1' === $twenty_twenty_one_comment_count ) : ?>
|
||||
<?php esc_html_e( '1 Reply', 'twentytwentyone' ); ?>
|
||||
<?php esc_html_e( '1 Comment', 'twentytwentyone' ); ?>
|
||||
<?php else : ?>
|
||||
<?php
|
||||
printf(
|
||||
/* translators: %s: comment count number. */
|
||||
esc_html( _nx( '%s Reply', '%s Replies', $twenty_twenty_one_comment_count, 'comments title', 'twentytwentyone' ) ),
|
||||
esc_html( _nx( '%s Comment', '%s Comments', $twenty_twenty_one_comment_count, 'comments title', 'twentytwentyone' ) ),
|
||||
esc_html( number_format_i18n( $twenty_twenty_one_comment_count ) )
|
||||
);
|
||||
?>
|
||||
@ -85,7 +85,7 @@ $twenty_twenty_one_comment_count = get_comments_number();
|
||||
comment_form(
|
||||
array(
|
||||
'logged_in_as' => null,
|
||||
'title_reply' => esc_html__( 'Leave a reply', 'twentytwentyone' ),
|
||||
'title_reply' => esc_html__( 'Leave a comment', 'twentytwentyone' ),
|
||||
'title_reply_before' => '<h2 id="reply-title" class="comment-reply-title">',
|
||||
'title_reply_after' => '</h2>',
|
||||
)
|
||||
|
||||
@ -336,6 +336,7 @@ if ( ! function_exists( 'twenty_twenty_one_setup' ) ) {
|
||||
add_theme_support( 'experimental-custom-spacing' );
|
||||
|
||||
// Add support for custom units.
|
||||
// This was removed in WordPress 5.6 but is still required to properly support WP 5.5.
|
||||
add_theme_support( 'custom-units' );
|
||||
}
|
||||
}
|
||||
@ -415,15 +416,16 @@ function twenty_twenty_one_scripts() {
|
||||
wp_enqueue_script( 'comment-reply' );
|
||||
}
|
||||
|
||||
wp_register_script(
|
||||
'twenty-twenty-one-ie11-polyfills',
|
||||
get_template_directory_uri() . '/assets/js/polyfills.js',
|
||||
array(),
|
||||
wp_get_theme()->get( 'Version' ),
|
||||
true
|
||||
);
|
||||
|
||||
// Main navigation scripts.
|
||||
if ( has_nav_menu( 'primary' ) ) {
|
||||
wp_register_script(
|
||||
'twenty-twenty-one-ie11-polyfills',
|
||||
get_template_directory_uri() . '/assets/js/polyfills.js',
|
||||
array(),
|
||||
wp_get_theme()->get( 'Version' ),
|
||||
true
|
||||
);
|
||||
wp_enqueue_script(
|
||||
'twenty-twenty-one-primary-navigation-script',
|
||||
get_template_directory_uri() . '/assets/js/primary-navigation.js',
|
||||
@ -432,6 +434,15 @@ function twenty_twenty_one_scripts() {
|
||||
true
|
||||
);
|
||||
}
|
||||
|
||||
// Responsive embeds script.
|
||||
wp_enqueue_script(
|
||||
'twenty-twenty-one-responsive-embeds-script',
|
||||
get_template_directory_uri() . '/assets/js/responsive-embeds.js',
|
||||
array( 'twenty-twenty-one-ie11-polyfills' ),
|
||||
wp_get_theme()->get( 'Version' ),
|
||||
true
|
||||
);
|
||||
}
|
||||
add_action( 'wp_enqueue_scripts', 'twenty_twenty_one_scripts' );
|
||||
|
||||
@ -542,7 +553,6 @@ function twentytwentyone_customize_preview_init() {
|
||||
}
|
||||
add_action( 'customize_preview_init', 'twentytwentyone_customize_preview_init' );
|
||||
|
||||
|
||||
/**
|
||||
* Enqueue scripts for the customizer.
|
||||
*
|
||||
@ -559,22 +569,6 @@ function twentytwentyone_customize_controls_enqueue_scripts() {
|
||||
wp_get_theme()->get( 'Version' ),
|
||||
true
|
||||
);
|
||||
|
||||
wp_enqueue_script(
|
||||
'twentytwentyone-customize-controls',
|
||||
get_theme_file_uri( '/assets/js/customize.js' ),
|
||||
array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ),
|
||||
wp_get_theme()->get( 'Version' ),
|
||||
true
|
||||
);
|
||||
|
||||
wp_localize_script(
|
||||
'twentytwentyone-customize-controls',
|
||||
'backgroundColorNotice',
|
||||
array(
|
||||
'message' => esc_html__( 'You currently have dark mode enabled on your device. Changing the color picker will allow you to preview light mode.', 'twentytwentyone' ),
|
||||
)
|
||||
);
|
||||
}
|
||||
add_action( 'customize_controls_enqueue_scripts', 'twentytwentyone_customize_controls_enqueue_scripts' );
|
||||
|
||||
@ -586,9 +580,27 @@ add_action( 'customize_controls_enqueue_scripts', 'twentytwentyone_customize_con
|
||||
* @return void
|
||||
*/
|
||||
function twentytwentyone_the_html_classes() {
|
||||
$background_color = get_theme_mod( 'background_color', 'D1E4DD' );
|
||||
$should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', true );
|
||||
if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
|
||||
echo 'class="respect-color-scheme-preference"';
|
||||
$classes = apply_filters( 'twentytwentyone_html_classes', '' );
|
||||
if ( ! $classes ) {
|
||||
return;
|
||||
}
|
||||
echo 'class="' . esc_attr( $classes ) . '"';
|
||||
}
|
||||
|
||||
/**
|
||||
* Add "is-IE" class to body if the user is on Internet Explorer.
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
function twentytwentyone_add_ie_class() {
|
||||
?>
|
||||
<script>
|
||||
if ( -1 !== navigator.userAgent.indexOf( 'MSIE' ) || -1 !== navigator.appVersion.indexOf( 'Trident/' ) ) {
|
||||
document.body.classList.add( 'is-IE' );
|
||||
}
|
||||
</script>
|
||||
<?php
|
||||
}
|
||||
add_action( 'wp_footer', 'twentytwentyone_add_ie_class' );
|
||||
|
||||
@ -224,7 +224,7 @@ add_filter( 'excerpt_more', 'twenty_twenty_one_continue_reading_link_excerpt' );
|
||||
*/
|
||||
function twenty_twenty_one_continue_reading_link() {
|
||||
if ( ! is_admin() ) {
|
||||
return '<div class="more-link-container"><a class="more-link" href="' . esc_url( get_permalink() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></div>';
|
||||
return '<div class="more-link-container"><a class="more-link" href="' . esc_url( get_permalink() ) . '#more-' . esc_attr( get_the_ID() ) . '">' . twenty_twenty_one_continue_reading_text() . '</a></div>';
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@ -105,7 +105,7 @@ if ( ! function_exists( 'twenty_twenty_one_entry_meta_footer' ) ) {
|
||||
if ( $categories_list ) {
|
||||
printf(
|
||||
/* translators: %s: list of categories. */
|
||||
'<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . '. </span>',
|
||||
'<span class="cat-links">' . esc_html__( 'Categorized as %s', 'twentytwentyone' ) . ' </span>',
|
||||
$categories_list // phpcs:ignore WordPress.Security.EscapeOutput
|
||||
);
|
||||
}
|
||||
@ -115,7 +115,7 @@ if ( ! function_exists( 'twenty_twenty_one_entry_meta_footer' ) ) {
|
||||
if ( $tags_list ) {
|
||||
printf(
|
||||
/* translators: %s: list of tags. */
|
||||
'<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '.</span>',
|
||||
'<span class="tags-links">' . esc_html__( 'Tagged %s', 'twentytwentyone' ) . '</span>',
|
||||
$tags_list // phpcs:ignore WordPress.Security.EscapeOutput
|
||||
);
|
||||
}
|
||||
|
||||
@ -18,7 +18,7 @@
|
||||
*/
|
||||
$twentytwentyone_unique_id = wp_unique_id( 'search-form-' );
|
||||
|
||||
$twentytwentyone_aria_label = ! empty( $args['label'] ) ? 'aria-label="' . esc_attr( $args['label'] ) . '"' : '';
|
||||
$twentytwentyone_aria_label = ! empty( $args['aria_label'] ) ? 'aria-label="' . esc_attr( $args['aria_label'] ) . '"' : '';
|
||||
?>
|
||||
<form role="search" <?php echo $twentytwentyone_aria_label; // phpcs:ignore WordPress.Security.EscapeOutput.OutputNotEscaped -- Escaped above. ?> method="get" class="search-form" action="<?php echo esc_url( home_url( '/' ) ); ?>">
|
||||
<label for="<?php echo esc_attr( $twentytwentyone_unique_id ); ?>"><?php _e( 'Search…', 'twentytwentyone' ); // phpcs:ignore: WordPress.Security.EscapeOutput.UnsafePrintingFunction -- core trusts translations ?></label>
|
||||
|
||||
@ -10,7 +10,7 @@ Tested up to: 5.6
|
||||
Requires PHP: 5.6
|
||||
Version: 1.0.0
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: LICENSE
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: twentytwentyone
|
||||
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
|
||||
|
||||
@ -300,23 +300,6 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
||||
}
|
||||
}
|
||||
|
||||
/* OS dark theme preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html.respect-color-scheme-preference {
|
||||
--global--color-background: var(--global--color-dark-gray);
|
||||
--global--color-primary: var(--global--color-light-gray);
|
||||
--global--color-secondary: var(--global--color-light-gray);
|
||||
--button--color-text: var(--global--color-background);
|
||||
--button--color-text-hover: var(--global--color-secondary);
|
||||
--button--color-text-active: var(--global--color-secondary);
|
||||
--button--color-background: var(--global--color-secondary);
|
||||
--button--color-background-active: var(--global--color-background);
|
||||
}
|
||||
html.respect-color-scheme-preference body {
|
||||
background-color: var(--global--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
/* Button extends */
|
||||
.site .button,
|
||||
input[type="submit"],
|
||||
@ -1231,6 +1214,11 @@ input[type="color"] {
|
||||
height: calc(4 * var(--form--spacing-unit));
|
||||
}
|
||||
|
||||
input[type="email"],
|
||||
input[type="url"] {
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
select {
|
||||
border: var(--form--border-width) solid var(--form--border-color);
|
||||
color: var(--form--color-text);
|
||||
@ -1412,6 +1400,35 @@ input[type="range"]::-ms-thumb {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: grid;
|
||||
border-color: var(--global--color-secondary);
|
||||
padding: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
font-size: var(--global--font-size-lg);
|
||||
}
|
||||
|
||||
fieldset input[type="submit"] {
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
fieldset input:not([type="submit"]) {
|
||||
margin-bottom: var(--global--spacing-unit);
|
||||
}
|
||||
|
||||
fieldset input[type="radio"], fieldset input[type="checkbox"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
fieldset input[type="radio"] + label,
|
||||
fieldset input[type="checkbox"] + label {
|
||||
font-size: var(--form--font-size);
|
||||
padding-right: 0;
|
||||
margin-bottom: var(--global--spacing-unit);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
@ -1478,7 +1495,8 @@ i {
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -1576,7 +1594,9 @@ a:hover {
|
||||
|
||||
.wp-block-code code {
|
||||
font-size: var(--global--font-size-xs);
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-block-columns .wp-block-column > * {
|
||||
@ -1620,10 +1640,11 @@ a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-columns.is-style-twentytwentyone-columns-overlap {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 652px) {
|
||||
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
|
||||
margin-right: calc(-2 * var(--global--spacing-horizontal));
|
||||
margin-top: calc(2.5 * var(--global--spacing-horizontal));
|
||||
@ -2440,6 +2461,11 @@ p.has-text-color a {
|
||||
}
|
||||
}
|
||||
|
||||
pre.wp-block-preformatted {
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.wp-block-pullquote {
|
||||
padding: calc(2 * var(--global--spacing-unit)) 0;
|
||||
text-align: center;
|
||||
@ -2804,6 +2830,14 @@ p.has-text-color a {
|
||||
max-width: var(--responsive--aligndefault-width);
|
||||
}
|
||||
|
||||
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
|
||||
background-color: var(--global--color-white);
|
||||
}
|
||||
|
||||
.wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wp-block-search .wp-block-search__label {
|
||||
font-size: var(--form--font-size);
|
||||
font-weight: var(--form--label-weight);
|
||||
@ -2818,6 +2852,7 @@ p.has-text-color a {
|
||||
max-width: inherit;
|
||||
margin-left: calc(-1 * var(--button--border-width));
|
||||
padding: var(--form--spacing-unit);
|
||||
background-color: var(--global--color-white);
|
||||
}
|
||||
|
||||
.wp-block-search .wp-block-search__input:focus {
|
||||
@ -3002,6 +3037,11 @@ table.wp-calendar-table caption {
|
||||
float: left;
|
||||
}
|
||||
|
||||
.wp-block-tag-cloud.alignfull {
|
||||
padding-right: var(--global--spacing-unit);
|
||||
padding-left: var(--global--spacing-unit);
|
||||
}
|
||||
|
||||
.wp-block-verse {
|
||||
font-family: var(--entry-content--font-family);
|
||||
}
|
||||
@ -3433,9 +3473,11 @@ a.custom-logo-link {
|
||||
}
|
||||
|
||||
.page-links .post-page-numbers {
|
||||
display: inline-block;
|
||||
margin-right: calc(0.66 * var(--global--spacing-unit));
|
||||
margin-left: calc(0.66 * var(--global--spacing-unit));
|
||||
padding: calc(0.33 * var(--global--spacing-vertical)) 0;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.page-links .post-page-numbers:first-child {
|
||||
@ -3488,10 +3530,6 @@ h1.entry-title {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.entry-content .more-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-content > iframe[style] {
|
||||
margin: var(--global--spacing-vertical) 0 !important;
|
||||
max-width: 100% !important;
|
||||
@ -3511,6 +3549,10 @@ h1.entry-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.entry-footer > span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.entry-footer a {
|
||||
color: currentColor;
|
||||
}
|
||||
@ -3672,6 +3714,15 @@ h1.page-title {
|
||||
margin-top: calc(2 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
.archive .entry-footer .cat-links,
|
||||
.archive .entry-footer .tags-links,
|
||||
.search .entry-footer .cat-links,
|
||||
.search .entry-footer .tags-links,
|
||||
.blog .entry-footer .cat-links,
|
||||
.blog .entry-footer .tags-links {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.archive.logged-in .entry-footer .posted-on,
|
||||
.search.logged-in .entry-footer .posted-on,
|
||||
.blog.logged-in .entry-footer .posted-on {
|
||||
@ -4058,8 +4109,6 @@ h1.page-title {
|
||||
padding-left: var(--global--spacing-unit);
|
||||
padding-bottom: var(--global--spacing-horizontal);
|
||||
background-color: var(--global--color-background);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: all .15s ease-in-out;
|
||||
transform: translateY(var(--global--spacing-vertical));
|
||||
}
|
||||
@ -4068,6 +4117,8 @@ h1.page-title {
|
||||
.primary-navigation > .primary-menu-container {
|
||||
height: 100vh;
|
||||
z-index: 499;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
|
||||
@ -4127,7 +4178,7 @@ h1.page-title {
|
||||
.primary-navigation #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
.primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
|
||||
.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
|
||||
display: none;
|
||||
}
|
||||
.admin-bar .primary-navigation {
|
||||
@ -4217,14 +4268,6 @@ h1.page-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
|
||||
position: relative;
|
||||
}
|
||||
@ -4470,6 +4513,11 @@ h1.page-title {
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
|
||||
.navigation .nav-links > * {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.navigation .nav-links .nav-next a,
|
||||
.navigation .nav-links .nav-previous a {
|
||||
display: flex;
|
||||
@ -4665,14 +4713,20 @@ h1.page-title {
|
||||
font-family: var(--footer--font-family);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 822px) {
|
||||
@media only screen and (min-width: 652px) {
|
||||
.widget-area {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: calc(2 * var(--global--spacing-horizontal));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.widget-area {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.widget-area ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
@ -4972,4 +5026,44 @@ main,
|
||||
section,
|
||||
footer {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark *,
|
||||
.is-IE.has-background-dark a,
|
||||
.is-IE.has-background-dark .site-description,
|
||||
.is-IE.has-background-dark .entry-title,
|
||||
.is-IE.has-background-dark .entry-footer,
|
||||
.is-IE.has-background-dark .widget-area,
|
||||
.is-IE.has-background-dark .post-navigation .meta-nav,
|
||||
.is-IE.has-background-dark .footer-navigation-wrapper li a:link,
|
||||
.is-IE.has-background-dark .site-footer > .site-info,
|
||||
.is-IE.has-background-dark .site-footer > .site-info a,
|
||||
.is-IE.has-background-dark .site-footer > .site-info a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark .sub-menu-toggle svg,
|
||||
.is-IE.has-background-dark .sub-menu-toggle path,
|
||||
.is-IE.has-background-dark .post-navigation .meta-nav svg,
|
||||
.is-IE.has-background-dark .post-navigation .meta-nav path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 481px) {
|
||||
.is-IE.has-background-dark.primary-navigation-open .primary-navigation > .primary-menu-container,
|
||||
.is-IE.has-background-dark.primary-navigation-open .menu-button-container {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark .skip-link:focus {
|
||||
color: #21759b;
|
||||
}
|
||||
@ -10,7 +10,7 @@ Tested up to: 5.6
|
||||
Requires PHP: 5.6
|
||||
Version: 1.0.0
|
||||
License: GNU General Public License v2 or later
|
||||
License URI: LICENSE
|
||||
License URI: http://www.gnu.org/licenses/gpl-2.0.html
|
||||
Text Domain: twentytwentyone
|
||||
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
|
||||
|
||||
@ -300,23 +300,6 @@ Twenty Twenty-One is distributed under the terms of the GNU GPL.
|
||||
}
|
||||
}
|
||||
|
||||
/* OS dark theme preference */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
html.respect-color-scheme-preference {
|
||||
--global--color-background: var(--global--color-dark-gray);
|
||||
--global--color-primary: var(--global--color-light-gray);
|
||||
--global--color-secondary: var(--global--color-light-gray);
|
||||
--button--color-text: var(--global--color-background);
|
||||
--button--color-text-hover: var(--global--color-secondary);
|
||||
--button--color-text-active: var(--global--color-secondary);
|
||||
--button--color-background: var(--global--color-secondary);
|
||||
--button--color-background-active: var(--global--color-background);
|
||||
}
|
||||
html.respect-color-scheme-preference body {
|
||||
background-color: var(--global--color-background);
|
||||
}
|
||||
}
|
||||
|
||||
/* Button extends */
|
||||
.site .button,
|
||||
input[type="submit"],
|
||||
@ -1235,6 +1218,12 @@ input[type="color"] {
|
||||
height: calc(4 * var(--form--spacing-unit));
|
||||
}
|
||||
|
||||
input[type="email"],
|
||||
input[type="url"] {
|
||||
/*rtl:ignore*/
|
||||
direction: ltr;
|
||||
}
|
||||
|
||||
select {
|
||||
border: var(--form--border-width) solid var(--form--border-color);
|
||||
color: var(--form--color-text);
|
||||
@ -1416,6 +1405,35 @@ input[type="range"]::-ms-thumb {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
fieldset {
|
||||
display: grid;
|
||||
border-color: var(--global--color-secondary);
|
||||
padding: var(--global--spacing-horizontal);
|
||||
}
|
||||
|
||||
fieldset legend {
|
||||
font-size: var(--global--font-size-lg);
|
||||
}
|
||||
|
||||
fieldset input[type="submit"] {
|
||||
max-width: max-content;
|
||||
}
|
||||
|
||||
fieldset input:not([type="submit"]) {
|
||||
margin-bottom: var(--global--spacing-unit);
|
||||
}
|
||||
|
||||
fieldset input[type="radio"], fieldset input[type="checkbox"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
fieldset input[type="radio"] + label,
|
||||
fieldset input[type="checkbox"] + label {
|
||||
font-size: var(--form--font-size);
|
||||
padding-left: 0;
|
||||
margin-bottom: var(--global--spacing-unit);
|
||||
}
|
||||
|
||||
img {
|
||||
display: block;
|
||||
height: auto;
|
||||
@ -1482,7 +1500,8 @@ i {
|
||||
}
|
||||
|
||||
pre {
|
||||
white-space: pre-wrap;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/*
|
||||
@ -1580,7 +1599,9 @@ a:hover {
|
||||
|
||||
.wp-block-code code {
|
||||
font-size: var(--global--font-size-xs);
|
||||
overflow: auto;
|
||||
white-space: pre;
|
||||
overflow-x: auto;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.wp-block-columns .wp-block-column > * {
|
||||
@ -1624,10 +1645,11 @@ a:hover {
|
||||
}
|
||||
}
|
||||
|
||||
.wp-block-columns.is-style-twentytwentyone-columns-overlap {
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 652px) {
|
||||
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.wp-block-columns.is-style-twentytwentyone-columns-overlap .wp-block-column:nth-child(2n) {
|
||||
margin-left: calc(-2 * var(--global--spacing-horizontal));
|
||||
margin-top: calc(2.5 * var(--global--spacing-horizontal));
|
||||
@ -2444,6 +2466,11 @@ p.has-text-color a {
|
||||
}
|
||||
}
|
||||
|
||||
pre.wp-block-preformatted {
|
||||
overflow-x: auto;
|
||||
white-space: pre;
|
||||
}
|
||||
|
||||
.wp-block-pullquote {
|
||||
padding: calc(2 * var(--global--spacing-unit)) 0;
|
||||
text-align: center;
|
||||
@ -2808,6 +2835,14 @@ p.has-text-color a {
|
||||
max-width: var(--responsive--aligndefault-width);
|
||||
}
|
||||
|
||||
.wp-block-search__button-inside .wp-block-search__inside-wrapper {
|
||||
background-color: var(--global--color-white);
|
||||
}
|
||||
|
||||
.wp-block-search__button-only.aligncenter .wp-block-search__inside-wrapper {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.wp-block-search .wp-block-search__label {
|
||||
font-size: var(--form--font-size);
|
||||
font-weight: var(--form--label-weight);
|
||||
@ -2822,6 +2857,7 @@ p.has-text-color a {
|
||||
max-width: inherit;
|
||||
margin-right: calc(-1 * var(--button--border-width));
|
||||
padding: var(--form--spacing-unit);
|
||||
background-color: var(--global--color-white);
|
||||
}
|
||||
|
||||
.wp-block-search .wp-block-search__input:focus {
|
||||
@ -3006,6 +3042,11 @@ table.wp-calendar-table caption {
|
||||
float: right;
|
||||
}
|
||||
|
||||
.wp-block-tag-cloud.alignfull {
|
||||
padding-left: var(--global--spacing-unit);
|
||||
padding-right: var(--global--spacing-unit);
|
||||
}
|
||||
|
||||
.wp-block-verse {
|
||||
font-family: var(--entry-content--font-family);
|
||||
}
|
||||
@ -3442,9 +3483,11 @@ a.custom-logo-link {
|
||||
}
|
||||
|
||||
.page-links .post-page-numbers {
|
||||
display: inline-block;
|
||||
margin-left: calc(0.66 * var(--global--spacing-unit));
|
||||
margin-right: calc(0.66 * var(--global--spacing-unit));
|
||||
padding: calc(0.33 * var(--global--spacing-vertical)) 0;
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.page-links .post-page-numbers:first-child {
|
||||
@ -3497,10 +3540,6 @@ h1.entry-title {
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.entry-content .more-link:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.entry-content > iframe[style] {
|
||||
margin: var(--global--spacing-vertical) 0 !important;
|
||||
max-width: 100% !important;
|
||||
@ -3520,6 +3559,10 @@ h1.entry-title {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.entry-footer > span {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.entry-footer a {
|
||||
color: currentColor;
|
||||
}
|
||||
@ -3681,6 +3724,15 @@ h1.page-title {
|
||||
margin-top: calc(2 * var(--global--spacing-vertical));
|
||||
}
|
||||
|
||||
.archive .entry-footer .cat-links,
|
||||
.archive .entry-footer .tags-links,
|
||||
.search .entry-footer .cat-links,
|
||||
.search .entry-footer .tags-links,
|
||||
.blog .entry-footer .cat-links,
|
||||
.blog .entry-footer .tags-links {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.archive.logged-in .entry-footer .posted-on,
|
||||
.search.logged-in .entry-footer .posted-on,
|
||||
.blog.logged-in .entry-footer .posted-on {
|
||||
@ -4067,8 +4119,6 @@ h1.page-title {
|
||||
padding-right: var(--global--spacing-unit);
|
||||
padding-bottom: var(--global--spacing-horizontal);
|
||||
background-color: var(--global--color-background);
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
transition: all .15s ease-in-out;
|
||||
transform: translateY(var(--global--spacing-vertical));
|
||||
}
|
||||
@ -4077,6 +4127,8 @@ h1.page-title {
|
||||
.primary-navigation > .primary-menu-container {
|
||||
height: 100vh;
|
||||
z-index: 499;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
border: 2px solid transparent;
|
||||
}
|
||||
.has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
|
||||
@ -4136,7 +4188,7 @@ h1.page-title {
|
||||
.primary-navigation #toggle-menu {
|
||||
display: none;
|
||||
}
|
||||
.primary-navigation > .primary-menu-container ul > li:not(.hover) .sub-menu-toggle[aria-expanded="false"] ~ ul {
|
||||
.primary-navigation > .primary-menu-container ul > li .sub-menu-toggle[aria-expanded="false"] ~ ul {
|
||||
display: none;
|
||||
}
|
||||
.admin-bar .primary-navigation {
|
||||
@ -4226,14 +4278,6 @@ h1.page-title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-minus {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper .hover .sub-menu-toggle .icon-plus {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.primary-navigation > div > .menu-wrapper > li > .sub-menu {
|
||||
position: relative;
|
||||
}
|
||||
@ -4479,6 +4523,11 @@ h1.page-title {
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
|
||||
.navigation .nav-links > * {
|
||||
min-width: 44px;
|
||||
min-height: 44px;
|
||||
}
|
||||
|
||||
.navigation .nav-links .nav-next a,
|
||||
.navigation .nav-links .nav-previous a {
|
||||
display: flex;
|
||||
@ -4674,14 +4723,20 @@ h1.page-title {
|
||||
font-family: var(--footer--font-family);
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 822px) {
|
||||
@media only screen and (min-width: 652px) {
|
||||
.widget-area {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
grid-template-columns: repeat(2, 1fr);
|
||||
column-gap: calc(2 * var(--global--spacing-horizontal));
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (min-width: 1024px) {
|
||||
.widget-area {
|
||||
grid-template-columns: repeat(3, 1fr);
|
||||
}
|
||||
}
|
||||
|
||||
.widget-area ul {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
@ -4983,4 +5038,44 @@ footer {
|
||||
max-width: none;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark *,
|
||||
.is-IE.has-background-dark a,
|
||||
.is-IE.has-background-dark .site-description,
|
||||
.is-IE.has-background-dark .entry-title,
|
||||
.is-IE.has-background-dark .entry-footer,
|
||||
.is-IE.has-background-dark .widget-area,
|
||||
.is-IE.has-background-dark .post-navigation .meta-nav,
|
||||
.is-IE.has-background-dark .footer-navigation-wrapper li a:link,
|
||||
.is-IE.has-background-dark .site-footer > .site-info,
|
||||
.is-IE.has-background-dark .site-footer > .site-info a,
|
||||
.is-IE.has-background-dark .site-footer > .site-info a:visited {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark .sub-menu-toggle svg,
|
||||
.is-IE.has-background-dark .sub-menu-toggle path,
|
||||
.is-IE.has-background-dark .post-navigation .meta-nav svg,
|
||||
.is-IE.has-background-dark .post-navigation .meta-nav path {
|
||||
fill: #fff;
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
|
||||
background: #000;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 481px) {
|
||||
.is-IE.has-background-dark.primary-navigation-open .primary-navigation > .primary-menu-container,
|
||||
.is-IE.has-background-dark.primary-navigation-open .menu-button-container {
|
||||
background-color: #000;
|
||||
}
|
||||
}
|
||||
|
||||
.is-IE.has-background-dark .skip-link:focus {
|
||||
color: #21759b;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
@ -13,7 +13,7 @@
|
||||
*
|
||||
* @global string $wp_version
|
||||
*/
|
||||
$wp_version = '5.6-beta1-49317';
|
||||
$wp_version = '5.6-beta1-49320';
|
||||
|
||||
/**
|
||||
* Holds the WordPress DB revision, increments when changes are made to the WordPress DB schema.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user