mirror of https://github.com/thangisme/notes.git
Initial commit
This commit is contained in:
Patrick Marsceill
parent
594385ae7b
commit
e581397758
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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 %}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
|
|
@ -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 {
|
||||
|
|
|
|||
156
_sass/code.scss
156
_sass/code.scss
|
|
@ -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;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
// );
|
||||
|
|
@ -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;
|
||||
}
|
||||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
//
|
||||
// Typography
|
||||
//
|
||||
// stylelint-disable primer/selector-no-utility, selector-no-type
|
||||
|
||||
h1,
|
||||
.text-alpha {
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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; }
|
||||
|
|
|
|||
|
|
@ -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";
|
||||
|
|
|
|||
|
|
@ -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 |
|
|
@ -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);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,3 +3,42 @@ layout: default
|
|||
title: Customization
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Customization
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Visual customization
|
||||
|
||||
To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc.. are derived from these variables. To override a specific variable, uncomment out it’s line and change it’s value.
|
||||
|
||||
For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the link color variable on line `44`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing.
|
||||
|
||||
```scss
|
||||
// ...
|
||||
//
|
||||
// $body-text-color: $grey-dk-100;
|
||||
// $body-heading-color: $grey-dk-300;
|
||||
$link-color: $blue-000;
|
||||
//
|
||||
// ...
|
||||
```
|
||||
|
||||
_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependancies to fail.
|
||||
|
||||
---
|
||||
|
||||
## Themes
|
||||
{: .d-inline-block :}
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow :}
|
||||
|
||||
Hard at work on a dark theme, and more.
|
||||
|
|
|
|||
|
|
@ -19,4 +19,8 @@ nav_order: 4
|
|||
|
||||
---
|
||||
|
||||
## Breadcrumbs
|
||||
|
||||
---
|
||||
|
||||
## In-page navigation with Table of Contents
|
||||
|
|
|
|||
|
|
@ -62,7 +62,7 @@ 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.md %}#typography) to scale buttons:
|
||||
Wrap the button in container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography) to scale buttons:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
|
|
@ -87,7 +87,7 @@ Wrap the button in container that uses the [font-size utility classes]({{ site.b
|
|||
|
||||
### Spacing between buttons
|
||||
|
||||
Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities.md %}#spacing) to add spacing between two buttons in the same block.
|
||||
Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#spacing) to add spacing between two buttons in the same block.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
layout: default
|
||||
title: Code
|
||||
parent: UI Components
|
||||
nav_order: 4
|
||||
nav_order: 5
|
||||
---
|
||||
|
||||
# Code
|
||||
|
|
|
|||
|
|
@ -0,0 +1,53 @@
|
|||
---
|
||||
layout: default
|
||||
title: Labels
|
||||
parent: UI Components
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Labels
|
||||
|
||||
Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
Blue label
|
||||
{: .label .label-blue}
|
||||
|
||||
Stable
|
||||
{: .label .label-green}
|
||||
|
||||
New release
|
||||
{: .label .label-purple}
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow}
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red}
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
|
||||
Default label
|
||||
{: .label }
|
||||
|
||||
Blue label
|
||||
{: .label .label-blue}
|
||||
|
||||
Stable
|
||||
{: .label .label-green}
|
||||
|
||||
New release
|
||||
{: .label .label-purple}
|
||||
|
||||
Coming soon
|
||||
{: .label .label-yellow}
|
||||
|
||||
Deprecated
|
||||
{: .label .label-red}
|
||||
|
||||
```
|
||||
|
|
@ -2,21 +2,10 @@
|
|||
layout: default
|
||||
title: Tables
|
||||
parent: UI Components
|
||||
nav_order: 3
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Tables
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc }
|
||||
|
||||
---
|
||||
|
||||
## Default tables
|
||||
|
||||
Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport.
|
||||
|
||||
|
|
|
|||
|
|
@ -111,4 +111,4 @@ Text can be **bold**, _italic_, or ~~strikethrough~~.
|
|||
|
||||
There are a number of specific typographic CSS classes that allow you to do override default styling for font size, font-weight, line height, and capitalization.
|
||||
|
||||
[View typography utilities]({{ site.base_url }}{% link docs/utilities.md %}#typography){: .btn .btn-outline }
|
||||
[View typography utilities]({{ site.base_url }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline }
|
||||
|
|
|
|||
|
|
@ -9,5 +9,5 @@ permalink: /ui-components
|
|||
|
||||
# UI Components
|
||||
|
||||
Just the Docs includes all the CSS you need to create structured documentation for your next project. To make it as easy as possible to write documentation in plain Markdown, most styles will require no additional CSS classes.
|
||||
To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
|
|
|||
|
|
@ -1,259 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Utilities
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# Utilities
|
||||
{:.no_toc}
|
||||
|
||||
CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Responsive modifiers
|
||||
|
||||
Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prexix and suffix classes. For example `prefix-modifier-suffix`
|
||||
|
||||
| Modifier | Screen size |
|
||||
|:----------|:-------------------------------------|
|
||||
| (none) | All screens until the next modifier |
|
||||
| `xs` | 320px (20rem) and up |
|
||||
| `sm` | 500px (31.25rem) and up |
|
||||
| `md` | 740px (46.25rem) and up |
|
||||
| `lg` | 1120px (70rem) and up |
|
||||
| `xl` | 1400px (87.5rem) and up |
|
||||
|
||||
## Layout Utilities
|
||||
|
||||
### Spacing
|
||||
|
||||
These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.
|
||||
|
||||
| Classname prefix | What it does |
|
||||
|:-----------------|:------------------------------|
|
||||
| `.m-` | `margin` |
|
||||
| `.mx-` | `margin-left`, `margin-right` |
|
||||
| `.my-` | `margin top`, `margin bottom` |
|
||||
| `.mt-` | `margin-top` |
|
||||
| `.mr-` | `margin-right` |
|
||||
| `.mb-` | `margin-bottom` |
|
||||
| `.ml-` | `margin-left` |
|
||||
|
||||
| Classname prefix | What it does |
|
||||
|:-----------------|:--------------------------------|
|
||||
| `.p-` | `padding` |
|
||||
| `.px-` | `padding-left`, `padding-right` |
|
||||
| `.py-` | `padding top`, `padding bottom` |
|
||||
| `.pt-` | `padding-top` |
|
||||
| `.pr-` | `padding-right` |
|
||||
| `.pb-` | `padding-bottom` |
|
||||
| `.pl-` | `padding-left` |
|
||||
|
||||
Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units:
|
||||
|
||||
| Spacer/suffix | Size in rems | Rem converted to px |
|
||||
|:---------------|:--------------|:--------------------|
|
||||
| `1` | 0.25rem | 4px |
|
||||
| `2` | 0.5rem | 8px |
|
||||
| `3` | 0.75rem | 12px |
|
||||
| `4` | 1rem | 16px |
|
||||
| `5` | 1.5rem | 24px |
|
||||
| `6` | 2rem | 32px |
|
||||
| `7` | 2.5rem | 40px |
|
||||
| `8` | 3rem | 48px |
|
||||
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
This paragraph will have a margin bottom of 1rem/16px at large screens.
|
||||
{: .mb-lg-4 }
|
||||
|
||||
This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
|
||||
{: .px-6 }
|
||||
|
||||
```
|
||||
|
||||
### Display
|
||||
|
||||
Display classes aid in adapting the layout of the elements on a page:
|
||||
|
||||
| Class | |
|
||||
|:------------------|:------------------------|
|
||||
| `.d-block` | `display: block` |
|
||||
| `.d-flex` | `display: flex` |
|
||||
| `.d-inline` | `display: inline` |
|
||||
| `.d-inline-block` | `display: inline-block` |
|
||||
| `.d-none` | `display: none` |
|
||||
|
||||
Use these classes in conjunction with the responsive modifiers.
|
||||
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
This button will be hidden until medium screen sizes:
|
||||
|
||||
[ A button ](#url)
|
||||
{: .d-none .d-md-inline-block }
|
||||
|
||||
These headings will be `inline-block`:
|
||||
|
||||
### heading 3
|
||||
{ .d-inline-block }
|
||||
|
||||
### heading 3
|
||||
{ .d-inline-block }
|
||||
|
||||
```
|
||||
|
||||
---
|
||||
## Typography
|
||||
|
||||
### Font size
|
||||
|
||||
Use the `.fs-1` - `.fs-10` to set an explicit font-size.
|
||||
|
||||
| Class | Small screen size `font-size` | Large screen size `font-size` |
|
||||
|:--------|:-------------------------------|:------------------------------|
|
||||
| `.fs-1` | 9px | 10px |
|
||||
| `.fs-2` | 11px | 12px |
|
||||
| `.fs-3` | 12px | 14px |
|
||||
| `.fs-4` | 14px | 16px |
|
||||
| `.fs-5` | 16px | 18px |
|
||||
| `.fs-6` | 18px | 24px |
|
||||
| `.fs-7` | 24px | 32px |
|
||||
| `.fs-8` | 32px | 38px |
|
||||
| `.fs-9` | 38px | 42px |
|
||||
| `.fs-10`| 42px | 48px |
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Font size 1
|
||||
{: .fs-1 }
|
||||
Font size 2
|
||||
{: .fs-2 }
|
||||
Font size 3
|
||||
{: .fs-3 }
|
||||
Font size 4
|
||||
{: .fs-4 }
|
||||
Font size 5
|
||||
{: .fs-5 }
|
||||
Font size 6
|
||||
{: .fs-6 }
|
||||
Font size 7
|
||||
{: .fs-7 }
|
||||
Font size 8
|
||||
{: .fs-8 }
|
||||
Font size 9
|
||||
{: .fs-9 }
|
||||
Font size 10
|
||||
{: .fs-10 }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
Font size 1
|
||||
{: .fs-1 }
|
||||
Font size 2
|
||||
{: .fs-2 }
|
||||
Font size 3
|
||||
{: .fs-3 }
|
||||
Font size 4
|
||||
{: .fs-4 }
|
||||
Font size 5
|
||||
{: .fs-5 }
|
||||
Font size 6
|
||||
{: .fs-6 }
|
||||
Font size 7
|
||||
{: .fs-7 }
|
||||
Font size 8
|
||||
{: .fs-8 }
|
||||
Font size 9
|
||||
{: .fs-9 }
|
||||
Font size 10
|
||||
{: .fs-10 }
|
||||
```
|
||||
|
||||
### Font weight
|
||||
|
||||
Use the `.fw-300` - `.fw-700` to set an explicit font-size.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Font weight 300
|
||||
{: .fw-300 }
|
||||
Font weight 400
|
||||
{: .fw-400 }
|
||||
Font weight 500
|
||||
{: .fw-500 }
|
||||
Font weight 700
|
||||
{: .fw-700 }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
Font weight 300
|
||||
{: .fw-300 }
|
||||
Font weight 400
|
||||
{: .fw-400 }
|
||||
Font weight 500
|
||||
{: .fw-500 }
|
||||
Font weight 700
|
||||
{: .fw-700 }
|
||||
```
|
||||
|
||||
### Line height
|
||||
|
||||
Use the `lh-` classes to explicitly apply line height to text.
|
||||
|
||||
| Class | `line-height` value | Notes |
|
||||
|:--------------|:---------------------|:------------------------------|
|
||||
| `.lh-0` | 0 | |
|
||||
| `.lh-tight` | 1.1 | Default for headings |
|
||||
| `.lh-default` | 1.4 | Default for body (paragraphs) |
|
||||
|
||||
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
No Line height
|
||||
No Line height
|
||||
{: .lh-0 }
|
||||
|
||||
Tight line height
|
||||
Tight line height
|
||||
{: .lh-tight }
|
||||
|
||||
Default line height
|
||||
Default line height
|
||||
{: .fh-default }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
No Line height
|
||||
No Line height
|
||||
{: .lh-0 }
|
||||
|
||||
Tight line height
|
||||
Tight line height
|
||||
{: .lh-tight }
|
||||
|
||||
Default line height
|
||||
Default line height
|
||||
{: .fh-default }
|
||||
```
|
||||
---
|
||||
## Color
|
||||
### Font color
|
||||
### Background color
|
||||
|
|
@ -0,0 +1,82 @@
|
|||
---
|
||||
layout: default
|
||||
title: Color
|
||||
nav_order: 3
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Color Utilities
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
All the colors used in Just the Docs have been systemsized into a series of variables that have been extended to both font color and background color utility classes.
|
||||
|
||||
## Light Greys
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-000"></span> `grey-lt-000` | `.text-grey-lt-000` | `.bg-grey-lt-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-100"></span> `grey-lt-100` | `.text-grey-lt-100` | `.bg-grey-lt-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-200"></span> `grey-lt-200` | `.text-grey-lt-200` | `.bg-grey-lt-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-lt-300"></span> `grey-lt-300` | `.text-grey-lt-300` | `.bg-grey-lt-300` |
|
||||
|
||||
## Dark Greys
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-000"></span> `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-100"></span> `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-200"></span> `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-grey-dk-300"></span> `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` |
|
||||
|
||||
## Purples
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-000"></span> `purple-000` | `.text-purple-000` | `.bg-purple-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-100"></span> `purple-100` | `.text-purple-100` | `.bg-purple-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-200"></span> `purple-200` | `.text-purple-200` | `.bg-purple-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-purple-300"></span> `purple-300` | `.text-purple-300` | `.bg-purple-300` |
|
||||
|
||||
## Blues
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-000"></span> `blue-000` | `.text-blue-000` | `.bg-blue-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-100"></span> `blue-100` | `.text-blue-100` | `.bg-blue-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-200"></span> `blue-200` | `.text-blue-200` | `.bg-blue-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-blue-300"></span> `blue-300` | `.text-blue-300` | `.bg-blue-300` |
|
||||
|
||||
## Greens
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-000"></span> `green-000` | `.text-green-000` | `.bg-green-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-100"></span> `green-100` | `.text-green-100` | `.bg-green-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-200"></span> `green-200` | `.text-green-200` | `.bg-green-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-green-300"></span> `green-300` | `.text-green-300` | `.bg-green-300` |
|
||||
|
||||
## Yellows
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-000"></span> `yellow-000` | `.text-yellow-000` | `.bg-yellow-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-100"></span> `yellow-100` | `.text-yellow-100` | `.bg-yellow-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-200"></span> `yellow-200` | `.text-yellow-200` | `.bg-yellow-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-yellow-300"></span> `yellow-300` | `.text-yellow-300` | `.bg-yellow-300` |
|
||||
|
||||
## Reds
|
||||
|
||||
| Color value | Font color utility | Background color utility |
|
||||
|:---------------|:---------------------|:-------------------------|
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-000"></span> `red-000` | `.text-red-000` | `.bg-red-000` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-100"></span> `red-100` | `.text-red-100` | `.bg-red-100` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-200"></span> `red-200` | `.text-red-200` | `.bg-red-200` |
|
||||
| <span class="d-inline-block p-2 mr-1 v-align-middle bg-red-300"></span> `red-300` | `.text-red-300` | `.bg-red-300` |
|
||||
|
|
@ -0,0 +1,114 @@
|
|||
---
|
||||
layout: default
|
||||
title: Layout
|
||||
nav_order: 2
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Layout Utilities
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Spacing
|
||||
|
||||
These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively.
|
||||
|
||||
| Classname prefix | What it does |
|
||||
|:-----------------|:------------------------------|
|
||||
| `.m-` | `margin` |
|
||||
| `.mx-` | `margin-left`, `margin-right` |
|
||||
| `.my-` | `margin top`, `margin bottom` |
|
||||
| `.mt-` | `margin-top` |
|
||||
| `.mr-` | `margin-right` |
|
||||
| `.mb-` | `margin-bottom` |
|
||||
| `.ml-` | `margin-left` |
|
||||
|
||||
| Classname prefix | What it does |
|
||||
|:-----------------|:--------------------------------|
|
||||
| `.p-` | `padding` |
|
||||
| `.px-` | `padding-left`, `padding-right` |
|
||||
| `.py-` | `padding top`, `padding bottom` |
|
||||
| `.pt-` | `padding-top` |
|
||||
| `.pr-` | `padding-right` |
|
||||
| `.pb-` | `padding-bottom` |
|
||||
| `.pl-` | `padding-left` |
|
||||
|
||||
Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units:
|
||||
|
||||
| Spacer/suffix | Size in rems | Rem converted to px |
|
||||
|:---------------|:--------------|:--------------------|
|
||||
| `1` | 0.25rem | 4px |
|
||||
| `2` | 0.5rem | 8px |
|
||||
| `3` | 0.75rem | 12px |
|
||||
| `4` | 1rem | 16px |
|
||||
| `5` | 1.5rem | 24px |
|
||||
| `6` | 2rem | 32px |
|
||||
| `7` | 2.5rem | 40px |
|
||||
| `8` | 3rem | 48px |
|
||||
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
This paragraph will have a margin bottom of 1rem/16px at large screens.
|
||||
{: .mb-lg-4 }
|
||||
|
||||
This paragraph will have 2rem/32px of padding on the right and left at all screen sizes.
|
||||
{: .px-6 }
|
||||
|
||||
```
|
||||
|
||||
## Vertical Alignment
|
||||
|
||||
| Classname | What it does |
|
||||
|:-----------------------|:--------------------------------|
|
||||
| `.v-align-baseline` | `vertical-align: baseline` |
|
||||
| `.v-align-bottom` | `vertical-align: bottom` |
|
||||
| `.v-align-middle` | `vertical-align: middle` |
|
||||
| `.v-align-text-bottom` | `vertical-align: text-bottom` |
|
||||
| `.v-align-text-top` | `vertical-align: text-top` |
|
||||
| `.v-align-top` | `vertical-align: top` |
|
||||
|
||||
## Display
|
||||
|
||||
Display classes aid in adapting the layout of the elements on a page:
|
||||
|
||||
| Class | |
|
||||
|:------------------|:------------------------|
|
||||
| `.d-block` | `display: block` |
|
||||
| `.d-flex` | `display: flex` |
|
||||
| `.d-inline` | `display: inline` |
|
||||
| `.d-inline-block` | `display: inline-block` |
|
||||
| `.d-none` | `display: none` |
|
||||
|
||||
Use these classes in conjunction with the responsive modifiers.
|
||||
|
||||
#### Examples
|
||||
{: .no_toc }
|
||||
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
This button will be hidden until medium screen sizes:
|
||||
|
||||
[ A button ](#url)
|
||||
{: .d-none .d-md-inline-block }
|
||||
|
||||
These headings will be `inline-block`:
|
||||
|
||||
### heading 3
|
||||
{ .d-inline-block }
|
||||
|
||||
### heading 3
|
||||
{ .d-inline-block }
|
||||
|
||||
```
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
---
|
||||
layout: default
|
||||
title: Responsive Modifiers
|
||||
nav_order: 1
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Responsive modifiers
|
||||
|
||||
Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prefix and suffix classes.
|
||||
|
||||
| Modifier | Screen size |
|
||||
|:----------|:-------------------------------------|
|
||||
| (none) | All screens until the next modifier |
|
||||
| `xs` | 320px (20rem) and up |
|
||||
| `sm` | 500px (31.25rem) and up |
|
||||
| `md` | 740px (46.25rem) and up |
|
||||
| `lg` | 1120px (70rem) and up |
|
||||
| `xl` | 1400px (87.5rem) and up |
|
||||
|
|
@ -0,0 +1,149 @@
|
|||
---
|
||||
layout: default
|
||||
title: Typography
|
||||
nav_order: 3
|
||||
parent: Utilities
|
||||
---
|
||||
|
||||
# Typography Utilities
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Font size
|
||||
|
||||
Use the `.fs-1` - `.fs-10` to set an explicit font-size.
|
||||
|
||||
| Class | Small screen size `font-size` | Large screen size `font-size` |
|
||||
|:--------|:-------------------------------|:------------------------------|
|
||||
| `.fs-1` | 9px | 10px |
|
||||
| `.fs-2` | 11px | 12px |
|
||||
| `.fs-3` | 12px | 14px |
|
||||
| `.fs-4` | 14px | 16px |
|
||||
| `.fs-5` | 16px | 18px |
|
||||
| `.fs-6` | 18px | 24px |
|
||||
| `.fs-7` | 24px | 32px |
|
||||
| `.fs-8` | 32px | 38px |
|
||||
| `.fs-9` | 38px | 42px |
|
||||
| `.fs-10`| 42px | 48px |
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Font size 1
|
||||
{: .fs-1 }
|
||||
Font size 2
|
||||
{: .fs-2 }
|
||||
Font size 3
|
||||
{: .fs-3 }
|
||||
Font size 4
|
||||
{: .fs-4 }
|
||||
Font size 5
|
||||
{: .fs-5 }
|
||||
Font size 6
|
||||
{: .fs-6 }
|
||||
Font size 7
|
||||
{: .fs-7 }
|
||||
Font size 8
|
||||
{: .fs-8 }
|
||||
Font size 9
|
||||
{: .fs-9 }
|
||||
Font size 10
|
||||
{: .fs-10 }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
Font size 1
|
||||
{: .fs-1 }
|
||||
Font size 2
|
||||
{: .fs-2 }
|
||||
Font size 3
|
||||
{: .fs-3 }
|
||||
Font size 4
|
||||
{: .fs-4 }
|
||||
Font size 5
|
||||
{: .fs-5 }
|
||||
Font size 6
|
||||
{: .fs-6 }
|
||||
Font size 7
|
||||
{: .fs-7 }
|
||||
Font size 8
|
||||
{: .fs-8 }
|
||||
Font size 9
|
||||
{: .fs-9 }
|
||||
Font size 10
|
||||
{: .fs-10 }
|
||||
```
|
||||
|
||||
## Font weight
|
||||
|
||||
Use the `.fw-300` - `.fw-700` to set an explicit font-size.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Font weight 300
|
||||
{: .fw-300 }
|
||||
Font weight 400
|
||||
{: .fw-400 }
|
||||
Font weight 500
|
||||
{: .fw-500 }
|
||||
Font weight 700
|
||||
{: .fw-700 }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
Font weight 300
|
||||
{: .fw-300 }
|
||||
Font weight 400
|
||||
{: .fw-400 }
|
||||
Font weight 500
|
||||
{: .fw-500 }
|
||||
Font weight 700
|
||||
{: .fw-700 }
|
||||
```
|
||||
|
||||
## Line height
|
||||
|
||||
Use the `lh-` classes to explicitly apply line height to text.
|
||||
|
||||
| Class | `line-height` value | Notes |
|
||||
|:--------------|:---------------------|:------------------------------|
|
||||
| `.lh-0` | 0 | |
|
||||
| `.lh-tight` | 1.1 | Default for headings |
|
||||
| `.lh-default` | 1.4 | Default for body (paragraphs) |
|
||||
|
||||
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
No Line height
|
||||
No Line height
|
||||
{: .lh-0 }
|
||||
|
||||
Tight line height
|
||||
Tight line height
|
||||
{: .lh-tight }
|
||||
|
||||
Default line height
|
||||
Default line height
|
||||
{: .fh-default }
|
||||
</div>
|
||||
```markdown
|
||||
In Markdown, use the `{: }` wrapper to apply custom classes:
|
||||
|
||||
No Line height
|
||||
No Line height
|
||||
{: .lh-0 }
|
||||
|
||||
Tight line height
|
||||
Tight line height
|
||||
{: .lh-tight }
|
||||
|
||||
Default line height
|
||||
Default line height
|
||||
{: .fh-default }
|
||||
```
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
---
|
||||
layout: default
|
||||
title: Utilities
|
||||
nav_order: 3
|
||||
parent: Utilities
|
||||
has_children: true
|
||||
permalink: /utilities
|
||||
---
|
||||
|
||||
# Utilities
|
||||
{:.no_toc}
|
||||
|
||||
CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size.
|
||||
{: .fs-6 .fw-300 }
|
||||
8
index.md
8
index.md
|
|
@ -5,15 +5,15 @@ nav_order: 1
|
|||
---
|
||||
|
||||
|
||||
# Focus on writing documentation, not building a website for it.
|
||||
{: .mt-4 .mt-md-0 :}
|
||||
# Focus on writing your docs, instead of building a website for them.
|
||||
{: .fs-9 .mb-md-8 :}
|
||||
|
||||
<div class="d-sm-flex my-sm-7">
|
||||
<div class="px-8 pl-sm-0 pr-sm-6 mb-5 mb-sm-0">
|
||||
<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 home with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages.
|
||||
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](#getting-started){: .btn .btn-purple .mr-2 } [View GitHub](https://github.com/pmarsceill/just-the-docs){: .btn }
|
||||
|
|
|
|||
|
|
@ -1,15 +1,13 @@
|
|||
---
|
||||
---
|
||||
{
|
||||
{% for page in site.pages %}
|
||||
{% unless page.url contains "css" %}
|
||||
"{{ forloop.index - 1 }}": {
|
||||
"id": "{{ forloop.index - 1 }}",
|
||||
{% for page in site.html_pages %}
|
||||
"{{ forloop.index0 }}": {
|
||||
"id": "{{ forloop.index0 }}",
|
||||
"title": "{{ page.title | xml_escape }}",
|
||||
"content": "{{ page.content | strip_html | strip_newlines | escape | remove: "\"}}",
|
||||
"url": " {{ page.url | xml_escape }}"
|
||||
}
|
||||
{% unless forloop.last %},{% endunless %}
|
||||
{% endunless %}
|
||||
{% endfor %}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue