From 8c603aac1e10f7cbc6e70e74465b1fbcdd74ca24 Mon Sep 17 00:00:00 2001 From: Silvio Giebl Date: Sun, 12 May 2019 14:12:00 +0200 Subject: [PATCH] Improved layout, unified spacing/font-sizes/border-radius/box-shadow --- _includes/title.html | 1 + _layouts/default.html | 82 ++++++++++++++++--------------- _sass/buttons.scss | 2 +- _sass/layout.scss | 91 +++++++++++++++++++++++++---------- _sass/navigation.scss | 35 ++------------ _sass/search.scss | 74 ++++++++++++++-------------- _sass/support/_variables.scss | 11 +---- _sass/tables.scss | 29 +---------- assets/js/just-the-docs.js | 10 ++-- 9 files changed, 157 insertions(+), 178 deletions(-) create mode 100644 _includes/title.html diff --git a/_includes/title.html b/_includes/title.html new file mode 100644 index 0000000..f6d5669 --- /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 0ee5dcc..3a18b58 100644 --- a/_layouts/default.html +++ b/_layouts/default.html @@ -10,8 +10,10 @@ layout: table_wrappers
- {{ site.title }} - +
+ {% include title.html %} + Menu +
{% include nav.html %}
@@ -20,10 +22,10 @@ layout: table_wrappers
-
-
+
+
{% if site.search_enabled != nil %} -
+
Search @@ -32,48 +34,48 @@ layout: table_wrappers
{% endif %} {% if site.aux_links != nil %} -
-
-
- {% unless page.url == "/" %} - {% if page.parent %} - - {% endif %} - {% endunless %} -
- - {% include vendor/anchor_headings.html html=content anchorBody="#" anchorClass="anchor_heading" %} - - {% if page.has_children == true and page.has_toc != false %} -
-

Table of contents

- {% assign children_list = site.pages | sort:"nav_order" %} -
    - {% for child in children_list %} - {% if child.parent == page.title and child.title != page.title %} -
  • - {{ child.title }} -
    • - {% endif %} - {% endfor %} -
- {% endif %} + {% endfor %} + + {% endif %} +
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;