- + Search
diff --git a/_layouts/home.html b/_layouts/home.html new file mode 100644 index 0000000..5e71126 --- /dev/null +++ b/_layouts/home.html @@ -0,0 +1,5 @@ +--- +layout: default +--- + +{{ content }} diff --git a/_sass/layout.scss b/_sass/layout.scss index 75e87ac..9bb6889 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -17,13 +17,15 @@ .side-bar { z-index: 100; + display: flex; + flex-wrap: wrap; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; background-color: $grey-lt-000; @include mq(md) { + flex-wrap: nowrap; position: absolute; - display: flex; width: $nav-width + 16px; height: 100%; padding-top: $gutter-spacing * 2; @@ -107,11 +109,9 @@ .navigation { @include mq(md) { - position: absolute; - top: 0; - right: 0; - height: 100%; padding-top: $sp-8; + overflow-y: auto; + flex: 1 1 auto; } } @@ -127,9 +127,14 @@ body { .site-footer { position: absolute; - bottom: $sp-3; + bottom: 0; + padding-top: $sp-4; + padding-bottom: $sp-4; @include mq(md) { - right: 0; + position: static; + align-self: flex-end; + justify-self: end; + background-color: $grey-lt-000; } } diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 79594da..e6f1d22 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -4,9 +4,7 @@ .site-title { display: block; - flex-grow: 1; - flex-shrink: 1; - flex-basis: auto; + flex: 1 1 auto; background-color: $grey-lt-000; @include mq(md) { @@ -27,7 +25,7 @@ list-style: none; @include mq(md) { - margin-top: $sp-10; + margin-top: 0; } } @@ -91,15 +89,6 @@ } } -.side-bar { - display: flex; - flex-wrap: wrap; - - @include mq(md) { - display: block; - overflow-y: auto; - } -} .navigation-list-toggle { position: absolute; diff --git a/_sass/search.scss b/_sass/search.scss index b57aa6e..7037080 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -7,10 +7,11 @@ z-index: 99; display: none; flex-grow: 1; - padding-bottom: $gutter-spacing / 2; - background-color: $white; padding: $sp-2; 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; @@ -20,6 +21,7 @@ padding-left: 0; margin-bottom: 0; background-color: transparent; + box-shadow: none; } &.nav-open { @@ -65,6 +67,16 @@ fill: $purple-000; } } + + @include fs-5; + + @include mq(sm) { + @include fs-3; + } + + @include mq(md) { + @include fs-2; + } } .search-icon { diff --git a/docs/search.md b/docs/search.md index cdb8571..5283578 100644 --- a/docs/search.md +++ b/docs/search.md @@ -23,7 +23,7 @@ $ bundle exec just-the-docs rake search:init This command creates the `search-data.json` file that Jekyll uses to create your search index. Alternatively, you can create the file manually in the -root of your Jekyll site with this content: +`assets/js/` of your Jekyll site with this content: ```{% raw %} --- @@ -39,4 +39,4 @@ root of your Jekyll site with this content: }{% endraw %} ``` -You can modify this by modifying the forloop in `search-data.json` and the javascript in `just-the-docs.js` on line 30. +_Note: If you don't run this rake command or create this file manually, search will not work (or it will use the search index data from this docs site, not your site's content)._ diff --git a/index.md b/index.md index 4f4c121..66c8339 100644 --- a/index.md +++ b/index.md @@ -2,6 +2,7 @@ layout: default title: Home nav_order: 1 +permalink: / --- diff --git a/just-the-docs.gemspec b/just-the-docs.gemspec index 4e872dc..d2ebe70 100644 --- a/just-the-docs.gemspec +++ b/just-the-docs.gemspec @@ -2,7 +2,7 @@ Gem::Specification.new do |spec| spec.name = "just-the-docs" - spec.version = "0.1.3" + spec.version = "0.1.4" spec.authors = ["Patrick Marsceill"] spec.email = ["patrick.marsceill@gmail.com"] @@ -14,7 +14,7 @@ Gem::Specification.new do |spec| spec.executables << 'just-the-docs' spec.add_runtime_dependency "jekyll", "~> 3.3" + spec.add_runtime_dependency "rake", "~> 10.0" spec.add_development_dependency "bundler", "~> 1.12" - spec.add_development_dependency "rake", "~> 10.0" end