mirror of https://github.com/thangisme/notes.git
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="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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
{% 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 %}
|
||||
{% 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>
|
||||
{% 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 %}
|
||||
{% 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>
|
||||
|
|
|
|||
|
|
@ -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%);
|
||||
|
|
|
|||
|
|
@ -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,
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
||||
.navigation-list-link {
|
||||
color: $nav-child-link-color;
|
||||
}
|
||||
|
||||
.navigation-list-item {
|
||||
.nav-list-item {
|
||||
@include fs-4;
|
||||
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;
|
||||
margin-top: 0.3em;
|
||||
margin-left: -0.8em;
|
||||
color: rgba($body-text-color, 0.3);
|
||||
content: "- ";
|
||||
@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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
> .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 {
|
||||
&::before {
|
||||
color: $body-text-color;
|
||||
> .nav-list-expander svg {
|
||||
@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
|
||||
|
||||
.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;
|
||||
|
|
|
|||
|
|
@ -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) {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
Loading…
Reference in New Issue