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

Initial commit

parent 594385ae
No related branches found
No related tags found
No related merge requests found
Hide whitespace changes
Inline Side-by-side
Showing
with 653 additions and 234 deletions
_config.yml
+ 1
− 1
View file @ e5813977
......@@ -13,7 +13,7 @@
# you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on.
# You can create any custom variable you would like, and they will be accessible
# in the templates via {{ site.myvariable }}.
title: Just the docs
title: Just the Docs
description: A Jekyll theme for documentation
# baseurl: "" # the subpath of your site, e.g. /blog
# url: "" # the base hostname & protocol for your site, e.g. http://example.com
......
_includes/nav.html
+ 2
− 2
View file @ e5813977
<nav>
<ul class="navigation-list">
{% assign pages_list = site.pages | sort:"nav_order"%}
{% 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.pages | sort:"nav_order" %}
{% 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 %}
......
_layouts/default.html
+ 47
− 43
View file @ e5813977
......@@ -3,52 +3,56 @@
<html lang="en-us">
{% include head.html %}
<div class="page-wrap">
<div class="side-bar">
<a href="{{ site.url }}" class="site-title fs-6 fw-300 text-grey-dk-300">Just the <span class="fw-700">/docs</span></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 %}
<footer role="contentinfo" class="site-footer">
<p class="text-small text-grey-dk-000">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
</footer>
<div class="page-wrap">
<div class="side-bar">
<a href="{{ site.url }}" class="site-title fs-6 fw-300 text-grey-dk-300">Just the <span class="fw-700">/docs</span></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 %}
<footer role="contentinfo" class="site-footer">
<p class="text-small text-grey-dk-000">This site uses <a href="https://github.com/pmarsceill/just-the-docs">Just the Docs</a>, a documentation theme for Jekyll.</p>
</footer>
</div>
</div>
</div>
<div class="main-content-wrap">
<div class="main-content">
<input type="text" class="js-search-input" />
<div class="js-search-results search-results-wrap"></div>
{% 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>
{% endunless %}
<div class="page-content">
{{ content }}
{% if page.has_children == true %}
<hr>
<h2 class="text-delta">Table of contents</h2>
{% assign children_list = site.pages | sort:"nav_order" %}
<ol>
{% for child in children_list %}
{% if child.parent == page.title and child.title != page.title %}
<li>
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
</li>
<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 }}"/>
<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>
<div class="main-content {% if page.url == '/' %}mt-2 mt-md-10{% endif %}">
{% 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 %}
{% endfor %}
</ol>
{% endif %}
<li class="breadcrumb-nav-list-item"><span>{{ page.title }}</span></li>
</ol>
</nav>
{% endunless %}
<div class="page-content">
{{ content }}
{% if page.has_children == true %}
<hr>
<h2 class="text-delta">Table of contents</h2>
{% assign children_list = site.pages | sort:"nav_order" %}
<ol>
{% for child in children_list %}
{% if child.parent == page.title and child.title != page.title %}
<li>
<a href="{{ child.url | absolute_url }}">{{ child.title }}</a>
</li>
{% endif %}
{% endfor %}
</ol>
{% endif %}
</div>
</div>
</div>
</div>
</div>
</html>
_sass/base.scss
+ 5
− 8
View file @ e5813977
//
// Base element style overrides
//
// stylelint-disable selector-no-type
* {
......@@ -47,18 +46,17 @@ h3,
h4,
h5,
h6 {
margin-top: 1.2em;
margin-bottom: 0.8em;
font-weight: 500;
color: $body-heading-color;
line-height: $body-heading-line-height;
margin-bottom: .8em;
margin-top: 1.2em;
color: $body-heading-color;
}
p {
margin-bottom: 1em;
}
a {
color: $link-color;
text-decoration: none;
......@@ -78,11 +76,10 @@ a:not([class]) {
}
}
pre,
code {
font-size: 90%;
line-height: $body-line-height;
font-family: $mono-font-family;
font-size: 12px;
line-height: $body-line-height;
}
figure {
......
_sass/buttons.scss
+ 5
− 4
View file @ e5813977
//
// Buttons and things that look like buttons
//
// stylelint-disable color-named
.btn {
display: inline-block;
......@@ -73,18 +74,18 @@
}
.btn-outline {
box-shadow: inset 0 0 0 2px $grey-lt-300;
background: transparent;
color: $blue-100;
background: transparent;
box-shadow: inset 0 0 0 2px $grey-lt-300;
&:hover,
&:active,
&.zeroclipboard-is-hover,
&.zeroclipboard-is-active {
box-shadow: inset 0 0 0 3px $grey-lt-300;
color: $grey-dk-100;
text-decoration: none;
background-color: transparent;
color: $grey-dk-100;
box-shadow: inset 0 0 0 3px $grey-lt-300;
}
&:focus {
......
_sass/code.scss
+ 78
− 78
View file @ e5813977
//
// Code and syntax highlighting
//
// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type
code {
background-color: $grey-lt-000;
padding: 0.2em 0.15em;
font-weight: 400;
background-color: $grey-lt-000;
border: $border $border-color;
border-radius: $border-radius;
font-weight: 400;
}
.highlight {
background-color: $grey-lt-000;
padding: $sp-3;
margin-bottom: 0;
background-color: $grey-lt-000;
code {
border: 0;
padding: 0;
border: 0;
}
}
.highlighter-rouge {
margin-bottom: $sp-3;
border-radius: $border-radius;
overflow: hidden;
border-radius: $border-radius;
}
.highlight .c { color: #586E75 } /* Comment */
.highlight .err { color: #93A1A1 } /* Error */
.highlight .g { color: #93A1A1 } /* Generic */
.highlight .k { color: #859900 } /* Keyword */
.highlight .l { color: #93A1A1 } /* Literal */
.highlight .n { color: #93A1A1 } /* Name */
.highlight .o { color: #859900 } /* Operator */
.highlight .x { color: #CB4B16 } /* Other */
.highlight .p { color: #93A1A1 } /* Punctuation */
.highlight .cm { color: #586E75 } /* Comment.Multiline */
.highlight .cp { color: #859900 } /* Comment.Preproc */
.highlight .c1 { color: #586E75 } /* Comment.Single */
.highlight .cs { color: #859900 } /* Comment.Special */
.highlight .gd { color: #2AA198 } /* Generic.Deleted */
.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */
.highlight .gr { color: #DC322F } /* Generic.Error */
.highlight .gh { color: #CB4B16 } /* Generic.Heading */
.highlight .gi { color: #859900 } /* Generic.Inserted */
.highlight .go { color: #93A1A1 } /* Generic.Output */
.highlight .gp { color: #93A1A1 } /* Generic.Prompt */
.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */
.highlight .gu { color: #CB4B16 } /* Generic.Subheading */
.highlight .gt { color: #93A1A1 } /* Generic.Traceback */
.highlight .kc { color: #CB4B16 } /* Keyword.Constant */
.highlight .kd { color: #268BD2 } /* Keyword.Declaration */
.highlight .kn { color: #859900 } /* Keyword.Namespace */
.highlight .kp { color: #859900 } /* Keyword.Pseudo */
.highlight .kr { color: #268BD2 } /* Keyword.Reserved */
.highlight .kt { color: #DC322F } /* Keyword.Type */
.highlight .ld { color: #93A1A1 } /* Literal.Date */
.highlight .m { color: #2AA198 } /* Literal.Number */
.highlight .s { color: #2AA198 } /* Literal.String */
.highlight .na { color: #93A1A1 } /* Name.Attribute */
.highlight .nb { color: #B58900 } /* Name.Builtin */
.highlight .nc { color: #268BD2 } /* Name.Class */
.highlight .no { color: #CB4B16 } /* Name.Constant */
.highlight .nd { color: #268BD2 } /* Name.Decorator */
.highlight .ni { color: #CB4B16 } /* Name.Entity */
.highlight .ne { color: #CB4B16 } /* Name.Exception */
.highlight .nf { color: #268BD2 } /* Name.Function */
.highlight .nl { color: #93A1A1 } /* Name.Label */
.highlight .nn { color: #93A1A1 } /* Name.Namespace */
.highlight .nx { color: #555 } /* Name.Other */
.highlight .py { color: #93A1A1 } /* Name.Property */
.highlight .nt { color: #268BD2 } /* Name.Tag */
.highlight .nv { color: #268BD2 } /* Name.Variable */
.highlight .ow { color: #859900 } /* Operator.Word */
.highlight .w { color: #93A1A1 } /* Text.Whitespace */
.highlight .mf { color: #2AA198 } /* Literal.Number.Float */
.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */
.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */
.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */
.highlight .sb { color: #586E75 } /* Literal.String.Backtick */
.highlight .sc { color: #2AA198 } /* Literal.String.Char */
.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */
.highlight .s2 { color: #2AA198 } /* Literal.String.Double */
.highlight .se { color: #CB4B16 } /* Literal.String.Escape */
.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */
.highlight .si { color: #2AA198 } /* Literal.String.Interpol */
.highlight .sx { color: #2AA198 } /* Literal.String.Other */
.highlight .sr { color: #DC322F } /* Literal.String.Regex */
.highlight .s1 { color: #2AA198 } /* Literal.String.Single */
.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */
.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */
.highlight .vc { color: #268BD2 } /* Name.Variable.Class */
.highlight .vg { color: #268BD2 } /* Name.Variable.Global */
.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */
.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */
.highlight .c { color: #586e75; } // comment //
.highlight .err { color: #93a1a1; } // error //
.highlight .g { color: #93a1a1; } // generic //
.highlight .k { color: #859900; } // keyword //
.highlight .l { color: #93a1a1; } // literal //
.highlight .n { color: #93a1a1; } // name //
.highlight .o { color: #859900; } // operator //
.highlight .x { color: #cb4b16; } // other //
.highlight .p { color: #93a1a1; } // punctuation //
.highlight .cm { color: #586e75; } // comment.multiline //
.highlight .cp { color: #859900; } // comment.preproc //
.highlight .c1 { color: #586e75; } // comment.single //
.highlight .cs { color: #859900; } // comment.special //
.highlight .gd { color: #2aa198; } // generic.deleted //
.highlight .ge { font-style: italic; color: #93a1a1; } // generic.emph //
.highlight .gr { color: #dc322f; } // generic.error //
.highlight .gh { color: #cb4b16; } // generic.heading //
.highlight .gi { color: #859900; } // generic.inserted //
.highlight .go { color: #93a1a1; } // generic.output //
.highlight .gp { color: #93a1a1; } // generic.prompt //
.highlight .gs { font-weight: bold; color: #93a1a1; } // generic.strong //
.highlight .gu { color: #cb4b16; } // generic.subheading //
.highlight .gt { color: #93a1a1; } // generic.traceback //
.highlight .kc { color: #cb4b16; } // keyword.constant //
.highlight .kd { color: #268bd2; } // keyword.declaration //
.highlight .kn { color: #859900; } // keyword.namespace //
.highlight .kp { color: #859900; } // keyword.pseudo //
.highlight .kr { color: #268bd2; } // keyword.reserved //
.highlight .kt { color: #dc322f; } // keyword.type //
.highlight .ld { color: #93a1a1; } // literal.date //
.highlight .m { color: #2aa198; } // literal.number //
.highlight .s { color: #2aa198; } // literal.string //
.highlight .na { color: #93a1a1; } // name.attribute //
.highlight .nb { color: #b58900; } // name.builtin //
.highlight .nc { color: #268bd2; } // name.class //
.highlight .no { color: #cb4b16; } // name.constant //
.highlight .nd { color: #268bd2; } // name.decorator //
.highlight .ni { color: #cb4b16; } // name.entity //
.highlight .ne { color: #cb4b16; } // name.exception //
.highlight .nf { color: #268bd2; } // name.function //
.highlight .nl { color: #93a1a1; } // name.label //
.highlight .nn { color: #93a1a1; } // name.namespace //
.highlight .nx { color: #555; } // name.other //
.highlight .py { color: #93a1a1; } // name.property //
.highlight .nt { color: #268bd2; } // name.tag //
.highlight .nv { color: #268bd2; } // name.variable //
.highlight .ow { color: #859900; } // operator.word //
.highlight .w { color: #93a1a1; } // text.whitespace //
.highlight .mf { color: #2aa198; } // literal.number.float //
.highlight .mh { color: #2aa198; } // literal.number.hex //
.highlight .mi { color: #2aa198; } // literal.number.integer //
.highlight .mo { color: #2aa198; } // literal.number.oct //
.highlight .sb { color: #586e75; } // literal.string.backtick //
.highlight .sc { color: #2aa198; } // literal.string.char //
.highlight .sd { color: #93a1a1; } // literal.string.doc //
.highlight .s2 { color: #2aa198; } // literal.string.double //
.highlight .se { color: #cb4b16; } // literal.string.escape //
.highlight .sh { color: #93a1a1; } // literal.string.heredoc //
.highlight .si { color: #2aa198; } // literal.string.interpol //
.highlight .sx { color: #2aa198; } // literal.string.other //
.highlight .sr { color: #dc322f; } // literal.string.regex //
.highlight .s1 { color: #2aa198; } // literal.string.single //
.highlight .ss { color: #2aa198; } // literal.string.symbol //
.highlight .bp { color: #268bd2; } // name.builtin.pseudo //
.highlight .vc { color: #268bd2; } // name.variable.class //
.highlight .vg { color: #268bd2; } // name.variable.global //
.highlight .vi { color: #268bd2; } // name.variable.instance //
.highlight .il { color: #2aa198; } // literal.number.integer.long //
//
// Code examples (rendered)
//
.code-example {
border: 1px solid $border-color;
padding: $sp-3;
border-radius: $border-radius;
margin-bottom: $sp-3;
overflow: scroll;
border: 1px solid $border-color;
border-radius: $border-radius;
+ .highlighter-rouge,
+ figure.highlight {
position: relative;
border-left: 1px solid $border-color;
margin-top: -$sp-4;
border-right: 1px solid $border-color;
border-bottom: 1px solid $border-color;
border-left: 1px solid $border-color;
border-top-left-radius: 0;
border-top-right-radius: 0;
margin-top: -$sp-4;
}
}
_sass/content.scss
+ 10
− 7
View file @ e5813977
//
// Styles for rendered markdown in the .main-content container
//
// stylelint-disable selector-no-type
// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors
.page-content {
ul,
......@@ -19,13 +18,17 @@
position: relative;
&::before {
counter-increment: step-counter;
content: counter(step-counter);
left: -1.5em;
top: 0.11em;
position: absolute;
top: 0.2em;
left: -1.5em;
color: $grey-dk-000;
content: counter(step-counter);
counter-increment: step-counter;
@include fs-3;
@include mq(sm) {
top: 0.11em;
}
}
ol {
......@@ -33,8 +36,8 @@
li {
&::before {
counter-increment: sub-counter;
content: counter(sub-counter, lower-alpha);
counter-increment: sub-counter;
}
}
}
......
_sass/custom/custom.scss 0 → 100644
+ 112
− 0
View file @ e5813977
// //
// // Typography
// //
//
// $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
// $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace;
// $root-font-size: 16px; // Base font-size for rems
// $body-line-height: 1.4;
// $body-heading-line-height: 1.15;
//
// //
// // Colors
// //
//
// $white: #fff;
//
// $grey-dk-000: #959396;
// $grey-dk-100: #5c5962;
// $grey-dk-200: #44434d;
// $grey-dk-300: #27262b;
//
// $grey-lt-000: #f5f6fa;
// $grey-lt-100: #eeebee;
// $grey-lt-200: #ecebed;
// $grey-lt-300: #e6e1e8;
//
// $purple-000: #7253ed;
// $purple-100: #5e41d0;
// $purple-200: #4e26af;
// $purple-300: #381885;
//
// $blue-000: #2c84fa;
// $blue-100: #2869e6;
// $blue-200: #264caf;
// $blue-300: #183385;
//
// $green-000: #41d693;
// $green-100: #11b584;
// $green-200: #009c7b;
// $green-300: #026e57;
//
// $body-text-color: $grey-dk-100;
// $body-heading-color: $grey-dk-300;
// $link-color: $purple-000;
//
// //
// // Media queries in pixels
// //
//
// $media-queries: (
// xs: 320px,
// sm: 500px,
// md: 740px,
// lg: 1120px,
// xl: 1400px
// );
//
// //
// // Spacing
// //
//
// $spacing-unit: 1rem; // 1rem == 16px
//
// $spacers: (
// sp-0: 0,
// sp-1: $spacing-unit * 0.25,
// sp-2: $spacing-unit * 0.5,
// sp-3: $spacing-unit * 0.75,
// sp-4: $spacing-unit,
// sp-5: $spacing-unit * 1.5,
// sp-6: $spacing-unit * 2,
// sp-7: $spacing-unit * 2.5,
// sp-8: $spacing-unit * 3,
// sp-9: $spacing-unit * 3.5,
// sp-10: $spacing-unit * 4
// );
//
// $sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
// $sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
// $sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
// $sp-4: map-get($spacers, sp-4); // 1 rem == 16px
// $sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
// $sp-6: map-get($spacers, sp-6); // 2 rem == 32px
// $sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
// $sp-8: map-get($spacers, sp-8); // 3 rem == 48px
// $sp-9: map-get($spacers, sp-9); // 4 rem == 48px
// $sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px
//
// //
// // Borders
// //
//
// $border: 1px solid;
// $border-radius: 4px;
// $border-color: $grey-lt-100;
//
// //
// // Grid system
// //
//
// $gutter-spacing: $sp-6;
// $gutter-spacing-sm: $sp-4;
// $nav-width: 232px;
// $content-width: 800px;
//
// $media-queries: (
// xs: 320px,
// sm: 500px,
// md: 740px,
// lg: 800px,
// xl: 1316px
// );
_sass/labels.scss 0 → 100644
+ 35
− 0
View file @ e5813977
//
// Labels (not the form kind)
//
.label,
.label-blue {
display: inline-block;
padding-top: 0.16em;
padding-right: 0.42em;
padding-bottom: 0.16em;
padding-left: 0.42em;
margin-right: $sp-1;
margin-left: $sp-1;
color: $white;
vertical-align: middle;
background-color: $blue-100;
@include fs-2;
}
.label-green {
background-color: $green-200;
}
.label-purple {
background-color: $purple-100;
}
.label-red {
background-color: $red-200;
}
.label-yellow {
color: $grey-dk-200;
background-color: $yellow-200;
}
_sass/layout.scss
+ 16
− 23
View file @ e5813977
......@@ -4,10 +4,10 @@
.page-wrap {
@include mq(md) {
display: flex;
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
overflow-x: hidden;
......@@ -16,22 +16,21 @@
}
.side-bar {
z-index: 100;
padding-top: $gutter-spacing-sm;
padding-bottom: $gutter-spacing-sm;
background-color: $grey-lt-000;
z-index: 100;
@include mq(md) {
position: absolute;
display: flex;
width: $nav-width + 16px;
height: 100%;
padding-top: $gutter-spacing * 2;
border-right: $border $border-color;
padding-bottom: 0;
display: flex;
flex-direction: column;
position: absolute;
border-right: $border $border-color;
align-items: flex-end;
width: $nav-width + 16px;
height: 100%;
min-height: 400px;
}
@include mq(lg) {
......@@ -43,33 +42,34 @@
.main-content-wrap {
@include mq(md) {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
min-height: 600px;
top: 0;
left: 0;
-webkit-overflow-scrolling: touch;
overflow-x: hidden;
overflow-y: scroll;
}
}
.main-content {
.main-content,
.search {
padding-top: $gutter-spacing-sm;
@include container;
@include mq(md) {
position: relative;
margin-left: $nav-width;
max-width: $content-width;
padding-top: $gutter-spacing;
padding-left: $gutter-spacing * 1.5;
padding-bottom: $gutter-spacing;
padding-left: $gutter-spacing * 1.5;
margin-left: $nav-width;
}
@include mq(lg) {
margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
padding-left: $gutter-spacing;
margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width});
}
}
......@@ -88,22 +88,15 @@
.navigation {
@include mq(md) {
position: absolute;
padding-top: $sp-8;
top: 0;
right: 0;
height: 100%;
padding-top: $sp-8;
}
}
.site-footer {
@include mq(md) {
display: block;
position: absolute;
right: 0;
bottom: $sp-8;
z-index: 100;
@include container;
margin-top: $sp-10;
}
}
_sass/navigation.scss
+ 18
− 32
View file @ e5813977
......@@ -7,6 +7,7 @@
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
background-color: $grey-lt-000;
@include mq(md) {
position: absolute;
......@@ -17,9 +18,9 @@
}
.navigation-list {
list-style: none;
padding: 0;
margin-top: $sp-4;
list-style: none;
@include mq(md) {
margin-top: $sp-8;
......@@ -27,10 +28,8 @@
}
.navigation-list-child-list {
list-style: none;
padding-left: $sp-3;
margin-top: $sp-2;
margin-bottom: $sp-2;
list-style: none;
.navigation-list-link {
color: $grey-dk-100;
......@@ -39,9 +38,10 @@
.navigation-list-item {
&::before {
position: absolute;
content: "- ";
margin-top: 0.3em;
margin-left: -0.8em;
color: $grey-dk-000;
content: "- ";
}
&.active {
......@@ -54,15 +54,18 @@
.navigation-list-item {
@include fs-3;
margin: 0;
}
.navigation-list-link {
display: block;
padding-top: $sp-1;
padding-bottom: $sp-1;
&.active {
font-weight: 600;
color: $grey-dk-200;
text-decoration: none;
font-weight: 600;
}
}
......@@ -85,6 +88,7 @@
@include mq(md) {
display: block;
overflow-y: auto;
}
}
......@@ -100,10 +104,14 @@
// Breadcrumb nav
.breadcrumb-nav-list {
list-style: none;
padding-left: 0;
margin-top: $sp-3;
margin-bottom: $sp-5;
margin-bottom: $sp-3;
list-style: none;
@include mq(md) {
margin-bottom: $sp-5;
}
}
.breadcrumb-nav-list-item {
......@@ -116,10 +124,10 @@
&::after {
display: inline-block;
margin-left: $sp-2;
margin-right: $sp-2;
content: "/";
margin-left: $sp-2;
color: $grey-dk-000;
content: "/";
}
&:last-child {
......@@ -128,25 +136,3 @@
}
}
}
// Table of contents
#markdown-toc {
counter-reset: toc-counter;
li {
&::before {
counter-increment: toc-counter;
content: counter(toc-counter, upper-roman);
}
ol {
counter-reset: toc-sub-counter;
}
li {
&::before {
counter-increment: toc-sub-counter;
content: counter(toc-sub-counter, lower-roman);
}
}
}
}
_sass/search.scss
+ 89
− 3
View file @ e5813977
//
// Search input and autocomplete
//
.search {
display: none;
@include mq(md) {
position: relative;
z-index: 99;
display: flex;
justify-content: flex-end;
padding-top: 0;
padding-bottom: 0;
}
}
.search-results-wrap {
display: none;
&.active {
position: absolute;
top: $sp-10;
right: $gutter-spacing;
z-index: 100;
display: block;
width: 200px;
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;
background: $white;
width: 400px;
z-index: 100;
top: $sp-7;
right: $gutter-spacing;
z-index: 99;
display: flex;
background-color: $white;
}
.search-input {
width: 200px;
padding-top: $sp-1;
padding-bottom: $sp-1;
border-top: 0;
border-right: 0;
border-bottom: $border $border-color;
border-left: 0;
order: 2;
&:focus {
border-bottom: $border $grey-lt-300;
outline: 0;
box-shadow: 0;
+ .search-icon {
fill: $purple-000;
}
}
}
.search-icon {
align-self: center;
margin-right: $sp-2;
fill: $grey-dk-000;
order: 1;
}
.search-results-list {
padding-left: 0;
margin-bottom: $sp-1;
list-style: none;
@include fs-3;
}
.search-results-list-item {
padding: 0;
margin: 0;
}
.search-results-link {
display: block;
padding-top: $sp-1;
padding-right: $sp-3;
padding-bottom: $sp-1;
padding-left: $sp-3;
&:hover {
background-color: $grey-lt-000;
}
}
_sass/support/_variables.scss
+ 25
− 11
View file @ e5813977
......@@ -5,8 +5,8 @@
$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default;
$mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default;
$root-font-size: 16px !default; // Base font-size for rems
$body-line-height: 1.4;
$body-heading-line-height: 1.15;
$body-line-height: 1.4 !default;
$body-heading-line-height: 1.15 !default !default;
//
// Colors
......@@ -39,6 +39,16 @@ $green-100: #11b584 !default;
$green-200: #009c7b !default;
$green-300: #026e57 !default;
$yellow-000: #ffeb82 !default;
$yellow-100: #fadf50 !default;
$yellow-200: #f7d12e !default;
$yellow-300: #e7af06 !default;
$red-000: #f77e7e !default;
$red-100: #f96e65 !default;
$red-200: #e94c4c !default;
$red-300: #dd2e2e !default;
$body-text-color: $grey-dk-100 !default;
$body-heading-color: $grey-dk-300 !default;
$link-color: $purple-000 !default;
......@@ -70,17 +80,21 @@ $spacers: (
sp-5: $spacing-unit * 1.5,
sp-6: $spacing-unit * 2,
sp-7: $spacing-unit * 2.5,
sp-8: $spacing-unit * 3
sp-8: $spacing-unit * 3,
sp-9: $spacing-unit * 3.5,
sp-10: $spacing-unit * 4
) !default;
$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px
$sp-4: map-get($spacers, sp-4); // 1 rem == 16px
$sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px
$sp-6: map-get($spacers, sp-6); // 2 rem == 32px
$sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px
$sp-8: map-get($spacers, sp-8); // 3 rem == 48px
$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px
$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px
$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px
$sp-4: map-get($spacers, sp-4) !default; // 1 rem == 16px
$sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px
$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px
$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px
$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px
$sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px
$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px
//
// Borders
......
_sass/tables.scss
+ 9
− 5
View file @ e5813977
//
// Tables
//
// stylelint-disable max-nesting-depth, selector-no-type
table {
display: block;
width: 100%;
max-width: 100%;
overflow-x: auto;
margin-bottom: $sp-5;
overflow-x: auto;
border-collapse: separate;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
......@@ -19,20 +20,21 @@ table {
th,
td {
@include fs-3;
min-width: 120px;
padding-top: $sp-2;
padding-left: $sp-3;
padding-bottom: $sp-2;
padding-right: $sp-3;
padding-bottom: $sp-2;
padding-left: $sp-3;
border-bottom: $border $grey-lt-000;
border-left: $border $border-color;
min-width: 120px;
&:first-of-type {
border-left: 0;
}
}
thead, tbody:first-child {
thead,
tbody:first-child {
tr {
&:first-of-type {
th,
......@@ -40,6 +42,7 @@ thead, tbody:first-child {
&:first-of-type {
border-top-left-radius: $border-radius;
}
&:last-of-type {
border-top-right-radius: $border-radius;
}
......@@ -58,6 +61,7 @@ tbody {
&:first-of-type {
border-bottom-left-radius: $border-radius;
}
&:last-of-type {
border-bottom-right-radius: $border-radius;
}
......
_sass/typography.scss
+ 1
− 0
View file @ e5813977
//
// Typography
//
// stylelint-disable primer/selector-no-utility, selector-no-type
h1,
.text-alpha {
......
_sass/utilities/_colors.scss
+ 146
− 0
View file @ e5813977
......@@ -83,3 +83,149 @@
.text-purple-300 {
color: $purple-300 !important;
}
.text-yellow-000 {
color: $yellow-000 !important;
}
.text-yellow-100 {
color: $yellow-100 !important;
}
.text-yellow-200 {
color: $yellow-200 !important;
}
.text-yellow-300 {
color: $yellow-300 !important;
}
.text-red-000 {
color: $red-000 !important;
}
.text-red-100 {
color: $red-100 !important;
}
.text-red-200 {
color: $red-200 !important;
}
.text-red-300 {
color: $red-300 !important;
}
// Background colors
.bg-grey-dk-000 {
background-color: $grey-dk-000 !important;
}
.bg-grey-dk-100 {
background-color: $grey-dk-100 !important;
}
.bg-grey-dk-200 {
background-color: $grey-dk-200 !important;
}
.bg-grey-dk-300 {
background-color: $grey-dk-300 !important;
}
.bg-grey-lt-000 {
background-color: $grey-lt-000 !important;
}
.bg-grey-lt-100 {
background-color: $grey-lt-100 !important;
}
.bg-grey-lt-200 {
background-color: $grey-lt-200 !important;
}
.bg-grey-lt-300 {
background-color: $grey-lt-300 !important;
}
.bg-blue-000 {
background-color: $blue-000 !important;
}
.bg-blue-100 {
background-color: $blue-100 !important;
}
.bg-blue-200 {
background-color: $blue-200 !important;
}
.bg-blue-300 {
background-color: $blue-300 !important;
}
.bg-green-000 {
background-color: $green-000 !important;
}
.bg-green-100 {
background-color: $green-100 !important;
}
.bg-green-200 {
background-color: $green-200 !important;
}
.bg-green-300 {
background-color: $green-300 !important;
}
.bg-purple-000 {
background-color: $purple-000 !important;
}
.bg-purple-100 {
background-color: $purple-100 !important;
}
.bg-purple-200 {
background-color: $purple-200 !important;
}
.bg-purple-300 {
background-color: $purple-300 !important;
}
.bg-yellow-000 {
background-color: $yellow-000 !important;
}
.bg-yellow-100 {
background-color: $yellow-100 !important;
}
.bg-yellow-200 {
background-color: $yellow-200 !important;
}
.bg-yellow-300 {
background-color: $yellow-300 !important;
}
.bg-red-000 {
background-color: $red-000 !important;
}
.bg-red-100 {
background-color: $red-100 !important;
}
.bg-red-200 {
background-color: $red-200 !important;
}
.bg-red-300 {
background-color: $red-300 !important;
}
_sass/utilities/_layout.scss
+ 13
− 1
View file @ e5813977
// stylelint-disable primer/selector-no-utility
//
// Utility classes for layout and spacing
// Utility classes for layout
//
// Display
.d-block { display: block !important; }
.d-flex { display: flex !important; }
.d-inline { display: inline !important; }
......@@ -24,3 +27,12 @@
}
}
}
// Vertical alignment
.v-align-baseline { vertical-align: baseline !important; }
.v-align-bottom { vertical-align: bottom !important; }
.v-align-middle { vertical-align: middle !important; }
.v-align-text-bottom { vertical-align: text-bottom !important; }
.v-align-text-top { vertical-align: text-top !important; }
.v-align-top { vertical-align: top !important; }
assets/css/just-the-docs.scss
+ 6
− 0
View file @ e5813977
......@@ -15,11 +15,17 @@
// Support
@import "./support/support";
// Custom overrides
@import "./custom/custom";
// Modules
@import "./base";
@import "./layout";
@import "./content";
@import "./navigation";
@import "./typography";
@import "./labels";
@import "./buttons";
@import "./search";
@import "./tables";
......
assets/images/search.svg 0 → 100644
+ 1
− 0
View file @ e5813977
<svg width="28" height="28" viewBox="0 0 28 28" xmlns="http://www.w3.org/2000/svg"><title>Search</title><g fill-rule="nonzero" fill="#959396"><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>
assets/js/just-the-docs.js
+ 34
− 16
View file @ e5813977
......@@ -13,7 +13,6 @@ function toggleNav(){
const nav = document.querySelector('.js-main-nav');
const navTrigger = document.querySelector('.js-main-nav-trigger');
addEvent(navTrigger, 'click', function(){
var text = navTrigger.innerText;
var textToggle = navTrigger.getAttribute('data-text-toggle');
......@@ -74,35 +73,54 @@ function initSearch() {
var searchResults = document.querySelector('.js-search-results');
var store = dataStore;
addEvent(searchInput, 'keyup', function(){
var query = this.value;
function hideResults() {
searchResults.innerHTML = '';
searchResults.classList.remove('active');
}
addEvent(searchInput, 'keyup', function(e){
var query = this.value;
searchResults.innerHTML = '';
searchResults.classList.remove('active');
searchResults.innerHTML = '';
if (query === '') {
hideResults();
} else {
var results = index.search(query);
if (results.length > 1) {
searchResults.classList.add('active');
var resultsList = document.createElement('ul');
searchResults.appendChild(resultsList);
if (query === '') {
searchResults.innerHTML = '';
} else {
var results = index.search(query);
for (var i in results) {
var resultsList = document.createElement("ul");
var resultsListItem = document.createElement("li");
var resultsLink = document.createElement("a");
var resultsListItem = document.createElement('li');
var resultsLink = document.createElement('a');
var resultsUrl = store[results[i].ref].url;
var resultsTitle = store[results[i].ref].title;
resultsLink.setAttribute("href", store[results[i].ref].url);
resultsLink.setAttribute('href', store[results[i].ref].url);
resultsLink.innerText = resultsTitle;
resultsList.classList.add("search-results-list");
searchResults.appendChild(resultsList);
resultsList.classList.add('search-results-list');
resultsListItem.classList.add('search-results-list-item');
resultsLink.classList.add('search-results-link');
resultsList.appendChild(resultsListItem);
resultsListItem.appendChild(resultsLink)
resultsListItem.appendChild(resultsLink);
}
}
// When esc key is pressed, hide the results and clear the field
if (e.keyCode == 27) {
hideResults();
searchInput.value = '';
}
}
});
addEvent(searchInput, 'blur', function(){
setTimeout(function(){searchResults.innerHTML = '';}, 300);
setTimeout(function(){hideResults()}, 300);
});
}
}
......
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