From 16766c3e87ceed66393f5f84ff4a31f442f74801 Mon Sep 17 00:00:00 2001 From: Nick Diego Date: Sat, 16 Dec 2023 10:59:00 -0600 Subject: [PATCH 1/3] Update code padding and use border-radius var. --- .../wporg-developer-2023/src/style/style.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss index d89864ec4..463cf8974 100644 --- a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss +++ b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss @@ -32,7 +32,7 @@ pre { padding: 20px; background-color: #f7f7f7; border: 1px solid var(--wp--preset--color--light-grey-1); - border-radius: 2px; + border-radius: var(--wp--custom--button--border--radius); overflow: scroll; } @@ -40,9 +40,9 @@ pre { display: inline-block; line-height: var(--wp--custom--body--extra-small--typography--line-height); background: var(--wp--preset--color--light-grey-2); - border-radius: 2px; - padding-inline-start: 3px; - padding-inline-end: 3px; + border-radius: var(--wp--custom--button--border--radius); + padding-inline-start: 0.25em; + padding-inline-end: 0.25em; max-width: 100%; } @@ -185,7 +185,7 @@ pre { padding: 4px 6px; background-color: var(--wp--preset--color--light-grey-2); font-size: var(--wp--preset--font-size--small); - border-radius: 2px; + border-radius: var(--wp--custom--button--border--radius); } .wporg-dot-link-list { @@ -435,7 +435,7 @@ pre { .wporg-developer-code-block { $half_padding: calc(var(--wp--preset--spacing--10) / 2); - $border_radius: 2px; + $border_radius: var(--wp--custom--button--border--radius); .wp-code-block-button-container { background-color: var(--wp--preset--color--light-grey-2); @@ -633,7 +633,7 @@ pre { color: var(--wp--custom--wporg-callout--color--text); background-color: var(--wp--custom--wporg-callout--color--background); border-width: 0; - border-radius: 2px; + border-radius: var(--wp--custom--button--border--radius); font-size: var(--wp--preset--font-size--small); &::before { From d04799caf3cdb922af5fe4b820e2996772b7b77c Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Mon, 22 Jan 2024 20:40:17 +0900 Subject: [PATCH 2/3] Remove redundant styles. --- .../themes/wporg-developer-2023/src/style/style.scss | 3 --- 1 file changed, 3 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss index 463cf8974..ca9b4cb62 100644 --- a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss +++ b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss @@ -182,10 +182,7 @@ pre { // Style code tags but not ones inside of the code block. .wporg-has-embedded-code *:not(.wp-block-code):not(.wp-code-block-button-container) > code { - padding: 4px 6px; - background-color: var(--wp--preset--color--light-grey-2); font-size: var(--wp--preset--font-size--small); - border-radius: var(--wp--custom--button--border--radius); } .wporg-dot-link-list { From 39fb3f1881842355267dde18e3cdad44ebcc41c9 Mon Sep 17 00:00:00 2001 From: ren <18050944+renintw@users.noreply.github.com> Date: Fri, 16 Feb 2024 04:44:03 +0900 Subject: [PATCH 3/3] Replace button with code for a better semantics. --- .../themes/wporg-developer-2023/src/style/style.scss | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss index ca9b4cb62..c8c26153c 100644 --- a/source/wp-content/themes/wporg-developer-2023/src/style/style.scss +++ b/source/wp-content/themes/wporg-developer-2023/src/style/style.scss @@ -32,7 +32,7 @@ pre { padding: 20px; background-color: #f7f7f7; border: 1px solid var(--wp--preset--color--light-grey-1); - border-radius: var(--wp--custom--button--border--radius); + border-radius: var(--wp--custom--code--border--radius); overflow: scroll; } @@ -40,7 +40,7 @@ pre { display: inline-block; line-height: var(--wp--custom--body--extra-small--typography--line-height); background: var(--wp--preset--color--light-grey-2); - border-radius: var(--wp--custom--button--border--radius); + border-radius: var(--wp--custom--code--border--radius); padding-inline-start: 0.25em; padding-inline-end: 0.25em; max-width: 100%; @@ -432,7 +432,7 @@ pre { .wporg-developer-code-block { $half_padding: calc(var(--wp--preset--spacing--10) / 2); - $border_radius: var(--wp--custom--button--border--radius); + $border_radius: var(--wp--custom--code--border--radius); .wp-code-block-button-container { background-color: var(--wp--preset--color--light-grey-2);