+
+
{% unless page.url == "/" %}
-
diff --git a/_sass/base.scss b/_sass/base.scss
index 6899020..5566b5c 100644
--- a/_sass/base.scss
+++ b/_sass/base.scss
@@ -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;
+}
diff --git a/_sass/buttons.scss b/_sass/buttons.scss
new file mode 100644
index 0000000..559d1db
--- /dev/null
+++ b/_sass/buttons.scss
@@ -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);
+}
diff --git a/_sass/code.scss b/_sass/code.scss
index caa0f40..bb534f6 100644
--- a/_sass/code.scss
+++ b/_sass/code.scss
@@ -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;
+ }
+
+}
diff --git a/_sass/content.scss b/_sass/content.scss
new file mode 100644
index 0000000..e40ad33
--- /dev/null
+++ b/_sass/content.scss
@@ -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;
+ }
+}
diff --git a/_sass/layout.scss b/_sass/layout.scss
index 35370a5..6dffaba 100644
--- a/_sass/layout.scss
+++ b/_sass/layout.scss
@@ -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;
-}
diff --git a/_sass/navigation.scss b/_sass/navigation.scss
index 7667222..4d226c1 100644
--- a/_sass/navigation.scss
+++ b/_sass/navigation.scss
@@ -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);
+ }
+ }
+ }
+}
diff --git a/_sass/search.scss b/_sass/search.scss
new file mode 100644
index 0000000..10c3786
--- /dev/null
+++ b/_sass/search.scss
@@ -0,0 +1,6 @@
+.search-results-wrap {
+ position: absolute;
+ background: $white;
+ width: 400px;
+ z-index: 100;
+}
diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss
index 629c2e6..96abff6 100644
--- a/_sass/support/_variables.scss
+++ b/_sass/support/_variables.scss
@@ -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;
diff --git a/_sass/support/mixins/_buttons.scss b/_sass/support/mixins/_buttons.scss
new file mode 100644
index 0000000..9a6b84f
--- /dev/null
+++ b/_sass/support/mixins/_buttons.scss
@@ -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%);
+ }
+}
diff --git a/_sass/support/_mixins.scss b/_sass/support/mixins/_layout.scss
similarity index 52%
rename from _sass/support/_mixins.scss
rename to _sass/support/mixins/_layout.scss
index d63845a..52b9e3c 100644
--- a/_sass/support/_mixins.scss
+++ b/_sass/support/mixins/_layout.scss
@@ -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;
+ }
+}
diff --git a/_sass/support/mixins/_typography.scss b/_sass/support/mixins/_typography.scss
new file mode 100644
index 0000000..e6d85be
--- /dev/null
+++ b/_sass/support/mixins/_typography.scss
@@ -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;
+ }
+}
diff --git a/_sass/support/mixins/mixins.scss b/_sass/support/mixins/mixins.scss
new file mode 100644
index 0000000..0506fbf
--- /dev/null
+++ b/_sass/support/mixins/mixins.scss
@@ -0,0 +1,3 @@
+@import "./layout";
+@import "./buttons";
+@import "./typography";
diff --git a/_sass/support/support.scss b/_sass/support/support.scss
index e060be5..8131a32 100644
--- a/_sass/support/support.scss
+++ b/_sass/support/support.scss
@@ -1,3 +1,3 @@
@import "./variables";
@import "./functions";
-@import "./mixins";
+@import "./mixins/mixins";
diff --git a/_sass/tables.scss b/_sass/tables.scss
index 1b55156..e107151 100644
--- a/_sass/tables.scss
+++ b/_sass/tables.scss
@@ -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;
}
}
diff --git a/_sass/typography.scss b/_sass/typography.scss
index b5944b9..1b2cb28 100644
--- a/_sass/typography.scss
+++ b/_sass/typography.scss
@@ -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;
+}
diff --git a/_sass/utilities/_colors.scss b/_sass/utilities/_colors.scss
index aa8e0d8..6ea1578 100644
--- a/_sass/utilities/_colors.scss
+++ b/_sass/utilities/_colors.scss
@@ -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;
}
diff --git a/_sass/utilities/_layout.scss b/_sass/utilities/_layout.scss
index e69de29..24f4fe1 100644
--- a/_sass/utilities/_layout.scss
+++ b/_sass/utilities/_layout.scss
@@ -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; }
+
+ }
+ }
+}
diff --git a/_sass/utilities/_lists.scss b/_sass/utilities/_lists.scss
index 6fea9fc..0c5bcad 100644
--- a/_sass/utilities/_lists.scss
+++ b/_sass/utilities/_lists.scss
@@ -1,3 +1,7 @@
+//
+// Utility classes for lists
+//
+
// stylelint-disable primer/selector-no-utility
.list-style-none {
diff --git a/_sass/utilities/_spacing.scss b/_sass/utilities/_spacing.scss
index cd8214c..9b42816 100644
--- a/_sass/utilities/_spacing.scss
+++ b/_sass/utilities/_spacing.scss
@@ -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...
diff --git a/_sass/utilities/_typography.scss b/_sass/utilities/_typography.scss
index f9625fb..7206def 100644
--- a/_sass/utilities/_typography.scss
+++ b/_sass/utilities/_typography.scss
@@ -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
diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss
index dce5439..4fc74ea 100644
--- a/assets/css/just-the-docs.scss
+++ b/assets/css/just-the-docs.scss
@@ -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";
diff --git a/assets/images/just-the-docs.png b/assets/images/just-the-docs.png
index a2a57a9..81c3306 100644
Binary files a/assets/images/just-the-docs.png and b/assets/images/just-the-docs.png differ
diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js
index e69de29..4d29799 100644
--- a/assets/js/just-the-docs.js
+++ b/assets/js/just-the-docs.js
@@ -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();
+});
diff --git a/assets/js/vendor/lunr.min.js b/assets/js/vendor/lunr.min.js
new file mode 100644
index 0000000..9960ccd
--- /dev/null
+++ b/assets/js/vendor/lunr.min.js
@@ -0,0 +1,6 @@
+/**
+ * lunr - http://lunrjs.com - A bit like Solr, but much smaller and not as bright - 1.0.0
+ * Copyright (C) 2017 Oliver Nightingale
+ * @license MIT
+ */
+!function(){var t=function(e){var n=new t.Index;return n.pipeline.add(t.trimmer,t.stopWordFilter,t.stemmer),e&&e.call(n,n),n};t.version="1.0.0",t.utils={},t.utils.warn=function(t){return function(e){t.console&&console.warn&&console.warn(e)}}(this),t.utils.asString=function(t){return void 0===t||null===t?"":t.toString()},t.EventEmitter=function(){this.events={}},t.EventEmitter.prototype.addListener=function(){var t=Array.prototype.slice.call(arguments),e=t.pop(),n=t;if("function"!=typeof e)throw new TypeError("last argument must be a function");n.forEach(function(t){this.hasHandler(t)||(this.events[t]=[]),this.events[t].push(e)},this)},t.EventEmitter.prototype.removeListener=function(t,e){if(this.hasHandler(t)){var n=this.events[t].indexOf(e);this.events[t].splice(n,1),this.events[t].length||delete this.events[t]}},t.EventEmitter.prototype.emit=function(t){if(this.hasHandler(t)){var e=Array.prototype.slice.call(arguments,1);this.events[t].forEach(function(t){t.apply(void 0,e)})}},t.EventEmitter.prototype.hasHandler=function(t){return t in this.events},t.tokenizer=function(e){return arguments.length&&null!=e&&void 0!=e?Array.isArray(e)?e.map(function(e){return t.utils.asString(e).toLowerCase()}):e.toString().trim().toLowerCase().split(t.tokenizer.separator):[]},t.tokenizer.separator=/[\s\-]+/,t.tokenizer.load=function(t){var e=this.registeredFunctions[t];if(!e)throw new Error("Cannot load un-registered function: "+t);return e},t.tokenizer.label="default",t.tokenizer.registeredFunctions={"default":t.tokenizer},t.tokenizer.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing tokenizer: "+n),e.label=n,this.registeredFunctions[n]=e},t.Pipeline=function(){this._stack=[]},t.Pipeline.registeredFunctions={},t.Pipeline.registerFunction=function(e,n){n in this.registeredFunctions&&t.utils.warn("Overwriting existing registered function: "+n),e.label=n,t.Pipeline.registeredFunctions[e.label]=e},t.Pipeline.warnIfFunctionNotRegistered=function(e){var n=e.label&&e.label in this.registeredFunctions;n||t.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",e)},t.Pipeline.load=function(e){var n=new t.Pipeline;return e.forEach(function(e){var i=t.Pipeline.registeredFunctions[e];if(!i)throw new Error("Cannot load un-registered function: "+e);n.add(i)}),n},t.Pipeline.prototype.add=function(){var e=Array.prototype.slice.call(arguments);e.forEach(function(e){t.Pipeline.warnIfFunctionNotRegistered(e),this._stack.push(e)},this)},t.Pipeline.prototype.after=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");i+=1,this._stack.splice(i,0,n)},t.Pipeline.prototype.before=function(e,n){t.Pipeline.warnIfFunctionNotRegistered(n);var i=this._stack.indexOf(e);if(-1==i)throw new Error("Cannot find existingFn");this._stack.splice(i,0,n)},t.Pipeline.prototype.remove=function(t){var e=this._stack.indexOf(t);-1!=e&&this._stack.splice(e,1)},t.Pipeline.prototype.run=function(t){for(var e=[],n=t.length,i=this._stack.length,r=0;n>r;r++){for(var o=t[r],s=0;i>s&&(o=this._stack[s](o,r,t),void 0!==o&&""!==o);s++);void 0!==o&&""!==o&&e.push(o)}return e},t.Pipeline.prototype.reset=function(){this._stack=[]},t.Pipeline.prototype.toJSON=function(){return this._stack.map(function(e){return t.Pipeline.warnIfFunctionNotRegistered(e),e.label})},t.Vector=function(){this._magnitude=null,this.list=void 0,this.length=0},t.Vector.Node=function(t,e,n){this.idx=t,this.val=e,this.next=n},t.Vector.prototype.insert=function(e,n){this._magnitude=void 0;var i=this.list;if(!i)return this.list=new t.Vector.Node(e,n,i),this.length++;if(en.idx?n=n.next:(i+=e.val*n.val,e=e.next,n=n.next);return i},t.Vector.prototype.similarity=function(t){return this.dot(t)/(this.magnitude()*t.magnitude())},t.SortedSet=function(){this.length=0,this.elements=[]},t.SortedSet.load=function(t){var e=new this;return e.elements=t,e.length=t.length,e},t.SortedSet.prototype.add=function(){var t,e;for(t=0;t1;){if(o===t)return r;t>o&&(e=r),o>t&&(n=r),i=n-e,r=e+Math.floor(i/2),o=this.elements[r]}return o===t?r:-1},t.SortedSet.prototype.locationFor=function(t){for(var e=0,n=this.elements.length,i=n-e,r=e+Math.floor(i/2),o=this.elements[r];i>1;)t>o&&(e=r),o>t&&(n=r),i=n-e,r=e+Math.floor(i/2),o=this.elements[r];return o>t?r:t>o?r+1:void 0},t.SortedSet.prototype.intersect=function(e){for(var n=new t.SortedSet,i=0,r=0,o=this.length,s=e.length,a=this.elements,h=e.elements;;){if(i>o-1||r>s-1)break;a[i]!==h[r]?a[i]h[r]&&r++:(n.add(a[i]),i++,r++)}return n},t.SortedSet.prototype.clone=function(){var e=new t.SortedSet;return e.elements=this.toArray(),e.length=e.elements.length,e},t.SortedSet.prototype.union=function(t){var e,n,i;this.length>=t.length?(e=this,n=t):(e=t,n=this),i=e.clone();for(var r=0,o=n.toArray();rp;p++)c[p]===a&&d++;h+=d/f*l.boost}}this.tokenStore.add(a,{ref:o,tf:h})}n&&this.eventEmitter.emit("add",e,this)},t.Index.prototype.remove=function(t,e){var n=t[this._ref],e=void 0===e?!0:e;if(this.documentStore.has(n)){var i=this.documentStore.get(n);this.documentStore.remove(n),i.forEach(function(t){this.tokenStore.remove(t,n)},this),e&&this.eventEmitter.emit("remove",t,this)}},t.Index.prototype.update=function(t,e){var e=void 0===e?!0:e;this.remove(t,!1),this.add(t,!1),e&&this.eventEmitter.emit("update",t,this)},t.Index.prototype.idf=function(t){var e="@"+t;if(Object.prototype.hasOwnProperty.call(this._idfCache,e))return this._idfCache[e];var n=this.tokenStore.count(t),i=1;return n>0&&(i=1+Math.log(this.documentStore.length/n)),this._idfCache[e]=i},t.Index.prototype.search=function(e){var n=this.pipeline.run(this.tokenizerFn(e)),i=new t.Vector,r=[],o=this._fields.reduce(function(t,e){return t+e.boost},0),s=n.some(function(t){return this.tokenStore.has(t)},this);if(!s)return[];n.forEach(function(e,n,s){var a=1/s.length*this._fields.length*o,h=this,u=this.tokenStore.expand(e).reduce(function(n,r){var o=h.corpusTokens.indexOf(r),s=h.idf(r),u=1,l=new t.SortedSet;if(r!==e){var c=Math.max(3,r.length-e.length);u=1/Math.log(c)}o>-1&&i.insert(o,a*s*u);for(var f=h.tokenStore.get(r),d=Object.keys(f),p=d.length,v=0;p>v;v++)l.add(f[d[v]].ref);return n.union(l)},new t.SortedSet);r.push(u)},this);var a=r.reduce(function(t,e){return t.intersect(e)});return a.map(function(t){return{ref:t,score:i.similarity(this.documentVector(t))}},this).sort(function(t,e){return e.score-t.score})},t.Index.prototype.documentVector=function(e){for(var n=this.documentStore.get(e),i=n.length,r=new t.Vector,o=0;i>o;o++){var s=n.elements[o],a=this.tokenStore.get(s)[e].tf,h=this.idf(s);r.insert(this.corpusTokens.indexOf(s),a*h)}return r},t.Index.prototype.toJSON=function(){return{version:t.version,fields:this._fields,ref:this._ref,tokenizer:this.tokenizerFn.label,documentStore:this.documentStore.toJSON(),tokenStore:this.tokenStore.toJSON(),corpusTokens:this.corpusTokens.toJSON(),pipeline:this.pipeline.toJSON()}},t.Index.prototype.use=function(t){var e=Array.prototype.slice.call(arguments,1);e.unshift(this),t.apply(this,e)},t.Store=function(){this.store={},this.length=0},t.Store.load=function(e){var n=new this;return n.length=e.length,n.store=Object.keys(e.store).reduce(function(n,i){return n[i]=t.SortedSet.load(e.store[i]),n},{}),n},t.Store.prototype.set=function(t,e){this.has(t)||this.length++,this.store[t]=e},t.Store.prototype.get=function(t){return this.store[t]},t.Store.prototype.has=function(t){return t in this.store},t.Store.prototype.remove=function(t){this.has(t)&&(delete this.store[t],this.length--)},t.Store.prototype.toJSON=function(){return{store:this.store,length:this.length}},t.stemmer=function(){var t={ational:"ate",tional:"tion",enci:"ence",anci:"ance",izer:"ize",bli:"ble",alli:"al",entli:"ent",eli:"e",ousli:"ous",ization:"ize",ation:"ate",ator:"ate",alism:"al",iveness:"ive",fulness:"ful",ousness:"ous",aliti:"al",iviti:"ive",biliti:"ble",logi:"log"},e={icate:"ic",ative:"",alize:"al",iciti:"ic",ical:"ic",ful:"",ness:""},n="[^aeiou]",i="[aeiouy]",r=n+"[^aeiouy]*",o=i+"[aeiou]*",s="^("+r+")?"+o+r,a="^("+r+")?"+o+r+"("+o+")?$",h="^("+r+")?"+o+r+o+r,u="^("+r+")?"+i,l=new RegExp(s),c=new RegExp(h),f=new RegExp(a),d=new RegExp(u),p=/^(.+?)(ss|i)es$/,v=/^(.+?)([^s])s$/,g=/^(.+?)eed$/,m=/^(.+?)(ed|ing)$/,y=/.$/,S=/(at|bl|iz)$/,w=new RegExp("([^aeiouylsz])\\1$"),k=new RegExp("^"+r+i+"[^aeiouwxy]$"),x=/^(.+?[^aeiou])y$/,b=/^(.+?)(ational|tional|enci|anci|izer|bli|alli|entli|eli|ousli|ization|ation|ator|alism|iveness|fulness|ousness|aliti|iviti|biliti|logi)$/,E=/^(.+?)(icate|ative|alize|iciti|ical|ful|ness)$/,F=/^(.+?)(al|ance|ence|er|ic|able|ible|ant|ement|ment|ent|ou|ism|ate|iti|ous|ive|ize)$/,_=/^(.+?)(s|t)(ion)$/,z=/^(.+?)e$/,O=/ll$/,P=new RegExp("^"+r+i+"[^aeiouwxy]$"),T=function(n){var i,r,o,s,a,h,u;if(n.length<3)return n;if(o=n.substr(0,1),"y"==o&&(n=o.toUpperCase()+n.substr(1)),s=p,a=v,s.test(n)?n=n.replace(s,"$1$2"):a.test(n)&&(n=n.replace(a,"$1$2")),s=g,a=m,s.test(n)){var T=s.exec(n);s=l,s.test(T[1])&&(s=y,n=n.replace(s,""))}else if(a.test(n)){var T=a.exec(n);i=T[1],a=d,a.test(i)&&(n=i,a=S,h=w,u=k,a.test(n)?n+="e":h.test(n)?(s=y,n=n.replace(s,"")):u.test(n)&&(n+="e"))}if(s=x,s.test(n)){var T=s.exec(n);i=T[1],n=i+"i"}if(s=b,s.test(n)){var T=s.exec(n);i=T[1],r=T[2],s=l,s.test(i)&&(n=i+t[r])}if(s=E,s.test(n)){var T=s.exec(n);i=T[1],r=T[2],s=l,s.test(i)&&(n=i+e[r])}if(s=F,a=_,s.test(n)){var T=s.exec(n);i=T[1],s=c,s.test(i)&&(n=i)}else if(a.test(n)){var T=a.exec(n);i=T[1]+T[2],a=c,a.test(i)&&(n=i)}if(s=z,s.test(n)){var T=s.exec(n);i=T[1],s=c,a=f,h=P,(s.test(i)||a.test(i)&&!h.test(i))&&(n=i)}return s=O,a=c,s.test(n)&&a.test(n)&&(s=y,n=n.replace(s,"")),"y"==o&&(n=o.toLowerCase()+n.substr(1)),n};return T}(),t.Pipeline.registerFunction(t.stemmer,"stemmer"),t.generateStopWordFilter=function(t){var e=t.reduce(function(t,e){return t[e]=e,t},{});return function(t){return t&&e[t]!==t?t:void 0}},t.stopWordFilter=t.generateStopWordFilter(["a","able","about","across","after","all","almost","also","am","among","an","and","any","are","as","at","be","because","been","but","by","can","cannot","could","dear","did","do","does","either","else","ever","every","for","from","get","got","had","has","have","he","her","hers","him","his","how","however","i","if","in","into","is","it","its","just","least","let","like","likely","may","me","might","most","must","my","neither","no","nor","not","of","off","often","on","only","or","other","our","own","rather","said","say","says","she","should","since","so","some","than","that","the","their","them","then","there","these","they","this","tis","to","too","twas","us","wants","was","we","were","what","when","where","which","while","who","whom","why","will","with","would","yet","you","your"]),t.Pipeline.registerFunction(t.stopWordFilter,"stopWordFilter"),t.trimmer=function(t){return t.replace(/^\W+/,"").replace(/\W+$/,"")},t.Pipeline.registerFunction(t.trimmer,"trimmer"),t.TokenStore=function(){this.root={docs:{}},this.length=0},t.TokenStore.load=function(t){var e=new this;return e.root=t.root,e.length=t.length,e},t.TokenStore.prototype.add=function(t,e,n){var n=n||this.root,i=t.charAt(0),r=t.slice(1);return i in n||(n[i]={docs:{}}),0===r.length?(n[i].docs[e.ref]=e,void(this.length+=1)):this.add(r,e,n[i])},t.TokenStore.prototype.has=function(t){if(!t)return!1;for(var e=this.root,n=0;n
+
+[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 }
+
+
+```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:
+
+
+
+
+
+
+
+```html
+
+```
+
+---
+
+## 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:
+
+
+
+
+[Big ass button](http://example.com/){: .btn }
+
+
+
+[Tiny ass button](http://example.com/){: .btn }
+
+
+
+```markdown
+
+[Link button](http://example.com/){: .btn }
+
+
+
+[Tiny ass button](http://example.com/){: .btn }
+
+```
+
+### 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.
+
+
+
+[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 }
+
+```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 }
+```
diff --git a/docs/ui-components/code.md b/docs/ui-components/code.md
index daf5ec4..bc1baf2 100644
--- a/docs/ui-components/code.md
+++ b/docs/ui-components/code.md
@@ -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.
+
+
+
+Lorem ipsum dolor sit amet, `` adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
+
+
+```markdown
+Lorem ipsum dolor sit amet, `
+```js
+// Javascript code with syntax highlighting.
+var fun = function lang(l) {
+ dateformat.i18n = require('./lang/' + l)
+ return true;
+}
+```
+
+{% 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...
+
+
+
+
+{% highlight markdown %}
+
+
+[Link button](http://example.com/){: .btn }
+
+
+```markdown
+[Link button](http://example.com/){: .btn }
+```
+
+
+
+[Link button](http://example.com/){: .btn }
+
+
+```markdown
+[Link button](http://example.com/){: .btn }
+```
+{% endhighlight %}
diff --git a/docs/ui-components/tables.md b/docs/ui-components/tables.md
new file mode 100644
index 0000000..a26082d
--- /dev/null
+++ b/docs/ui-components/tables.md
@@ -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.
+
+
+
+| 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 |
+
+
+```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 |
+```
diff --git a/docs/ui-components/typography.md b/docs/ui-components/typography.md
index 8fa122f..5b434d5 100644
--- a/docs/ui-components/typography.md
+++ b/docs/ui-components/typography.md
@@ -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 `` 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:
+
+
+Heading 1
+Heading 2
+Heading 3
+Heading 4
+Heading 5
+Heading 6
+
+```markdown
+# Heading 1
+## Heading 2
+### Heading 3
+#### Heading 4
+##### Heading 5
+###### Heading 6
+```
+
+---
+
+## Body text
+
+Default body text is rendered like this:
+
+
+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.
+
+```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
+
+
+Text can be **bold**, _italic_, or ~~strikethrough~~.
+
+[Link to another page](another-page).
+
+```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 }
diff --git a/docs/ui-components/ui-components.md b/docs/ui-components/ui-components.md
index 49e6812..96088a8 100644
--- a/docs/ui-components/ui-components.md
+++ b/docs/ui-components/ui-components.md
@@ -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 }
diff --git a/docs/utilities.md b/docs/utilities.md
new file mode 100644
index 0000000..384820a
--- /dev/null
+++ b/docs/utilities.md
@@ -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 |
+
+
+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 }
+
+```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.
+
+
+Font weight 300
+{: .fw-300 }
+Font weight 400
+{: .fw-400 }
+Font weight 500
+{: .fw-500 }
+Font weight 700
+{: .fw-700 }
+
+```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) |
+
+
+
+
+No Line height
+No Line height
+{: .lh-0 }
+
+Tight line height
+Tight line height
+{: .lh-tight }
+
+Default line height
+Default line height
+{: .fh-default }
+
+```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
diff --git a/index.md b/index.md
index c978ace..703b0c9 100644
--- a/index.md
+++ b/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 }
+
+
+ 
+
+
+ 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 }
+
+
---
@@ -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
diff --git a/search-data.json b/search-data.json
index a845151..0c01c80 100644
--- a/search-data.json
+++ b/search-data.json
@@ -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 %}
+}