From f3520e7b39d51c158567ec01f05c3d0a2629f48c Mon Sep 17 00:00:00 2001 From: JC Date: Wed, 17 Jan 2024 02:39:09 +0800 Subject: [PATCH] Cleanup code --- .gitignore | 2 + assets/css/blocks/core/button.css | 72 +++++++++++++-------------- assets/css/blocks/core/cover.css | 5 +- assets/css/blocks/core/navigation.css | 41 +++++++++------ assets/css/global/forms.css | 12 ++--- assets/css/global/utility.css | 2 - assets/css/index.css | 6 +-- assets/js/header.js | 30 +++++------ assets/js/variations.js | 1 - composer.json | 2 +- style.css | 2 +- theme.json | 8 +-- 12 files changed, 97 insertions(+), 86 deletions(-) diff --git a/.gitignore b/.gitignore index 9bea433..086e8e6 100644 --- a/.gitignore +++ b/.gitignore @@ -1,2 +1,4 @@ .DS_Store +node_modules +vendor diff --git a/assets/css/blocks/core/button.css b/assets/css/blocks/core/button.css index 46cee4e..63bde26 100644 --- a/assets/css/blocks/core/button.css +++ b/assets/css/blocks/core/button.css @@ -1,5 +1,11 @@ /* -- Button -- */ +.wp-block-button .wp-block-button__link { + display: inline-flex; + justify-content: center; + align-items: center; +} + .wp-block-button .wp-block-button__link:disabled, .wp-block-button .wp-block-button__link[disabled] { cursor: not-allowed; @@ -7,41 +13,17 @@ opacity: 0.15; } -.wp-block-button .wp-block-button__link { - display: inline-flex; - justify-content: center; - align-items: center; -} - .wp-block-button .wp-block-button__link::after { - background-color: currentcolor; - content: ''; - display: inline-block; - height: 1rem; - mask-image: url( '../../../images/icon-circle-right.svg' ); - mask-size: contain; - margin-left: 0.5rem; - position: relative; - vertical-align: middle; - width: 1rem; -} - -.is-style-minimal.is-style-minimal.wp-block-button .wp-block-button__link, -.is-style-text.is-style-text.wp-block-button .wp-block-button__link { - background-color: transparent; - border: 0.063rem solid transparent; - color: var(--wp--preset--color--primary-500); - padding: 0.438rem 0.938rem; -} - -.is-style-outline.is-style-outline.wp-block-button .wp-block-button__link:hover, -.is-style-minimal.is-style-minimal.wp-block-button .wp-block-button__link:hover { - background-color: var(--wp--preset--color--primary-50); - border: 0.063rem solid var(--wp--preset--color--primary-500); -} - -.is-style-text.is-style-text.wp-block-button .wp-block-button__link:hover { - color: var(--wp--preset--color--primary-700); + background-color: currentcolor; + content: ""; + display: inline-block; + height: 1rem; + mask-image: url(../../../images/icon-circle-right.svg); + mask-size: contain; + margin-left: 0.5rem; + position: relative; + vertical-align: middle; + width: 1rem; } .medium.medium.wp-block-button .wp-block-button__link { @@ -51,7 +33,7 @@ .large.large.wp-block-button .wp-block-button__link { padding: 0.75rem 1rem; border-radius: 0.375rem; - border-size: 0.125rem; + border-width: 0.125rem; font-size: 1rem; } @@ -63,7 +45,7 @@ .xlarge.xlarge.wp-block-button .wp-block-button__link { padding: 1rem 1.5rem; border-radius: 0.375rem; - border-size: 0.125rem; + border-width: 0.125rem; font-size: 1.125rem; } @@ -72,3 +54,21 @@ width: 1.5rem; } +.is-style-minimal.is-style-minimal.wp-block-button .wp-block-button__link, +.is-style-text.is-style-text.wp-block-button .wp-block-button__link { + background-color: transparent; + border: 0.063rem solid transparent; + color: var(--wp--preset--color--primary-500); + padding: 0.438rem 0.938rem; +} + +.is-style-outline.is-style-outline.wp-block-button .wp-block-button__link:hover, +.is-style-minimal.is-style-minimal.wp-block-button +.wp-block-button__link:hover { + background-color: var(--wp--preset--color--primary-50); + border: 0.063rem solid var(--wp--preset--color--primary-500); +} + +.is-style-text.is-style-text.wp-block-button .wp-block-button__link:hover { + color: var(--wp--preset--color--primary-700); +} diff --git a/assets/css/blocks/core/cover.css b/assets/css/blocks/core/cover.css index c91a830..448555e 100644 --- a/assets/css/blocks/core/cover.css +++ b/assets/css/blocks/core/cover.css @@ -1,7 +1,8 @@ /* -- Cover -- */ -.wp-block-cover.is-style-gradient .has-background-dim:not([class*=-background-color]) { +.wp-block-cover.is-style-gradient +.has-background-dim:not([class*="-background-color"]) { background-color: transparent; - background-image: linear-gradient(to top, rgba(0,0,0,0.6), rgba(0,0,0,1)); + background-image: linear-gradient(to top, rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 1)); opacity: 1; } diff --git a/assets/css/blocks/core/navigation.css b/assets/css/blocks/core/navigation.css index 1e340e6..ada1c44 100644 --- a/assets/css/blocks/core/navigation.css +++ b/assets/css/blocks/core/navigation.css @@ -4,45 +4,54 @@ padding: var(--wp--custom--spacing--gap); } -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { +.wp-block-navigation__responsive-container.is-menu-open +.wp-block-navigation__responsive-container-content { padding-top: var(--wp--custom--spacing--gap); } .wp-block-navigation__responsive-container-close, .wp-block-navigation__responsive-container-open { - border: 0.063rem solid currentColor; + border: 0.063rem solid currentcolor; padding: 0.125rem; } /* -- Navigation Submenu -- */ -.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open, -.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { - background-color: var(--wp--preset--color--white); - color: var(--wp--preset--color--primary-500); -} - -.has-contrast-background-color .wp-block-navigation .wp-block-navigation__responsive-container.is-menu-open, +.has-contrast-background-color +.wp-block-navigation +.wp-block-navigation__responsive-container.is-menu-open, .has-contrast-background-color .wp-block-navigation__submenu-container { background-color: var(--wp--preset--color--primary-500); color: var(--wp--preset--color--white); } -.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { +.has-contrast-background-color .wp-block-navigation__submenu-container { + border-color: var(--wp--preset--color--white); +} + +.wp-block-navigation:not(.has-background) +.wp-block-navigation__responsive-container.is-menu-open, +.wp-block-navigation:not(.has-background) +.wp-block-navigation__submenu-container { + background-color: var(--wp--preset--color--white); + color: var(--wp--preset--color--primary-500); +} + +.wp-block-navigation:not(.has-background) +.wp-block-navigation__submenu-container { border-color: var(--wp--preset--color--primary-500); min-width: 180px !important; padding: 0.625rem; } -.has-contrast-background-color .wp-block-navigation__submenu-container { - border-color: var(--wp--preset--color--white); -} - -.wp-block-navigation :where(.wp-block-navigation__submenu-container) .wp-block-navigation-item__content { +.wp-block-navigation +:where(.wp-block-navigation__submenu-container) +.wp-block-navigation-item__content { padding: 0.125rem 0.625rem; } -.wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__submenu-container { +.wp-block-navigation__responsive-container.is-menu-open +.wp-block-navigation__submenu-container { padding-left: 0.625rem !important; padding-right: 0.625rem !important; padding-top: 0.313rem !important; diff --git a/assets/css/global/forms.css b/assets/css/global/forms.css index 134a8f7..5a82c25 100644 --- a/assets/css/global/forms.css +++ b/assets/css/global/forms.css @@ -15,12 +15,6 @@ textarea { width: 100%; } -input:focus, -textarea:focus { - filter: brightness(95%); - outline: none; -} - input[type="checkbox"], input[type="image"], input[type="radio"] { @@ -36,6 +30,12 @@ textarea { -webkit-appearance: none; } +input:focus, +textarea:focus { + filter: brightness(95%); + outline: none; +} + ::placeholder { color: var(--wp--preset--color--primary-500); font-size: var(--wp--preset--font-size--small); diff --git a/assets/css/global/utility.css b/assets/css/global/utility.css index f6862fd..9a35bc1 100644 --- a/assets/css/global/utility.css +++ b/assets/css/global/utility.css @@ -65,7 +65,6 @@ .is-style-hidden-mobile { display: none !important; } - } @media only screen and (max-width: 782px) { @@ -75,5 +74,4 @@ .wp-block-columns.is-style-column-reverse { flex-direction: column-reverse; } - } diff --git a/assets/css/index.css b/assets/css/index.css index 20338c0..b499fc2 100644 --- a/assets/css/index.css +++ b/assets/css/index.css @@ -1,5 +1,5 @@ /* -- Global site styles -- */ -@import 'global/global.css'; -@import 'global/forms.css'; -@import 'global/utility.css'; +@import "global/global.css"; +@import "global/forms.css"; +@import "global/utility.css"; diff --git a/assets/js/header.js b/assets/js/header.js index b4d01b6..4460e9d 100644 --- a/assets/js/header.js +++ b/assets/js/header.js @@ -1,26 +1,28 @@ // Add the .js-enabled class to the when JavaScript is detected -document.addEventListener('DOMContentLoaded', () => { - document.body.classList.add('js-enabled'); -}); +document.addEventListener( 'DOMContentLoaded', () => { + document.body.classList.add( 'js-enabled' ); +} ); // Cache the header element to avoid re-querying the DOM on each scroll -const powderHeader = document.querySelector(".site-header"); +const powderHeader = document.querySelector( '.site-header' ); // Initialize the last scroll top position let powderLastScrollTop = 0; // Function to handle the scroll event function handleScroll() { - if (powderHeader) { // Only proceed if the header exists - const scrollTop = window.pageYOffset || document.documentElement.scrollTop; + if ( powderHeader ) { + // Only proceed if the header exists + const scrollTop = + window.pageYOffset || document.documentElement.scrollTop; // Compare the new scroll position with the last scroll position - if (scrollTop > powderLastScrollTop) { + if ( scrollTop > powderLastScrollTop ) { // If scrolling down, hide the header - powderHeader.style.top = "-100%"; + powderHeader.style.top = '-100%'; } else { // If scrolling up, show the header - powderHeader.style.top = "0"; + powderHeader.style.top = '0'; } // Update the last scroll position @@ -32,14 +34,14 @@ function handleScroll() { let isThrottled = false; const powderThrottleDuration = 100; // milliseconds -window.addEventListener("scroll", () => { - if (!isThrottled) { +window.addEventListener( 'scroll', () => { + if ( ! isThrottled ) { handleScroll(); isThrottled = true; // Set a timeout to un-throttle after a certain duration - setTimeout(() => { + setTimeout( () => { isThrottled = false; - }, powderThrottleDuration); + }, powderThrottleDuration ); } -}); \ No newline at end of file +} ); diff --git a/assets/js/variations.js b/assets/js/variations.js index a1b0e5e..ee68d7a 100644 --- a/assets/js/variations.js +++ b/assets/js/variations.js @@ -1,4 +1,3 @@ - /** * Add Block Variations. * Example: diff --git a/composer.json b/composer.json index ddff80d..9db0b38 100644 --- a/composer.json +++ b/composer.json @@ -1,4 +1,4 @@ { - "name": "webdevstudios/powder", + "name": "webdevstudios/wds-bt", "type": "wordpress-theme" } diff --git a/style.css b/style.css index 3bfe43a..e96c514 100644 --- a/style.css +++ b/style.css @@ -14,4 +14,4 @@ Text Domain: powder Tags: block-patterns, block-styles, custom-colors, custom-logo, custom-menu, e-commerce, editor-style, full-site-editing, one-column, style-variations, translation-ready, wide-blocks */ -@import './assets/css/index.css'; +@import "./assets/css/index.css"; diff --git a/theme.json b/theme.json index 18323b3..927b695 100644 --- a/theme.json +++ b/theme.json @@ -418,7 +418,7 @@ "blocks": { "core/button": { "variations": { - "outline" : { + "outline": { "border": { "color": "var(--wp--preset--color--primary-500)", "style": "solid", @@ -608,7 +608,7 @@ } }, "variations": { - "plain" : { + "plain": { "border": { "style": "none" }, @@ -827,12 +827,12 @@ "customTemplates": [ { "name": "page-blank", - "postTypes": ["page"], + "postTypes": [ "page" ], "title": "Page: Blank" }, { "name": "page-no-title", - "postTypes": ["page"], + "postTypes": [ "page" ], "title": "Page: No Title" } ]