From e590edfac6f7080b43970a5f66b5c8957d9af2bd Mon Sep 17 00:00:00 2001
From: Michael Rose <est.michael@gmail.com>
Date: Thu, 17 Nov 2016 15:13:46 -0500
Subject: [PATCH] Make changes for /docs
---
docs/_data/navigation.yml | 54 ++++++++++++++---
docs/_data/ui-text.yml | 9 +++
docs/_includes/nav_list | 6 +-
docs/_sass/_base.scss | 2 +
docs/_sass/_navigation.scss | 118 +++++++++++++++++++++++++++++++++---
docs/_sass/_sidebar.scss | 4 --
6 files changed, 168 insertions(+), 25 deletions(-)
diff --git a/docs/_data/navigation.yml b/docs/_data/navigation.yml
index 8fdea861..582c4488 100644
--- a/docs/_data/navigation.yml
+++ b/docs/_data/navigation.yml
@@ -7,7 +7,6 @@ foo:
url: /child-1-page-url/
- title: "Child Link 2"
url: /child-2-page-url/
-
- title: "Parent Link 2"
url: /parent-2-page-url/
children:
@@ -23,16 +22,12 @@ foo:
main:
- title: "Quick-Start Guide"
url: /docs/quick-start-guide/
-
- title: "About"
url: /about/
-
- title: "Sample Posts"
url: /year-archive/
-
- title: "Sample Collections"
url: /collection-archive/
-
- title: "Terms & Privacy Policy"
url: /terms/
@@ -49,7 +44,6 @@ docs:
url: /docs/installation/
- title: "Upgrading"
url: /docs/upgrading/
-
- title: Customization
children:
- title: "Configuration"
@@ -64,7 +58,6 @@ docs:
url: /docs/authors/
- title: "Layouts"
url: /docs/layouts/
-
- title: Content
children:
- title: "Working with Posts"
@@ -77,14 +70,12 @@ docs:
url: /docs/helpers/
- title: "Utility Classes"
url: /docs/utility-classes/
-
- title: Extras
children:
- title: "Stylesheets"
url: /docs/stylesheets/
- title: "JavaScript"
url: /docs/javascript/
-
- title: Meta
children:
- title: "History"
@@ -96,4 +87,47 @@ docs:
- title: "License"
url: /docs/license/
- title: "Terms & Privacy Policy"
- url: /terms/
\ No newline at end of file
+ url: /terms/
+
+# sidebar navigation list sample
+sidebar-sample:
+ - title: "Parent Page A"
+ children:
+ - title: "Child Page A1"
+ url: /
+ - title: "Child Page A2"
+ url: /
+ - title: "Child Page A3"
+ url: /
+ - title: "Child Page A4"
+ url: /
+ - title: "Parent Page B"
+ children:
+ - title: "Child Page B1"
+ url: /
+ - title: "Child Page B2"
+ url: /
+ - title: "Child Page B3"
+ url: /
+ - title: "Child Page B4"
+ url: /
+ - title: "Child Page B5"
+ url: /
+ - title: "Parent Page C"
+ children:
+ - title: "Child Page C1"
+ url: /
+ - title: "Child Page C2"
+ url: /
+ - title: "Child Page C3"
+ url: /
+ - title: "Child Page C4"
+ url: /
+ - title: "Child Page C5"
+ url: /
+ - title: "Parent Page D"
+ children:
+ - title: "Child Page D1"
+ url: /
+ - title: "Child Page D2"
+ url: /
\ No newline at end of file
diff --git a/docs/_data/ui-text.yml b/docs/_data/ui-text.yml
index da4bd210..90d232a1 100644
--- a/docs/_data/ui-text.yml
+++ b/docs/_data/ui-text.yml
@@ -8,6 +8,7 @@ en: &DEFAULT_EN
pagination_next : "Next"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
+ menu_label : "Toggle Menu"
toc_label : "On This Page"
ext_link_label : "Direct Link"
less_than : "less than"
@@ -56,6 +57,7 @@ es: &DEFAULT_ES
pagination_next : "Siguiente"
breadcrumb_home_label : "Inicio"
breadcrumb_separator : "/"
+ menu_label :
toc_label : "Contenidos"
ext_link_label : "Enlace"
less_than : "menos de"
@@ -100,6 +102,7 @@ fr: &DEFAULT_FR
pagination_next : "Suivant"
breadcrumb_home_label : "Accueil"
breadcrumb_separator : "/"
+ menu_label :
toc_label : "Sur cette page"
ext_link_label : "Lien direct"
less_than : "plus petit que"
@@ -147,6 +150,7 @@ tr: &DEFAULT_TR
pagination_next : "Sonraki"
breadcrumb_home_label : "Ana Sayfa"
breadcrumb_separator : "/"
+ menu_label :
toc_label : "İçindekiler"
ext_link_label : "Doğrudan Bağlantı"
less_than : "Şu süreden az: "
@@ -189,6 +193,7 @@ pt: &DEFAULT_PT
pagination_next : "Seguinte"
breadcrumb_home_label : "Início"
breadcrumb_separator : "/"
+ menu_label :
toc_label : "Nesta Página"
ext_link_label : "Link Direto"
less_than : "menos de"
@@ -227,6 +232,7 @@ pt-BR:
pagination_next : "Próxima"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
+ menu_label :
toc_label : "Nesta página"
ext_link_label : "Link direto"
less_than : "meno que"
@@ -269,6 +275,7 @@ it: &DEFAULT_IT
pagination_next : "Prossima"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
+ menu_label :
toc_label : "Indice della pagina"
ext_link_label : "Link"
less_than : "meno di"
@@ -311,6 +318,7 @@ zh: &DEFAULT_ZH
pagination_next : "向后"
breadcrumb_home_label : "首页"
breadcrumb_separator : "/"
+ menu_label :
toc_label : "在本页上"
ext_link_label : "直接链接"
less_than : "少于"
@@ -359,6 +367,7 @@ de: &DEFAULT_DE
pagination_next : "Nächste"
breadcrumb_home_label : "Home"
breadcrumb_separator : "/"
+ menu_label :
toc_label : "Auf dieser Seite"
ext_link_label : "Direkter Link"
less_than : "weniger als"
diff --git a/docs/_includes/nav_list b/docs/_includes/nav_list
index 8f3db3dd..d264577a 100644
--- a/docs/_includes/nav_list
+++ b/docs/_includes/nav_list
@@ -1,8 +1,10 @@
{% assign navigation = site.data.navigation[include.nav] %}
<nav class="nav__list">
- {% if page.sidebar.title %}<header><h4 class="nav__title" style="padding: 0;">{{ page.sidebar.title }}</h4></header>{% endif %}
- <ul>
+ {% if page.sidebar.title %}<h3 class="nav__title" style="padding-left: 0;">{{ page.sidebar.title }}</h3>{% endif %}
+ <input id="ac-toc" name="accordion-toc" type="checkbox" />
+ <label for="ac-toc">{{ site.data.ui-text[site.locale].menu_label | default: "Toggle Menu" }}</label>
+ <ul class="nav__items">
{% for nav in navigation %}
<li>
{% if nav.url %}
diff --git a/docs/_sass/_base.scss b/docs/_sass/_base.scss
index c5311a29..3d74d567 100644
--- a/docs/_sass/_base.scss
+++ b/docs/_sass/_base.scss
@@ -290,6 +290,8 @@ nav {
}
a {
+ display: block;
+ padding-bottom: 0.25em;
text-decoration: none;
}
diff --git a/docs/_sass/_navigation.scss b/docs/_sass/_navigation.scss
index 2d06a120..98542666 100644
--- a/docs/_sass/_navigation.scss
+++ b/docs/_sass/_navigation.scss
@@ -314,19 +314,88 @@
========================================================================== */
.nav__list {
- font-size: 1.25rem;
+ margin: 2em 0 1.5em 0;
- ul {
- margin-bottom: 1em;
+ input[type="checkbox"],
+ label {
+ display: none;
}
- a {
- display: block;
- padding: 0.125em 0;
- color: inherit;
+ @include breakpoint(max-width $large) {
- &:hover {
- text-decoration: underline;
+ label {
+ position: relative;
+ display: inline-block;
+ padding: 0.5em 2.5em 0.5em 1em;
+ font-size: $type-size-6;
+ font-weight: bold;
+ border: 1px solid $light-gray;
+ border-radius: $border-radius;
+ z-index: 20;
+ -webkit-transition: 0.2s ease-out;
+ transition: 0.2s ease-out;
+ cursor: pointer;
+
+ &:before,
+ &:after {
+ content: '';
+ position: absolute;
+ right: 1em;
+ top: 1.25em;
+ width: 0.75em;
+ height: 0.125em;
+ line-height: 1;
+ background-color: #333;
+ transition: 0.2s ease-out;
+ }
+
+ &:after {
+ transform: rotate(90deg);
+ }
+
+ &:hover {
+ color: #fff;
+ border-color: $gray;
+ background-color: mix(white, #000, 20%);
+
+ &:before,
+ &:after {
+ background-color: #fff;
+ }
+ }
+ }
+
+ /* selected*/
+ input:checked + label {
+ color: white;
+ background-color: mix(white, #000, 20%);
+
+ &:before,
+ &:after {
+ background-color: #fff;
+ }
+ }
+
+ // on hover show expand
+ label:hover:after {
+ transform: rotate(90deg);
+ }
+
+ input:checked + label:hover:after {
+ transform: rotate(0);
+ }
+
+ ul {
+ margin-bottom: 1em;
+ }
+
+ a {
+ display: block;
+ padding: 0.125em 0;
+
+ &:hover {
+ text-decoration: underline;
+ }
}
}
@@ -345,6 +414,37 @@
}
}
+.nav__list .nav__items {
+ margin: 0;
+ font-size: 1.25rem;
+
+ @include breakpoint(max-width $large) {
+ position: relative;
+ max-height: 0;
+ opacity: 0;
+ overflow: hidden;
+ z-index: 10;
+ -webkit-transition: 0.3s ease-in-out;
+ transition: 0.3s ease-in-out;
+ -webkit-transform: translate(0, 10%);
+ -ms-transform: translate(0, 10%);
+ transform: translate(0, 10%);
+ }
+}
+
+@include breakpoint(max-width $large) {
+ .nav__list input:checked ~ .nav__items {
+ -webkit-transition: 0.5s ease-in-out;
+ transition: 0.5s ease-in-out;
+ max-height: 100vh;
+ opacity: 1;
+ margin-top: 1em;
+ -webkit-transform: translate(0, 0);
+ -ms-transform: translate(0, 0);
+ transform: translate(0, 0);
+ }
+}
+
.nav__title {
margin: 0;
padding: 0.5rem 1rem;
diff --git a/docs/_sass/_sidebar.scss b/docs/_sass/_sidebar.scss
index 87caee71..89380600 100644
--- a/docs/_sass/_sidebar.scss
+++ b/docs/_sass/_sidebar.scss
@@ -33,10 +33,6 @@
font-family: $sans-serif-narrow;
}
- h3, h4 {
- font-size: $type-size-5;
- }
-
p, li {
font-family: $sans-serif;
font-size: $type-size-6;