diff --git a/source/wp-content/themes/wporg-developer-2023/images/chevron-small.svg b/source/wp-content/themes/wporg-developer-2023/images/chevron-small.svg
new file mode 100644
index 000000000..657abe18b
--- /dev/null
+++ b/source/wp-content/themes/wporg-developer-2023/images/chevron-small.svg
@@ -0,0 +1,3 @@
+
diff --git a/source/wp-content/themes/wporg-developer-2023/images/dot.svg b/source/wp-content/themes/wporg-developer-2023/images/dot.svg
new file mode 100644
index 000000000..a811a62aa
--- /dev/null
+++ b/source/wp-content/themes/wporg-developer-2023/images/dot.svg
@@ -0,0 +1,3 @@
+
diff --git a/source/wp-content/themes/wporg-developer-2023/src/chapter-list/block.php b/source/wp-content/themes/wporg-developer-2023/src/chapter-list/block.php
index 1cfeb9cd2..4c8708916 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/chapter-list/block.php
+++ b/source/wp-content/themes/wporg-developer-2023/src/chapter-list/block.php
@@ -58,8 +58,8 @@ function render( $attributes, $content, $block ) {
$content = wp_list_pages( $args );
$title = do_blocks(
- '
-
' . __( 'Chapters', 'wporg' ) . '
+ '
+ ' . __( 'Chapters', 'wporg' ) . '
'
);
diff --git a/source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss b/source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss
index 1d5f39148..89d8c52fa 100644
--- a/source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss
+++ b/source/wp-content/themes/wporg-developer-2023/src/chapter-list/style.scss
@@ -1,6 +1,6 @@
.wp-block-wporg-chapter-list {
--local--line-height: var(--wp--custom--body--small--typography--line-height);
- --local--button-size: calc(var(--local--line-height) * 1em);
+ --local--icon-size: calc(var(--local--line-height) * 1em);
line-height: var(--local--line-height);
ul {
@@ -10,13 +10,30 @@
}
ul ul {
- margin-left: calc(var(--local--button-size) / 2);
- padding-left: calc(var(--wp--preset--spacing--20) / 4);
- border-left: 1px solid var(--wp--preset--color--light-grey-1);
+ padding-left: 0;
+
+ li {
+ padding-left: var(--local--icon-size);
+ position: relative;
+
+ &::before {
+ content: "";
+ display: inline-block;
+ position: absolute;
+ left: 0;
+ width: var(--local--icon-size);
+ height: var(--local--icon-size);
+ mask-image: url(../../images/dot.svg);
+ mask-repeat: no-repeat;
+ mask-position: center;
+ background-color: var(--wp--preset--color--charcoal-4);
+ }
+ }
}
li {
margin-block: calc(var(--wp--preset--spacing--20) / 4);
+ color: var(--wp--preset--color--charcoal-4);
}
> ul {
@@ -27,59 +44,49 @@
}
}
+ a {
+ text-decoration: none;
+ }
+
&.has-js-control ul ul {
display: none;
+ padding-left: 14px;
+
+ .page_item_has_children {
+ padding-left: 0;
+
+ &::before {
+ display: none;
+ }
+ }
&.is-open {
display: revert;
}
}
- // Style the dash & chevron, most of the styles can be shared.
- &.has-js-control li:not(.page_item_has_children),
.wporg-chapter-list--button-group {
display: flex;
align-items: flex-start;
}
- &:not(.has-js-control) li::before,
- &.has-js-control li:not(.page_item_has_children)::before,
.wporg-chapter-list--button-group > button {
- // Add space between button & link.
- margin-inline-end: 0.25em;
font-size: inherit;
- height: var(--local--button-size);
- width: var(--local--button-size);
- }
-
- &:not(.has-js-control) li::before {
- height: 0.8em;
- }
-
- &:not(.has-js-control) li::before,
- &.has-js-control li:not(.page_item_has_children)::before,
- .wporg-chapter-list--button-group > button::before {
- content: "";
- display: inline-block;
- mask-image: url(../../images/line.svg);
- mask-repeat: no-repeat;
- mask-position: center;
- background-color: var(--wp--preset--color--light-grey-1);
- }
-
- .wporg-chapter-list--button-group > button {
background-color: transparent;
border: none;
padding: 0;
cursor: pointer;
&::before {
- height: var(--local--button-size);
- width: var(--local--button-size);
- mask-image: url(../../images/chevron.svg);
- mask-size: 0.8em 0.4em;
- transform: rotate(180deg);
- background-color: var(--wp--preset--color--blueberry-1);
+ content: "";
+ display: inline-block;
+ height: var(--local--icon-size);
+ width: var(--local--icon-size);
+ mask-image: url(../../images/chevron-small.svg);
+ mask-repeat: no-repeat;
+ mask-position: center;
+ transform: rotate(-90deg);
+ background-color: var(--wp--preset--color--charcoal-4);
}
&[aria-expanded="true"]::before {
@@ -92,10 +99,18 @@
}
// Descendent is `span` if there are children, or `a` if not.
- .current_page_ancestor > span,
- .current_page_ancestor > a,
- .current_page_item > span,
+ .current_page_item,
+ .current_page_item > span a,
.current_page_item > a {
- font-weight: 600;
+ color: var(--wp--preset--color--charcoal-1);
+ }
+
+ .current_page_item > span a,
+ .current_page_item > a {
+ font-weight: 700;
+ }
+
+ .current_page_item > span button::before {
+ background-color: var(--wp--preset--color--charcoal-1);
}
}
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 947ca340b..be4e91774 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
@@ -51,25 +51,22 @@ body[class] {
}
}
-@media (min-width: 1320px) {
- .has-three-columns {
- --wp--style--global--wide-size: 1760px;
- --local--block-start-sidebar--width: 300px;
+.has-three-columns {
+ --local--sidebar--width: 232px;
+ --local--column-gap: 40px;
+
+ @media (min-width: 768px) {
+ --wp--style--global--wide-size: 1760px;
display: grid;
- grid-template-columns: var(--local--block-start-sidebar--width) 1fr;
+ /* stylelint-disable-next-line max-line-length */
+ grid-template-columns: var(--local--sidebar--width) calc(100% - var(--local--sidebar--width) - var(--local--column-gap));
grid-template-rows: auto auto;
- column-gap: 40px;
+ column-gap: var(--local--column-gap);
.wp-block-wporg-sidebar-container {
- --local--block-end-sidebar--width: 300px;
- }
-
- article {
- --wp--style--global--content-size: 1080px;
-
- width: clamp(30rem, -52.5rem + 100vw, 67.5rem);
+ --local--block-end-sidebar--width: var(--local--sidebar--width);
}
.has-three-columns__pagination {
@@ -77,6 +74,14 @@ body[class] {
grid-column-start: 2;
}
}
+
+ @media (min-width: 1200px) {
+ article {
+ // Width must be calculated to fit absolute positioned ToC.
+ // Scales between 496px at 1200px wide and 1216px at 1920px wide, based on sidebar and gap dimensions above.
+ width: clamp(31rem, -44rem + 100vw, 76rem);
+ }
+ }
}
.is-toc-heading a::after {
diff --git a/source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html b/source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html
index 37ef3c75d..74bb01e66 100644
--- a/source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html
+++ b/source/wp-content/themes/wporg-developer-2023/templates/single-handbook-github.html
@@ -5,7 +5,7 @@
-
+
@@ -16,7 +16,7 @@
-
+
diff --git a/source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html b/source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html
index d16078b7a..3280589be 100644
--- a/source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html
+++ b/source/wp-content/themes/wporg-developer-2023/templates/single-handbook.html
@@ -5,7 +5,7 @@
-
+
@@ -16,7 +16,7 @@
-
+
diff --git a/source/wp-content/themes/wporg-developer-2023/theme.json b/source/wp-content/themes/wporg-developer-2023/theme.json
index c7a2ac98f..5881f4988 100644
--- a/source/wp-content/themes/wporg-developer-2023/theme.json
+++ b/source/wp-content/themes/wporg-developer-2023/theme.json
@@ -202,7 +202,7 @@
},
"link": {
"color": {
- "text": "var(--wp--preset--color--blueberry-1)"
+ "text": "var(--wp--preset--color--charcoal-4)"
}
}
}