diff --git a/_includes/title.html b/_includes/title.html
new file mode 100644
index 0000000000000000000000000000000000000000..f6d566937aa74477f4d6ea6409fce0e039ce3d33
--- /dev/null
+++ b/_includes/title.html
@@ -0,0 +1 @@
+{{ site.title }}
\ No newline at end of file
diff --git a/_layouts/default.html b/_layouts/default.html
index 0ee5dcc58f993c155eec7daefcfee1264864c75d..3a18b589edf55b50854e124a650653c299a2ed27 100644
--- a/_layouts/default.html
+++ b/_layouts/default.html
@@ -10,8 +10,10 @@ layout: table_wrappers
<div class="page-wrap">
<div class="side-bar">
- <a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 lh-tight">{{ site.title }}</a>
- <span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
+ <div class="site-header">
+ <a href="{{ site.url }}{{ site.baseurl }}" class="site-title">{% include title.html %}</a>
+ <a href="#" class="site-button fs-3 js-main-nav-trigger" data-text-toggle="Hide">Menu</a>
+ </div>
<div class="navigation main-nav js-main-nav">
{% include nav.html %}
</div>
@@ -20,10 +22,10 @@ layout: table_wrappers
</footer>
</div>
<div class="main-content-wrap js-main-content" tabindex="0">
- <div class="page-header">
- <div class="main-content">
+ <div class="main-content">
+ <div class="page-header js-page-header">
{% if site.search_enabled != nil %}
- <div class="search js-search">
+ <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>
@@ -32,48 +34,48 @@ layout: table_wrappers
</div>
{% endif %}
{% if site.aux_links != nil %}
- <ul class="list-style-none text-small mt-md-1 mb-md-1 pb-4 pb-md-0 js-aux-nav aux-nav">
+ <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 }}">{{ link.first }}</a></li>
{% endfor %}
</ul>
{% endif %}
</div>
- </div>
- <div class="main-content">
- {% unless page.url == "/" %}
- {% if page.parent %}
- <nav 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>
- <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
- {% else %}
- <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
- {% endif %}
- <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
- </ol>
- </nav>
- {% endif %}
- {% endunless %}
- <div id="main-content" class="page-content" role="main">
+ <div class="page">
+ {% unless page.url == "/" %}
+ {% if page.parent %}
+ <nav 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>
+ <li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
+ {% else %}
+ <li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
+ {% endif %}
+ <li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
+ </ol>
+ </nav>
+ {% endif %}
+ {% endunless %}
+ <div id="main-content" class="page-content" role="main">
- {% include vendor/anchor_headings.html html=content anchorBody="#" anchorClass="anchor_heading" %}
+ {% include vendor/anchor_headings.html html=content anchorBody="#" anchorClass="anchor_heading" %}
- {% if page.has_children == true and page.has_toc != false %}
- <hr>
- <h2 class="text-delta">Table of contents</h2>
- {% assign children_list = site.pages | sort:"nav_order" %}
- <ul>
- {% for child in children_list %}
- {% if child.parent == page.title and child.title != page.title %}
- <li>
- <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
- </li>
- {% endif %}
- {% endfor %}
- </ul>
- {% endif %}
+ {% if page.has_children == true and page.has_toc != false %}
+ <hr>
+ <h2 class="text-delta">Table of contents</h2>
+ {% assign children_list = site.pages | sort:"nav_order" %}
+ <ul>
+ {% for child in children_list %}
+ {% if child.parent == page.title and child.title != page.title %}
+ <li>
+ <a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
+ </li>
+ {% endif %}
+ {% endfor %}
+ </ul>
+ {% endif %}
+ </div>
</div>
</div>
</div>
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
index 05db0ed9015e1a1142d211b6464f95d812fe7d68..57660e05ce726ea866d4bd309819b36db8ea7f3a 100644
--- a/_sass/buttons.scss
+++ b/_sass/buttons.scss
@@ -21,7 +21,7 @@
cursor: pointer;
background-color: $base-button-color;
border-width: 0;
- border-radius: 3px;
+ border-radius: $border-radius;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
appearance: none;
diff --git a/_sass/layout.scss b/_sass/layout.scss
index ddd56fa977f0484f59e867c3620a521f204bb929..068b6abb79cd089ca928dcc74292bbb77fe473d8 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -19,17 +19,13 @@
z-index: 100;
display: flex;
flex-wrap: wrap;
- padding-top: $gutter-spacing-sm;
- padding-bottom: $gutter-spacing-sm;
background-color: $sidebar-color;
@include mq(md) {
flex-wrap: nowrap;
position: absolute;
- width: $nav-width + 16px;
+ width: $nav-width;
height: 100%;
- padding-top: $gutter-spacing * 2;
- padding-bottom: 0;
flex-direction: column;
border-right: $border $border-color;
align-items: flex-end;
@@ -48,7 +44,6 @@
left: 0;
width: 100%;
height: 100%;
- min-height: 600px;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
@@ -56,20 +51,13 @@
}
.main-content {
- padding-top: $gutter-spacing-sm;
- @include container;
-
@include mq(md) {
position: relative;
max-width: $content-width;
- padding-top: $gutter-spacing;
- padding-bottom: $gutter-spacing;
- padding-left: $gutter-spacing * 1.5;
margin-left: $nav-width;
}
@include mq(lg) {
- padding-left: $gutter-spacing;
margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
}
}
@@ -78,48 +66,99 @@
outline: none;
}
+.page {
+ @include container;
+ padding-top: $gutter-spacing-sm;
+ padding-bottom: $gutter-spacing-sm;
+
+ @include mq(md) {
+ padding-top: $gutter-spacing;
+ padding-bottom: $gutter-spacing;
+ }
+}
+
.page-header {
+ @include container;
+ display: none;
+ padding-top: $gutter-spacing-sm;
+ padding-bottom: $gutter-spacing-sm;
background-color: $sidebar-color;
@include mq(md) {
background-color: $body-background-color;
+ display: flex;
+ justify-content: flex-end;
+ height: $header-height;
+ border-bottom: $border $border-color;
}
- .main-content {
- padding-top: 0;
+ &.nav-open {
+ display: block;
@include mq(md) {
display: flex;
- justify-content: flex-end;
- height: 60px;
- padding-top: $sp-4;
- padding-bottom: $sp-4;
- border-bottom: $border $border-color;
}
}
}
.navigation,
-.site-title,
+.site-header,
.site-footer {
- @include container;
-
width: 100%;
@include mq(lg) {
- width: $nav-width + 32px;
+ width: $nav-width;
}
}
.navigation {
+ @include container;
+
@include mq(md) {
padding-top: $sp-8;
+ padding-bottom: $gutter-spacing-sm;
overflow-y: auto;
flex: 1 1 auto;
}
}
+.site-header {
+ display: flex;
+ align-items: center;
+
+ @include mq(md) {
+ height: $header-height;
+ min-height: $header-height;
+ max-height: $header-height;
+ z-index: 101;
+ border-bottom: $border $border-color;
+ }
+}
+
+.site-title {
+ @include container;
+ flex-grow: 1;
+ display: flex;
+ height: 100%;
+ align-items: center;
+ padding-top: $gutter-spacing-sm;
+ padding-bottom: $gutter-spacing-sm;
+ color: $body-heading-color;
+ @include fs-6;
+}
+
+.site-button {
+ height: 100%;
+ padding: $gutter-spacing-sm;
+ display: flex;
+ align-items: center;
+
+ @include mq(md) {
+ display: none;
+ }
+}
+
// stylelint-disable selector-max-type
body {
@@ -135,15 +174,15 @@ body {
// stylelint-enable selector-max-type
.site-footer {
+ @include container;
position: absolute;
bottom: 0;
padding-top: $sp-4;
padding-bottom: $sp-4;
+ background-color: $sidebar-color;
@include mq(md) {
position: static;
- align-self: flex-end;
justify-self: end;
- background-color: $sidebar-color;
}
}
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 364c569a1cbb931eb96346abf095eb200a5d0a76..283f812f49d51f4135ff54d5e7d1d13d6cad7d24 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -2,32 +2,11 @@
// Main nav, breadcrumb, etc...
//
-.site-title {
- display: block;
- flex: 1 1 auto;
- color: $body-heading-color;
- background-color: $sidebar-color;
-
- @include mq(md) {
- position: absolute;
- top: 0;
- right: 0;
- z-index: 101;
- height: 60px;
- padding-top: $sp-4;
- border-bottom: $border $border-color;
- }
-}
-
.navigation-list {
padding: 0;
- margin-top: $sp-4;
+ margin-top: 0;
margin-bottom: 0;
list-style: none;
-
- @include mq(md) {
- margin-top: 0;
- }
}
.navigation-list-child-list {
@@ -90,8 +69,7 @@
// Small screen nav
-.main-nav,
-.aux-nav {
+.main-nav {
display: none;
&.nav-open {
@@ -102,13 +80,8 @@
}
}
-.navigation-list-toggle {
- position: absolute;
- right: $sp-4;
-
- @include mq(md) {
- display: none !important;
- }
+.aux-nav {
+ align-self: center;
}
// Breadcrumb nav
diff --git a/_sass/search.scss b/_sass/search.scss
index 32ec1dbe225ecc5f1ca4f09fe3eb3522ccb9bfb7..6485c037ce1caa774c6c42d211470a3a8b573051 100644
--- a/_sass/search.scss
+++ b/_sass/search.scss
@@ -5,51 +5,35 @@
.search {
position: relative;
z-index: 99;
- display: none;
flex-grow: 1;
- padding: $sp-2;
+ height: 100%;
margin-bottom: $sp-3;
- background-color: $white;
- border-radius: 3px;
- box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 3px 10px rgba(0, 0, 0, 0.05);
@include mq(md) {
- display: block;
- padding-top: $sp-1;
- padding-right: 0;
- padding-bottom: 0;
- padding-left: 0;
margin-bottom: 0;
- background-color: transparent;
- box-shadow: none;
- }
-
- &.nav-open {
- display: block;
- }
-}
-
-.search-results-wrap {
- display: none;
-
- &.active {
- position: absolute;
- top: $sp-1;
- z-index: 100;
- display: block;
- width: 300px;
- margin-top: $gutter-spacing;
- background: lighten($body-background-color, 1%);
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
}
}
.search-input-wrap {
display: flex;
+ height: 100%;
background-color: $body-background-color;
+ padding: $sp-2;
+ border-radius: $border-radius;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+ @include mq(md) {
+ padding-top: 0;
+ padding-right: 0;
+ padding-bottom: 0;
+ padding-left: 0;
+ border-radius: 0;
+ box-shadow: none;
+ }
}
.search-input {
+ align-self: center;
width: 100%;
padding-top: $sp-1;
padding-bottom: $sp-1;
@@ -69,14 +53,10 @@
}
}
- @include fs-5;
-
- @include mq(sm) {
- @include fs-3;
- }
+ @include fs-4;
@include mq(md) {
- @include fs-2;
+ @include fs-3;
}
}
@@ -87,12 +67,30 @@
order: 1;
}
+.search-results-wrap {
+ position: absolute;
+ display: none;
+ z-index: 100;
+ width: 100%;
+ border-radius: $border-radius;
+ background: lighten($body-background-color, 1%);
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
+
+ &.active {
+ display: block;
+ }
+}
+
.search-results-list {
padding-left: 0;
margin-top: $sp-1;
margin-bottom: $sp-1;
list-style: none;
- @include fs-3;
+ @include fs-4;
+
+ @include mq(md) {
+ @include fs-3;
+ }
}
.search-results-list-item {
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 8a09eda365c8675d38387928e96a0852e70be8bc..59a7c4efd3a07701762806a32ce3de4b7ca76954 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -118,13 +118,6 @@ $border-color: $grey-lt-100 !default;
$gutter-spacing: $sp-6 !default;
$gutter-spacing-sm: $sp-4 !default;
-$nav-width: 232px !default;
+$nav-width: 264px !default;
$content-width: 800px !default;
-
-$media-queries: (
- xs: 320px,
- sm: 500px,
- md: 740px,
- lg: 800px,
- xl: 1316px
-) !default;
+$header-height: 60px !default;
diff --git a/_sass/tables.scss b/_sass/tables.scss
index c5be6063e6d69c36ba110a1e29c89de437c9f9ca..08edee237287590ff6b9982ac943a5cd2e806c52 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -9,7 +9,8 @@
max-width: 100%;
margin-bottom: $sp-5;
overflow-x: auto;
- box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
+ border-radius: $border-radius;
+ box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
}
table {
@@ -35,38 +36,12 @@ td {
}
}
-thead,
-tbody:first-child {
- tr {
- &:first-of-type {
- th,
- td {
- &:first-of-type {
- border-top-left-radius: $border-radius;
- }
-
- &:last-of-type {
- border-top-right-radius: $border-radius;
- }
- }
- }
- }
-}
-
tbody {
tr {
&:last-of-type {
th,
td {
border-bottom: 0;
-
- &:first-of-type {
- border-bottom-left-radius: $border-radius;
- }
-
- &:last-of-type {
- border-bottom-right-radius: $border-radius;
- }
}
}
}
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index b3fca27ade7afc5dae388fba003f6e7664b3f304..bc0a63576cc10d856b32e044ebd383431a0f5f2a 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -10,19 +10,17 @@ function removeEvent(el, type, handler) {
// Show/hide mobile menu
function toggleNav(){
- const nav = document.querySelector('.js-main-nav');
- const auxNav = document.querySelector('.js-aux-nav');
+ const mainNav = document.querySelector('.js-main-nav');
+ const pageHeader = document.querySelector('.js-page-header');
const navTrigger = document.querySelector('.js-main-nav-trigger');
- const search = document.querySelector('.js-search');
addEvent(navTrigger, 'click', function(){
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
- nav.classList.toggle('nav-open');
- auxNav.classList.toggle('nav-open');
+ mainNav.classList.toggle('nav-open');
+ pageHeader.classList.toggle('nav-open');
navTrigger.classList.toggle('nav-open');
- search.classList.toggle('nav-open');
navTrigger.innerText = textToggle;
navTrigger.setAttribute('data-text-toggle', text);
textToggle = text;