Upstream/WordPress
1
0
Fork 0
mirror of https://github.com/WordPress/WordPress.git synced 2024-06-24 13:54:59 +02:00
Code Issues Projects Releases Wiki Activity

Twenty Twenty-One: Merge the latest changes changes from GitHub for Beta 4.

Browse Source 
In addition to syncing the latest changes, this change also merges the theme’s `.scss` files and other related build tool configurations required to compile the theme’s CSS.

This will allow development of the theme to continue on Trac after 5.6 is released and the GitHub repository is archived.

For a full list of changes since [], see e7d5991...aa284fd.

Props poena, luminuu kjellr, aristath, justinahinon.
See #51526.
Built from https://develop.svn.wordpress.org/trunk@49574


git-svn-id: http://core.svn.wordpress.org/trunk@49312 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This commit is contained in:
desrosj 2020-11-12 18:36:15 +00:00
parent 5ee48d6915
commit 967d29d83d
140 changed files with 14698 additions and 9622 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
wp-content/themes/twentytwentyone/.stylelintignore Normal file
View File

@ -0,0 +1,10 @@
vendor/
node_modules/
assets/images
*.php
*.map
*.png
*.json
LICENSE
composer.lock
*.txt

22
wp-content/themes/twentytwentyone/.stylelintrc-css.json Normal file
View File

@ -0,0 +1,22 @@
{
"extends": [
"stylelint-config-wordpress"
],
"rules": {
"indentation": "tab",
"no-duplicate-selectors": null,
"function-url-quotes": null,
"selector-attribute-quotes": null,
"declaration-block-no-duplicate-properties": null,
"function-calc-no-unspaced-operator": null,
"selector-pseudo-class-no-unknown": null,
"selector-class-pattern": null,
"font-weight-notation": null,
"selector-type-no-unknown": null,
"max-line-length": null,
"at-rule-empty-line-before": null,
"selector-pseudo-element-colon-notation": null,
"number-leading-zero": null,
"no-descending-specificity": null
}
}

15
wp-content/themes/twentytwentyone/.stylelintrc.json Normal file
View File

@ -0,0 +1,15 @@
{
"extends": [
"stylelint-config-wordpress/scss"
],
"rules": {
"selector-class-pattern": null,
"font-weight-notation": null,
"selector-type-no-unknown": null,
"max-line-length": null,
"at-rule-empty-line-before": null,
"selector-pseudo-element-colon-notation": null,
"number-leading-zero": null,
"no-descending-specificity": null
}
}

4
wp-content/themes/twentytwentyone/assets/css/custom-color-overrides.css
View File

@ -1,5 +1,5 @@
/**
* Custom Color Overrides
*
*
* This file is automatically populated if the user chooses custom colors in the Customzier.
*/
*/

2713
wp-content/themes/twentytwentyone/assets/css/ie-editor.css
View File

File diff suppressed because it is too large Load Diff

5363
wp-content/themes/twentytwentyone/assets/css/ie.css
View File

File diff suppressed because it is too large Load Diff

140
wp-content/themes/twentytwentyone/assets/css/print.css
View File

@ -2,27 +2,38 @@
Adding print support. The print styles are based on the the great work of
Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272/.
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Margins
# Margins & paddings
# Typography
# Page breaks
# Links
# Visibility
--------------------------------------------------------------*/
@media print {
/* Margins */
/* Margins & paddings */
@page {
margin: 2cm;
}
.entry {
margin-top: 1em;
}
.entry .entry-header,
.entry,
.single .site-main > article > .entry-footer {
margin-top: 0;
margin-bottom: 0;
}
.site-footer .site-info {
margin: 0;
}
.site-header {
padding: 0;
}
/* Fonts */
body {
font: 13pt Georgia, "Times New Roman", Times, serif;
@ -31,9 +42,19 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
background: #fff !important;
color: #000;
}
h1 {
font-size: 24pt;
.has-background-dark * {
color: #000 !important;
}
h1,
.entry-title,
.singular .entry-title,
.page-title {
font-size: 22pt;
font-weight: bold;
}
h2,
h3,
h4,
@ -41,17 +62,26 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
.has-large-font-size,
h2.author-title,
p.author-bio,
.comments-title {
.comments-title,
.archive-description {
font-size: 14pt;
margin-top: 25px;
}
.comment-meta,
.comment-meta .comment-author .fn {
font-size: 13pt;
}
/* Page breaks */
a {
page-break-inside: avoid;
}
blockquote {
page-break-inside: avoid;
}
h1,
h2,
h3,
@ -61,19 +91,24 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
page-break-after: avoid;
page-break-inside: avoid;
}
img {
page-break-inside: avoid;
page-break-after: avoid;
}
table,
pre {
pre,
figure {
page-break-inside: avoid;
}
ul,
ol,
dl {
page-break-before: avoid;
}
/* Links */
a:link,
a:visited,
@ -83,80 +118,61 @@ Andreas Hecht in https://www.jotform.com/blog/css-perfect-print-stylesheet-98272
text-decoration: underline;
text-align: left;
}
a[href^="http"]:after {
a[href^=http]:after {
content: " < " attr(href) "> ";
}
a:after > img {
content: "";
}
article a[href^="#"]:after {
content: "";
}
a:not(:local-link):after {
content: " < " attr(href) "> ";
}
.entry-title a:after {
content: "\a< " attr(href) "> ";
white-space: pre;
font-size: 14pt;
}
.cat-links a:after,
.tags-links a:after,
.byline a:after,
.comment-metadata a:after,
.wp-block-calendar a:after,
.wp-block-tag-cloud a:after,
.page-links a:after {
content: "";
}
/* Visibility */
.primary-navigation,
.site-title + .primary-navigation,
.site-branding-container:before,
.entry .entry-title:before,
.footer-navigation,
.entry-footer,
.author-description:before,
.post-navigation,
.navigation.pagination,
.widget-area,
.comment-form-flex,
.edit-link,
.more-link,
.comment-reply,
.comment .comment-metadata .edit-link {
display: none;
.reply,
.comment .comment-metadata .edit-link,
.comment-respond,
#dark-mode-toggler {
display: none !important;
}
.entry .entry-content .wp-block-button .wp-block-button__link,
.entry .entry-content .button {
.entry .entry-content .button,
.entry .entry-content .wp-block-file__button {
color: #000;
background: none;
}
/* Site Header (With Featured Image) */
.site-header.featured-image {
min-height: 0;
}
.site-header.featured-image .primary-navigation a,
.site-header.featured-image .primary-navigation a + svg,
.site-header.featured-image .site-title a,
.site-header.featured-image .site-featured-image a,
.site-header.featured-image .site-branding .site-title,
.site-header.featured-image .site-branding .site-description,
.site-header.featured-image .primary-navigation a:after,
.site-header.featured-image .primary-navigation .menu-wrapper > li.menu-item-has-children:after,
.site-header.featured-image .primary-navigation li,
.site-header.featured-image .entry-title,
.site-header.featured-image#masthead .site-title a {
color: #000;
text-shadow: none;
}
.site-header.featured-image .site-featured-image .entry-header,
.site-header.featured-image .site-branding-container {
margin-top: 0;
margin-bottom: 0;
}
.site-header.featured-image .site-featured-image .post-thumbnail img {
position: relative;
height: initial;
width: initial;
object-fit: none;
min-width: 0;
min-height: 0;
max-width: 100%;
margin-top: 1rem;
}
/* Remove image filters from featured image */
.image-filters-enabled *:after {
display: none !important;
}
.image-filters-enabled .site-header.featured-image .site-featured-image:before {
display: none;
}
.image-filters-enabled .site-header.featured-image .site-featured-image .post-thumbnail img {
filter: none;
}
}
/*# sourceMappingURL=print.css.map */

115
wp-content/themes/twentytwentyone/assets/css/style-dark-mode-rtl.css Normal file
View File

@ -0,0 +1,115 @@
/* OS dark theme preference */
@media only screen {
.is-dark-theme.is-dark-theme {
--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);
--global--color-border: #ffffff8c;
}
.is-dark-theme.is-dark-theme .site a:focus,
.is-dark-theme.is-dark-theme .site a:focus .meta-nav {
background: #000;
color: #fff;
text-decoration: none;
}
.is-dark-theme.is-dark-theme img {
filter: brightness(0.85) contrast(1.1);
}
.respect-color-scheme-preference.is-dark-theme body {
background-color: var(--global--color-background);
}
#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;
}
.no-js #dark-mode-toggler {
display: none;
}
.wp-admin #dark-mode-toggler {
display: none;
}
#dark-mode-toggler.fixed-bottom {
position: fixed;
bottom: 5px;
left: 5px;
transition: bottom 0.5s;
}
#dark-mode-toggler.fixed-bottom.hide:not(:focus) {
bottom: -80px;
}
#dark-mode-toggler.relative {
position: absolute;
height: 44px;
top: calc(2.4 * var(--global--spacing-vertical) - 44px);
left: 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);
}
}
@media only screen {
.primary-navigation-open #dark-mode-toggler {
display: none;
}
}
@media only screen {
#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);
}
}
@media only screen {
.is-IE #dark-mode-toggler {
display: none;
}
}

148
wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css
View File

@ -1,95 +1,115 @@
/* 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);
}
@media only screen {
html.is-dark-mode body {
background-color: var(--global--color-background);
}
.is-dark-theme.is-dark-theme {
--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);
--global--color-border: #ffffff8c;
}
html.is-dark-mode .site a:focus {
background: #000;
}
.is-dark-theme.is-dark-theme .site a:focus,
.is-dark-theme.is-dark-theme .site a:focus .meta-nav {
background: #000;
color: #fff;
text-decoration: none;
}
html.is-dark-mode img {
filter: brightness(0.85) contrast(1.1);
}
.is-dark-theme.is-dark-theme 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;
}
.respect-color-scheme-preference.is-dark-theme body {
background-color: var(--global--color-background);
}
.wp-admin #dark-mode-toggler {
z-index: 99999;
/* Necessary for the editor. */
}
#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;
}
#dark-mode-toggler.fixed-bottom {
position: fixed;
bottom: 5px;
right: 5px;
}
.no-js #dark-mode-toggler {
display: none;
}
#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);
}
.wp-admin #dark-mode-toggler {
display: none;
}
.admin-bar #dark-mode-toggler.relative {
top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
}
#dark-mode-toggler.fixed-bottom {
position: fixed;
bottom: 5px;
right: 5px;
transition: bottom 0.5s;
}
#dark-mode-toggler.fixed-bottom.hide:not(:focus) {
bottom: -80px;
}
#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);
}
}
@media only screen {
.primary-navigation-open #dark-mode-toggler {
display: none;
.primary-navigation-open #dark-mode-toggler {
display: none;
}
}
@media only screen {
#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);
#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);
}
}
@media only screen {
.is-IE #dark-mode-toggler {
display: none;
.is-IE #dark-mode-toggler {
display: none;
}
}
/*# sourceMappingURL=style-dark-mode.css.map */

2
wp-content/themes/twentytwentyone/assets/css/style-editor-customizer.css
View File

@ -1,3 +1,3 @@
/**
* These styles are generated by the Customizer and only loaded when a custom color scheme is active.
*/
*/

543
wp-content/themes/twentytwentyone/assets/css/style-editor.css
View File

File diff suppressed because it is too large Load Diff

2
wp-content/themes/twentytwentyone/assets/js/customize-helpers.js
View File

@ -5,7 +5,7 @@
*
* @return {number} - Returns the luminance, number between 0 and 255.
*/
function twentytwentyoneGetHexLum( hex ) { // jshint ignore:line
function twentytwentyoneGetHexLum( hex ) { // eslint-disable-line no-unused-vars
var rgb = twentytwentyoneGetRgbFromHex( hex );
return Math.round( ( 0.2126 * rgb.r ) + ( 0.7152 * rgb.g ) + ( 0.0722 * rgb.b ) );
}

19
wp-content/themes/twentytwentyone/assets/js/customize-preview.js
View File

@ -11,20 +11,21 @@
stylesheet,
styles;
// Modify the body class depending on whether this is a dark background or not.
// Modify the html & body classes 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' );
}
document.body.classList.add( 'is-dark-theme' );
document.documentElement.classList.add( 'is-dark-theme' );
document.documentElement.classList.remove( 'respect-color-scheme-preference' );
} else {
document.body.classList.remove( 'has-background-dark' );
document.body.classList.remove( 'is-dark-theme' );
document.documentElement.classList.remove( 'is-dark-theme' );
if ( wp.customize( 'respect_user_color_preference' ).get() ) {
document.documentElement.classList.add( 'respect-color-scheme-preference' );
}
}
// Toggle the white background class.
if ( '#ffffff' === to ) {
if ( '#ffffff' === to.toLowerCase() ) {
document.body.classList.add( 'has-background-white' );
} else {
document.body.classList.remove( 'has-background-white' );

41
wp-content/themes/twentytwentyone/assets/js/customize.js
View File

@ -1,59 +1,20 @@
/* global twentytwentyoneGetHexLum, backgroundColorNotice */
/* global twentytwentyoneGetHexLum */
( 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 );
}
} );
} );

41
wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js
View File

