This commit is contained in:
Patrick Marsceill 2017-06-04 17:50:01 -04:00
parent b06e4198df
commit 76d8f0c50c
No known key found for this signature in database
GPG Key ID: AEAF30C14952BCC5
10 changed files with 67 additions and 55 deletions

View File

@ -25,3 +25,11 @@ sass:
permalink: pretty
exclude: ["node_modules/", "*.gemspec", "Gemfile", "Gemfile.lock", "package.json", "LICENSE.txt"]
aux_links:
GitHub:
- "//github.com/pmarsceill/just-the-docs"
"Support link":
- "//google.com/turds"
"Another link":
- "//yahoo.com"

View File

@ -15,24 +15,34 @@
</div>
</div>
<div class="main-content-wrap">
<div class="search">
<div class="search-input-wrap">
<input type="text" class="js-search-input search-input fs-2" 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>
<div class="page-header">
<div class="main-content pb-0">
<div class="search">
<div class="search-input-wrap">
<input type="text" class="js-search-input search-input fs-2" 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>
</div>
<div class="js-search-results search-results-wrap"></div>
</div>
{% if site.aux_links != nil %}
<ul class="list-style-none text-small">
{% for link in site.aux_links %}
<li class="d-inline-block{% unless forloop.last %} mr-2{% endunless %}"><a href="{{ link.last }}">{{ link.first }}</a></li>
{% endfor %}
</ul>
{% endif %}
</div>
<div class="js-search-results search-results-wrap"></div>
</div>
<div class="main-content {% if page.url == '/' %}mt-2 mt-md-10{% endif %}">
<div class="main-content">
{% unless page.url == "/" %}
<nav class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
<li class="breadcrumb-nav-list-item"><a href="{{ site.url }}">Home</a></li>
{% if page.parent != nil and page.parent != page.title %}
<li class="breadcrumb-nav-list-item"><a href="{{ site.url }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
{% endif %}
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
{% if page.parent != nil and page.parent != page.title %}
<nav class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
<li class="breadcrumb-nav-list-item"><a href="{{ site.url }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
{% endif %}
{% endunless %}
<div class="page-content">
{{ content }}

View File

@ -53,8 +53,7 @@
}
}
.main-content,
.search {
.main-content {
padding-top: $gutter-spacing-sm;
@include container;
@ -73,6 +72,17 @@
}
}
.page-header {
border-bottom: $border $border-color;
@include mq(md) {
.main-content {
display: flex;
justify-content: space-between;
}
}
}
.navigation,
.site-title {

View File

@ -105,13 +105,8 @@
.breadcrumb-nav-list {
padding-left: 0;
margin-top: $sp-3;
margin-bottom: $sp-3;
list-style: none;
@include mq(md) {
margin-bottom: $sp-5;
}
}
.breadcrumb-nav-list-item {

View File

@ -8,10 +8,9 @@
@include mq(md) {
position: relative;
z-index: 99;
display: flex;
justify-content: flex-end;
padding-top: 0;
padding-bottom: 0;
display: block;
padding-top: $sp-1;
padding-bottom: $gutter-spacing / 2;
}
}
@ -20,22 +19,17 @@
&.active {
position: absolute;
top: $sp-10;
right: $gutter-spacing;
top: $sp-1;
z-index: 100;
display: block;
width: 300px;
margin-top: $sp-2;
margin-top: $gutter-spacing;
background: $white;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
}
}
.search-input-wrap {
position: absolute;
top: $sp-7;
right: $gutter-spacing;
z-index: 99;
display: flex;
background-color: $white;
}
@ -46,14 +40,13 @@
padding-bottom: $sp-1;
border-top: 0;
border-right: 0;
border-bottom: $border $border-color;
border-bottom: 0;
border-left: 0;
order: 2;
&:focus {
border-bottom: $border $grey-lt-300;
outline: 0;
box-shadow: 0;
box-shadow: none;
+ .search-icon {
fill: $purple-000;
@ -70,6 +63,7 @@
.search-results-list {
padding-left: 0;
margin-top: $sp-1;
margin-bottom: $sp-1;
list-style: none;
@include fs-3;

View File

@ -30,7 +30,7 @@ function toggleNav(){
function initSearch() {
var index = lunr(function () {
this.ref('id');
this.field('title', { boost: 20 });
this.field('title');
this.field('content');
this.field('url');
});

View File

@ -62,7 +62,8 @@ GitHub flavored markdown does not support the `button` element, so you'll have t
### Button size
Wrap the button in container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography) to scale buttons:
Wrap the button in container that uses the [font-size utility classes]({{
site.baseurl }}{% link docs/utilities/typography.md %}) to scale buttons:
<div class="code-example" markdown="1">

View File

@ -5,20 +5,13 @@ nav_order: 1
---
# Focus on writing your docs, instead of building a website for them.
# Focus on writing good documentation
{: .fs-9 .mb-md-8 :}
<div class="d-sm-flex my-sm-7">
<div class="px-10 pl-sm-0 pr-sm-7 mb-5 mb-sm-0">
<img src="/assets/images/just-the-docs.png" alt="" class="mt-sm-2">
</div>
<div markdown="1">
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
{: .fs-6 .fw-300 }
Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
{: .fs-6 .fw-300 }
[Get started now](#getting-started){: .btn .btn-purple .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn }
</div>
</div>
[Get started now](#getting-started){: .btn .btn-purple .mr-2 } [View it on GitHub](https://github.com/pmarsceill/just-the-docs){: .btn }
---

View File

@ -10,7 +10,7 @@ Gem::Specification.new do |spec|
spec.homepage = "https://github.com/pmarsceill/just-the-docs"
spec.license = "MIT"
spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|_layouts|_includes|_sass|LICENSE|README|search-data.json)}i) }
spec.files = `git ls-files -z`.split("\x0").select { |f| f.match(%r{^(assets|bin|lib|_layouts|_includes|_sass|LICENSE|README)}i) }
spec.add_runtime_dependency "jekyll", "~> 3.3"

View File

@ -2,9 +2,10 @@
---
{
{% for page in site.html_pages %}"{{ forloop.index0 }}": {
"id": "{{ forloop.index0 }}",
"title": "{{ page.title | xml_escape }}",
"content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | remove: page.title | strip_newlines | replace: '\', ' '}}",
"url": " {{ page.url | xml_escape }}"
}{% unless forloop.last %},{% endunless %}{% endfor %}
"id": "{{ forloop.index0 }}",
"title": "{{ page.title | xml_escape }}",
"content": "{{ page.content | markdownify | strip_html | xml_escape | remove: 'Table of contents' | remove: page.title | strip_newlines | replace: '\', ' '}}",
"url": "{{ page.url | xml_escape }}"
}{% if forloop.last %}{% else %},
{% endif %}{% endfor %}
}