diff --git a/CHANGELOG.md b/CHANGELOG.md index a92c774..64f1f94 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -27,6 +27,7 @@ Code changes to `main` that are *not* in the latest release: - Fixed: improve build time by [@pdmosses] in [#1358] - Fixed: erroneous parentheses in `site_nav` conditional by [@mattxwang] in [#1366] - Fixed: navigation scroll to active link regression by [@pdmosses] in [#1367] +- Fixed: invalid CSS rules in head elements by [@pdmosses] in [#1368] {: .warning } [#1358] moved `_includes/nav.html` to the `_includes/components` directory, @@ -49,6 +50,7 @@ Users who were overriding that file will need to adjust their sites accordingly. [#1360]: https://github.com/just-the-docs/just-the-docs/pull/1360 [#1366]: https://github.com/just-the-docs/just-the-docs/pull/1366 [#1367]: https://github.com/just-the-docs/just-the-docs/pull/1367 +[#1368]: https://github.com/just-the-docs/just-the-docs/pull/1368 [#1377]: https://github.com/just-the-docs/just-the-docs/pull/1377 ## Release v0.6.2 diff --git a/_includes/css/activation.scss.liquid b/_includes/css/activation.scss.liquid index fbd8ca1..a32392e 100644 --- a/_includes/css/activation.scss.liquid +++ b/_includes/css/activation.scss.liquid @@ -6,16 +6,42 @@ Includes: sorted_pages.html. Overwrites: - activation_pages, activation_pages_top_size, activation_page, activation_title, + activation_no_nav_link, activation_pages, activation_pages_top_size, activation_page, activation_title, activation_first_level, activation_second_level, activation_third_level, activation_first_level_reversed, activation_second_level_reversed, - activation_first_level_index, activation_second_level_index, activation_third_level_index. + activation_first_level_index, activation_second_level_index, activation_third_level_index, + activation_index, activation_collection_prefix, activation_other_collection_prefix. Should not be cached, because it depends on page. (For a site with only top-level pages, the rendering of this file is always empty. This property could be detected, and used to reduce the build time for such sites.) {%- endcomment -%} -{%- unless page.title == nil or page.nav_exclude == true -%} +{%- comment -%} + The CSS rules in activation_no_nav_link are for use on pages excluded from the main navigation. + - The first rule ensures that no nav-link has a background image. + - The other two rules ensure that all folding collections are expanded. +{%- endcomment -%} + +{%- capture activation_no_nav_link %} +.site-nav ul li a { + background-image: none; +} + +{%- if site.just_the_docs.collections %} +.site-nav > ul.nav-category-list > li > button svg { + transform: rotate(-90deg); +} +.site-nav > ul.nav-category-list > li.nav-list-item > ul.nav-list { + display: block; +} +{%- endif %} +{% endcapture -%} + +{%- if page.title == nil or page.nav_exclude == true -%} + +{{ activation_no_nav_link }} + +{%- else -%} {%- assign activation_pages = site[page.collection] | default: site.html_pages @@ -45,7 +71,11 @@ {%- endif -%} {%- endfor -%} -{%- unless activation_first_level_index == nil -%} +{%- if activation_first_level_index == nil -%} + +{{ activation_no_nav_link }} + +{%- else -%} {%- if page.grand_parent -%} {%- assign activation_title = page.parent -%} @@ -89,47 +119,73 @@ {%- endfor -%} {%- endif -%} -{%- unless activation_second_level_index == nil and activation_third_level_index -%} +{%- if activation_second_level_index == nil and activation_third_level_index -%} + +{{ activation_no_nav_link }} + +{%- else -%} {%- comment -%} - The generated CSS uses a prefix that depends on the number of ordinary pages - and on the page collections. + The site-nav is: + - an optional ul.nav-list with li.nav-list-items for non-collection top-level pages + - an optional ul.nav-list with li.nav-list-item.externals + - any number of just-the-docs.collections + + A non-foldable collection is: + - a div.nav-category with the collection name, followed by: + - a ul.nav-list with li.nav-list-items for its top-level pages + + A foldable collection is: + - a ul.nav-list.nav-category-list with a single li.nav-list-item containing: + - an optional button with the expander svg + - a div.nav-category with the collection name + - a ul.nav-list with li.nav-list-items for its top-level pages + + The generated CSS uses: + - activation_collection_prefix, to select the site-nav > ul.nav-list for the page + - activation_other_collection_prefix, to select all the other site-nav > ul.nav-lists {%- endcomment -%} {%- if page.collection == nil -%} {%- capture activation_collection_prefix -%} - .site-nav > .nav-list:nth-child(1):not(.nav-category-list) + .site-nav > ul.nav-list:first-child {%- endcapture -%} + {%- capture activation_other_collection_prefix -%} - .site-nav > .nav-list:not(:nth-child(1):not(.nav-category-list)) + .site-nav > ul.nav-list:not(:first-child) {%- endcapture -%} {%- else -%} {%- for activation_collection in site.just_the_docs.collections -%} {%- if activation_collection[0] == page.collection -%} - {%- assign activation_collection_index = forloop.index -%} + {%- assign activation_index = forloop.index -%} {%- break -%} {%- endif -%} {%- endfor -%} - {%- assign activation_index = activation_collection_index -%} + {%- assign activation_pages_top_size = site.html_pages | where_exp:"item", "item.title != nil" | where_exp:"item", "item.parent == nil" | where_exp:"item", "item.nav_exclude != true" | size -%} - {%- if activation_pages_top_size > 0 -%} + {%- if activation_pages_top_size > 0 -%} {%- assign activation_index = activation_index | plus: 1 -%} {%- endif -%} + {%- if site.nav_external_links -%} {%- assign activation_index = activation_index | plus: 1 -%} {%- endif -%} + {%- capture activation_collection_prefix -%} - .site-nav > .nav-list:nth-of-type({{ activation_index }}){% if site.just_the_docs.collections[page.collection].nav_fold == true %} > .nav-list-item > .nav-list{% endif %} + .site-nav > ul:nth-of-type({{ activation_index }}) + {%- if site.just_the_docs.collections[page.collection].nav_fold %} > li > ul + {%- endif -%} {%- endcapture -%} + {%- capture activation_other_collection_prefix -%} - .site-nav > .nav-list:not(:nth-of-type({{ activation_index }})) + .site-nav > ul:not(:nth-of-type({{ activation_index }})) {%- endcapture -%} {%- endif -%} @@ -143,25 +199,25 @@ {% if activation_third_level_index -%} -{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list-link, -{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list-link, -{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item:not(:nth-child({{ activation_third_level_index }})) > .nav-list-link { +{{ activation_collection_prefix }} > li > a, +{{ activation_collection_prefix }} > li > ul > li > a, +{{ activation_collection_prefix }} > li > ul > li > ul > li:not(:nth-child({{ activation_third_level_index }})) > a { background-image: none; } {%- elsif activation_second_level_index -%} -{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list-link, -{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item:not(:nth-child({{ activation_second_level_index }})) > .nav-list-link, -{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link { +{{ activation_collection_prefix }} > li > a, +{{ activation_collection_prefix }} > li > ul > li:not(:nth-child({{ activation_second_level_index }})) > a, +{{ activation_collection_prefix }} > li > ul > li > ul > li > a { background-image: none; } {%- else -%} -{{ activation_collection_prefix }} > .nav-list-item:not(.external):not(:nth-child({{ activation_first_level_index }})) > .nav-list-link, -{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list-link, -{{ activation_collection_prefix }} > .nav-list-item:not(.external) > .nav-list > .nav-list-item > .nav-list > .nav-list-item > .nav-list-link { +{{ activation_collection_prefix }} > li:not(:nth-child({{ activation_first_level_index }})) > a, +{{ activation_collection_prefix }} > li > ul > li > a, +{{ activation_collection_prefix }} > li > ul > li > ul > li > a { background-image: none; } @@ -171,8 +227,8 @@ The following rule removes the image from the links to pages in other collections. {%- endcomment %} -{{ activation_other_collection_prefix }} .nav-list-link, -.site-nav .nav-list-link.external { +{{ activation_other_collection_prefix }} a, +.site-nav li.external a { background-image: none; } @@ -180,11 +236,11 @@ The following rule styles the link to the current page. {%- endcomment %} -{{ activation_collection_prefix }} > .nav-list-item:not(.external):nth-child({{ activation_first_level_index }}) -{%- if activation_second_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) -{%- if activation_third_level_index %} > .nav-list > .nav-list-item:nth-child({{ activation_third_level_index }}) +{{ activation_collection_prefix }} > li:nth-child({{ activation_first_level_index }}) +{%- if activation_second_level_index %} > ul > li:nth-child({{ activation_second_level_index }}) +{%- if activation_third_level_index %} > ul > li:nth-child({{ activation_third_level_index }}) {%- endif -%} -{%- endif %} > .nav-list-link { +{%- endif %} > a { font-weight: 600; text-decoration: none; } @@ -200,22 +256,26 @@ nav-list-expander-right is false, which seems unavoidable. {%- endcomment %} -.site-nav > .nav-category-list > .nav-list-item > .nav-list-expander svg, -{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list-expander svg +{%- if site.just_the_docs.collections %} +.site-nav > ul.nav-category-list > li > button svg, +{% endif -%} +{{ activation_collection_prefix }} > li:nth-child({{ activation_first_level_index }}) > button svg {%- if activation_second_level_index -%}, -{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) > .nav-list-expander svg +{{ activation_collection_prefix }} > li:nth-child({{ activation_first_level_index }}) > ul > li:nth-child({{ activation_second_level_index }}) > button svg {%- endif %} { transform: rotate(-90deg); } -.site-nav > .nav-category-list > .nav-list-item > .nav-list, -{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list +{%- if site.just_the_docs.collections %} +.site-nav > ul.nav-category-list > li.nav-list-item > ul.nav-list, +{% endif -%} +{{ activation_collection_prefix }} > li.nav-list-item:nth-child({{ activation_first_level_index }}) > ul.nav-list {%- if activation_second_level_index %}, -{{ activation_collection_prefix }} > .nav-list-item:nth-child({{ activation_first_level_index }}) > .nav-list > .nav-list-item:nth-child({{ activation_second_level_index }}) > .nav-list +{{ activation_collection_prefix }} > li.nav-list-item:nth-child({{ activation_first_level_index }}) > ul.nav-list > li.nav-list-item:nth-child({{ activation_second_level_index }}) > ul.nav-list {%- endif %} { display: block; } -{%- endunless -%} -{%- endunless -%} -{%- endunless -%} +{%- endif -%} +{%- endif -%} +{%- endif -%} diff --git a/assets/css/just-the-docs-head-nav.css b/assets/css/just-the-docs-head-nav.css index defa182..0cb97b3 100644 --- a/assets/css/just-the-docs-head-nav.css +++ b/assets/css/just-the-docs-head-nav.css @@ -11,7 +11,7 @@ {%- capture scss -%} {% include css/just-the-docs.scss.liquid color_scheme=color_scheme %} -.nav-list .nav-list-item .nav-list-link { +.site-nav ul li a { background-image: linear-gradient( -90deg, rgba($feedback-color, 1) 0%, diff --git a/fixtures/html5validator-config.yml b/fixtures/html5validator-config.yml index a4e07d9..2468ec4 100644 --- a/fixtures/html5validator-config.yml +++ b/fixtures/html5validator-config.yml @@ -1,6 +1,3 @@ root: _site blacklist: - "line-numbers" -ignore: - - "1.810-1.823: error: CSS: Parse Error." - - "1.811-1.824: error: CSS: Parse Error."