@ -1,22 +1,22 @@
function toggleDarkMode() { // jshint ignore:line
var toggler = document.getElementById( 'dark-mode-toggler' ),
html = document.querySelector( 'html' );
function toggleDarkMode() { // eslint-disable-line no-unused-vars
var toggler = document.getElementById( 'dark-mode-toggler' );
if ( 'false' === toggler.getAttribute( 'aria-pressed' ) ) {
toggler.setAttribute( 'aria-pressed', 'true' );
html.classList.add( 'is-dark-mode' );
document.documentElement.classList.add( 'is-dark-theme' );
document.body.classList.add( 'is-dark-theme' );
window.localStorage.setItem( 'twentytwentyoneDarkMode', 'yes' );
} else {
toggler.setAttribute( 'aria-pressed', 'false' );
html.classList.remove( 'is-dark-mode' );
document.documentElement.classList.remove( 'is-dark-theme' );
document.body.classList.remove( 'is-dark-theme' );
window.localStorage.setItem( 'twentytwentyoneDarkMode', 'no' );
}
}
function darkModeInitialLoad() {
var toggler = document.getElementById( 'dark-mode-toggler' ),
isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches,
html;
isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches;
if ( 'yes' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
isDarkMode = true;
@ -31,12 +31,33 @@ function darkModeInitialLoad() {
toggler.setAttribute( 'aria-pressed', 'true' );
}
html = document.querySelector( 'html' );
if ( isDarkMode ) {
html.classList.add( 'is-dark-mode' );
document.documentElement.classList.add( 'is-dark-theme' );
document.body.classList.add( 'is-dark-theme' );
} else {
html.classList.remove( 'is-dark-mode' );
document.documentElement.classList.remove( 'is-dark-theme' );
document.body.classList.remove( 'is-dark-theme' );
}
}
function darkModeRepositionTogglerOnScroll() {
var prevScroll = window.scrollY || document.documentElement.scrollTop,
currentScroll,
checkScroll = function() {
currentScroll = window.scrollY || document.documentElement.scrollTop;
if (
currentScroll + ( window.innerHeight * 1.5 ) > document.body.clientHeight ||
currentScroll < prevScroll
) {
document.getElementById( 'dark-mode-toggler' ).classList.remove( 'hide' );
} else if ( currentScroll > prevScroll && 250 < currentScroll ) {
document.getElementById( 'dark-mode-toggler' ).classList.add( 'hide' );
}
prevScroll = currentScroll;
};
window.addEventListener( 'scroll', checkScroll );
}
darkModeInitialLoad();
darkModeRepositionTogglerOnScroll();

76
wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js
View File

@ -1,4 +1,4 @@
/* global ajaxurl, XMLHttpRequest, ResizeObserver, darkModeInitialLoad, setTimeout */
/* global ajaxurl, XMLHttpRequest, 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' ) ) {
@ -51,12 +51,6 @@ function twentytwentyoneDarkModeEditorToggle() {
// 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();
@ -81,71 +75,7 @@ function twentytwentyoneDarkModeEditorToggleEditorStyles() {
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)';
document.documentElement.classList.add( 'is-dark-theme' );
document.querySelector( '.block-editor__typewriter' ).classList.add( 'is-dark-theme' );
}
}
/**
* 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' ) );
}

38
wp-content/themes/twentytwentyone/assets/js/editor.js Normal file
View File

@ -0,0 +1,38 @@
/* global setTimeout */
wp.domReady( function() {
// Unregister "Wide" Separator Style.
wp.blocks.unregisterBlockStyle( 'core/separator', 'wide' );
// Add to ".block-editor__typewriter" the "is-dark-theme" class if needed.
function twentytwentyoneCopyDarkThemeClass() {
var editor,
attemptDelay = 25,
attempt = 0,
maxAttempts = 10;
if ( ! document.body.classList.contains( 'is-dark-theme' ) ) {
return;
}
editor = document.querySelector( '.block-editor__typewriter' );
if ( null === editor ) {
// Try again.
if ( attempt < maxAttempts ) {
setTimeout( function() {
twentytwentyoneCopyDarkThemeClass();
}, attemptDelay );
// Increment the attempts counter.
attempt++;
// Double the delay, give the server some time to breathe.
attemptDelay *= 2;
}
return;
}
editor.classList.add( 'is-dark-theme' );
}
twentytwentyoneCopyDarkThemeClass();
} );

4
wp-content/themes/twentytwentyone/assets/js/primary-navigation.js
View File

@ -58,7 +58,7 @@ function twentytwentyoneSubmenuPosition( li ) {
*
* @param {Element} el - The element.
*/
function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
function twentytwentyoneExpandSubMenu( el ) { // eslint-disable-line no-unused-vars
// Close other expanded items.
el.closest( 'nav' ).querySelectorAll( '.sub-menu-toggle' ).forEach( function( button ) {
if ( button !== el ) {
@ -114,7 +114,7 @@ function twentytwentyoneExpandSubMenu( el ) { // jshint ignore:line
tabKey = event.keyCode === 9;
shiftKey = event.shiftKey;
escKey = event.keyCode === 27;
activeEl = document.activeElement; // jshint ignore:line
activeEl = document.activeElement; // eslint-disable-line @wordpress/no-global-active-element
lastEl = elements[ elements.length - 1 ];
firstEl = elements[0];

6
wp-content/themes/twentytwentyone/assets/js/unregister-block-style.js
View File

@ -1,6 +0,0 @@
/**
* Unregister "Wide" Separator Style
*/
wp.domReady( function() {
wp.blocks.unregisterBlockStyle( 'core/separator', 'wide' );
} );

18
wp-content/themes/twentytwentyone/assets/sass/01-settings/file-header.scss Normal file
View File

@ -0,0 +1,18 @@
/*
Theme Name: Twenty Twenty-One
Theme URI: https://wordpress.org/themes/twentytwentyone/
Author: the WordPress team
Author URI: https://wordpress.org/
Description: Twenty Twenty-One is a blank canvas for your ideas and it makes the block editor your best brush. With new block patterns, which allow you to create a beautiful layout in a matter of seconds, this theme’s soft colors and eye-catching — yet timeless — design will let your work shine. Take it for a spin! See how Twenty Twenty-One elevates your portfolio, business website, or personal blog.
Requires at least: 5.3
Tested up to: 5.6
Requires PHP: 5.6
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyone
Tags: one-column, accessibility-ready, custom-colors, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready
Twenty Twenty-One WordPress Theme, (C) 2020 WordPress.org
Twenty Twenty-One is distributed under the terms of the GNU GPL.
*/

1
wp-content/themes/twentytwentyone/assets/sass/01-settings/fonts.scss Normal file
View File

@ -0,0 +1 @@
// Do we need to serve a font? Add the @font-face styles here.

249
wp-content/themes/twentytwentyone/assets/sass/01-settings/global.scss Normal file
View File

@ -0,0 +1,249 @@
/* Variables */
// Vertical Rhythm Multiplier
$baseline-unit: 10px;
:root {
/* Font Family */
--global--font-primary: var(--font-headings, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
--global--font-secondary: var(--font-base, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif);
/* Font Size */
--global--font-size-base: 1.25rem; // 20px / 16px
--global--font-size-xs: 1rem; // 16px / 16px
--global--font-size-sm: 1.125rem; // 18px / 16px
--global--font-size-md: 1.25rem; // 20px / 16px
--global--font-size-lg: 1.5rem; // 24px / 16px
--global--font-size-xl: 2.25rem; // 36px / 16px
--global--font-size-xxl: 4rem; // 64px / 16px
--global--font-size-xxxl: 5rem; // 80px / 16px
--global--font-size-page-title: var(--global--font-size-xxl);
--global--letter-spacing: normal;
/* Line Height */
--global--line-height-body: 1.7;
--global--line-height-heading: 1.3;
--global--line-height-page-title: 1.1;
/* Headings */
--heading--font-family: var(--global--font-primary);
--heading--font-size-h6: var(--global--font-size-xs);
--heading--font-size-h5: var(--global--font-size-sm);
--heading--font-size-h4: var(--global--font-size-lg);
--heading--font-size-h3: calc(1.25 * var(--global--font-size-lg));
--heading--font-size-h2: var(--global--font-size-xl);
--heading--font-size-h1: var(--global--font-size-page-title);
--heading--letter-spacing-h6: 0.05em;
--heading--letter-spacing-h5: 0.05em;
--heading--letter-spacing-h4: var(--global--letter-spacing);
--heading--letter-spacing-h3: var(--global--letter-spacing);
--heading--letter-spacing-h2: var(--global--letter-spacing);
--heading--letter-spacing-h1: var(--global--letter-spacing);
--heading--line-height-h6: var(--global--line-height-heading);
--heading--line-height-h5: var(--global--line-height-heading);
--heading--line-height-h4: var(--global--line-height-heading);
--heading--line-height-h3: var(--global--line-height-heading);
--heading--line-height-h2: var(--global--line-height-heading);
--heading--line-height-h1: var(--global--line-height-page-title);
--heading--font-weight: normal;
--heading--font-weight-page-title: 300;
--heading--font-weight-strong: 600;
/* Block: Latest posts */
--latest-posts--title-font-family: var(--heading--font-family);
--latest-posts--title-font-size: var(--heading--font-size-h3);
--latest-posts--description-font-family: var(--global--font-secondary);
--latest-posts--description-font-size: var(--global--font-size-sm);
--list--font-family: var(--global--font-secondary);
--definition-term--font-family: var(--global--font-primary);
/* Colors */
--global--color-black: #000;
--global--color-dark-gray: #28303d;
--global--color-gray: #39414d;
--global--color-light-gray: #f0f0f0;
--global--color-green: #d1e4dd;
--global--color-blue: #d1dfe4;
--global--color-purple: #d1d1e4;
--global--color-red: #e4d1d1;
--global--color-orange: #e4dad1;
--global--color-yellow: #eeeadd;
--global--color-white: #fff;
--global--color-white-50: rgba(255, 255, 255, 0.5); // Used for disabled buttons
--global--color-white-90: rgba(255, 255, 255, 0.9); // Used in form fields.
--global--color-primary: var(--global--color-dark-gray); /* Body text color, site title, footer text color. */
--global--color-secondary: var(--global--color-gray); /* Headings */
--global--color-primary-hover: var(--global--color-primary);
--global--color-background: var(--global--color-green); /* Mint, default body background */
--global--color-border: var(--global--color-primary); /* Used for borders (separators) */
/* Spacing */
--global--spacing-unit: #{2 * $baseline-unit}; // 20px
--global--spacing-measure: unset; // Use ch units here. ie: 60ch = 60 character max-width
--global--spacing-horizontal: #{2.5 * $baseline-unit}; // 25px
--global--spacing-vertical: #{3 * $baseline-unit}; // 30px.
/* Elevation */
--global--elevation: 1px 1px 3px 0 rgba(0, 0, 0, 0.2);
/* Forms */
--form--font-family: var(--global--font-secondary);
--form--font-size: var(--global--font-size-sm);
--form--line-height: var(--global--line-height-body);
--form--color-text: var(--global--color-dark-gray); // Text color in input fields is always dark over light background.
--form--color-ranged: var(--global--color-secondary);
--form--label-weight: 500;
--form--border-color: var(--global--color-secondary);
--form--border-width: 3px;
--form--border-radius: 0;
--form--spacing-unit: calc(0.5 * var(--global--spacing-unit));
/* Cover block */
--cover--height: calc(15 * var(--global--spacing-vertical));
--cover--color-foreground: var(--global--color-white);
--cover--color-background: var(--global--color-black);
/* Buttons */
// Colors
--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);
// Fonts
--button--font-family: var(--global--font-primary);
--button--font-size: var(--global--font-size-base);
--button--font-weight: 500;
--button--line-height: 1.5;
// Borders
--button--border-width: 3px;
--button--border-radius: 0;
// Spacing
--button--padding-vertical: 15px;
--button--padding-horizontal: calc(2 * var(--button--padding-vertical));
/* entry */
--entry-header--color: var(--global--color-primary);
--entry-header--color-link: currentColor;
--entry-header--color-hover: var(--global--color-primary-hover);
--entry-header--color-focus: var(--global--color-secondary);
--entry-header--font-size: var(--heading--font-size-h2);
--entry-content--font-family: var(--global--font-secondary);
--entry-author-bio--font-family: var(--heading--font-family);
--entry-author-bio--font-size: var(--heading--font-size-h4);
/* Header */
--branding--color-text: var(--global--color-primary);
--branding--color-link: var(--global--color-primary);
--branding--color-link-hover: var(--global--color-secondary);
--branding--title--font-family: var(--global--font-primary);
--branding--title--font-size: var(--global--font-size-lg);
--branding--title--font-size-mobile: var(--heading--font-size-h4);
--branding--title--font-weight: normal;
--branding--title--text-transform: uppercase;
--branding--description--font-family: var(--global--font-secondary);
--branding--description--font-size: var(--global--font-size-sm);
--branding--description--font-family: var(--global--font-secondary);
--branding--logo--max-width: 300px;
--branding--logo--max-height: 100px;
--branding--logo--max-width-mobile: 96px;
--branding--logo--max-height-mobile: 96px;
/* Main navigation */
--primary-nav--font-family: var(--global--font-secondary);
--primary-nav--font-family-mobile: var(--global--font-primary);
--primary-nav--font-size: var(--global--font-size-md);
--primary-nav--font-size-sub-menu: var(--global--font-size-xs);
--primary-nav--font-size-mobile: var(--global--font-size-sm);
--primary-nav--font-size-sub-menu-mobile: var(--global--font-size-sm);
--primary-nav--font-size-button: var(--global--font-size-xs);
--primary-nav--font-style: normal;
--primary-nav--font-style-sub-menu-mobile: normal;
--primary-nav--font-weight: normal;
--primary-nav--font-weight-button: 500;
--primary-nav--color-link: var(--global--color-primary);
--primary-nav--color-link-hover: var(--global--color-primary-hover);
--primary-nav--color-text: var(--global--color-primary);
--primary-nav--padding: calc(0.66 * var(--global--spacing-unit));
--primary-nav--border-color: var(--global--color-primary);
/* Pagination */
--pagination--color-text: var(--global--color-primary);
--pagination--color-link-hover: var(--global--color-primary-hover);
--pagination--font-family: var(--global--font-secondary);
--pagination--font-size: var(--global--font-size-lg);
--pagination--font-weight: normal;
--pagination--font-weight-strong: 600;
/* Footer */
--footer--color-text: var(--global--color-primary);
--footer--color-link: var(--global--color-primary);
--footer--color-link-hover: var(--global--color-primary-hover);
--footer--font-family: var(--global--font-primary);
--footer--font-size: var(--global--font-size-sm);
/* Block: Pull quote */
--pullquote--font-family: var(--global--font-primary);
--pullquote--font-size: var(--heading--font-size-h3);
--pullquote--font-style: normal;
--pullquote--letter-spacing: var(--heading--letter-spacing-h4);
--pullquote--line-height: var(--global--line-height-heading);
--pullquote--border-width: 3px;
--pullquote--border-color: var(--global--color-primary);
--pullquote--color-foreground: var(--global--color-primary);
--pullquote--color-background: var(--global--color-background);
--quote--font-family: var(--global--font-secondary);
--quote--font-size: var(--global--font-size-md);
--quote--font-size-large: var(--global--font-size-xl);
--quote--font-style: normal;
--quote--font-weight: 700;
--quote--font-weight-strong: bolder;
--quote--font-style-large: normal;
--quote--font-style-cite: normal;
--quote--line-height: var(--global--line-height-body);
--quote--line-height-large: 1.35;
--separator--border-color: var(--global--color-border);
--separator--height: 1px;
/* Block: Table */
--table--stripes-border-color: var(--global--color-light-gray);
--table--stripes-background-color: var(--global--color-light-gray);
--table--has-background-text-color: var(--global--color-dark-gray);
/* Widgets */
--widget--line-height-list: 1.9;
--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) {
--global--admin-bar--height: 46px;
}
}
@media only screen and (min-width: 652px) { // Not using the mixin because it's compiled after this file
:root {
--global--font-size-xl: 2.5rem; // 40px / 16px
--global--font-size-xxl: 6rem; // 96px / 16px
--global--font-size-xxxl: 9rem; // 144px / 16px
--heading--font-size-h3: 2rem; // 32px / 16px
--heading--font-size-h2: 3rem; // 48px / 16px
}
}

42
wp-content/themes/twentytwentyone/assets/sass/02-tools/extends.scss Normal file
View File

@ -0,0 +1,42 @@
/* Button extends */
// Button Placeholder style
// - Since buttons appear in various blocks,
// let’s use a placeholder to keep them all
// in-sync
%button-style {
@include crop-text(var(--button--line-height));
color: var(--button--color-text);
cursor: pointer;
font-weight: var(--button--font-weight);
font-family: var(--button--font-family);
font-size: var(--button--font-size);
background-color: var(--button--color-background);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
&:active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
}
&:hover {
color: var(--button--color-text-hover);
background: transparent;
}
&:focus,
&.has-focus {
outline-offset: -6px;
outline: 2px dotted currentColor;
}
&:disabled {
background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50);
color: var(--button--color-text-active);
}
}

178
wp-content/themes/twentytwentyone/assets/sass/02-tools/functions.scss Normal file
View File

@ -0,0 +1,178 @@
// Remove the unit of a length
// @param {Number} $number - Number to remove unit from
// @return {Number} - Unitless number
@function strip-unit($number) {
@if type-of($number) == "number" and not unitless($number) {
@return $number / ($number * 0 + 1);
}
@return $number;
}
// ----
// Sass (v3.3.14)
// Compass (v1.0.0.rc.1)
// ----
@function pow($x, $y) {
$ret: 1;
@if $y > 0 {
@for $i from 1 through $y {
$ret: $ret * $x;
}
} @else {
@for $i from $y to 0 {
$ret: $ret / $x;
}
}
@return $ret;
}
// Map deep get
// @author Hugo Giraudel
// @access public
// @param {Map} $map - Map
// @param {Arglist} $keys - Key chain
// @return {*} - Desired value
//
// Example:
// $m-breakpoint: map-deep-get($__prefix-default-config, "layouts", "M");
@function map-deep-get($map, $keys...) {
@each $key in $keys {
$map: map-get($map, $key);
}
@return $map;
}
// ep set function to set a value in nested maps
// uthor Hugo Giraudel
// ccess public
// aram {Map} $map - Map
// aram {List} $keys - Key chaine
// aram {*} $value - Value to assign
// eturn {Map}
//
// ample:
// _prefix-default-config: map-deep-set($__prefix-default-config, "layouts" "M", 650px);
@function map-deep-set($map, $keys, $value) {
$maps: ($map);
$result: null;
// If the last key is a map already
// Warn the user we will be overriding it with $value
@if type-of(nth($keys, -1)) == "map" {
@warn "The last key you specified is a map; it will be overrided with `#{$value}`.";
}
// If $keys is a single key
// Just merge and return
@if length($keys) == 1 {
@return map-merge($map, ($keys: $value));
}
// Loop from the first to the second to last key from $keys
// Store the associated map to this key in the $maps list
// If the key doesn't exist, throw an error
@for $i from 1 through length($keys) - 1 {
$current-key: nth($keys, $i);
$current-map: nth($maps, -1);
$current-get: map-get($current-map, $current-key);
@if $current-get == null {
@error "Key `#{$key}` doesn't exist at current level in map.";
}
$maps: append($maps, $current-get);
}
// Loop from the last map to the first one
// Merge it with the previous one
@for $i from length($maps) through 1 {
$current-map: nth($maps, $i);
$current-key: nth($keys, $i);
$current-val: if($i == length($maps), $value, $result);
$result: map-merge($current-map, ($current-key: $current-val));
}
// Return result
@return $result;
}
// jQuery-style extend function
// - Child themes can use this function to `reset` the values in
// config maps without editing the `master` Sass files.
// - src: https://www.sitepoint.com/extra-map-functions-sass/
// - About `map-merge()`:
// - - only takes 2 arguments
// - - is not recursive
// @param {Map} $map - first map
// @param {ArgList} $maps - other maps
// @param {Bool} $deep - recursive mode
// @return {Map}
// Examples:
// $grid-configuration-default: (
// 'columns': 12,
// 'layouts': (
// 'small': 800px,
// 'medium': 1000px,
// 'large': 1200px,
// ),
// );
// $grid-configuration-custom: (
// 'layouts': (
// 'large': 1300px,
// 'huge': 1500px
// ),
// );
// $grid-configuration-user: (
// 'direction': 'ltr',
// 'columns': 16,
// 'layouts': (
// 'large': 1300px,
// 'huge': 1500px
// ),
// );
// $deep: false
// $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user);
// --> ("columns": 16, "layouts": (("large": 1300px, "huge": 1500px)), "direction": "ltr")
// $deep: true
// $grid-configuration: map-extend($grid-configuration-default, $grid-configuration-custom, $grid-configuration-user, true);
// --> ("columns": 16, "layouts": (("small": 800px, "medium": 1000px, "large": 1300px, "huge": 1500px)), "direction": "ltr")
@function map-extend($map, $maps.../*, $deep */) {
$last: nth($maps, -1);
$deep: $last == true;
$max: if($deep, length($maps) - 1, length($maps));
// Loop through all maps in $maps...
@for $i from 1 through $max {
// Store current map
$current: nth($maps, $i);
// If not in deep mode, simply merge current map with map
@if not $deep {
$map: map-merge($map, $current);
} @else {
// If in deep mode, loop through all tuples in current map
@each $key, $value in $current {
// If value is a nested map and same key from map is a nested map as well
@if type-of($value) == "map" and type-of(map-get($map, $key)) == "map" {
// Recursive extend
$value: map-extend(map-get($map, $key), $value, true);
}
// Merge current tuple with map
$map: map-merge($map, ($key: $value));
}
}
}
@return $map;
}

79
wp-content/themes/twentytwentyone/assets/sass/02-tools/mixins.scss Normal file
View File

@ -0,0 +1,79 @@
// Responsive breakpoints mixin
@mixin add_variables( $view: frontend ) {
@if frontend == $view {
:root {
@content;
}
}
@if editor == $view {
:root,
body {
@content;
}
}
}
// Crop Text Boundry
// - Sets a fixed-width on content within alignwide and alignfull blocks
@mixin crop-text($inset-line-height: 1) {
line-height: $inset-line-height;
$offset-top: calc(.5em * #{$inset-line-height} + -.38);
$offset-bottom: calc(.5em * #{$inset-line-height} + -.39);
&:before,
&:after {
content: "";
display: block;
height: 0;
width: 0;
}
&:before {
margin-bottom: -($offset-top);
}
&:after {
margin-top: -($offset-bottom);
}
}
// Button style
// - Applies button styles to blocks and elements that share them.
@mixin button-style() {
@include crop-text(var(--button--line-height));
color: var(--button--color-text);
cursor: pointer;
font-weight: var(--button--font-weight);
font-family: var(--button--font-family);
font-size: var(--button--font-size);
background-color: var(--button--color-background);
border-radius: var(--button--border-radius);
border: var(--button--border-width) solid var(--button--color-background);
text-decoration: none;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
&:focus {
background: transparent;
outline-offset: -6px;
outline: 2px dotted currentColor;
.is-dark-theme & {
color: var(--button--color-background);
}
&:not(.has-background) {
color: var(--button--color-text-hover);
}
}
&:disabled {
background-color: var(--global--color-white-50);
border-color: var(--global--color-white-50);
color: var(--button--color-text-active);
}
}

217
wp-content/themes/twentytwentyone/assets/sass/03-generic/breakpoints.scss Normal file
View File

@ -0,0 +1,217 @@
/**
* Repsonsive Styles
*/
/**
* Required Variables
*/
$default_width: 610px;
$max_content_width: 1240px;
$breakpoint_sm: 482px;
$breakpoint_md: 592px;
$breakpoint_lg: 652px;
$breakpoint_xl: 822px;
$breakpoint_xxl: 1024px;
// Responsive breakpoints mixin
@mixin media( $res ) {
@if mobile-only == $res {
@media only screen and (max-width: #{$breakpoint_sm - 1}) {
@content;
}
}
@if mobile == $res {
@media only screen and (min-width: #{$breakpoint_sm}) {
@content;
}
}
@if tablet-only == $res {
@media only screen and (max-width: #{$breakpoint_md - 1}) {
@content;
}
}
@if tablet == $res {
@media only screen and (min-width: #{$breakpoint_md}) {
@content;
}
}
@if laptop-only == $res {
@media only screen and (max-width: #{$breakpoint_lg - 1}) {
@content;
}
}
@if laptop == $res {
@media only screen and (min-width: #{$breakpoint_lg}) {
@content;
}
}
@if desktop-only == $res {
@media only screen and (max-width: #{$breakpoint_xl - 1}) {
@content;
}
}
@if desktop == $res {
@media only screen and (min-width: #{$breakpoint_xl}) {
@content;
}
}
@if wide-only == $res {
@media only screen and (max-width: #{$breakpoint_xxl - 1}) {
@content;
}
}
@if wide == $res {
@media only screen and (min-width: #{$breakpoint_xxl}) {
@content;
}
}
}
/**
* Root Media Query Variables
*/
:root {
--responsive--spacing-horizontal: calc(2 * var(--global--spacing-horizontal) * 0.6);
--responsive--aligndefault-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignwide-width: calc(100vw - var(--responsive--spacing-horizontal));
--responsive--alignfull-width: 100%;
--responsive--alignright-margin: var(--global--spacing-horizontal);
--responsive--alignleft-margin: var(--global--spacing-horizontal);
}
@include media(mobile) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 4 * var(--global--spacing-horizontal)), #{$default_width});
--responsive--alignwide-width: calc(100vw - 4 * var(--global--spacing-horizontal));
--responsive--alignright-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
--responsive--alignleft-margin: calc(0.5 * (100vw - var(--responsive--aligndefault-width)));
}
}
@include media(desktop) {
:root {
--responsive--aligndefault-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), #{$default_width});
--responsive--alignwide-width: min(calc(100vw - 8 * var(--global--spacing-horizontal)), #{$max_content_width});
}
}
/**
* Extends
*/
%responsive-aligndefault-width {
max-width: var(--responsive--aligndefault-width);
margin-left: auto;
margin-right: auto;
}
%responsive-alignwide-width {
max-width: var(--responsive--alignwide-width);
margin-left: auto;
margin-right: auto;
}
%responsive-alignfull-width-mobile {
max-width: var(--responsive--alignfull-width);
width: var(--responsive--alignfull-width);
margin-left: auto;
margin-right: auto;
}
@include media(mobile) {
%responsive-alignfull-width {
max-width: var(--responsive--alignfull-width);
width: auto;
margin-left: auto;
margin-right: auto;
}
}
%responsive-alignwide-width-nested {
margin-left: auto;
margin-right: auto;
width: var(--responsive--alignwide-width);
max-width: var(--responsive--alignfull-width);
}
%responsive-alignfull-width-nested {
margin-left: auto;
margin-right: auto;
width: calc(var(--responsive--alignfull-width) - calc(2 * var(--responsive--spacing-horizontal)));
max-width: var(--responsive--alignfull-width);
}
@include media(desktop) {
%responsive-alignfull-width-nested {
margin-left: auto;
margin-right: auto;
width: calc(var(--responsive--alignfull-width) - calc(4 * var(--responsive--spacing-horizontal)));
max-width: var(--responsive--alignfull-width);
}
}
%responsive-alignleft-mobile {
/*rtl:ignore*/
margin-left: 0;
/*rtl:ignore*/
margin-right: var(--responsive--spacing-horizontal);
}
@include media(mobile) {
%responsive-alignleft {
/*rtl:ignore*/
margin-left: var(--responsive--alignleft-margin);
/*rtl:ignore*/
margin-right: var(--global--spacing-horizontal);
}
}
%responsive-alignright-mobile {
/*rtl:ignore*/
margin-left: var(--responsive--spacing-horizontal);
/*rtl:ignore*/
margin-right: 0;
}
@include media(mobile) {
%responsive-alignright {
/*rtl:ignore*/
margin-left: var(--global--spacing-horizontal);
/*rtl:ignore*/
margin-right: var(--responsive--alignright-margin);
}
}
// Output
.default-max-width {
@extend %responsive-aligndefault-width;
}
.wide-max-width {
@extend %responsive-alignwide-width;
}
.full-max-width {
@extend %responsive-alignfull-width;
}

25
wp-content/themes/twentytwentyone/assets/sass/03-generic/clearings.scss Normal file
View File

@ -0,0 +1,25 @@
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
content: "";
display: table;
table-layout: fixed;
}
.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
clear: both;
}

350
wp-content/themes/twentytwentyone/assets/sass/03-generic/normalize.scss vendored Normal file
View File

@ -0,0 +1,350 @@
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
text-decoration-thickness: 1px;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration-style: dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}

75
wp-content/themes/twentytwentyone/assets/sass/03-generic/reset.scss Normal file
View File

@ -0,0 +1,75 @@
/**
* Reset specific elements to make them easier to style in other contexts.
*/
html,
body,
p,
ol,
ul,
li,
dl,
dt,
dd,
blockquote,
figure,
fieldset,
form,
legend,
textarea,
pre,
iframe,
hr,
h1,
h2,
h3,
h4,
h5,
h6 {
padding: 0;
margin: 0;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
/**
* Apply generic border-box to all elements.
* See:
* https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/
*/
html {
/* Apply border-box across the entire page. */
box-sizing: border-box;
// HTML resets
font-family: var(--global--font-secondary);
line-height: var(--global--line-height-body);
}
/**
* Relax the definition a bit, to allow components to override it manually.
*/
* {
&,
&::before,
&::after {
box-sizing: inherit;
}
}
// body resets
body {
font-size: var(--global--font-size-base);
font-weight: normal;
color: var(--global--color-primary);
text-align: left;
background-color: var(--global--color-background);
}
button {
cursor: pointer;
}

172
wp-content/themes/twentytwentyone/assets/sass/03-generic/vertical-margins.scss Normal file
View File

@ -0,0 +1,172 @@
/**
* Site Structure
*
* - Set vertical margins and responsive widths on
* top-level wrappers and content wrappers
* - `--global--width-content` is a responsive veriable
* - See: globals/_global-width-responsive.scss
*/
/**
* Top Level Wrappers (header, main, footer)
* - Set vertical padding and horizontal margins
*/
.site-header,
.site-main,
.widget-area,
.site-footer {
padding-top: var(--global--spacing-vertical);
padding-bottom: var(--global--spacing-vertical);
margin-left: auto;
margin-right: auto;
}
.site-header {
padding-top: calc(0.75 * var(--global--spacing-vertical));
padding-bottom: calc(2 * var(--global--spacing-vertical));
@include media(mobile) {
padding-bottom: calc(3 * var(--global--spacing-vertical));
}
}
/**
* Site-main children wrappers
* - Add double vertical margins here for clearer heirarchy
*/
.site-main > * {
margin-top: calc(3 * var(--global--spacing-vertical));
margin-bottom: calc(3 * var(--global--spacing-vertical));
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
/**
* Set the default maximum responsive content-width
*/
.default-max-width {
@extend %responsive-aligndefault-width;
}
/**
* Set the wide maximum responsive content-width
*/
.wide-max-width {
@extend %responsive-alignwide-width;
}
/**
* Set the full maximum responsive content-width
*/
.full-max-width {
@extend %responsive-alignfull-width-mobile;
@extend %responsive-alignfull-width;
}
/*
* Block & non-gutenberg content wrappers
* - Set margins
*/
.entry-header,
.post-thumbnail,
.entry-content,
.entry-footer,
.author-bio {
margin-top: var(--global--spacing-vertical);
margin-right: auto;
margin-bottom: var(--global--spacing-vertical);
margin-left: auto;
}
/*
* Block & non-gutenberg content wrapper children
* - Sets spacing-vertical margin logic
*/
.site-main > article > *, // apply vertical margins to article level
.site-main > .not-found > *, // apply vertical margins to article level
.entry-content > *,
[class*="inner-container"] > *,
.wp-block-template-part > * {
margin-top: calc(0.666 * var(--global--spacing-vertical));
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
@include media(mobile) {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.site-footer > *,
.widget-area > * {
margin-top: calc(0.666 * var(--global--spacing-vertical));
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
@include media(mobile) {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
}
/*
* Block & non-gutenberg content wrapper children
* - Sets spacing-unit margins
*/
//.site-header > *, // Removed, to align site title and menu.
.entry-header > *,
.post-thumbnail > *,
.page-content > *,
.comment-content > *,
.widget > * {
margin-top: var(--global--spacing-unit);
margin-bottom: var(--global--spacing-unit);
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
/*
* .entry-content children specific controls
* - Adds special margin overrides for alignment utility classes
*/
.entry-content > * {
&.alignleft,
&.alignright,
&.alignleft:first-child + *,
&.alignright:first-child + *,
&.alignfull.has-background {
margin-top: 0;
}
&:last-child,
&.alignfull.has-background {
margin-bottom: 0;
}
/* Reset alignleft and alignright margins after alignfull */
&.alignfull + .alignleft,
&.alignfull + .alignright {
margin-top: var(--global--spacing-vertical);
}
}

79
wp-content/themes/twentytwentyone/assets/sass/04-elements/blockquote.scss Normal file
View File

@ -0,0 +1,79 @@
blockquote {
padding: 0;
position: relative;
margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
> * {
margin-top: var(--global--spacing-unit);
margin-bottom: var(--global--spacing-unit);
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
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);
line-height: var(--quote--line-height);
}
cite,
footer {
font-weight: normal;
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
letter-spacing: var(--global--letter-spacing);
}
&.alignleft,
&.alignright {
padding-left: inherit;
p {
font-size: var(--heading--font-size-h5);
max-width: inherit;
width: inherit;
}
cite,
footer {
font-size: var(--global--font-size-xs);
letter-spacing: var(--global--letter-spacing);
}
}
strong {
font-weight: var(--quote--font-weight-strong);
}
&:before {
content: "\201C";
font-size: var(--quote--font-size);
line-height: var(--quote--line-height);
}
.wp-block-quote__citation,
cite,
footer {
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
font-style: var(--quote--font-style-cite);
}
@include media(mobile-only) {
padding-left: calc(0.5 * var(--global--spacing-horizontal));
&:before {
left: 0;
}
}
}

12
wp-content/themes/twentytwentyone/assets/sass/04-elements/forms-editor.scss Normal file
View File

@ -0,0 +1,12 @@
select {
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
color: var(--form--color-text);
font-size: var(--form--font-size);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; // stylelint-disable-line function-url-quotes
background-position: right var(--form--spacing-unit) top 60%;
}

328
wp-content/themes/twentytwentyone/assets/sass/04-elements/forms.scss Normal file
View File

@ -0,0 +1,328 @@
input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
.site textarea {
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
color: var(--form--color-text);
line-height: var(--global--line-height-body);
padding: var(--form--spacing-unit);
// Gives a little more space for the outline offset.
margin: 0 2px;
&:focus {
color: var(--form--color-text);
outline-offset: 2px;
outline: 2px dotted var(--form--border-color);
}
&:disabled {
opacity: 0.7;
}
.is-dark-theme & {
background: var(--global--color-white-90);
}
}
// Reset the negative offset from normalize to make the thicker "border" work on focus.
input[type="search"] {
&:focus {
outline-offset: -7px;
.is-dark-theme & {
outline-color: var(--global--color-background);
}
}
}
input[type="color"] {
padding: calc(var(--form--spacing-unit) / 2);
height: calc(4 * var(--form--spacing-unit));
}
input[type="email"],
input[type="url"] {
/*rtl:ignore*/
direction: ltr;
}
select {
border: var(--form--border-width) solid var(--form--border-color);
color: var(--form--color-text);
-moz-appearance: none;
-webkit-appearance: none;
appearance: none;
line-height: var(--global--line-height-body);
padding: var(--form--spacing-unit) calc(3 * var(--form--spacing-unit)) var(--form--spacing-unit) var(--form--spacing-unit);
background: var(--global--color-white) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; // stylelint-disable-line function-url-quotes
background-position: right var(--form--spacing-unit) top 60%;
&:focus {
outline-offset: 2px;
outline: 2px dotted var(--form--border-color);
}
.is-dark-theme & {
background: var(--global--color-white-90) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10' fill='%2328303d'><polygon points='0,0 10,0 5,5'/></svg>") no-repeat; // stylelint-disable-line function-url-quotes
background-position: right var(--form--spacing-unit) top 60%;
}
}
textarea {
width: 100%;
}
label {
font-size: var(--form--font-size);
font-weight: var(--form--label-weight);
margin-bottom: calc(var(--global--spacing-vertical) / 3);
}
/**
https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/
https://codepen.io/aaroniker/pen/ZEYoxEY by Aaron Iker.
License: MIT.
*/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
input[type="checkbox"],
input[type="radio"] {
-webkit-appearance: none;
-moz-appearance: none;
position: relative;
width: 25px;
height: 25px;
border: var(--form--border-width) solid var(--form--border-color);
background: var(--global--color-white);
&:disabled {
opacity: 0.7;
}
.is-dark-theme & {
background: var(--global--color-white-90);
}
}
input[type="checkbox"] {
&:focus {
outline-offset: 2px;
outline: 2px dotted var(--form--border-color);
}
&:after {
content: "";
opacity: 0;
display: block;
left: 5px;
top: 2px;
position: absolute;
width: 7px;
height: 13px;
border: 3px solid var(--form--color-text);
border-top: 0;
border-left: 0;
transform: rotate(30deg);
}
&:checked {
color: var(--form--color-text);
&:after {
opacity: 1;
}
}
}
input[type="radio"] {
border-radius: 50%;
&:focus {
outline-offset: 2px;
outline: 2px dotted var(--form--border-color);
}
&:after {
content: "";
opacity: 0;
display: block;
left: 3px;
top: 3px;
position: absolute;
width: 11px;
height: 11px;
border-radius: 50%;
background: var(--form--color-text);
}
&:checked {
border: 4px solid var(--form--border-color);
&:after {
opacity: 1;
}
// Focus style for checked radio buttons.
&:focus {
outline-offset: 4px;
outline: 2px dotted var(--form--border-color);
}
}
}
}
input[type="checkbox"] + label,
input[type="radio"] + label {
display: inline-block;
padding-left: 10px;
font-size: var(--global--font-size-xs);
vertical-align: top;
}
/**
* https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/
*/
@supports (-webkit-appearance: none) or (-moz-appearance: none) {
input[type="range"] {
-webkit-appearance: none; /* Hides the slider so that custom slider can be made */
width: 100%; /* Specific width is required for Firefox. */
height: 6px;
background: var(--form--color-ranged);
border-radius: 6px;
outline-offset: 10px;
&:disabled {
opacity: 0.7;
}
}
input[type="range"]::-webkit-slider-thumb {
-webkit-appearance: none;
border: 3px solid var(--form--color-ranged);
height: 25px;
width: 25px;
border-radius: 50%;
background: var(--global--color-background);
cursor: pointer;
}
input[type="range"]::-moz-range-thumb {
border: 3px solid var(--form--color-ranged);
height: 25px;
width: 25px;
border-radius: 50%;
background: var(--global--color-background);
cursor: pointer;
}
}
input[type="range"]::-ms-track {
width: 100%;
height: 6px;
border-radius: 6px;
border-width: 19px 0;
border-color: var(--global--color-background);
background: transparent;
color: transparent;
cursor: pointer;
}
input[type="range"]::-ms-fill-upper {
background: var(--form--color-ranged);
border-radius: 6px;
}
input[type="range"]::-ms-fill-lower {
background: var(--form--color-ranged);
border-radius: 6px;
}
input[type="range"]::-ms-thumb {
border: 3px solid var(--form--color-ranged);
height: 25px;
width: 25px;
border-radius: 50%;
background: var(--global--color-background);
cursor: pointer;
}
fieldset {
display: grid;
border-color: var(--global--color-secondary);
padding: var(--global--spacing-horizontal);
legend {
font-size: var(--global--font-size-lg);
}
input {
&[type="submit"] {
max-width: max-content;
}
&:not([type="submit"]) {
margin-bottom: var(--global--spacing-unit);
}
&[type="radio"],
&[type="checkbox"] {
margin-bottom: 0;
}
&[type="radio"] + label,
&[type="checkbox"] + label {
font-size: var(--form--font-size);
padding-left: 0;
margin-bottom: var(--global--spacing-unit);
}
}
}
::-moz-placeholder { // Firefox 19+
opacity: 1;
}
.post-password-message {
font-size: var(--global--font-size-lg);
}
.post-password-form {
display: flex;
flex-wrap: wrap;
&__label {
width: 100%;
margin-bottom: 0;
}
input[type="password"] {
flex-grow: 1;
margin-top: calc(var(--global--spacing-vertical) / 3);
margin-right: calc(0.66 * var(--global--spacing-horizontal));
}
&__submit {
margin-top: calc(var(--global--spacing-vertical) / 3);
@include media(tablet) {
margin-left: calc(0.4 * var(--global--spacing-horizontal));
}
}
}

66
wp-content/themes/twentytwentyone/assets/sass/04-elements/links.scss Normal file
View File

@ -0,0 +1,66 @@
/*
* text-underline-offset doesn't work in Chrome at all 👎
* But looks nice in Safari/Firefox, so let's keep it and
* maybe Chrome will support it soon.
*/
a {
cursor: pointer;
color: var(--wp--style--color--link, var(--global--color-primary));
text-underline-offset: 3px;
text-decoration-skip-ink: all;
}
a:hover {
text-decoration-style: dotted;
text-decoration-skip-ink: none;
}
.site a:focus {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
background: rgba(255, 255, 255, .9);
// Change text color when the body background is dark.
.is-dark-theme &,
.is-dark-theme & .meta-nav {
color: var(--wp--style--color--link, var(--global--color-background));
}
// Change colors when the body background is white.
.has-background-white & {
background: rgba(0, 0, 0, .9);
color: var(--wp--style--color--link, var(--global--color-white));
.meta-nav {
color: var(--wp--style--color--link, var(--global--color-white));
}
}
&.skip-link {
/* Only visible in Windows High Contrast mode */
outline: 2px solid transparent;
outline-offset: -2px;
&:focus {
color: #21759b;
background-color: #f1f1f1;
}
}
img {
outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
}
}
// Enforce the custom link color even if a custom background color has been set.
// The extra specificity here is required to override the background color styles.
.has-background:not(.has-background-background-color) {
// Target both current level and nested block.
.has-link-color a,
&.has-link-color a {
color: var(--wp--style--color--link, var(--global--color-primary));
}
}

46
wp-content/themes/twentytwentyone/assets/sass/04-elements/media.scss Normal file
View File

@ -0,0 +1,46 @@
img {
display: block;
height: auto;
max-width: 100%;
}
/* Classic editor images */
.entry-content img {
max-width: 100%;
}
/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object,
video {
max-width: 100%;
}
/* Media captions */
figcaption,
.wp-caption,
.wp-caption-text {
color: currentColor;
font-size: var(--global--font-size-xs);
line-height: var(--global--line-height-body);
margin-top: calc(0.5 * var(--global--spacing-unit));
margin-bottom: var(--global--spacing-unit);
text-align: center;
.alignleft &,
.alignright & {
margin-bottom: 0;
}
}
/* WP Smiley */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
border: none;
margin-bottom: 0;
margin-top: 0;
padding: 0;
}

17
wp-content/themes/twentytwentyone/assets/sass/04-elements/misc.scss Normal file
View File

@ -0,0 +1,17 @@
/* Over here, place any elements that do not need to have their own file. */
b,
strong {
font-weight: 700;
}
dfn,
cite,
em,
i {
font-style: italic;
}
pre {
white-space: pre;
overflow-x: auto;
}

7
wp-content/themes/twentytwentyone/assets/sass/05-blocks/_config.scss Normal file
View File

@ -0,0 +1,7 @@
// Variable Configuration
// - Import all config files for display in
// the editor, customizer, and front end.
@import "separator/config";
@import "utilities/config";

7
wp-content/themes/twentytwentyone/assets/sass/05-blocks/audio/_style.scss Normal file
View File

@ -0,0 +1,7 @@
.wp-block-audio {
audio:focus {
outline-offset: 5px;
outline: 2px solid var(--global--color-primary);
}
}

35
wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks-editor.scss Normal file
View File

@ -0,0 +1,35 @@
// Block Styles for the Editor
// - These styles replace key Gutenberg Block styles for fonts, colors, and
// spacing with CSS-variables overrides in the Block Editor
// - In the future the Block styles may get compiled to individual .css
// files and conditionally loaded
@import "button/editor";
@import "code/editor";
@import "cover/editor";
@import "columns/editor";
@import "file/editor";
@import "gallery/editor";
@import "group/editor";
@import "heading/editor";
@import "html/editor";
@import "image/editor";
@import "latest-comments/editor";
@import "latest-posts/editor";
@import "legacy/editor"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc.
@import "list/editor";
@import "media-text/editor";
@import "navigation/editor";
@import "paragraph/editor";
@import "preformatted/editor";
@import "pullquote/editor";
@import "quote/editor";
@import "rss/editor";
@import "search/editor";
@import "separator/editor";
@import "social-icons/editor";
@import "table/editor";
@import "tag-clould/editor";
@import "verse/editor";
@import "utilities/font-sizes";
@import "utilities/editor"; // Import LAST to cascade properly

37
wp-content/themes/twentytwentyone/assets/sass/05-blocks/blocks.scss Normal file
View File

@ -0,0 +1,37 @@
// Blocks
// - These styles replace key Gutenberg Block styles with font, color, and
// spacing with CSS-variables overrides
// - In the future the Block styles may get compiled to individual .css
// files and conditionally loaded
@import "audio/style";
@import "button/style";
@import "code/style";
@import "columns/style";
@import "cover/style";
@import "file/style";
@import "gallery/style";
@import "group/style";
@import "heading/style";
@import "image/style";
@import "latest-comments/style";
@import "latest-posts/style";
@import "legacy/style"; // "Blocks" from the legacy WP editor, ie: galleries, .button class, etc.
@import "list/style";
@import "media-text/style";
@import "navigation/style";
@import "paragraph/style";
@import "preformatted/style";
@import "pullquote/style";
@import "quote/style";
@import "rss/style";
@import "search/style";
@import "separator/style";
@import "social-icons/style";
@import "spacer/style";
@import "table/style";
@import "tag-clould/style";
@import "verse/style";
@import "video/style";
@import "utilities/font-sizes";
@import "utilities/style"; // Import LAST to cascade properly

118
wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_editor.scss Normal file
View File

@ -0,0 +1,118 @@
.wp-block-button__link {
// Extend button style
@include button-style();
}
/**
* Block Options
*/
// The parent container does not need outer margins applied.
// The children should all have top and bottom margins.
[data-block].wp-block-buttons {
margin-top: 0;
margin-bottom: 0;
.wp-block-button:first-child {
margin-top: var(--global--spacing-vertical);
}
.wp-block-button:last-child {
margin-bottom: var(--global--spacing-vertical);
}
}
.wp-block-button {
// Target the default and filled button states.
&:not(.is-style-outline) {
.wp-block-button__link {
&:active {
color: var(--button--color-text-active) !important;
background: transparent !important;
border-color: var(--button--color-background);
}
&:hover {
color: var(--button--color-text-hover) !important;
background: transparent !important;
border-color: var(--button--color-background);
}
}
}
// Outline Style.
&.is-style-outline {
.wp-block-button__link {
color: var(--button--color-background);
background: transparent;
border: var(--button--border-width) solid currentColor;
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
&:active,
&:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
border-color: var(--button--color-background);
}
&.has-background {
border-color: var(--button--color-background);
&:active,
&:hover {
background-color: var(--button--color-background) !important;
}
}
&.has-background:not(.has-text-color) {
color: var(--global--color-dark-gray);
}
&.has-background.has-gray-background-color:not(.has-text-color),
&.has-background.has-dark-gray-background-color:not(.has-text-color),
&.has-background.has-black-background-color:not(.has-text-color) {
color: var(--global--color-white);
}
.is-dark-theme & {
&:not(.has-text-color) {
&.has-background.has-white-background-color,
&.has-background.has-green-background-color,
&.has-background.has-blue-background-color,
&.has-background.has-purple-background-color,
&.has-background.has-red-background-color,
&.has-background.has-orange-background-color,
&.has-background.has-yellow-background-color {
color: var(--global--color-dark-gray);
}
}
}
&.has-text-color {
border-color: currentColor;
&:active,
&:hover {
color: var(--button--color-text) !important;
border-color: var(--button--color-background);
}
}
}
}
// Squared Style
&.is-style-squared {
border-radius: 0;
}
}
.is-style-outline .wp-block-button__link[style*="radius"],
.wp-block-button__link[style*="radius"] {
outline-offset: 2px;
}

134
wp-content/themes/twentytwentyone/assets/sass/05-blocks/button/_style.scss Normal file
View File

@ -0,0 +1,134 @@
/**
* Button
*/
.site .button,
input[type="submit"],
input[type="reset"],
.wp-block-search__button,
.wp-block-button .wp-block-button__link {
// Extend button style
@include button-style();
}
.site .button,
input[type="submit"],
input[type="reset"],
.wp-block-search .wp-block-search__button,
.wp-block-file .wp-block-file__button {
&:active {
color: var(--button--color-text-active);
background-color: var(--button--color-background-active);
}
&:hover {
color: var(--button--color-text-hover);
background: transparent;
}
}
/**
* Block Options
*/
.wp-block-button {
// Target the default and filled button states.
&:not(.is-style-outline) {
.wp-block-button__link {
&:active {
color: var(--button--color-text-active) !important;
background: transparent !important;
border-color: var(--button--color-background);
}
&:hover {
color: var(--button--color-text-hover) !important;
background: transparent !important;
border-color: var(--button--color-background);
}
&:focus {
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
}
}
}
// Outline Style.
&.is-style-outline {
.wp-block-button__link {
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
&:not(.has-background) {
background: transparent;
}
&:not(.has-background):not(.has-text-color) {
background: transparent;
color: var(--button--color-background);
border-color: var(--button--color-background);
}
&.has-background:not(.has-text-color) {
color: currentColor;
}
&.has-background.has-gray-background-color:not(.has-text-color),
&.has-background.has-dark-gray-background-color:not(.has-text-color),
&.has-background.has-black-background-color:not(.has-text-color) {
color: var(--global--color-white);
}
.is-dark-theme & {
&:not(.has-text-color) {
&.has-background {
color: var(--global--color-dark-gray);
}
&.has-background.has-gray-background-color,
&.has-background.has-dark-gray-background-color,
&.has-background.has-black-background-color {
color: var(--global--color-white);
}
}
}
&.has-text-color,
&.has-background.has-text-color {
border-color: currentColor;
}
&:active,
&:hover {
color: var(--button--color-text) !important;
background: var(--button--color-background) !important;
border-color: var(--button--color-background);
&.has-text-color {
border-color: var(--button--color-background);
}
}
&:focus {
color: var(--button--color-background) !important;
background: transparent !important;
}
}
}
// Squared Style
.is-style-squared .wp-block-button__link {
border-radius: 0;
}
}
.is-style-outline .wp-block-button__link[style*="radius"]:focus,
.wp-block-button a.wp-block-button__link[style*="radius"]:focus {
outline-offset: 2px;
outline: 2px dotted var(--button--color-background);
}

14
wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_editor.scss Normal file
View File

@ -0,0 +1,14 @@
.wp-block-code code {
font-size: var(--global--font-size-xs);
white-space: pre !important;
overflow-x: auto;
}
.wp-block-code {
border-color: var(--global--color-border);
border-radius: 0;
border-style: solid;
border-width: 0.1rem;
padding: var(--global--spacing-unit);
color: currentColor;
}

14
wp-content/themes/twentytwentyone/assets/sass/05-blocks/code/_style.scss Normal file
View File

@ -0,0 +1,14 @@
.wp-block-code {
border-color: var(--global--color-border);
border-radius: 0;
border-style: solid;
border-width: 0.1rem;
padding: var(--global--spacing-unit);
code {
font-size: var(--global--font-size-xs);
white-space: pre;
overflow-x: auto;
display: block;
}
}

66
wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_editor.scss Normal file
View File

@ -0,0 +1,66 @@
.wp-block-columns {
&:not(.alignwide):not(.alignfull) {
clear: both;
}
.wp-block,
.wp-block-column {
// Allow Gutenberg to set the width of a block that lives inside the columns block.
max-width: inherit;
}
&.is-style-twentytwentyone-columns-overlap {
@include media(laptop) {
.wp-block-column:nth-child(2n) {
margin-left: calc(-2 * var(--global--spacing-horizontal));
margin-top: calc(2.5 * var(--global--spacing-horizontal));
z-index: 2;
// Provide text-based child blocks with a default background color to ensure they're readable.
> p,
> h1,
> h2,
> h3,
> h4,
> h5,
> h6,
> ul,
> ol,
> pre {
&:not(.has-background) {
background-color: var(--global--color-background);
padding: var(--global--spacing-unit);
}
}
// Lists should still have their usual left padding.
> ul:not(.has-background),
> ol:not(.has-background) {
padding-left: calc(2 * var(--global--spacing-horizontal));
}
&.is-vertically-aligned-center {
margin-top: 0;
}
}
}
}
.wp-block[data-align="full"] & {
p:not(.has-background),
h1:not(.has-background),
h2:not(.has-background),
h3:not(.has-background),
h4:not(.has-background),
h5:not(.has-background),
h6:not(.has-background) {
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
}
}
}

105
wp-content/themes/twentytwentyone/assets/sass/05-blocks/columns/_style.scss Normal file
View File

@ -0,0 +1,105 @@
.wp-block-columns {
&:not(.alignwide):not(.alignfull) {
clear: both;
}
.wp-block-column {
> * {
margin-top: calc(0.66 * var(--global--spacing-vertical));
margin-bottom: calc(0.66 * var(--global--spacing-vertical));
@include media(mobile) {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&:last-child {
margin-bottom: 0;
}
}
.wp-block-column:not(:last-child) {
margin-bottom: calc(0.66 * var(--global--spacing-vertical));
@include media(mobile) {
margin-bottom: var(--global--spacing-vertical);
}
@include media(desktop) {
margin-bottom: 0;
}
}
&.is-style-twentytwentyone-columns-overlap {
justify-content: space-around;
@include media(laptop) {
.wp-block-column {
&:nth-child(2n) {
margin-left: calc(-2 * var(--global--spacing-horizontal));
margin-top: calc(2.5 * var(--global--spacing-horizontal));
z-index: 2;
// Provide text-based child blocks with a default background color to ensure they're readable.
> p,
> h1,
> h2,
> h3,
> h4,
> h5,
> h6,
> ul,
> ol,
> pre {
&:not(.has-background) {
background-color: var(--global--color-background);
padding: var(--global--spacing-unit);
}
}
// Lists should still have their usual left padding.
> ul:not(.has-background),
> ol:not(.has-background) {
padding-left: calc(2 * var(--global--spacing-horizontal));
}
&.is-vertically-aligned-center {
margin-top: 0;
}
}
}
}
}
&.alignfull {
.wp-block-column {
p:not(.has-background),
h1:not(.has-background),
h2:not(.has-background),
h3:not(.has-background),
h4:not(.has-background),
h5:not(.has-background),
h6:not(.has-background) {
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
}
}
}
}

70
wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_editor.scss Normal file
View File

@ -0,0 +1,70 @@
.wp-block-cover,
.wp-block-cover-image {
&:not(.alignwide):not(.alignfull) {
clear: both;
}
background-color: var(--cover--color-background);
min-height: var(--cover--height);
margin-top: inherit;
margin-bottom: inherit;
[data-align="full"] & {
margin-top: 0;
margin-bottom: 0;
}
.wp-block-cover__inner-container,
.wp-block-cover-image-text,
.wp-block-cover-text,
.block-editor-block-list__block {
color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
a {
color: currentColor;
}
.has-link-color a {
color: var(--wp--style--color--link, var(--global--color-primary));
}
}
// Default & custom background-color
&:not([class*="background-color"]) {
.wp-block-cover__inner-container,
.wp-block-cover-image-text,
.wp-block-cover-text,
.block-editor-block-list__block {
color: var(--cover--color-foreground);
}
}
// Treating H2 separately to account for legacy /core styles
h2 {
font-size: var(--heading--font-size-h2);
letter-spacing: var(--heading--letter-spacing-h2);
line-height: var(--heading--line-height-h2);
padding: 0;
max-width: inherit; // undo opinionated styles
text-align: inherit;
&.has-text-align-left {
text-align: left;
}
&.has-text-align-center {
text-align: center;
}
&.has-text-align-right {
text-align: right;
}
}
// Block Styles
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
}

111
wp-content/themes/twentytwentyone/assets/sass/05-blocks/cover/_style.scss Normal file
View File

@ -0,0 +1,111 @@
.wp-block-cover,
.wp-block-cover-image {
&:not(.alignwide):not(.alignfull) {
clear: both;
}
&.alignfull {
margin-top: 0;
margin-bottom: 0;
}
background-color: var(--cover--color-background);
min-height: var(--cover--height);
margin-top: inherit;
margin-bottom: inherit;
.wp-block-cover__inner-container,
.wp-block-cover-image-text,
.wp-block-cover-text {
color: currentColor; // uses text color specified with background-color options in /blocks/utilities/_style.scss
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
a {
color: currentColor;
}
.has-link-color a {
color: var(--wp--style--color--link, var(--global--color-primary));
}
}
/* default & custom background-color */
&:not([class*="background-color"]) {
.wp-block-cover__inner-container,
.wp-block-cover-image-text,
.wp-block-cover-text {
color: var(--cover--color-foreground);
}
}
/* Treating H2 separately to account for legacy /core styles */
h2 {
font-size: var(--heading--font-size-h2);
letter-spacing: var(--heading--letter-spacing-h2);
line-height: var(--heading--line-height-h2);
max-width: inherit; // undo opinionated styles
text-align: inherit; // undo opinionated styles
padding: 0;
&.has-text-align-left {
text-align: left;
}
&.has-text-align-center {
text-align: center;
}
&.has-text-align-right {
text-align: right;
}
}
.wp-block-cover__inner-container {
width: calc(100% - calc(2 * var(--global--spacing-vertical)));
> * {
margin-top: calc(0.666 * var(--global--spacing-vertical));
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
@include media(mobile) {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
&.alignleft,
&.alignright {
margin-top: 0;
> * {
margin-top: calc(2 * var(--global--spacing-vertical));
margin-bottom: calc(2 * var(--global--spacing-vertical));
padding-left: var(--global--spacing-horizontal);
padding-right: var(--global--spacing-horizontal);
width: 100%;
}
}
&.has-left-content,
&.has-right-content {
justify-content: center;
}
/* Block Styles */
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
}

24
wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_editor.scss Normal file
View File

@ -0,0 +1,24 @@
.wp-block-file {
.wp-block-file__textlink {
text-decoration: underline;
text-decoration-style: solid;
text-decoration-thickness: 1px;
&:hover {
text-decoration: underline;
text-decoration-style: dotted;
}
}
.wp-block-file__button {
// Extend button style
@include button-style();
display: inline-block;
&:hover {
color: var(--button--color-text-hover);
background: transparent;
}
}
}

24
wp-content/themes/twentytwentyone/assets/sass/05-blocks/file/_style.scss Normal file
View File

@ -0,0 +1,24 @@
.wp-block-file {
// Undo Gutenberg hover defaults
a.wp-block-file__button:active,
a.wp-block-file__button:focus,
a.wp-block-file__button:hover {
color: var(--button--color-text-hover);
opacity: inherit;
}
a.wp-block-file__button:visited {
color: var(--button--color-text);
&:hover {
color: var(--button--color-text-hover);
}
}
.wp-block-file__button {
// Extend button style
@include button-style();
display: inline-block;
}
}

10
wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_editor.scss Normal file
View File

@ -0,0 +1,10 @@
.wp-block-gallery {
figcaption {
margin-bottom: 0;
a {
color: var(--global--color-white);
}
}
}

33
wp-content/themes/twentytwentyone/assets/sass/05-blocks/gallery/_style.scss Normal file
View File

@ -0,0 +1,33 @@
.wp-block-gallery {
margin: 0 auto;
.blocks-gallery-image,
.blocks-gallery-item {
// On mobile and responsive viewports, we allow only 1 or 2 columns at the most.
width: calc((100% - var(--global--spacing-unit)) / 2);
figcaption {
margin: 0;
// Text color is always white to account for default gradient background
color: var(--global--color-white);
font-size: var(--global--font-size-xs);
a {
color: var(--global--color-white);
&:focus {
background-color: transparent;
outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
text-decoration: none;
}
}
}
a:focus img {
outline-offset: 2px;
}
}
}

47
wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_editor.scss Normal file
View File

@ -0,0 +1,47 @@
.wp-block-group {
// Start IE clearfix.
// This hack is only necessary because we want to support IE11.
// If we don't want to support IE11, then "display: flow-root" would suffice.
display: block;
clear: both;
display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties
&:before,
&:after {
content: "";
display: block;
clear: both;
}
// End IE clearfix.
&.has-background {
padding: var(--global--spacing-vertical);
[data-align="full"] & {
margin-top: 0;
margin-bottom: 0;
}
}
// Block Styles
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
padding: var(--global--spacing-vertical);
.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__inner-container > *:last-child {
margin-bottom: 0;
}
}
.wp-block-group .wp-block-group.has-background > .block-editor-block-list__layout > [data-align="full"] {
margin: 0;
width: 100%;
}

70
wp-content/themes/twentytwentyone/assets/sass/05-blocks/group/_style.scss Normal file
View File

@ -0,0 +1,70 @@
.wp-block-group {
// Start IE clearfix.
// This hack is only necessary because we want to support IE11.
// If we don't want to support IE11, then "display: flow-root" would suffice.
display: block;
clear: both;
display: flow-root; // stylelint-disable-line declaration-block-no-duplicate-properties
&:before,
&:after {
content: "";
display: block;
clear: both;
}
// End IE clearfix.
.wp-block-group__inner-container {
margin-left: auto;
margin-right: auto;
> * {
margin-top: calc(0.666 * var(--global--spacing-vertical));
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
&.alignfull {
@extend %responsive-alignfull-width-mobile;
}
@include media(mobile) {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
&.has-background {
padding: calc(0.666 * var(--global--spacing-vertical));
@include media(mobile) {
padding: var(--global--spacing-vertical);
}
}
// Block Styles
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
padding: var(--global--spacing-vertical);
}
// Adjust alignfull items to account for left and right padding.
&.has-background,
&.is-style-twentytwentyone-border {
.wp-block-group__inner-container > .alignfull,
.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));
}
}
}

81
wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_editor.scss Normal file
View File

@ -0,0 +1,81 @@
.wp-block-heading h1,
h1,
.h1,
.wp-block-heading h2,
h2,
.h2,
.wp-block-heading h3,
h3,
.h3,
.wp-block-heading h4,
h4,
.h4,
.wp-block-heading h5,
h5,
.h5,
.wp-block-heading h6,
h6,
.h6 {
clear: both;
font-family: var(--heading--font-family);
font-weight: var(--heading--font-weight);
strong {
font-weight: var(--heading--font-weight-strong);
}
&[style*="--wp--typography--line-height"] {
line-height: var(--wp--typography--line-height, --global--line-height-body);
}
}
.wp-block-heading h1,
h1,
.h1 {
font-size: var(--heading--font-size-h1);
letter-spacing: var(--heading--letter-spacing-h1);
line-height: var(--heading--line-height-h1);
}
.wp-block-heading h2,
h2,
.h2 {
font-size: var(--heading--font-size-h2);
letter-spacing: var(--heading--letter-spacing-h2);
line-height: var(--heading--line-height-h2);
}
.wp-block-heading h3,
h3,
.h3 {
font-size: var(--heading--font-size-h3);
letter-spacing: var(--heading--letter-spacing-h3);
line-height: var(--heading--line-height-h3);
}
.wp-block-heading h4,
h4,
.h4 {
font-size: var(--heading--font-size-h4);
font-weight: var(--heading--font-weight-strong);
letter-spacing: var(--heading--letter-spacing-h4);
line-height: var(--heading--line-height-h4);
}
.wp-block-heading h5,
h5,
.h5 {
font-size: var(--heading--font-size-h5);
font-weight: var(--heading--font-weight-strong);
letter-spacing: var(--heading--letter-spacing-h5);
line-height: var(--heading--line-height-h5);
}
.wp-block-heading h6,
h6,
.h6 {
font-size: var(--heading--font-size-h6);
font-weight: var(--heading--font-weight-strong);
letter-spacing: var(--heading--letter-spacing-h6);
line-height: var(--heading--line-height-h6);
}

65
wp-content/themes/twentytwentyone/assets/sass/05-blocks/heading/_style.scss Normal file
View File

@ -0,0 +1,65 @@
h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
clear: both;
font-family: var(--heading--font-family);
font-weight: var(--heading--font-weight);
strong {
font-weight: var(--heading--font-weight-strong);
}
}
h1,
.h1 {
font-size: var(--heading--font-size-h1);
letter-spacing: var(--heading--letter-spacing-h1);
line-height: var(--heading--line-height-h1);
}
h2,
.h2 {
font-size: var(--heading--font-size-h2);
letter-spacing: var(--heading--letter-spacing-h2);
line-height: var(--heading--line-height-h2);
}
h3,
.h3 {
font-size: var(--heading--font-size-h3);
letter-spacing: var(--heading--letter-spacing-h3);
line-height: var(--heading--line-height-h3);
}
h4,
.h4 {
font-size: var(--heading--font-size-h4);
font-weight: var(--heading--font-weight-strong);
letter-spacing: var(--heading--letter-spacing-h4);
line-height: var(--heading--line-height-h4);
}
h5,
.h5 {
font-size: var(--heading--font-size-h5);
font-weight: var(--heading--font-weight-strong);
letter-spacing: var(--heading--letter-spacing-h5);
line-height: var(--heading--line-height-h5);
}
h6,
.h6 {
font-size: var(--heading--font-size-h6);
font-weight: var(--heading--font-weight-strong);
letter-spacing: var(--heading--letter-spacing-h6);
line-height: var(--heading--line-height-h6);
}

6
wp-content/themes/twentytwentyone/assets/sass/05-blocks/html/_editor.scss Normal file
View File

@ -0,0 +1,6 @@
[data-type="core/html"] textarea {
// Make sure that the color is not white on white when a dark body background is used.
color: var(--global--color-dark-gray);
border-radius: 0;
padding: var(--global--spacing-unit);
}

20
wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_editor.scss Normal file
View File

@ -0,0 +1,20 @@
/* Center image block by default in the editor */
.wp-block-image > div {
text-align: center;
}
[data-type="core/image"] .block-editor-block-list__block-edit figure.is-resized {
margin: 0 auto;
}
/* Block Styles */
.wp-block-image.is-style-twentytwentyone-border img,
.wp-block-image.is-style-twentytwentyone-image-frame img {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
.wp-block-image.is-style-twentytwentyone-image-frame img {
padding: var(--global--spacing-unit);
}

69
wp-content/themes/twentytwentyone/assets/sass/05-blocks/image/_style.scss Normal file
View File

@ -0,0 +1,69 @@
.wp-block-image {
text-align: center;
figcaption {
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
line-height: var(--global--line-height-body);
margin-top: calc(0.5 * var(--global--spacing-unit));
margin-bottom: var(--global--spacing-unit);
text-align: center;
}
.alignright {
margin-left: var(--global--spacing-horizontal);
}
.alignleft {
margin-right: var(--global--spacing-horizontal);
}
a:focus img {
outline-offset: 2px;
}
}
// Remove vertical margins from image block wrappers when floated
.entry-content > *[class="wp-block-image"],
.entry-content [class*="inner-container"] > *[class="wp-block-image"] {
margin-top: 0;
margin-bottom: 0;
// Remove top margins from the following element when previous image block is floated
+ * {
margin-top: 0;
}
}
img {
height: auto;
max-width: 100%;
vertical-align: middle;
}
// Block Styles
.wp-block-image.is-style-twentytwentyone-border img,
.wp-block-image.is-style-twentytwentyone-image-frame img {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
.wp-block-image.is-style-twentytwentyone-image-frame img {
padding: var(--global--spacing-unit);
}
.entry-content {
> .wp-block-image {
> .alignleft,
> .alignright {
@include media(mobile) {
max-width: 50%;
}
@include media(mobile-only) {
margin-left: 0;
margin-right: 0;
}
}
}
}

3
wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_editor.scss Normal file
View File

@ -0,0 +1,3 @@
.wp-block-latest-comments {
padding-left: 0;
}

35
wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-comments/_style.scss Normal file
View File

@ -0,0 +1,35 @@
.wp-block-latest-comments {
padding-left: 0;
.wp-block-latest-comments__comment {
font-size: var(--global--font-size-sm);
line-height: var(--global--line-height-body);
/* Vertical margins logic */
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
.wp-block-latest-comments__comment-meta {
font-family: var(--heading--font-family);
}
.wp-block-latest-comments__comment-date {
color: var(--global--color-primary);
font-size: var(--global--font-size-sm);
}
.wp-block-latest-comments__comment-excerpt p {
font-size: var(--global--font-size-sm);
line-height: var(--global--line-height-body);
margin: 0;
}
}

144
wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_editor.scss Normal file
View File

@ -0,0 +1,144 @@
.wp-block-latest-posts {
padding-left: 0;
// Vertical margins logic
&:not(.is-grid) > li {
margin-top: calc(1.666 * var(--global--spacing-vertical));
margin-bottom: calc(1.666 * var(--global--spacing-vertical));
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&.is-grid {
word-wrap: break-word;
word-break: break-word;
> li {
margin-bottom: var(--global--spacing-vertical);
&:last-child {
margin-bottom: 0;
}
}
}
> li > * {
margin-top: calc(0.333 * var(--global--spacing-vertical));
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
// Post title
> li > a {
display: inline-block;
font-family: var(--latest-posts--title-font-family);
font-size: var(--latest-posts--title-font-size);
font-weight: var(--heading--font-weight);
line-height: var(--global--line-height-heading);
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
}
// Post author
.wp-block-latest-posts__post-author {
color: var(--global--color-primary);
font-size: var(--global--font-size-md);
line-height: var(--global--line-height-body);
}
// Post date
.wp-block-latest-posts__post-date {
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
line-height: var(--global--line-height-body);
[class*="inner-container"] &,
.has-background & {
color: currentColor;
}
}
// Post content
.wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts__post-full-content {
font-family: var(--latest-posts--description-font-family);
font-size: var(--latest-posts--description-font-size);
line-height: var(--global--line-height-body);
margin-top: calc(0.666 * var(--global--spacing-vertical));
}
// Block Styles
&.is-style-twentytwentyone-latest-posts-dividers {
border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
&:not(.is-grid) > li,
> li {
padding-bottom: var(--global--spacing-vertical);
border-bottom: var(--separator--height) solid var(--global--color-border);
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
&.is-grid {
// Border moves up 1px to overlap the li borders in the last row.
box-shadow: inset 0 -1px 0 0 var(--global--color-border);
border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
li {
margin: 0;
padding-top: var(--global--spacing-vertical);
padding-right: var(--global--spacing-horizontal);
&:last-child {
padding-bottom: var(--global--spacing-vertical);
}
}
// This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
// https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34
@media screen and (min-width: 600px) {
@for $i from 2 through 6 {
&.columns-#{ $i } li {
width: calc((100% / #{ $i }));
}
}
}
}
}
&.is-style-twentytwentyone-latest-posts-borders {
li {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
&:last-child {
padding-bottom: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
}
&:not(.is-grid) li {
margin-top: var(--global--spacing-horizontal);
margin-bottom: var(--global--spacing-horizontal);
}
}
}

169
wp-content/themes/twentytwentyone/assets/sass/05-blocks/latest-posts/_style.scss Normal file
View File

@ -0,0 +1,169 @@
.wp-block-latest-posts {
padding-left: 0;
// Vertical margins logic
&:not(.is-grid) > li {
margin-top: calc(1.666 * var(--global--spacing-vertical));
margin-bottom: calc(1.666 * var(--global--spacing-vertical));
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&.is-grid {
word-wrap: break-word;
word-break: break-word;
> li {
margin-bottom: var(--global--spacing-vertical);
&:last-child {
margin-bottom: 0;
}
}
// Remove bottom margins in grid columns
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
margin-bottom: 0;
}
}
> li > * {
margin-top: calc(0.333 * var(--global--spacing-vertical));
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
// Post title
> li > a {
display: inline-block;
font-family: var(--latest-posts--title-font-family);
font-size: var(--latest-posts--title-font-size);
font-weight: var(--heading--font-weight);
line-height: var(--global--line-height-heading);
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
}
// Post author
.wp-block-latest-posts__post-author {
color: var(--global--color-primary);
font-size: var(--global--font-size-md);
line-height: var(--global--line-height-body);
}
// Post date
.wp-block-latest-posts__post-date {
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
line-height: var(--global--line-height-body);
[class*="inner-container"] &,
.has-background & {
color: currentColor;
}
}
// Post content
.wp-block-latest-posts__post-excerpt,
.wp-block-latest-posts__post-full-content {
font-family: var(--latest-posts--description-font-family);
font-size: var(--latest-posts--description-font-size);
line-height: var(--global--line-height-body);
margin-top: calc(0.666 * var(--global--spacing-vertical));
}
// Utility classes
&.alignfull {
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
.entry-content [class*="inner-container"] &,
.entry-content .has-background & {
padding-left: 0;
padding-right: 0;
}
}
// Block Styles
&.is-style-twentytwentyone-latest-posts-dividers {
border-top: calc(3 * var(--separator--height)) solid var(--global--color-border);
border-bottom: calc(3 * var(--separator--height)) solid var(--global--color-border);
&:not(.is-grid) > li,
> li {
padding-bottom: var(--global--spacing-vertical);
border-bottom: var(--separator--height) solid var(--global--color-border);
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
&:last-child {
padding-bottom: 0;
border-bottom: none;
}
}
&.is-grid {
// Border moves up 1px to overlap the li borders in the last row.
box-shadow: inset 0 -1px 0 0 var(--global--color-border);
border-bottom: calc(2 * var(--separator--height)) solid var(--global--color-border);
li {
margin: 0;
padding-top: var(--global--spacing-vertical);
padding-right: var(--global--spacing-horizontal);
&:last-child {
padding-bottom: var(--global--spacing-vertical);
}
}
// This is using a non-standard media query because it is directly overriding the gutenberg-provided widths.
// https://github.com/WordPress/gutenberg/blob/master/packages/block-library/src/latest-posts/style.scss#L28-L34
@media screen and (min-width: 600px) {
@for $i from 2 through 6 {
&.columns-#{ $i } li {
width: calc((100% / #{ $i }));
}
}
}
}
}
&.is-style-twentytwentyone-latest-posts-borders {
li {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
padding: var(--global--spacing-vertical) var(--global--spacing-horizontal);
&:last-child {
padding-bottom: var(--global--spacing-vertical);
}
}
&:not(.is-grid) li {
margin-top: var(--global--spacing-horizontal);
margin-bottom: var(--global--spacing-horizontal);
}
}
}

42
wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_editor.scss Normal file
View File

@ -0,0 +1,42 @@
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
.gallery-columns-2 & {
max-width: 50%;
}
.gallery-columns-3 & {
max-width: 33.33%;
}
.gallery-columns-4 & {
max-width: 25%;
}
.gallery-columns-5 & {
max-width: 20%;
}
.gallery-columns-6 & {
max-width: 16.66%;
}
.gallery-columns-7 & {
max-width: 14.28%;
}
.gallery-columns-8 & {
max-width: 12.5%;
}
.gallery-columns-9 & {
max-width: 11.11%;
}
}
.gallery-caption {
display: block;
}

55
wp-content/themes/twentytwentyone/assets/sass/05-blocks/legacy/_style.scss Normal file
View File

@ -0,0 +1,55 @@
.gallery-item {
display: inline-block;
text-align: center;
vertical-align: top;
width: 100%;
a {
display: block;
}
a:focus img {
outline-offset: -2px;
}
.gallery-columns-2 & {
max-width: 50%;
}
.gallery-columns-3 & {
max-width: 33.33%;
}
.gallery-columns-4 & {
max-width: 25%;
}
.gallery-columns-5 & {
max-width: 20%;
}
.gallery-columns-6 & {
max-width: 16.66%;
}
.gallery-columns-7 & {
max-width: 14.28%;
}
.gallery-columns-8 & {
max-width: 12.5%;
}
.gallery-columns-9 & {
max-width: 11.11%;
}
}
.gallery-caption {
display: block;
}
// Legacy images, linked
figure.wp-caption a:focus img {
outline-offset: 2px;
}

32
wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_editor.scss Normal file
View File

@ -0,0 +1,32 @@
ul,
ol {
font-family: var(--list--font-family);
margin: var(--global--spacing-vertical) 0;
padding-left: calc(2 * var(--global--spacing-horizontal));
// Utility classes
&.aligncenter {
list-style-position: inside;
padding: 0;
text-align: center;
}
&.alignright {
list-style-position: inside;
padding: 0;
text-align: right;
}
}
li {
> ul,
> ol {
margin: 0;
}
}
dt {
font-family: var(--definition-term--font-family);
font-weight: bold;
}

36
wp-content/themes/twentytwentyone/assets/sass/05-blocks/list/_style.scss Normal file
View File

@ -0,0 +1,36 @@
ul,
ol {
font-family: var(--list--font-family);
margin: 0;
padding-left: calc(2 * var(--global--spacing-horizontal));
// Utility classes
&.aligncenter {
list-style-position: inside;
padding: 0;
}
&.alignright {
list-style-position: inside;
text-align: right;
padding: 0;
}
}
ul {
list-style-type: disc;
}
ol {
list-style-type: decimal;
}
dt {
font-family: var(--definition-term--font-family);
font-weight: bold;
}
dd {
margin: 0;
padding-left: calc(2 * var(--global--spacing-horizontal));
}

24
wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_editor.scss Normal file
View File

@ -0,0 +1,24 @@
.wp-block-media-text {
[data-align="full"] & {
margin-top: 0;
margin-bottom: 0;
}
.wp-block-media-text__content {
padding: var(--global--spacing-horizontal);
[data-block]:first-child {
margin-top: 0;
}
[data-block]:last-child {
margin-bottom: 0;
}
}
// Block Styles
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
}

53
wp-content/themes/twentytwentyone/assets/sass/05-blocks/media-text/_style.scss Normal file
View File

@ -0,0 +1,53 @@
.wp-block-media-text {
&.alignfull {
margin-top: 0;
margin-bottom: 0;
}
a:focus img {
outline-offset: -1px;
}
.wp-block-media-text__content {
padding: var(--global--spacing-horizontal);
@include media(tablet) {
padding: var(--global--spacing-vertical);
}
> * {
margin-top: calc(0.666 * var(--global--spacing-vertical));
margin-bottom: calc(0.666 * var(--global--spacing-vertical));
@include media(mobile) {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
}
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
}
/**
* Block Options
*/
&.is-stacked-on-mobile .wp-block-media-text__content {
@include media(mobile) {
padding-top: var(--global--spacing-vertical);
padding-bottom: var(--global--spacing-vertical);
}
}
// Block Styles
&.is-style-twentytwentyone-border {
border: calc(3 * var(--separator--height)) solid var(--global--color-border);
}
}

45
wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_editor.scss Normal file
View File

@ -0,0 +1,45 @@
.wp-block-navigation {
.wp-block-navigation__container {
background: var(--global--color-background);
padding: 0;
}
.wp-block-navigation-link {
.wp-block-navigation-link__content {
padding: var(--primary-nav--padding);
}
.wp-block-navigation-link__label {
font-family: var(--primary-nav--font-family);
font-size: var(--primary-nav--font-size);
font-weight: var(--primary-nav--font-weight);
}
}
.has-child {
.wp-block-navigation__container {
box-shadow: var(--global--elevation);
}
}
&:not(.has-text-color) {
.wp-block-navigation-link {
> a {
&:hover,
&:focus {
color: var(--primary-nav--color-link-hover);
}
}
}
.wp-block-navigation-link__content {
color: currentColor;
}
}
}

128
wp-content/themes/twentytwentyone/assets/sass/05-blocks/navigation/_style.scss Normal file
View File

@ -0,0 +1,128 @@
.wp-block-navigation {
.wp-block-navigation-link {
padding: 0;
.wp-block-navigation-link__content {
padding: var(--primary-nav--padding);
}
.wp-block-navigation-link__label {
font-family: var(--primary-nav--font-family);
font-size: var(--primary-nav--font-size);
font-weight: var(--primary-nav--font-weight);
}
}
.wp-block-navigation-link__submenu-icon {
padding: 0;
}
// Top level navigation container.
> .wp-block-navigation__container {
.has-child {
.wp-block-navigation-link {
display: inherit;
}
.wp-block-navigation__container {
border: none;
left: 0;
margin-left: var(--primary-nav--padding);
min-width: max-content;
opacity: 0;
padding: 0;
position: inherit;
top: inherit;
.wp-block-navigation-link {
.wp-block-navigation-link__content {
display: inline-block;
padding: calc(0.5 * var(--primary-nav--padding)) var(--primary-nav--padding);
}
}
.wp-block-navigation-link__submenu-icon {
display: none;
}
}
&:hover,
&:focus-within {
.wp-block-navigation__container {
display: block;
opacity: 1;
visibility: visible;
}
}
}
> .has-child {
> .wp-block-navigation__container {
background: var(--global--color-background);
margin: 0;
padding: 0;
position: absolute;
top: 100%;
border: 1px solid var(--primary-nav--border-color);
&:before,
&:after {
content: "";
display: block;
position: absolute;
width: 0;
top: -10px;
left: var(--global--spacing-horizontal);
border-style: solid;
border-color: var(--primary-nav--border-color) transparent;
border-width: 0 7px 10px 7px;
}
&:after {
top: -9px;
border-color: var(--global--color-background) transparent;
}
}
}
}
&:not(.has-background) {
.wp-block-navigation__container {
background: var(--global--color-background);
.wp-block-navigation__container {
background: var(--global--color-background);
}
}
}
&:not(.has-text-color) {
.wp-block-navigation-link {
> a {
&:hover,
&:focus {
color: var(--primary-nav--color-link-hover);
}
&:hover {
text-decoration: underline;
text-decoration-style: dotted;
}
}
}
.wp-block-navigation-link__content {
color: currentColor;
}
}
}

7
wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_editor.scss Normal file
View File

@ -0,0 +1,7 @@
p {
line-height: var(--wp--typography--line-height, --global--line-height-body);
&.has-background {
padding: var(--global--spacing-unit);
}
}

14
wp-content/themes/twentytwentyone/assets/sass/05-blocks/paragraph/_style.scss Normal file
View File

@ -0,0 +1,14 @@
p {
line-height: var(--wp--typography--line-height, --global--line-height-body);
// inherits general font style set at <body>
&.has-background {
padding: var(--global--spacing-unit);
}
// Override `color: inherit` from Core styles.
&.has-text-color a {
color: var(--wp--style--color--link, var(--global--color-primary));
}
}

6
wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_editor.scss Normal file
View File

@ -0,0 +1,6 @@
pre.wp-block-preformatted {
overflow-x: auto;
white-space: pre !important;
font-size: var(--global--font-size-xs);
}

4
wp-content/themes/twentytwentyone/assets/sass/05-blocks/preformatted/_style.scss Normal file
View File

@ -0,0 +1,4 @@
pre.wp-block-preformatted {
overflow-x: auto;
white-space: pre;
}

96
wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_editor.scss Normal file
View File

@ -0,0 +1,96 @@
.wp-block-pullquote {
padding: calc(2 * var(--global--spacing-unit)) 0;
text-align: center;
border-width: var(--pullquote--border-width);
border-bottom-style: solid;
border-top-style: solid;
color: currentColor;
border-color: currentColor;
position: relative;
blockquote::before {
color: currentColor;
content: "\201C";
display: block;
font-size: 3rem;
font-weight: 500;
line-height: 1;
}
p {
font-family: var(--pullquote--font-family);
font-size: var(--pullquote--font-size);
font-style: var(--pullquote--font-style);
font-weight: 700;
letter-spacing: var(--pullquote--letter-spacing);
line-height: var(--pullquote--line-height);
margin: 0;
}
a {
color: currentColor;
}
.wp-block-pullquote__citation,
cite,
footer {
font-size: var(--global--font-size-xs);
font-style: var(--pullquote--font-style);
text-transform: none;
}
// Block Options
&:not(.is-style-solid-color) {
background: none;
}
&.is-style-solid-color {
margin-left: auto;
margin-right: auto;
padding: calc(2.5 * var(--global--spacing-unit));
border-width: var(--pullquote--border-width);
border-style: solid;
border-color: var(--pullquote--border-color);
@media ( min-width: 600px ) {
padding: calc(5 * var(--global--spacing-unit));
}
blockquote::before {
text-align: left;
}
&.alignleft blockquote,
&.alignright blockquote {
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
max-width: inherit;
}
blockquote {
margin: 0;
max-width: 100%;
p {
font-size: var(--pullquote--font-size);
}
}
.wp-block-pullquote__citation,
cite,
footer {
color: currentColor;
}
}
}
.wp-block[data-align="full"] {
.wp-block-pullquote:not(.is-style-solid-color) {
blockquote {
padding: 0 calc(2 * var(--global--spacing-unit));
}
}
}

97
wp-content/themes/twentytwentyone/assets/sass/05-blocks/pullquote/_style.scss Normal file
View File

@ -0,0 +1,97 @@
.wp-block-pullquote {
padding: calc(2 * var(--global--spacing-unit)) 0;
text-align: center;
border-width: var(--pullquote--border-width);
border-bottom-style: solid;
border-top-style: solid;
position: relative;
blockquote::before {
color: currentColor;
content: "\201C";
display: block;
font-size: 3rem;
font-weight: 500;
line-height: 1;
}
p {
font-family: var(--pullquote--font-family);
font-size: var(--pullquote--font-size);
font-style: var(--pullquote--font-style);
font-weight: 700;
letter-spacing: var(--pullquote--letter-spacing);
line-height: var(--pullquote--line-height);
margin: 0;
}
a {
color: currentColor;
}
.wp-block-pullquote__citation,
cite,
footer {
color: currentColor;
display: block;
font-size: var(--global--font-size-xs);
font-style: var(--pullquote--font-style);
text-transform: none;
}
/**
* Block Options
*/
&:not(.is-style-solid-color) {
background: none;
}
&.alignleft {
blockquote:before,
cite {
text-align: center;
}
}
&.alignwide > p,
&.alignwide blockquote {
max-width: var(--responsive--alignwide-width);
}
&.alignfull:not(.is-style-solid-color) > p,
&.alignfull:not(.is-style-solid-color) blockquote {
padding: 0 calc(2 * var(--global--spacing-unit));
}
&.is-style-solid-color {
color: var(--pullquote--color-foreground);
padding: calc(2.5 * var(--global--spacing-unit));
border-width: var(--pullquote--border-width);
border-style: solid;
border-color: var(--pullquote--border-color);
@media ( min-width: 600px ) {
padding: calc(5 * var(--global--spacing-unit));
}
blockquote::before {
text-align: left;
}
blockquote {
max-width: inherit;
p {
font-size: var(--pullquote--font-size);
}
}
.wp-block-pullquote__citation,
cite,
footer {
color: currentColor;
}
}
}

134
wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_editor.scss Normal file
View File

@ -0,0 +1,134 @@
.wp-block-quote {
position: relative;
border-left: none;
margin: var(--global--spacing-vertical) auto var(--global--spacing-vertical) var(--global--spacing-horizontal);
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);
line-height: var(--quote--line-height);
}
strong {
font-weight: var(--quote--font-weight-strong);
}
&: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__citation {
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) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"]:not(.has-background-background-color) &,
.wp-block-cover[style*="background-image"] & {
color: currentColor;
}
}
&.has-text-align-right {
margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
padding-right: 0;
border-right: none;
&:before {
content: "\201D";
left: initial;
right: calc(-0.5 * var(--global--spacing-horizontal));
}
}
&.has-text-align-center {
margin: var(--global--spacing-vertical) auto;
&:before {
display: none;
}
}
&.is-large,
&.is-style-large {
padding-left: 0;
/* Resetting margins to match _block-container.scss */
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
p {
font-size: var(--quote--font-size-large);
font-style: var(--quote--font-style-large);
line-height: var(--quote--line-height-large);
}
&:before {
font-size: var(--quote--font-size-large);
line-height: var(--quote--line-height-large);
left: calc(-1 * var(--global--spacing-horizontal));
}
&.has-text-align-right {
&:before {
left: initial;
right: calc(-1 * var(--global--spacing-horizontal));
}
}
@include media(mobile-only) {
padding-left: var(--global--spacing-horizontal);
&:before {
left: 0;
}
&.has-text-align-right {
padding-left: 0;
padding-right: var(--global--spacing-horizontal);
&:before {
right: 0;
}
}
}
}
@include media(mobile-only) {
padding-left: calc(0.5 * var(--global--spacing-horizontal));
&:before {
left: 0;
}
&.has-text-align-right {
padding-left: 0;
padding-right: calc(0.5 * var(--global--spacing-horizontal));
&:before {
right: 0;
}
}
&.has-text-align-center {
padding-left: 0;
padding-right: 0;
}
}
@include media(mobile) {
margin-left: auto;
&.has-text-align-right {
margin-right: auto;
}
}
}

113
wp-content/themes/twentytwentyone/assets/sass/05-blocks/quote/_style.scss Normal file
View File

@ -0,0 +1,113 @@
.wp-block-quote {
.wp-block-quote__citation,
cite,
footer {
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] &,
.wp-block-cover[style*="background-image"] & {
color: currentColor;
}
}
/**
* Block Options
*/
&.has-text-align-right {
margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) auto;
padding-right: 0;
border-right: none;
&:before {
content: "\201D";
left: initial;
right: calc(-0.5 * var(--global--spacing-horizontal));
}
}
&.has-text-align-center {
margin: var(--global--spacing-vertical) auto;
&:before {
display: none;
}
}
&.is-large,
&.is-style-large {
padding-left: 0;
padding-right: 0;
/* Resetting margins to match _block-container.scss */
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
p {
font-size: var(--quote--font-size-large);
font-style: var(--quote--font-style-large);
line-height: var(--quote--line-height-large);
}
&:before {
font-size: var(--quote--font-size-large);
line-height: var(--quote--line-height-large);
left: calc(-1 * var(--global--spacing-horizontal));
}
&.has-text-align-right {
&:before {
left: initial;
right: calc(-1 * var(--global--spacing-horizontal));
}
}
.wp-block-quote__citation,
cite,
footer {
color: var(--global--color-primary);
font-size: var(--global--font-size-sm);
}
@include media(mobile-only) {
padding-left: var(--global--spacing-horizontal);
&:before {
left: 0;
}
&.has-text-align-right {
padding-left: 0;
padding-right: var(--global--spacing-horizontal);
&:before {
right: 0;
}
}
&.has-text-align-center {
padding-left: 0;
padding-right: 0;
}
}
}
@include media(mobile-only) {
&.has-text-align-right {
padding-left: 0;
padding-right: calc(0.5 * var(--global--spacing-horizontal));
&:before {
right: 0;
}
}
&.has-text-align-center {
padding-left: 0;
padding-right: 0;
}
}
}

109
wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_editor.scss Normal file
View File

@ -0,0 +1,109 @@
.wp-block-rss {
padding-left: 0;
> li {
list-style: none;
}
// Vertical margins logic
&:not(.is-grid) > li {
margin-top: calc(1.666 * var(--global--spacing-vertical));
margin-bottom: calc(1.666 * var(--global--spacing-vertical));
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&.is-grid {
> li {
margin-bottom: var(--global--spacing-vertical);
&:last-child {
margin-bottom: 0;
}
}
// Remove bottom margins in grid columns
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
margin-bottom: 0;
}
}
> li > * {
margin-top: calc(0.333 * var(--global--spacing-vertical));
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
// Post title
.wp-block-rss__item-title > a {
display: inline-block;
font-family: var(--latest-posts--title-font-family);
font-size: var(--latest-posts--title-font-size);
font-weight: var(--heading--font-weight);
line-height: var(--global--line-height-heading);
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
}
// Post author
.wp-block-rss__item-author {
color: var(--global--color-primary);
font-size: var(--global--font-size-md);
line-height: var(--global--line-height-body);
}
// Post date
.wp-block-rss__item-publish-date {
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
line-height: var(--global--line-height-body);
[class*="inner-container"] &,
.has-background & {
color: currentColor;
}
}
// Post content
.wp-block-rss__item-excerpt,
.wp-block-rss__item-full-content {
font-family: var(--latest-posts--description-font-family);
font-size: var(--latest-posts--description-font-size);
line-height: var(--global--line-height-body);
margin-top: calc(0.666 * var(--global--spacing-vertical));
}
// Utility classes
&.alignfull {
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
.entry-content [class*="inner-container"] &,
.entry-content .has-background & {
padding-left: 0;
padding-right: 0;
}
}
}

109
wp-content/themes/twentytwentyone/assets/sass/05-blocks/rss/_style.scss Normal file
View File

@ -0,0 +1,109 @@
.wp-block-rss {
padding-left: 0;
> li {
list-style: none;
}
// Vertical margins logic
&:not(.is-grid) > li {
margin-top: calc(1.666 * var(--global--spacing-vertical));
margin-bottom: calc(1.666 * var(--global--spacing-vertical));
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
&.is-grid {
> li {
margin-bottom: var(--global--spacing-vertical);
&:last-child {
margin-bottom: 0;
}
}
// Remove bottom margins in grid columns
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1),
&.columns-2 > li:nth-last-child(-n + 2):nth-child(2n + 1) ~ li,
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1),
&.columns-3 > li:nth-last-child(-n + 3):nth-child(3n + 1) ~ li,
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1),
&.columns-4 > li:nth-last-child(-n + 4):nth-child(4n + 1) ~ li,
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1),
&.columns-5 > li:nth-last-child(-n + 5):nth-child(5n + 1) ~ li,
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1),
&.columns-6 > li:nth-last-child(-n + 6):nth-child(6n + 1) ~ li {
margin-bottom: 0;
}
}
> li > * {
margin-top: calc(0.333 * var(--global--spacing-vertical));
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
&:first-child {
margin-top: 0;
}
&:last-child {
margin-bottom: 0;
}
}
// Post title
.wp-block-rss__item-title > a {
display: inline-block;
font-family: var(--latest-posts--title-font-family);
font-size: var(--latest-posts--title-font-size);
font-weight: var(--heading--font-weight);
line-height: var(--global--line-height-heading);
margin-bottom: calc(0.333 * var(--global--spacing-vertical));
}
// Post author
.wp-block-rss__item-author {
color: var(--global--color-primary);
font-size: var(--global--font-size-md);
line-height: var(--global--line-height-body);
}
// Post date
.wp-block-rss__item-publish-date {
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
line-height: var(--global--line-height-body);
[class*="inner-container"] &,
.has-background & {
color: currentColor;
}
}
// Post content
.wp-block-rss__item-excerpt,
.wp-block-rss__item-full-content {
font-family: var(--latest-posts--description-font-family);
font-size: var(--latest-posts--description-font-size);
line-height: var(--global--line-height-body);
margin-top: calc(0.666 * var(--global--spacing-vertical));
}
// Utility classes
&.alignfull {
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
.entry-content [class*="inner-container"] &,
.entry-content .has-background & {
padding-left: 0;
padding-right: 0;
}
}
}

183
wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_editor.scss Normal file
View File

@ -0,0 +1,183 @@
.wp-block-search {
max-width: var(--responsive--aligndefault-width);
.wp-block-search__label {
font-size: var(--form--font-size);
font-weight: var(--form--label-weight);
margin-bottom: calc(var(--global--spacing-vertical) / 3);
}
.wp-block-search__input {
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
font-family: var(--form--font-family);
font-size: var(--form--font-size);
line-height: var(--form--line-height);
max-width: inherit;
margin-right: calc(-1 * var(--button--border-width));
padding: var(--form--spacing-unit);
.is-dark-theme & {
background: var(--global--color-white-90);
}
.has-background.has-white-background-color &,
.has-background.has-green-background-color &,
.has-background.has-blue-background-color &,
.has-background.has-purple-background-color &,
.has-background.has-red-background-color &,
.has-background.has-orange-background-color &,
.has-background.has-yellow-background-color & {
.is-dark-theme & {
border-color: var(--form--color-text);
}
}
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
border-color: var(--global--color-white);
}
}
.wp-block-search__button {
@include button-style();
box-shadow: none;
margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
&:hover {
color: var(--button--color-text);
background-color: var(--button--color-background);
}
&.has-icon {
padding: calc(2 * var(--button--padding-vertical)) calc(0.5 * var(--button--padding-horizontal));
svg {
width: 40px;
height: 40px;
}
}
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
color: var(--global--color-white);
border-color: currentColor;
&:hover {
color: var(--global--color-white);
background-color: var(--button--color-background);
border-color: var(--global--color-white);
.is-dark-theme & {
color: var(--button--color-text);
background-color: var(--button--color-background);
}
}
}
.has-background.has-white-background-color &,
.has-background.has-green-background-color &,
.has-background.has-blue-background-color &,
.has-background.has-purple-background-color &,
.has-background.has-red-background-color &,
.has-background.has-orange-background-color &,
.has-background.has-yellow-background-color & {
&:hover {
color: var(--global--color-white);
background-color: var(--form--border-color);
border-color: var(--form--border-color);
}
.is-dark-theme & {
color: var(--form--color-text);
border-color: currentColor;
&:hover {
color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
}
}
}
&.wp-block-search__button-inside {
.wp-block-search__input,
.has-background.has-white-background-color & .wp-block-search__input,
.has-background.has-green-background-color & .wp-block-search__input,
.has-background.has-blue-background-color & .wp-block-search__input,
.has-background.has-purple-background-color & .wp-block-search__input,
.has-background.has-red-background-color & .wp-block-search__input,
.has-background.has-orange-background-color & .wp-block-search__input,
.has-background.has-yellow-background-color & .wp-block-search__input {
border: none;
}
&.wp-block-search__text-button {
.wp-block-search__button {
// Match the text button size with the icon button.
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
}
.wp-block-search__button {
.is-dark-theme & {
color: var(--button--color-text);
border-color: currentColor;
&:hover {
color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
}
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
color: var(--button--color-text-hover);
border-color: currentColor;
&:hover {
color: var(--global--color-white);
background-color: var(--button--color-background);
border-color: var(--button--color-background);
}
.is-dark-theme & {
color: var(--button--color-text);
border-color: currentColor;
&:hover {
color: var(--global--color-white);
background-color: var(--button--color-text);
border-color: var(--button--color-text);
}
}
}
}
}
}
.wp-block[data-align="center"] > * {
text-align: center;
}
.wp-block[data-align="center"] {
.wp-block-search__button-only {
.wp-block-search__inside-wrapper {
justify-content: center;
}
}
}

162
wp-content/themes/twentytwentyone/assets/sass/05-blocks/search/_style.scss Normal file
View File

@ -0,0 +1,162 @@
.wp-block-search {
max-width: var(--responsive--aligndefault-width);
&__button-inside {
.wp-block-search__inside-wrapper {
background-color: var(--global--color-white);
}
}
&__button-only.aligncenter {
.wp-block-search__inside-wrapper {
justify-content: center;
}
}
.wp-block-search__label {
font-size: var(--form--font-size);
font-weight: var(--form--label-weight);
margin-bottom: calc(var(--global--spacing-vertical) / 3);
}
.wp-block-search__input {
border: var(--form--border-width) solid var(--form--border-color);
border-radius: var(--form--border-radius);
color: var(--form--color-text);
line-height: var(--form--line-height);
max-width: inherit;
margin-right: calc(-1 * var(--button--border-width));
padding: var(--form--spacing-unit);
&:focus {
color: var(--form--color-text);
border-color: var(--form--border-color);
}
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] &,
.wp-block-cover[style*="background-image"] & {
border-color: currentColor;
}
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
border-color: var(--global--color-white);
}
}
button.wp-block-search__button {
margin-left: 0;
background-color: transparent;
color: var(--button--color-text-hover);
line-height: 1;
&:hover {
background-color: var(--button--color-background);
color: var(--button--color-text);
}
&.has-icon {
padding: 6px calc(0.5 * var(--button--padding-horizontal));
svg {
width: 40px;
height: 40px;
fill: currentColor;
}
}
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
color: var(--global--color-white);
border-color: currentColor;
&:hover {
background-color: var(--button--color-background);
border-color: var(--global--color-white);
color: var(--global--color-white);
.is-dark-theme & {
color: var(--button--color-text);
}
}
}
.has-background.has-white-background-color &,
.has-background.has-green-background-color &,
.has-background.has-blue-background-color &,
.has-background.has-purple-background-color &,
.has-background.has-red-background-color &,
.has-background.has-orange-background-color &,
.has-background.has-yellow-background-color & {
border-color: currentColor;
color: currentColor;
&:hover {
background-color: var(--form--border-color);
border-color: var(--form--border-color);
color: var(--global--color-white);
.is-dark-theme & {
border-color: var(--button--color-text);
background-color: var(--button--color-text);
color: var(--button--color-background);
}
}
}
}
&.wp-block-search__button-inside {
&.wp-block-search__text-button {
button.wp-block-search__button {
// Match the text button size with the icon button.
padding: var(--button--padding-vertical) var(--button--padding-horizontal);
}
}
button.wp-block-search__button {
.has-background.has-gray-background-color &,
.has-background.has-dark-gray-background-color &,
.has-background.has-black-background-color & {
border-color: var(--button--color-background);
color: var(--button--color-background);
&:hover {
color: var(--global--color-white);
}
.is-dark-theme & {
border-color: var(--button--color-text);
color: var(--button--color-text);
&:hover {
color: var(--global--color-white);
}
}
}
.is-dark-theme & {
border-color: var(--button--color-text);
color: var(--button--color-text);
&:hover {
border-color: var(--button--color-text);
background-color: var(--button--color-text);
color: var(--button--color-background);
}
}
}
}
}
.wp-block-search__button {
box-shadow: none;
}

48
wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_editor.scss Normal file
View File

@ -0,0 +1,48 @@
.wp-block-separator,
hr {
border-bottom: var(--separator--height) solid var(--separator--border-color);
clear: both;
opacity: 1;
&[style*="text-align:right"],
&[style*="text-align: right"] {
border-right-color: var(--separator--border-color);
}
&:not(.is-style-dots) {
max-width: var(--responsive--aligndefault-width);
}
[data-align="full"] > &,
[data-align="wide"] > & {
max-width: inherit;
}
&.is-style-twentytwentyone-separator-thick {
border-bottom-width: calc(3 * var(--separator--height));
}
&.is-style-dots {
border-bottom: none;
&.has-background,
&.has-text-color {
background-color: transparent !important;
&:before {
color: currentColor !important;
}
}
&:before {
color: var(--separator--border-color);
}
}
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"]:not(.has-background-background-color) &,
.wp-block-cover[style*="background-image"] & {
border-color: currentColor;
}
}

52
wp-content/themes/twentytwentyone/assets/sass/05-blocks/separator/_style.scss Normal file
View File

@ -0,0 +1,52 @@
hr {
border-style: none;
border-bottom: var(--separator--height) solid var(--separator--border-color);
clear: both;
margin-left: auto;
margin-right: auto;
&.wp-block-separator {
border-bottom: var(--separator--height) solid var(--separator--border-color);
&:not(.is-style-dots):not(.alignwide) {
max-width: var(--responsive--aligndefault-width);
&.alignfull {
max-width: var(--responsive--alignfull-width);
}
}
/**
* Block Options
*/
&.is-style-twentytwentyone-separator-thick {
border-bottom-width: calc(3 * var(--separator--height));
}
&.is-style-dots {
&.has-background,
&.has-text-color {
background-color: transparent !important;
&:before {
color: currentColor !important;
}
}
&:before {
color: var(--separator--border-color);
font-size: var(--global--font-size-xl);
letter-spacing: var(--global--font-size-sm);
padding-left: var(--global--font-size-sm);
}
}
.has-background:not(.has-background-background-color) &,
[class*="background-color"]:not(.has-background-background-color) &,
[style*="background-color"] &,
.wp-block-cover[style*="background-image"] & {
border-color: currentColor;
}
}
}

20
wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_editor.scss Normal file
View File

@ -0,0 +1,20 @@
.wp-block-social-links {
// Social icons are horizontal, so they don't need vertical spacing.
[data-block] {
margin-top: 0;
margin-bottom: 0;
}
&.is-style-twentytwentyone-social-icons-color {
button {
color: var(--global--color-primary);
}
.wp-social-link {
background: none;
}
}
}

11
wp-content/themes/twentytwentyone/assets/sass/05-blocks/social-icons/_style.scss Normal file
View File

@ -0,0 +1,11 @@
.wp-block-social-links.is-style-twentytwentyone-social-icons-color {
a {
color: var(--global--color-primary);
}
.wp-social-link {
background: none;
}
}

13
wp-content/themes/twentytwentyone/assets/sass/05-blocks/spacer/_style.scss Normal file
View File

@ -0,0 +1,13 @@
.wp-block-spacer {
display: block;
// Remove vertical margins
margin-bottom: 0 !important;
margin-top: 0 !important;
@include media(mobile-only) {
&[style] {
height: var(--global--spacing-unit) !important;
}
}
}

79
wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_editor.scss Normal file
View File

@ -0,0 +1,79 @@
table,
.wp-block-table {
th {
font-family: var(--heading--font-family);
}
td,
th {
padding: calc(0.5 * var(--global--spacing-unit));
}
&.is-style-regular .has-background,
&.is-style-stripes .has-background thead tr,
&.is-style-stripes .has-background tfoot tr,
&.is-style-stripes .has-background tbody tr:nth-child(even) {
color: var(--table--has-background-text-color);
}
&.is-style-stripes {
border-color: var(--table--stripes-border-color);
th,
td {
border-width: 0;
}
tbody tr:nth-child(odd) {
background-color: var(--table--stripes-background-color);
}
}
}
table.wp-calendar-table {
td,
th {
background: transparent;
border: 0;
text-align: center;
line-height: 2;
vertical-align: middle;
}
th {
font-weight: bold;
}
thead,
tbody {
color: currentColor;
border: 1px solid;
}
caption {
font-weight: bold;
text-align: left;
margin-bottom: var(--global--spacing-unit);
color: currentColor;
}
}
.wp-calendar-nav {
text-align: left;
margin-top: calc(var(--global--spacing-unit) / 2);
svg {
height: 1em;
vertical-align: middle;
path {
fill: currentColor;
}
}
.wp-calendar-nav-next {
float: right;
}
}

84
wp-content/themes/twentytwentyone/assets/sass/05-blocks/table/_style.scss Normal file
View File

@ -0,0 +1,84 @@
table,
.wp-block-table {
width: 100%;
min-width: 240px;
border-collapse: collapse;
th {
font-family: var(--heading--font-family);
}
td,
th {
padding: calc(0.5 * var(--global--spacing-unit));
border: 1px solid;
}
&.is-style-regular .has-background,
&.is-style-stripes .has-background thead tr,
&.is-style-stripes .has-background tfoot tr,
&.is-style-stripes .has-background tbody tr:nth-child(even) {
color: var(--table--has-background-text-color);
}
&.is-style-stripes {
border-color: var(--table--stripes-border-color);
th,
td {
border-width: 0;
}
tbody tr:nth-child(odd) {
background-color: var(--table--stripes-background-color);
}
}
}
table.wp-calendar-table {
td,
th {
background: transparent;
border: 0;
text-align: center;
line-height: 2;
vertical-align: middle;
word-break: normal;
}
th {
font-weight: bold;
}
thead,
tbody {
color: currentColor;
border: 1px solid;
}
caption {
font-weight: bold;
text-align: left;
margin-bottom: var(--global--spacing-unit);
color: currentColor;
}
}
.wp-calendar-nav {
text-align: left;
margin-top: calc(var(--global--spacing-unit) / 2);
svg {
height: 1em;
vertical-align: middle;
path {
fill: currentColor;
}
}
.wp-calendar-nav-next {
float: right;
}
}

6
wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_editor.scss Normal file
View File

@ -0,0 +1,6 @@
.wp-block-tag-cloud {
&.aligncenter {
text-align: center;
}
}

7
wp-content/themes/twentytwentyone/assets/sass/05-blocks/tag-clould/_style.scss Normal file
View File

@ -0,0 +1,7 @@
.wp-block-tag-cloud {
&.alignfull {
padding-left: var(--global--spacing-unit);
padding-right: var(--global--spacing-unit);
}
}

143
wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_editor.scss Normal file
View File

@ -0,0 +1,143 @@
/**
* Editor Post Title
* - Needs a special styles
*/
// Post title style
.wp-block.editor-post-title__block {
border-bottom: 3px solid var(--global--color-border);
padding-bottom: calc(2 * var(--global--spacing-vertical));
margin-bottom: calc(3 * var(--global--spacing-vertical));
max-width: var(--responsive--alignwide-width);
.editor-post-title__input {
color: var(--global--color-secondary);
font-family: var(--heading--font-family);
font-size: var(--global--font-size-page-title);
font-weight: var(--heading--font-weight-page-title);
line-height: var(--heading--line-height-h1);
}
}
// Editor UI font styles
.wp-block.block-editor-default-block-appender > textarea {
font-family: var(--global--font-secondary);
font-size: var(--global--font-size-md);
}
// Gutenberg text color options
.has-primary-color[class] {
color: var(--global--color-primary);
}
.has-secondary-color[class] {
color: var(--global--color-secondary);
}
// Gutenberg background-color options
.has-background {
&:not(.has-background-background-color) a:not(.wp-block-button__link),
p,
h1,
h2,
h3,
h4,
h5,
h6 {
color: currentColor;
}
}
.has-primary-background-color[class] {
background-color: var(--global--color-primary);
color: var(--global--color-background);
}
.has-secondary-background-color[class] {
background-color: var(--global--color-secondary);
color: var(--global--color-background);
}
.has-white-background-color[class] {
background-color: var(--global--color-white);
color: var(--global--color-secondary);
}
.has-black-background-color[class] {
background-color: var(--global--color-black);
color: var(--global--color-primary);
}
/**
* Spacing Overrides
*/
[data-block] {
margin-top: var(--global--spacing-vertical);
margin-bottom: var(--global--spacing-vertical);
[data-block]:first-child {
margin-top: 0;
}
// Needs to be the second-last child to avoid applying this to the appender.
[data-block]:nth-last-child(2) {
margin-bottom: 0;
}
}
/* Block Alignments */
.wp-block {
// Gutenberg injects a rule that limits the max width of .wp-block to 580px
// This line overrides it to use the responsive spacing rules for default width content
max-width: var(--responsive--aligndefault-width);
// Use the theme's max-width for wide alignment.
&[data-align="wide"],
&.alignwide {
max-width: var(--responsive--alignwide-width);
}
&[data-align="full"],
&.alignfull {
max-width: none;
}
}
.alignleft {
margin: 0;
margin-right: var(--global--spacing-horizontal);
}
.alignright {
margin: 0;
margin-left: var(--global--spacing-horizontal);
}
// Drop cap
.has-drop-cap:not(:focus)::first-letter {
font-family: var(--heading--font-family);
font-weight: var(--heading--font-weight);
line-height: 0.66;
text-transform: uppercase;
font-style: normal;
float: left;
margin: 0.1em 0.1em 0 0;
font-size: calc(1.2 * var(--heading--font-size-h1));
}
@media only screen and (min-width: 482px) {
.wp-block[data-align="left"] > * {
max-width: 290px;
margin-right: var(--global--spacing-horizontal);
}
.wp-block[data-align="right"] > * {
max-width: 290px;
margin-left: var(--global--spacing-horizontal);
}
}

53
wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_font-sizes.scss Normal file
View File

@ -0,0 +1,53 @@
// Gutenberg Font-size utility classes
:root {
.is-extra-small-text,
.has-extra-small-font-size {
font-size: var(--global--font-size-xs);
}
.is-small-text,
.has-small-font-size {
font-size: var(--global--font-size-sm);
}
.is-regular-text,
.has-regular-font-size,
.is-normal-font-size,
.has-normal-font-size,
.has-medium-font-size {
font-size: var(--global--font-size-base);
}
.is-large-text,
.has-large-font-size {
font-size: var(--global--font-size-lg);
line-height: var(--global--line-height-heading);
}
.is-larger-text,
.has-larger-font-size,
.is-extra-large-text,
.has-extra-large-font-size {
font-size: var(--global--font-size-xl);
line-height: var(--global--line-height-heading);
}
.is-huge-text,
.has-huge-font-size {
font-size: var(--global--font-size-xxl);
line-height: var(--global--line-height-heading);
// This size is meant to mimic the page titles, so the font weight is reduced to match.
font-weight: var(--heading--font-weight-page-title);
}
.is-gigantic-text,
.has-gigantic-font-size {
font-size: var(--global--font-size-xxxl);
line-height: var(--global--line-height-heading);
// This size is meant to mimic the page titles, so the font weight is reduced to match.
font-weight: var(--heading--font-weight-page-title);
}
}

160
wp-content/themes/twentytwentyone/assets/sass/05-blocks/utilities/_style.scss Normal file
View File

@ -0,0 +1,160 @@
/* Block Alignments */
/**
* These selectors set the default max width for content appearing inside a post or page.
*/
.entry-content > *:not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce),
*[class*="inner-container"] > *:not(.entry-content):not(.alignwide):not(.alignfull):not(.alignleft):not(.alignright):not(.wp-block-separator):not(.woocommerce) {
@extend %responsive-aligndefault-width;
}
/**
* .alignleft
*/
.alignleft {
/*rtl:ignore*/
text-align: left;
margin-top: 0;
}
// Targeting the .entry-content class is necessary to ensure these styles
// only apply when the block isn't nested.
.entry-content > .alignleft {
max-width: var(--responsive--aligndefault-width);
@extend %responsive-alignleft;
}
@include media(mobile) {
.alignleft {
/*rtl:ignore*/
float: left;
/*rtl:ignore*/
margin-right: var(--global--spacing-horizontal);
margin-bottom: var(--global--spacing-vertical);
}
.entry-content > .alignleft {
max-width: calc(50% - var(--responsive--alignleft-margin));
}
}
/**
* .aligncenter
*/
.aligncenter {
clear: both;
display: block;
float: none;
margin-right: auto;
margin-left: auto;
text-align: center;
}
/**
* .alignright
*/
.alignright {
margin-top: 0;
margin-bottom: var(--global--spacing-vertical);
}
// Targeting the .entry-content class is necessary to ensure these styles
// only apply when the block isn't nested.
.entry-content > .alignright {
max-width: var(--responsive--aligndefault-width);
@extend %responsive-alignright;
}
@include media(mobile) {
.alignright {
/*rtl:ignore*/
float: right;
/*rtl:ignore*/
margin-left: var(--global--spacing-horizontal);
}
.entry-content > .alignright {
max-width: calc(50% - var(--responsive--alignright-margin));
}
}
// Make sure siblings of floated elements are top-aligned when nested
[class*="inner-container"] > .alignleft + *,
[class*="inner-container"] > .alignright + * {
margin-top: 0;
}
/**
* .alignwide
*/
.alignwide {
clear: both;
@extend %responsive-alignwide-width;
}
.alignwide [class*="inner-container"] > .alignwide {
@extend %responsive-alignwide-width-nested;
}
/**
* .alignfull
*/
.alignfull {
clear: both;
@extend %responsive-alignfull-width-mobile;
@extend %responsive-alignfull-width;
}
.alignfull [class*="inner-container"] > .alignwide {
@extend %responsive-alignwide-width-nested;
}
// Content alignment
.has-left-content {
justify-content: flex-start;
}
.has-right-content {
justify-content: flex-end;
}
// Parallax
.has-parallax {
background-attachment: fixed;
}
// Drop caps
.has-drop-cap:not(:focus)::first-letter {
font-family: var(--heading--font-family);
font-weight: var(--heading--font-weight);
line-height: 0.66;
text-transform: uppercase;
font-style: normal;
float: left;
margin: 0.1em 0.1em 0 0;
font-size: calc(1.2 * var(--heading--font-size-h1));
}
.has-drop-cap:not(:focus)::after {
content: "";
display: table;
clear: both;
padding-top: 14px;
}
.desktop-only {
display: none;
@include media(mobile) {
display: block;
}
}

4
wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_editor.scss Normal file
View File

@ -0,0 +1,4 @@
pre.wp-block-verse {
padding: 0;
color: currentColor;
}

3
wp-content/themes/twentytwentyone/assets/sass/05-blocks/verse/_style.scss Normal file
View File

@ -0,0 +1,3 @@
.wp-block-verse {
font-family: var(--entry-content--font-family);
}

16
wp-content/themes/twentytwentyone/assets/sass/05-blocks/video/_style.scss Normal file
View File

@ -0,0 +1,16 @@
.wp-block-video {
figcaption {
color: var(--global--color-primary);
font-size: var(--global--font-size-xs);
margin-top: calc(0.5 * var(--global--spacing-unit));
margin-bottom: var(--global--spacing-unit);
text-align: center;
}
}
* > figure > video {
max-width: unset;
width: 100%;
vertical-align: middle;
}

4
wp-content/themes/twentytwentyone/assets/sass/06-components/404.scss Normal file
View File

@ -0,0 +1,4 @@
.error404 main p {
font-size: var(--global--font-size-lg);
margin-bottom: calc(var(--global--spacing-vertical) * 1.6666666667);
}

68
wp-content/themes/twentytwentyone/assets/sass/06-components/archives.scss Normal file
View File

@ -0,0 +1,68 @@
.page-title {
font-size: var(--global--font-size-page-title);
}
h1.page-title,
h2.page-title {
font-weight: var(--heading--font-weight-page-title);
}
h1.page-title {
line-height: var(--heading--line-height-h1);
}
.page-header {
border-bottom: 3px solid var(--global--color-border);
padding-bottom: calc(2 * var(--global--spacing-vertical));
}
.archive,
.search,
.blog {
.content-area {
.format-aside,
.format-status,
.format-link {
.entry-content {
font-size: var(--global--font-size-lg);
}
}
}
.format-image,
.format-gallery,
.format-video {
.entry-content {
margin-top: calc(2 * var(--global--spacing-vertical));
}
}
.entry-footer {
.cat-links,
.tags-links {
display: block;
}
}
&.logged-in {
.entry-footer {
.posted-on {
margin-right: calc(0.5 * var(--global--spacing-unit));
}
}
}
}
.archive-description {
margin-top: var(--global--spacing-vertical);
font-size: var(--global--font-size-xl);
line-height: var(--global--line-height-heading);
}

Some files were not shown because too many files have changed in this diff Show More