mirror of https://github.com/thangisme/notes.git
initial commit
This commit is contained in:
Patrick Marsceill
parent
b7b0d0d7bf
commit
594385ae7b
|
|
@ -23,4 +23,5 @@ sass:
|
|||
load_paths:
|
||||
- node_modules/
|
||||
|
||||
permalink: pretty
|
||||
exclude: ["node_modules/", "*.gemspec", "Gemfile", "Gemfile.lock", "package.json", "LICENSE.txt"]
|
||||
|
|
|
|||
|
|
@ -4,5 +4,8 @@
|
|||
|
||||
<title>{{ page.title }} - {{ site.title }}</title>
|
||||
<link rel="stylesheet" href="/assets/css/just-the-docs.css">
|
||||
<script type="text/javascript" src="/assets/js/vendor/lunr.min.js"></script>
|
||||
<script type="text/javascript" src="/assets/js/just-the-docs.js"></script>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
</head>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
<ul class="navigation-list-child-list">
|
||||
{% for child in children_list %}
|
||||
{% if child.parent == node.parent and child.title != node.title %}
|
||||
<li class="navigation-list-item">
|
||||
<li class="navigation-list-item {% if page.url == child.url %} active{% endif %}">
|
||||
<a href="{{ child.url | absolute_url }}" class="navigation-list-link{% if page.url == child.url %} active{% endif %}">{{ child.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
|
|
|
|||
|
|
@ -6,18 +6,20 @@
|
|||
<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>
|
||||
<div class="navigation">
|
||||
<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>
|
||||
<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 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>
|
||||
<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 %}
|
||||
|
|
@ -27,22 +29,24 @@
|
|||
</ol>
|
||||
</nav>
|
||||
{% endunless %}
|
||||
{{ content }}
|
||||
<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 %}
|
||||
{% 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>
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
//
|
||||
// Base element style overrides
|
||||
//
|
||||
|
||||
// stylelint-disable selector-no-type
|
||||
|
||||
* {
|
||||
|
|
@ -5,36 +9,16 @@
|
|||
}
|
||||
|
||||
html {
|
||||
font-size: $root-font-size;
|
||||
@include fs-4;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: $body-font-family;
|
||||
font-size: inherit;
|
||||
line-height: 1.4;
|
||||
line-height: $body-line-height;
|
||||
color: $body-text-color;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
color: $body-heading-color;
|
||||
line-height: 1.1;
|
||||
margin-bottom: .8em;
|
||||
|
||||
&:not(:first-child) {
|
||||
margin-top: 1.2 em;
|
||||
}
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
p,
|
||||
h1,
|
||||
h2,
|
||||
|
|
@ -57,18 +41,54 @@ table {
|
|||
margin-top: 0;
|
||||
}
|
||||
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6 {
|
||||
font-weight: 500;
|
||||
color: $body-heading-color;
|
||||
line-height: $body-heading-line-height;
|
||||
margin-bottom: .8em;
|
||||
margin-top: 1.2em;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
||||
|
||||
a {
|
||||
color: $link-color;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:not([class]) {
|
||||
text-decoration: none;
|
||||
background-image: linear-gradient($grey-lt-100 0%, $grey-lt-100 100%);
|
||||
background-repeat: repeat-x;
|
||||
background-position: 0 100%;
|
||||
background-size: 1px 1px;
|
||||
|
||||
&:hover {
|
||||
background-image: linear-gradient(rgba($link-color, 0.45) 0%, rgba($link-color, 0.45) 100%);
|
||||
background-size: 1px 1px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
pre,
|
||||
code {
|
||||
font-size: 90%;
|
||||
line-height: 1.3;
|
||||
line-height: $body-line-height;
|
||||
font-family: $mono-font-family;
|
||||
}
|
||||
|
||||
figure {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
li {
|
||||
margin: 0.25em 0;
|
||||
}
|
||||
|
|
@ -77,3 +97,11 @@ img {
|
|||
max-width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $grey-lt-100;
|
||||
border: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,112 @@
|
|||
//
|
||||
// Buttons and things that look like buttons
|
||||
//
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
padding-top: 0.25em;
|
||||
padding-right: 1em;
|
||||
padding-bottom: 0.25em;
|
||||
padding-left: 1em;
|
||||
margin: 0;
|
||||
font-family: inherit;
|
||||
font-size: inherit;
|
||||
line-height: 1.5;
|
||||
color: $purple-200;
|
||||
text-decoration: none;
|
||||
vertical-align: baseline;
|
||||
cursor: pointer;
|
||||
background-color: #f7f7f7;
|
||||
border-width: 0;
|
||||
border-radius: 3px;
|
||||
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08);
|
||||
appearance: none;
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:focus:hover,
|
||||
&.selected:focus {
|
||||
box-shadow: 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: $purple-300;
|
||||
}
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
text-decoration: none;
|
||||
background-color: #f4f4f4;
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: #ededed;
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken(#dcdcdc, 5%);
|
||||
}
|
||||
|
||||
&:disabled,
|
||||
&.disabled {
|
||||
&,
|
||||
&:hover {
|
||||
color: rgba(102, 102, 102, 0.5);
|
||||
cursor: default;
|
||||
background-color: rgba(229, 229, 229, 0.5);
|
||||
background-image: none;
|
||||
box-shadow: none;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
box-shadow: inset 0 0 0 2px $grey-lt-300;
|
||||
background: transparent;
|
||||
color: $blue-100;
|
||||
|
||||
&:hover,
|
||||
&:active,
|
||||
&.zeroclipboard-is-hover,
|
||||
&.zeroclipboard-is-active {
|
||||
box-shadow: inset 0 0 0 3px $grey-lt-300;
|
||||
text-decoration: none;
|
||||
background-color: transparent;
|
||||
color: $grey-dk-100;
|
||||
}
|
||||
|
||||
&:focus {
|
||||
text-decoration: none;
|
||||
outline: none;
|
||||
box-shadow: inset 0 0 0 2px $grey-dk-100, 0 0 0 3px rgba(blue, 0.25);
|
||||
}
|
||||
|
||||
&:focus:hover,
|
||||
&.selected:focus {
|
||||
box-shadow: inset 0 0 0 2px $grey-dk-100;
|
||||
}
|
||||
}
|
||||
|
||||
.btn-purple {
|
||||
@include btn-color($white, $purple-100);
|
||||
}
|
||||
|
||||
.btn-blue {
|
||||
@include btn-color($white, $blue-000);
|
||||
}
|
||||
|
||||
.btn-green {
|
||||
@include btn-color($white, $green-100);
|
||||
}
|
||||
|
|
@ -1,13 +1,19 @@
|
|||
//
|
||||
// Code and syntax highlighting
|
||||
//
|
||||
|
||||
code {
|
||||
background-color: $grey-lt-000;
|
||||
padding: 0.2em 0.15em;
|
||||
border: $border $border-color;
|
||||
border-radius: $border-radius;
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
.highlight {
|
||||
background-color: $grey-lt-000;
|
||||
padding: $sp-3;
|
||||
margin-bottom: 0;
|
||||
|
||||
code {
|
||||
border: 0;
|
||||
|
|
@ -15,6 +21,12 @@ code {
|
|||
}
|
||||
}
|
||||
|
||||
.highlighter-rouge {
|
||||
margin-bottom: $sp-3;
|
||||
border-radius: $border-radius;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.highlight .c { color: #586E75 } /* Comment */
|
||||
.highlight .err { color: #93A1A1 } /* Error */
|
||||
.highlight .g { color: #93A1A1 } /* Generic */
|
||||
|
|
@ -83,3 +95,27 @@ code {
|
|||
.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;
|
||||
|
||||
+ .highlighter-rouge,
|
||||
+ figure.highlight {
|
||||
position: relative;
|
||||
border-left: 1px solid $border-color;
|
||||
border-right: 1px solid $border-color;
|
||||
border-bottom: 1px solid $border-color;
|
||||
border-top-left-radius: 0;
|
||||
border-top-right-radius: 0;
|
||||
margin-top: -$sp-4;
|
||||
}
|
||||
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,48 @@
|
|||
//
|
||||
// Styles for rendered markdown in the .main-content container
|
||||
//
|
||||
|
||||
// stylelint-disable selector-no-type
|
||||
|
||||
.page-content {
|
||||
ul,
|
||||
ol,
|
||||
dl {
|
||||
padding-left: 1.5em;
|
||||
}
|
||||
|
||||
ol {
|
||||
list-style-type: none;
|
||||
counter-reset: step-counter;
|
||||
|
||||
li {
|
||||
position: relative;
|
||||
|
||||
&::before {
|
||||
counter-increment: step-counter;
|
||||
content: counter(step-counter);
|
||||
left: -1.5em;
|
||||
top: 0.11em;
|
||||
position: absolute;
|
||||
color: $grey-dk-000;
|
||||
@include fs-3;
|
||||
}
|
||||
|
||||
ol {
|
||||
counter-reset: sub-counter;
|
||||
|
||||
li {
|
||||
&::before {
|
||||
counter-increment: sub-counter;
|
||||
content: counter(sub-counter, lower-alpha);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
hr + *,
|
||||
h1:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
//
|
||||
// The basic two column layout
|
||||
//
|
||||
|
||||
.page-wrap {
|
||||
@include mq(md) {
|
||||
display: flex;
|
||||
|
|
@ -12,9 +16,8 @@
|
|||
}
|
||||
|
||||
.side-bar {
|
||||
|
||||
padding-top: $gutter-spacing;
|
||||
padding-bottom: $gutter-spacing;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
padding-bottom: $gutter-spacing-sm;
|
||||
background-color: $grey-lt-000;
|
||||
z-index: 100;
|
||||
|
||||
|
|
@ -28,6 +31,7 @@
|
|||
align-items: flex-end;
|
||||
width: $nav-width + 16px;
|
||||
height: 100%;
|
||||
min-height: 400px;
|
||||
}
|
||||
|
||||
@include mq(lg) {
|
||||
|
|
@ -41,6 +45,7 @@
|
|||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
min-height: 600px;
|
||||
top: 0;
|
||||
left: 0;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
|
|
@ -50,14 +55,14 @@
|
|||
}
|
||||
|
||||
.main-content {
|
||||
padding-top: $gutter-spacing;
|
||||
padding-right: $gutter-spacing;
|
||||
padding-left: $gutter-spacing;
|
||||
padding-top: $gutter-spacing-sm;
|
||||
@include container;
|
||||
|
||||
@include mq(md) {
|
||||
position: relative;
|
||||
margin-left: $nav-width;
|
||||
max-width: $content-width;
|
||||
padding-right: $gutter-spacing;
|
||||
padding-top: $gutter-spacing;
|
||||
padding-left: $gutter-spacing * 1.5;
|
||||
padding-bottom: $gutter-spacing;
|
||||
}
|
||||
|
|
@ -68,23 +73,11 @@
|
|||
}
|
||||
}
|
||||
|
||||
.site-title {
|
||||
display: block;
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: $gutter-spacing;
|
||||
right: 0;
|
||||
width: $nav-width;
|
||||
z-index: 101;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation,
|
||||
.site-title,
|
||||
.site-footer {
|
||||
padding-left: $gutter-spacing;
|
||||
padding-right: $gutter-spacing;
|
||||
.site-title {
|
||||
|
||||
@include container;
|
||||
|
||||
width: 100%;
|
||||
|
||||
@include mq(lg) {
|
||||
|
|
@ -95,21 +88,22 @@
|
|||
.navigation {
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: $sp-8;
|
||||
padding-top: $sp-8;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.site-footer {
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
position: absolute;
|
||||
bottom: $sp-8;
|
||||
right: 0;
|
||||
bottom: $sp-8;
|
||||
z-index: 100;
|
||||
|
||||
@include container;
|
||||
}
|
||||
}
|
||||
|
||||
.img-logo {
|
||||
width: 150px;
|
||||
height: auto;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,21 @@
|
|||
//
|
||||
// Main nav, breadcrumb, etc...
|
||||
//
|
||||
|
||||
.site-title {
|
||||
display: block;
|
||||
flex-grow: 1;
|
||||
flex-shrink: 1;
|
||||
flex-basis: auto;
|
||||
|
||||
@include mq(md) {
|
||||
position: absolute;
|
||||
top: $gutter-spacing;
|
||||
right: 0;
|
||||
z-index: 101;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
|
|
@ -11,6 +29,8 @@
|
|||
.navigation-list-child-list {
|
||||
list-style: none;
|
||||
padding-left: $sp-3;
|
||||
margin-top: $sp-2;
|
||||
margin-bottom: $sp-2;
|
||||
|
||||
.navigation-list-link {
|
||||
color: $grey-dk-100;
|
||||
|
|
@ -23,6 +43,12 @@
|
|||
margin-left: -0.8em;
|
||||
color: $grey-dk-000;
|
||||
}
|
||||
|
||||
&.active {
|
||||
&::before {
|
||||
color: $grey-dk-100;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -40,6 +66,39 @@
|
|||
}
|
||||
}
|
||||
|
||||
// Small screen nav
|
||||
|
||||
.main-nav {
|
||||
display: none;
|
||||
|
||||
&.nav-open {
|
||||
display: block;
|
||||
}
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.side-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
@include mq(md) {
|
||||
display: block;
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-list-toggle {
|
||||
position: absolute;
|
||||
right: $sp-4;
|
||||
|
||||
@include mq(md) {
|
||||
display: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
// Breadcrumb nav
|
||||
|
||||
.breadcrumb-nav-list {
|
||||
list-style: none;
|
||||
padding-left: 0;
|
||||
|
|
@ -51,6 +110,10 @@
|
|||
display: table-cell;
|
||||
@include fs-2;
|
||||
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
|
||||
&::after {
|
||||
display: inline-block;
|
||||
margin-left: $sp-2;
|
||||
|
|
@ -65,3 +128,25 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,6 @@
|
|||
.search-results-wrap {
|
||||
position: absolute;
|
||||
background: $white;
|
||||
width: 400px;
|
||||
z-index: 100;
|
||||
}
|
||||
|
|
@ -1,31 +1,47 @@
|
|||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$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;
|
||||
|
||||
//
|
||||
// Colors
|
||||
//
|
||||
|
||||
$grey-dk-000: #959396;
|
||||
$grey-dk-100: #5c5962;
|
||||
$grey-dk-200: #44434d;
|
||||
$grey-dk-300: #27262b;
|
||||
$white: #fff !default;
|
||||
|
||||
$grey-lt-000: #f5f6fa;
|
||||
$grey-lt-100: #efebf0;
|
||||
$grey-lt-200: #ecebed;
|
||||
$grey-lt-300: #e6e1e8;
|
||||
$grey-dk-000: #959396 !default;
|
||||
$grey-dk-100: #5c5962 !default;
|
||||
$grey-dk-200: #44434d !default;
|
||||
$grey-dk-300: #27262b !default;
|
||||
|
||||
$purple-000: #7253ed;
|
||||
$purple-100: #5e41d0;
|
||||
$purple-200: #4e26af;
|
||||
$purple-300: #381885;
|
||||
$grey-lt-000: #f5f6fa !default;
|
||||
$grey-lt-100: #eeebee !default;
|
||||
$grey-lt-200: #ecebed !default;
|
||||
$grey-lt-300: #e6e1e8 !default;
|
||||
|
||||
$green-000: #41d66f;
|
||||
$green-100: #2bb45a;
|
||||
$green-200: #299950;
|
||||
$green-300: #156f49;
|
||||
$purple-000: #7253ed !default;
|
||||
$purple-100: #5e41d0 !default;
|
||||
$purple-200: #4e26af !default;
|
||||
$purple-300: #381885 !default;
|
||||
|
||||
$body-text-color: $grey-dk-100;
|
||||
$body-heading-color: $grey-dk-300;
|
||||
$root-font-size: 16px; // Base font-size for rems
|
||||
$link-color: $purple-000;
|
||||
$blue-000: #2c84fa !default;
|
||||
$blue-100: #2869e6 !default;
|
||||
$blue-200: #264caf !default;
|
||||
$blue-300: #183385 !default;
|
||||
|
||||
$green-000: #41d693 !default;
|
||||
$green-100: #11b584 !default;
|
||||
$green-200: #009c7b !default;
|
||||
$green-300: #026e57 !default;
|
||||
|
||||
$body-text-color: $grey-dk-100 !default;
|
||||
$body-heading-color: $grey-dk-300 !default;
|
||||
$link-color: $purple-000 !default;
|
||||
|
||||
//
|
||||
// Media queries in pixels
|
||||
|
|
@ -36,7 +52,7 @@ $media-queries: (
|
|||
sm: 500px,
|
||||
md: 740px,
|
||||
lg: 1120px,
|
||||
xl: 1200px
|
||||
xl: 1400px
|
||||
) !default;
|
||||
|
||||
//
|
||||
|
|
@ -55,7 +71,7 @@ $spacers: (
|
|||
sp-6: $spacing-unit * 2,
|
||||
sp-7: $spacing-unit * 2.5,
|
||||
sp-8: $spacing-unit * 3
|
||||
);
|
||||
) !default;
|
||||
|
||||
$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px
|
||||
$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px
|
||||
|
|
@ -70,17 +86,18 @@ $sp-8: map-get($spacers, sp-8); // 3 rem == 48px
|
|||
// Borders
|
||||
//
|
||||
|
||||
$border: 1px solid;
|
||||
$border-radius: 4px;
|
||||
$border-color: $grey-lt-100;
|
||||
$border: 1px solid !default;
|
||||
$border-radius: 4px !default;
|
||||
$border-color: $grey-lt-100 !default;
|
||||
|
||||
//
|
||||
// Grid system
|
||||
//
|
||||
|
||||
$gutter-spacing: $sp-6;
|
||||
$nav-width: 232px;
|
||||
$content-width: 800px;
|
||||
$gutter-spacing: $sp-6 !default;
|
||||
$gutter-spacing-sm: $sp-4 !default;
|
||||
$nav-width: 232px !default;
|
||||
$content-width: 800px !default;
|
||||
|
||||
$media-queries: (
|
||||
xs: 320px,
|
||||
|
|
@ -89,11 +106,3 @@ $media-queries: (
|
|||
lg: 800px,
|
||||
xl: 1316px
|
||||
) !default;
|
||||
|
||||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
$body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif;
|
||||
|
||||
$mono-font-family: Menlo, Consolas, Monospace;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,25 @@
|
|||
// Colored button
|
||||
|
||||
@mixin btn-color($fg, $bg) {
|
||||
color: $fg;
|
||||
background-image: linear-gradient(lighten($bg, 5%), darken($bg, 2%));
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25), 0 4px 10px rgba(0, 0, 0, 0.12);
|
||||
|
||||
&:hover,
|
||||
&.zeroclipboard-is-hover {
|
||||
color: $fg;
|
||||
background-image: linear-gradient((lighten($bg, 2%), darken($bg, 4%)));
|
||||
}
|
||||
|
||||
&:active,
|
||||
&.selected,
|
||||
&.zeroclipboard-is-active {
|
||||
background-color: darken($bg, 5%);
|
||||
background-image: none;
|
||||
box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
&.selected:hover {
|
||||
background-color: darken($bg, 10%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,45 +1,3 @@
|
|||
// Font size
|
||||
|
||||
@mixin fs-1 {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
|
||||
@mixin fs-2 {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
|
||||
@mixin fs-3 {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
|
||||
@mixin fs-4 {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
|
||||
@mixin fs-5 {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
|
||||
@mixin fs-6 {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
|
||||
@mixin fs-7 {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
|
||||
@mixin fs-8 {
|
||||
font-size: 36px !important;
|
||||
}
|
||||
|
||||
@mixin fs-9 {
|
||||
font-size: 42px !important;
|
||||
}
|
||||
|
||||
@mixin fs-10 {
|
||||
font-size: 48px !important;
|
||||
}
|
||||
|
||||
// Media query
|
||||
|
||||
// Media query mixin
|
||||
|
|
@ -62,3 +20,15 @@
|
|||
+ "Please make sure it is defined in `$media-queries` map.";
|
||||
}
|
||||
}
|
||||
|
||||
// Responsive container
|
||||
|
||||
@mixin container {
|
||||
padding-left: $gutter-spacing-sm;
|
||||
padding-right: $gutter-spacing-sm;
|
||||
|
||||
@include mq(md) {
|
||||
padding-left: $gutter-spacing;
|
||||
padding-right: $gutter-spacing;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,81 @@
|
|||
// Font size
|
||||
|
||||
@mixin fs-1 {
|
||||
font-size: 9px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 10px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-2 {
|
||||
font-size: 11px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 12px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-3 {
|
||||
font-size: 12px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-4 {
|
||||
font-size: 14px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 16px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-5 {
|
||||
font-size: 16px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 18px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-6 {
|
||||
font-size: 18px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 24px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-7 {
|
||||
font-size: 24px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 32px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-8 {
|
||||
font-size: 32px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 36px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-9 {
|
||||
font-size: 36px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 42px !important;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin fs-10 {
|
||||
font-size: 42px !important;
|
||||
|
||||
@include mq(sm) {
|
||||
font-size: 48px !important;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
@import "./layout";
|
||||
@import "./buttons";
|
||||
@import "./typography";
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
@import "./variables";
|
||||
@import "./functions";
|
||||
@import "./mixins";
|
||||
@import "./mixins/mixins";
|
||||
|
|
|
|||
|
|
@ -1,8 +1,19 @@
|
|||
//
|
||||
// Tables
|
||||
//
|
||||
|
||||
table {
|
||||
display: block;
|
||||
width: 100%;
|
||||
max-width: 100%;
|
||||
overflow-x: auto;
|
||||
margin-bottom: $sp-5;
|
||||
border-collapse: separate;
|
||||
box-shadow: 0 3px 12px 0 transparentize($grey-dk-300, 0.9);
|
||||
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05);
|
||||
|
||||
@include mq(sm) {
|
||||
display: table;
|
||||
}
|
||||
}
|
||||
|
||||
th,
|
||||
|
|
@ -14,6 +25,7 @@ td {
|
|||
padding-right: $sp-3;
|
||||
border-bottom: $border $grey-lt-000;
|
||||
border-left: $border $border-color;
|
||||
min-width: 120px;
|
||||
|
||||
&:first-of-type {
|
||||
border-left: 0;
|
||||
|
|
@ -54,11 +66,8 @@ tbody {
|
|||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
thead {
|
||||
th {
|
||||
border-bottom: 1px solid $border-color;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,3 +1,7 @@
|
|||
//
|
||||
// Typography
|
||||
//
|
||||
|
||||
h1,
|
||||
.text-alpha {
|
||||
@include fs-8;
|
||||
|
|
@ -29,7 +33,7 @@ h5,
|
|||
}
|
||||
|
||||
h6,
|
||||
.text-epsilon {
|
||||
.text-zeta {
|
||||
@include fs-2;
|
||||
color: $grey-dk-200;
|
||||
}
|
||||
|
|
@ -40,14 +44,10 @@ li {
|
|||
}
|
||||
}
|
||||
|
||||
hr {
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: $sp-6 0;
|
||||
background-color: $grey-lt-100;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
.text-small {
|
||||
@include fs-2;
|
||||
}
|
||||
|
||||
.text-mono {
|
||||
font-family: $mono-font-family;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,17 +1,23 @@
|
|||
.text-purple-000 {
|
||||
color: $purple-000 !important;
|
||||
//
|
||||
// Utility classes for colors
|
||||
//
|
||||
|
||||
// Text colors
|
||||
|
||||
.text-grey-dk-000 {
|
||||
color: $grey-dk-000 !important;
|
||||
}
|
||||
|
||||
.text-purple-100 {
|
||||
color: $purple-100 !important;
|
||||
.text-grey-dk-100 {
|
||||
color: $grey-dk-100 !important;
|
||||
}
|
||||
|
||||
.text-purple-200 {
|
||||
color: $purple-200 !important;
|
||||
.text-grey-dk-200 {
|
||||
color: $grey-dk-200 !important;
|
||||
}
|
||||
|
||||
.text-purple-300 {
|
||||
color: $purple-300 !important;
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !important;
|
||||
}
|
||||
|
||||
.text-grey-lt-000 {
|
||||
|
|
@ -30,18 +36,50 @@
|
|||
color: $grey-lt-300 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-000 {
|
||||
color: $grey-dk-000 !important;
|
||||
.text-blue-000 {
|
||||
color: $blue-000 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-100 {
|
||||
color: $grey-dk-100 !important;
|
||||
.text-blue-100 {
|
||||
color: $blue-100 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-200 {
|
||||
color: $grey-dk-200 !important;
|
||||
.text-blue-200 {
|
||||
color: $blue-200 !important;
|
||||
}
|
||||
|
||||
.text-grey-dk-300 {
|
||||
color: $grey-dk-300 !important;
|
||||
.text-blue-300 {
|
||||
color: $blue-300 !important;
|
||||
}
|
||||
|
||||
.text-green-000 {
|
||||
color: $green-000 !important;
|
||||
}
|
||||
|
||||
.text-green-100 {
|
||||
color: $green-100 !important;
|
||||
}
|
||||
|
||||
.text-green-200 {
|
||||
color: $green-200 !important;
|
||||
}
|
||||
|
||||
.text-green-300 {
|
||||
color: $green-300 !important;
|
||||
}
|
||||
|
||||
.text-purple-000 {
|
||||
color: $purple-000 !important;
|
||||
}
|
||||
|
||||
.text-purple-100 {
|
||||
color: $purple-100 !important;
|
||||
}
|
||||
|
||||
.text-purple-200 {
|
||||
color: $purple-200 !important;
|
||||
}
|
||||
|
||||
.text-purple-300 {
|
||||
color: $purple-300 !important;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,26 @@
|
|||
//
|
||||
// Utility classes for layout and spacing
|
||||
//
|
||||
|
||||
.d-block { display: block !important; }
|
||||
.d-flex { display: flex !important; }
|
||||
.d-inline { display: inline !important; }
|
||||
.d-inline-block { display: inline-block !important; }
|
||||
.d-none { display: none !important; }
|
||||
|
||||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .d-sm-block, .d-md-none, .d-lg-inline
|
||||
.d-#{$media-query}-block { display: block !important; }
|
||||
.d-#{$media-query}-flex { display: flex !important; }
|
||||
.d-#{$media-query}-inline { display: inline !important; }
|
||||
.d-#{$media-query}-inline-block { display: inline-block !important; }
|
||||
.d-#{$media-query}-none { display: none !important; }
|
||||
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,3 +1,7 @@
|
|||
//
|
||||
// Utility classes for lists
|
||||
//
|
||||
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
.list-style-none {
|
||||
|
|
|
|||
|
|
@ -1,10 +1,10 @@
|
|||
// scss-lint:disable SpaceAfterPropertyName
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
|
||||
// Margin spacer utilities
|
||||
//
|
||||
// Utility classes for margins and padding
|
||||
//
|
||||
|
||||
// scss-lint:disable SpaceAfterPropertyName
|
||||
// stylelint-disable block-opening-brace-space-after, block-opening-brace-space-before, primer/selector-no-utility
|
||||
|
||||
// Margin spacer utilities
|
||||
|
||||
@for $i from 1 through length($spacers) {
|
||||
|
|
@ -42,7 +42,7 @@
|
|||
@each $media-query in map-keys($media-queries) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
@include mq($media-query) {
|
||||
$size: #{map-get($spacers, spacer#{$i - 1})};
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .m-sm-0, .m-md-1, .m-lg-2...
|
||||
|
|
@ -97,7 +97,7 @@
|
|||
@each $media-query in map-keys($media-queries) {
|
||||
@include mq($media-query) {
|
||||
@for $i from 1 through length($spacers) {
|
||||
$size: #{map-get($spacers, spacer#{$i - 1})};
|
||||
$size: #{map-get($spacers, sp-#{$i - 1})};
|
||||
$scale: #{$i - 1};
|
||||
|
||||
// .p-sm-0, .p-md-1, .p-lg-2...
|
||||
|
|
|
|||
|
|
@ -1,3 +1,9 @@
|
|||
//
|
||||
// Utility classes for typography
|
||||
//
|
||||
|
||||
// stylelint-disable primer/selector-no-utility
|
||||
|
||||
.fs-1 {
|
||||
@include fs-1;
|
||||
}
|
||||
|
|
@ -53,3 +59,33 @@
|
|||
.fw-700 {
|
||||
font-weight: 700 !important;
|
||||
}
|
||||
|
||||
.lh-0 {
|
||||
line-height: 0 !important;
|
||||
}
|
||||
|
||||
.lh-default {
|
||||
line-height: $body-line-height;
|
||||
}
|
||||
|
||||
.lh-tight {
|
||||
line-height: $body-heading-line-height;
|
||||
}
|
||||
|
||||
.ls-5 {
|
||||
letter-spacing: 0.05em !important;
|
||||
}
|
||||
|
||||
.ls-10 {
|
||||
letter-spacing: 0.1em !important;
|
||||
}
|
||||
|
||||
.ls-0 {
|
||||
letter-spacing: 0 !important;
|
||||
}
|
||||
|
||||
.text-uppercase {
|
||||
text-transform: uppercase !important;
|
||||
}
|
||||
|
||||
// stylelint-enable primer/selector-no-utility
|
||||
|
|
|
|||
|
|
@ -15,24 +15,13 @@
|
|||
|
||||
// Support
|
||||
@import "./support/support";
|
||||
|
||||
// Utilities
|
||||
@import "./utilities/utilities";
|
||||
|
||||
// Base
|
||||
@import "./base";
|
||||
|
||||
// Layout
|
||||
@import "./layout";
|
||||
|
||||
// Navigation
|
||||
@import "./content";
|
||||
@import "./navigation";
|
||||
|
||||
// Typography
|
||||
@import "./typography";
|
||||
|
||||
// Tables
|
||||
@import "./buttons";
|
||||
@import "./search";
|
||||
@import "./tables";
|
||||
|
||||
// Code blocks and inline code
|
||||
@import "./code";
|
||||
@import "./utilities/utilities";
|
||||
|
|
|
|||
Binary file not shown.
|
Before Width: | Height: | Size: 52 KiB After Width: | Height: | Size: 20 KiB |
|
|
@ -0,0 +1,125 @@
|
|||
// Event handling
|
||||
|
||||
function addEvent(el, type, handler) {
|
||||
if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler);
|
||||
}
|
||||
function removeEvent(el, type, handler) {
|
||||
if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler);
|
||||
}
|
||||
|
||||
// Show/hide mobile menu
|
||||
|
||||
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');
|
||||
|
||||
nav.classList.toggle('nav-open');
|
||||
navTrigger.classList.toggle('nav-open');
|
||||
navTrigger.innerText = textToggle;
|
||||
navTrigger.setAttribute('data-text-toggle', text);
|
||||
textToggle = text;
|
||||
})
|
||||
}
|
||||
|
||||
// Site search
|
||||
|
||||
function initSearch() {
|
||||
var index = lunr(function () {
|
||||
this.ref('id');
|
||||
this.field('title');
|
||||
this.field('content', { boost: 10 });
|
||||
this.field('url');
|
||||
});
|
||||
|
||||
// Get the generated search_data.json file so lunr.js can search it locally.
|
||||
|
||||
var request = new XMLHttpRequest();
|
||||
request.open('GET', '/search-data.json', true);
|
||||
|
||||
request.onload = function() {
|
||||
if (request.status >= 200 && request.status < 400) {
|
||||
// Success!
|
||||
var data = JSON.parse(request.responseText);
|
||||
var keys = Object.keys(data);
|
||||
|
||||
for(var i in data) {
|
||||
index.add({
|
||||
id: data[i].id,
|
||||
title: data[i].title,
|
||||
content: data[i].content,
|
||||
url: data[i].url
|
||||
});
|
||||
}
|
||||
searchResults(data);
|
||||
} else {
|
||||
// We reached our target server, but it returned an error
|
||||
console.log('Error loading ajax request. Request status:' + request.status);
|
||||
}
|
||||
};
|
||||
|
||||
request.onerror = function() {
|
||||
// There was a connection error of some sort
|
||||
console.log('There was a connection error');
|
||||
};
|
||||
|
||||
request.send();
|
||||
|
||||
function searchResults(dataStore) {
|
||||
var searchInput = document.querySelector('.js-search-input');
|
||||
var searchResults = document.querySelector('.js-search-results');
|
||||
var store = dataStore;
|
||||
|
||||
addEvent(searchInput, 'keyup', function(){
|
||||
var query = this.value;
|
||||
|
||||
searchResults.innerHTML = '';
|
||||
|
||||
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 resultsUrl = store[results[i].ref].url;
|
||||
var resultsTitle = store[results[i].ref].title;
|
||||
|
||||
resultsLink.setAttribute("href", store[results[i].ref].url);
|
||||
resultsLink.innerText = resultsTitle;
|
||||
|
||||
resultsList.classList.add("search-results-list");
|
||||
searchResults.appendChild(resultsList);
|
||||
resultsList.appendChild(resultsListItem);
|
||||
resultsListItem.appendChild(resultsLink)
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
addEvent(searchInput, 'blur', function(){
|
||||
setTimeout(function(){searchResults.innerHTML = '';}, 300);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Document ready
|
||||
|
||||
function ready(){
|
||||
toggleNav();
|
||||
initSearch();
|
||||
}
|
||||
|
||||
// in case the document is already rendered
|
||||
if (document.readyState!='loading') ready();
|
||||
// modern browsers
|
||||
else if (document.addEventListener) document.addEventListener('DOMContentLoaded', ready);
|
||||
// IE <= 8
|
||||
else document.attachEvent('onreadystatechange', function(){
|
||||
if (document.readyState=='complete') ready();
|
||||
});
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,22 @@
|
|||
---
|
||||
layout: default
|
||||
title: Navigation Structure
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Navigation Structure
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Main navigation
|
||||
|
||||
---
|
||||
|
||||
## In-page navigation with Table of Contents
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
---
|
||||
layout: default
|
||||
title: Navigation Structure
|
||||
nav_order: 3
|
||||
---
|
||||
|
|
@ -4,3 +4,103 @@ title: Buttons
|
|||
parent: UI Components
|
||||
nav_order: 2
|
||||
---
|
||||
|
||||
# Buttons
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Basic button styles
|
||||
|
||||
### Links that look like buttons
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-purple }
|
||||
[Link button](http://example.com/){: .btn .btn-blue }
|
||||
[Link button](http://example.com/){: .btn .btn-green }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-outline }
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-purple }
|
||||
[Link button](http://example.com/){: .btn .btn-blue }
|
||||
[Link button](http://example.com/){: .btn .btn-green }
|
||||
|
||||
[Link button](http://example.com/){: .btn .btn-outline }
|
||||
```
|
||||
|
||||
### Button element
|
||||
|
||||
GitHub flavored markdown does not support the `button` element, so you'll have to use inline HTML for this:
|
||||
|
||||
|
||||
<div class="code-example">
|
||||
|
||||
<button type="button" name="button" class="btn">Button element</button>
|
||||
|
||||
</div>
|
||||
```html
|
||||
<button type="button" name="button" class="btn">Button element</button>
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Using utilities with buttons
|
||||
|
||||
### Button size
|
||||
|
||||
Wrap the button in container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities.md %}#typography) to scale buttons:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
<span class="fs-6">
|
||||
[Big ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
|
||||
<span class="fs-3">
|
||||
[Tiny ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
<span class="fs-8">
|
||||
[Link button](http://example.com/){: .btn }
|
||||
</span>
|
||||
|
||||
<span class="fs-3">
|
||||
[Tiny ass button](http://example.com/){: .btn }
|
||||
</span>
|
||||
```
|
||||
|
||||
### 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.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Button with space](http://example.com/){: .btn .btn-purple .mr-2}
|
||||
[Button ](http://example.com/){: .btn .btn-blue .mr-2}
|
||||
|
||||
[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
|
||||
[Button ](http://example.com/){: .btn .btn-blue }
|
||||
</div>
|
||||
```markdown
|
||||
[Button with space](http://example.com/){: .btn .btn-purple .mr-2}
|
||||
[Button ](http://example.com/){: .btn .btn-blue }
|
||||
|
||||
[Button with more space](http://example.com/){: .btn .btn-green .mr-4}
|
||||
[Button ](http://example.com/){: .btn .btn-blue }
|
||||
```
|
||||
|
|
|
|||
|
|
@ -2,5 +2,83 @@
|
|||
layout: default
|
||||
title: Code
|
||||
parent: UI Components
|
||||
nav_order: 3
|
||||
nav_order: 4
|
||||
---
|
||||
|
||||
# Code
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Inline code
|
||||
|
||||
Code can be rendered inline using single ticks by wrapping your code in single back ticks.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, `<inline code snippet>` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Syntax highlighted code blocks
|
||||
|
||||
Use Jekyll's built in syntax highlighting with Rouge for code blocks by using three backticks, followed by the language name:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
</div>
|
||||
{% highlight markdown %}
|
||||
```js
|
||||
// Javascript code with syntax highlighting.
|
||||
var fun = function lang(l) {
|
||||
dateformat.i18n = require('./lang/' + l)
|
||||
return true;
|
||||
}
|
||||
```
|
||||
{% endhighlight %}
|
||||
|
||||
---
|
||||
|
||||
## Code blocks with rendered examples
|
||||
|
||||
To demonstrate front end code, sometimes it useful to show a rendered example of that code. After including the styles from your project that you'll need to show the rendering, you can use a div with the `code-example` class, followed by the code block syntax. If you want to render your output with Markdown instead of HTML, use the `markdown="1"` attribute to tell Jekyll that the code you are rendering will be in Markdown format... This is about to get meta...
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
[Link button](http://example.com/){: .btn }
|
||||
```
|
||||
|
||||
</div>
|
||||
{% highlight markdown %}
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
[Link button](http://example.com/){: .btn }
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
[Link button](http://example.com/){: .btn }
|
||||
```
|
||||
{% endhighlight %}
|
||||
|
|
|
|||
|
|
@ -0,0 +1,40 @@
|
|||
---
|
||||
layout: default
|
||||
title: Tables
|
||||
parent: UI Components
|
||||
nav_order: 3
|
||||
---
|
||||
|
||||
# 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.
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
|
||||
</div>
|
||||
```markdown
|
||||
| head1 | head two | three |
|
||||
|:-------------|:------------------|:------|
|
||||
| ok | good swedish fish | nice |
|
||||
| out of stock | good and plenty | nice |
|
||||
| ok | good `oreos` | hmm |
|
||||
| ok | good `zoute` drop | yumm |
|
||||
```
|
||||
|
|
@ -4,3 +4,111 @@ title: Typography
|
|||
parent: UI Components
|
||||
nav_order: 1
|
||||
---
|
||||
|
||||
# Typography
|
||||
{:.no_toc}
|
||||
|
||||
## Table of contents
|
||||
{: .no_toc .text-delta }
|
||||
|
||||
1. TOC
|
||||
{:toc}
|
||||
|
||||
---
|
||||
|
||||
## Font stack
|
||||
|
||||
By default, Just the Docs uses a native system font stack for sans-serif fonts:
|
||||
|
||||
```scss
|
||||
-apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif
|
||||
```
|
||||
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
abcdefghijklmnopqrstuvwxyz
|
||||
{: .fs-5 .ls-10 .code-example }
|
||||
|
||||
For monospace type, like code snippets or the pre `<pre>` element, Just the Docs uses a native system font stack for monospace fonts:
|
||||
|
||||
```scss
|
||||
"SFMono-Regular", Menlo, Consolas, Monospace
|
||||
```
|
||||
|
||||
ABCDEFGHIJKLMNOPQRSTUVWXYZ
|
||||
abcdefghijklmnopqrstuvwxyz
|
||||
{: .fs-5 .ls-10 .text-mono .code-example }
|
||||
|
||||
---
|
||||
|
||||
## Responsive type scale
|
||||
|
||||
Just the docs uses a responsive type scale that shifts depending on the viewport size. Common elements text elements rendered from markdown use a
|
||||
|
||||
| Selector | Small screen size `font-size` | Large screen size `font-size` |
|
||||
|:----------------------|:---------------------------------|:------------------------------|
|
||||
| `h1`, `.text-alpha` | 32px | 36px |
|
||||
| `h2`, `.text-beta` | 18px | 24px |
|
||||
| `h3`, `.text-gamma` | 16px | 18px |
|
||||
| `h4`, `.text-delta` | 14px | 16px |
|
||||
| `h5`, `.text-epsilon` | 16px | 18px |
|
||||
| `h6`, `.text-zeta ` | 18px | 24px |
|
||||
| `body` | 14px | 16px |
|
||||
|
||||
---
|
||||
|
||||
## Headings
|
||||
|
||||
Headings are rendered like this:
|
||||
|
||||
<div class="code-example">
|
||||
<h1>Heading 1</h1>
|
||||
<h2>Heading 2</h2>
|
||||
<h3>Heading 3</h3>
|
||||
<h4>Heading 4</h4>
|
||||
<h5>Heading 5</h5>
|
||||
<h6>Heading 6</h6>
|
||||
</div>
|
||||
```markdown
|
||||
# Heading 1
|
||||
## Heading 2
|
||||
### Heading 3
|
||||
#### Heading 4
|
||||
##### Heading 5
|
||||
###### Heading 6
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Body text
|
||||
|
||||
Default body text is rendered like this:
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
</div>
|
||||
```markdown
|
||||
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Inline elements
|
||||
|
||||
<div class="code-example" markdown="1">
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page](another-page).
|
||||
</div>
|
||||
```markdown
|
||||
Text can be **bold**, _italic_, or ~~strikethrough~~.
|
||||
|
||||
[Link to another page](another-page).
|
||||
```
|
||||
|
||||
---
|
||||
|
||||
## Typographic Utilities
|
||||
|
||||
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 }
|
||||
|
|
|
|||
|
|
@ -9,4 +9,5 @@ permalink: /ui-components
|
|||
|
||||
# UI Components
|
||||
|
||||
Just the Docs includes styles for displaying clear and readable typography, nicely formatted code, and easily identifiable buttons. The goal of this theme is to make it as easy as possible to write code documentation in markdown and have the Just the Docs take care of the rest, so very few CSS classes are required to render commonly used UI elements.
|
||||
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.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
|
|
|||
|
|
@ -0,0 +1,259 @@
|
|||
---
|
||||
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
|
||||
23
index.md
23
index.md
|
|
@ -4,12 +4,21 @@ title: Home
|
|||
nav_order: 1
|
||||
---
|
||||
|
||||
{:.img-logo}
|
||||
|
||||
# A Jekyll theme for documentation
|
||||
# Focus on writing documentation, not building a website for it.
|
||||
{: .mt-4 .mt-md-0 :}
|
||||
|
||||
Focus on writing good docs, not building a site for it. Just the docs allows you to create your documentation site with a Jekyll theme that is easily hosted on GitHub pages.
|
||||
{: .fs-6 .fw-300 }
|
||||
<div class="d-sm-flex my-sm-7">
|
||||
<div class="px-8 pl-sm-0 pr-sm-6 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.
|
||||
{: .fs-6 .fw-300 }
|
||||
|
||||
[Get Started](#getting-started){: .btn .btn-purple .mr-2 } [View GitHub](https://github.com/pmarsceill/just-the-docs){: .btn }
|
||||
</div>
|
||||
</div>
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -32,6 +41,10 @@ theme: "just-the-docs"
|
|||
```
|
||||
3. Run you local Jekyll server
|
||||
```bash
|
||||
$ jekyll serve
|
||||
```
|
||||
```bash
|
||||
# .. or if you're using a Gemfile (bundler)
|
||||
$ bundle exec jekyll serve
|
||||
```
|
||||
4. Point your web browser to [http://localhost:4000](http://localhost:4000)
|
||||
|
|
@ -40,7 +53,7 @@ $ bundle exec jekyll serve
|
|||
|
||||
## About the project
|
||||
|
||||
Just the Docs is © 2016 by [Patrick Marsceill](http://patrickmarsceill.com).
|
||||
Just the Docs is © 2017 by [Patrick Marsceill](http://patrickmarsceill.com).
|
||||
|
||||
### License
|
||||
|
||||
|
|
|
|||
|
|
@ -1,2 +1,15 @@
|
|||
---
|
||||
---
|
||||
{
|
||||
{% for page in site.pages %}
|
||||
{% unless page.url contains "css" %}
|
||||
"{{ forloop.index - 1 }}": {
|
||||
"id": "{{ forloop.index - 1 }}",
|
||||
"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