mirror of
https://github.com/snachodog/just-the-docs.git
synced 2025-04-17 00:22:24 -06:00
Merge branch 'improvement/navigation' into improvement/navigation-new
# Conflicts: # _includes/nav.html # _layouts/default.html
This commit is contained in:
Silvio Giebl
commit
c7466e88a8
@ -1,51 +1,55 @@
|
|||||||
<nav role="navigation" aria-label="Main navigation">
|
<ul class="nav-list">
|
||||||
<ul class="navigation-list">
|
{%- assign ordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order != nil" -%}
|
||||||
{%- 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" -%}
|
||||||
{%- assign unordered_pages_list = site.html_pages | where_exp:"item", "item.nav_order == nil" -%}
|
{%- if site.nav_sort == 'case_insensitive' -%}
|
||||||
{%- if site.nav_sort == 'case_insensitive' -%}
|
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
|
||||||
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort_natural:"nav_order" -%}
|
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
|
||||||
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort_natural:"title" -%}
|
{%- else -%}
|
||||||
{%- else -%}
|
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
|
||||||
{%- assign sorted_ordered_pages_list = ordered_pages_list | sort:"nav_order" -%}
|
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
|
||||||
{%- assign sorted_unordered_pages_list = unordered_pages_list | sort:"title" -%}
|
{%- endif -%}
|
||||||
{%- endif -%}
|
{%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
|
||||||
{%- assign pages_list = sorted_ordered_pages_list | concat: sorted_unordered_pages_list -%}
|
{%- for node in pages_list -%}
|
||||||
{%- for node in pages_list -%}
|
{%- unless node.nav_exclude -%}
|
||||||
{%- unless node.nav_exclude -%}
|
{%- if node.parent == nil and node.title -%}
|
||||||
{%- 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 %}">
|
||||||
<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 -%}
|
||||||
{%- if page.parent == node.title or page.grand_parent == node.title -%}
|
{%- assign first_level_url = node.url | absolute_url -%}
|
||||||
{%- assign first_level_url = node.url | absolute_url -%}
|
{%- endif -%}
|
||||||
{%- endif -%}
|
{%- if node.has_children -%}
|
||||||
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
|
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
|
||||||
{%- if node.has_children -%}
|
{%- endif -%}
|
||||||
{%- assign children_list = pages_list | where: "parent", node.title -%}
|
<a href="{{ node.url | absolute_url }}" class="nav-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
|
||||||
<ul class="navigation-list-child-list ">
|
{%- if node.has_children -%}
|
||||||
{%- for child in children_list -%}
|
{%- assign children_list = pages_list | where: "parent", node.title -%}
|
||||||
{%- unless child.nav_exclude -%}
|
<ul class="nav-list ">
|
||||||
<li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
|
{%- for child in children_list -%}
|
||||||
{%- if page.url == child.url or page.parent == child.title -%}
|
{%- unless child.nav_exclude -%}
|
||||||
{%- assign second_level_url = child.url | absolute_url -%}
|
<li class="nav-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
|
||||||
{%- endif -%}
|
{%- if page.url == child.url or page.parent == child.title -%}
|
||||||
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
|
{%- assign second_level_url = child.url | absolute_url -%}
|
||||||
{%- if child.has_children -%}
|
{%- endif -%}
|
||||||
{%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
|
{%- if child.has_children -%}
|
||||||
<ul class="navigation-list-child-list">
|
<a href="#" class="nav-list-expander"><svg viewBox="0 0 24 24"><use xlink:href="#arrow-right"></use></svg></a>
|
||||||
{%- for grand_child in grand_children_list -%}
|
{%- endif -%}
|
||||||
<li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
|
<a href="{{ child.url | absolute_url }}" class="nav-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
|
||||||
<a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
|
{%- if child.has_children -%}
|
||||||
</li>
|
{%- assign grand_children_list = pages_list | where: "parent", child.title | where: "grand_parent", node.title -%}
|
||||||
{%- endfor -%}
|
<ul class="nav-list">
|
||||||
</ul>
|
{%- for grand_child in grand_children_list -%}
|
||||||
{%- endif -%}
|
<li class="nav-list-item {% if page.url == grand_child.url %} active{% endif %}">
|
||||||
</li>
|
<a href="{{ grand_child.url | absolute_url }}" class="nav-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
|
||||||
{%- endunless -%}
|
</li>
|
||||||
{%- endfor -%}
|
{%- endfor -%}
|
||||||
</ul>
|
</ul>
|
||||||
{%- endif -%}
|
{%- endif -%}
|
||||||
</li>
|
</li>
|
||||||
{%- endif -%}
|
{%- endunless -%}
|
||||||
{%- endunless -%}
|
{%- endfor -%}
|
||||||
{%- endfor -%}
|
</ul>
|
||||||
</ul>
|
{%- endif -%}
|
||||||
</nav>
|
</li>
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endunless -%}
|
||||||
|
{%- endfor -%}
|
||||||
|
</ul>
|
||||||
|
|||||||
@ -4,7 +4,7 @@ layout: table_wrappers
|
|||||||
|
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
|
|
||||||
<html lang="{{ site.lang | default: "en-US" }}">
|
<html lang="{{ site.lang | default: 'en-US' }}">
|
||||||
{% include head.html %}
|
{% include head.html %}
|
||||||
<body>
|
<body>
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||||
@ -12,54 +12,59 @@ layout: table_wrappers
|
|||||||
<title>Link</title>
|
<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>
|
<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>
|
||||||
|
<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>
|
</svg>
|
||||||
|
|
||||||
<div class="page-wrap">
|
<div class="page-wrap">
|
||||||
<div class="side-bar">
|
<div class="side-bar">
|
||||||
<div class="site-header">
|
<div class="site-header">
|
||||||
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title lh-tight">{% include title.html %}</a>
|
<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>
|
||||||
|
<nav role="navigation" aria-label="Main" id="site-nav" class="site-nav">
|
||||||
<div class="navigation main-nav js-main-nav">
|
|
||||||
{% include nav.html %}
|
{% include nav.html %}
|
||||||
</div>
|
</nav>
|
||||||
<footer class="site-footer">
|
<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>
|
</footer>
|
||||||
</div>
|
</div>
|
||||||
<div class="main-content-wrap js-main-content" tabindex="0">
|
<div id="main-wrap" class="main-wrap" tabindex="0">
|
||||||
<div class="main-content" id="top">
|
<div class="main" id="top">
|
||||||
<div class="page-header js-page-header">
|
<div id="main-header" class="main-header">
|
||||||
{% if site.search_enabled != false %}
|
{% if site.search_enabled != false %}
|
||||||
<div class="search">
|
<div class="search">
|
||||||
<div class="search-input-wrap">
|
<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">
|
<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>
|
<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>
|
||||||
<div class="js-search-results search-results-wrap"></div>
|
|
||||||
</div>
|
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% if site.aux_links != nil %}
|
{% if site.aux_links != nil %}
|
||||||
<ul class="list-style-none text-small aux-nav">
|
<nav aria-label="Auxiliary" class="aux-nav">
|
||||||
{% for link in site.aux_links %}
|
<ul class="aux-nav-list">
|
||||||
<li class="d-inline-block my-0{% unless forloop.last %} mr-2{% endunless %}">
|
{% for link in site.aux_links %}
|
||||||
<a href="{{ link.last }}"
|
<li class="aux-nav-list-item">
|
||||||
{% if site.aux_links_new_tab %}
|
<a href="{{ link.last }}"
|
||||||
target="_blank" rel="noopener noreferrer"
|
{% if site.aux_links_new_tab %}
|
||||||
{% endif %}
|
target="_blank" rel="noopener noreferrer"
|
||||||
>
|
{% endif %}
|
||||||
|
>
|
||||||
{{ link.first }}
|
{{ link.first }}
|
||||||
</a>
|
</a>
|
||||||
</li>
|
</li>
|
||||||
{% endfor %}
|
{% endfor %}
|
||||||
</ul>
|
</ul>
|
||||||
|
</nav>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
</div>
|
</div>
|
||||||
<div class="page">
|
<div class="main-content-wrap">
|
||||||
{% unless page.url == "/" %}
|
{% unless page.url == "/" %}
|
||||||
{% if page.parent %}
|
{% if page.parent %}
|
||||||
<nav class="breadcrumb-nav">
|
<nav aria-label="Breadcrumb" class="breadcrumb-nav">
|
||||||
<ol class="breadcrumb-nav-list">
|
<ol class="breadcrumb-nav-list">
|
||||||
{% if page.grand_parent %}
|
{% if page.grand_parent %}
|
||||||
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
|
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
|
||||||
@ -72,64 +77,62 @@ layout: table_wrappers
|
|||||||
</nav>
|
</nav>
|
||||||
{% endif %}
|
{% endif %}
|
||||||
{% endunless %}
|
{% endunless %}
|
||||||
<div id="main-content" class="page-content" role="main">
|
<div id="main-content" class="main-content" role="main">
|
||||||
{% if site.heading_anchors != false %}
|
{% 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" %}
|
{% 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 %}
|
{% else %}
|
||||||
{{ content }}
|
{{ content }}
|
||||||
{% endif %}
|
{% endif %}
|
||||||
|
|
||||||
{% if page.has_children == true and page.has_toc != false %}
|
{% if page.has_children == true and page.has_toc != false %}
|
||||||
<hr>
|
<hr>
|
||||||
<h2 class="text-delta">Table of contents</h2>
|
<h2 class="text-delta">Table of contents</h2>
|
||||||
<ul>
|
<ul>
|
||||||
{%- assign children_list = pages_list | where: "parent", node.title -%}
|
{%- assign children_list = pages_list | where: "parent", node.title -%}
|
||||||
{% for child in children_list %}
|
{% for child in children_list %}
|
||||||
{% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
|
{% if child.parent == page.title and child.title != page.title and child.grand_parent == page.parent %}
|
||||||
<li>
|
<li>
|
||||||
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
|
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>{% if child.summary %} - {{ child.summary }}{% endif %}
|
||||||
</li>
|
</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 %}
|
{% endif %}
|
||||||
{% endfor %}
|
|
||||||
</ul>
|
|
||||||
{% endif %}
|
|
||||||
|
|
||||||
{% if site.footer_content != nil or site.last_edit_timestamp or site.gh_edit_link %}
|
{% if site.last_edit_timestamp or site.gh_edit_link %}
|
||||||
<hr>
|
<div class="d-flex mt-2">
|
||||||
<footer>
|
{% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
|
||||||
{% if site.back_to_top %}
|
<p class="text-small text-grey-dk-000 mb-0 mr-2">
|
||||||
<p><a href="#top">{{ site.back_to_top_text }}</a></p>
|
Page last modified: <span class="d-inline-block">{{ page.last_modified_date | date: site.last_edit_time_format }}</span>.
|
||||||
{% endif %}
|
</p>
|
||||||
{% if site.footer_content != nil %}
|
{% endif %}
|
||||||
<p class="text-small text-grey-dk-000 mb-0">{{ site.footer_content }}</p>
|
{% if
|
||||||
{% endif %}
|
site.gh_edit_link and
|
||||||
|
site.gh_edit_link_text and
|
||||||
{% if site.last_edit_timestamp or site.gh_edit_link %}
|
site.gh_edit_repository and
|
||||||
<div class="d-flex mt-2">
|
site.gh_edit_branch and
|
||||||
{% if site.last_edit_timestamp and site.last_edit_time_format and page.last_modified_date %}
|
site.gh_edit_view_mode
|
||||||
<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 class="text-small text-grey-dk-000 mb-0">
|
||||||
</p>
|
<a href="{{ site.gh_edit_repository }}/{{ site.gh_edit_view_mode }}/{{ site.gh_edit_branch }}/{{ page.path }}">{{ site.gh_edit_link_text }}</a>
|
||||||
{% endif %}
|
</p>
|
||||||
{%
|
{% endif %}
|
||||||
if
|
</div>
|
||||||
site.gh_edit_link and
|
{% endif %}
|
||||||
site.gh_edit_link_text and
|
</footer>
|
||||||
site.gh_edit_repository and
|
{% endif %}
|
||||||
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>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
@ -14,3 +14,4 @@ $base-button-color: $grey-dk-250;
|
|||||||
$code-background-color: $grey-dk-250;
|
$code-background-color: $grey-dk-250;
|
||||||
$search-background-color: $grey-dk-250;
|
$search-background-color: $grey-dk-250;
|
||||||
$table-background-color: $grey-dk-250;
|
$table-background-color: $grey-dk-250;
|
||||||
|
$feedback-color: darken($sidebar-color, 3%);
|
||||||
|
|||||||
@ -5,7 +5,7 @@
|
|||||||
//
|
//
|
||||||
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
|
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
|
||||||
|
|
||||||
.page-content {
|
.main-content {
|
||||||
line-height: $content-line-height;
|
line-height: $content-line-height;
|
||||||
|
|
||||||
ol,
|
ol,
|
||||||
|
|||||||
@ -37,7 +37,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content-wrap {
|
.main-wrap {
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -48,9 +48,13 @@
|
|||||||
overflow-x: hidden;
|
overflow-x: hidden;
|
||||||
overflow-y: scroll;
|
overflow-y: scroll;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&:focus {
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.main-content {
|
.main {
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
position: relative;
|
position: relative;
|
||||||
max-width: $content-width;
|
max-width: $content-width;
|
||||||
@ -64,11 +68,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.js-main-content:focus {
|
.main-content-wrap {
|
||||||
outline: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page {
|
|
||||||
@include container;
|
@include container;
|
||||||
padding-top: $gutter-spacing-sm;
|
padding-top: $gutter-spacing-sm;
|
||||||
padding-bottom: $gutter-spacing-sm;
|
padding-bottom: $gutter-spacing-sm;
|
||||||
@ -79,7 +79,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.page-header {
|
.main-header {
|
||||||
@include container;
|
@include container;
|
||||||
display: none;
|
display: none;
|
||||||
padding-top: $gutter-spacing-sm;
|
padding-top: $gutter-spacing-sm;
|
||||||
@ -103,7 +103,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation,
|
.site-nav,
|
||||||
.site-header,
|
.site-header,
|
||||||
.site-footer {
|
.site-footer {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
@ -113,9 +113,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation {
|
.site-nav {
|
||||||
@include container;
|
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
padding-top: $sp-8;
|
padding-top: $sp-8;
|
||||||
padding-bottom: $gutter-spacing-sm;
|
padding-bottom: $gutter-spacing-sm;
|
||||||
@ -165,7 +163,7 @@
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu-button {
|
.site-button {
|
||||||
appearance: none;
|
appearance: none;
|
||||||
display: flex;
|
display: flex;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
@ -175,12 +173,18 @@
|
|||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
background: transparent;
|
background: transparent;
|
||||||
border: 0;
|
border: 0;
|
||||||
|
@include fs-3;
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
display: none;
|
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
|
// stylelint-disable selector-max-type
|
||||||
|
|
||||||
body {
|
body {
|
||||||
@ -202,6 +206,8 @@ body {
|
|||||||
left: 0;
|
left: 0;
|
||||||
padding-top: $sp-4;
|
padding-top: $sp-4;
|
||||||
padding-bottom: $sp-4;
|
padding-bottom: $sp-4;
|
||||||
|
color: $grey-dk-000;
|
||||||
|
@include fs-2;
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
position: static;
|
position: static;
|
||||||
|
|||||||
@ -1,74 +1,133 @@
|
|||||||
//
|
//
|
||||||
// Main nav, breadcrumb, etc...
|
// 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;
|
padding: 0;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
margin-bottom: 0;
|
margin-bottom: 0;
|
||||||
list-style: none;
|
list-style: none;
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-list-child-list {
|
.nav-list-item {
|
||||||
padding-left: $sp-3;
|
@include fs-4;
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
.navigation-list-link {
|
|
||||||
color: $nav-child-link-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-list-item {
|
|
||||||
position: relative;
|
position: relative;
|
||||||
|
margin: 0;
|
||||||
|
|
||||||
&::before {
|
@include mq(md) {
|
||||||
|
@include fs-3;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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;
|
||||||
|
}
|
||||||
|
|
||||||
|
@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%);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-list-expander {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
margin-top: 0.3em;
|
@if $nav-list-expander-right {
|
||||||
margin-left: -0.8em;
|
right: 0;
|
||||||
color: rgba($body-text-color, 0.3);
|
}
|
||||||
content: "- ";
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .nav-list {
|
||||||
|
display: none;
|
||||||
|
padding-left: $sp-3;
|
||||||
|
list-style: none;
|
||||||
|
|
||||||
|
.nav-list-item {
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
.nav-list-link {
|
||||||
|
color: $nav-child-link-color;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-list-expander {
|
||||||
|
fill: $nav-child-link-color;
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.active {
|
&.active {
|
||||||
&::before {
|
> .nav-list-expander svg {
|
||||||
color: $body-text-color;
|
@if $nav-list-expander-right {
|
||||||
|
transform: rotate(-90deg);
|
||||||
|
}
|
||||||
|
@else {
|
||||||
|
transform: rotate(90deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
> .nav-list {
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.navigation-list-item {
|
|
||||||
@include fs-4;
|
|
||||||
margin: 0;
|
|
||||||
|
|
||||||
@include mq(md) {
|
|
||||||
@include fs-3;
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-list-child-list {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
.navigation-list-child-list {
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.navigation-list-link {
|
|
||||||
display: block;
|
|
||||||
padding-top: $sp-1;
|
|
||||||
padding-bottom: $sp-1;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
font-weight: 600;
|
|
||||||
color: $body-heading-color;
|
|
||||||
text-decoration: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Small screen nav
|
// Small screen nav
|
||||||
|
|
||||||
.main-nav {
|
.site-nav {
|
||||||
display: none;
|
display: none;
|
||||||
|
|
||||||
&.nav-open {
|
&.nav-open {
|
||||||
@ -81,9 +140,27 @@
|
|||||||
|
|
||||||
.aux-nav {
|
.aux-nav {
|
||||||
align-self: center;
|
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
|
||||||
|
|
||||||
.breadcrumb-nav {
|
.breadcrumb-nav {
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
margin-top: -$sp-4;
|
margin-top: -$sp-4;
|
||||||
|
|||||||
@ -68,7 +68,7 @@
|
|||||||
order: 1;
|
order: 1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-results-wrap {
|
.search-results {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: 100;
|
z-index: 100;
|
||||||
display: none;
|
display: none;
|
||||||
@ -112,7 +112,7 @@
|
|||||||
|
|
||||||
&:hover,
|
&:hover,
|
||||||
&.active {
|
&.active {
|
||||||
background-color: $sidebar-color;
|
background-color: $feedback-color;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include mq(md) {
|
@include mq(md) {
|
||||||
|
|||||||
@ -57,6 +57,7 @@ $sidebar-color: $grey-lt-000 !default;
|
|||||||
$search-background-color: $white !default;
|
$search-background-color: $white !default;
|
||||||
$table-background-color: $white !default;
|
$table-background-color: $white !default;
|
||||||
$code-background-color: $grey-lt-000 !default;
|
$code-background-color: $grey-lt-000 !default;
|
||||||
|
$feedback-color: darken($sidebar-color, 3%) !default;
|
||||||
|
|
||||||
$body-text-color: $grey-dk-100 !default;
|
$body-text-color: $grey-dk-100 !default;
|
||||||
$body-heading-color: $grey-dk-300 !default;
|
$body-heading-color: $grey-dk-300 !default;
|
||||||
@ -113,6 +114,9 @@ $gutter-spacing: $sp-6 !default;
|
|||||||
$gutter-spacing-sm: $sp-4 !default;
|
$gutter-spacing-sm: $sp-4 !default;
|
||||||
$nav-width: 264px !default;
|
$nav-width: 264px !default;
|
||||||
$nav-width-md: 248px !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;
|
$content-width: 800px !default;
|
||||||
$header-height: 60px !default;
|
$header-height: 60px !default;
|
||||||
$search-results-width: 500px !default;
|
$search-results-width: 500px !default;
|
||||||
|
|||||||
@ -24,17 +24,28 @@ jtd.onReady = function(ready) {
|
|||||||
// Show/hide mobile menu
|
// Show/hide mobile menu
|
||||||
|
|
||||||
function initNav() {
|
function initNav() {
|
||||||
const mainNav = document.querySelector('.js-main-nav');
|
jtd.addEvent(document, 'click', function(e){
|
||||||
const pageHeader = document.querySelector('.js-page-header');
|
var target = e.target;
|
||||||
const navTrigger = document.querySelector('.js-main-nav-trigger');
|
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){
|
jtd.addEvent(navTrigger, 'click', function(e){
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
var text = navTrigger.innerText;
|
var text = navTrigger.innerText;
|
||||||
var textToggle = navTrigger.getAttribute('data-text-toggle');
|
var textToggle = navTrigger.getAttribute('data-text-toggle');
|
||||||
|
|
||||||
mainNav.classList.toggle('nav-open');
|
siteNav.classList.toggle('nav-open');
|
||||||
pageHeader.classList.toggle('nav-open');
|
mainHeader.classList.toggle('nav-open');
|
||||||
navTrigger.classList.toggle('nav-open');
|
navTrigger.classList.toggle('nav-open');
|
||||||
navTrigger.innerText = textToggle;
|
navTrigger.innerText = textToggle;
|
||||||
navTrigger.setAttribute('data-text-toggle', text);
|
navTrigger.setAttribute('data-text-toggle', text);
|
||||||
@ -93,8 +104,8 @@ function initSearch() {
|
|||||||
function searchResults(index, data) {
|
function searchResults(index, data) {
|
||||||
var index = index;
|
var index = index;
|
||||||
var docs = data;
|
var docs = data;
|
||||||
var searchInput = document.querySelector('.js-search-input');
|
var searchInput = document.getElementById('search-input');
|
||||||
var searchResults = document.querySelector('.js-search-results');
|
var searchResults = document.getElementById('search-results');
|
||||||
|
|
||||||
function hideResults() {
|
function hideResults() {
|
||||||
searchResults.innerHTML = '';
|
searchResults.innerHTML = '';
|
||||||
@ -282,8 +293,8 @@ function initSearch() {
|
|||||||
// Focus
|
// Focus
|
||||||
|
|
||||||
function pageFocus() {
|
function pageFocus() {
|
||||||
var mainContent = document.querySelector('.js-main-content');
|
var mainWrap = document.getElementById('main-wrap');
|
||||||
mainContent.focus();
|
mainWrap.focus();
|
||||||
}
|
}
|
||||||
|
|
||||||
// Switch theme
|
// Switch theme
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user