-
+
+
{% if site.search_enabled != nil %}
-
+
-
-
@@ -32,48 +34,48 @@ layout: table_wrappers
{% endif %}
{% if site.aux_links != nil %}
- -
+
- {{ link.first }} {% endfor %}
-
{% for link in site.aux_links %}
- {% unless page.url == "/" %}
- {% if page.parent %}
-
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
index 05db0ed..57660e0 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 ddd56fa..068b6ab 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 364c569..283f812 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 32ec1db..6485c03 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 8a09eda..59a7c4e 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 c5be606..08edee2 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 b3fca27..bc0a635 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;