Initial commit

This commit is contained in:
Patrick Marsceill 2017-03-26 21:09:19 -04:00
parent 594385ae7b
commit e581397758
No known key found for this signature in database
GPG Key ID: AEAF30C14952BCC5
36 changed files with 1144 additions and 523 deletions

View File

@ -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

View File

@ -1,12 +1,12 @@
<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 %}

View File

@ -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>

View File

@ -1,7 +1,6 @@
//
// Base element style overrides
//
// stylelint-disable selector-no-type
* {
@ -47,18 +46,17 @@ h3,
h4,
h5,
h6 {
font-weight: 500;
color: $body-heading-color;
line-height: $body-heading-line-height;
margin-bottom: .8em;
margin-top: 1.2em;
margin-bottom: 0.8em;
font-weight: 500;
line-height: $body-heading-line-height;
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 {

View File

@ -1,6 +1,7 @@
//
// 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 {

View File

@ -1,121 +1,121 @@
//
// 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;
}
}

View File

@ -1,8 +1,7 @@
//
// 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;
}
}
}

112
_sass/custom/custom.scss Normal file
View File

@ -0,0 +1,112 @@
// //
// // 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
// );

35
_sass/labels.scss Normal file
View File

@ -0,0 +1,35 @@
//
// 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;
}

View File

@ -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) {
padding-top: $gutter-spacing * 2;
border-right: $border $border-color;
padding-bottom: 0;
display: flex;
flex-direction: column;
position: absolute;
align-items: flex-end;
display: flex;
width: $nav-width + 16px;
height: 100%;
min-height: 400px;
padding-top: $gutter-spacing * 2;
padding-bottom: 0;
flex-direction: column;
border-right: $border $border-color;
align-items: flex-end;
}
@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;
}
}

View File

@ -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);
}
}
}
}

View File

@ -1,6 +1,92 @@
.search-results-wrap {
position: absolute;
background: $white;
width: 400px;
z-index: 100;
//
// 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;
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;
}
}

View File

@ -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

View File

@ -1,13 +1,14 @@
//
// 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;
}

View File

@ -1,6 +1,7 @@
//
// Typography
//
// stylelint-disable primer/selector-no-utility, selector-no-type
h1,
.text-alpha {

View File

@ -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;
}

View File

@ -1,7 +1,10 @@
// 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; }

View File

@ -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";

1
assets/images/search.svg Normal file
View File

@ -0,0 +1 @@
<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>

After

Width:  |  Height:  |  Size: 444 B

View File

@ -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');
}
searchResults.innerHTML = '';
addEvent(searchInput, 'keyup', function(e){
var query = this.value;
searchResults.innerHTML = '';
searchResults.classList.remove('active');
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);
});
}
}

View File