diff --git a/_includes/nav.html b/_includes/nav.html
index 573e1f996fcca49d5011f8f61fc5e5324153ca21..603d8d3b0d3b4b40a96f971406c1cbab5e6f6629 100644
--- a/_includes/nav.html
+++ b/_includes/nav.html
@@ -1,51 +1,55 @@
-<nav role="navigation" aria-label="Main navigation">
- <ul class="navigation-list">
- {%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
- {%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
- {%- if site.nav_sort == 'case_insensitive' -%}
- {%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
- {%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
- {%- else -%}
- {%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
- {%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
- {%- endif -%}
- {%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
- {%- for node in pages_list -%}
- {%- unless node.nav_exclude -%}
- {%- if node.parent == nil and node.title -%}
- <li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
- {%- if page.parent == node.title or page.grand_parent == node.title -%}
- {%- assign first_level_url = node.url | absolute_url -%}
- {%- endif -%}
- <a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
- {%- if node.has_children -%}
- {%- assign children_list = pages_list | where: "parent", node.title -%}
- <ul class="navigation-list-child-list ">
- {%- for child in children_list -%}
- {%- unless child.nav_exclude -%}
- <li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
- {%- if page.url == child.url or page.parent == child.title -%}
- {%- assign second_level_url = child.url | absolute_url -%}
- {%- endif -%}
- <a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
- {%- if child.has_children -%}
- {%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
- <ul class="navigation-list-child-list">
- {%- for grand_child in grand_children_list -%}
- <li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
- <a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
- </li>
- {%- endfor -%}
- </ul>
- {%- endif -%}
- </li>
- {%- endunless -%}
- {%- endfor -%}
- </ul>
- {%- endif -%}
- </li>
- {%- endif -%}
- {%- endunless -%}
- {%- endfor -%}
- </ul>
-</nav>
+<ul class="nav-list">
+ {%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
+ {%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
+ {%- if site.nav_sort == 'case_insensitive' -%}
+ {%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
+ {%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
+ {%- else -%}
+ {%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
+ {%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
+ {%- endif -%}
+ {%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
+ {%- for node in pages_list -%}
+ {%- unless node.nav_exclude -%}
+ {%- if node.parent == nil and node.title -%}
+ <li class="nav-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
+ {%- if page.parent == node.title or page.grand_parent == node.title -%}
+ {%- assign first_level_url = node.url | absolute_url -%}
+ {%- endif -%}
+ {%- if node.has_children -%}
+ <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
+ {%- endif -%}
+ <a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
+ {%- if node.has_children -%}
+ {%- assign children_list = pages_list | where: "parent", node.title -%}
+ <ul class="nav-list ">
+ {%- for child in children_list -%}
+ {%- unless child.nav_exclude -%}
+ <li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
+ {%- if page.url == child.url or page.parent == child.title -%}
+ {%- assign second_level_url = child.url | absolute_url -%}
+ {%- endif -%}
+ {%- if child.has_children -%}
+ <a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
+ {%- endif -%}
+ <a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
+ {%- if child.has_children -%}
+ {%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
+ <ul class="nav-list">
+ {%- for grand_child in grand_children_list -%}
+ <li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
+ <a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
+ </li>
+ {%- endfor -%}
+ </ul>
+ {%- endif -%}
+ </li>
+ {%- endunless -%}
+ {%- endfor -%}
+ </ul>
+ {%- endif -%}
+ </li>
+ {%- endif -%}
+ {%- endunless -%}
+ {%- endfor -%}
+</ul>
diff --git a/_layouts/default.html b/_layouts/default.html
index de5c7222387f0e8b54119dda389ff00ce864fd5b..7569d9001c6d1978c557353b8f68d685addede72 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -4,7 +4,7 @@ layout: table_wrappers
<!DOCTYPE html>
-<html lang="{{ site.lang | default: "en-US" }}">
+<html lang="{{ site.lang | default: 'en-US' }}">
{% include head.html %}
<body>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
@@ -12,54 +12,59 @@ layout: table_wrappers
<title>Link</title>
<path fill-rule="evenodd" d="M4 9h1v1H4c-1.5 0-3-1.69-3-3.5S2.55 3 4 3h4c1.45 0 3 1.69 3 3.5 0 1.41-.91 2.72-2 3.25V8.59c.58-.45 1-1.27 1-2.09C10 5.22 8.98 4 8 4H4c-.98 0-2 1.22-2 2.5S3 9 4 9zm9-3h-1v1h1c1 0 2 1.22 2 2.5S13.98 12 13 12H9c-.98 0-2-1.22-2-2.5 0-.83.42-1.64 1-2.09V6.25c-1.09.53-2 1.84-2 3.25C6 11.31 7.55 13 9 13h4c1.45 0 3-1.69 3-3.5S14.5 6 13 6z"></path>
</symbol>
+ <symbol id="arrow-right" viewBox="0 0 24 24">
+ <title>Expand</title>
+ <path d="M10 6L8.59 7.41 13.17 12l-4.58 4.59L10 18l6-6z"/><path d="M0 0h24v24H0z" fill="none"/>
+ </symbol>
</svg>
<div class="page-wrap">
<div class="side-bar">
<div class="site-header">
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
- <button class="menu-button fs-3 js-main-nav-trigger" data-text-toggle="Hide" type="button">Menu</button>
+ <button id="site-nav-trigger" class="site-button" data-text-toggle="Hide" type="button">Menu</button>
</div>
-
- <div class="navigation main-nav js-main-nav">
+ <nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
{% include nav.html %}
- </div>
+ </nav>
<footer class="site-footer">
- <p class="text-small text-grey-dk-000 mb-4">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
+ This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.
</footer>
</div>
- <div class="main-content-wrap js-main-content" tabindex="0">
- <div class="main-content" id="top">
- <div class="page-header js-page-header">
+ <div id="main-wrap" class="main-wrap" tabindex="0">
+ <div class="main" id="top">
+ <div id="main-header" class="main-header">
{% if site.search_enabled != false %}
- <div class="search">
- <div class="search-input-wrap">
- <input type="text" class="js-search-input search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
- <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
+ <div class="search">
+ <div class="search-input-wrap">
+ <input type="text" id="search-input" class="search-input" tabindex="0" placeholder="Search {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">
+ <svg width="14" height="14" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg" class="search-icon"><title>Search</title><g fill-rule="nonzero"><path d="M17.332 20.735c-5.537 0-10-4.6-10-10.247 0-5.646 4.463-10.247 10-10.247 5.536 0 10 4.601 10 10.247s-4.464 10.247-10 10.247zm0-4c3.3 0 6-2.783 6-6.247 0-3.463-2.7-6.247-6-6.247s-6 2.784-6 6.247c0 3.464 2.7 6.247 6 6.247z"/><path d="M11.672 13.791L.192 25.271 3.02 28.1 14.5 16.62z"/></g></svg>
+ </div>
+ <div id="search-results" class="search-results"></div>
</div>
- <div class="js-search-results search-results-wrap"></div>
- </div>
{% endif %}
{% if site.aux_links != nil %}
- <ul class="list-style-none text-small aux-nav">
- {% for link in site.aux_links %}
- <li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}">
- <a href="{{ link.last }}"
- {% if site.aux_links_new_tab %}
- target="_blank" rel="noopener noreferrer"
- {% endif %}
- >
+ <nav aria-label="Auxiliary" class="aux-nav">
+ <ul class="aux-nav-list">
+ {% for link in site.aux_links %}
+ <li class="aux-nav-list-item">
+ <a href="{{ link.last }}"
+ {% if site.aux_links_new_tab %}
+ target="_blank" rel="noopener noreferrer"
+ {% endif %}
+ >
{{ link.first }}
- </a>
- </li>
- {% endfor %}
- </ul>
+ </a>
+ </li>
+ {% endfor %}
+ </ul>
+ </nav>
{% endif %}
</div>
- <div class="page">
+ <div class="main-content-wrap">
{% unless page.url == "/" %}
{% if page.parent %}
- <nav class="breadcrumb-nav">
+ <nav aria-label="Breadcrumb" class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
{% if page.grand_parent %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
@@ -72,64 +77,62 @@ layout: table_wrappers
</nav>
{% endif %}
{% endunless %}
- <div id="main-content" class="page-content" role="main">
+ <div id="main-content" class="main-content" role="main">
{% if site.heading_anchors != false %}
{% include vendor/anchor_headings.html html=content beforeHeading="true" anchorBody="<svg viewBox=\"0 0 16 16\" aria-hidden=\"true\"><use xlink:href=\"#link\"></use></svg>" anchorClass="anchor-heading" %}
{% else %}
{{ content }}
{% endif %}
- {% if page.has_children == true and page.has_toc != false %}
- <hr>
- <h2 class="text-delta">Table of contents</h2>
- <ul>
- {%- assign children_list = pages_list | where: "parent", node.title -%}
- {% for child in children_list %}
- {% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
- <li>
- <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
- </li>
- {% endif %}
- {% endfor %}
- </ul>
- {% endif %}
-
- {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
- <hr>
- <footer>
- {% if site.back_to_top %}
- <p><a href="#top">{{ site.back_to_top_text }}</a></p>
- {% endif %}
- {% if site.footer_content != nil %}
- <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
- {% endif %}
-
- {% if site.last_edit_timestamp or site.gh_edit_link %}
- <div class="d-flex mt-2">
- {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
- <p class="text-small text-grey-dk-000 mb-0 mr-2">
- Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
- </p>
+ {% if page.has_children == true and page.has_toc != false %}
+ <hr>
+ <h2 class="text-delta">Table of contents</h2>
+ <ul>
+ {%- assign children_list = pages_list | where: "parent", node.title -%}
+ {% for child in children_list %}
+ {% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
+ <li>
+ <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
+ </li>
{% endif %}
- {%
- if
- site.gh_edit_link and
- site.gh_edit_link_text and
- site.gh_edit_repository and
- site.gh_edit_branch and
- site.gh_edit_view_mode
+ {% endfor %}
+ </ul>
+ {% endif %}
- %}
- <p class="text-small text-grey-dk-000 mb-0">
- <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
- </p>
+ {% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
+ <hr>
+ <footer>
+ {% if site.back_to_top %}
+ <p><a href="#top">{{ site.back_to_top_text }}</a></p>
{% endif %}
- </div>
- {% endif %}
+ {% if site.footer_content != nil %}
+ <p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
+ {% endif %}
- </footer>
- {% endif %}
+ {% if site.last_edit_timestamp or site.gh_edit_link %}
+ <div class="d-flex mt-2">
+ {% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
+ <p class="text-small text-grey-dk-000 mb-0 mr-2">
+ Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
+ </p>
+ {% endif %}
+ {% if
+ site.gh_edit_link and
+ site.gh_edit_link_text and
+ site.gh_edit_repository and
+ site.gh_edit_branch and
+ site.gh_edit_view_mode
+ %}
+ <p class="text-small text-grey-dk-000 mb-0">
+ <a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
+ </p>
+ {% endif %}
+ </div>
+ {% endif %}
+ </footer>
+ {% endif %}
+ </div>
</div>
</div>
</div>
diff --git a/_sass/color_schemes/dark.scss b/_sass/color_schemes/dark.scss
index 9a0b9ea4c932b12b4e641b84ec61d2bf518041af..a25f449c6555b2ace3b0f95f7d5e71e82cf7c556 100644
--- a/_sass/color_schemes/dark.scss
+++ b/_sass/color_schemes/dark.scss
@@ -14,3 +14,4 @@ $base-button-color: $grey-dk-250;
$code-background-color: $grey-dk-250;
$search-background-color: $grey-dk-250;
$table-background-color: $grey-dk-250;
+$feedback-color: darken($sidebar-color, 3%);
diff --git a/_sass/content.scss b/_sass/content.scss
index 7ab23d836b1faead5785348089c046d00d05c2a1..965c9c8d9a741c2a1b70ee2ecfe4a7c52f742adf 100644
--- a/_sass/content.scss
+++ b/_sass/content.scss
@@ -5,7 +5,7 @@
//
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
-.page-content {
+.main-content {
line-height: $content-line-height;
ol,
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 79169e42bdb58eec887b7987a3e6ca73b17db9b5..720ac1d0716c065b8828e692b3e4060d9881957d 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -37,7 +37,7 @@
}
}
-.main-content-wrap {
+.main-wrap {
@include mq(md) {
position: absolute;
top: 0;
@@ -48,9 +48,13 @@
overflow-x: hidden;
overflow-y: scroll;
}
+
+ &:focus {
+ outline: none;
+ }
}
-.main-content {
+.main {
@include mq(md) {
position: relative;
max-width: $content-width;
@@ -64,11 +68,7 @@
}
}
-.js-main-content:focus {
- outline: none;
-}
-
-.page {
+.main-content-wrap {
@include container;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
@@ -79,7 +79,7 @@
}
}
-.page-header {
+.main-header {
@include container;
display: none;
padding-top: $gutter-spacing-sm;
@@ -103,7 +103,7 @@
}
}
-.navigation,
+.site-nav,
.site-header,
.site-footer {
width: 100%;
@@ -113,9 +113,7 @@
}
}
-.navigation {
- @include container;
-
+.site-nav {
@include mq(md) {
padding-top: $sp-8;
padding-bottom: $gutter-spacing-sm;
@@ -165,7 +163,7 @@
}
}
-.menu-button {
+.site-button {
appearance: none;
display: flex;
height: 100%;
@@ -175,12 +173,18 @@
text-transform: uppercase;
background: transparent;
border: 0;
+ @include fs-3;
@include mq(md) {
display: none;
}
}
+.site-title:hover,
+.site-button:hover {
+ background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
+}
+
// stylelint-disable selector-max-type
body {
@@ -202,6 +206,8 @@ body {
left: 0;
padding-top: $sp-4;
padding-bottom: $sp-4;
+ color: $grey-dk-000;
+ @include fs-2;
@include mq(md) {
position: static;
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index c77490437b280e519fd7916d6dcad1244f4f63b7..16ff5f0509b02fe430ff91502fad27ca761d61c7 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -1,74 +1,133 @@
//
// Main nav, breadcrumb, etc...
//
-.navigation-list {
+// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity
+
+.nav-list {
padding: 0;
margin-top: 0;
margin-bottom: 0;
list-style: none;
-}
-.navigation-list-child-list {
- padding-left: $sp-3;
- list-style: none;
+ .nav-list-item {
+ @include fs-4;
+ position: relative;
+ margin: 0;
- .navigation-list-link {
- color: $nav-child-link-color;
- }
+ @include mq(md) {
+ @include fs-3;
+ }
- .navigation-list-item {
- position: relative;
+ .nav-list-link {
+ display: block;
+ min-height: $nav-list-item-height-sm;
+ padding-top: $sp-1;
+ padding-bottom: $sp-1;
+ line-height: #{$nav-list-item-height-sm - 2 * $sp-1};
+ @if $nav-list-expander-right {
+ padding-right: $nav-list-item-height-sm;
+ padding-left: $gutter-spacing-sm;
+ }
+ @else {
+ padding-right: $gutter-spacing-sm;
+ padding-left: $nav-list-item-height-sm;
+ }
- &::before {
- position: absolute;
- margin-top: 0.3em;
- margin-left: -0.8em;
- color: rgba($body-text-color, 0.3);
- content: "- ";
+ @include mq(md) {
+ min-height: $nav-list-item-height;
+ line-height: #{$nav-list-item-height - 2 * $sp-1};
+ @if $nav-list-expander-right {
+ padding-right: $nav-list-item-height;
+ padding-left: $gutter-spacing;
+ }
+ @else {
+ padding-right: $gutter-spacing;
+ padding-left: $nav-list-item-height;
+ }
+ }
+
+ &.active {
+ font-weight: 600;
+ text-decoration: none;
+ }
+
+ &:hover,
+ &.active {
+ background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 80%, rgba($feedback-color, 0) 100%);
+ }
}
- &.active {
- &::before {
- color: $body-text-color;
+ .nav-list-expander {
+ position: absolute;
+ @if $nav-list-expander-right {
+ right: 0;
+ }
+ width: $nav-list-item-height-sm;
+ height: $nav-list-item-height-sm;
+ padding-top: #{$nav-list-item-height-sm / 4};
+ padding-right: #{$nav-list-item-height-sm / 4};
+ padding-bottom: #{$nav-list-item-height-sm / 4};
+ padding-left: #{$nav-list-item-height-sm / 4};
+ fill: $link-color;
+
+ @include mq(md) {
+ width: $nav-list-item-height;
+ height: $nav-list-item-height;
+ padding-top: #{$nav-list-item-height / 4};
+ padding-right: #{$nav-list-item-height / 4};
+ padding-bottom: #{$nav-list-item-height / 4};
+ padding-left: #{$nav-list-item-height / 4};
+ }
+
+ &:hover {
+ background-image: linear-gradient(-90deg, rgba($feedback-color, 1) 0%, rgba($feedback-color, 0.8) 100%);
+ }
+
+ @if $nav-list-expander-right {
+ svg {
+ transform: rotate(90deg);
+ }
}
}
- }
-}
-.navigation-list-item {
- @include fs-4;
- margin: 0;
+ > .nav-list {
+ display: none;
+ padding-left: $sp-3;
+ list-style: none;
- @include mq(md) {
- @include fs-3;
- }
+ .nav-list-item {
+ position: relative;
- .navigation-list-child-list {
- display: none;
- }
+ .nav-list-link {
+ color: $nav-child-link-color;
+ }
- &.active {
- .navigation-list-child-list {
- display: block;
+ .nav-list-expander {
+ fill: $nav-child-link-color;
+ }
+ }
}
- }
-}
-.navigation-list-link {
- display: block;
- padding-top: $sp-1;
- padding-bottom: $sp-1;
+ &.active {
+ > .nav-list-expander svg {
+ @if $nav-list-expander-right {
+ transform: rotate(-90deg);
+ }
+ @else {
+ transform: rotate(90deg);
+ }
+ }
- &.active {
- font-weight: 600;
- color: $body-heading-color;
- text-decoration: none;
+ > .nav-list {
+ display: block;
+ }
+ }
}
}
// Small screen nav
-.main-nav {
+.site-nav {
display: none;
&.nav-open {
@@ -81,9 +140,27 @@
.aux-nav {
align-self: center;
+
+ .aux-nav-list {
+ padding: 0;
+ margin: 0;
+ list-style: none;
+ @include fs-2;
+ }
+
+ .aux-nav-list-item {
+ display: inline-block;
+ margin-right: $sp-2;
+ @include fs-2;
+
+ &:last-child {
+ margin-right: 0;
+ }
+ }
}
// Breadcrumb nav
+
.breadcrumb-nav {
@include mq(md) {
margin-top: -$sp-4;
diff --git a/_sass/search.scss b/_sass/search.scss
index bef2df733563e250e92f80bc97d39ef197bb0fa8..79c3cfd1f3088cd18c5616913e57747dee07e5e7 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -68,7 +68,7 @@
order: 1;
}
-.search-results-wrap {
+.search-results {
position: absolute;
z-index: 100;
display: none;
@@ -112,7 +112,7 @@
&:hover,
&.active {
- background-color: $sidebar-color;
+ background-color: $feedback-color;
}
@include mq(md) {
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 3665a363254c5bbbb7ebaa1c2ea5c2f7bc652726..2d155d3580fa8f2b15935a5b5efed1d53f6a8129 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -57,6 +57,7 @@ $sidebar-color: $grey-lt-000 !default;
$search-background-color: $white !default;
$table-background-color: $white !default;
$code-background-color: $grey-lt-000 !default;
+$feedback-color: darken($sidebar-color, 3%) !default;
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
@@ -113,6 +114,9 @@ $gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default;
$nav-width: 264px !default;
$nav-width-md: 248px !default;
+$nav-list-item-height: $sp-6 !default;
+$nav-list-item-height-sm: $sp-8 !default;
+$nav-list-expander-right: true;
$content-width: 800px !default;
$header-height: 60px !default;
$search-results-width: 500px !default;
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index 2edf7f465040c3e2bc377c703b8b38ab1b9310a4..b683c7fcb3710ebdb946924da8776cc31fe35b18 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -24,17 +24,28 @@ jtd.onReady = function(ready) {
// Show/hide mobile menu
function initNav() {
- const mainNav = document.querySelector('.js-main-nav');
- const pageHeader = document.querySelector('.js-page-header');
- const navTrigger = document.querySelector('.js-main-nav-trigger');
+ jtd.addEvent(document, 'click', function(e){
+ var target = e.target;
+ while (target && !(target.classList && target.classList.contains('nav-list-expander'))) {
+ target = target.parentNode;
+ }
+ if (target) {
+ e.preventDefault();
+ target.parentNode.classList.toggle('active');
+ }
+ });
+
+ const siteNav = document.getElementById('site-nav');
+ const mainHeader = document.getElementById('main-header');
+ const navTrigger = document.getElementById('site-nav-trigger');
jtd.addEvent(navTrigger, 'click', function(e){
e.preventDefault();
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
- mainNav.classList.toggle('nav-open');
- pageHeader.classList.toggle('nav-open');
+ siteNav.classList.toggle('nav-open');
+ mainHeader.classList.toggle('nav-open');
navTrigger.classList.toggle('nav-open');
navTrigger.innerText = textToggle;
navTrigger.setAttribute('data-text-toggle', text);
@@ -93,8 +104,8 @@ function initSearch() {
function searchResults(index, data) {
var index = index;
var docs = data;
- var searchInput = document.querySelector('.js-search-input');
- var searchResults = document.querySelector('.js-search-results');
+ var searchInput = document.getElementById('search-input');
+ var searchResults = document.getElementById('search-results');
function hideResults() {
searchResults.innerHTML = '';
@@ -282,8 +293,8 @@ function initSearch() {
// Focus
function pageFocus() {
- var mainContent = document.querySelector('.js-main-content');
- mainContent.focus();
+ var mainWrap = document.getElementById('main-wrap');
+ mainWrap.focus();
}
// Switch theme