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)" } } }