Skip to content
Snippets Groups Projects
Unverified Commit 21990474 authored by Patrick Marsceill's avatar Patrick Marsceill Committed by GitHub
Browse files

Merge pull request #23 from pmarsceill/v0.2.0 

v0.2.0 release
parents fa40528a cd55ce00
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 234 additions and 55 deletions
.stylelintrc.json
+ 1
− 0
View file @ 21990474
{
"ignoreFiles" : [
"assets/css/just-the-docs.scss",
"assets/css/dark-mode-preview.scss",
"_sass/vendor/**/*.scss"
],
"extends": [
......
.travis.yml
+ 1
− 0
View file @ 21990474
......@@ -6,6 +6,7 @@ env:
install:
- npm install
- gem install bundler --version '>=1.17.1'
- bundle install
script:
......
_config.yml
+ 3
− 0
View file @ 21990474
......@@ -28,3 +28,6 @@ search_enabled: true
aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
# Color scheme currently only supports "dark" or nil (default)
color_scheme: nil
_includes/nav.html
+ 39
− 19
View file @ 21990474
<nav>
<ul class="navigation-list">
{% assign pages_list = site.html_pages | sort:"nav_order" %}
{% for node in pages_list %}
<li class="navigation-list-item{% if page.url == node.url %} active{% endif %} js-side-nav-item">
{% if node.parent == nil or node.has_children == true %}
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url or (page.parent != nil and page.parent == node.parent) %} active{% endif %}">{{ node.title }}</a>
{% if (node.has_children == true and node.parent == page.parent) %}
{% assign children_list = site.html_pages | sort:"nav_order" %}
<ul class="navigation-list-child-list">
{% for child in children_list %}
{% if child.parent == node.parent and child.title != node.title %}
<li class="navigation-list-item {% if page.url == child.url %} active{% endif %}">
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
{% assign pages_list = site.html_pages | sort:"nav_order" %}
{% for node in pages_list %}
{% unless node.nav_exclude %}
{% if node.parent == nil %}
<li class="navigation-list-item{% if page.url == node.url or page.parent == node.title or page.grand_parent == node.title %} active{% endif %}">
{% if page.parent == node.title or page.grand_parent == node.title %}
{% assign first_level_url = node.url | absolute_url %}
{% endif %}
<a href="{{ node.url | absolute_url }}" class="navigation-list-link{% if page.url == node.url %} active{% endif %}">{{ node.title }}</a>
{% if node.has_children %}
{% assign children_list = site.html_pages | sort:"nav_order" %}
<ul class="navigation-list-child-list ">
{% for child in children_list %}
{% if child.parent == node.title %}
<li class="navigation-list-item {% if page.url == child.url or page.parent == child.title %} active{% endif %}">
{% if page.url == child.url or page.parent == child.title %}
{% assign second_level_url = child.url | absolute_url %}
{% endif %}
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
{% if child.has_children %}
{% assign grand_children_list = site.html_pages | sort:"nav_order" %}
<ul class="navigation-list-child-list">
{% for grand_child in grand_children_list %}
{% if grand_child.parent == child.title %}
<li class="navigation-list-item {% if page.url == grand_child.url %} active{% endif %}">
<a href="{{ grand_child.url | absolute_url }}" class="navigation-list-link{% if page.url == grand_child.url %} active{% endif %}">{{ grand_child.title }}</a>
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
{% endfor %}
</ul>
{% endif %}
</li>
{% endif %}
</li>
{% endfor %}
{% endunless %}
{% endfor %}
</ul>
</nav>
_layouts/default.html
+ 8
− 3
View file @ 21990474
......@@ -5,7 +5,7 @@
<div class="page-wrap">
<div class="side-bar">
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 text-grey-dk-300 lh-tight">{{ site.title }}</a>
<a href="{{ site.url }}{{ site.baseurl }}" class="site-title fs-6 lh-tight">{{ site.title }}</a>
<span class="fs-3"><button class="js-main-nav-trigger navigation-list-toggle btn btn-outline" type="button" data-text-toggle="Hide">Menu</button></span>
<div class="navigation main-nav js-main-nav">
{% include nav.html %}
......@@ -37,10 +37,15 @@
</div>
<div class="main-content">
{% unless page.url == "/" %}
{% if page.parent != nil and page.parent != page.title %}
{% if page.parent %}
<nav class="breadcrumb-nav">
<ol class="breadcrumb-nav-list">
<li class="breadcrumb-nav-list-item"><a href="{{ site.url }}{{ site.baseurl }}/{{ page.parent | slugify }}">{{ page.parent }}</a></li>
{% if page.grand_parent %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.grand_parent }}</a></li>
<li class="breadcrumb-nav-list-item"><a href="{{ second_level_url }}">{{ page.parent }}</a></li>
{% else %}
<li class="breadcrumb-nav-list-item"><a href="{{ first_level_url }}">{{ page.parent }}</a></li>
{% endif %}
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
......
_sass/base.scss
+ 8
− 2
View file @ 21990474
......@@ -7,6 +7,11 @@
box-sizing: border-box;
}
::selection {
color: $white;
background: $link-color;
}
html {
@include fs-4;
}
......@@ -16,6 +21,7 @@ body {
font-size: inherit;
line-height: $body-line-height;
color: $body-text-color;
background-color: $body-background-color;
}
p,
......@@ -64,7 +70,7 @@ a {
a:not([class]) {
text-decoration: none;
background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%);
background-image: linear-gradient($border-color 0%, $border-color 100%);
background-repeat: repeat-x;
background-position: 0 100%;
background-size: 1px 1px;
......@@ -99,6 +105,6 @@ hr {
height: 1px;
padding: 0;
margin: $sp-6 0;
background-color: $grey-lt-100;
background-color: $border-color;
border: 0;
}
_sass/buttons.scss
+ 11
− 7
View file @ 21990474
......@@ -15,11 +15,11 @@
font-size: inherit;
font-weight: 500;
line-height: 1.5;
color: $purple-200;
color: $link-color;
text-decoration: none;
vertical-align: baseline;
cursor: pointer;
background-color: #f7f7f7;
background-color: $base-button-color;
border-width: 0;
border-radius: 3px;
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
......@@ -38,7 +38,7 @@
&:hover,
&.zeroclipboard-is-hover {
color: $purple-300;
color: darken($link-color, 2%);
}
&:hover,
......@@ -46,13 +46,13 @@
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
text-decoration: none;
background-color: #f4f4f4;
background-color: darken($base-button-color, 1%);
}
&:active,
&.selected,
&.zeroclipboard-is-active {
background-color: #ededed;
background-color: darken($base-button-color, 3%);
background-image: none;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
}
......@@ -75,7 +75,7 @@
}
.btn-outline {
color: $blue-100;
color: $link-color;
background: transparent;
box-shadow: inset 0 0 0 2px $grey-lt-300;
......@@ -83,7 +83,7 @@
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
color: $grey-dk-100;
color: darken($link-color, 4%);
text-decoration: none;
background-color: transparent;
box-shadow: inset 0 0 0 3px $grey-lt-300;
......@@ -101,6 +101,10 @@
}
}
.btn-primary {
@include btn-color($white, $btn-primary-color);
}
.btn-purple {
@include btn-color($white, $purple-100);
}
......
_sass/code.scss
+ 3
− 3
View file @ 21990474
......@@ -6,15 +6,15 @@
code {
padding: 0.2em 0.15em;
font-weight: 400;
background-color: $grey-lt-000;
background-color: $code-background-color;
border: $border $border-color;
border-radius: $border-radius;
}
.highlight {
pre.highlight {
padding: $sp-3;
margin-bottom: 0;
background-color: $grey-lt-000;
background-color: $code-background-color;
code {
padding: 0;
......
_sass/color_schemes/dark.scss 0 → 100644
+ 14
− 0
View file @ 21990474
$body-background-color: $grey-dk-300;
$sidebar-color: $grey-dk-300;
$border-color: $grey-dk-200;
$body-text-color: $grey-lt-300;
$body-heading-color: $grey-lt-000;
$nav-child-link-color: $grey-dk-000;
$link-color: $blue-000;
$btn-primary-color: $blue-200;
$base-button-color: $grey-dk-250;
$code-background-color: $grey-dk-250;
_sass/content.scss
+ 6
− 0
View file @ 21990474
......@@ -4,6 +4,12 @@
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type
.page-content {
a {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
ul,
ol {
padding-left: 1.5em;
......
_sass/custom/custom.scss
+ 11
− 3
View file @ 21990474
......@@ -17,6 +17,7 @@
// $grey-dk-000: #959396;
// $grey-dk-100: #5c5962;
// $grey-dk-200: #44434d;
// $grey-dk-250: #302d36 !default;
// $grey-dk-300: #27262b;
//
// $grey-lt-000: #f5f6fa;
......@@ -39,9 +40,16 @@
// $green-200: #009c7b;
// $green-300: #026e57;
//
// $body-text-color: $grey-dk-100;
// $body-heading-color: $grey-dk-300;
// $link-color: $purple-000;
// $body-background-color: $white !default;
// $sidebar-color: $grey-lt-000 !default;
// $code-background-color: $grey-lt-000 !default;
// $body-text-color: $grey-dk-100 !default;
// $body-heading-color: $grey-dk-300 !default;
// $nav-child-link-color: $grey-dk-100 !default;
// $link-color: $purple-000 !default;
// $btn-primary-color: $purple-100 !default;
// $base-button-color: #f7f7f7 !default;
//
// //
// // Media queries in pixels
......
_sass/layout.scss
+ 4
− 4
View file @ 21990474
......@@ -21,7 +21,7 @@
flex-wrap: wrap;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
background-color: $grey-lt-000;
background-color: $sidebar-color;
@include mq(md) {
flex-wrap: nowrap;
......@@ -75,10 +75,10 @@
}
.page-header {
background-color: $grey-lt-000;
background-color: $sidebar-color;
@include mq(md) {
background-color: $white;
background-color: $body-background-color;
}
.main-content {
......@@ -138,6 +138,6 @@ body {
position: static;
align-self: flex-end;
justify-self: end;
background-color: $grey-lt-000;
background-color: $sidebar-color;
}
}
_sass/navigation.scss
+ 21
− 5
View file @ 21990474
......@@ -5,7 +5,8 @@
.site-title {
display: block;
flex: 1 1 auto;
background-color: $grey-lt-000;
color: $body-heading-color;
background-color: $sidebar-color;
@include mq(md) {
position: absolute;
......@@ -34,7 +35,7 @@
list-style: none;
.navigation-list-link {
color: $grey-dk-100;
color: $nav-child-link-color;
}
.navigation-list-item {
......@@ -44,13 +45,13 @@
position: absolute;
margin-top: 0.3em;
margin-left: -0.8em;
color: $grey-dk-000;
color: rgba($body-text-color, 0.3);
content: "- ";
}
&.active {
&::before {
color: $grey-dk-100;
color: $body-text-color;
}
}
}
......@@ -63,6 +64,16 @@
@include mq(md) {
@include fs-3;
}
.navigation-list-child-list {
display: none;
}
&.active {
.navigation-list-child-list {
display: block;
}
}
}
.navigation-list-link {
......@@ -72,7 +83,7 @@
&.active {
font-weight: 600;
color: $grey-dk-200;
color: $body-heading-color;
text-decoration: none;
}
}
......@@ -101,6 +112,11 @@
}
// Breadcrumb nav
.breadcrumb-nav {
@include mq(md) {
margin-top: -$sp-4;
}
}
.breadcrumb-nav-list {
padding-left: 0;
......
_sass/search.scss
+ 6
− 4
View file @ 21990474
......@@ -39,20 +39,21 @@
display: block;
width: 300px;
margin-top: $gutter-spacing;
background: $white;
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;
background-color: $white;
background-color: $body-background-color;
}
.search-input {
width: 100%;
padding-top: $sp-1;
padding-bottom: $sp-1;
background-color: $body-background-color;
border-top: 0;
border-right: 0;
border-bottom: 0;
......@@ -64,7 +65,7 @@
box-shadow: none;
+ .search-icon {
fill: $purple-000;
fill: $link-color;
}
}
......@@ -107,6 +108,7 @@
padding-left: $sp-3;
&:hover {
background-color: $grey-lt-000;
color: $body-heading-color;
background-color: darken($body-background-color, 2%);
}
}
_sass/support/_variables.scss
+ 8
− 0
View file @ 21990474
......@@ -17,6 +17,7 @@ $white: #fff !default;
$grey-dk-000: #959396 !default;
$grey-dk-100: #5c5962 !default;
$grey-dk-200: #44434d !default;
$grey-dk-250: #302d36 !default;
$grey-dk-300: #27262b !default;
$grey-lt-000: #f5f6fa !default;
......@@ -49,9 +50,16 @@ $red-100: #f96e65 !default;
$red-200: #e94c4c !default;
$red-300: #dd2e2e !default;
$body-background-color: $white !default;
$sidebar-color: $grey-lt-000 !default;
$code-background-color: $grey-lt-000 !default;
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
$nav-child-link-color: $grey-dk-100 !default;
$link-color: $purple-000 !default;
$btn-primary-color: $purple-100 !default;
$base-button-color: #f7f7f7 !default;
//
// Media queries in pixels
......
_sass/tables.scss
+ 2
− 1
View file @ 21990474
......@@ -25,7 +25,8 @@ td {
padding-right: $sp-3;
padding-bottom: $sp-2;
padding-left: $sp-3;
border-bottom: $border $grey-lt-000;
background-color: lighten($body-background-color, 2%);
border-bottom: $border rgba($border-color, 0.5);
border-left: $border $border-color;
&:first-of-type {
......
_sass/utilities/_colors.scss
+ 8
− 0
View file @ 21990474
......@@ -16,6 +16,10 @@
color: $grey-dk-200 !important;
}
.text-grey-dk-250 {
color: $grey-dk-250 !important;
}
.text-grey-dk-300 {
color: $grey-dk-300 !important;
}
......@@ -130,6 +134,10 @@
background-color: $grey-dk-200 !important;
}
.bg-grey-dk-250 {
background-color: $grey-dk-250 !important;
}
.bg-grey-dk-300 {
background-color: $grey-dk-300 !important;
}
......
assets/css/dark-mode-preview.scss 0 → 100644
+ 41
− 0
View file @ 21990474
---
# this ensures Jekyll reads the file to be transformed into CSS later
# only Main files contain this front matter, not partials.
---
//
// Import external dependencies
//
@import "./vendor/normalize.scss/normalize.scss";
//
// Import Just the docs scss
//
// Support
@import "./support/support";
//
// Import custom color scheme scss
//
@import "./color_schemes/dark.scss";
// Modules
@import "./base";
@import "./layout";
@import "./content";
@import "./navigation";
@import "./typography";
@import "./labels";
@import "./buttons";
@import "./search";
@import "./tables";
@import "./code";
@import "./utilities/utilities";
//
// Import custom overrides
//
@import "./custom/custom";
assets/css/just-the-docs.scss
+ 13
− 3
View file @ 21990474
......@@ -4,7 +4,7 @@
---
//
// Import dependancies
// Import external dependencies
//
@import "./vendor/normalize.scss/normalize.scss";
......@@ -16,8 +16,13 @@
// Support
@import "./support/support";
// Custom overrides
@import "./custom/custom";
//
// Import custom color scheme scss
//
{% if site.color_scheme == "dark" %}
@import "./color_schemes/dark.scss";
{% endif %}
// Modules
@import "./base";
......@@ -31,3 +36,8 @@
@import "./tables";
@import "./code";
@import "./utilities/utilities";
//
// Import custom overrides
//
@import "./custom/custom";
docs/configuration.md
+ 26
− 1
View file @ 21990474
......@@ -6,7 +6,7 @@ nav_order: 2
# Configuration
Just the Docs has some specific configuration parameters that can be definied in your Jekyll site's `config.yml` file.
Just the Docs has some specific configuration parameters that can be definied in your Jekyll site's `_config.yml` file.
## Search enabled
......@@ -23,3 +23,28 @@ aux_links:
"Just the Docs on GitHub":
- "//github.com/pmarsceill/just-the-docs"
```
## Color scheme
```yml
# Color scheme currently only supports "dark" or nil (default)
color_scheme: "dark"
```
<button class="btn js-toggle-dark-mode">Preview dark color scheme</button>
<script>
const toggleDarkMode = document.querySelector('.js-toggle-dark-mode')
const cssFile = document.querySelector('[rel="stylesheet"]')
const originalCssRef = cssFile.getAttribute('href')
const darkModeCssRef = originalCssRef.replace('just-the-docs.css', 'dark-mode-preview.css')
addEvent(toggleDarkMode, 'click', function(){
if (cssFile.getAttribute('href') === originalCssRef) {
cssFile.setAttribute('href', darkModeCssRef)
} else {
cssFile.setAttribute('href', originalCssRef)
}
})
</script>
See [Customization]({{site.baseurl }}{% link docs/customization.md %}) for more information.
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment