<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>[49478] trunk/src/wp-content/themes/twentytwentyone: Bundled Themes: Sync Twenty Twenty-One with the latest changes from GitHub.</title>
</head>
<body>
<style type="text/css"><!--
#msg dl.meta { border: 1px #006 solid; background: #369; padding: 6px; color: #fff; }
#msg dl.meta dt { float: left; width: 6em; font-weight: bold; }
#msg dt:after { content:':';}
#msg dl, #msg dt, #msg ul, #msg li, #header, #footer, #logmsg { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; }
#msg dl a { font-weight: bold}
#msg dl a:link { color:#fc3; }
#msg dl a:active { color:#ff0; }
#msg dl a:visited { color:#cc6; }
h3 { font-family: verdana,arial,helvetica,sans-serif; font-size: 10pt; font-weight: bold; }
#msg pre { white-space: pre-line; overflow: auto; background: #ffc; border: 1px #fa0 solid; padding: 6px; }
#logmsg { background: #ffc; border: 1px #fa0 solid; padding: 1em 1em 0 1em; }
#logmsg p, #logmsg pre, #logmsg blockquote { margin: 0 0 1em 0; }
#logmsg p, #logmsg li, #logmsg dt, #logmsg dd { line-height: 14pt; }
#logmsg h1, #logmsg h2, #logmsg h3, #logmsg h4, #logmsg h5, #logmsg h6 { margin: .5em 0; }
#logmsg h1:first-child, #logmsg h2:first-child, #logmsg h3:first-child, #logmsg h4:first-child, #logmsg h5:first-child, #logmsg h6:first-child { margin-top: 0; }
#logmsg ul, #logmsg ol { padding: 0; list-style-position: inside; margin: 0 0 0 1em; }
#logmsg ul { text-indent: -1em; padding-left: 1em; }#logmsg ol { text-indent: -1.5em; padding-left: 1.5em; }
#logmsg > ul, #logmsg > ol { margin: 0 0 1em 0; }
#logmsg pre { background: #eee; padding: 1em; }
#logmsg blockquote { border: 1px solid #fa0; border-left-width: 10px; padding: 1em 1em 0 1em; background: white;}
#logmsg dl { margin: 0; }
#logmsg dt { font-weight: bold; }
#logmsg dd { margin: 0; padding: 0 0 0.5em 0; }
#logmsg dd:before { content:'\00bb';}
#logmsg table { border-spacing: 0px; border-collapse: collapse; border-top: 4px solid #fa0; border-bottom: 1px solid #fa0; background: #fff; }
#logmsg table th { text-align: left; font-weight: normal; padding: 0.2em 0.5em; border-top: 1px dotted #fa0; }
#logmsg table td { text-align: right; border-top: 1px dotted #fa0; padding: 0.2em 0.5em; }
#logmsg table thead th { text-align: center; border-bottom: 1px solid #fa0; }
#logmsg table th.Corner { text-align: left; }
#logmsg hr { border: none 0; border-top: 2px dashed #fa0; height: 1px; }
#header, #footer { color: #fff; background: #636; border: 1px #300 solid; padding: 6px; }
#patch { width: 100%; }
#patch h4 {font-family: verdana,arial,helvetica,sans-serif;font-size:10pt;padding:8px;background:#369;color:#fff;margin:0;}
#patch .propset h4, #patch .binary h4 {margin:0;}
#patch pre {padding:0;line-height:1.2em;margin:0;}
#patch .diff {width:100%;background:#eee;padding: 0 0 10px 0;overflow:auto;}
#patch .propset .diff, #patch .binary .diff {padding:10px 0;}
#patch span {display:block;padding:0 10px;}
#patch .modfile, #patch .addfile, #patch .delfile, #patch .propset, #patch .binary, #patch .copfile {border:1px solid #ccc;margin:10px 0;}
#patch ins {background:#dfd;text-decoration:none;display:block;padding:0 10px;}
#patch del {background:#fdd;text-decoration:none;display:block;padding:0 10px;}
#patch .lines, .info {color:#888;background:#fff;}
--></style>
<div id="msg">
<dl class="meta" style="font-size: 105%">
<dt style="float: left; width: 6em; font-weight: bold">Revision</dt> <dd><a style="font-weight: bold" href="https://core.trac.wordpress.org/changeset/49478">49478</a><script type="application/ld+json">{"@context":"http://schema.org","@type":"EmailMessage","description":"Review this Commit","action":{"@type":"ViewAction","url":"https://core.trac.wordpress.org/changeset/49478","name":"Review Commit"}}</script></dd>
<dt style="float: left; width: 6em; font-weight: bold">Author</dt> <dd>desrosj</dd>
<dt style="float: left; width: 6em; font-weight: bold">Date</dt> <dd>2020-11-02 19:43:07 +0000 (Mon, 02 Nov 2020)</dd>
</dl>
<pre style='padding-left: 1em; margin: 2em 0; border-left: 2px solid #ccc; line-height: 1.25; font-size: 105%; font-family: sans-serif'>Bundled Themes: Sync Twenty Twenty-One with the latest changes from GitHub.
For a full list of changes since <a href="https://core.trac.wordpress.org/changeset/49330">[49330]</a>, see https://github.com/WordPress/twentytwentyone/compare/5759e96...e7d5991.
Props poena, luminuu, ryelle, kjellr, aristath, justinahinon, felipeelia, joostdevalk.
See <a href="https://core.trac.wordpress.org/ticket/51526">#51526</a>.</pre>
<h3>Modified Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetscssieeditorcss">trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetscssiecss">trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetscssstyleeditorcss">trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesDaffodilsjpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/Daffodils.jpg</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesReadingjpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/Reading.jpg</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesintheboisdeboulognejpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/in-the-bois-de-boulogne.jpg</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesplayinginthesandjpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/playing-in-the-sand.jpg</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesrosestremiereshollyhocks1884jpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks-1884.jpg</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesselfportrait1885jpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/self-portrait-1885.jpg</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesthegardenatbougival1884jpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/the-garden-at-bougival-1884.jpg</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesvillawithorangetreesnicejpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/villa-with-orange-trees-nice.jpg</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesyoungwomaninmauvejpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/young-woman-in-mauve.jpg</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsjscustomizepreviewjs">trunk/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsjsprimarynavigationjs">trunk/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneclassesclasstwentytwentyonecustomcolorsphp">trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyonefooterphp">trunk/src/wp-content/themes/twentytwentyone/footer.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyonefunctionsphp">trunk/src/wp-content/themes/twentytwentyone/functions.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneincblockpatternsphp">trunk/src/wp-content/themes/twentytwentyone/inc/block-patterns.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneincstartercontentphp">trunk/src/wp-content/themes/twentytwentyone/inc/starter-content.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneinctemplatefunctionsphp">trunk/src/wp-content/themes/twentytwentyone/inc/template-functions.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyonepackagejson">trunk/src/wp-content/themes/twentytwentyone/package.json</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyonestylertlcss">trunk/src/wp-content/themes/twentytwentyone/style-rtl.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyonestylecss">trunk/src/wp-content/themes/twentytwentyone/style.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyonetemplatepartsheadersiteheaderphp">trunk/src/wp-content/themes/twentytwentyone/template-parts/header/site-header.php</a></li>
</ul>
<h3>Added Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetscssstyledarkmodecss">trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsjscustomizejs">trunk/src/wp-content/themes/twentytwentyone/assets/js/customize.js</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsjsdarkmodetogglerjs">trunk/src/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsjseditordarkmodesupportjs">trunk/src/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneclassesclasstwentytwentyonedarkmodephp">trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php</a></li>
<li><a href="#trunksrcwpcontentthemestwentytwentyonetemplatepartsheadersitenavphp">trunk/src/wp-content/themes/twentytwentyone/template-parts/header/site-nav.php</a></li>
</ul>
<h3>Removed Paths</h3>
<ul>
<li><a href="#trunksrcwpcontentthemestwentytwentyoneassetsimagesrosestremiereshollyhocksjpg">trunk/src/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks.jpg</a></li>
</ul>
</div>
<div id="patch">
<h3>Diff</h3>
<a id="trunksrcwpcontentthemestwentytwentyoneassetscssieeditorcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/css/ie-editor.css 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -27,6 +27,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Block: Pull quote */
</span><span class="cx" style="display: block; padding: 0 10px"> /* Block: Table */
</span><span class="cx" style="display: block; padding: 0 10px"> /* Widgets */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Admin-bar height */
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -86,17 +87,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> blockquote {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 0;
</del><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: relative;
+ margin: 30px 0 30px 25px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote > * {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+blockquote > *:first-child {
+ margin-top: 0;
+}
+
+blockquote > *:last-child {
+ margin-bottom: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> blockquote p {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- font-size: 1.5rem;
</del><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: normal;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 1.3;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-size: 1.25rem;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 1.7;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> blockquote cite {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-weight: normal;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1rem;
</span><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: normal;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -103,24 +122,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> blockquote footer {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-weight: normal;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1rem;
</span><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: normal;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-blockquote > * {
- margin-top: 20px;
- margin-bottom: 20px;
-}
-
-blockquote > *:first-child {
- margin-top: 0;
-}
-
-blockquote > *:last-child {
- margin-bottom: 0;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> blockquote.alignleft, blockquote.alignright {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -157,6 +164,45 @@
</span><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: normal;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote strong {
+ font-weight: normal;
+}
+
+blockquote:before {
+ content: "\201C";
+ font-size: 1.25rem;
+ line-height: 1.7;
+ position: absolute;
+ left: -12px;
+}
+
+blockquote .wp-block-quote__citation {
+ color: #28303d;
+ font-size: 1rem;
+ font-style: normal;
+}
+
+blockquote cite {
+ color: #28303d;
+ font-size: 1rem;
+ font-style: normal;
+}
+
+blockquote footer {
+ color: #28303d;
+ font-size: 1rem;
+ font-style: normal;
+}
+
+@media only screen and (max-width: 481px) {
+ blockquote {
+ padding-left: 13px;
+ }
+ blockquote:before {
+ left: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> img {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> height: auto;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -256,10 +302,28 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .site a:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline: 2px solid #28303d;
- text-decoration: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Only visible in Windows High Contrast mode */
+ outline: 2px solid transparent;
+ background: rgba(255, 255, 255, 0.9);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .site a:focus {
+ color: #d1e4dd;
+}
+
+.has-background-dark .site a:focus .meta-nav {
+ color: #d1e4dd;
+}
+
+.has-background-white .site a:focus {
+ background: rgba(0, 0, 0, 0.9);
+ color: #fff;
+}
+
+.has-background-white .site a:focus .meta-nav {
+ color: #fff;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .site a:focus.skip-link {
</span><span class="cx" style="display: block; padding: 0 10px"> /* Only visible in Windows High Contrast mode */
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px solid transparent;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -266,6 +330,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -2px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site a:focus.skip-link:focus {
+ color: #21759b;
+ background-color: #f1f1f1;
+}
+
+.site a:focus img {
+ outline: 2px dotted #28303d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color) .has-link-color a {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -304,10 +377,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button__link:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .wp-block-button__link:focus {
+ color: #39414d;
+}
+
+.wp-block-button__link:focus:not(.has-background) {
+ color: #39414d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button__link:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: rgba(255, 255, 255, 0.5);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: rgba(255, 255, 255, 0.5);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -339,10 +421,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 15px 30px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:visited {
- color: #39414d;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button.is-style-outline .wp-block-button__link:active {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> color: #d1e4dd;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -434,6 +512,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-cover:not(.alignwide):not(.alignfull),
+.wp-block-cover-image:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover__inner-container,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover-image-text,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover-text,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -585,6 +668,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border: 3px solid #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-columns:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block-column {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: inherit;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -647,37 +734,37 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-align="full"] p:not(.has-background) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-align="full"] .wp-block-columns p:not(.has-background) {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-align="full"] h1:not(.has-background) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-align="full"] .wp-block-columns h1:not(.has-background) {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-align="full"] h2:not(.has-background) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-align="full"] .wp-block-columns h2:not(.has-background) {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-align="full"] h3:not(.has-background) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-align="full"] .wp-block-columns h3:not(.has-background) {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-align="full"] h4:not(.has-background) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-align="full"] .wp-block-columns h4:not(.has-background) {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-align="full"] h5:not(.has-background) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-align="full"] .wp-block-columns h5:not(.has-background) {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-align="full"] h6:not(.has-background) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-align="full"] .wp-block-columns h6:not(.has-background) {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -724,10 +811,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .wp-block-file .wp-block-file__button:focus {
+ color: #39414d;
+}
+
+.wp-block-file .wp-block-file__button:focus:not(.has-background) {
+ color: #39414d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: rgba(255, 255, 255, 0.5);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: rgba(255, 255, 255, 0.5);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -743,6 +839,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-gallery figcaption a {
+ color: #fff;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-group {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -764,7 +864,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 30px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-group .wp-block-group__inner-container *:last-child {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align="full"] {
+ max-width: calc(100% + 60px);
+ width: calc(100% + 60px);
+ margin-left: -30px;
+}
+
+.wp-block-group .wp-block-group__inner-container > *:last-child {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1242,7 +1348,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-comments {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-left: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-posts {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1262,6 +1368,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-latest-posts.is-grid {
+ word-wrap: break-word;
+ word-break: break-word;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-posts.is-grid > li {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 30px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1481,11 +1592,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: bold;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-media-text .block-editor-inner-blocks {
- padding-right: 25px;
- padding-left: 25px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-media-text .wp-block-media-text__content {
+ padding: 25px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-media-text .wp-block-media-text__content [data-block]:first-child {
+ margin-top: 0;
+}
+
+.wp-block-media-text .wp-block-media-text__content [data-block]:last-child {
+ margin-bottom: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-media-text.is-style-twentytwentyone-border {
</span><span class="cx" style="display: block; padding: 0 10px"> border: 3px solid #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2019,10 +2137,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .wp-block-search .wp-block-search__button:focus {
+ color: #39414d;
+}
+
+.wp-block-search .wp-block-search__button:focus:not(.has-background) {
+ color: #39414d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: rgba(255, 255, 255, 0.5);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: rgba(255, 255, 255, 0.5);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2070,8 +2197,43 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-right-color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-separator:not(.is-style-dots),
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-separator:not(.is-style-dots) {
+ max-width: calc(100vw - 30px);
+}
+
+@media only screen and (min-width: 482px){
+ .wp-block-separator:not(.is-style-dots){
+ max-width: min(calc(100vw - 100px), 610px);
+ }
+}
+
+@media only screen and (min-width: 822px){
+ .wp-block-separator:not(.is-style-dots){
+ max-width: min(calc(100vw - 200px), 610px);
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> hr:not(.is-style-dots) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ max-width: calc(100vw - 30px);
+}
+
+@media only screen and (min-width: 482px){
+ hr:not(.is-style-dots){
+ max-width: min(calc(100vw - 100px), 610px);
+ }
+}
+
+@media only screen and (min-width: 822px){
+ hr:not(.is-style-dots){
+ max-width: min(calc(100vw - 200px), 610px);
+ }
+}
+
+[data-align="full"] > .wp-block-separator,
+[data-align="wide"] > .wp-block-separator, [data-align="full"] >
+hr,
+[data-align="wide"] >
+hr {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2122,8 +2284,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-social-links li.wp-block-social-link:first-child {
- margin-top: auto;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-social-links [data-block] {
+ margin-top: 0;
+ margin-bottom: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-social-links.is-style-twentytwentyone-social-icons-color button {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2796,4 +2959,4 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .has-red-to-purple-gradient-background {
</span><span class="cx" style="display: block; padding: 0 10px"> background: linear-gradient(160deg, #e4d1d1, #d1d1e4);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/*# sourceMappingURL=ie-editor.css.map */
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*# sourceMappingURL=ie-editor.css.map */
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetscssiecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/css/ie.css 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -118,6 +118,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Block: Pull quote */
</span><span class="cx" style="display: block; padding: 0 10px"> /* Block: Table */
</span><span class="cx" style="display: block; padding: 0 10px"> /* Widgets */
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Admin-bar height */
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1206,17 +1207,35 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */
</span><span class="cx" style="display: block; padding: 0 10px"> blockquote {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 0;
</del><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: relative;
+ margin: 30px 0 30px 25px;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote > * {
+ margin-top: 20px;
+ margin-bottom: 20px;
+}
+
+blockquote > *:first-child {
+ margin-top: 0;
+}
+
+blockquote > *:last-child {
+ margin-bottom: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> blockquote p {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- font-size: 1.5rem;
</del><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: normal;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- line-height: 1.3;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
+ font-size: 1.25rem;
+ font-style: normal;
+ font-weight: 700;
+ line-height: 1.7;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> blockquote cite {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-weight: normal;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1rem;
</span><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: normal;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1223,24 +1242,12 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> blockquote footer {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ font-weight: normal;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1rem;
</span><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: normal;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-blockquote > * {
- margin-top: 20px;
- margin-bottom: 20px;
-}
-
-blockquote > *:first-child {
- margin-top: 0;
-}
-
-blockquote > *:last-child {
- margin-bottom: 0;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> blockquote.alignleft, blockquote.alignright {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1277,6 +1284,45 @@
</span><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: normal;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote strong {
+ font-weight: normal;
+}
+
+blockquote:before {
+ content: "\201C";
+ font-size: 1.25rem;
+ line-height: 1.7;
+ position: absolute;
+ left: -12px;
+}
+
+blockquote .wp-block-quote__citation {
+ color: #28303d;
+ font-size: 1rem;
+ font-style: normal;
+}
+
+blockquote cite {
+ color: #28303d;
+ font-size: 1rem;
+ font-style: normal;
+}
+
+blockquote footer {
+ color: #28303d;
+ font-size: 1rem;
+ font-style: normal;
+}
+
+@media only screen and (max-width: 481px) {
+ blockquote {
+ padding-left: 13px;
+ }
+ blockquote:before {
+ left: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> input[type="text"] {
</span><span class="cx" style="display: block; padding: 0 10px"> border: 3px solid #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> border-radius: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1959,10 +2005,28 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .site a:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline: 2px solid #28303d;
- text-decoration: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Only visible in Windows High Contrast mode */
+ outline: 2px solid transparent;
+ background: rgba(255, 255, 255, 0.9);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .site a:focus {
+ color: #d1e4dd;
+}
+
+.has-background-dark .site a:focus .meta-nav {
+ color: #d1e4dd;
+}
+
+.has-background-white .site a:focus {
+ background: rgba(0, 0, 0, 0.9);
+ color: #fff;
+}
+
+.has-background-white .site a:focus .meta-nav {
+ color: #fff;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .site a:focus.skip-link {
</span><span class="cx" style="display: block; padding: 0 10px"> /* Only visible in Windows High Contrast mode */
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px solid transparent;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1969,6 +2033,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -2px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site a:focus.skip-link:focus {
+ color: #21759b;
+ background-color: #f1f1f1;
+}
+
+.site a:focus img {
+ outline: 2px dotted #28303d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color) .has-link-color a {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2112,10 +2185,55 @@
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="reset"]:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__button:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button .wp-block-button__link:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .site .button:focus {
+ color: #39414d;
+}
+
+.has-background-dark
+input[type="submit"]:focus {
+ color: #39414d;
+}
+
+.has-background-dark
+input[type="reset"]:focus {
+ color: #39414d;
+}
+
+.has-background-dark
+.wp-block-search__button:focus {
+ color: #39414d;
+}
+
+.has-background-dark
+.wp-block-button .wp-block-button__link:focus {
+ color: #39414d;
+}
+
+.site .button:focus:not(.has-background) {
+ color: #39414d;
+}
+
+input[type="submit"]:focus:not(.has-background) {
+ color: #39414d;
+}
+
+input[type="reset"]:focus:not(.has-background) {
+ color: #39414d;
+}
+
+.wp-block-search__button:focus:not(.has-background) {
+ color: #39414d;
+}
+
+.wp-block-button .wp-block-button__link:focus:not(.has-background) {
+ color: #39414d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .site .button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: rgba(255, 255, 255, 0.5);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: rgba(255, 255, 255, 0.5);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2243,10 +2361,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):visited {
- color: #39414d;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button.is-style-outline .wp-block-button__link.has-background {
</span><span class="cx" style="display: block; padding: 0 10px"> border: 3px solid currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2326,6 +2440,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-columns:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block-column > * {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 20px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2360,9 +2478,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@media only screen and (min-width: 652px) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (min-width: 822px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block-column:not(:last-child) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Resetting margins to match _block-container.scss */
</del><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2464,7 +2581,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: #000;
</ins><span class="cx" style="display: block; padding: 0 10px"> min-height: 450px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: inherit;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2474,7 +2591,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover-image {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: #fff;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: #000;
</ins><span class="cx" style="display: block; padding: 0 10px"> min-height: 450px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: inherit;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2483,6 +2600,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Block Styles */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-cover:not(.alignwide):not(.alignfull),
+.wp-block-cover-image:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover__inner-container {
</span><span class="cx" style="display: block; padding: 0 10px"> color: currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 30px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2740,8 +2862,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:visited {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ color: #d1e4dd;
+}
+
+.wp-block-file a.wp-block-file__button:visited:hover {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #39414d;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- opacity: inherit;
</del><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2775,10 +2900,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .wp-block-file .wp-block-file__button:focus {
+ color: #39414d;
+}
+
+.wp-block-file .wp-block-file__button:focus:not(.has-background) {
+ color: #39414d;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: rgba(255, 255, 255, 0.5);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: rgba(255, 255, 255, 0.5);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2809,6 +2943,31 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1rem;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-gallery .blocks-gallery-image figcaption a {
+ color: #fff;
+}
+
+.wp-block-gallery .blocks-gallery-item figcaption a {
+ color: #fff;
+}
+
+.wp-block-gallery .blocks-gallery-image figcaption a:focus {
+ background-color: transparent;
+ outline: 2px solid #28303d;
+ text-decoration: none;
+}
+
+.wp-block-gallery .blocks-gallery-item figcaption a:focus {
+ background-color: transparent;
+ outline: 2px solid #28303d;
+ text-decoration: none;
+}
+
+.wp-block-gallery .blocks-gallery-image a:focus img,
+.wp-block-gallery .blocks-gallery-item a:focus img {
+ outline-offset: 2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-group {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2861,6 +3020,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 30px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-group.has-background .wp-block-group__inner-container > .alignfull {
+ max-width: calc(100% + 60px);
+ width: calc(100% + 60px);
+ margin-left: -30px;
+}
+
+.wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
+ max-width: calc(100% + 60px);
+ width: calc(100% + 60px);
+ margin-left: -30px;
+}
+
+.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull {
+ max-width: calc(100% + 60px);
+ width: calc(100% + 60px);
+ margin-left: -30px;
+}
+
+.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
+ max-width: calc(100% + 60px);
+ width: calc(100% + 60px);
+ margin-left: -30px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> h1 {
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3128,6 +3311,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 25px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-image a:focus img {
+ outline-offset: 2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry-content > *[class="wp-block-image"],
</span><span class="cx" style="display: block; padding: 0 10px"> .entry-content [class*="inner-container"] > *[class="wp-block-image"] {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3157,8 +3344,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 20px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (min-width: 482px) {
+ .entry-content > .wp-block-image > .alignleft,
+ .entry-content > .wp-block-image > .alignright {
+ max-width: 50%;
+ }
+}
+
+@media only screen and (max-width: 481px) {
+ .entry-content > .wp-block-image > .alignleft,
+ .entry-content > .wp-block-image > .alignright {
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-comments {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-left: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-comments .wp-block-latest-comments__comment {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3209,6 +3411,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-latest-posts.is-grid {
+ word-wrap: break-word;
+ word-break: break-word;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-posts.is-grid > li {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 30px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3383,6 +3590,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.gallery-item a:focus img {
+ outline-offset: -2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .gallery-columns-2 .gallery-item {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 50%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3419,6 +3630,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+figure.wp-caption a:focus img {
+ outline-offset: 2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> ul {
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> margin: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3468,6 +3683,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-media-text a:focus img {
+ outline-offset: -1px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-media-text .wp-block-media-text__content {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: 25px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3820,64 +4039,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-quote {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- position: relative;
- margin: 30px 0 30px 25px;
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Block Options
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-quote > * {
- margin-top: 20px;
- margin-bottom: 20px;
-}
-
-.wp-block-quote > *:first-child {
- margin-top: 0;
-}
-
-.wp-block-quote > *:last-child {
- margin-bottom: 0;
-}
-
-.wp-block-quote p {
- font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
- font-size: 1.25rem;
- font-style: normal;
- font-weight: 700;
- line-height: 1.7;
-}
-
-.wp-block-quote strong {
- font-weight: normal;
-}
-
-.wp-block-quote:before {
- content: "\201C";
- font-size: 1.25rem;
- line-height: 1.7;
- position: absolute;
- left: -12px;
-}
-
-.wp-block-quote .wp-block-quote__citation {
- color: #28303d;
- font-size: 1rem;
- font-style: normal;
-}
-
-.wp-block-quote cite {
- color: #28303d;
- font-size: 1rem;
- font-style: normal;
-}
-
-.wp-block-quote footer {
- color: #28303d;
- font-size: 1rem;
- font-style: normal;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
</span><span class="cx" style="display: block; padding: 0 10px"> [class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
</span><span class="cx" style="display: block; padding: 0 10px"> [style*="background-color"] .wp-block-quote .wp-block-quote__citation,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4051,12 +4217,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (max-width: 481px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block-quote {
- padding-left: 13px;
- }
- .wp-block-quote:before {
- left: 0;
- }
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-quote.has-text-align-right {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 13px;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4938,9 +5098,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> top: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .admin-bar .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
- top: 46px;
- }
</del><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5924,10 +6081,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transform: translateY(0) translateX(100%);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: 32px;
+ }
+ @media only screen and (max-width: 782px){
+ .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container{
</ins><span class="cx" style="display: block; padding: 0 10px"> top: 46px;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .admin-bar .primary-navigation > .primary-menu-container {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: calc(100vh - 32px);
+ }
+ @media only screen and (max-width: 782px){
+ .admin-bar .primary-navigation > .primary-menu-container{
</ins><span class="cx" style="display: block; padding: 0 10px"> height: calc(100vh - 46px);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation > .primary-menu-container:focus {
</span><span class="cx" style="display: block; padding: 0 10px"> border: 2px solid #28303d;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5955,10 +6122,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.admin-bar .primary-navigation {
- top: 46px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 482px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6110,6 +6273,42 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
</span><span class="cx" style="display: block; padding: 0 10px"> background: #d1e4dd;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left {
+ /* rtl:ignore */
+ left: 0;
+ /* rtl:ignore */
+ right: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before {
+ /* rtl:ignore */
+ left: 25px;
+ /* rtl:ignore */
+ right: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after {
+ /* rtl:ignore */
+ left: 25px;
+ /* rtl:ignore */
+ right: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right {
+ /* rtl:ignore */
+ right: 0;
+ /* rtl:ignore */
+ left: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before {
+ /* rtl:ignore */
+ left: auto;
+ /* rtl:ignore */
+ right: 25px;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after {
+ /* rtl:ignore */
+ left: auto;
+ /* rtl:ignore */
+ right: 25px;
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation .primary-menu > .menu-item:hover > a {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6272,8 +6471,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .footer-navigation {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: 30px;
- margin-bottom: 60px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 60px;
+ margin-bottom: 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1rem;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6365,6 +6564,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> flex-direction: column;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.navigation .nav-links .dots {
+ text-align: center;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 592px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .navigation .nav-links {
</span><span class="cx" style="display: block; padding: 0 10px"> display: flex;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6497,11 +6700,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.pagination .nav-links {
+ margin-top: -30px;
+}
+
+.comments-pagination .nav-links {
+ margin-top: -30px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .pagination .nav-links > * {
</span><span class="cx" style="display: block; padding: 0 10px"> color: #28303d;
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.5rem;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: normal;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6511,6 +6723,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: 1.5rem;
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: normal;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: 30px;
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: 13px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -6551,7 +6764,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@media only screen and (max-width: 591px) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (max-width: 821px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .pagination .nav-links,
</span><span class="cx" style="display: block; padding: 0 10px"> .comments-pagination .nav-links {
</span><span class="cx" style="display: block; padding: 0 10px"> display: flex;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7016,4 +7229,4 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .is-IE .post-thumbnail .wp-post-image {
</span><span class="cx" style="display: block; padding: 0 10px"> min-width: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/*# sourceMappingURL=ie.css.map */
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*# sourceMappingURL=ie.css.map */
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetscssstyledarkmodecss"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css (rev 0)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/css/style-dark-mode.css 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,95 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* OS dark theme preference */
+html.is-dark-mode {
+ --global--color-background: var(--global--color-dark-gray);
+ --global--color-primary: var(--global--color-light-gray);
+ --global--color-secondary: var(--global--color-light-gray);
+ --button--color-text: var(--global--color-background);
+ --button--color-text-hover: var(--global--color-secondary);
+ --button--color-text-active: var(--global--color-secondary);
+ --button--color-background: var(--global--color-secondary);
+ --button--color-background-active: var(--global--color-background);
+}
+
+html.is-dark-mode body {
+ background-color: var(--global--color-background);
+}
+
+html.is-dark-mode .site a:focus {
+ background: #000;
+}
+
+html.is-dark-mode img {
+ filter: brightness(0.85) contrast(1.1);
+}
+
+#dark-mode-toggler {
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ font-size: var(--global--font-size-xs);
+ padding: 0.5em;
+ min-height: 44px;
+ min-width: max-content;
+ border: 2px solid currentColor;
+ box-shadow: none;
+ background: var(--button--color-text);
+ color: var(--button--color-background);
+ z-index: 9998;
+}
+
+.wp-admin #dark-mode-toggler {
+ z-index: 99999;
+ /* Necessary for the editor. */
+}
+
+#dark-mode-toggler.fixed-bottom {
+ position: fixed;
+ bottom: 5px;
+ right: 5px;
+}
+
+#dark-mode-toggler.relative {
+ position: absolute;
+ height: 44px;
+ top: calc(2.4 * var(--global--spacing-vertical) - 44px);
+ right: calc(50vw - var(--responsive--alignwide-width) / 2 - 0.5em);
+}
+
+.admin-bar #dark-mode-toggler.relative {
+ top: calc(2.4 * var(--global--spacing-vertical) - 44px + 32px);
+}
+
+@media only screen and (max-width: 782px) {
+ .admin-bar #dark-mode-toggler.relative {
+ top: calc(2.4 * var(--global--spacing-vertical) - 44px + 46px);
+ }
+}
+
+@media only screen and (max-width: 481px) {
+ .admin-bar #dark-mode-toggler.relative {
+ top: calc(2.4 * var(--global--spacing-vertical) - 44px + 26px);
+ }
+}
+
+@media only screen and (max-width: 481px) {
+ body:not(.primary-navigation-open) #dark-mode-toggler.relative ~ nav {
+ top: calc(44px + 44px);
+ }
+}
+
+.primary-navigation-open #dark-mode-toggler {
+ display: none;
+}
+
+#dark-mode-toggler:hover, #dark-mode-toggler:focus {
+ color: var(--button--color-background-active);
+ border: 2px solid var(--button--color-text-active);
+ background-color: var(--button--color-text-active);
+}
+
+.is-IE #dark-mode-toggler {
+ display: none;
+}
+
+/*# sourceMappingURL=style-dark-mode.css.map */
</ins><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetscssstyleeditorcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/css/style-editor.css 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -197,8 +197,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> --widget--line-height-title: 1.4;
</span><span class="cx" style="display: block; padding: 0 10px"> --widget--font-weight-title: 700;
</span><span class="cx" style="display: block; padding: 0 10px"> --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Admin-bar height */
+ --global--admin-bar--height: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.admin-bar {
+ --global--admin-bar--height: 32px;
+}
+
+@media only screen and (max-width: 782px) {
+ .admin-bar {
+ --global--admin-bar--height: 46px;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 652px) {
</span><span class="cx" style="display: block; padding: 0 10px"> :root {
</span><span class="cx" style="display: block; padding: 0 10px"> --global--font-size-xl: 2.5rem;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -268,23 +280,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> blockquote {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 0;
</del><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: relative;
+ margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-blockquote p {
- font-size: var(--heading--font-size-h4);
- letter-spacing: var(--heading--letter-spacing-h4);
- line-height: var(--heading--line-height-h4);
-}
-
-blockquote cite,
-blockquote footer {
- color: var(--global--color-primary);
- font-size: var(--global--font-size-xs);
- letter-spacing: var(--global--letter-spacing);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> blockquote > * {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: var(--global--spacing-unit);
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: var(--global--spacing-unit);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -298,6 +298,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote p {
+ letter-spacing: var(--heading--letter-spacing-h4);
+ font-family: var(--quote--font-family);
+ font-size: var(--quote--font-size);
+ font-style: var(--quote--font-style);
+ font-weight: var(--quote--font-weight-strong);
+ line-height: var(--quote--line-height);
+}
+
+blockquote cite,
+blockquote footer {
+ font-weight: normal;
+ color: var(--global--color-primary);
+ font-size: var(--global--font-size-xs);
+ letter-spacing: var(--global--letter-spacing);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> blockquote.alignleft, blockquote.alignright {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -315,6 +332,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: var(--global--letter-spacing);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote strong {
+ font-weight: var(--quote--font-weight);
+}
+
+blockquote:before {
+ content: "\201C";
+ font-size: var(--quote--font-size);
+ line-height: var(--quote--line-height);
+ position: absolute;
+ left: calc(-0.5 * var(--global--spacing-horizontal));
+}
+
+blockquote .wp-block-quote__citation,
+blockquote cite,
+blockquote footer {
+ color: var(--global--color-primary);
+ font-size: var(--global--font-size-xs);
+ font-style: var(--quote--font-style-cite);
+}
+
+@media only screen and (max-width: 481px) {
+ blockquote {
+ padding-left: calc(0.5 * var(--global--spacing-horizontal));
+ }
+ blockquote:before {
+ left: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> img {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> height: auto;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -400,10 +446,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .site a:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
- text-decoration: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Only visible in Windows High Contrast mode */
+ outline: 2px solid transparent;
+ background: rgba(255, 255, 255, 0.9);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .site a:focus,
+.has-background-dark .site a:focus .meta-nav {
+ color: var(--wp--style--color--link, var(--global--color-background));
+}
+
+.has-background-white .site a:focus {
+ background: rgba(0, 0, 0, 0.9);
+ color: var(--wp--style--color--link, var(--global--color-white));
+}
+
+.has-background-white .site a:focus .meta-nav {
+ color: var(--wp--style--color--link, var(--global--color-white));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .site a:focus.skip-link {
</span><span class="cx" style="display: block; padding: 0 10px"> /* Only visible in Windows High Contrast mode */
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px solid transparent;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -410,6 +471,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -2px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site a:focus.skip-link:focus {
+ color: #21759b;
+ background-color: #f1f1f1;
+}
+
+.site a:focus img {
+ outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color) .has-link-color a,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color).has-link-color a {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--wp--style--color--link, var(--global--color-primary));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -445,10 +515,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button__link:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .wp-block-button__link:focus {
+ color: var(--button--color-background);
+}
+
+.wp-block-button__link:focus:not(.has-background) {
+ color: var(--button--color-text-hover);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button__link:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white-50);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--global--color-white-50);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -480,10 +559,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: var(--button--padding-vertical) var(--button--padding-horizontal);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:visited {
- color: var(--button--color-background);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button.is-style-outline .wp-block-button__link:active, .wp-block-button.is-style-outline .wp-block-button__link:hover {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--button--color-background);
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--button--color-text);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -539,6 +614,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-cover:not(.alignwide):not(.alignfull),
+.wp-block-cover-image:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover__inner-container,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover-image-text,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover-text,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -613,6 +693,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border: calc(3 * var(--separator--height)) solid var(--global--color-border);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-columns:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block-column {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: inherit;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -646,13 +730,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block[data-align="full"] p:not(.has-background),
-.wp-block[data-align="full"] h1:not(.has-background),
-.wp-block[data-align="full"] h2:not(.has-background),
-.wp-block[data-align="full"] h3:not(.has-background),
-.wp-block[data-align="full"] h4:not(.has-background),
-.wp-block[data-align="full"] h5:not(.has-background),
-.wp-block[data-align="full"] h6:not(.has-background) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block[data-align="full"] .wp-block-columns p:not(.has-background),
+.wp-block[data-align="full"] .wp-block-columns h1:not(.has-background),
+.wp-block[data-align="full"] .wp-block-columns h2:not(.has-background),
+.wp-block[data-align="full"] .wp-block-columns h3:not(.has-background),
+.wp-block[data-align="full"] .wp-block-columns h4:not(.has-background),
+.wp-block[data-align="full"] .wp-block-columns h5:not(.has-background),
+.wp-block[data-align="full"] .wp-block-columns h6:not(.has-background) {
</ins><span class="cx" style="display: block; padding: 0 10px"> padding-left: var(--global--spacing-unit);
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: var(--global--spacing-unit);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -699,10 +783,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .wp-block-file .wp-block-file__button:focus {
+ color: var(--button--color-background);
+}
+
+.wp-block-file .wp-block-file__button:focus:not(.has-background) {
+ color: var(--button--color-text-hover);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white-50);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--global--color-white-50);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -718,6 +811,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-gallery figcaption a {
+ color: var(--global--color-white);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-group {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -739,7 +836,13 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: var(--global--spacing-vertical);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-group .wp-block-group__inner-container *:last-child {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > [data-align="full"] {
+ max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
+ width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
+ margin-left: calc(-1 * var(--global--spacing-vertical));
+}
+
+.wp-block-group .wp-block-group__inner-container > *:last-child {
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -890,7 +993,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-comments {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-left: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-posts {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -910,6 +1013,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-latest-posts.is-grid {
+ word-wrap: break-word;
+ word-break: break-word;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-posts.is-grid > li {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: var(--global--spacing-vertical);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1106,11 +1214,18 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: bold;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-media-text .block-editor-inner-blocks {
- padding-right: var(--global--spacing-horizontal);
- padding-left: var(--global--spacing-horizontal);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-media-text .wp-block-media-text__content {
+ padding: var(--global--spacing-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-media-text .wp-block-media-text__content [data-block]:first-child {
+ margin-top: 0;
+}
+
+.wp-block-media-text .wp-block-media-text__content [data-block]:last-child {
+ margin-bottom: 0;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-media-text.is-style-twentytwentyone-border {
</span><span class="cx" style="display: block; padding: 0 10px"> border: calc(3 * var(--separator--height)) solid var(--global--color-border);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1534,10 +1649,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .wp-block-search .wp-block-search__button:focus {
+ color: var(--button--color-background);
+}
+
+.wp-block-search .wp-block-search__button:focus:not(.has-background) {
+ color: var(--button--color-text-hover);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search .wp-block-search__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white-50);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--global--color-white-50);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1572,6 +1696,14 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-separator:not(.is-style-dots),
</span><span class="cx" style="display: block; padding: 0 10px"> hr:not(.is-style-dots) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ max-width: var(--responsive--aligndefault-width);
+}
+
+[data-align="full"] > .wp-block-separator,
+[data-align="wide"] > .wp-block-separator, [data-align="full"] >
+hr,
+[data-align="wide"] >
+hr {
</ins><span class="cx" style="display: block; padding: 0 10px"> max-width: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1616,8 +1748,9 @@
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-social-links li.wp-block-social-link:first-child {
- margin-top: auto;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-social-links [data-block] {
+ margin-top: 0;
+ margin-bottom: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-social-links.is-style-twentytwentyone-social-icons-color button {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2066,4 +2199,4 @@
</span><span class="cx" style="display: block; padding: 0 10px"> background: linear-gradient(160deg, var(--global--color-red), var(--global--color-purple));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/*# sourceMappingURL=style-editor.css.map */
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*# sourceMappingURL=style-editor.css.map */
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesDaffodilsjpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/images/Daffodils.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesReadingjpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/images/Reading.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesintheboisdeboulognejpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/images/in-the-bois-de-boulogne.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesplayinginthesandjpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/images/playing-in-the-sand.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesrosestremiereshollyhocks1884jpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks-1884.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesrosestremiereshollyhocksjpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Deleted: trunk/src/wp-content/themes/twentytwentyone/assets/images/roses-tremieres-hollyhocks.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesselfportrait1885jpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/images/self-portrait-1885.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesthegardenatbougival1884jpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/images/the-garden-at-bougival-1884.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesvillawithorangetreesnicejpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/images/villa-with-orange-trees-nice.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsimagesyoungwomaninmauvejpg"></a>
<div class="binary"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/images/young-woman-in-mauve.jpg</h4>
<pre class="diff"><span>
<span class="cx">(Binary files differ)
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsjscustomizepreviewjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/js/customize-preview.js 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1,47 +1,15 @@
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-( function( api ) {
- /**
- * Get luminance from a HEX color.
- *
- * @param {string} hex - The hex color.
- *
- * @return {number} - Returns the luminance, number between 0 and 255.
- */
- function twentytwentyoneGetHexLum( hex ) {
- var rgb = twentytwentyoneGetRgbFromHex( hex );
- return Math.round( ( 0.2126 * rgb.r ) + ( 0.7152 * rgb.g ) + ( 0.0722 * rgb.b ) );
- }
-
- /**
- * Get RGB from HEX.
- *
- * @param {string} hex - The hex color.
- *
- * @return {Object} - Returns an object {r, g, b}
- */
- function twentytwentyoneGetRgbFromHex( hex ) {
- var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i,
- result;
-
- // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF").
- hex = hex.replace( shorthandRegex, function( m, r, g, b ) {
- return r.toString() + r.toString() + g.toString() + g.toString() + b.toString() + b.toString();
- } );
-
- result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec( hex );
- return result ? {
- r: parseInt( result[1], 16 ),
- g: parseInt( result[2], 16 ),
- b: parseInt( result[3], 16 )
- } : null;
- }
-
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global twentytwentyoneGetHexLum, jQuery */
+( function() {
</ins><span class="cx" style="display: block; padding: 0 10px"> // Add listener for the "background_color" control.
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- api( 'background_color', function( value ) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ wp.customize( 'background_color', function( value ) {
</ins><span class="cx" style="display: block; padding: 0 10px"> value.bind( function( to ) {
</span><span class="cx" style="display: block; padding: 0 10px"> var lum = twentytwentyoneGetHexLum( to ),
</span><span class="cx" style="display: block; padding: 0 10px"> isDark = 127 > lum,
</span><span class="cx" style="display: block; padding: 0 10px"> textColor = ! isDark ? 'var(--global--color-dark-gray)' : 'var(--global--color-light-gray)',
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- tableColor = ! isDark ? 'var(--global--color-light-gray)' : 'var(--global--color-dark-gray)';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ tableColor = ! isDark ? 'var(--global--color-light-gray)' : 'var(--global--color-dark-gray)',
+ stylesheetID = 'twentytwentyone-customizer-inline-styles',
+ stylesheet,
+ styles;
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Modify the body class depending on whether this is a dark background or not.
</span><span class="cx" style="display: block; padding: 0 10px"> if ( isDark ) {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -48,20 +16,42 @@
</span><span class="cx" style="display: block; padding: 0 10px"> if ( ! document.body.classList.contains( 'has-background-dark' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> document.body.classList.add( 'has-background-dark' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( document.documentElement.classList.contains( 'is-dark-mode' ) ) {
+ document.documentElement.classList.remove( 'is-dark-mode' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> } else {
</span><span class="cx" style="display: block; padding: 0 10px"> document.body.classList.remove( 'has-background-dark' );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- document.documentElement.style.setProperty( '--global--color-primary', textColor );
- document.documentElement.style.setProperty( '--global--color-secondary', textColor );
- document.documentElement.style.setProperty( '--global--color-background', to );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Toggle the white background class.
+ if ( '#ffffff' === to ) {
+ document.body.classList.add( 'has-background-white' );
+ } else {
+ document.body.classList.remove( 'has-background-white' );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- document.documentElement.style.setProperty( '--button--color-background', textColor );
- document.documentElement.style.setProperty( '--button--color-text', to );
- document.documentElement.style.setProperty( '--button--color-text-hover', textColor );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ stylesheet = jQuery( '#' + stylesheetID );
+ styles = '';
+ // If the stylesheet doesn't exist, create it and append it to <head>.
+ if ( ! stylesheet.length ) {
+ jQuery( '#twenty-twenty-one-style-inline-css' ).after( '<style id="' + stylesheetID + '"></style>' );
+ stylesheet = jQuery( '#' + stylesheetID );
+ }
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- document.documentElement.style.setProperty( '--table--stripes-border-color', tableColor );
- document.documentElement.style.setProperty( '--table--stripes-background-color', tableColor );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ // Generate the styles.
+ styles += '--global--color-primary:' + textColor + ';';
+ styles += '--global--color-secondary:' + textColor + ';';
+ styles += '--global--color-background:' + to + ';';
+
+ styles += '--button--color-background:' + textColor + ';';
+ styles += '--button--color-text:' + to + ';';
+ styles += '--button--color-text-hover:' + textColor + ';';
+
+ styles += '--table--stripes-border-color:' + tableColor + ';';
+ styles += '--table--stripes-background-color:' + tableColor + ';';
+
+ // Add the styles.
+ stylesheet.html( ':root{' + styles + '}' );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> } );
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-}( wp.customize, _ ) );
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+}() );
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsjscustomizejs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-content/themes/twentytwentyone/assets/js/customize.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/js/customize.js (rev 0)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/js/customize.js 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,61 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global twentytwentyoneGetHexLum, backgroundColorNotice */
+
+( function() {
+ /**
+ * Add/remove the notice.
+ *
+ * @param {boolean} enable - Whether we want to enable or disable the notice.
+ *
+ * @return {void}
+ */
+ function twentytwentyoneBackgroundColorNotice( enable ) {
+ if ( enable ) {
+ wp.customize( 'background_color' ).notifications.add( 'backgroundColorNotice', new wp.customize.Notification( 'backgroundColorNotice', {
+ type: 'info',
+ message: backgroundColorNotice.message
+ } ) );
+ } else {
+ wp.customize( 'background_color' ).notifications.remove( 'backgroundColorNotice' );
+ }
+ }
+
+ // Wait until the customizer has finished loading.
+ wp.customize.bind( 'ready', function() {
+ var supportsDarkMode = ( 127 <= twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) && wp.customize( 'respect_user_color_preference' ).get() );
+
+ // Hide the "respect_user_color_preference" setting if the background-color is dark.
+ if ( 127 > twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() ) ) {
+ wp.customize.control( 'respect_user_color_preference' ).deactivate();
+ }
+
+ // Add notice on init if needed.
+ if ( wp.customize( 'respect_user_color_preference' ) ) {
+ twentytwentyoneBackgroundColorNotice( true );
+ }
+
+ // Handle changes to the background-color.
+ wp.customize( 'background_color', function( setting ) {
+ setting.bind( function( value ) {
+ if ( 127 > twentytwentyoneGetHexLum( value ) ) {
+ wp.customize.control( 'respect_user_color_preference' ).deactivate();
+ supportsDarkMode = false;
+ } else {
+ wp.customize.control( 'respect_user_color_preference' ).activate();
+ supportsDarkMode = wp.customize( 'respect_user_color_preference' ).get();
+ }
+ } );
+ } );
+
+ // Handle changes to the "respect_user_color_preference" setting.
+ wp.customize( 'respect_user_color_preference', function( setting ) {
+ setting.bind( function( value ) {
+ supportsDarkMode = value && 127 < twentytwentyoneGetHexLum( wp.customize( 'background_color' ).get() );
+ if ( ! supportsDarkMode ) {
+ twentytwentyoneBackgroundColorNotice( false );
+ } else {
+ twentytwentyoneBackgroundColorNotice( true );
+ }
+ } );
+ } );
+ } );
+}() );
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsjsdarkmodetogglerjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js (rev 0)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/js/dark-mode-toggler.js 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,42 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+function toggleDarkMode() { // jshint ignore:line
+ var toggler = document.getElementById( 'dark-mode-toggler' ),
+ html = document.querySelector( 'html' );
+
+ if ( 'false' === toggler.getAttribute( 'aria-pressed' ) ) {
+ toggler.setAttribute( 'aria-pressed', 'true' );
+ html.classList.add( 'is-dark-mode' );
+ window.localStorage.setItem( 'twentytwentyoneDarkMode', 'yes' );
+ } else {
+ toggler.setAttribute( 'aria-pressed', 'false' );
+ html.classList.remove( 'is-dark-mode' );
+ window.localStorage.setItem( 'twentytwentyoneDarkMode', 'no' );
+ }
+}
+
+function darkModeInitialLoad() {
+ var toggler = document.getElementById( 'dark-mode-toggler' ),
+ isDarkMode = window.matchMedia( '(prefers-color-scheme: dark)' ).matches,
+ html;
+
+ if ( 'yes' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
+ isDarkMode = true;
+ } else if ( 'no' === window.localStorage.getItem( 'twentytwentyoneDarkMode' ) ) {
+ isDarkMode = false;
+ }
+
+ if ( ! toggler ) {
+ return;
+ }
+ if ( isDarkMode ) {
+ toggler.setAttribute( 'aria-pressed', 'true' );
+ }
+
+ html = document.querySelector( 'html' );
+ if ( isDarkMode ) {
+ html.classList.add( 'is-dark-mode' );
+ } else {
+ html.classList.remove( 'is-dark-mode' );
+ }
+}
+
+darkModeInitialLoad();
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsjseditordarkmodesupportjs"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js (rev 0)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/js/editor-dark-mode-support.js 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,151 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/* global ajaxurl, XMLHttpRequest, ResizeObserver, darkModeInitialLoad, setTimeout */
+
+// Check the body class to determine if we want to add the toggler and handle dark-mode or not.
+if ( document.body.classList.contains( 'twentytwentyone-supports-dark-theme' ) ) {
+ // Add the toggler.
+ twentytwentyoneDarkModeEditorToggle();
+}
+
+/**
+ * Make an AJAX request, inject the toggle and call any functions that need to run.
+ *
+ * @since 1.0.0
+ *
+ * @return {void}
+ */
+function twentytwentyoneDarkModeEditorToggle() {
+ var request = new XMLHttpRequest();
+
+ // Define the request.
+ request.open( 'POST', ajaxurl, true );
+
+ // Add headers.
+ request.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded; charset=UTF-8' );
+
+ // On success call funtions that need to run.
+ request.onload = function() {
+ var selector = '.editor-styles-wrapper,.edit-post-visual-editor',
+ editor,
+ attemptDelay = 25,
+ attempt = 0,
+ maxAttempts = 8;
+
+ if ( 200 <= this.status && 400 > this.status ) {
+ editor = document.querySelector( selector );
+
+ if ( null === editor ) {
+ // Try again.
+ if ( attempt < maxAttempts ) {
+ setTimeout( function() {
+ twentytwentyoneDarkModeEditorToggle();
+ }, attemptDelay );
+
+ // Increment the attempts counter.
+ attempt++;
+
+ // Double the delay, give the server some time to breathe.
+ attemptDelay *= 2;
+ }
+ return;
+ }
+ // Inject the toggle.
+ document.querySelector( selector ).insertAdjacentHTML( 'afterbegin', this.response );
+
+ // Re-position the toggle.
+ twentytwentyoneDarkModeEditorTogglePosition();
+
+ // Add an observer so the toggle gets re-positioned when the sidebar opens/closes.
+ twentytwentyoneDarkModeEditorTogglePositionObserver();
+
+ // Run toggler script.
+ darkModeInitialLoad();
+
+ // Switch editor styles if needed.
+ twentytwentyoneDarkModeEditorToggleEditorStyles();
+ }
+ };
+
+ // Send the request.
+ request.send( 'action=tt1_dark_mode_editor_switch' );
+}
+
+/**
+ * Toggle the editor dark styles depending on the user's preferences in the toggler.
+ *
+ * @since 1.0.0
+ *
+ * @return {void}
+ */
+function twentytwentyoneDarkModeEditorToggleEditorStyles() {
+ var toggler = document.getElementById( 'dark-mode-toggler' );
+
+ if ( 'true' === toggler.getAttribute( 'aria-pressed' ) ) {
+ document.body.classList.add( 'is-dark-theme' );
+ }
+
+ toggler.addEventListener( 'click', function() {
+ if ( 'true' === toggler.getAttribute( 'aria-pressed' ) ) {
+ document.body.classList.add( 'is-dark-theme' );
+ } else {
+ document.body.classList.remove( 'is-dark-theme' );
+ }
+ } );
+}
+
+/**
+ * Reposition the toggle inside the editor wrapper.
+ *
+ * @since 1.0.0
+ *
+ * @return {void}
+ */
+function twentytwentyoneDarkModeEditorTogglePosition() {
+ var toggle = document.getElementById( 'dark-mode-toggler' ),
+ toggleWidth,
+ workSpace,
+ workSpaceWidth,
+ attempt = 0,
+ attemptDelay = 25,
+ maxAttempts = 10;
+
+ if ( null === toggle ) {
+ // Try again.
+ if ( attempt < maxAttempts ) {
+ setTimeout( function() {
+ twentytwentyoneDarkModeEditorTogglePosition();
+ }, attemptDelay );
+
+ attempt++;
+ attemptDelay *= 2;
+ }
+ return;
+ }
+
+ toggleWidth = window.getComputedStyle( document.getElementById( 'dark-mode-toggler' ) ).width;
+ workSpace = document.querySelector( '.editor-styles-wrapper,.edit-post-visual-editor' );
+ workSpaceWidth = window.getComputedStyle( workSpace ).width;
+
+ // Add styles to reposition toggle.
+ toggle.style.position = 'fixed';
+ toggle.style.bottom = '30px';
+ if ( document.body.classList.contains( 'is-fullscreen-mode' ) ) {
+ toggle.style.left = 'calc(' + workSpaceWidth + ' - ' + toggleWidth + ' - 5px)';
+ } else {
+ toggle.style.left = 'calc(' + workSpaceWidth + ' - ' + toggleWidth + ' + 155px)';
+ }
+}
+
+/**
+ * Add a ResizeObserver to the editor wrapper
+ * and trigger the toggle repositioning when needed.
+ *
+ * @since 1.0.0
+ *
+ * @return {void}
+ */
+function twentytwentyoneDarkModeEditorTogglePositionObserver() {
+ var observer = new ResizeObserver( function() {
+ twentytwentyoneDarkModeEditorTogglePosition();
+ } );
+ observer.observe( document.querySelector( '.editor-styles-wrapper,.edit-post-visual-editor' ) );
+}
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneassetsjsprimarynavigationjs"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/assets/js/primary-navigation.js 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -14,6 +14,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> function twentytwentyoneToggleAriaExpanded( el, withListeners ) {
</span><span class="cx" style="display: block; padding: 0 10px"> if ( 'true' !== el.getAttribute( 'aria-expanded' ) ) {
</span><span class="cx" style="display: block; padding: 0 10px"> el.setAttribute( 'aria-expanded', 'true' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ twentytwentyoneSubmenuPosition( el.parentElement );
</ins><span class="cx" style="display: block; padding: 0 10px"> if ( withListeners ) {
</span><span class="cx" style="display: block; padding: 0 10px"> document.addEventListener( 'click', twentytwentyoneCollapseMenuOnClickOutside );
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -34,6 +35,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ * Changes the position of submenus so they always fit the screen horizontally.
+ *
+ * @param {Element} li - The li element.
+ */
+function twentytwentyoneSubmenuPosition( li ) {
+ var subMenu = li.querySelector( 'ul.sub-menu' ),
+ rect = subMenu.getBoundingClientRect(),
+ right = Math.round( rect.right ),
+ left = Math.round( rect.left ),
+ windowWidth = Math.round( window.innerWidth );
+
+ if ( right > windowWidth ) {
+ subMenu.classList.add( 'submenu-reposition-right' );
+ } else if ( document.body.classList.contains( 'rtl' ) && left < 0 ) {
+ subMenu.classList.add( 'submenu-reposition-left' );
+ }
+}
+
+/**
</ins><span class="cx" style="display: block; padding: 0 10px"> * Handle clicks on submenu toggles.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @param {Element} el - The element.
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -94,7 +114,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> tabKey = event.keyCode === 9;
</span><span class="cx" style="display: block; padding: 0 10px"> shiftKey = event.shiftKey;
</span><span class="cx" style="display: block; padding: 0 10px"> escKey = event.keyCode === 27;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- activeEl = document.activeElement;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ activeEl = document.activeElement; // jshint ignore:line
</ins><span class="cx" style="display: block; padding: 0 10px"> lastEl = elements[ elements.length - 1 ];
</span><span class="cx" style="display: block; padding: 0 10px"> firstEl = elements[0];
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -124,6 +144,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> document.getElementById( 'site-navigation' ).querySelectorAll( '.menu-wrapper > .menu-item-has-children' ).forEach( function( li ) {
</span><span class="cx" style="display: block; padding: 0 10px"> li.addEventListener( 'mouseenter', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'true' );
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ twentytwentyoneSubmenuPosition( li );
</ins><span class="cx" style="display: block; padding: 0 10px"> } );
</span><span class="cx" style="display: block; padding: 0 10px"> li.addEventListener( 'mouseleave', function() {
</span><span class="cx" style="display: block; padding: 0 10px"> this.querySelector( '.sub-menu-toggle' ).setAttribute( 'aria-expanded', 'false' );
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneclassesclasstwentytwentyonecustomcolorsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-custom-colors.php 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -174,6 +174,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> $classes[] = 'has-background-light';
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ if ( 'ffffff' === strtolower( $background_color ) ) {
+ $classes[] = 'has-background-white';
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> return $classes;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneclassesclasstwentytwentyonedarkmodephp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php (rev 0)
+++ trunk/src/wp-content/themes/twentytwentyone/classes/class-twenty-twenty-one-dark-mode.php 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,389 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Custom Colors Class
+ *
+ * @package WordPress
+ * @subpackage Twenty_Twenty_One
+ * @since 1.0.0
+ */
+
+/**
+ * This class is in charge of color customization via the Customizer.
+ */
+class Twenty_Twenty_One_Dark_Mode {
+
+ /**
+ * Instantiate the object.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ */
+ public function __construct() {
+
+ // Enqueue assets for the block-editor.
+ add_action( 'enqueue_block_editor_assets', array( $this, 'editor_custom_color_variables' ) );
+
+ // Add styles for dark-mode.
+ add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
+
+ // Add scripts for customizer controls.
+ add_action( 'customize_controls_enqueue_scripts', array( $this, 'customize_controls_enqueue_scripts' ) );
+
+ // Add customizer controls.
+ add_action( 'customize_register', array( $this, 'customizer_controls' ) );
+
+ // Add HTML classes.
+ add_filter( 'twentytwentyone_html_classes', array( $this, 'html_classes' ) );
+
+ // Add classes to <body> in the dashboard.
+ add_filter( 'admin_body_class', array( $this, 'admin_body_classes' ) );
+
+ // Add the switch on the frontend & customizer.
+ add_action( 'get_template_part_template-parts/header/site-nav', array( $this, 'the_switch' ) );
+
+ // Add the switch in the editor.
+ add_action( 'wp_ajax_tt1_dark_mode_editor_switch', array( $this, 'editor_ajax_callback' ) );
+ }
+
+ /**
+ * Editor custom color variables & scripts.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+ public function editor_custom_color_variables() {
+ if ( ! $this->switch_should_render() ) {
+ return;
+ }
+ $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
+ $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false );
+ if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) {
+ // Add dark mode variable overrides.
+ wp_add_inline_style(
+ 'twenty-twenty-one-custom-color-overrides',
+ 'html.is-dark-mode .editor-styles-wrapper { --global--color-background: var(--global--color-dark-gray); --global--color-primary: var(--global--color-light-gray); --global--color-secondary: var(--global--color-light-gray); }'
+ );
+ }
+ wp_enqueue_script(
+ 'twentytwentyone-dark-mode-support-toggle',
+ get_template_directory_uri() . '/assets/js/dark-mode-toggler.js',
+ array(),
+ '1.0.0',
+ true
+ );
+
+ wp_enqueue_script(
+ 'twentytwentyone-editor-dark-mode-support',
+ get_template_directory_uri() . '/assets/js/editor-dark-mode-support.js',
+ array( 'twentytwentyone-dark-mode-support-toggle' ),
+ '1.0.0',
+ true
+ );
+ }
+
+ /**
+ * Enqueue scripts and styles.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+ public function enqueue_scripts() {
+ if ( ! $this->switch_should_render() ) {
+ return;
+ }
+ wp_enqueue_style(
+ 'tt1-dark-mode',
+ get_template_directory_uri() . '/assets/css/style-dark-mode.css',
+ array( 'twenty-twenty-one-style' ),
+ '1.0.0'
+ );
+ }
+
+ /**
+ * Enqueue scripts for the customizer.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+ public function customize_controls_enqueue_scripts() {
+ if ( ! $this->switch_should_render() ) {
+ return;
+ }
+ wp_enqueue_script(
+ 'twentytwentyone-customize-controls',
+ get_template_directory_uri() . '/assets/js/customize.js',
+ array( 'customize-base', 'customize-controls', 'underscore', 'jquery', 'twentytwentyone-customize-helpers' ),
+ '1.0.0',
+ true
+ );
+
+ wp_localize_script(
+ 'twentytwentyone-customize-controls',
+ 'backgroundColorNotice',
+ array(
+ 'message' => esc_html__( 'Changes will only be visible if Dark Mode is "Off" in the preview', 'twentytwentyone' ),
+ )
+ );
+ }
+
+ /**
+ * Register customizer options.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @param WP_Customize_Manager $wp_customize Theme Customizer object.
+ *
+ * @return void
+ */
+ public function customizer_controls( $wp_customize ) {
+ $wp_customize->add_setting(
+ 'respect_user_color_preference',
+ array(
+ 'capability' => 'edit_theme_options',
+ 'default' => false,
+ 'sanitize_callback' => function( $value ) {
+ return (bool) $value;
+ },
+ )
+ );
+
+ $wp_customize->add_control(
+ 'respect_user_color_preference',
+ array(
+ 'type' => 'checkbox',
+ 'section' => 'colors',
+ 'label' => esc_html__( 'Respect visitor\'s device dark mode settings', 'twentytwentyone' ),
+ 'description' => __( 'Dark mode is a device setting. If a visitor to your site requests it, your site will be shown with a dark background and light text.', 'twentytwentyone' ),
+ 'active_callback' => function( $value ) {
+ return 127 < Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) );
+ },
+ )
+ );
+
+ // Add partial for background_color.
+ $wp_customize->selective_refresh->add_partial(
+ 'background_color',
+ array(
+ 'selector' => '#dark-mode-toggler',
+ 'container_inclusive' => true,
+ 'render_callback' => function() {
+ $attrs = ( $this->switch_should_render() ) ? array() : array( 'style' => 'display:none;' );
+ $this->the_html( $attrs );
+ },
+ )
+ );
+ }
+
+ /**
+ * Calculate classes for the main <html> element.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @param string $classes The classes for <html> element.
+ *
+ * @return string
+ */
+ public function html_classes( $classes ) {
+ if ( ! $this->switch_should_render() ) {
+ return $classes;
+ }
+
+ $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
+ $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false );
+ if ( $should_respect_color_scheme && 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) ) {
+ return ( $classes ) ? ' respect-color-scheme-preference' : 'respect-color-scheme-preference';
+ }
+
+ return $classes;
+ }
+
+ /**
+ * Adds a class to the <body> element in the editor to accommodate dark-mode.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @param string $classes The admin body-classes.
+ *
+ * @return string
+ */
+ public function admin_body_classes( $classes ) {
+ if ( ! $this->switch_should_render() ) {
+ return $classes;
+ }
+
+ global $current_screen;
+ if ( empty( $current_screen ) ) {
+ set_current_screen();
+ }
+
+ if ( $current_screen->is_block_editor() ) {
+ $should_respect_color_scheme = get_theme_mod( 'respect_user_color_preference', false );
+ $background_color = get_theme_mod( 'background_color', 'D1E4DD' );
+
+ if ( $should_respect_color_scheme && Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( $background_color ) > 127 ) {
+ $classes .= ' twentytwentyone-supports-dark-theme';
+ }
+ }
+
+ return $classes;
+ }
+
+ /**
+ * Determine if we want to print the dark-mode switch or not.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @return bool
+ */
+ public function switch_should_render() {
+ global $is_IE;
+ return (
+ get_theme_mod( 'respect_user_color_preference', false ) &&
+ ! $is_IE &&
+ 127 <= Twenty_Twenty_One_Custom_Colors::get_relative_luminance_from_hex( get_theme_mod( 'background_color', 'D1E4DD' ) )
+ );
+ }
+
+ /**
+ * Add night/day switch.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+ public function the_switch() {
+ if ( ! $this->switch_should_render() ) {
+ return;
+ }
+ $this->the_html();
+ $this->the_script();
+ }
+
+ /**
+ * Print the dark-mode switch HTML.
+ *
+ * Inspired from https://codepen.io/aaroniker/pen/KGpXZo (MIT-licensed)
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @param array $attrs The attributes to add to our <button> element.
+ *
+ * @return void
+ */
+ public function the_html( $attrs = array() ) {
+ $attrs = wp_parse_args(
+ $attrs,
+ array(
+ 'id' => 'dark-mode-toggler',
+ 'class' => 'fixed-bottom',
+ 'aria-pressed' => 'false',
+ 'onClick' => 'toggleDarkMode()',
+ )
+ );
+ echo '<button';
+ foreach ( $attrs as $key => $val ) {
+ echo ' ' . esc_attr( $key ) . '="' . esc_attr( $val ) . '"';
+ }
+ echo '>';
+ printf(
+ /* translators: %s: On/Off */
+ esc_html__( 'Dark Mode: %s', 'twentytwentyone' ),
+ '<span aria-hidden="true"></span>'
+ );
+ echo '</button>';
+ ?>
+ <style>
+ #dark-mode-toggler > span {
+ margin-<?php echo is_rtl() ? 'right' : 'left'; ?>: 5px;
+ }
+ #dark-mode-toggler > span::before {
+ content: '<?php esc_attr_e( 'Off', 'twentytwentyone' ); ?>';
+ }
+ #dark-mode-toggler[aria-pressed="true"] > span::before {
+ content: '<?php esc_attr_e( 'On', 'twentytwentyone' ); ?>';
+ }
+ <?php if ( is_admin() || wp_is_json_request() ) : ?>
+ .components-editor-notices__pinned ~ .edit-post-visual-editor #dark-mode-toggler {
+ z-index: 20;
+ }
+ html.is-dark-mode #dark-mode-toggler:not(:hover):not(:focus) {
+ color: var(--global--color-primary);
+ }
+ @media only screen and (max-width: 782px) {
+ #dark-mode-toggler {
+ margin-top: 32px;
+ }
+ }
+ <?php endif; ?>
+ </style>
+
+ <?php
+ }
+
+ /**
+ * Print the dark-mode switch script.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+ public function the_script() {
+ echo '<script>';
+ include get_template_directory() . '/assets/js/dark-mode-toggler.js'; // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude
+ echo '</script>';
+ }
+
+ /**
+ * Print the dark-mode switch styles.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+ public function the_styles() {
+ echo '<style>';
+ include get_theme_file_path( 'assets/css/style-dark-mode.css' ); // phpcs:ignore WPThemeReview.CoreFunctionality.FileInclude
+ echo '</style>';
+ }
+
+ /**
+ * Call the tt1_the_dark_mode_switch and exit.
+ *
+ * @access public
+ *
+ * @since 1.0.0
+ *
+ * @return void
+ */
+ public function editor_ajax_callback() {
+ $this->the_html();
+ $this->the_styles();
+ wp_die();
+ }
+}
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyonefooterphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/footer.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/footer.php 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/footer.php 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -32,6 +32,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'depth' => 1,
</span><span class="cx" style="display: block; padding: 0 10px"> 'link_before' => '<span>',
</span><span class="cx" style="display: block; padding: 0 10px"> 'link_after' => '</span>',
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'fallback_cb' => 'false',
</ins><span class="cx" style="display: block; padding: 0 10px"> )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px"> ?>
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyonefunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/functions.php 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/functions.php 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -527,6 +527,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> // Block Styles.
</span><span class="cx" style="display: block; padding: 0 10px"> require get_template_directory() . '/inc/block-styles.php';
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+// Dark Mode.
+require_once get_template_directory() . '/classes/class-twenty-twenty-one-dark-mode.php';
+new Twenty_Twenty_One_Dark_Mode();
+
</ins><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Enqueue scripts for the customizer preview.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneincblockpatternsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/inc/block-patterns.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/inc/block-patterns.php 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/inc/block-patterns.php 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -104,7 +104,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> 'title' => esc_html__( 'Portfolio List', 'twentytwentyone' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'categories' => array( 'twentytwentyone' ),
</span><span class="cx" style="display: block; padding: 0 10px"> 'description' => esc_html_x( 'A list of projects with thumbnail images.', 'Block pattern description', 'twentytwentyone' ),
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- 'content' => '<!-- wp:separator {"className":"is-style-twentytwentyone-separator-thick"} --> <hr class="wp-block-separator is-style-twentytwentyone-separator-thick"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'Roses Tremieres', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} -->
; <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":46,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/roses-tremieres-hollyhocks-1884.jpg" alt="' . esc_attr__( '“Roses Tremieres” by Berthe Morisot', 'twentytwentyone' ) . '" width="46" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-default"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment"
;:"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'Villa with Orange Trees, Nice', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":84,"height":67,"className":"alignright size-large is-resized"} --><figure class="wp-block-image is-resized alignright size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/villa-with-orange-trees-nice.jpg" alt=
"“Villa with Orange Trees, Nice” by Berthe Morisot" width="84" height="67"/></figure><!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-default"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'In the Bois de Boulogne', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:col
umn --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":55,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/in-the-bois-de-boulogne.jpg" alt="' . esc_attr__( '“In the Bois de Boulogne” by Berthe Morisot', 'twentytwentyone' ) . '" width="55" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-default"/> <!-- /wp:separator --> <!-- wp:columns --> <div
class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'The Garden at Bougival', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":52,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets
/images/the-garden-at-bougival-1884.jpg" alt="' . esc_attr__( '“The Garden at Bougival” by Berthe Morisot', 'twentytwentyone' ) . '" width="52" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-default"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'Young Woman in Mauve', 'twentytwentyone
' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":50,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/young-woman-in-mauve.jpg" alt="' . esc_attr__( '“Young Woman in Mauve” by Berthe Morisot', 'twentytwentyone' ) . '" width="50" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-defa
ult"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'Reading', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":51,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img s
rc="' . esc_url( get_template_directory_uri() ) . '/assets/images/Reading.jpg" alt="' . esc_attr__( '“Reading” by Berthe Morisot', 'twentytwentyone' ) . '" width="51" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-twentytwentyone-separator-thick"} --> <hr class="wp-block-separator is-style-twentytwentyone-separator-thick"/> <!-- /wp:separator -->',
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ 'content' => '<!-- wp:separator {"className":"is-style-twentytwentyone-separator-thick"} --> <hr class="wp-block-separator is-style-twentytwentyone-separator-thick"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'Roses Tremieres', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} -->
<div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":85,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/roses-tremieres-hollyhocks-1884.jpg" alt="' . esc_attr__( '“Roses Tremieres” by Berthe Morisot', 'twentytwentyone' ) . '" width="85" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-default"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment"
:"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'Villa with Orange Trees, Nice', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":53,"height":67,"className":"alignright size-large is-resized"} --><figure class="wp-block-image is-resized alignright size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/villa-with-orange-trees-nice.jpg" alt=&
quot;“Villa with Orange Trees, Nice” by Berthe Morisot" width="53" height="67"/></figure><!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-default"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'In the Bois de Boulogne', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:colu
mn --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":81,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/in-the-bois-de-boulogne.jpg" alt="' . esc_attr__( '“In the Bois de Boulogne” by Berthe Morisot', 'twentytwentyone' ) . '" width="81" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-default"/> <!-- /wp:separator --> <!-- wp:columns --> <div c
lass="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'The Garden at Bougival', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":85,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/
images/the-garden-at-bougival-1884.jpg" alt="' . esc_attr__( '“The Garden at Bougival” by Berthe Morisot', 'twentytwentyone' ) . '" width="85" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-default"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'Young Woman in Mauve', 'twentytwentyone'
) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":54,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/young-woman-in-mauve.jpg" alt="' . esc_attr__( '“Young Woman in Mauve” by Berthe Morisot', 'twentytwentyone' ) . '" width="54" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-default"} --> <hr class="wp-block-separator is-style-defau
lt"/> <!-- /wp:separator --> <!-- wp:columns --> <div class="wp-block-columns"><!-- wp:column {"verticalAlignment":"center","width":80} --> <div class="wp-block-column is-vertically-aligned-center" style="flex-basis:80%"><!-- wp:paragraph {"fontSize":"extra-large"} --> <p class="has-extra-large-font-size"><a href="#">' . esc_html__( 'Reading', 'twentytwentyone' ) . '</a></p> <!-- /wp:paragraph --></div> <!-- /wp:column --> <!-- wp:column {"verticalAlignment":"center"} --> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"right","width":84,"height":67,"sizeSlug":"large"} --> <figure class="wp-block-image alignright size-large is-resized"><img sr
c="' . esc_url( get_template_directory_uri() ) . '/assets/images/Reading.jpg" alt="' . esc_attr__( '“Reading” by Berthe Morisot', 'twentytwentyone' ) . '" width="84" height="67"/></figure> <!-- /wp:image --></div> <!-- /wp:column --></div> <!-- /wp:columns --> <!-- wp:separator {"className":"is-style-twentytwentyone-separator-thick"} --> <hr class="wp-block-separator is-style-twentytwentyone-separator-thick"/> <!-- /wp:separator -->',
</ins><span class="cx" style="display: block; padding: 0 10px"> )
</span><span class="cx" style="display: block; padding: 0 10px"> );
</span><span class="cx" style="display: block; padding: 0 10px">
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneincstartercontentphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/inc/starter-content.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/inc/starter-content.php 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/inc/starter-content.php 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -40,7 +40,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> <!-- wp:columns {"verticalAlignment":"center","align":"wide","className":"is-style-twentytwentyone-columns-overlap"} -->
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="wp-block-columns alignwide are-vertically-aligned-center is-style-twentytwentyone-columns-overlap"><!-- wp:column {"verticalAlignment":"center"} -->
</span><span class="cx" style="display: block; padding: 0 10px"> <div class="wp-block-column is-vertically-aligned-center"><!-- wp:image {"align":"full","sizeSlug":"large"} -->
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <figure class="wp-block-image alignfull size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/roses-tremieres-hollyhocks.jpg" alt="' . esc_attr__( 'Roses Tremieres (Hollyhocks), by Berthe Morisot, 1884', 'twentytwentyone' ) . '"/></figure>
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <figure class="wp-block-image alignfull size-large"><img src="' . esc_url( get_template_directory_uri() ) . '/assets/images/roses-tremieres-hollyhocks-1884.jpg" alt="' . esc_attr__( 'Roses Tremieres (Hollyhocks), by Berthe Morisot, 1884', 'twentytwentyone' ) . '"/></figure>
</ins><span class="cx" style="display: block; padding: 0 10px"> <!-- /wp:image -->
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <!-- wp:spacer -->
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyoneinctemplatefunctionsphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/inc/template-functions.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/inc/template-functions.php 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/inc/template-functions.php 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -94,82 +94,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> add_filter( 'comment_form_defaults', 'twenty_twenty_one_comment_form_defaults' );
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /**
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- * Filters the default archive titles.
- *
- * @since 1.0.0
- *
- * @return string
- */
-function twenty_twenty_one_get_the_archive_title() {
- if ( is_category() ) {
- return sprintf(
- /* translators: %s: The term title. */
- esc_html__( 'Category Archives: %s', 'twentytwentyone' ),
- '<span class="page-description">' . single_term_title( '', false ) . '</span>'
- );
- }
-
- if ( is_tag() ) {
- return sprintf(
- /* translators: %s: The term title. */
- esc_html__( 'Tag Archives: %s', 'twentytwentyone' ),
- '<span class="page-description">' . single_term_title( '', false ) . '</span>'
- );
- }
-
- if ( is_author() ) {
- return sprintf(
- /* translators: %s: The author name. */
- esc_html__( 'Author Archives: %s', 'twentytwentyone' ),
- '<span class="page-description">' . get_the_author_meta( 'display_name' ) . '</span>'
- );
- }
-
- if ( is_year() ) {
- return sprintf(
- /* translators: %s: The year. */
- esc_html__( 'Yearly Archives: %s', 'twentytwentyone' ),
- '<span class="page-description">' . get_the_date( _x( 'Y', 'yearly archives date format', 'twentytwentyone' ) ) . '</span>'
- );
- }
-
- if ( is_month() ) {
- return sprintf(
- /* translators: %s: The month. */
- esc_html__( 'Monthly Archives: %s', 'twentytwentyone' ),
- '<span class="page-description">' . get_the_date( _x( 'F Y', 'monthly archives date format', 'twentytwentyone' ) ) . '</span>'
- );
- }
-
- if ( is_day() ) {
- return sprintf(
- /* translators: %s: The day. */
- esc_html__( 'Daily Archives: %s', 'twentytwentyone' ),
- '<span class="page-description">' . get_the_date() . '</span>'
- );
- }
-
- if ( is_post_type_archive() ) {
- return sprintf(
- /* translators: %s: Post type singular name. */
- esc_html__( '%s Archives', 'twentytwentyone' ),
- get_post_type_object( get_queried_object()->name )->labels->singular_name
- );
- }
-
- if ( is_tax() ) {
- return sprintf(
- /* translators: %s: Taxonomy singular name. */
- esc_html__( '%s Archives', 'twentytwentyone' ),
- get_taxonomy( get_queried_object()->taxonomy )->labels->singular_name
- );
- }
-
- return esc_html__( 'Archives:', 'twentytwentyone' );
-}
-add_filter( 'get_the_archive_title', 'twenty_twenty_one_get_the_archive_title' );
-
-/**
</del><span class="cx" style="display: block; padding: 0 10px"> * Determines if post thumbnail can be displayed.
</span><span class="cx" style="display: block; padding: 0 10px"> *
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 1.0.0
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -487,6 +411,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @return array
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> function twenty_twenty_one_get_attachment_image_attributes( $attr, $attachment, $size ) {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+
+ if ( isset( $attr['class'] ) && false !== strpos( $attr['class'], 'custom-logo' ) ) {
+ return $attr;
+ }
+
</ins><span class="cx" style="display: block; padding: 0 10px"> $width = false;
</span><span class="cx" style="display: block; padding: 0 10px"> $height = false;
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -505,7 +434,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> // Add style.
</span><span class="cx" style="display: block; padding: 0 10px"> $attr['style'] = isset( $attr['style'] ) ? $attr['style'] : '';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- $attr['style'] = 'width:100%;height:' . round( 100 * $meta['height'] / $meta['width'], 2 ) . '%;' . $attr['style'];
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ $attr['style'] = 'width:100%;height:' . round( 100 * $height / $width, 2 ) . '%;' . $attr['style'];
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> return $attr;
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyonepackagejson"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/package.json</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/package.json 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/package.json 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -53,7 +53,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> "start": "chokidar \"**/*.scss\" -c \"npm run build\" --initial",
</span><span class="cx" style="display: block; padding: 0 10px"> "build:style": "node-sass assets/sass/style.scss style.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
</span><span class="cx" style="display: block; padding: 0 10px"> "build:style-editor": "node-sass assets/sass/style-editor.scss assets/css/style-editor.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- "build:rtl": "rtlcss style.css style-rtl.css",
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ "build:style-dark-mode": "node-sass assets/sass/style-dark-mode.scss assets/css/style-dark-mode.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
+ "build:rtl": "rtlcss style.css style-rtl.css style-dark-mode.css",
</ins><span class="cx" style="display: block; padding: 0 10px"> "build:print": "node-sass assets/sass/07-utilities/print.scss assets/css/print.css --output-style expanded --indent-type tab --indent-width 1 --source-map true",
</span><span class="cx" style="display: block; padding: 0 10px"> "build:ie": "postcss style.css -o assets/css/ie.css",
</span><span class="cx" style="display: block; padding: 0 10px"> "build:ie-editor": "postcss assets/css/style-editor.css -o assets/css/ie-editor.css",
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyonestylertlcss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/style-rtl.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/style-rtl.css 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/style-rtl.css 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -288,8 +288,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> --widget--line-height-title: 1.4;
</span><span class="cx" style="display: block; padding: 0 10px"> --widget--font-weight-title: 700;
</span><span class="cx" style="display: block; padding: 0 10px"> --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Admin-bar height */
+ --global--admin-bar--height: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.admin-bar {
+ --global--admin-bar--height: 32px;
+}
+
+@media only screen and (max-width: 782px) {
+ .admin-bar {
+ --global--admin-bar--height: 46px;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 652px) {
</span><span class="cx" style="display: block; padding: 0 10px"> :root {
</span><span class="cx" style="display: block; padding: 0 10px"> --global--font-size-xl: 2.5rem;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1001,23 +1013,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */
</span><span class="cx" style="display: block; padding: 0 10px"> blockquote {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 0;
</del><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: relative;
+ margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-blockquote p {
- font-size: var(--heading--font-size-h4);
- letter-spacing: var(--heading--letter-spacing-h4);
- line-height: var(--heading--line-height-h4);
-}
-
-blockquote cite,
-blockquote footer {
- color: var(--global--color-primary);
- font-size: var(--global--font-size-xs);
- letter-spacing: var(--global--letter-spacing);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> blockquote > * {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: var(--global--spacing-unit);
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: var(--global--spacing-unit);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1031,6 +1031,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote p {
+ letter-spacing: var(--heading--letter-spacing-h4);
+ font-family: var(--quote--font-family);
+ font-size: var(--quote--font-size);
+ font-style: var(--quote--font-style);
+ font-weight: var(--quote--font-weight-strong);
+ line-height: var(--quote--line-height);
+}
+
+blockquote cite,
+blockquote footer {
+ font-weight: normal;
+ color: var(--global--color-primary);
+ font-size: var(--global--font-size-xs);
+ letter-spacing: var(--global--letter-spacing);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> blockquote.alignleft, blockquote.alignright {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1048,6 +1065,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: var(--global--letter-spacing);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote strong {
+ font-weight: var(--quote--font-weight);
+}
+
+blockquote:before {
+ content: "\201C";
+ font-size: var(--quote--font-size);
+ line-height: var(--quote--line-height);
+ position: absolute;
+ right: calc(-0.5 * var(--global--spacing-horizontal));
+}
+
+blockquote .wp-block-quote__citation,
+blockquote cite,
+blockquote footer {
+ color: var(--global--color-primary);
+ font-size: var(--global--font-size-xs);
+ font-style: var(--quote--font-style-cite);
+}
+
+@media only screen and (max-width: 481px) {
+ blockquote {
+ padding-right: calc(0.5 * var(--global--spacing-horizontal));
+ }
+ blockquote:before {
+ right: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> input[type="text"],
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="email"],
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="url"],
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1455,10 +1501,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .site a:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
- text-decoration: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Only visible in Windows High Contrast mode */
+ outline: 2px solid transparent;
+ background: rgba(255, 255, 255, 0.9);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .site a:focus,
+.has-background-dark .site a:focus .meta-nav {
+ color: var(--wp--style--color--link, var(--global--color-background));
+}
+
+.has-background-white .site a:focus {
+ background: rgba(0, 0, 0, 0.9);
+ color: var(--wp--style--color--link, var(--global--color-white));
+}
+
+.has-background-white .site a:focus .meta-nav {
+ color: var(--wp--style--color--link, var(--global--color-white));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .site a:focus.skip-link {
</span><span class="cx" style="display: block; padding: 0 10px"> /* Only visible in Windows High Contrast mode */
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px solid transparent;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1465,6 +1526,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -2px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site a:focus.skip-link:focus {
+ color: #21759b;
+ background-color: #f1f1f1;
+}
+
+.site a:focus img {
+ outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color) .has-link-color a,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color).has-link-color a {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--wp--style--color--link, var(--global--color-primary));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1533,10 +1603,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="reset"]:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__button:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button .wp-block-button__link:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .site .button:focus, .has-background-dark
+input[type="submit"]:focus, .has-background-dark
+input[type="reset"]:focus, .has-background-dark
+.wp-block-search__button:focus, .has-background-dark
+.wp-block-button .wp-block-button__link:focus {
+ color: var(--button--color-background);
+}
+
+.site .button:focus:not(.has-background),
+input[type="submit"]:focus:not(.has-background),
+input[type="reset"]:focus:not(.has-background),
+.wp-block-search__button:focus:not(.has-background),
+.wp-block-button .wp-block-button__link:focus:not(.has-background) {
+ color: var(--button--color-text-hover);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .site .button:disabled,
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="submit"]:disabled,
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="reset"]:disabled,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1606,10 +1693,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--button--color-background);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):visited {
- color: var(--button--color-background);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button.is-style-outline .wp-block-button__link.has-background, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
</span><span class="cx" style="display: block; padding: 0 10px"> border: var(--button--border-width) solid currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1646,6 +1729,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-columns:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block-column > * {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: calc(0.66 * var(--global--spacing-vertical));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: calc(0.66 * var(--global--spacing-vertical));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1680,9 +1767,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@media only screen and (min-width: 652px) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (min-width: 822px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block-column:not(:last-child) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Resetting margins to match _block-container.scss */
</del><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1732,7 +1818,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover-image {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--cover--color-foreground);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: var(--cover--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> min-height: var(--cover--height);
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: inherit;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1741,6 +1827,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Block Styles */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-cover:not(.alignwide):not(.alignfull),
+.wp-block-cover-image:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover__inner-container,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover-image-text,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover-text,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1862,12 +1953,19 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:active,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:focus,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file a.wp-block-file__button:hover,
-.wp-block-file a.wp-block-file__button:visited {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button:hover {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--button--color-text-hover);
</span><span class="cx" style="display: block; padding: 0 10px"> opacity: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button:visited {
+ color: var(--button--color-text);
+}
+
+.wp-block-file a.wp-block-file__button:visited:hover {
+ color: var(--button--color-text-hover);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button {
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: var(--button--line-height);
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--button--color-text);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1899,10 +1997,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .wp-block-file .wp-block-file__button:focus {
+ color: var(--button--color-background);
+}
+
+.wp-block-file .wp-block-file__button:focus:not(.has-background) {
+ color: var(--button--color-text-hover);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white-50);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--global--color-white-50);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1925,6 +2032,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--global--font-size-xs);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-gallery .blocks-gallery-image figcaption a,
+.wp-block-gallery .blocks-gallery-item figcaption a {
+ color: var(--global--color-white);
+}
+
+.wp-block-gallery .blocks-gallery-image figcaption a:focus,
+.wp-block-gallery .blocks-gallery-item figcaption a:focus {
+ background-color: transparent;
+ outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
+ text-decoration: none;
+}
+
+.wp-block-gallery .blocks-gallery-image a:focus img,
+.wp-block-gallery .blocks-gallery-item a:focus img {
+ outline-offset: 2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-group {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1977,6 +2101,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: var(--global--spacing-vertical);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-group.has-background .wp-block-group__inner-container > .alignfull,
+.wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull, .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull,
+.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
+ max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
+ width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
+ margin-right: calc(-1 * var(--global--spacing-vertical));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> h1,
</span><span class="cx" style="display: block; padding: 0 10px"> .h1,
</span><span class="cx" style="display: block; padding: 0 10px"> h2,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2075,6 +2207,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: var(--global--spacing-horizontal);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-image a:focus img {
+ outline-offset: 2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry-content > *[class="wp-block-image"],
</span><span class="cx" style="display: block; padding: 0 10px"> .entry-content [class*="inner-container"] > *[class="wp-block-image"] {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2101,8 +2237,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: var(--global--spacing-unit);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (min-width: 482px) {
+ .entry-content > .wp-block-image > .alignleft,
+ .entry-content > .wp-block-image > .alignright {
+ max-width: 50%;
+ }
+}
+
+@media only screen and (max-width: 481px) {
+ .entry-content > .wp-block-image > .alignleft,
+ .entry-content > .wp-block-image > .alignright {
+ margin-right: 0;
+ margin-left: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-comments {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-right: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-right: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-comments .wp-block-latest-comments__comment {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2153,6 +2304,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-latest-posts.is-grid {
+ word-wrap: break-word;
+ word-break: break-word;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-posts.is-grid > li {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: var(--global--spacing-vertical);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2309,6 +2465,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.gallery-item a:focus img {
+ outline-offset: -2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .gallery-columns-2 .gallery-item {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 50%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2345,6 +2505,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+figure.wp-caption a:focus img {
+ outline-offset: 2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> ul,
</span><span class="cx" style="display: block; padding: 0 10px"> ol {
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--list--font-family);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2389,6 +2553,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-media-text a:focus img {
+ outline-offset: -1px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-media-text .wp-block-media-text__content {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: var(--global--spacing-horizontal);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2669,54 +2837,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-quote {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- position: relative;
- margin: var(--global--spacing-vertical) var(--global--spacing-horizontal) var(--global--spacing-vertical) 0;
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Block Options
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-quote > * {
- margin-top: var(--global--spacing-unit);
- margin-bottom: var(--global--spacing-unit);
-}
-
-.wp-block-quote > *:first-child {
- margin-top: 0;
-}
-
-.wp-block-quote > *:last-child {
- margin-bottom: 0;
-}
-
-.wp-block-quote p {
- font-family: var(--quote--font-family);
- font-size: var(--quote--font-size);
- font-style: var(--quote--font-style);
- font-weight: var(--quote--font-weight-strong);
- line-height: var(--quote--line-height);
-}
-
-.wp-block-quote strong {
- font-weight: var(--quote--font-weight);
-}
-
-.wp-block-quote:before {
- content: "\201C";
- font-size: var(--quote--font-size);
- line-height: var(--quote--line-height);
- position: absolute;
- right: calc(-0.5 * var(--global--spacing-horizontal));
-}
-
-.wp-block-quote .wp-block-quote__citation,
-.wp-block-quote cite,
-.wp-block-quote footer {
- color: var(--global--color-primary);
- font-size: var(--global--font-size-xs);
- font-style: var(--quote--font-style-cite);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
</span><span class="cx" style="display: block; padding: 0 10px"> [class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
</span><span class="cx" style="display: block; padding: 0 10px"> [style*="background-color"] .wp-block-quote .wp-block-quote__citation,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2813,12 +2938,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (max-width: 481px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block-quote {
- padding-right: calc(0.5 * var(--global--spacing-horizontal));
- }
- .wp-block-quote:before {
- right: 0;
- }
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-quote.has-text-align-right {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: calc(0.5 * var(--global--spacing-horizontal));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3453,11 +3572,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-top: calc(0.5 * var(--global--spacing-vertical));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- top: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: var(--global--admin-bar--height);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .admin-bar .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
- top: 46px;
- }
</del><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4199,7 +4315,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation {
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- top: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: var(--global--admin-bar--height);
</ins><span class="cx" style="display: block; padding: 0 10px"> left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--primary-nav--color-text);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--primary-nav--font-size);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4238,10 +4354,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transform: translateY(0) translateX(-100%);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- top: 46px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: var(--global--admin-bar--height);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .admin-bar .primary-navigation > .primary-menu-container {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- height: calc(100vh - 46px);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: calc(100vh - var(--global--admin-bar--height));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation > .primary-menu-container:focus {
</span><span class="cx" style="display: block; padding: 0 10px"> border: 2px solid var(--global--color-primary);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4269,10 +4385,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.admin-bar .primary-navigation {
- top: 46px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 482px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4413,6 +4525,22 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
</span><span class="cx" style="display: block; padding: 0 10px"> background: var(--global--color-background);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left {
+ left: 0;
+ right: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after {
+ left: var(--global--spacing-horizontal);
+ right: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right {
+ right: 0;
+ left: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after {
+ left: auto;
+ right: var(--global--spacing-horizontal);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation .primary-menu > .menu-item:hover > a {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4567,8 +4695,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .footer-navigation {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: var(--global--spacing-vertical);
- margin-bottom: calc(2 * var(--global--spacing-vertical));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: calc(2 * var(--global--spacing-vertical));
+ margin-bottom: var(--global--spacing-vertical);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--footer--color-text);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--global--font-size-xs);
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--footer--font-family);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4652,6 +4780,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> flex-direction: column;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.navigation .nav-links .dots {
+ text-align: center;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 592px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .navigation .nav-links {
</span><span class="cx" style="display: block; padding: 0 10px"> display: flex;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4760,6 +4892,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.pagination .nav-links,
+.comments-pagination .nav-links {
+ margin-top: calc(-1 * var(--global--spacing-vertical));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .pagination .nav-links > *,
</span><span class="cx" style="display: block; padding: 0 10px"> .comments-pagination .nav-links > * {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--pagination--color-text);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4766,6 +4903,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--pagination--font-family);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--pagination--font-size);
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: var(--pagination--font-weight);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: var(--global--spacing-vertical);
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-right: calc(0.66 * var(--global--spacing-unit));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: calc(0.66 * var(--global--spacing-unit));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4800,7 +4938,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-left: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@media only screen and (max-width: 591px) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (max-width: 821px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .pagination .nav-links,
</span><span class="cx" style="display: block; padding: 0 10px"> .comments-pagination .nav-links {
</span><span class="cx" style="display: block; padding: 0 10px"> display: flex;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5202,4 +5340,4 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .is-IE .post-thumbnail .wp-post-image {
</span><span class="cx" style="display: block; padding: 0 10px"> min-width: auto;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-}
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+}
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyonestylecss"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/style.css</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/style.css 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/style.css 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -288,8 +288,20 @@
</span><span class="cx" style="display: block; padding: 0 10px"> --widget--line-height-title: 1.4;
</span><span class="cx" style="display: block; padding: 0 10px"> --widget--font-weight-title: 700;
</span><span class="cx" style="display: block; padding: 0 10px"> --widget--spacing-menu: calc(0.66 * var(--global--spacing-unit));
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Admin-bar height */
+ --global--admin-bar--height: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.admin-bar {
+ --global--admin-bar--height: 32px;
+}
+
+@media only screen and (max-width: 782px) {
+ .admin-bar {
+ --global--admin-bar--height: 46px;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 652px) {
</span><span class="cx" style="display: block; padding: 0 10px"> :root {
</span><span class="cx" style="display: block; padding: 0 10px"> --global--font-size-xl: 2.5rem;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1005,23 +1017,11 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> /* Category 04 can contain any default HTML element. Do not add classes here, just give the elements some basic styles. */
</span><span class="cx" style="display: block; padding: 0 10px"> blockquote {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin: 0;
</del><span class="cx" style="display: block; padding: 0 10px"> padding: 0;
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ position: relative;
+ margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-blockquote p {
- font-size: var(--heading--font-size-h4);
- letter-spacing: var(--heading--letter-spacing-h4);
- line-height: var(--heading--line-height-h4);
-}
-
-blockquote cite,
-blockquote footer {
- color: var(--global--color-primary);
- font-size: var(--global--font-size-xs);
- letter-spacing: var(--global--letter-spacing);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> blockquote > * {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: var(--global--spacing-unit);
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: var(--global--spacing-unit);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1035,6 +1035,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote p {
+ letter-spacing: var(--heading--letter-spacing-h4);
+ font-family: var(--quote--font-family);
+ font-size: var(--quote--font-size);
+ font-style: var(--quote--font-style);
+ font-weight: var(--quote--font-weight-strong);
+ line-height: var(--quote--line-height);
+}
+
+blockquote cite,
+blockquote footer {
+ font-weight: normal;
+ color: var(--global--color-primary);
+ font-size: var(--global--font-size-xs);
+ letter-spacing: var(--global--letter-spacing);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> blockquote.alignleft, blockquote.alignright {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1052,6 +1069,35 @@
</span><span class="cx" style="display: block; padding: 0 10px"> letter-spacing: var(--global--letter-spacing);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+blockquote strong {
+ font-weight: var(--quote--font-weight);
+}
+
+blockquote:before {
+ content: "\201C";
+ font-size: var(--quote--font-size);
+ line-height: var(--quote--line-height);
+ position: absolute;
+ left: calc(-0.5 * var(--global--spacing-horizontal));
+}
+
+blockquote .wp-block-quote__citation,
+blockquote cite,
+blockquote footer {
+ color: var(--global--color-primary);
+ font-size: var(--global--font-size-xs);
+ font-style: var(--quote--font-style-cite);
+}
+
+@media only screen and (max-width: 481px) {
+ blockquote {
+ padding-left: calc(0.5 * var(--global--spacing-horizontal));
+ }
+ blockquote:before {
+ left: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> input[type="text"],
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="email"],
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="url"],
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1460,10 +1506,25 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .site a:focus {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
- text-decoration: none;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ /* Only visible in Windows High Contrast mode */
+ outline: 2px solid transparent;
+ background: rgba(255, 255, 255, 0.9);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .site a:focus,
+.has-background-dark .site a:focus .meta-nav {
+ color: var(--wp--style--color--link, var(--global--color-background));
+}
+
+.has-background-white .site a:focus {
+ background: rgba(0, 0, 0, 0.9);
+ color: var(--wp--style--color--link, var(--global--color-white));
+}
+
+.has-background-white .site a:focus .meta-nav {
+ color: var(--wp--style--color--link, var(--global--color-white));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .site a:focus.skip-link {
</span><span class="cx" style="display: block; padding: 0 10px"> /* Only visible in Windows High Contrast mode */
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px solid transparent;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1470,6 +1531,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -2px;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.site a:focus.skip-link:focus {
+ color: #21759b;
+ background-color: #f1f1f1;
+}
+
+.site a:focus img {
+ outline: 2px dotted var(--wp--style--color--link, var(--global--color-primary));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color) .has-link-color a,
</span><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color).has-link-color a {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--wp--style--color--link, var(--global--color-primary));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1538,10 +1608,27 @@
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="reset"]:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-search__button:focus,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button .wp-block-button__link:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .site .button:focus, .has-background-dark
+input[type="submit"]:focus, .has-background-dark
+input[type="reset"]:focus, .has-background-dark
+.wp-block-search__button:focus, .has-background-dark
+.wp-block-button .wp-block-button__link:focus {
+ color: var(--button--color-background);
+}
+
+.site .button:focus:not(.has-background),
+input[type="submit"]:focus:not(.has-background),
+input[type="reset"]:focus:not(.has-background),
+.wp-block-search__button:focus:not(.has-background),
+.wp-block-button .wp-block-button__link:focus:not(.has-background) {
+ color: var(--button--color-text-hover);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .site .button:disabled,
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="submit"]:disabled,
</span><span class="cx" style="display: block; padding: 0 10px"> input[type="reset"]:disabled,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1611,10 +1698,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--button--color-background);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-button.is-style-outline .wp-block-button__link:not(.has-background):not(.has-text-color):visited {
- color: var(--button--color-background);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-button.is-style-outline .wp-block-button__link.has-background, .wp-block-button.is-style-outline .wp-block-button__link.has-text-color {
</span><span class="cx" style="display: block; padding: 0 10px"> border: var(--button--border-width) solid currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1651,6 +1734,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-columns:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block-column > * {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: calc(0.66 * var(--global--spacing-vertical));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: calc(0.66 * var(--global--spacing-vertical));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1685,9 +1772,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@media only screen and (min-width: 652px) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (min-width: 822px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-columns .wp-block-column:not(:last-child) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- /* Resetting margins to match _block-container.scss */
</del><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1737,7 +1823,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover-image {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- background-color: var(--cover--color-foreground);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background-color: var(--cover--color-background);
</ins><span class="cx" style="display: block; padding: 0 10px"> min-height: var(--cover--height);
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: inherit;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1746,6 +1832,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> /* Block Styles */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-cover:not(.alignwide):not(.alignfull),
+.wp-block-cover-image:not(.alignwide):not(.alignfull) {
+ clear: both;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover__inner-container,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover-image-text,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-cover .wp-block-cover-text,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1867,12 +1958,19 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:active,
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file a.wp-block-file__button:focus,
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-file a.wp-block-file__button:hover,
-.wp-block-file a.wp-block-file__button:visited {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button:hover {
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--button--color-text-hover);
</span><span class="cx" style="display: block; padding: 0 10px"> opacity: inherit;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-file a.wp-block-file__button:visited {
+ color: var(--button--color-text);
+}
+
+.wp-block-file a.wp-block-file__button:visited:hover {
+ color: var(--button--color-text-hover);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button {
</span><span class="cx" style="display: block; padding: 0 10px"> line-height: var(--button--line-height);
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--button--color-text);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1904,10 +2002,19 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:focus {
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ background: transparent;
</ins><span class="cx" style="display: block; padding: 0 10px"> outline-offset: -6px;
</span><span class="cx" style="display: block; padding: 0 10px"> outline: 2px dotted currentColor;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.has-background-dark .wp-block-file .wp-block-file__button:focus {
+ color: var(--button--color-background);
+}
+
+.wp-block-file .wp-block-file__button:focus:not(.has-background) {
+ color: var(--button--color-text-hover);
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-file .wp-block-file__button:disabled {
</span><span class="cx" style="display: block; padding: 0 10px"> background-color: var(--global--color-white-50);
</span><span class="cx" style="display: block; padding: 0 10px"> border-color: var(--global--color-white-50);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1930,6 +2037,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--global--font-size-xs);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-gallery .blocks-gallery-image figcaption a,
+.wp-block-gallery .blocks-gallery-item figcaption a {
+ color: var(--global--color-white);
+}
+
+.wp-block-gallery .blocks-gallery-image figcaption a:focus,
+.wp-block-gallery .blocks-gallery-item figcaption a:focus {
+ background-color: transparent;
+ outline: 2px solid var(--wp--style--color--link, var(--global--color-primary));
+ text-decoration: none;
+}
+
+.wp-block-gallery .blocks-gallery-image a:focus img,
+.wp-block-gallery .blocks-gallery-item a:focus img {
+ outline-offset: 2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-group {
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> clear: both;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -1982,6 +2106,14 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: var(--global--spacing-vertical);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-group.has-background .wp-block-group__inner-container > .alignfull,
+.wp-block-group.has-background .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull, .wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > .alignfull,
+.wp-block-group.is-style-twentytwentyone-border .wp-block-group__inner-container > hr.wp-block-separator:not(.is-style-dots):not(.alignwide).alignfull {
+ max-width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
+ width: calc(var(--responsive--alignfull-width) + (2 * var(--global--spacing-vertical)));
+ margin-left: calc(-1 * var(--global--spacing-vertical));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> h1,
</span><span class="cx" style="display: block; padding: 0 10px"> .h1,
</span><span class="cx" style="display: block; padding: 0 10px"> h2,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2080,6 +2212,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: var(--global--spacing-horizontal);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-image a:focus img {
+ outline-offset: 2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .entry-content > *[class="wp-block-image"],
</span><span class="cx" style="display: block; padding: 0 10px"> .entry-content [class*="inner-container"] > *[class="wp-block-image"] {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2106,8 +2242,23 @@
</span><span class="cx" style="display: block; padding: 0 10px"> padding: var(--global--spacing-unit);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (min-width: 482px) {
+ .entry-content > .wp-block-image > .alignleft,
+ .entry-content > .wp-block-image > .alignright {
+ max-width: 50%;
+ }
+}
+
+@media only screen and (max-width: 481px) {
+ .entry-content > .wp-block-image > .alignleft,
+ .entry-content > .wp-block-image > .alignright {
+ margin-left: 0;
+ margin-right: 0;
+ }
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-comments {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-left: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ padding-left: 0;
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-comments .wp-block-latest-comments__comment {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2158,6 +2309,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-latest-posts.is-grid {
+ word-wrap: break-word;
+ word-break: break-word;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-latest-posts.is-grid > li {
</span><span class="cx" style="display: block; padding: 0 10px"> margin-bottom: var(--global--spacing-vertical);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2314,6 +2470,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.gallery-item a:focus img {
+ outline-offset: -2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .gallery-columns-2 .gallery-item {
</span><span class="cx" style="display: block; padding: 0 10px"> max-width: 50%;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2350,6 +2510,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> display: block;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+figure.wp-caption a:focus img {
+ outline-offset: 2px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> ul,
</span><span class="cx" style="display: block; padding: 0 10px"> ol {
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--list--font-family);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2394,6 +2558,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.wp-block-media-text a:focus img {
+ outline-offset: -1px;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .wp-block-media-text .wp-block-media-text__content {
</span><span class="cx" style="display: block; padding: 0 10px"> padding: var(--global--spacing-horizontal);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2674,54 +2842,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .wp-block-quote {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- position: relative;
- margin: var(--global--spacing-vertical) 0 var(--global--spacing-vertical) var(--global--spacing-horizontal);
</del><span class="cx" style="display: block; padding: 0 10px"> /**
</span><span class="cx" style="display: block; padding: 0 10px"> * Block Options
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.wp-block-quote > * {
- margin-top: var(--global--spacing-unit);
- margin-bottom: var(--global--spacing-unit);
-}
-
-.wp-block-quote > *:first-child {
- margin-top: 0;
-}
-
-.wp-block-quote > *:last-child {
- margin-bottom: 0;
-}
-
-.wp-block-quote p {
- font-family: var(--quote--font-family);
- font-size: var(--quote--font-size);
- font-style: var(--quote--font-style);
- font-weight: var(--quote--font-weight-strong);
- line-height: var(--quote--line-height);
-}
-
-.wp-block-quote strong {
- font-weight: var(--quote--font-weight);
-}
-
-.wp-block-quote:before {
- content: "\201C";
- font-size: var(--quote--font-size);
- line-height: var(--quote--line-height);
- position: absolute;
- left: calc(-0.5 * var(--global--spacing-horizontal));
-}
-
-.wp-block-quote .wp-block-quote__citation,
-.wp-block-quote cite,
-.wp-block-quote footer {
- color: var(--global--color-primary);
- font-size: var(--global--font-size-xs);
- font-style: var(--quote--font-style-cite);
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> .has-background:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
</span><span class="cx" style="display: block; padding: 0 10px"> [class*="background-color"]:not(.has-background-background-color) .wp-block-quote .wp-block-quote__citation,
</span><span class="cx" style="display: block; padding: 0 10px"> [style*="background-color"] .wp-block-quote .wp-block-quote__citation,
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -2818,12 +2943,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (max-width: 481px) {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .wp-block-quote {
- padding-left: calc(0.5 * var(--global--spacing-horizontal));
- }
- .wp-block-quote:before {
- left: 0;
- }
</del><span class="cx" style="display: block; padding: 0 10px"> .wp-block-quote.has-text-align-right {
</span><span class="cx" style="display: block; padding: 0 10px"> padding-left: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-right: calc(0.5 * var(--global--spacing-horizontal));
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -3463,11 +3582,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><span class="cx" style="display: block; padding: 0 10px"> padding-top: calc(0.5 * var(--global--spacing-vertical));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-top: 0;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- top: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: var(--global--admin-bar--height);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- .admin-bar .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
- top: 46px;
- }
</del><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation-open .site-header.has-logo:not(.has-title-and-tagline).has-menu .site-logo {
</span><span class="cx" style="display: block; padding: 0 10px"> display: none;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4209,7 +4325,7 @@
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation {
</span><span class="cx" style="display: block; padding: 0 10px"> position: absolute;
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- top: 0;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: var(--global--admin-bar--height);
</ins><span class="cx" style="display: block; padding: 0 10px"> right: 0;
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--primary-nav--color-text);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--primary-nav--font-size);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4248,10 +4364,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> transform: translateY(0) translateX(100%);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .admin-bar .has-logo.has-title-and-tagline .primary-navigation > .primary-menu-container {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- top: 46px;
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ top: var(--global--admin-bar--height);
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .admin-bar .primary-navigation > .primary-menu-container {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- height: calc(100vh - 46px);
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ height: calc(100vh - var(--global--admin-bar--height));
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation > .primary-menu-container:focus {
</span><span class="cx" style="display: block; padding: 0 10px"> border: 2px solid var(--global--color-primary);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4279,10 +4395,6 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-.admin-bar .primary-navigation {
- top: 46px;
-}
-
</del><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 482px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation {
</span><span class="cx" style="display: block; padding: 0 10px"> position: relative;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4423,6 +4535,30 @@
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation > div > .menu-wrapper > li > .sub-menu li {
</span><span class="cx" style="display: block; padding: 0 10px"> background: var(--global--color-background);
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left {
+ /* rtl:ignore */
+ left: 0;
+ /* rtl:ignore */
+ right: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-left:after {
+ /* rtl:ignore */
+ left: var(--global--spacing-horizontal);
+ /* rtl:ignore */
+ right: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right {
+ /* rtl:ignore */
+ right: 0;
+ /* rtl:ignore */
+ left: auto;
+ }
+ .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:before, .primary-navigation > div > .menu-wrapper > li > .sub-menu.submenu-reposition-right:after {
+ /* rtl:ignore */
+ left: auto;
+ /* rtl:ignore */
+ right: var(--global--spacing-horizontal);
+ }
</ins><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .primary-navigation .primary-menu > .menu-item:hover > a {
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4577,8 +4713,8 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> .footer-navigation {
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- margin-top: var(--global--spacing-vertical);
- margin-bottom: calc(2 * var(--global--spacing-vertical));
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: calc(2 * var(--global--spacing-vertical));
+ margin-bottom: var(--global--spacing-vertical);
</ins><span class="cx" style="display: block; padding: 0 10px"> color: var(--footer--color-text);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--global--font-size-xs);
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--footer--font-family);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4662,6 +4798,10 @@
</span><span class="cx" style="display: block; padding: 0 10px"> flex-direction: column;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.navigation .nav-links .dots {
+ text-align: center;
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> @media only screen and (min-width: 592px) {
</span><span class="cx" style="display: block; padding: 0 10px"> .navigation .nav-links {
</span><span class="cx" style="display: block; padding: 0 10px"> display: flex;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4770,6 +4910,11 @@
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+.pagination .nav-links,
+.comments-pagination .nav-links {
+ margin-top: calc(-1 * var(--global--spacing-vertical));
+}
+
</ins><span class="cx" style="display: block; padding: 0 10px"> .pagination .nav-links > *,
</span><span class="cx" style="display: block; padding: 0 10px"> .comments-pagination .nav-links > * {
</span><span class="cx" style="display: block; padding: 0 10px"> color: var(--pagination--color-text);
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4776,6 +4921,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> font-family: var(--pagination--font-family);
</span><span class="cx" style="display: block; padding: 0 10px"> font-size: var(--pagination--font-size);
</span><span class="cx" style="display: block; padding: 0 10px"> font-weight: var(--pagination--font-weight);
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ margin-top: var(--global--spacing-vertical);
</ins><span class="cx" style="display: block; padding: 0 10px"> margin-left: calc(0.66 * var(--global--spacing-unit));
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: calc(0.66 * var(--global--spacing-unit));
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -4810,7 +4956,7 @@
</span><span class="cx" style="display: block; padding: 0 10px"> margin-right: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-@media only screen and (max-width: 591px) {
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+@media only screen and (max-width: 821px) {
</ins><span class="cx" style="display: block; padding: 0 10px"> .pagination .nav-links,
</span><span class="cx" style="display: block; padding: 0 10px"> .comments-pagination .nav-links {
</span><span class="cx" style="display: block; padding: 0 10px"> display: flex;
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -5214,4 +5360,4 @@
</span><span class="cx" style="display: block; padding: 0 10px"> min-width: auto;
</span><span class="cx" style="display: block; padding: 0 10px"> }
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-/*# sourceMappingURL=style.css.map */
</del><span class="cx" style="display: block; padding: 0 10px">\ No newline at end of file
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+/*# sourceMappingURL=style.css.map */
</ins></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyonetemplatepartsheadersiteheaderphp"></a>
<div class="modfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Modified: trunk/src/wp-content/themes/twentytwentyone/template-parts/header/site-header.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/template-parts/header/site-header.php 2020-11-02 19:11:32 UTC (rev 49477)
+++ trunk/src/wp-content/themes/twentytwentyone/template-parts/header/site-header.php 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -7,40 +7,15 @@
</span><span class="cx" style="display: block; padding: 0 10px"> * @since 1.0.0
</span><span class="cx" style="display: block; padding: 0 10px"> */
</span><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$has_primary_nav = has_nav_menu( 'primary' );
-
</del><span class="cx" style="display: block; padding: 0 10px"> $wrapper_classes = 'site-header';
</span><span class="cx" style="display: block; padding: 0 10px"> $wrapper_classes .= has_custom_logo() ? ' has-logo' : '';
</span><span class="cx" style="display: block; padding: 0 10px"> $wrapper_classes .= true === get_theme_mod( 'display_title_and_tagline', true ) ? ' has-title-and-tagline' : '';
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">-$wrapper_classes .= $has_primary_nav ? ' has-menu' : '';
</del><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+$wrapper_classes .= has_nav_menu( 'primary' ) ? ' has-menu' : '';
</ins><span class="cx" style="display: block; padding: 0 10px"> ?>
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <header id="masthead" class="<?php echo esc_attr( $wrapper_classes ); ?>" role="banner">
</span><span class="cx" style="display: block; padding: 0 10px">
</span><span class="cx" style="display: block; padding: 0 10px"> <?php get_template_part( 'template-parts/header/site-branding' ); ?>
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+ <?php get_template_part( 'template-parts/header/site-nav' ); ?>
</ins><span class="cx" style="display: block; padding: 0 10px">
</span><del style="background-color: #fdd; text-decoration:none; display:block; padding: 0 10px">- <?php if ( $has_primary_nav ) : ?>
- <nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>">
- <div class="menu-button-container">
- <button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false">
- <span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?>
- <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
- </span>
- <span class="dropdown-icon close"><?php esc_html_e( 'Close', 'twentytwentyone' ); ?>
- <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
- </span>
- </button><!-- #primary-mobile-menu -->
- </div><!-- .menu-button-container -->
- <?php
- wp_nav_menu(
- array(
- 'theme_location' => 'primary',
- 'menu_class' => 'menu-wrapper',
- 'container_class' => 'primary-menu-container',
- 'items_wrap' => '<ul id="primary-menu-list" class="%2$s">%3$s</ul>',
- )
- );
- ?>
- </nav><!-- #site-navigation -->
- <?php endif; ?>
</del><span class="cx" style="display: block; padding: 0 10px"> </header><!-- #masthead -->
</span></span></pre></div>
<a id="trunksrcwpcontentthemestwentytwentyonetemplatepartsheadersitenavphp"></a>
<div class="addfile"><h4 style="background-color: #eee; color: inherit; margin: 1em 0; padding: 1.3em; font-size: 115%">Added: trunk/src/wp-content/themes/twentytwentyone/template-parts/header/site-nav.php</h4>
<pre class="diff"><span>
<span class="info" style="display: block; padding: 0 10px; color: #888">--- trunk/src/wp-content/themes/twentytwentyone/template-parts/header/site-nav.php (rev 0)
+++ trunk/src/wp-content/themes/twentytwentyone/template-parts/header/site-nav.php 2020-11-02 19:43:07 UTC (rev 49478)
</span><span class="lines" style="display: block; padding: 0 10px; color: #888">@@ -0,0 +1,36 @@
</span><ins style="background-color: #dfd; text-decoration:none; display:block; padding: 0 10px">+<?php
+/**
+ * Displays the site navigation.
+ *
+ * @package WordPress
+ * @subpackage Twenty_Twenty_One
+ * @since 1.0.0
+ */
+
+?>
+
+<?php if ( has_nav_menu( 'primary' ) ) : ?>
+ <nav id="site-navigation" class="primary-navigation" role="navigation" aria-label="<?php esc_attr_e( 'Primary menu', 'twentytwentyone' ); ?>">
+ <div class="menu-button-container">
+ <button id="primary-mobile-menu" class="button" aria-controls="primary-menu-list" aria-expanded="false">
+ <span class="dropdown-icon open"><?php esc_html_e( 'Menu', 'twentytwentyone' ); ?>
+ <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'menu' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
+ </span>
+ <span class="dropdown-icon close"><?php esc_html_e( 'Close', 'twentytwentyone' ); ?>
+ <?php echo twenty_twenty_one_get_icon_svg( 'ui', 'close' ); // phpcs:ignore WordPress.Security.EscapeOutput ?>
+ </span>
+ </button><!-- #primary-mobile-menu -->
+ </div><!-- .menu-button-container -->
+ <?php
+ wp_nav_menu(
+ array(
+ 'theme_location' => 'primary',
+ 'menu_class' => 'menu-wrapper',
+ 'container_class' => 'primary-menu-container',
+ 'items_wrap' => '<ul id="primary-menu-list" class="%2$s">%3$s</ul>',
+ 'fallback_cb' => 'false',
+ )
+ );
+ ?>
+ </nav><!-- #site-navigation -->
+<?php endif; ?>
</ins></span></pre>
</div>
</div>
</body>
</html>