mirror of
https://github.com/WordPress/WordPress.git
synced 2024-12-23 01:27:36 +01:00
Bundled Themes: Sync Twenty Twenty-One with the latest changes from GitHub.
For a full list of changes since [49330], see 5759e96...e7d5991.
Props poena, luminuu, ryelle, kjellr, aristath, justinahinon, felipeelia, joostdevalk.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49478
git-svn-id: http://core.svn.wordpress.org/trunk@49237 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
desrosj
parent
e3a467a55a
commit
e0669ddaae
@ -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 */
|
||||
/*# sourceMappingURL=ie-editor.css.map */
|
||||
|
||||
@ -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 */
|
||||
/*# sourceMappingURL=ie.css.map */
|
||||
|
||||
@ -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 */
|
||||
@ -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 */
|
||||
/*# sourceMappingURL=style-editor.css.map */
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 216 KiB After Width: | Height: | Size: 212 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 276 KiB After Width: | Height: | Size: 261 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 280 KiB After Width: | Height: | Size: 270 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB After Width: | Height: | Size: 194 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 293 KiB After Width: | Height: | Size: 280 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 293 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 226 KiB After Width: | Height: | Size: 192 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 320 KiB After Width: | Height: | Size: 262 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 265 KiB After Width: | Height: | Size: 253 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 159 KiB After Width: | Height: | Size: 153 KiB |
@ -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 <head>.
|
||||
if ( ! stylesheet.length ) {
|
||||
jQuery( '#twenty-twenty-one-style-inline-css' ).after( '<style id="' + stylesheetID + '"></style>' );
|
||||
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, _ ) );
|
||||
}() );
|
||||
|
||||
61
wp-content/themes/twentytwentyone/assets/js/customize.js
Normal file
61
wp-content/themes/twentytwentyone/assets/js/customize.js
Normal file
@ -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 );
|
||||
}
|
||||
} );
|
||||
} );
|
||||
} );
|
||||
}() );
|
||||
@ -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();
|
||||
@ -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' ) );
|
||||
}
|
||||
@ -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' );
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -0,0 +1,389 @@
|
||||
<?php
|
||||
/**
|
||||
* Custom Colors Class
|
||||
*
|
||||
* @package WordPress
|
||||
* @subpackage Twenty_Twenty_One
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
/**
|
||||
* This class is in charge of color customization via the Customizer.
|
||||
*/
|
||||
class Twenty_Twenty_One_Dark_Mode {
|
||||
|
||||
/**
|
||||
* Instantiate the object.
|
||||
*
|
||||
* @access public
|
||||
*
|
||||
* @since 1.0.0
|
||||
*/
|
||||
public function __construct() {
|
||||
|
||||
// Enqueue assets for the block-editor.
|
||||
add_action( 'enqueue_block_editor_assets', array( $this, 'editor_custom_color_variables' ) );
|
||||
|
||||
// Add styles for dark-mode.
|
||||
add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
|
||||
|
||||
// Add scripts for customizer controls.
|
||||
add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_controls_enqueue_scripts' ) );
|
||||
|
||||
// Add customizer controls.
|
||||
add_action( 'customize_register', array( $this, 'customizer_controls' ) );
|
||||
|
||||
// Add HTML classes.
|
||||
add_filter( 'twentytwentyone_html_classes', array( $this, 'html_classes' ) );
|
||||
|
||||
// Add classes to <body> 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 <html> element.
|
||||
*
|
||||
* @access public
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @param string $classes The classes for <html> 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 <body> 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 <button> element.
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function the_html( $attrs = array() ) {
|
||||
$attrs = wp_parse_args(
|
||||
$attrs,
|
||||
array(
|
||||
'id' => 'dark-mode-toggler',
|
||||
'class' => 'fixed-bottom',
|
||||
'aria-pressed' => 'false',
|
||||
'onClick' => 'toggleDarkMode()',
|
||||
)
|
||||
);
|
||||
echo '<button';
|
||||
foreach ( $attrs as $key => $val ) {
|
||||
echo ' ' . esc_attr( $key ) . '="' . esc_attr( $val ) . '"';
|
||||
}
|
||||
echo '>';
|
||||
printf(
|
||||
/* translators: %s: On/Off */
|
||||
esc_html__( 'Dark Mode: %s', 'twentytwentyone' ),
|
||||
'<span aria-hidden="true"></span>'
|
||||
);
|
||||
echo '</button>';
|
||||
?>
|
||||
<style>
|
||||
#dark-mode-toggler > span {
|
||||
margin-<?php echo is_rtl() ? 'right' : 'left'; ?>: 5px;
|
||||
}
|
||||
#dark-mode-toggler > span::before {
|
||||
content: '<?php esc_attr_e( 'Off', 'twentytwentyone' ); ?>';
|
||||
}
|
||||
#dark-mode-toggler[aria-pressed="true"] > span::before {
|
||||
content: '<?php esc_attr_e( 'On', 'twentytwentyone' ); ?>';
|
||||
}
|
||||
<?php if ( is_admin() || wp_is_json_request() ) : ?>
|
||||
.components-editor-notices__pinned ~ .edit-post-visual-editor #dark-mode-toggler {
|
||||
z-index: 20;
|
||||
}
|
||||
html.is-dark-mode #dark-mode-toggler:not(:hover):not(:focus) {
|
||||
color: var(--global--color-primary);
|
||||
}
|
||||
@media only screen and (max-width: 782px) {
|
||||
#dark-mode-toggler {
|
||||
margin-top: 32px;
|
||||
}
|
||||
}
|
||||
<?php endif; ?>
|
||||
</style>
|
||||
|
||||
<?php
|
||||
}
|
||||
|
||||
/**
|
||||
* Print the dark-mode switch script.
|
||||
*
|
||||
* @access public
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function the_script() {
|
||||
echo '<script>';
|
||||
include get_template_directory() . '/assets/js/dark-mode-toggler.js'; // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude
|
||||
echo '</script>';
|
||||
}
|
||||
|
||||
/**
|
||||
* Print the dark-mode switch styles.
|
||||
*
|
||||
* @access public
|
||||
*
|
||||
* @since 1.0.0
|
||||
*
|
||||
* @return void
|
||||
*/
|
||||
public function the_styles() {
|
||||
echo '<style>';
|
||||
include get_theme_file_path( 'assets/css/style-dark-mode.css' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude
|
||||
echo '</style>';
|
||||
}
|
||||
|
||||
/**
|
||||
* 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();
|
||||
}
|
||||
}
|
||||
@ -32,6 +32,7 @@
|
||||
'depth' => 1,
|
||||
'link_before' => '<span>',
|
||||
'link_after' => '</span>',
|
||||
'fallback_cb' => 'false',
|
||||
)
|
||||
);
|
||||
?>
|
||||
|
||||
@ -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.
|
||||
*
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -40,7 +40,7 @@ function twenty_twenty_one_get_starter_content() {
|
||||
<!-- wp:columns {"verticalAlignment":"center","align":"wide","className":"is-style-twentytwentyone-columns-overlap"} -->
|
||||
<div class="wp-block-columns alignwide are-vertically-aligned-center is-style-twentytwentyone-columns-overlap"><!-- wp:column {"verticalAlignment":"center"} -->
|
||||
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"full","sizeSlug":"large"} -->
|
||||
<figure class="wp-block-image alignfull size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/roses-tremieres-hollyhocks.jpg" alt="' . esc_attr__( 'Roses Tremieres (Hollyhocks), by Berthe Morisot, 1884', 'twentytwentyone' ) . '"/></figure>
|
||||
<figure class="wp-block-image alignfull size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/roses-tremieres-hollyhocks-1884.jpg" alt="' . esc_attr__( 'Roses Tremieres (Hollyhocks), by Berthe Morisot, 1884', 'twentytwentyone' ) . '"/></figure>
|
||||
<!-- /wp:image -->
|
||||
|
||||
<!-- wp:spacer -->
|
||||
|
||||
@ -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' ),
|
||||
'<span class="page-description">' . single_term_title( '', false ) . '</span>'
|
||||
);
|
||||
}
|
||||
|
||||
if ( is_tag() ) {
|
||||
return sprintf(
|
||||
/* translators: %s: The term title. */
|
||||
esc_html__( 'Tag Archives: %s', 'twentytwentyone' ),
|
||||
'<span class="page-description">' . single_term_title( '', false ) . '</span>'
|
||||
);
|
||||
}
|
||||
|
||||
if ( is_author() ) {
|
||||
return sprintf(
|
||||
/* translators: %s: The author name. */
|
||||
esc_html__( 'Author Archives: %s', 'twentytwentyone' ),
|
||||
'<span class="page-description">' . get_the_author_meta( 'display_name' ) . '</span>'
|
||||
);
|
||||
}
|
||||
|
||||
if ( is_year() ) {
|
||||
return sprintf(
|
||||
/* translators: %s: The year. */
|
||||
esc_html__( 'Yearly Archives: %s', 'twentytwentyone' ),
|
||||
'<span class="page-description">' . get_the_date( _x( 'Y', 'yearly archives date format', 'twentytwentyone' ) ) . '</span>'
|
||||
);
|
||||
}
|
||||
|
||||
if ( is_month() ) {
|
||||
return sprintf(
|
||||
/* translators: %s: The month. */
|
||||
esc_html__( 'Monthly Archives: %s', 'twentytwentyone' ),
|
||||
'<span class="page-description">' . get_the_date( _x( 'F Y', 'monthly archives date format', 'twentytwentyone' ) ) . '</span>'
|
||||
);
|
||||
}
|
||||
|
||||
if ( is_day() ) {
|
||||
return sprintf(
|
||||
/* translators: %s: The day. */
|
||||
esc_html__( 'Daily Archives: %s', 'twentytwentyone' ),
|
||||
'<span class="page-description">' . get_the_date() . '</span>'
|
||||
);
|
||||
}
|
||||
|
||||
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;
|
||||
|
||||
@ -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",
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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 */
|
||||
/*# sourceMappingURL=style.css.map */
|
||||
|
||||
@ -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' : '';
|
||||
?>
|
||||
|
||||
<header id="masthead" class="<?php echo esc_attr( $wrapper_classes ); ?>" role="banner">
|
||||
|
||||
<?php get_template_part( 'template-parts/header/site-branding' ); ?>
|
||||
<?php get_template_part( 'template-parts/header/site-nav' ); ?>
|
||||
|
||||
<?php if ( $has_primary_nav ) : ?>
|
||||
<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>">
|
||||
<div class="menu-button-container">
|
||||
<button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false">
|
||||
<span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?>
|
||||
<?php echo twenty_twenty_one_get_icon_svg( 'ui', 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
|
||||
</span>
|
||||
<span class="dropdown-icon close"><?php esc_html_e( 'Close', 'twentytwentyone' ); ?>
|
||||
<?php echo twenty_twenty_one_get_icon_svg( 'ui', 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
|
||||
</span>
|
||||
</button><!-- #primary-mobile-menu -->
|
||||
</div><!-- .menu-button-container -->
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'primary',
|
||||
'menu_class' => 'menu-wrapper',
|
||||
'container_class' => 'primary-menu-container',
|
||||
'items_wrap' => '<ul id="primary-menu-list" class="%2$s">%3$s</ul>',
|
||||
)
|
||||
);
|
||||
?>
|
||||
</nav><!-- #site-navigation -->
|
||||
<?php endif; ?>
|
||||
</header><!-- #masthead -->
|
||||
|
||||
@ -0,0 +1,36 @@
|
||||
<?php
|
||||
/**
|
||||
* Displays the site navigation.
|
||||
*
|
||||
* @package WordPress
|
||||
* @subpackage Twenty_Twenty_One
|
||||
* @since 1.0.0
|
||||
*/
|
||||
|
||||
?>
|
||||
|
||||
<?php if ( has_nav_menu( 'primary' ) ) : ?>
|
||||
<nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>">
|
||||
<div class="menu-button-container">
|
||||
<button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false">
|
||||
<span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?>
|
||||
<?php echo twenty_twenty_one_get_icon_svg( 'ui', 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
|
||||
</span>
|
||||
<span class="dropdown-icon close"><?php esc_html_e( 'Close', 'twentytwentyone' ); ?>
|
||||
<?php echo twenty_twenty_one_get_icon_svg( 'ui', 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
|
||||
</span>
|
||||
</button><!-- #primary-mobile-menu -->
|
||||
</div><!-- .menu-button-container -->
|
||||
<?php
|
||||
wp_nav_menu(
|
||||
array(
|
||||
'theme_location' => 'primary',
|
||||
'menu_class' => 'menu-wrapper',
|
||||
'container_class' => 'primary-menu-container',
|
||||
'items_wrap' => '<ul id="primary-menu-list" class="%2$s">%3$s</ul>',
|
||||
'fallback_cb' => 'false',
|
||||
)
|
||||
);
|
||||
?>
|
||||
</nav><!-- #site-navigation -->
|
||||
<?php endif; ?>
|
||||
@ -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.
|
||||
|
||||
Loading…
Reference in New Issue
Block a user