-
+
+
+
-
+
+
-
\ No newline at end of file
+
diff --git a/parts/post-footer.html b/parts/post-footer.html
index fdb92409..375c50ac 100644
--- a/parts/post-footer.html
+++ b/parts/post-footer.html
@@ -2,7 +2,7 @@
-
diff --git a/parts/search-contents.html b/parts/search-contents.html
index 41fa1b43..67562ad2 100644
--- a/parts/search-contents.html
+++ b/parts/search-contents.html
@@ -1,3 +1,3 @@
-
-
-
\ No newline at end of file
+
+
+
diff --git a/parts/search-menu.html b/parts/search-menu.html
index bdbdc0bd..ce5e5815 100644
--- a/parts/search-menu.html
+++ b/parts/search-menu.html
@@ -6,4 +6,4 @@
-
\ No newline at end of file
+
diff --git a/patterns/author-bio-avatar.php b/patterns/author-bio-avatar.php
new file mode 100644
index 00000000..e04fa759
--- /dev/null
+++ b/patterns/author-bio-avatar.php
@@ -0,0 +1,37 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/patterns/author-bio.php b/patterns/author-bio.php
new file mode 100644
index 00000000..5aaffd38
--- /dev/null
+++ b/patterns/author-bio.php
@@ -0,0 +1,35 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/readme.txt b/readme.txt
index 60ff96f6..dc52085e 100644
--- a/readme.txt
+++ b/readme.txt
@@ -1,32 +1,28 @@
-=== Newspack Block Theme ===
-Contributors: Automattic
-Requires at least: 5.8
-Tested up to: 5.9
-Requires PHP: 5.7
-License: GPLv2 or later
-License URI: http://www.gnu.org/licenses/gpl-2.0.html
-
-== Description ==
-
-
-
-== Changelog ==
-
-= 0.0.1 =
-* Initial release
-
-== Copyright ==
-
-Newspack Block Theme WordPress Theme, (C) 2023 Automattic
-Newspack Block Theme is distributed under the terms of the GNU GPL.
-Newspack Block Theme is based on Block Canvas (https://github.com/Automattic/themes/tree/trunk/block-canvas), (C) Automattic, [GPLv2 or later](http://www.gnu.org/licenses/gpl-2.0.html)
-
-This program is free software: you can redistribute it and/or modify
-it under the terms of the GNU General Public License as published by
-the Free Software Foundation, either version 2 of the License, or
-(at your option) any later version.
-
-This program is distributed in the hope that it will be useful,
-but WITHOUT ANY WARRANTY; without even the implied warranty of
-MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
-GNU General Public License for more details.
+=== Newspack Block Theme ===
+Contributors: Automattic
+Requires at least: 6.5
+Tested up to: 6.6
+Requires PHP: 8.0
+License: GPLv2 or later
+License URI: http://www.gnu.org/licenses/gpl-2.0.html
+
+== Changelog ==
+
+= 0.0.1 =
+* Initial release
+
+== Copyright ==
+
+Newspack Block Theme WordPress Theme, (C) 2024 Automattic
+Newspack Block Theme is distributed under the terms of the GNU GPL.
+Newspack Block Theme is based on Block Canvas (https://github.com/Automattic/themes/tree/trunk/block-canvas), (C) Automattic, [GPLv2 or later](http://www.gnu.org/licenses/gpl-2.0.html)
+
+This program is free software: you can redistribute it and/or modify
+it under the terms of the GNU General Public License as published by
+the Free Software Foundation, either version 2 of the License, or
+(at your option) any later version.
+
+This program is distributed in the hope that it will be useful,
+but WITHOUT ANY WARRANTY; without even the implied warranty of
+MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+GNU General Public License for more details.
diff --git a/src/js/front-end/menus/search-menu.js b/src/js/front-end/menus/search-menu.js
index 7609b98d..17b40925 100644
--- a/src/js/front-end/menus/search-menu.js
+++ b/src/js/front-end/menus/search-menu.js
@@ -5,13 +5,14 @@
*/
import { domReady } from '../utils'; // Global utils.
import { MENU_OPEN_CLASS_NAME } from './consts'; // Menu constants.
+import { createOverlay, removeOverlay } from './utils'; // Menu utils.
-// A class name to append to the body element when the mobile menu is open.
+// A class name to append to the body element when the search is open.
const openClassName = MENU_OPEN_CLASS_NAME + 'search-menu';
domReady( function () {
/**
- * Mobile Menu toggle and overlay JavaScript.
+ * Search toggle and overlay JavaScript.
*/
const body = document.body,
searchContain = document.querySelector( '.search-menu' ),
@@ -32,7 +33,7 @@ domReady( function () {
}
/**
- * @description Fires either the opening or closing functions for a menu.
+ * @description Fires either the opening or closing functions for the search.
* @param {event} event Click event.
*/
const searchMenuToggle = event => {
@@ -45,27 +46,25 @@ domReady( function () {
};
/**
- * @description Opens specifed slide-out menu.
+ * @description Opens specifed search.
*/
const openMenu = () => {
body.classList.add( openClassName );
- searchOpenButton.parentNode.classList.add( 'newspack-icon-close' );
- searchOpenButton.parentNode.classList.remove( 'newspack-icon-search' );
searchOpenButton.innerHTML = '
' + newspackScreenReaderText.close_search + '';
searchContents.querySelector( 'input[type="search"]' ).focus();
+ createOverlay();
};
/**
- * @description Closes specifed slide-out menu.
+ * @description Closes specifed search.
*/
const closeMenu = () => {
if ( ! body.classList.contains( openClassName ) ) {
return;
}
body.classList.remove( openClassName );
- searchOpenButton.parentNode.classList.add( 'newspack-icon-search' );
- searchOpenButton.parentNode.classList.remove( 'newspack-icon-close' );
searchOpenButton.innerHTML = '
' + newspackScreenReaderText.open_search + '';
+ removeOverlay();
};
document.addEventListener( 'keydown', event => {
@@ -74,7 +73,7 @@ domReady( function () {
}
} );
- // Find each mobile toggle and attaches an event listener.
+ // Find each search toggle and attaches an event listener.
for ( let i = 0; i < searchToggle.length; i++ ) {
searchToggle[ i ].addEventListener( 'click', searchMenuToggle, false );
}
diff --git a/src/scss/_base.scss b/src/scss/_base.scss
index 881d7dcb..062d8815 100644
--- a/src/scss/_base.scss
+++ b/src/scss/_base.scss
@@ -1,3 +1,4 @@
+@use 'sass-utils';
@use 'mixins';
/*
@@ -42,10 +43,58 @@ body .has-drop-cap:not(:focus)::first-letter {
}
// Lists
-ul, ol {
+ul,
+ol {
padding-left: var(--wp--preset--spacing--40);
}
+// Position
+.is-position {
+ &-fixed,
+ &-sticky {
+ top: 0;
+ z-index: sass-utils.$zindex-fixed-element;
+
+ .admin-bar &:is(header) {
+ top: var(--wp-admin--admin-bar--height);
+ }
+ }
+
+ &-fixed {
+ position: fixed;
+ }
+
+ &-sticky {
+ position: sticky;
+
+ &--mobile-only {
+ @include sass-utils.media(medium) {
+ position: inherit;
+ }
+ }
+
+ &--desktop-only {
+ @include sass-utils.media(small-only) {
+ position: inherit;
+ }
+ }
+ }
+}
+
+// Mobile-only
+.mobile-only {
+ @include sass-utils.media(medium) {
+ display: none !important;
+ }
+}
+
+// Desktop-only
+.desktop-only {
+ @include sass-utils.media(small-only) {
+ display: none !important;
+ }
+}
+
// Icons
[class*='newspack-icon'] {
line-height: 0;
@@ -62,9 +111,9 @@ ul, ol {
background-color: currentcolor;
content: '';
display: block;
- height: 24px;
- mask-size: 24px;
- width: 24px;
+ height: var(--wp--preset--spacing--40);
+ mask-size: var(--wp--preset--spacing--40);
+ width: var(--wp--preset--spacing--40);
}
}
}
@@ -89,8 +138,23 @@ ul, ol {
}
.entry-content {
- > :last-child:is( .alignfull ):is( .has-background ) {
- margin-bottom: calc( -1 * var( --wp--preset--spacing--80 ) ) !important;
+ > :last-child:is(.alignfull):is(.has-background),
+ > :last-child:is(.alignfull):is(.wp-block-cover) {
+ margin-bottom: calc(-1 * var(--wp--preset--spacing--80)) !important;
+ }
+}
+
+.page-template-no-title,
+.home.page {
+ .entry-content {
+ > :first-child:is(.alignfull):is(.has-background),
+ > :first-child:is(.alignfull):is(.wp-block-cover) {
+ margin-top: calc(-1 * var(--wp--preset--spacing--50)) !important;
+
+ @include sass-utils.media(medium) {
+ margin-top: calc(-1 * var(--wp--preset--spacing--80)) !important;
+ }
+ }
}
}
diff --git a/src/scss/_comments-overlay.scss b/src/scss/_comments-overlay.scss
index 8bde4034..6a2d828d 100644
--- a/src/scss/_comments-overlay.scss
+++ b/src/scss/_comments-overlay.scss
@@ -5,64 +5,22 @@
* Comments menu styles
*/
.comments-contents {
- background: var(--wp--preset--color--base);
- inset: 0 -100% 0 auto;
- margin: 0;
- max-width: var(--wp--custom--width--medium);
- opacity: 0;
- overflow: auto;
- padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
- position: fixed;
- right: -100%;
- transition: opacity 125ms ease-in-out, right 250ms ease-in-out;
- width: 100%;
- z-index: sass-utils.$zindex-overlay-menu;
-
- @include sass-utils.media( medium ) {
- padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
- }
-
- .admin-bar & {
- @include sass-utils.media( small ) {
- padding-top: 46px;
- }
-
- @include sass-utils.media( medium ) {
- padding-top: 32px;
- }
- }
-
- > * {
- visibility: hidden;
- }
-
- &:not( :has( .comment-respond ) ) {
+ &:not(:has(.comment-respond)) {
.wp-block-comments-title {
margin-top: 0;
}
}
-
- &:has( #disqus_thread ) { /* stylelint-disable-line */
- max-width: calc( ( var(--wp--custom--width--medium) - ( var(--wp--preset--spacing--50) * 5 ) ) / 6 * 7 + ( var(--wp--preset--spacing--50) * 6 ) );
- }
-}
-.comments-menu-toggle {
- &.newspack-icon-close {
- display: grid;
- height: 48px;
- margin-right: calc( -1 * var(--wp--preset--spacing--30) );
- place-items: center;
- width: 48px;
-
- @include sass-utils.media( medium ) {
- height: 64px;
- margin-right: calc( -1 * var(--wp--preset--spacing--40) );
- width: 64px;
- }
+ &:has(#disqus_thread) { /* stylelint-disable-line selector-id-pattern */
+ max-width: calc(
+ (var(--wp--style--global--content-size) - (var(--wp--preset--spacing--50) * 5)) / 6 * 7 +
+ (var(--wp--preset--spacing--50) * 6)
+ );
}
+}
- &:not( .newspack-icon-close ) {
+.comments-menu-toggle {
+ &:not(.newspack-icon-close) {
.wp-block-button__link {
align-items: center;
display: inline-flex;
@@ -71,10 +29,10 @@
&::before {
background: currentcolor;
- content: "";
- height: 24px;
+ content: '';
+ height: var(--wp--preset--spacing--40);
mask: url('../../src/images/icon-comments.svg') 0 0 no-repeat;
- width: 24px;
+ width: var(--wp--preset--spacing--40);
}
}
}
@@ -82,18 +40,6 @@
.menu-open--comments-menu {
.comments-contents {
- opacity: 1;
- right: 0;
-
- @include mixins.elevation( 3 );
-
- > * {
- visibility: visible;
- }
- }
-
- .overlay-mask {
- display: block;
- opacity: 1;
+ @include mixins.overlay-visible(right);
}
}
diff --git a/src/scss/_css-variables.scss b/src/scss/_css-variables.scss
index ec19e904..b5c99674 100644
--- a/src/scss/_css-variables.scss
+++ b/src/scss/_css-variables.scss
@@ -16,10 +16,15 @@
line-height: var(--wp--custom--line-height--small);
}
+.has-normal-font-size,
.has-medium-font-size {
line-height: var(--wp--custom--line-height--medium);
}
+.has-normal-font-size {
+ font-size: var(--wp--preset--font-size--medium) !important;
+}
+
.has-large-font-size {
line-height: var(--wp--custom--line-height--large);
}
@@ -28,10 +33,15 @@
line-height: var(--wp--custom--line-height--x-large);
}
+.has-huge-font-size,
.has-xx-large-font-size {
line-height: var(--wp--custom--line-height--xx-large);
}
+.has-huge-font-size {
+ font-size: var(--wp--preset--font-size--xx-large) !important;
+}
+
.has-xxx-large-font-size {
line-height: var(--wp--custom--line-height--xxx-large);
}
@@ -48,6 +58,35 @@
line-height: var(--wp--custom--line-height--xxxxxx-large);
}
+// Backward compatibility with the Classic Theme
+$colors: (
+ 'primary': var(--wp--preset--color--accent),
+ 'primary-variation': color-mix(in srgb, var(--wp--preset--color--accent) 80%, black),
+ 'secondary': var(--wp--preset--color--accent-2),
+ 'secondary-variation': color-mix(in srgb, var(--wp--preset--color--accent-2) 80%, black),
+ 'dark-gray': var(--wp--preset--color--contrast),
+ 'medium-gray': var(--wp--preset--color--contrast-3),
+ 'light-gray': var(--wp--preset--color--base-2),
+ 'white': var(--wp--preset--color--base),
+);
+
+@each $name, $var in $colors {
+ //! Custom background colors
+ .has-#{$name}-background-color {
+ background-color: $var !important;
+ }
+
+ //! Custom foreground colors
+ .has-#{$name}-color {
+ color: $var !important;
+ }
+
+ //! Custom border colors
+ .has-#{$name}-border-color {
+ border-color: $var !important;
+ }
+}
+
// Custom Classes
.align-items--baseline {
align-items: baseline !important;
diff --git a/src/scss/_forms.scss b/src/scss/_forms.scss
index 92e97b7f..2fac3a2d 100644
--- a/src/scss/_forms.scss
+++ b/src/scss/_forms.scss
@@ -8,7 +8,7 @@
label {
color: var(--wp--preset--color--contrast);
display: inline-block;
- font-family: var( --wp--preset--font-family--inter );
+ font-family: var(--wp--preset--font-family--inter);
font-size: var(--wp--preset--font-size--small);
font-weight: 600;
line-height: var(--wp--custom--line-height--small);
@@ -35,6 +35,15 @@ textarea {
@include mixins.input;
}
+input[type='search']::-webkit-search-cancel-button {
+ appearance: none;
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12 13.0607L15.7123 16.773L16.773 15.7123L13.0607 12L16.773 8.28772L15.7123 7.22706L12 10.9394L8.28769 7.22705L7.22703 8.28771L10.9393 12L7.22704 15.7123L8.2877 16.773L12 13.0607Z' fill='%231E1E1E'/%3E%3C/svg%3E");
+ background-size: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
+ cursor: pointer;
+ height: var(--wp--preset--spacing--40);
+ width: var(--wp--preset--spacing--40);
+}
+
input[type='checkbox'],
input[type='radio'] {
@include mixins.checkbox-radio;
@@ -48,32 +57,36 @@ input[type='radio'] {
@include mixins.radio;
}
-button:not( .components-button ):not( .newspack-ui__button ):not( .wp-block-navigation-submenu__toggle ),
-input[type='submit']:not( .newspack-ui__button ) {
- background: var( --wp--preset--color--accent );
+button:not([class]),
+input[type='submit']:not(.newspack-ui__button) {
+ background: var(--wp--preset--color--accent);
border: 0;
- border-radius: var( --newspack-ui-border-radius-m, var( --wp--custom--border--radius-medium ) );
- color: var( --wp--preset--color--base );
+ border-radius: var(--newspack-ui-border-radius-m, var(--wp--custom--border--radius-medium));
+ color: var(--wp--preset--color--base);
cursor: pointer;
- font-family: var( --newspack-ui-font-family, system-ui,sans-serif );
- font-size: var( --newspack-ui-font-size-s, var( --wp--preset--font-size--small ) );
+ font-family: var(--newspack-ui-font-family, system-ui, sans-serif);
+ font-size: var(--newspack-ui-font-size-s, var(--wp--preset--font-size--small));
font-weight: 600;
- line-height: var( --newspack-ui-line-height-s, var( --wp--custom--line-height--small ) );
- padding: var( --newspack-ui-spacer-2, calc( var( --wp--preset--spacing--20 ) * 1.5 ) ) var( --newspack-ui-spacer-5, var( --wp--preset--spacing--40 ) );
- @include sass-utils.all-transition;
+ line-height: var(--newspack-ui-line-height-s, var(--wp--custom--line-height--small));
+ padding: var(--newspack-ui-spacer-2, var(--wp--custom--spacing--25))
+ var(--newspack-ui-spacer-5, var(--wp--preset--spacing--40));
+ transition:
+ background 125ms ease-in-out,
+ color 125ms ease-in-out,
+ outline 125ms ease-in-out;
&:hover {
- background: color-mix( in srgb,var( --wp--preset--color--accent ) 80%,black );
- color: var( --wp--preset--color--base );
+ background: color-mix(in srgb, var(--wp--preset--color--accent) 80%, black);
+ color: var(--wp--preset--color--base);
}
&:focus {
- outline: 2px solid var( --newspack-ui-color-neutral-90, --wp--preset--color--contrast );
+ outline: 2px solid var(--newspack-ui-color-neutral-90, --wp--preset--color--contrast);
outline-offset: 1px;
}
&:disabled {
- background: color-mix( in srgb,var( --wp--preset--color--accent ) 20%,transparent );
+ background: color-mix(in srgb, var(--wp--preset--color--accent) 20%, transparent);
cursor: default;
}
}
diff --git a/src/scss/_header.scss b/src/scss/_header.scss
index 1bbabc81..e6b02971 100644
--- a/src/scss/_header.scss
+++ b/src/scss/_header.scss
@@ -1,69 +1,25 @@
@use 'sass-utils';
+@use 'mixins';
/**
* Mobile Header and Menu
*/
-.desktop-header {
- display: none;
-}
-
-@include sass-utils.media(medium) {
- .desktop-header {
- display: inherit;
- }
+.mobile-header {
+ width: 100%;
- .mobile-header {
- display: none;
+ > .wp-block-group {
+ width: inherit;
}
}
-// Overlay
-.overlay-mask {
- background: var( --wp--custom--color--mobile-menu-overlay );
- content: '';
- display: none;
- inset: 0;
- opacity: 0;
- position: fixed;
- transition: opacity 125ms ease-in-out;
- z-index: sass-utils.$zindex-overlay-mask;
-}
-
-.menu-open--mobile-menu .overlay-mask {
- display: block;
- opacity: 1;
-}
-
-// Mobile sidebar
+// Mobile menu
.mobile-sidebar {
- background: var(--wp--custom--color--mobile-menu-background);
- color: var(--wp--custom--color--mobile-menu-text);
- inset: 0 -100% 0 auto;
- opacity: 0;
- overflow: auto;
- padding: var(--wp--preset--spacing--50) var(--wp--preset--spacing--40);
- position: fixed;
- transition: opacity 0.2s;
- width: 100%;
- z-index: sass-utils.$zindex-overlay-menu;
-
- > * {
- visibility: hidden;
- }
-
- a {
- color: inherit;
+ .menu-open--mobile-menu & {
+ @include mixins.overlay-visible;
}
-}
-
-.menu-open--mobile-menu {
- .mobile-sidebar {
- opacity: 1;
- right: 0;
- > * {
- visibility: visible;
- }
+ &.wp-block {
+ display: none;
}
}
@@ -72,4 +28,4 @@
> header + * {
margin-top: 0;
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/_mixins.scss b/src/scss/_mixins.scss
index 963f88ad..d89d4d6f 100644
--- a/src/scss/_mixins.scss
+++ b/src/scss/_mixins.scss
@@ -1,52 +1,58 @@
@mixin input {
box-sizing: border-box;
- background-color: var( --wp--preset--color--base );
- border: 1px solid var( --wp--preset--color--base-4 );
- border-radius: var( --wp--custom--border--radius-medium );
- font-family: var( --wp--preset--font-family--inter );
- font-size: var( --wp--preset--font-size--small );
- line-height: var( --wp--custom--line-height--small );
- padding: calc( var( --wp--custom--spacing--25 ) - 1px );
- transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out, outline 125ms ease-in-out;
-
- @media ( prefers-contrast: more ) {
- border-color: var( --wp--preset--color--contrast-3 );
+ background-color: var(--wp--preset--color--base);
+ border: 1px solid var(--wp--preset--color--base-4);
+ border-radius: var(--wp--custom--border--radius-medium);
+ font-family: var(--wp--preset--font-family--inter);
+ font-size: var(--wp--preset--font-size--small);
+ line-height: var(--wp--custom--line-height--small);
+ padding: calc(var(--wp--custom--spacing--25) - 1px);
+ transition:
+ background-color 125ms ease-in-out,
+ border-color 125ms ease-in-out,
+ outline 125ms ease-in-out;
+
+ @media (prefers-contrast: more) {
+ border-color: var(--wp--preset--color--contrast-3);
}
&:focus {
- border-color: var( --wp--preset--color--contrast );
- outline: 2px solid var( --wp--preset--color--contrast );
+ border-color: var(--wp--preset--color--contrast);
+ outline: 2px solid var(--wp--preset--color--contrast);
outline-offset: -1px;
}
&:disabled {
- background-color: var( --wp--preset--color--base-2 );
- border-color: var( --wp--preset--color--base-4 );
+ background-color: var(--wp--preset--color--base-2);
+ border-color: var(--wp--preset--color--base-4);
- @media ( prefers-contrast: more ) {
- background-color: var( --wp--preset--color--base-3 );
- border-color: var( --wp--preset--color--contrast-3 );
+ @media (prefers-contrast: more) {
+ background-color: var(--wp--preset--color--base-3);
+ border-color: var(--wp--preset--color--contrast-3);
}
}
}
@mixin checkbox-radio {
appearance: none;
- background: white;
- border: 1px solid var( --wp--preset--color--base-4 );
+ background: white 50% 50% no-repeat;
+ border: 1px solid var(--wp--preset--color--base-4);
box-shadow: none;
color: white;
cursor: pointer;
display: inline-grid;
font: inherit;
- height: 20px !important;
+ height: var(--wp--custom--spacing--35) !important;
margin: 2px 0 0;
place-content: center;
- transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out, outline 125ms ease-in-out;
- width: 20px !important;
+ transition:
+ background 125ms ease-in-out,
+ border-color 125ms ease-in-out,
+ outline 125ms ease-in-out;
+ width: var(--wp--custom--spacing--35) !important;
- @media ( prefers-contrast: more ) {
- border-color: var( --wp--preset--color--contrast-3 );
+ @media (prefers-contrast: more) {
+ border-color: var(--wp--preset--color--contrast-3);
}
&::before {
@@ -56,6 +62,8 @@
}
&:checked {
+ background-color: var(--wp--preset--color--contrast);
+
&::before {
content: '';
opacity: 1;
@@ -63,16 +71,16 @@
}
&:focus {
- border-color: var( --wp--preset--color--base-4 );
- box-shadow: none;
- outline: unset;
+ border-color: var(--wp--preset--color--base-4);
+ box-shadow: none !important;
+ outline: unset !important;
}
&:focus-visible {
- outline: 2px solid var( --wp--preset--color--contrast );
+ outline: 2px solid var(--wp--preset--color--contrast) !important;
outline-offset: 1px;
- &:not( :checked ) {
+ &:not(:checked) {
border: 0;
outline-offset: -1px;
}
@@ -85,19 +93,19 @@
}
@mixin checkbox {
- border-radius: var( --wp--custom--border--radius-xx-small );
+ border-radius: var(--wp--custom--border--radius-xx-small);
&::before {
background: transparent
- url( "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white'%3E%3C/path%3E%3C/svg%3E" )
+ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white'%3E%3C/path%3E%3C/svg%3E")
0 0 no-repeat;
- height: 24px;
+ height: var(--wp--preset--spacing--40);
margin: 0;
- width: 24px;
+ width: var(--wp--preset--spacing--40);
}
&:checked {
- background: var( --wp--preset--color--contrast );
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Cpath d='M16.7 7.1l-6.3 8.5-3.3-2.5-.9 1.2 4.5 3.4L17.9 8z' fill='white'%3E%3C/path%3E%3C/svg%3E");
border-color: transparent;
}
}
@@ -106,96 +114,101 @@
border-radius: 100%;
&::before {
- background: var( --newspack-ui-color-neutral-0 );
+ background: var(--newspack-ui-color-neutral-0);
border-radius: 100%;
height: var(--wp--preset--spacing--20);
width: var(--wp--preset--spacing--20);
}
&:checked {
- background: var( --wp--preset--color--contrast );
- border-color: var( --wp--preset--color--contrast );
+ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' width='24' height='24'%3E%3Ccircle cx='12' cy='12' r='4' fill='white'/%3E%3C/svg%3E");
+ border-color: var(--wp--preset--color--contrast);
}
}
@mixin button-icon {
background: transparent;
display: grid;
- height: 36px;
+ height: var(--wp--custom--spacing--55);
margin: 0;
padding: 0;
place-items: center;
transition: background-color 125ms ease-in-out;
- width: 36px;
+ width: var(--wp--custom--spacing--55);
&:hover {
- background-color: var( --wp--preset--color--base-2 );
- background-color: color-mix( in srgb, var( --wp--preset--color--contrast ) 3.5%, transparent );
+ background-color: var(--wp--preset--color--base-2);
+ background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 3.5%, transparent);
}
&:focus {
- outline-color: var( --wp--preset--color--contrast ) !important;
- }
-}
-
-@mixin elevation($size: 1) {
- @if $size == 1 {
- box-shadow: 0 1px 10px rgba( 0, 0, 0, 0.07 );
- } @else if $size == 2 {
- box-shadow: 0 2px 20px rgba( 0, 0, 0, 0.14 );
- } @else if $size == 3 {
- box-shadow: 0 3px 30px rgba( 0, 0, 0, 0.21 );
+ outline-color: var(--wp--preset--color--contrast) !important;
}
}
-@mixin notice( $type, $margin: var( --wp--preset--spacing--50 ) 0 ) {
- --np--notice--color--border: var( --wp--custom--color--neutral-90 );
- --np--notice--color--background: var( --wp--custom--color--neutral-5 );
+@mixin notice($type, $margin: var(--wp--preset--spacing--50) 0) {
+ --np--notice--color--border: var(--wp--custom--color--neutral-90);
+ --np--notice--color--background: var(--wp--custom--color--neutral-5);
@if $type == error {
- --np--notice--color--border: var( --wp--custom--color--error-50 );
- --np--notice--color--background: var( --wp--custom--color--error-0 );
+ --np--notice--color--border: var(--wp--custom--color--error-50);
+ --np--notice--color--background: var(--wp--custom--color--error-0);
} @else if $type == success {
- --np--notice--color--border: var( --wp--custom--color--success-50 );
- --np--notice--color--background: var( --wp--custom--color--success-0 );
- } @else if $type == warning {
- --np--notice--color--border: var( --wp--custom--color--warning-30 );
- --np--notice--color--background: var( --wp--custom--color--warning-0 );
- }
-
- background-color: var( --np--notice--color--background );
- border-left: 3px solid var( --np--notice--color--border );
- border-radius: var( --wp--custom--border--radius-x-small );
- color: var( --wp--custom--color--neutral-90 );
- font-family: var( --wp--preset--font-family--inter );
- font-size: var( --wp--preset--font-size--x-small );
- line-height: var( --wp--custom--line-height--x-small );
+ --np--notice--color--border: var(--wp--custom--color--success-50);
+ --np--notice--color--background: var(--wp--custom--color--success-0);
+ } @else if $type == warning {
+ --np--notice--color--border: var(--wp--custom--color--warning-30);
+ --np--notice--color--background: var(--wp--custom--color--warning-0);
+ }
+
+ background-color: var(--np--notice--color--background);
+ border-left: 3px solid var(--np--notice--color--border);
+ border-radius: var(--wp--custom--border--radius-x-small);
+ color: var(--wp--custom--color--neutral-90);
+ font-family: var(--wp--preset--font-family--inter);
+ font-size: var(--wp--preset--font-size--x-small);
+ line-height: var(--wp--custom--line-height--x-small);
margin: $margin;
padding: 1rem;
}
-@mixin wpnbha-avatar( $width, $amount: 5 ) {
+@mixin wpnbha-avatar($width, $amount: 5) {
@for $i from 1 through $amount {
- &:has( > a:nth-child(#{$i}) ),
- &:has( > .avatar:nth-child(#{$i}) ) {
- grid-template-columns: calc( #{$i} * #{$width} - #{$i - 1} * var(--wp--preset--spacing--20 ) ) 1fr;
+ &:has(> a:nth-child(#{$i})),
+ &:has(> .avatar:nth-child(#{$i})) {
+ grid-template-columns:
+ calc(#{$i} * #{$width} - #{$i - 1} * var(--wp--preset--spacing--20))
+ 1fr;
> a + a:nth-child(#{$i}),
> .avatar + .avatar:nth-child(#{$i}) {
- margin-left: calc( #{$i - 1} * #{$width} - #{$i - 1} * var(--wp--preset--spacing--20 ) );
+ margin-left: calc(#{$i - 1} * #{$width} - #{$i - 1} * var(--wp--preset--spacing--20));
}
}
}
}
-@mixin cap-avatar( $width, $amount: 5 ) {
+@mixin cap-avatar($width, $amount: 5) {
@for $i from 1 through $amount {
- &:has( .wp-block-co-authors-plus-coauthor:nth-of-type(#{$i}) ) {
- padding-left: calc( #{$i} * #{$width} - #{$i - 1} * var(--wp--preset--spacing--20 ) );
+ &:has(.wp-block-co-authors-plus-coauthor:nth-of-type(#{$i})) {
+ padding-left: calc(#{$i} * #{$width} - #{$i - 1} * var(--wp--preset--spacing--20));
.wp-block-co-authors-plus-coauthor:nth-of-type(#{$i}) .wp-block-co-authors-plus-avatar {
- margin-left: calc( #{$i - 1} * #{$width} - #{$i - 1} * var(--wp--preset--spacing--20 ) );
+ margin-left: calc(#{$i - 1} * #{$width} - #{$i - 1} * var(--wp--preset--spacing--20));
}
}
}
}
+
+@mixin overlay-visible($position: left) {
+ opacity: 1;
+ @if $position == right {
+ right: 0;
+ } @else {
+ left: 0;
+ }
+
+ > * {
+ visibility: visible;
+ }
+}
diff --git a/src/scss/_overlay.scss b/src/scss/_overlay.scss
new file mode 100644
index 00000000..a0b0ca0d
--- /dev/null
+++ b/src/scss/_overlay.scss
@@ -0,0 +1,107 @@
+@use 'sass-utils';
+
+[class*='menu-open--'] {
+ overflow-y: hidden;
+
+ @include sass-utils.media(medium) {
+ &:not(.menu-open--search-menu) {
+ overflow-y: auto;
+ }
+ }
+}
+
+.overlay-mask {
+ background: var(--wp--custom--color--neutral-70);
+ display: none;
+ inset: 0;
+ opacity: 0;
+ position: fixed;
+ z-index: sass-utils.$zindex-overlay-mask;
+
+ [class*='menu-open--'] & {
+ animation: overlay-mask__fade-in-animation 500ms ease-in-out;
+ display: block;
+ opacity: 1;
+ }
+
+ .menu-open--search-menu & {
+ animation-duration: 250ms;
+ }
+}
+
+.overlay-contents {
+ background: var(--wp--preset--color--base);
+ box-shadow: var(--wp--preset--shadow--elevation-3);
+ color: var(--wp--preset--color--contrast);
+ max-width: calc(
+ var(--wp--preset--spacing--30) + var(--wp--style--global--content-size) +
+ var(--wp--preset--spacing--30)
+ );
+ opacity: 0;
+ overflow: auto;
+ padding: 0 var(--wp--preset--spacing--30) var(--wp--preset--spacing--30);
+ position: fixed;
+ width: 100%;
+ z-index: sass-utils.$zindex-overlay-menu;
+
+ @include sass-utils.media(medium) {
+ max-width: calc(
+ var(--wp--preset--spacing--40) + var(--wp--style--global--content-size) +
+ var(--wp--preset--spacing--40)
+ );
+ padding: 0 var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
+ }
+
+ &--left {
+ inset: 0 auto 0 -100%;
+ transition:
+ opacity 125ms ease-in-out,
+ left 250ms ease-in-out;
+ }
+
+ &--right {
+ inset: 0 -100% 0 auto;
+ transition:
+ opacity 125ms ease-in-out,
+ right 250ms ease-in-out;
+ }
+
+ .admin-bar & {
+ margin-top: var(--wp-admin--admin-bar--height);
+ }
+
+ > * {
+ visibility: hidden;
+ }
+
+ .newspack-icon-close {
+ display: grid;
+ margin-right: calc(-1 * var(--wp--preset--spacing--30));
+ padding: var(--wp--preset--spacing--30);
+ place-items: center;
+
+ @include sass-utils.media(medium) {
+ height: var(--wp--custom--spacing--85);
+ margin-right: calc(-1 * var(--wp--preset--spacing--40));
+ padding: 0;
+ width: var(--wp--custom--spacing--85);
+ }
+ }
+}
+
+@keyframes overlay-mask__fade-in-animation { /* stylelint-disable-line keyframes-name-pattern */
+ 0% {
+ display: none;
+ opacity: 0;
+ }
+
+ 1% {
+ display: block;
+ opacity: 0;
+ }
+
+ 100% {
+ display: block;
+ opacity: 1;
+ }
+}
diff --git a/src/scss/_sass-utils.scss b/src/scss/_sass-utils.scss
index ff456a39..d06d9b26 100644
--- a/src/scss/_sass-utils.scss
+++ b/src/scss/_sass-utils.scss
@@ -10,7 +10,7 @@ $large-screen: 1280px;
$xlarge-screen: 1312px;
// Z-indexes
-$zindex-sticky-header: 1000;
+$zindex-fixed-element: 1000;
$zindex-overlay-mask: 1999;
$zindex-overlay-menu: 2000;
$zindex-screen-reader-text: 100000; /* Above WP toolbar. */
@@ -27,6 +27,10 @@ $zindex-screen-reader-text: 100000; /* Above WP toolbar. */
@media only screen and (min-width: $small-screen) {
@content;
}
+ } @else if $class == small-only {
+ @media only screen and (max-width: $medium-screen - 1) {
+ @content;
+ }
} @else if $class == medium {
@media only screen and (min-width: $medium-screen) {
@content;
@@ -39,9 +43,9 @@ $zindex-screen-reader-text: 100000; /* Above WP toolbar. */
@media only screen and (min-width: $xlarge-screen) {
@content;
}
+ } @else {
+ @media only screen and (min-width: $class) {
+ @content;
+ }
}
}
-
-@mixin all-transition($transition: 125ms) {
- transition: all $transition ease-in-out;
-}
diff --git a/src/scss/_search-overlay.scss b/src/scss/_search-overlay.scss
index 6cdf45bf..20e2a3b5 100644
--- a/src/scss/_search-overlay.scss
+++ b/src/scss/_search-overlay.scss
@@ -1,17 +1,18 @@
@use 'sass-utils';
+@use 'mixins';
/**
* Search menu styles
*/
.search-contents {
- background: var(--wp--preset--color--base);
- inset: 0 -100% 0 auto;
+ left: 50%;
margin: 0;
+ max-width: var(--wp--style--global--content-size);
opacity: 0;
- overflow: auto;
- padding: var(--wp--preset--spacing--30);
+ overflow: visible;
position: fixed !important; // !important to override some styles in the editor.
- transition: opacity 0.125s;
+ top: -100%;
+ transform: translateX(-50%);
width: 100%;
z-index: sass-utils.$zindex-overlay-menu;
@@ -20,33 +21,636 @@
}
.wp-block-group {
- display: grid;
- height: 50vh;
- place-items: center;
width: 100%;
}
+
+ .wp-block-search {
+ box-shadow: var(--wp--preset--shadow--elevation-3);
+ }
}
.menu-open--search-menu {
+ overflow: hidden;
+
.search-contents {
+ animation: search-contents__fade-in-animation 250ms ease-in-out;
opacity: 1;
- right: 0;
+ top: calc(10vh + var(--wp--custom--spacing--75));
> * {
visibility: visible;
}
}
+}
+
+body .jetpack-instant-search {
+ --jp--color--text: var(--wp--custom--color--neutral-90);
+ --jp--color--text-light: var(--wp--custom--color--neutral-60);
+ --jp--color--background: var(--wp--custom--color--neutral-0);
+ --jp--color--background-light: var(--wp--custom--color--neutral-5);
+ --jp--color--border: var(--wp--custom--color--neutral-30);
+ --jp--sidebar--width: calc(
+ 1px + var(--wp--preset--spacing--30) + var(--wp--custom--width--x-small) +
+ var(--wp--preset--spacing--30)
+ );
+
+ &[class*='--dark'] {
+ --jp--color--text: var(--wp--custom--color--neutral-0);
+ --jp--color--text-light: var(--wp--custom--color--neutral-10);
+ --jp--color--background: var(--wp--custom--color--neutral-100);
+ --jp--color--background-light: var(--wp--custom--color--neutral-90);
+ --jp--color--border: var(--wp--custom--color--neutral-60);
- .search-menu-toggle {
- position: relative;
- z-index: calc(sass-utils.$zindex-overlay-menu + 1);
+ color: var(--jp--color--text);
+
+ button.jetpack-instant-search__overlay-close {
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.40456 5L19 19M5 19L18.5954 5' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") !important;
+ }
+
+ .jetpack-instant-search {
+ &__box {
+ &-gridicon {
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 11.5C18 14.5376 15.5376 17 12.5 17C11.103 17 9.82771 16.4792 8.85761 15.6211L5.49386 18.5644L4.5061 17.4355L7.87915 14.4841C7.32293 13.6246 7 12.6 7 11.5C7 8.46243 9.46243 6 12.5 6C15.5376 6 18 8.46243 18 11.5ZM16.5 11.5C16.5 13.7091 14.7091 15.5 12.5 15.5C10.2909 15.5 8.5 13.7091 8.5 11.5C8.5 9.29086 10.2909 7.5 12.5 7.5C14.7091 7.5 16.5 9.29086 16.5 11.5Z' fill='white'/%3E%3C/svg%3E");
+ }
+
+ &-input {
+ height: var(--wp--custom--spacing--75) !important;
+ }
+ }
+ }
}
-}
-.jetpack-instant-search {
- @include sass-utils.media(large) {
- .jetpack-instant-search__search-results-wrapper {
- max-width: 1020px;
+ a {
+ color: inherit;
+ text-decoration: none;
+
+ &:hover {
+ color: inherit;
+ text-decoration: underline;
+ }
+
+ &:focus {
+ color: inherit;
+ text-decoration: none;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text);
+ outline-offset: 1px;
+ }
+ }
+
+ button {
+ cursor: pointer;
+ font-family: inherit;
+
+ &#jetpack-instant-search__overlay-focus-anchor { /* stylelint-disable-line selector-id-pattern */
+ border-radius: var(--wp--custom--border--radius-medium);
+ border: 1px solid var(--jp--color--border);
+ color: var(--jp--color--text);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ font-weight: 600;
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ min-height: var(--wp--preset--spacing--50);
+ padding: calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) / 2 - 1px)
+ calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) - 1px);
+ transition: outline 125ms ease-in-out;
+
+ &:focus {
+ outline: 2px solid var(--jp--color--text) !important;
+ outline-offset: 1px;
+ }
+ }
+ }
+
+ &__overlay {
+ background: var(--wp--custom--color--neutral-70) !important;
+ color: var(--jp--color--text);
+ font-family: var(--newspack-ui-font-family, system-ui);
+ font-size: var(--newspack-ui-font-size-s, 16px);
+ line-height: var(--newspack-ui-line-height-s, 1.5);
+ padding: var(--wp--preset--spacing--30);
+
+ @include sass-utils.media('576px') {
+ padding: var(--wp--preset--spacing--80);
+ }
+
+ button.jetpack-instant-search__overlay-close {
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.40456 5L19 19M5 19L18.5954 5' stroke='%231E1E1E' stroke-width='1.5'/%3E%3C/svg%3E") !important;
+ background-position: 50% 50% !important;
+ background-repeat: no-repeat !important;
+ background-size: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40) !important;
+ border-bottom-color: var(--jp--color--border) !important;
+ flex: 0 0 var(--wp--custom--spacing--85);
+ height: calc(var(--wp--custom--spacing--85) + 1px);
+ width: var(--wp--custom--spacing--85);
+
+ > svg {
+ display: none;
+ }
+
+ &::before {
+ background: var(--jp--color--background);
+ border-radius: var(--newspack-ui-border-radius-m, 6px);
+ content: '';
+ display: block;
+ height: var(--wp--custom--spacing--55);
+ position: absolute;
+ transition:
+ background 125ms ease-in-out,
+ outline 125ms ease-in-out;
+ width: var(--wp--custom--spacing--55);
+ z-index: -1;
+ }
+
+ &:hover {
+ &::before {
+ background: var(--jp--color--background-light);
+ }
+ }
+
+ &:focus {
+ outline: unset !important;
+ }
+
+ &:focus-visible {
+ &::before {
+ outline: 2px solid var(--jp--color--text);
+ outline-offset: 1px;
+ }
+ }
+ }
+
+ button[class*='jetpack-instant-search'] {
+ background: none;
+ border-radius: 0;
+ color: inherit;
+ padding: 0;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ &__box {
+ border-color: var(--jp--color--border) !important;
+
+ &-label {
+ transition: outline 125ms ease-in-out;
+
+ &:focus-within {
+ border-radius: var(--newspack-ui-border-radius-m, 6px);
+ outline: 2px solid var(--jp--color--text);
+ outline-offset: -4px;
+ }
+ }
+
+ &-input {
+ &.search-field {
+ color: inherit !important;
+ font-size: inherit !important;
+ letter-spacing: 0 !important;
+ padding: 0 !important;
+ }
+
+ &:focus {
+ border-radius: 0;
+ margin: 0 !important;
+ outline: none !important;
+ }
+ }
+
+ &-gridicon {
+ background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M18 11.5C18 14.5376 15.5376 17 12.5 17C11.103 17 9.82771 16.4792 8.85761 15.6211L5.49386 18.5644L4.5061 17.4355L7.87915 14.4841C7.32293 13.6246 7 12.6 7 11.5C7 8.46243 9.46243 6 12.5 6C15.5376 6 18 8.46243 18 11.5ZM16.5 11.5C16.5 13.7091 14.7091 15.5 12.5 15.5C10.2909 15.5 8.5 13.7091 8.5 11.5C8.5 9.29086 10.2909 7.5 12.5 7.5C14.7091 7.5 16.5 9.29086 16.5 11.5Z' fill='%231E1E1E'/%3E%3C/svg%3E");
+ background-position: center;
+ background-repeat: no-repeat;
+ background-size: var(--wp--preset--spacing--40) var(--wp--preset--spacing--40);
+ height: var(--wp--custom--spacing--85);
+ min-width: var(--wp--custom--spacing--75);
+ width: var(--wp--preset--spacing--80);
+
+ > svg {
+ display: none;
+ }
+ }
+ }
+
+ &__search-results {
+ background: var(--jp--color--background);
+
+ &-wrapper {
+ border-radius: var(--wp--custom--border--radius-medium);
+ max-width: calc(
+ var(--wp--preset--spacing--80) + var(--wp--style--global--content-size) +
+ var(--wp--preset--spacing--80)
+ );
+
+ @include sass-utils.media('992px') {
+ &:has(.jetpack-instant-search__widget-area > *) {
+ max-width: calc(
+ var(--wp--preset--spacing--80) + var(--wp--style--global--content-size) +
+ var(--wp--preset--spacing--80) + var(--jp--sidebar--width)
+ );
+ }
+ }
+ }
+
+ &-filter-button {
+ border-radius: var(--wp--custom--border--radius-medium);
+ border: 1px solid var(--jp--color--border);
+ color: var(--jp--color--text);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ font-weight: 600;
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ min-height: var(--wp--preset--spacing--50);
+ padding: calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) / 2 - 1px)
+ calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) - 1px);
+ transition: background 125ms ease-in-out;
+
+ &:hover {
+ background: var(--jp--color--background-light);
+ text-decoration: none;
+ }
+ }
+
+ &-title {
+ color: inherit;
+ font-size: var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem));
+ line-height: var(--newspack-ui-line-height-m, 1.6);
+ margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40);
+
+ @include sass-utils.media('576px') {
+ margin-left: var(--wp--preset--spacing--80);
+ margin-right: var(--wp--preset--spacing--80);
+ }
+ }
+
+ &-list {
+ color: inherit;
+ margin: 0 var(--wp--preset--spacing--40);
+
+ @include sass-utils.media('576px') {
+ margin-left: var(--wp--preset--spacing--80);
+ margin-right: var(--wp--preset--spacing--80);
+ }
+
+ &.is-format-product {
+ display: grid;
+ gap: var(--wp--preset--spacing--30);
+ grid-template-columns: repeat(2, 1fr);
+ margin: 0 var(--wp--preset--spacing--40);
+ padding: 0;
+
+ @include sass-utils.media('576px') {
+ grid-template-columns: repeat(3, 1fr);
+ margin-left: var(--wp--preset--spacing--80);
+ margin-right: var(--wp--preset--spacing--80);
+ }
+
+ li {
+ margin: 0;
+ width: 100%;
+
+ h3 {
+ font-size: inherit;
+ line-height: inherit;
+ margin-top: var(--wp--preset--spacing--20);
+ }
+ }
+ }
+ }
+
+ &-expanded {
+ &__image {
+ border-radius: var(--newspack-ui-border-radius-m, 6px);
+
+ &-link {
+ margin-left: var(--wp--preset--spacing--50);
+ }
+ }
+ }
+
+ &-pagination {
+ font-weight: 600;
+ margin: var(--wp--preset--spacing--40);
+
+ @include sass-utils.media('576px') {
+ margin: var(--wp--preset--spacing--50) var(--wp--preset--spacing--80)
+ var(--wp--preset--spacing--80);
+ }
+
+ button {
+ background: var(--jp--color--text) !important;
+ border-radius: var(--wp--custom--border--radius-medium) !important;
+ color: var(--jp--color--background) !important;
+ padding: var(--newspack-ui-spacer-2, var(--wp--custom--spacing--25))
+ var(--newspack-ui-spacer-5, var(--wp--preset--spacing--40)) !important;
+ transition:
+ background 125ms ease-in-out,
+ color 125ms ease-in-out,
+ outline 125ms ease-in-out;
+
+ &:hover {
+ background: var(--jp--color--text-light) !important;
+ text-decoration: none !important;
+ }
+
+ &:focus {
+ box-shadow: none;
+ outline: unset !important;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text) !important;
+ outline-offset: 1px;
+ }
+
+ &:disabled {
+ background: var(--jp--color--text) !important;
+ cursor: wait;
+ pointer-events: none;
+ }
+ }
+ }
+
+ &-primary {
+ max-width: 100%;
+
+ @include sass-utils.media('992px') {
+ max-width: calc(100% - var(--jp--sidebar--width));
+ }
+ }
+
+ &-secondary {
+ border-color: var(--jp--color--border) !important;
+ color: inherit;
+ padding: 0 var(--wp--preset--spacing--30);
+ width: var(--jp--sidebar--width);
+
+ &.jetpack-instant-search__search-results-secondary--show-as-modal {
+ border-color: var(--jp--color--border);
+ box-shadow: var(--wp--preset--shadow--elevation-3);
+ inset: var(--wp--custom--spacing--05) var(--wp--preset--spacing--20) auto;
+ min-width: 1px;
+ padding: 0 var(--wp--preset--spacing--30);
+ }
+ }
+ }
+
+ &__search-result {
+ margin: 0 0 var(--wp--preset--spacing--50);
+
+ &-title {
+ font-size: var(--newspack-ui-font-size-l, clamp(1.25rem, 0.857rem + 0.803vw, 1.5rem));
+ font-weight: 700;
+ line-height: var(--newspack-ui-line-height-l, 1.5);
}
+
+ &-expanded {
+ &__title-link {
+ margin: 0 0 var(--wp--preset--spacing--20);
+ }
+
+ &__path {
+ color: var(--jp--color--text-light);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ margin: 0 0 var(--wp--preset--spacing--20);
+ }
+
+ &__content {
+ color: inherit;
+ font-size: inherit;
+
+ &:empty {
+ margin-bottom: calc(-1 * var(--wp--preset--spacing--20));
+ }
+
+ &-container {
+ gap: var(--wp--preset--spacing--20);
+
+ @include sass-utils.media('576px') {
+ gap: var(--wp--preset--spacing--50);
+ }
+ }
+ }
+
+ &__copy-container {
+ @include sass-utils.media('576px') {
+ width: calc(100% - 128px - var(--wp--preset--spacing--50));
+ }
+ }
+
+ &__image {
+ &-container {
+ &::before {
+ padding-top: 75%;
+
+ @include sass-utils.media('576px') {
+ padding-top: 100%;
+ }
+ }
+ }
+
+ &-link {
+ margin: 0;
+
+ &:has(div:empty) {
+ display: none;
+ }
+ }
+ }
+
+ &__footer {
+ margin-top: var(--wp--preset--spacing--20);
+
+ li {
+ margin-right: var(--wp--preset--spacing--40);
+ }
+
+ &-author,
+ &-date {
+ color: var(--jp--color--text-light);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ }
+ }
+ }
+
+ &-minimal-cats-and-tags {
+ color: var(--jp--color--text-light);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ }
+ }
+
+ &__search-filters {
+ > div {
+ margin-top: var(--wp--preset--spacing--30);
+ }
+
+ &-title {
+ color: inherit;
+ font-size: var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem));
+ line-height: var(--newspack-ui-line-height-m, 1.6);
+ }
+ }
+
+ &__search-filter {
+ &-sub-heading {
+ color: inherit;
+ }
+
+ &-list {
+ > div {
+ align-items: initial;
+ margin-top: var(--wp--preset--spacing--20);
+
+ input[type='checkbox'] {
+ position: relative;
+ @include mixins.checkbox-radio;
+ @include mixins.checkbox;
+
+ margin-top: 1px;
+ }
+ }
+ }
+ }
+
+ &__clear-filters {
+ &-link {
+ color: var(--jp--color--text-light) !important;
+ font-size: var(--newspack-ui-font-size-xs, 14px) !important;
+ height: calc(
+ var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem)) *
+ var(--newspack-ui-line-height-m, 1.6)
+ );
+ line-height: var(--newspack-ui-line-height-xs, 1.4286) !important;
+
+ &:focus {
+ outline: none !important;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text) !important;
+ }
+ }
+ }
+
+ &__search-sort-with-select {
+ margin-top: 0;
+ }
+
+ &__search-sort-select {
+ border-color: var(--jp--color--border);
+ border-radius: var(--newspack-ui-border-radius-m, 6px);
+ color: inherit;
+ min-height: var(--wp--preset--spacing--50);
+ padding: calc(var(--newspack-ui-spacer-base, var(--wp--preset--spacing--20)) / 2);
+ transition: outline 125ms ease-in-out;
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text);
+ outline-offset: -1px;
+ }
+ }
+
+ &__path-breadcrumb,
+ &__path-breadcrumb-link {
+ color: var(--jp--color--text-light);
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ max-width: 100%;
+ }
+
+ &__sidebar {
+ padding-top: var(--wp--preset--spacing--30);
+ }
+
+ &__search-form-controls {
+ color: inherit;
+ font-size: var(--newspack-ui-font-size-xs, 14px);
+ line-height: var(--newspack-ui-line-height-xs, 1.4286);
+ margin: var(--wp--preset--spacing--30) var(--wp--preset--spacing--40) 0;
+
+ @include sass-utils.media('576px') {
+ margin-left: var(--wp--preset--spacing--80);
+ margin-right: var(--wp--preset--spacing--80);
+ }
+
+ @include sass-utils.media('992px') {
+ height: calc(
+ var(--newspack-ui-font-size-m, clamp(1.125rem, 0.929rem + 0.402vw, 1.25rem)) *
+ var(--newspack-ui-line-height-m, 1.6)
+ );
+ right: var(--jp--sidebar--width);
+ }
+
+ .jetpack-instant-search__search-sort {
+ color: inherit;
+
+ & &-option {
+ color: inherit;
+ }
+ }
+ }
+
+ &__search-sort {
+ &-with-links {
+ font-size: inherit;
+ gap: var(--wp--custom--spacing--10);
+ }
+
+ &-option {
+ color: var(--jp--color--text-light) !important;
+
+ &.is-selected {
+ color: var(--jp--color--text) !important;
+ font-weight: 400 !important;
+ text-decoration: underline !important;
+ }
+
+ &:focus {
+ outline: none !important;
+ }
+
+ &:focus-visible {
+ outline: 2px solid var(--jp--color--text) !important;
+ outline-offset: 2px;
+ }
+ }
+ }
+
+ &__widget-area {
+ &-container {
+ margin-bottom: var(--wp--preset--spacing--30);
+ }
+
+ > div:not(:first-of-type) {
+ margin-top: var(--wp--preset--spacing--30) !important;
+ }
+ }
+
+ &__jetpack-colophon {
+ border-color: var(--jp--color--border) !important;
+
+ &-text {
+ color: inherit;
+ font-size: var(--newspack-ui-font-size-2xs, 12px);
+ line-height: var(--newspack-ui-line-height-2xs, 1.3333);
+ }
+ }
+}
+
+@keyframes search-contents__fade-in-animation { /* stylelint-disable-line keyframes-name-pattern */
+ 0% {
+ opacity: 0;
+ transform: translate(-50%, calc(-1 * var(--wp--preset--spacing--30)));
+ }
+
+ 100% {
+ opacity: 1;
+ transform: translate(-50%, 0);
}
}
diff --git a/src/scss/_theme-description.scss b/src/scss/_theme-description.scss
index 4a47c8ae..df469cb7 100644
--- a/src/scss/_theme-description.scss
+++ b/src/scss/_theme-description.scss
@@ -7,7 +7,7 @@ Description: A forward-looking news theme designed and developed to be highly cu
Requires at least: 6.5
Tested up to: 6.6
Requires PHP: 8.0
-Version: 1.10.0
+Version: 1.11.0-alpha.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Template:
diff --git a/src/scss/block-patterns/_block-patterns.scss b/src/scss/block-patterns/_block-patterns.scss
index 64047ba8..e8e1cde0 100644
--- a/src/scss/block-patterns/_block-patterns.scss
+++ b/src/scss/block-patterns/_block-patterns.scss
@@ -1,25 +1,25 @@
@use '../sass-utils';
.newspack-pattern {
- &.donations,
- &.subscribe {
- &__style-squeeze {
- .wp-block-media-text__content {
- padding: 0;
- grid-column: span 2;
+ &.donations,
+ &.subscribe {
+ &__style-squeeze {
+ .wp-block-media-text__content {
+ padding: 0;
+ grid-column: span 2;
- @include sass-utils.media(medium) {
- grid-column: auto;
- }
- }
+ @include sass-utils.media(medium) {
+ grid-column: auto;
+ }
+ }
- .wp-block-media-text__media {
- display: none;
+ .wp-block-media-text__media {
+ display: none;
- @include sass-utils.media(medium) {
- display: block;
- }
- }
- }
- }
-}
\ No newline at end of file
+ @include sass-utils.media(medium) {
+ display: block;
+ }
+ }
+ }
+ }
+}
diff --git a/src/scss/blocks/_blocks.scss b/src/scss/blocks/_blocks.scss
index bbde15cd..593b8208 100644
--- a/src/scss/blocks/_blocks.scss
+++ b/src/scss/blocks/_blocks.scss
@@ -3,8 +3,6 @@
@import url('./_co-authors-plus.scss');
@import url('./_column.scss');
@import url('./_columns.scss');
-@import url('./_homepage-articles.scss');
-@import url('./_image-compare.scss');
@import url('./_list.scss');
@import url('./_media-text.scss');
@import url('./_navigation.scss');
@@ -12,7 +10,6 @@
@import url('./_paragraph.scss');
@import url('./_pagination.scss');
@import url('./_post-author.scss');
-@import url('./_post-carousel.scss');
@import url('./_post-comments.scss');
@import url('./_post-content.scss');
@import url('./_post-terms.scss');
@@ -20,7 +17,12 @@
@import url('./_query.scss');
@import url('./_quote.scss');
@import url('./_separator.scss');
-@import url('./_sharing-buttons.scss');
@import url('./_search.scss');
@import url('./_table.scss');
-@import url('./_top-posts.scss');
+@import url('./jetpack/_image-compare.scss');
+@import url('./jetpack/_sharing-buttons.scss');
+@import url('./jetpack/_top-posts.scss');
+@import url('./newspack/_author-profile.scss');
+@import url('./newspack/_homepage-articles.scss');
+@import url('./newspack/_newsletters-subscribe.scss');
+@import url('./newspack/_post-carousel.scss');
diff --git a/src/scss/blocks/_button.scss b/src/scss/blocks/_button.scss
index d43e25cc..a771d7d3 100644
--- a/src/scss/blocks/_button.scss
+++ b/src/scss/blocks/_button.scss
@@ -1,22 +1,28 @@
.wp-block-buttons,
.wp-block-button {
- &[class*="-font-size"] {
+ &[class*='-font-size'] {
.wp-block-button__link {
line-height: inherit;
}
}
}
- .wp-block-button {
+.wp-block-button {
> .wp-block-button__link {
- transition: background-color 125ms ease-in-out, border-color 125ms ease-in-out, color 125ms ease-in-out, opacity 125ms ease-in-out, outline 125ms ease-in-out;
+ transition:
+ background-color 125ms ease-in-out,
+ border-color 125ms ease-in-out,
+ color 125ms ease-in-out,
+ opacity 125ms ease-in-out,
+ outline 125ms ease-in-out;
+ word-break: normal;
&:focus {
- outline: 2px solid var( --wp--preset--color--accent );
+ outline: 2px solid var(--wp--preset--color--accent);
outline-offset: 1px;
&.has-background {
- outline-color: var( --wp--preset--color--contrast );
+ outline-color: var(--wp--preset--color--contrast);
}
}
@@ -28,13 +34,21 @@
&.has-accent-2-background-color {
&:hover {
- background-color: color-mix( in srgb, var( --wp--preset--color--accent-2 ) 80%, black ) !important;
+ background-color: color-mix(
+ in srgb,
+ var(--wp--preset--color--accent-2) 80%,
+ black
+ ) !important;
}
}
&.has-contrast-color.has-base-background-color {
&:hover {
- background-color: color-mix( in srgb, var( --wp--preset--color--contrast ) 3.5%, transparent ) !important;
+ background-color: color-mix(
+ in srgb,
+ var(--wp--preset--color--contrast) 3.5%,
+ transparent
+ ) !important;
opacity: 1;
}
}
@@ -44,8 +58,8 @@
> .wp-block-button__link,
form .wp-block-button__link {
&:hover {
- background: var( --wp--preset--color--base-2 );
- color: var( --wp--preset--color--contrast );
+ background: var(--wp--preset--color--base-2);
+ color: var(--wp--preset--color--contrast);
}
&.has-background {
@@ -55,7 +69,7 @@
}
&:focus {
- outline-color: var( --wp--preset--color--contrast );
+ outline-color: var(--wp--preset--color--contrast);
}
}
}
@@ -66,7 +80,7 @@
&__link {
align-items: center;
display: inline-flex;
- min-height: var( --wp--custom--spacing--65 );
+ min-height: var(--wp--custom--spacing--65);
padding: 0.5rem 1rem;
}
}
@@ -74,7 +88,7 @@
.is-style-outline,
&.is-style-outline {
.wp-block-button__link {
- padding: calc( 0.5rem - 1px ) calc( 1rem - 1px ) !important;
+ padding: calc(0.5rem - 1px) calc(1rem - 1px) !important;
}
}
}
@@ -92,7 +106,7 @@
.is-style-outline,
&.is-style-outline {
.wp-block-button__link {
- padding: calc( 0.25rem - 1px ) calc( 0.5rem - 1px ) !important;
+ padding: calc(0.25rem - 1px) calc(0.5rem - 1px) !important;
}
}
}
diff --git a/src/scss/blocks/_co-authors-plus.scss b/src/scss/blocks/_co-authors-plus.scss
index 8c9afbfe..71af8698 100644
--- a/src/scss/blocks/_co-authors-plus.scss
+++ b/src/scss/blocks/_co-authors-plus.scss
@@ -1,9 +1,9 @@
@use '../mixins';
.wp-block-co-authors-plus-coauthors {
- &.cap-avatar {
- .wp-block-co-authors-plus-coauthor:not( :first-child ) {
- margin-left: -8px;
- }
- }
-}
\ No newline at end of file
+ &.cap-avatar {
+ .wp-block-co-authors-plus-coauthor:not(:first-child) {
+ margin-left: calc(-1 * var(--wp--preset--spacing--20));
+ }
+ }
+}
diff --git a/src/scss/blocks/_column.scss b/src/scss/blocks/_column.scss
index fd0f9166..7f885433 100644
--- a/src/scss/blocks/_column.scss
+++ b/src/scss/blocks/_column.scss
@@ -1,5 +1,5 @@
.wp-block-column {
&.is-style-rounded {
- border-radius: var( --wp--custom--border--radius-medium );
+ border-radius: var(--wp--custom--border--radius-medium);
}
}
diff --git a/src/scss/blocks/_columns.scss b/src/scss/blocks/_columns.scss
index 01d64ed2..f6ee7606 100644
--- a/src/scss/blocks/_columns.scss
+++ b/src/scss/blocks/_columns.scss
@@ -7,33 +7,33 @@
.wp-block-column:empty {
display: none;
- @include sass-utils.media( medium ) {
+ @include sass-utils.media(medium) {
display: inherit;
}
}
&.is-style-borders {
- gap: var( --wp--preset--spacing--80 ) !important;
+ gap: var(--wp--preset--spacing--80) !important;
> .wp-block-column::after {
- border-color: var( --wp--preset--color--base-3 );
- bottom: calc( -1 * var( --wp--preset--spacing--80 ) / 2 - 0.5px );
+ border-color: var(--wp--preset--color--base-3);
+ bottom: calc(-1 * var(--wp--preset--spacing--80) / 2 - 0.5px);
- @include sass-utils.media( medium ) {
+ @include sass-utils.media(medium) {
bottom: 0;
- right: calc( -1 * var( --wp--preset--spacing--80 ) / 2 - 0.5px );
+ right: calc(-1 * var(--wp--preset--spacing--80) / 2 - 0.5px);
}
.has-background &,
.has-text-color & {
border-color: currentcolor; // Fallback
- border-color: color-mix( in srgb, currentcolor 15%, transparent );
+ border-color: color-mix(in srgb, currentcolor 15%, transparent);
}
}
&.is-not-stacked-on-mobile {
> .wp-block-column::after {
- right: calc( -1 * var( --wp--preset--spacing--80 ) / 2 - 0.5px );
+ right: calc(-1 * var(--wp--preset--spacing--80) / 2 - 0.5px);
}
}
}
@@ -41,17 +41,17 @@
// Newspack Grid
.newspack-grid {
- @include sass-utils.media( large ) {
+ @include sass-utils.media(large) {
/* "25 / 50 / 25" layout */
.wp-block-column[style*='25%'] {
- max-width: 300px;
+ max-width: var(--wp--custom--width--x-small);
}
}
- @include sass-utils.media( x-large ) {
+ @include sass-utils.media(x-large) {
&.wp-block-columns {
display: grid;
- grid-template-columns: repeat( 12, 1fr );
+ grid-template-columns: repeat(12, 1fr);
}
& > * {
@@ -68,8 +68,8 @@
}
/* "33 / 33 / 33" layout */
- .wp-block-column:not( [style*='flex-basis'] ):nth-last-child( 3 ):first-child,
- .wp-block-column:not( [style*='flex-basis'] ):nth-last-child( 3 ):first-child ~ .wp-block-column {
+ .wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child,
+ .wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child ~ .wp-block-column {
grid-column-end: span 4;
}
@@ -99,23 +99,23 @@
}
/* "25 / 50 / 25" layout */
- &:has( .wp-block-column[style*='25%']:empty ):has( .wp-block-column[style*='50%'] ) {
+ &:has(.wp-block-column[style*='25%']:empty):has(.wp-block-column[style*='50%']) {
justify-content: center;
.wp-block-column[style*='50%'] {
flex-basis: 100% !important;
- max-width: var( --wp--style--global--content-size );
+ max-width: var(--wp--style--global--content-size);
}
.wp-block-column[style*='25%']:empty {
display: none;
- @include sass-utils.media( x-large ) {
+ @include sass-utils.media(x-large) {
display: inherit;
}
}
- &:has( :not( .wp-block-column[style*='25%']:empty ) ) {
+ &:has(:not(.wp-block-column[style*='25%']:empty)) {
.wp-block-column[style*='50%'] {
flex-basis: 75% !important;
}
@@ -124,10 +124,10 @@
}
.newspack-grid-small {
- @include sass-utils.media( x-large ) {
+ @include sass-utils.media(x-large) {
&.wp-block-columns {
display: grid;
- grid-template-columns: repeat( 6, 1fr );
+ grid-template-columns: repeat(6, 1fr);
}
& > * {
diff --git a/src/scss/blocks/_list.scss b/src/scss/blocks/_list.scss
index e8a07f3e..347f6f49 100644
--- a/src/scss/blocks/_list.scss
+++ b/src/scss/blocks/_list.scss
@@ -1,20 +1,30 @@
ul {
&.is-style-checked {
list-style-type: none;
- padding-left: calc( var( --wp--preset--spacing--40 ) + 0.25em );
+ padding-left: calc(var(--wp--preset--spacing--40) + 0.25em);
li {
position: relative;
&::before {
background: currentcolor;
- clip-path: polygon( 69.5833% 29.5834%, 43.3333% 65%, 29.5833% 54.5834%, 25.8333% 59.5834%, 44.5833% 73.75%, 74.5833% 33.3334%, 69.5833% 29.5834% );
+ clip-path: polygon(
+ 69.5833% 29.5834%,
+ 43.3333% 65%,
+ 29.5833% 54.5834%,
+ 25.8333% 59.5834%,
+ 44.5833% 73.75%,
+ 74.5833% 33.3334%,
+ 69.5833% 29.5834%
+ );
content: '';
display: block;
- height: var( --wp--preset--spacing--40 );
- left: calc( -1 * ( var( --wp--preset--spacing--40 ) + 0.25em ) );
+ height: var(--wp--preset--spacing--40);
+ left: calc(-1 * (var(--wp--preset--spacing--40) + 0.25em));
position: absolute;
- top: calc( ( 1em * var( --wp--custom--line-height--medium ) - var( --wp--preset--spacing--40 ) ) / 2 );
- width: var( --wp--preset--spacing--40 );
+ top: calc(
+ (1em * var(--wp--custom--line-height--medium) - var(--wp--preset--spacing--40)) / 2
+ );
+ width: var(--wp--preset--spacing--40);
}
}
@@ -22,34 +32,42 @@ ul {
&.has-xx-small-font-size,
.has-x-small-font-size &,
&.has-x-small-font-size {
- padding-left: calc( var( --wp--preset--spacing--30 ) + 0.25em );
+ padding-left: calc(var(--wp--preset--spacing--30) + 0.25em);
li::before {
- height: var( --wp--preset--spacing--30 );
- left: calc( -1 * ( var( --wp--preset--spacing--30 ) + 0.25em ) );
- top: calc( ( 1em * var( --wp--custom--line-height--xx-small ) - var( --wp--preset--spacing--30 ) ) / 2 );
- width: var( --wp--preset--spacing--30 );
+ height: var(--wp--preset--spacing--30);
+ left: calc(-1 * (var(--wp--preset--spacing--30) + 0.25em));
+ top: calc(
+ (1em * var(--wp--custom--line-height--xx-small) - var(--wp--preset--spacing--30)) / 2
+ );
+ width: var(--wp--preset--spacing--30);
}
}
.has-x-small-font-size &,
&.has-x-small-font-size {
li::before {
- top: calc( ( 1em * var( --wp--custom--line-height--x-small ) - var( --wp--preset--spacing--30 ) ) / 2 );
+ top: calc(
+ (1em * var(--wp--custom--line-height--x-small) - var(--wp--preset--spacing--30)) / 2
+ );
}
}
.has-small-font-size &,
&.has-small-font-size {
li::before {
- top: calc( ( 1em * var( --wp--custom--line-height--small ) - var( --wp--preset--spacing--40 ) ) / 2 );
+ top: calc(
+ (1em * var(--wp--custom--line-height--small) - var(--wp--preset--spacing--40)) / 2
+ );
}
}
.has-large-font-size &,
&.has-large-font-size {
li::before {
- top: calc( ( 1em * var( --wp--custom--line-height--large ) - var( --wp--preset--spacing--40 ) ) / 2 );
+ top: calc(
+ (1em * var(--wp--custom--line-height--large) - var(--wp--preset--spacing--40)) / 2
+ );
}
}
@@ -57,20 +75,24 @@ ul {
&.has-x-large-font-size,
.has-xx-large-font-size &,
&.has-xx-large-font-size {
- padding-left: calc( var( --wp--preset--spacing--50 ) + 0.25em );
+ padding-left: calc(var(--wp--preset--spacing--50) + 0.25em);
li::before {
- height: var( --wp--preset--spacing--50 );
- left: calc( -1 * ( var( --wp--preset--spacing--50 ) + 0.25em ) );
- top: calc( ( 1em * var( --wp--custom--line-height--x-large ) - var( --wp--preset--spacing--50 ) ) / 2 );
- width: var( --wp--preset--spacing--50 );
+ height: var(--wp--preset--spacing--50);
+ left: calc(-1 * (var(--wp--preset--spacing--50) + 0.25em));
+ top: calc(
+ (1em * var(--wp--custom--line-height--x-large) - var(--wp--preset--spacing--50)) / 2
+ );
+ width: var(--wp--preset--spacing--50);
}
}
.has-xx-large-font-size &,
&.has-xx-large-font-size {
li::before {
- top: calc( ( 1em * var( --wp--custom--line-height--xx-large ) - var( --wp--preset--spacing--40 ) ) / 2 );
+ top: calc(
+ (1em * var(--wp--custom--line-height--xx-large) - var(--wp--preset--spacing--40)) / 2
+ );
}
}
@@ -78,20 +100,26 @@ ul {
&.has-xxx-large-font-size,
.has-xxxx-large-font-size &,
&.has-xxxx-large-font-size {
- padding-left: calc( var( --wp--preset--spacing--50 ) * 1.5 + 0.25em );
+ padding-left: calc(var(--wp--preset--spacing--50) * 1.5 + 0.25em);
li::before {
- height: calc( var( --wp--preset--spacing--50 ) * 1.5 );
- left: calc( -1 * ( var( --wp--preset--spacing--50 ) * 1.5 + 0.25em ) );
- top: calc( ( 1em * var( --wp--custom--line-height--xxx-large ) - var( --wp--preset--spacing--50 ) * 1.5 ) / 2 );
- width: calc( var( --wp--preset--spacing--50 ) * 1.5 );
+ height: calc(var(--wp--preset--spacing--50) * 1.5);
+ left: calc(-1 * (var(--wp--preset--spacing--50) * 1.5 + 0.25em));
+ top: calc(
+ (1em * var(--wp--custom--line-height--xxx-large) - var(--wp--preset--spacing--50) * 1.5) /
+ 2
+ );
+ width: calc(var(--wp--preset--spacing--50) * 1.5);
}
}
.has-xxxx-large-font-size &,
&.has-xxxx-large-font-size {
li::before {
- top: calc( ( 1em * var( --wp--custom--line-height--xxxx-large ) - var( --wp--preset--spacing--50 ) * 1.5 ) / 2 );
+ top: calc(
+ (1em * var(--wp--custom--line-height--xxxx-large) - var(--wp--preset--spacing--50) * 1.5) /
+ 2
+ );
}
}
@@ -99,20 +127,26 @@ ul {
&.has-xxxxx-large-font-size,
.has-xxxxxx-large-font-size &,
&.has-xxxxxx-large-font-size {
- padding-left: calc( var( --wp--preset--spacing--50 ) * 2 + 0.25em );
+ padding-left: calc(var(--wp--preset--spacing--50) * 2 + 0.25em);
li::before {
- height: calc( var( --wp--preset--spacing--50 ) * 2 );
- left: calc( -1 * ( var( --wp--preset--spacing--50 ) * 2 + 0.25em ) );
- top: calc( ( 1em * var( --wp--custom--line-height--xxxxx-large ) - var( --wp--preset--spacing--50 ) * 2 ) / 2 );
- width: calc( var( --wp--preset--spacing--50 ) * 2 );
+ height: calc(var(--wp--preset--spacing--50) * 2);
+ left: calc(-1 * (var(--wp--preset--spacing--50) * 2 + 0.25em));
+ top: calc(
+ (1em * var(--wp--custom--line-height--xxxxx-large) - var(--wp--preset--spacing--50) * 2) /
+ 2
+ );
+ width: calc(var(--wp--preset--spacing--50) * 2);
}
}
.has-xxxxxx-large-font-size &,
&.has-xxxxxx-large-font-size {
li::before {
- top: calc( ( 1em * var( --wp--custom--line-height--xxxxxx-large ) - var( --wp--preset--spacing--50 ) * 2 ) / 2 );
+ top: calc(
+ (1em * var(--wp--custom--line-height--xxxxxx-large) - var(--wp--preset--spacing--50) * 2) /
+ 2
+ );
}
}
}
diff --git a/src/scss/blocks/_media-text.scss b/src/scss/blocks/_media-text.scss
index 0d21b84c..3c4d427c 100644
--- a/src/scss/blocks/_media-text.scss
+++ b/src/scss/blocks/_media-text.scss
@@ -1,18 +1,18 @@
.wp-block-media-text {
- & &__content {
- padding: var( --wp--preset--spacing--80 );
+ & &__content {
+ padding: var(--wp--preset--spacing--80);
- > * {
- margin-bottom: var( --wp--preset--spacing--50 );
- margin-top: var( --wp--preset--spacing--50 );
+ > * {
+ margin-bottom: var(--wp--preset--spacing--50);
+ margin-top: var(--wp--preset--spacing--50);
- &:first-child {
- margin-top: 0;
- }
+ &:first-child {
+ margin-top: 0;
+ }
- &:last-child {
- margin-bottom: 0;
- }
- }
- }
-}
\ No newline at end of file
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+}
diff --git a/src/scss/blocks/_navigation.scss b/src/scss/blocks/_navigation.scss
index 4ccfb693..9811e4b5 100644
--- a/src/scss/blocks/_navigation.scss
+++ b/src/scss/blocks/_navigation.scss
@@ -2,9 +2,9 @@
.wp-block-navigation {
// Give dropdowns a rounded border, a drop-shadow, and increase the top padding.
- .wp-block-navigation__submenu-container {
+ & &__submenu-container {
border-radius: var(--wp--custom--border--radius-x-small);
- box-shadow: 0 1px 2px rgba(black, 0.05);
+ box-shadow: var(--wp--preset--shadow--elevation-1);
overflow: hidden;
padding: var(--wp--preset--spacing--20) 0;
}
@@ -21,7 +21,7 @@
.wp-block-navigation-submenu__toggle[aria-expanded='true']
~ .wp-block-navigation__submenu-container,
.has-child:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
- min-width: 240px;
+ min-width: calc(var(--wp--custom--width--small) / 2);
}
// Don't add the box shadow/padding when using the default mobile view of the navigation block.
@@ -32,6 +32,75 @@
}
}
+ // Overlay Menu
+ &__responsive-container {
+ &.is-menu-open {
+ animation-duration: 125ms;
+ animation-timing-function: ease-in-out;
+ padding: var(--wp--custom--spacing--85) var(--wp--preset--spacing--30)
+ var(--wp--preset--spacing--30);
+
+ @include sass-utils.media(medium) {
+ padding: var(--wp--custom--spacing--85) var(--wp--preset--spacing--80)
+ var(--wp--preset--spacing--80);
+ }
+
+ .admin-bar & {
+ margin-top: var(--wp-admin--admin-bar--height);
+ }
+
+ .wp-block-navigation {
+ &__responsive-container-content {
+ padding-top: var(--wp--preset--spacing--30);
+ }
+ }
+ }
+
+ & &-close {
+ display: grid;
+ height: var(--wp--custom--spacing--85);
+ place-items: center;
+ right: calc(-1 * var(--wp--preset--spacing--30));
+ top: calc(-1 * var(--wp--custom--spacing--85));
+ width: var(--wp--custom--spacing--85);
+
+ @include sass-utils.media(medium) {
+ right: calc(-1 * var(--wp--preset--spacing--80));
+ }
+
+ &::before {
+ background: transparent;
+ border-radius: var(--wp--custom--border--radius-medium);
+ content: '';
+ display: block;
+ height: var(--wp--custom--spacing--55);
+ position: absolute;
+ transition:
+ background 125ms ease-in-out,
+ outline 125ms ease-in-out;
+ width: var(--wp--custom--spacing--55);
+ z-index: -1;
+ }
+
+ &:hover {
+ &::before {
+ background: var(--wp--custom--color--neutral-5);
+ }
+ }
+
+ &:focus {
+ &::before {
+ outline: 2px solid currentcolor;
+ outline-offset: 1px;
+ }
+ }
+ }
+ }
+
+ &__responsive-dialog {
+ margin-top: 0 !important;
+ }
+
// Change the block spacing when vertical.
&.is-vertical {
gap: var(--wp--preset--spacing--40);
@@ -58,16 +127,16 @@
overflow: visible;
}
- &:not( .has-background ) .wp-block-navigation__submenu-container {
+ &:not(.has-background) .wp-block-navigation__submenu-container {
background: transparent;
}
- &:not( .has-text-color ) .wp-block-navigation__submenu-container {
+ &:not(.has-text-color) .wp-block-navigation__submenu-container {
color: inherit;
}
.has-child {
- gap: var( --wp--preset--spacing--30 );
+ gap: var(--wp--preset--spacing--30);
.wp-block-navigation__submenu-container {
border: 0;
@@ -75,7 +144,7 @@
box-shadow: none;
gap: inherit;
height: unset;
- padding: 0 0 0 var( --wp--preset--spacing--30 );
+ padding: 0 0 0 var(--wp--preset--spacing--30);
position: static;
opacity: unset;
visibility: unset;
@@ -84,7 +153,7 @@
.wp-block-navigation__submenu-container,
.wp-block-navigation-submenu__toggle[aria-expanded='true']
~ .wp-block-navigation__submenu-container,
- &:not( .open-on-click ):hover > .wp-block-navigation__submenu-container {
+ &:not(.open-on-click):hover > .wp-block-navigation__submenu-container {
width: 100%;
}
@@ -95,15 +164,16 @@
}
&.has-background .has-child {
- gap: var( --wp--preset--spacing--20 );
+ gap: var(--wp--preset--spacing--20);
}
}
}
&.primary-navigation {
- row-gap: var( --wp--preset--spacing--20 );
+ row-gap: var(--wp--preset--spacing--20);
+
.wp-block-page-list > li {
- min-height: 36px;
+ min-height: var(--wp--custom--spacing--55);
}
}
@@ -114,15 +184,14 @@
transition: text-decoration-color 125ms ease-in-out;
transition-delay: 100ms;
- &:not( .wp-element-button ):hover {
+ &:not(.wp-element-button):hover {
text-decoration: underline;
text-decoration-color: currentcolor;
}
- &:not( .wp-element-button ):focus-visible {
+ &:not(.wp-element-button):focus-visible {
outline: 2px solid;
outline-offset: 1px;
}
-
}
}
diff --git a/src/scss/blocks/_nextpage.scss b/src/scss/blocks/_nextpage.scss
index 78b48329..db078d8b 100644
--- a/src/scss/blocks/_nextpage.scss
+++ b/src/scss/blocks/_nextpage.scss
@@ -1,36 +1,38 @@
.post-nav-links {
align-items: center;
- border-top: 1px solid var( --wp--preset--color--base-3 );
- color: var( --wp--preset--color--contrast-3 );
+ border-top: 1px solid var(--wp--preset--color--base-3);
+ color: var(--wp--preset--color--contrast-3);
display: flex;
- font-size: var( --wp--preset--font-size--small );
+ font-size: var(--wp--preset--font-size--small);
font-weight: 600;
- gap: var( --wp--custom--spacing--10 );
- line-height: var( --wp--custom--line-height--small );
- padding-top: var( --wp--preset--spacing--30 );
+ gap: var(--wp--custom--spacing--10);
+ line-height: var(--wp--custom--line-height--small);
+ padding-top: var(--wp--preset--spacing--30);
.post-page-numbers {
- border-radius: var( --wp--custom--border--radius-medium );
- color: var( --wp--preset--color--contrast );
+ border-radius: var(--wp--custom--border--radius-medium);
+ color: var(--wp--preset--color--contrast);
display: grid;
- height: var( --wp--custom--spacing--65 );
+ height: var(--wp--custom--spacing--65);
padding: 0;
place-content: center;
text-decoration: none;
- transition: background 125ms ease-in-out;
- width: var( --wp--custom--spacing--65 );
+ transition:
+ background 125ms ease-in-out,
+ color 125ms ease-in-out;
+ width: var(--wp--custom--spacing--65);
&.current {
- background: var( --wp--preset--color--accent );
- color: var( --wp--preset--color--base );
+ background: var(--wp--preset--color--accent);
+ color: var(--wp--preset--color--base);
}
&:first-child {
margin-left: auto;
}
- &:hover:not( .current ) {
- background: var( --wp--preset--color--base-2 );
+ &:hover:not(.current) {
+ background: var(--wp--preset--color--base-2);
}
}
}
diff --git a/src/scss/blocks/_pagination.scss b/src/scss/blocks/_pagination.scss
index 65e0c9fa..cb8189ba 100644
--- a/src/scss/blocks/_pagination.scss
+++ b/src/scss/blocks/_pagination.scss
@@ -15,23 +15,23 @@
.wp-block-comments-pagination-numbers,
.wp-block-query-pagination-numbers {
flex-wrap: wrap;
- gap: var( --wp--custom--spacing--10 );
+ gap: var(--wp--custom--spacing--10);
margin: 0;
a,
.current,
.dots {
- border-radius: var( --wp--custom--border--radius-medium );
- height: var( --wp--custom--spacing--65 );
+ border-radius: var(--wp--custom--border--radius-medium);
+ height: var(--wp--custom--spacing--65);
padding: 0;
text-decoration: none;
- width: var( --wp--custom--spacing--65 );
- @include sass-utils.all-transition;
+ transition: all 125ms ease-in-out;
+ width: var(--wp--custom--spacing--65);
}
.current {
- background: var( --wp--preset--color--accent );
- color: var( --wp--preset--color--base );
+ background: var(--wp--preset--color--accent);
+ color: var(--wp--preset--color--base);
}
}
@@ -40,27 +40,27 @@
display: none;
margin: 0;
- @include sass-utils.media( small ) {
+ @include sass-utils.media(small) {
display: block;
}
.is-arrow-arrow {
- border-radius: var( --wp--custom--border--radius-medium );
+ border-radius: var(--wp--custom--border--radius-medium);
display: grid;
- height: var( --wp--custom--spacing--65 );
+ height: var(--wp--custom--spacing--65);
margin: 0;
padding: 0;
place-items: center;
text-decoration: none;
- width: var( --wp--custom--spacing--65 );
- @include sass-utils.all-transition;
+ transition: all 125ms ease-in-out;
+ width: var(--wp--custom--spacing--65);
}
- &:has( .is-arrow-arrow ):hover {
+ &:has(.is-arrow-arrow):hover {
text-decoration: none;
.is-arrow-arrow {
- background: var( --wp--preset--color--base-2 );
+ background: var(--wp--preset--color--base-2);
}
}
}
@@ -71,12 +71,12 @@
&::before {
content: '';
display: block;
- height: var( --wp--custom--spacing--65 );
+ height: var(--wp--custom--spacing--65);
margin-inline-end: auto;
- width: var( --wp--custom--spacing--65 );
+ width: var(--wp--custom--spacing--65);
}
- &:has( .wp-block-query-pagination-previous ) {
+ &:has(.wp-block-query-pagination-previous) {
&::before {
display: none;
}
@@ -87,7 +87,7 @@
}
}
- &__container:not( :has( & ) ) {
+ &__container:not(:has(&)) {
display: none;
}
}
diff --git a/src/scss/blocks/_post-author.scss b/src/scss/blocks/_post-author.scss
index 055c69e8..cc5c12d5 100644
--- a/src/scss/blocks/_post-author.scss
+++ b/src/scss/blocks/_post-author.scss
@@ -12,7 +12,7 @@
&__avatar {
display: grid;
- margin-right: var( --wp--preset--spacing--20 );
+ margin-right: var(--wp--preset--spacing--20);
place-items: center;
img {
diff --git a/src/scss/blocks/_post-comments.scss b/src/scss/blocks/_post-comments.scss
index fe3f09c0..206a663e 100644
--- a/src/scss/blocks/_post-comments.scss
+++ b/src/scss/blocks/_post-comments.scss
@@ -23,12 +23,12 @@
}
}
- input:not([type="submit"]):not([type="checkbox"]),
- textarea {
- @include mixins.input;
- }
+ input:not([type='submit']):not([type='checkbox']),
+ textarea {
+ @include mixins.input;
+ }
- input[type="checkbox"] {
+ input[type='checkbox'] {
@include mixins.checkbox-radio;
@include mixins.checkbox;
}
@@ -60,7 +60,7 @@
.required {
color: var(--wp--custom--color--error-50);
}
-
+
.required-field-message {
display: block;
}
@@ -71,7 +71,7 @@
list-style: decimal;
padding-left: var(--wp--preset--spacing--40);
- &:has( .comment ) {
+ &:has(.comment) {
border-left: 1px solid var(--wp--preset--color--base-3);
list-style: none;
margin: var(--wp--preset--spacing--50) 0 0;
@@ -94,7 +94,7 @@
padding-bottom: var(--wp--preset--spacing--50);
}
- &:not( :has( .wp-block-comment-reply-link ) ) {
+ &:not(:has(.wp-block-comment-reply-link)) {
.wp-block-comment-content {
*:last-child {
margin-bottom: 0;
@@ -156,12 +156,12 @@
border-radius: var(--wp--custom--border--radius-x-small);
transition: color 125ms ease-in-out;
}
-
+
.bypostauthor & {
background: var(--wp--preset--color--base-2);
border-radius: var(--wp--custom--border--radius-x-small);
- &:not( :has(a) ) {
+ &:not(:has(a)) {
padding: 0 0.375em;
}
@@ -185,4 +185,4 @@
> .wp-block-comments-pagination-previous {
margin: 0;
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/blocks/_post-content.scss b/src/scss/blocks/_post-content.scss
index a4de4e61..93f0d311 100644
--- a/src/scss/blocks/_post-content.scss
+++ b/src/scss/blocks/_post-content.scss
@@ -1,8 +1,8 @@
.wp-block-post-content {
> .alignfull {
- margin-left: calc( -1 * var( --wp--preset--spacing--30 ) );
- margin-right: calc( -1 * var( --wp--preset--spacing--30 ) );
- padding-left: var( --wp--preset--spacing--30 );
- padding-right: var( --wp--preset--spacing--30 );
+ margin-left: calc(-1 * var(--wp--preset--spacing--30));
+ margin-right: calc(-1 * var(--wp--preset--spacing--30));
+ padding-left: var(--wp--preset--spacing--30);
+ padding-right: var(--wp--preset--spacing--30);
}
}
diff --git a/src/scss/blocks/_post-terms.scss b/src/scss/blocks/_post-terms.scss
index 285282b1..01f7de62 100644
--- a/src/scss/blocks/_post-terms.scss
+++ b/src/scss/blocks/_post-terms.scss
@@ -1,30 +1,31 @@
-@use '../sass-utils';
-
.wp-block-post-terms {
&.is-style-buttons {
align-items: center;
display: flex;
flex-wrap: wrap;
- font-size: var( --wp--preset--font-size--x-small );
+ font-size: var(--wp--preset--font-size--x-small);
font-weight: 400;
- gap: var( --wp--custom--spacing--10 );
+ gap: var(--wp--custom--spacing--10);
text-transform: none;
a,
- > span:not( [class*="wp-block-post-terms__"] ) {
- background: var( --wp--preset--color--base-2 );
- border-radius: var( --wp--custom--border--radius-small );
- color: var( --wp--preset--color--contrast );
+ > span:not([class*='wp-block-post-terms__']) {
+ background: var(--wp--preset--color--base-2);
+ border-radius: var(--wp--custom--border--radius-small);
+ color: var(--wp--preset--color--contrast);
display: grid;
font-weight: 600;
- min-height: var( --wp--preset--spacing--50 );
- padding: var( --wp--custom--spacing--10 ) var( --wp--preset--spacing--20 );
+ min-height: var(--wp--preset--spacing--50);
+ padding: var(--wp--custom--spacing--10) var(--wp--preset--spacing--20);
place-items: center;
-
- @include sass-utils.all-transition;
+ transition:
+ background 125ms ease-in-out,
+ color 125ms ease-in-out,
+ outline 125ms ease-in-out,
+ text-decoration 125ms ease-in-out;
&:hover {
- background: var( --wp--preset--color--base-3 );
+ background: var(--wp--preset--color--base-3);
text-decoration: none;
}
@@ -39,43 +40,43 @@
}
.wp-block-post-terms__prefix {
- padding-right: var( --wp--custom--spacing--10 );
+ padding-right: var(--wp--custom--spacing--10);
}
.wp-block-post-terms__suffix {
- padding-left: var( --wp--custom--spacing--10 );
+ padding-left: var(--wp--custom--spacing--10);
}
.wp-block-post-terms__separator {
display: none;
}
- &:not( [class*="-font-size"] ) {
- line-height: var( --wp--custom--line-height--x-small );
+ &:not([class*='-font-size']) {
+ line-height: var(--wp--custom--line-height--x-small);
}
- &[class*="-font-size"] {
+ &[class*='-font-size'] {
a,
- > span:not( [class*="wp-block-post-terms__"] ) {
- padding: var( --wp--custom--spacing--25 ) var( --wp--preset--spacing--40 );
+ > span:not([class*='wp-block-post-terms__']) {
+ padding: var(--wp--custom--spacing--25) var(--wp--preset--spacing--40);
}
}
&.has-background {
a,
- > span:not( [class*="wp-block-post-terms__"] ) {
- background: color-mix( in srgb, currentcolor 15%, transparent );
+ > span:not([class*='wp-block-post-terms__']) {
+ background: color-mix(in srgb, currentcolor 15%, transparent);
color: currentcolor;
&:hover {
- background: color-mix( in srgb, currentcolor 20%, transparent );
+ background: color-mix(in srgb, currentcolor 20%, transparent);
}
}
}
}
&.is-style-links {
- color: var( --wp--preset--color--contrast-3 );
+ color: var(--wp--preset--color--contrast-3);
font-size: var(--wp--preset--font-size--x-small);
font-weight: 400;
line-height: var(--wp--custom--line-height--x-small);
@@ -89,11 +90,11 @@
}
}
- > span:not( [class*="wp-block-post-terms__"] ) {
+ > span:not([class*='wp-block-post-terms__']) {
text-decoration: underline;
}
- &:not( .has-link-color ) {
+ &:not(.has-link-color) {
a {
color: inherit;
}
diff --git a/src/scss/blocks/_query.scss b/src/scss/blocks/_query.scss
index a68ca9b8..3fcbe287 100644
--- a/src/scss/blocks/_query.scss
+++ b/src/scss/blocks/_query.scss
@@ -1,5 +1,5 @@
.wp-block-query {
- .wp-block-post:not( .type-post ) {
+ .wp-block-post:not(.type-post) {
.post-meta,
.wp-block-post-author,
.wp-block-post-date {
@@ -7,8 +7,8 @@
}
}
- .wp-block-post:not( .has-post-thumbnail ) {
- .wp-block-columns:not( .block-editor-block-list__layout ) {
+ .wp-block-post:not(.has-post-thumbnail) {
+ .wp-block-columns:not(.block-editor-block-list__layout) {
display: block;
.wp-block-column {
diff --git a/src/scss/blocks/_search.scss b/src/scss/blocks/_search.scss
index fad31824..987ea011 100644
--- a/src/scss/blocks/_search.scss
+++ b/src/scss/blocks/_search.scss
@@ -2,16 +2,16 @@
.wp-block-search {
.wp-block-search__button.has-icon {
- height: 3rem;
+ height: var(--wp--custom--spacing--75);
line-height: 1;
- padding: var( --wp--custom--spacing--25 );
+ padding: var(--wp--custom--spacing--25);
svg {
- height: 36px;
+ height: var(--wp--custom--spacing--55);
min-height: 0;
min-width: 0;
vertical-align: middle;
- width: 36px;
+ width: var(--wp--custom--spacing--55);
}
}
@@ -26,18 +26,18 @@
width: 100%;
&:focus-within {
- outline: 2px solid var( --wp--preset--color--contrast );
+ outline: 2px solid var(--wp--preset--color--contrast);
outline-offset: -1px;
}
.wp-block-search__inside-wrapper {
- background-color: var( --wp--preset--color--base );
- border-color: var( --wp--preset--color--base-4 );
+ background-color: var(--wp--preset--color--base);
+ border-color: var(--wp--preset--color--base-4);
border-radius: var(--wp--custom--border--radius-medium);
box-sizing: border-box;
- @media ( prefers-contrast: more ) {
- border-color: var( --wp--preset--color--contrast-3 );
+ @media (prefers-contrast: more) {
+ border-color: var(--wp--preset--color--contrast-3);
}
}
@@ -56,16 +56,16 @@
&.wp-block-search__icon-button {
.wp-block-search__inside-wrapper {
- gap: calc( 0.625rem - 1px );
- padding: calc( 0.625rem - 1px );
+ gap: calc(0.625rem - 1px);
+ padding: calc(0.625rem - 1px);
&:has(> .has-small-font-size) {
- gap: calc( var( --wp--custom--spacing--15 ) - 1px );
- padding: calc( var( --wp--custom--spacing--15 ) - 1px );
+ gap: calc(var(--wp--custom--spacing--15) - 1px);
+ padding: calc(var(--wp--custom--spacing--15) - 1px);
.wp-block-search__input {
- padding-left: var( --wp--custom--spacing--15 );
- padding-right: var( --wp--custom--spacing--15 );
+ padding-left: var(--wp--custom--spacing--15);
+ padding-right: var(--wp--custom--spacing--15);
}
}
}
@@ -74,8 +74,8 @@
@include mixins.button-icon;
svg {
- height: 24px;
- width: 24px;
+ height: var(--wp--preset--spacing--40);
+ width: var(--wp--preset--spacing--40);
}
}
}
diff --git a/src/scss/blocks/_separator.scss b/src/scss/blocks/_separator.scss
index 9a83fcec..68e8968c 100644
--- a/src/scss/blocks/_separator.scss
+++ b/src/scss/blocks/_separator.scss
@@ -1,7 +1,7 @@
.wp-block-separator {
- &:not([class*="is-style-"]),
+ &:not([class*='is-style-']),
&.is-style-default {
- max-width: calc( var( --wp--preset--spacing--50 ) * 4 ) !important;
+ max-width: calc(var(--wp--preset--spacing--50) * 4) !important;
&.alignfull {
margin-left: auto;
@@ -13,15 +13,15 @@
background: transparent !important;
&::before {
- font-size: var( --wp--preset--font-size--x-large );
- letter-spacing: var( --wp--preset--spacing--80 );
- padding-left: var( --wp--preset--spacing--80 );
+ font-size: var(--wp--preset--font-size--x-large);
+ letter-spacing: var(--wp--preset--spacing--80);
+ padding-left: var(--wp--preset--spacing--80);
}
}
&.is-style-thick {
background: currentcolor;
border-bottom-width: 0;
- padding: var( --wp--preset--spacing--20 );
+ padding: var(--wp--preset--spacing--20);
}
}
diff --git a/src/scss/blocks/_sharing-buttons.scss b/src/scss/blocks/_sharing-buttons.scss
deleted file mode 100644
index 5d03098f..00000000
--- a/src/scss/blocks/_sharing-buttons.scss
+++ /dev/null
@@ -1,115 +0,0 @@
-@use '../sass-utils';
-
-.wp-block-jetpack-sharing-buttons {
- gap: var( --wp--custom--spacing--10 );
-
- .jetpack-sharing-button {
- &__button {
- margin: 0;
- @include sass-utils.all-transition;
-
- &.style-icon {
- line-height: 1;
- padding: calc( var( --wp--preset--spacing--20 ) * 0.875 );
- top: 0;
-
- svg {
- @include sass-utils.all-transition;
- }
-
- &:hover {
- svg {
- transform: scale(1.1111);
- }
- }
- }
-
- &.style-icon-text,
- &.style-text {
- background: var( --newspack-ui-color-neutral-0, var( --wp--preset--color--base ) );
- border: 1px solid var( --newspack-ui-color-neutral-30, var( --wp--preset--color--base-3 ) );
- border-radius: var( --wp--custom--border--radius-small );
- box-shadow: none;
- color: var( --newspack-ui-color-neutral-90, var( --wp--preset--color--contrast ) );
- font-family: var( --newspack-ui-font-family, system-ui, sans-serif );
- font-size: var( --wp--preset--font-size--x-small );
- font-weight: 600;
- gap: var( --wp--custom--spacing--10 );
- line-height: var( --wp--custom--line-height--x-small );
- min-height: var( --wp--preset--spacing--50 );
- min-width: var( --wp--preset--spacing--50 );
- padding: calc( var( --wp--custom--spacing--10 ) - 1px ) calc( var( --wp--preset--spacing--20 ) - 1px );
-
- &:hover {
- background: var( --newspack-ui-color-neutral-5, var( --wp--preset--color--base-2 ) );
- border-color: var( --newspack-ui-color-neutral-40, var( --wp--preset--color--base-4 ) );
- }
-
- &:focus-visible {
- outline: 2px solid;
- outline-offset: 1px;
- }
- }
- }
-
- &__service-label {
- margin: 0;
- }
- }
-
- &.has-normal-icon-size,
- &.has-large-icon-size,
- &.has-huge-icon-size {
- gap: var( --wp--preset--spacing--20 );
-
- svg {
- height: var( --wp--preset--spacing--40 );
- width: var( --wp--preset--spacing--40 );
- }
-
- .style-icon {
- padding: var( --wp--custom--spacing--15 );
-
- &:hover {
- svg {
- transform: scale(1.0833);
- }
- }
- }
- }
-
- &.has-large-icon-size,
- &.has-huge-icon-size {
- .style-icon-text,
- .style-text {
- border-radius: var( --wp--custom--border--radius-medium );
- font-size: var( --wp--preset--font-size--small );
- line-height: var( --wp--custom--line-height--small );
- min-height: calc( var( --wp--preset--spacing--20 ) * 5 );
- padding-left: var( --wp--preset--spacing--30 );
- padding-right: var( --wp--preset--spacing--30 );
- }
- }
-
- &.has-huge-icon-size {
- svg {
- height: var( --wp--preset--spacing--50 );
- width: var( --wp--preset--spacing--50 );
- }
-
- .style-icon {
- &:hover {
- svg {
- transform: scale(1.125);
- }
- }
- }
-
- .style-icon-text,
- .style-text {
- min-height: calc( var( --wp--preset--spacing--20 ) * 6 );
- padding-left: var( --wp--preset--spacing--40 );
- padding-right: var( --wp--preset--spacing--40 );
- }
- }
-}
diff --git a/src/scss/blocks/_table.scss b/src/scss/blocks/_table.scss
index b3837ab0..3aa9414b 100644
--- a/src/scss/blocks/_table.scss
+++ b/src/scss/blocks/_table.scss
@@ -6,7 +6,7 @@
td,
th {
- padding: var( --wp--preset--spacing--20 );
+ padding: var(--wp--preset--spacing--20);
}
table {
@@ -22,7 +22,7 @@
tfoot,
td,
th {
- border-color: var( --wp--preset--color--base-3 );
+ border-color: var(--wp--preset--color--base-3);
}
}
}
@@ -31,8 +31,8 @@
border-bottom: 0;
tbody {
- tr:nth-child( odd ) {
- background-color: var( --wp--preset--color--base-2 );
+ tr:nth-child(odd) {
+ background-color: var(--wp--preset--color--base-2);
}
}
}
diff --git a/src/scss/blocks/_image-compare.scss b/src/scss/blocks/jetpack/_image-compare.scss
similarity index 57%
rename from src/scss/blocks/_image-compare.scss
rename to src/scss/blocks/jetpack/_image-compare.scss
index c5b7cae4..1f5eac80 100644
--- a/src/scss/blocks/_image-compare.scss
+++ b/src/scss/blocks/jetpack/_image-compare.scss
@@ -1,6 +1,6 @@
.wp-block-jetpack-image-compare {
figcaption {
- font-size: var( --wp--preset--font-size--x-small ) !important;
+ font-size: var(--wp--preset--font-size--x-small) !important;
text-align: inherit !important;
}
}
diff --git a/src/scss/blocks/jetpack/_sharing-buttons.scss b/src/scss/blocks/jetpack/_sharing-buttons.scss
new file mode 100644
index 00000000..c5aabba8
--- /dev/null
+++ b/src/scss/blocks/jetpack/_sharing-buttons.scss
@@ -0,0 +1,118 @@
+.wp-block-jetpack-sharing-buttons {
+ gap: var(--wp--custom--spacing--10);
+
+ .jetpack-sharing-button {
+ &__button {
+ margin: 0;
+ transition:
+ background 125ms ease-in-out,
+ border-color 125ms ease-in-out,
+ color 125ms ease-in-out,
+ outline 125ms ease-in-out;
+
+ &.style-icon {
+ line-height: 1;
+ padding: calc(var(--wp--preset--spacing--20) * 0.875);
+ top: 0;
+
+ svg {
+ transition: transform 125ms ease-in-out;
+ }
+
+ &:hover {
+ svg {
+ transform: scale(1.1111);
+ }
+ }
+ }
+
+ &.style-icon-text,
+ &.style-text {
+ background: var(--newspack-ui-color-neutral-0, var(--wp--preset--color--base));
+ border: 1px solid var(--newspack-ui-color-neutral-30, var(--wp--preset--color--base-3));
+ border-radius: var(--wp--custom--border--radius-small);
+ box-shadow: none;
+ color: var(--newspack-ui-color-neutral-90, var(--wp--preset--color--contrast));
+ font-family: var(--newspack-ui-font-family, system-ui, sans-serif);
+ font-size: var(--wp--preset--font-size--x-small);
+ font-weight: 600;
+ gap: var(--wp--custom--spacing--10);
+ line-height: var(--wp--custom--line-height--x-small);
+ min-height: var(--wp--preset--spacing--50);
+ min-width: var(--wp--preset--spacing--50);
+ padding: calc(var(--wp--custom--spacing--10) - 1px)
+ calc(var(--wp--preset--spacing--20) - 1px);
+
+ &:hover {
+ background: var(--newspack-ui-color-neutral-5, var(--wp--preset--color--base-2));
+ border-color: var(--newspack-ui-color-neutral-40, var(--wp--preset--color--base-4));
+ }
+
+ &:focus-visible {
+ outline: 2px solid;
+ outline-offset: 1px;
+ }
+ }
+ }
+
+ &__service-label {
+ margin: 0;
+ }
+ }
+
+ &.has-normal-icon-size,
+ &.has-large-icon-size,
+ &.has-huge-icon-size {
+ gap: var(--wp--preset--spacing--20);
+
+ svg {
+ height: var(--wp--preset--spacing--40);
+ width: var(--wp--preset--spacing--40);
+ }
+
+ .style-icon {
+ padding: var(--wp--custom--spacing--15);
+
+ &:hover {
+ svg {
+ transform: scale(1.0833);
+ }
+ }
+ }
+ }
+
+ &.has-large-icon-size,
+ &.has-huge-icon-size {
+ .style-icon-text,
+ .style-text {
+ border-radius: var(--wp--custom--border--radius-medium);
+ font-size: var(--wp--preset--font-size--small);
+ line-height: var(--wp--custom--line-height--small);
+ min-height: calc(var(--wp--preset--spacing--20) * 5);
+ padding-left: var(--wp--preset--spacing--30);
+ padding-right: var(--wp--preset--spacing--30);
+ }
+ }
+
+ &.has-huge-icon-size {
+ svg {
+ height: var(--wp--preset--spacing--50);
+ width: var(--wp--preset--spacing--50);
+ }
+
+ .style-icon {
+ &:hover {
+ svg {
+ transform: scale(1.125);
+ }
+ }
+ }
+
+ .style-icon-text,
+ .style-text {
+ min-height: calc(var(--wp--preset--spacing--20) * 6);
+ padding-left: var(--wp--preset--spacing--40);
+ padding-right: var(--wp--preset--spacing--40);
+ }
+ }
+}
diff --git a/src/scss/blocks/_top-posts.scss b/src/scss/blocks/jetpack/_top-posts.scss
similarity index 51%
rename from src/scss/blocks/_top-posts.scss
rename to src/scss/blocks/jetpack/_top-posts.scss
index 15a15f61..0b654bd8 100644
--- a/src/scss/blocks/_top-posts.scss
+++ b/src/scss/blocks/jetpack/_top-posts.scss
@@ -1,17 +1,17 @@
.wp-block-jetpack-top-posts {
&.is-grid-layout {
.jetpack-top-posts-wrapper {
- gap: var( --wp--preset--spacing--50 );
+ gap: var(--wp--preset--spacing--50);
}
.jetpack-top-posts-mock-thumbnail {
- background-color: var( --wp--preset--color--base-2 );
+ background-color: var(--wp--preset--color--base-2);
}
}
&.is-list-layout {
.jetpack-top-posts-item {
- margin-bottom: var( --wp--preset--spacing--50 );
+ margin-bottom: var(--wp--preset--spacing--50);
&:last-of-type {
margin-bottom: 0;
@@ -22,20 +22,20 @@
.jetpack-top-posts-mock-thumbnail,
.jetpack-top-posts-thumbnail {
display: block;
- margin-bottom: var( --wp--preset--spacing--20 );
+ margin-bottom: var(--wp--preset--spacing--20);
}
.jetpack-top-posts-title {
- font-size: var( --wp--preset--font-size--medium );
+ font-size: var(--wp--preset--font-size--medium);
font-weight: 700;
- line-height: var( --wp--custom--line-height--medium );
+ line-height: var(--wp--custom--line-height--medium);
a {
- color: var( --wp--preset--color--contrast );
+ color: var(--wp--preset--color--contrast);
text-decoration: none;
&:hover {
- color: var( --wp--preset--color--contrast-3 );
+ color: var(--wp--preset--color--contrast-3);
}
}
}
diff --git a/src/scss/blocks/newspack/_author-profile.scss b/src/scss/blocks/newspack/_author-profile.scss
new file mode 100644
index 00000000..561f4401
--- /dev/null
+++ b/src/scss/blocks/newspack/_author-profile.scss
@@ -0,0 +1,247 @@
+@use '../../sass-utils';
+
+.wp-block-newspack-blocks-author-profile {
+ &[class*='text-size-'] {
+ font-size: inherit;
+ }
+
+ &__avatar {
+ margin-bottom: var(--wp--preset--spacing--30);
+
+ @include sass-utils.media(small) {
+ margin-bottom: 0;
+ margin-right: var(--wp--preset--spacing--30);
+ }
+ }
+
+ &__job-title,
+ &__employment {
+ color: var(--wp--preset--color--contrast);
+ font-size: var(--wp--preset--font-size--x-small) !important;
+ font-weight: 600;
+ line-height: var(--wp--custom--line-height--x-small);
+ }
+
+ &__bio {
+ color: var(--wp--preset--color--contrast-3);
+ font-size: var(--wp--preset--font-size--small);
+ line-height: var(--wp--custom--line-height--small);
+
+ h3 {
+ color: var(--wp--preset--color--contrast);
+ font-size: var(--wp--preset--font-size--large);
+ line-height: var(--wp--custom--line-height--large);
+ margin-bottom: var(--wp--preset--spacing--20);
+
+ a {
+ text-decoration: none;
+
+ &:hover {
+ text-decoration: underline;
+ }
+ }
+ }
+
+ a {
+ color: inherit;
+ }
+
+ p:not([class]) {
+ > a:last-of-type {
+ &::before {
+ content: '';
+ display: block;
+ height: var(--wp--preset--spacing--20);
+ }
+ }
+ }
+
+ > * {
+ margin-bottom: var(--wp--preset--spacing--20);
+ margin-top: var(--wp--preset--spacing--20);
+
+ &:first-child {
+ margin-top: 0;
+ }
+
+ &:last-child {
+ margin-bottom: 0;
+ }
+ }
+ }
+
+ &__social-links {
+ align-items: center;
+ display: flex;
+ flex-wrap: wrap;
+ font-size: var(--wp--preset--font-size--x-small);
+ gap: var(--wp--custom--spacing--10);
+ line-height: var(--wp--custom--line-height--x-small);
+ margin: var(--wp--preset--spacing--30) 0 0;
+ text-transform: uppercase;
+
+ li {
+ margin: 0;
+ }
+
+ a {
+ background: var(--wp--preset--color--base-2);
+ border-radius: var(--wp--custom--border--radius-small);
+ color: var(--wp--preset--color--contrast);
+ display: grid;
+ font-weight: 600;
+ min-height: var(--wp--preset--spacing--50);
+ padding: var(--wp--custom--spacing--10) var(--wp--preset--spacing--20);
+ place-items: center;
+ text-decoration: none;
+ transition:
+ background 125ms ease-in-out,
+ color 125ms ease-in-out,
+ outline 125ms ease-in-out;
+
+ &:hover {
+ background: var(--wp--preset--color--base-3);
+ text-decoration: none;
+ }
+
+ &:focus {
+ outline: none;
+ }
+
+ &:focus-visible {
+ outline: 2px solid;
+ outline-offset: 1px;
+ }
+ }
+ }
+
+ /* Block Styles */
+ @include sass-utils.media(small) {
+ &.avatar-right {
+ display: block;
+
+ &::after {
+ clear: both;
+ content: '';
+ display: table;
+ }
+ }
+
+ &.avatar-right &__avatar {
+ float: right;
+ margin-bottom: var(--wp--preset--spacing--30);
+ margin-left: var(--wp--preset--spacing--30);
+ }
+ }
+
+ &.is-style-center &__avatar {
+ float: none;
+ margin: 0 0 var(--wp--preset--spacing--30);
+ }
+
+ &.is-style-center &__bio {
+ p:not([class]) {
+ display: flex;
+ flex-wrap: wrap;
+ gap: var(--wp--preset--spacing--20);
+ justify-content: center;
+
+ p {
+ margin: 0;
+ }
+
+ > a:last-of-type {
+ &::before {
+ display: none;
+ }
+ }
+ }
+ }
+
+ /* Text Size */
+ &.text-size-small &__job-title,
+ &.text-size-small &__employment {
+ font-size: var(--wp--preset--font-size--xx-small) !important;
+ line-height: var(--wp--custom--line-height--xx-small);
+ }
+
+ &.text-size-small &__bio {
+ font-size: var(--wp--preset--font-size--x-small);
+ line-height: var(--wp--custom--line-height--x-small);
+
+ h3 {
+ font-size: var(--wp--preset--font-size--medium);
+ line-height: var(--wp--custom--line-height--medium);
+ }
+ }
+
+ &.text-size-large &__job-title,
+ &.text-size-large &__employment {
+ font-size: var(--wp--preset--font-size--small) !important;
+ line-height: var(--wp--custom--line-height--small);
+ }
+
+ &.text-size-large &__bio {
+ font-size: var(--wp--preset--font-size--medium);
+ line-height: var(--wp--custom--line-height--medium);
+
+ h3 {
+ font-size: var(--wp--preset--font-size--x-large);
+ line-height: var(--wp--custom--line-height--x-large);
+ }
+ }
+
+ &.text-size-extra-large &__job-title,
+ &.text-size-extra-large &__employment {
+ font-size: var(--wp--preset--font-size--medium) !important;
+ line-height: var(--wp--custom--line-height--medium);
+ }
+
+ &.text-size-extra-large &__bio {
+ font-size: var(--wp--preset--font-size--large);
+ line-height: var(--wp--custom--line-height--large);
+
+ h3 {
+ font-size: var(--wp--preset--font-size--xx-large);
+ line-height: var(--wp--custom--line-height--xx-large);
+ }
+ }
+}
+
+/* Has Text Color */
+.has-text-color {
+ .wp-block-newspack-blocks-author-profile {
+ color: inherit;
+
+ &__job-title,
+ &__employment {
+ color: inherit;
+ }
+
+ &__bio {
+ color: inherit;
+
+ h3 {
+ color: inherit;
+ }
+ }
+ }
+}
+
+/* Has Background Color */
+.has-background {
+ .wp-block-newspack-blocks-author-profile {
+ &__social-links {
+ color: inherit;
+
+ a {
+ background: color-mix(in srgb, currentcolor 15%, transparent);
+ color: currentcolor;
+
+ &:hover {
+ background: color-mix(in srgb, currentcolor 20%, transparent);
+ }
+ }
+ }
+ }
+}
diff --git a/src/scss/blocks/_homepage-articles.scss b/src/scss/blocks/newspack/_homepage-articles.scss
similarity index 87%
rename from src/scss/blocks/_homepage-articles.scss
rename to src/scss/blocks/newspack/_homepage-articles.scss
index 107996f5..5b367891 100644
--- a/src/scss/blocks/_homepage-articles.scss
+++ b/src/scss/blocks/newspack/_homepage-articles.scss
@@ -1,5 +1,5 @@
-@use '../sass-utils';
-@use '../mixins';
+@use '../../sass-utils';
+@use '../../mixins';
.wp-block-newspack-blocks-homepage-articles.wpnbha {
margin-bottom: auto;
@@ -21,7 +21,7 @@
a {
color: inherit;
text-decoration: none;
-
+
&:hover {
color: var(--wp--preset--color--contrast-3);
}
@@ -86,13 +86,13 @@
gap: var(--wp--preset--spacing--50);
}
- .post-thumbnail {
+ .post-thumbnail {
margin: 0;
}
}
&.mobile-stack:not(.image-aligntop) {
- .post-thumbnail {
+ .post-thumbnail {
margin-bottom: var(--wp--preset--spacing--30);
@include sass-utils.media(small) {
@@ -103,14 +103,23 @@
&.image-alignbehind {
article:has(figcaption) {
- padding-bottom: calc( var(--wp--custom--line-height--x-small) * var(--wp--preset--font-size--x-small) + var(--wp--preset--spacing--30) );
+ padding-bottom: calc(
+ var(--wp--custom--line-height--x-small) * var(--wp--preset--font-size--x-small) +
+ var(--wp--preset--spacing--30)
+ );
@include sass-utils.media(small) {
- padding-bottom: calc( var(--wp--custom--line-height--x-small) * var(--wp--preset--font-size--x-small) + var(--wp--preset--spacing--40) );
+ padding-bottom: calc(
+ var(--wp--custom--line-height--x-small) * var(--wp--preset--font-size--x-small) +
+ var(--wp--preset--spacing--40)
+ );
}
@include sass-utils.media(medium) {
- padding-bottom: calc( var(--wp--custom--line-height--x-small) * var(--wp--preset--font-size--x-small) + var(--wp--preset--spacing--50) );
+ padding-bottom: calc(
+ var(--wp--custom--line-height--x-small) * var(--wp--preset--font-size--x-small) +
+ var(--wp--preset--spacing--50)
+ );
}
}
@@ -120,7 +129,9 @@
color: rgba(white, 0.85);
font-style: initial;
margin: 0;
- max-height: calc( var(--wp--custom--line-height--x-small) * var(--wp--preset--font-size--x-small) );
+ max-height: calc(
+ var(--wp--custom--line-height--x-small) * var(--wp--preset--font-size--x-small)
+ );
padding: var(--wp--preset--spacing--30);
@include sass-utils.media(small) {
@@ -173,7 +184,11 @@
.has-text-color & {
article {
border-color: currentcolor; // Fallback
- border-color: color-mix(in srgb, currentcolor 15%, transparent); // #DDDDDD if currentcolor is #1E1E1E
+ border-color: color-mix(
+ in srgb,
+ currentcolor 15%,
+ transparent
+ ); // #DDDDDD if currentcolor is #1E1E1E
}
}
@@ -189,7 +204,7 @@
article {
margin-bottom: var(--wp--preset--spacing--30);
padding-bottom: var(--wp--preset--spacing--30);
-
+
&:last-of-type:not(:first-of-type) {
padding-bottom: 0;
}
@@ -199,13 +214,13 @@
&.image-alignbehind {
article {
border: 0;
- margin-bottom: calc( var(--wp--preset--spacing--50) + 1px);
+ margin-bottom: calc(var(--wp--preset--spacing--50) + 1px);
padding-bottom: 0;
&::after {
background: var(--wp--preset--color--base-3);
- bottom: calc( var(--wp--preset--spacing--50) / -2 );
- content: "";
+ bottom: calc(var(--wp--preset--spacing--50) / -2);
+ content: '';
display: block;
height: 1px;
margin: 0;
@@ -226,7 +241,11 @@
.has-text-color & {
article::after {
background: currentcolor; // Fallback
- background: color-mix(in srgb, currentcolor 15%, transparent); // #DDDDDD if currentcolor is #1E1E1E
+ background: color-mix(
+ in srgb,
+ currentcolor 15%,
+ transparent
+ ); // #DDDDDD if currentcolor is #1E1E1E
}
}
}
@@ -246,7 +265,7 @@
}
&.colgap-3 .article-section-title {
- margin-bottom: calc( -1 * var(--wp--preset--spacing--30) );
+ margin-bottom: calc(-1 * var(--wp--preset--spacing--30));
}
}
@@ -286,37 +305,40 @@
display: grid;
font-size: var(--wp--preset--font-size--x-small);
grid-template-areas:
- "byline"
- "date";
+ 'byline'
+ 'date';
line-height: var(--wp--custom--line-height--x-small);
margin: var(--wp--preset--spacing--20) 0 0;
- row-gap: calc( var(--wp--preset--spacing--20) / 2);
.byline {
margin: 0;
grid-area: byline;
}
-
+
.entry-date {
grid-area: date;
}
+ &:has(.entry-date):has(.byline) {
+ row-gap: var(--wp--custom--spacing--10);
+ }
+
&:has(.avatar) {
column-gap: var(--wp--preset--spacing--20);
grid-template-areas:
- "avatar byline"
- "avatar date";
+ 'avatar byline'
+ 'avatar date';
- @include mixins.wpnbha-avatar( $width: 48px );
+ @include mixins.wpnbha-avatar($width: 48px);
&:not(:has(.entry-date)) {
- @include mixins.wpnbha-avatar( $width: 24px );
-
+ @include mixins.wpnbha-avatar($width: 24px);
+
.avatar {
- height:24px;
+ height: 24px;
width: 24px;
}
-
+
.byline {
grid-row: span 2;
}
@@ -328,9 +350,9 @@
}
.avatar {
- height: 48px;
+ height: var(--wp--custom--spacing--75);
margin: 0;
- width: 48px;
+ width: var(--wp--custom--spacing--75);
}
}
}
@@ -433,7 +455,7 @@
line-height: var(--wp--custom--line-height--small);
}
}
-
+
&.ts-1 article {
.entry-title {
font-size: var(--wp--preset--font-size--x-small);
@@ -456,7 +478,7 @@
&.is-error {
.error {
- @include mixins.notice( error, var(--wp--preset--spacing--20) 0 0 );
+ @include mixins.notice(error, var(--wp--preset--spacing--20) 0 0);
}
}
}
@@ -529,7 +551,7 @@
&.is-3,
&.is-4 {
- article {
+ article {
grid-template-columns: repeat(4, 1fr);
}
@@ -708,7 +730,10 @@
/* "33 / 33 / 33" layout */
.newspack-grid .wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child &,
- .newspack-grid .wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child ~ .wp-block-column & {
+ .newspack-grid
+ .wp-block-column:not([style*='flex-basis']):nth-last-child(3):first-child
+ ~ .wp-block-column
+ & {
@include homepage-articles-grid-30;
}
@@ -739,4 +764,4 @@
@include homepage-articles-grid-70;
}
}
-}
\ No newline at end of file
+}
diff --git a/src/scss/blocks/newspack/_newsletters-subscribe.scss b/src/scss/blocks/newspack/_newsletters-subscribe.scss
new file mode 100644
index 00000000..9a2f2927
--- /dev/null
+++ b/src/scss/blocks/newspack/_newsletters-subscribe.scss
@@ -0,0 +1,11 @@
+.wp-block-newspack-newsletters-subscribe {
+ &.is-style-modern {
+ .submit-button {
+ transition: opacity 125ms ease-in-out;
+
+ &:hover {
+ opacity: 0.8;
+ }
+ }
+ }
+}
diff --git a/src/scss/blocks/_post-carousel.scss b/src/scss/blocks/newspack/_post-carousel.scss
similarity index 100%
rename from src/scss/blocks/_post-carousel.scss
rename to src/scss/blocks/newspack/_post-carousel.scss
diff --git a/src/scss/style.scss b/src/scss/style.scss
index b06d2ec5..ac281b78 100644
--- a/src/scss/style.scss
+++ b/src/scss/style.scss
@@ -3,6 +3,7 @@
@import url('./_base.scss');
@import url('./_forms.scss');
@import url('./_gutenberg-shim.scss');
+@import url('./_overlay.scss');
@import url('./blocks/_blocks.scss');
@import url('./block-patterns/_block-patterns.scss');
@import url('./_header.scss');
diff --git a/templates/page/no-title.html b/templates/page/no-title.html
new file mode 100644
index 00000000..a5bb9f68
--- /dev/null
+++ b/templates/page/no-title.html
@@ -0,0 +1,7 @@
+
+
+
+
+
+
+
diff --git a/templates/single/large-image.html b/templates/single/large-image.html
index 2a9d86fa..f9c4b561 100644
--- a/templates/single/large-image.html
+++ b/templates/single/large-image.html
@@ -3,7 +3,7 @@
-
+
diff --git a/theme.json b/theme.json
index aed1047f..d5216f47 100644
--- a/theme.json
+++ b/theme.json
@@ -76,7 +76,7 @@
{
"name": "Elevation 3",
"slug": "elevation-3",
- "shadow": "0 3px 30px #00000020"
+ "shadow": "0 3px 30px #00000021"
},
{
"name": "Elevation 4",
@@ -300,10 +300,7 @@
"warning-40": "#BD8600",
"warning-30": "#DBA617",
"warning-5": "#F5E6AB",
- "warning-0": "#FCF9E8",
- "mobile-menu-text": "var( --wp--custom--color--neutral-0 )",
- "mobile-menu-background": "var( --wp--custom--color--neutral-90 )",
- "mobile-menu-overlay": "var( --wp--custom--color--neutral-70 )"
+ "warning-0": "#FCF9E8"
},
"line-height": {
"xx-small": "1.3333333333",
@@ -316,21 +313,27 @@
"xxx-large": "1.25",
"xxxx-large": "1.125",
"xxxxx-large": "1.1",
- "xxxxxx-large": "1.08333333333"
+ "xxxxxx-large": "1.0833333333"
},
"spacing": {
"00": "0",
+ "05": "0.125rem",
"10": "0.25rem",
"15": "0.375rem",
"25": "0.75rem",
+ "35": "1.25rem",
+ "45": "1.75rem",
+ "55": "2.25rem",
"65": "2.5rem",
- "75": "3rem"
+ "75": "3rem",
+ "85": "4rem"
},
"width": {
"x-small": "300px",
"small": "410px",
"medium": "632px",
- "large": "964px"
+ "large": "964px",
+ "x-large": "1296px"
}
}
},
@@ -385,6 +388,7 @@
"variations": {
"outline": {
"border": {
+ "color": "currentcolor",
"style": "solid",
"width": "1px"
},
@@ -1070,12 +1074,19 @@
],
"title": "Page - Blank with Footer"
},
+ {
+ "name": "page/no-title",
+ "postTypes": [
+ "page"
+ ],
+ "title": "Page - No Title"
+ },
{
"name": "single/large-image",
"postTypes": [
"post"
],
- "title": "Single - Large Image (960px)"
+ "title": "Single - Large Image (964px)"
},
{
"name": "single/wide-image",