mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-04 03:01:23 -06:00
Fix invalid CSS rules in head elements (#1368)
Rectify and simplify CSS rules used in the head element. The rules now avoid the invalid use of nested `:not()` pseudo-classes.
- Update CHANGELOG.md
- Remove ignore statements re CSS parse errors
- Add rules for excluded pages and simplify
- Add `activation_no_nav_link` with the rules for excluded pages
- Insert `activation_no_nav_link` when no other rules are generated
- Replace `:nth-child(1)` by `:first-child`
- Correct `:nth-child(n + {{ activation_index | plus: 1 }})` to `:not(:first-child)`
- Eliminate `activation_collection_index`
- Generate `.nav-category-list` selectors only for sites with collections
---------
Co-authored-by: Matt Wang <matt@matthewwang.me>
This commit is contained in:
Peter Mosses
GitHub
parent
fad37122ae
commit
56e0f1c800
@ -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
|
||||
|
||||
@ -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 -%}
|
||||
|
||||
@ -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%,
|
||||
|
||||
@ -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."
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user