diff --git a/_config.yml b/_config.yml index b87bd8e..79084a8 100644 --- a/_config.yml +++ b/_config.yml @@ -13,7 +13,7 @@ # you will see them accessed via {{ site.title }}, {{ site.github_repo }}, and so on. # You can create any custom variable you would like, and they will be accessible # in the templates via {{ site.myvariable }}. -title: Just the docs +title: Just the Docs description: A Jekyll theme for documentation # baseurl: "" # the subpath of your site, e.g. /blog # url: "" # the base hostname & protocol for your site, e.g. http://example.com diff --git a/_includes/nav.html b/_includes/nav.html index 8743574..49df693 100644 --- a/_includes/nav.html +++ b/_includes/nav.html @@ -1,12 +1,12 @@ + {% endunless %} +
+ {{ content }} + + {% if page.has_children == true %} +
+

Table of contents

+ {% assign children_list = site.pages | sort:"nav_order" %} +
    + {% for child in children_list %} + {% if child.parent == page.title and child.title != page.title %} +
  1. + {{ child.title }} +
    2. + {% endif %} + {% endfor %} +
+ {% endif %} +
- - diff --git a/_sass/base.scss b/_sass/base.scss index 5566b5c..6fdf058 100644 --- a/_sass/base.scss +++ b/_sass/base.scss @@ -1,7 +1,6 @@ // // Base element style overrides // - // stylelint-disable selector-no-type * { @@ -47,18 +46,17 @@ h3, h4, h5, h6 { - font-weight: 500; - color: $body-heading-color; - line-height: $body-heading-line-height; - margin-bottom: .8em; margin-top: 1.2em; + margin-bottom: 0.8em; + font-weight: 500; + line-height: $body-heading-line-height; + color: $body-heading-color; } p { margin-bottom: 1em; } - a { color: $link-color; text-decoration: none; @@ -78,11 +76,10 @@ a:not([class]) { } } -pre, code { - font-size: 90%; - line-height: $body-line-height; font-family: $mono-font-family; + font-size: 12px; + line-height: $body-line-height; } figure { diff --git a/_sass/buttons.scss b/_sass/buttons.scss index 559d1db..586b805 100644 --- a/_sass/buttons.scss +++ b/_sass/buttons.scss @@ -1,6 +1,7 @@ // // Buttons and things that look like buttons // +// stylelint-disable color-named .btn { display: inline-block; @@ -73,18 +74,18 @@ } .btn-outline { - box-shadow: inset 0 0 0 2px $grey-lt-300; - background: transparent; color: $blue-100; + background: transparent; + box-shadow: inset 0 0 0 2px $grey-lt-300; &:hover, &:active, &.zeroclipboard-is-hover, &.zeroclipboard-is-active { - box-shadow: inset 0 0 0 3px $grey-lt-300; + color: $grey-dk-100; text-decoration: none; background-color: transparent; - color: $grey-dk-100; + box-shadow: inset 0 0 0 3px $grey-lt-300; } &:focus { diff --git a/_sass/code.scss b/_sass/code.scss index bb534f6..7d2b68a 100644 --- a/_sass/code.scss +++ b/_sass/code.scss @@ -1,121 +1,121 @@ // // Code and syntax highlighting // +// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type code { - background-color: $grey-lt-000; padding: 0.2em 0.15em; + font-weight: 400; + background-color: $grey-lt-000; border: $border $border-color; border-radius: $border-radius; - font-weight: 400; } .highlight { - background-color: $grey-lt-000; padding: $sp-3; margin-bottom: 0; + background-color: $grey-lt-000; code { - border: 0; padding: 0; + border: 0; } } .highlighter-rouge { margin-bottom: $sp-3; - border-radius: $border-radius; overflow: hidden; + border-radius: $border-radius; } -.highlight .c { color: #586E75 } /* Comment */ -.highlight .err { color: #93A1A1 } /* Error */ -.highlight .g { color: #93A1A1 } /* Generic */ -.highlight .k { color: #859900 } /* Keyword */ -.highlight .l { color: #93A1A1 } /* Literal */ -.highlight .n { color: #93A1A1 } /* Name */ -.highlight .o { color: #859900 } /* Operator */ -.highlight .x { color: #CB4B16 } /* Other */ -.highlight .p { color: #93A1A1 } /* Punctuation */ -.highlight .cm { color: #586E75 } /* Comment.Multiline */ -.highlight .cp { color: #859900 } /* Comment.Preproc */ -.highlight .c1 { color: #586E75 } /* Comment.Single */ -.highlight .cs { color: #859900 } /* Comment.Special */ -.highlight .gd { color: #2AA198 } /* Generic.Deleted */ -.highlight .ge { color: #93A1A1; font-style: italic } /* Generic.Emph */ -.highlight .gr { color: #DC322F } /* Generic.Error */ -.highlight .gh { color: #CB4B16 } /* Generic.Heading */ -.highlight .gi { color: #859900 } /* Generic.Inserted */ -.highlight .go { color: #93A1A1 } /* Generic.Output */ -.highlight .gp { color: #93A1A1 } /* Generic.Prompt */ -.highlight .gs { color: #93A1A1; font-weight: bold } /* Generic.Strong */ -.highlight .gu { color: #CB4B16 } /* Generic.Subheading */ -.highlight .gt { color: #93A1A1 } /* Generic.Traceback */ -.highlight .kc { color: #CB4B16 } /* Keyword.Constant */ -.highlight .kd { color: #268BD2 } /* Keyword.Declaration */ -.highlight .kn { color: #859900 } /* Keyword.Namespace */ -.highlight .kp { color: #859900 } /* Keyword.Pseudo */ -.highlight .kr { color: #268BD2 } /* Keyword.Reserved */ -.highlight .kt { color: #DC322F } /* Keyword.Type */ -.highlight .ld { color: #93A1A1 } /* Literal.Date */ -.highlight .m { color: #2AA198 } /* Literal.Number */ -.highlight .s { color: #2AA198 } /* Literal.String */ -.highlight .na { color: #93A1A1 } /* Name.Attribute */ -.highlight .nb { color: #B58900 } /* Name.Builtin */ -.highlight .nc { color: #268BD2 } /* Name.Class */ -.highlight .no { color: #CB4B16 } /* Name.Constant */ -.highlight .nd { color: #268BD2 } /* Name.Decorator */ -.highlight .ni { color: #CB4B16 } /* Name.Entity */ -.highlight .ne { color: #CB4B16 } /* Name.Exception */ -.highlight .nf { color: #268BD2 } /* Name.Function */ -.highlight .nl { color: #93A1A1 } /* Name.Label */ -.highlight .nn { color: #93A1A1 } /* Name.Namespace */ -.highlight .nx { color: #555 } /* Name.Other */ -.highlight .py { color: #93A1A1 } /* Name.Property */ -.highlight .nt { color: #268BD2 } /* Name.Tag */ -.highlight .nv { color: #268BD2 } /* Name.Variable */ -.highlight .ow { color: #859900 } /* Operator.Word */ -.highlight .w { color: #93A1A1 } /* Text.Whitespace */ -.highlight .mf { color: #2AA198 } /* Literal.Number.Float */ -.highlight .mh { color: #2AA198 } /* Literal.Number.Hex */ -.highlight .mi { color: #2AA198 } /* Literal.Number.Integer */ -.highlight .mo { color: #2AA198 } /* Literal.Number.Oct */ -.highlight .sb { color: #586E75 } /* Literal.String.Backtick */ -.highlight .sc { color: #2AA198 } /* Literal.String.Char */ -.highlight .sd { color: #93A1A1 } /* Literal.String.Doc */ -.highlight .s2 { color: #2AA198 } /* Literal.String.Double */ -.highlight .se { color: #CB4B16 } /* Literal.String.Escape */ -.highlight .sh { color: #93A1A1 } /* Literal.String.Heredoc */ -.highlight .si { color: #2AA198 } /* Literal.String.Interpol */ -.highlight .sx { color: #2AA198 } /* Literal.String.Other */ -.highlight .sr { color: #DC322F } /* Literal.String.Regex */ -.highlight .s1 { color: #2AA198 } /* Literal.String.Single */ -.highlight .ss { color: #2AA198 } /* Literal.String.Symbol */ -.highlight .bp { color: #268BD2 } /* Name.Builtin.Pseudo */ -.highlight .vc { color: #268BD2 } /* Name.Variable.Class */ -.highlight .vg { color: #268BD2 } /* Name.Variable.Global */ -.highlight .vi { color: #268BD2 } /* Name.Variable.Instance */ -.highlight .il { color: #2AA198 } /* Literal.Number.Integer.Long */ +.highlight .c { color: #586e75; } // comment // +.highlight .err { color: #93a1a1; } // error // +.highlight .g { color: #93a1a1; } // generic // +.highlight .k { color: #859900; } // keyword // +.highlight .l { color: #93a1a1; } // literal // +.highlight .n { color: #93a1a1; } // name // +.highlight .o { color: #859900; } // operator // +.highlight .x { color: #cb4b16; } // other // +.highlight .p { color: #93a1a1; } // punctuation // +.highlight .cm { color: #586e75; } // comment.multiline // +.highlight .cp { color: #859900; } // comment.preproc // +.highlight .c1 { color: #586e75; } // comment.single // +.highlight .cs { color: #859900; } // comment.special // +.highlight .gd { color: #2aa198; } // generic.deleted // +.highlight .ge { font-style: italic; color: #93a1a1; } // generic.emph // +.highlight .gr { color: #dc322f; } // generic.error // +.highlight .gh { color: #cb4b16; } // generic.heading // +.highlight .gi { color: #859900; } // generic.inserted // +.highlight .go { color: #93a1a1; } // generic.output // +.highlight .gp { color: #93a1a1; } // generic.prompt // +.highlight .gs { font-weight: bold; color: #93a1a1; } // generic.strong // +.highlight .gu { color: #cb4b16; } // generic.subheading // +.highlight .gt { color: #93a1a1; } // generic.traceback // +.highlight .kc { color: #cb4b16; } // keyword.constant // +.highlight .kd { color: #268bd2; } // keyword.declaration // +.highlight .kn { color: #859900; } // keyword.namespace // +.highlight .kp { color: #859900; } // keyword.pseudo // +.highlight .kr { color: #268bd2; } // keyword.reserved // +.highlight .kt { color: #dc322f; } // keyword.type // +.highlight .ld { color: #93a1a1; } // literal.date // +.highlight .m { color: #2aa198; } // literal.number // +.highlight .s { color: #2aa198; } // literal.string // +.highlight .na { color: #93a1a1; } // name.attribute // +.highlight .nb { color: #b58900; } // name.builtin // +.highlight .nc { color: #268bd2; } // name.class // +.highlight .no { color: #cb4b16; } // name.constant // +.highlight .nd { color: #268bd2; } // name.decorator // +.highlight .ni { color: #cb4b16; } // name.entity // +.highlight .ne { color: #cb4b16; } // name.exception // +.highlight .nf { color: #268bd2; } // name.function // +.highlight .nl { color: #93a1a1; } // name.label // +.highlight .nn { color: #93a1a1; } // name.namespace // +.highlight .nx { color: #555; } // name.other // +.highlight .py { color: #93a1a1; } // name.property // +.highlight .nt { color: #268bd2; } // name.tag // +.highlight .nv { color: #268bd2; } // name.variable // +.highlight .ow { color: #859900; } // operator.word // +.highlight .w { color: #93a1a1; } // text.whitespace // +.highlight .mf { color: #2aa198; } // literal.number.float // +.highlight .mh { color: #2aa198; } // literal.number.hex // +.highlight .mi { color: #2aa198; } // literal.number.integer // +.highlight .mo { color: #2aa198; } // literal.number.oct // +.highlight .sb { color: #586e75; } // literal.string.backtick // +.highlight .sc { color: #2aa198; } // literal.string.char // +.highlight .sd { color: #93a1a1; } // literal.string.doc // +.highlight .s2 { color: #2aa198; } // literal.string.double // +.highlight .se { color: #cb4b16; } // literal.string.escape // +.highlight .sh { color: #93a1a1; } // literal.string.heredoc // +.highlight .si { color: #2aa198; } // literal.string.interpol // +.highlight .sx { color: #2aa198; } // literal.string.other // +.highlight .sr { color: #dc322f; } // literal.string.regex // +.highlight .s1 { color: #2aa198; } // literal.string.single // +.highlight .ss { color: #2aa198; } // literal.string.symbol // +.highlight .bp { color: #268bd2; } // name.builtin.pseudo // +.highlight .vc { color: #268bd2; } // name.variable.class // +.highlight .vg { color: #268bd2; } // name.variable.global // +.highlight .vi { color: #268bd2; } // name.variable.instance // +.highlight .il { color: #2aa198; } // literal.number.integer.long // // // Code examples (rendered) // .code-example { - border: 1px solid $border-color; padding: $sp-3; - border-radius: $border-radius; margin-bottom: $sp-3; overflow: scroll; + border: 1px solid $border-color; + border-radius: $border-radius; + .highlighter-rouge, + figure.highlight { position: relative; - border-left: 1px solid $border-color; + margin-top: -$sp-4; border-right: 1px solid $border-color; border-bottom: 1px solid $border-color; + border-left: 1px solid $border-color; border-top-left-radius: 0; border-top-right-radius: 0; - margin-top: -$sp-4; } - } diff --git a/_sass/content.scss b/_sass/content.scss index e40ad33..4a2fb32 100644 --- a/_sass/content.scss +++ b/_sass/content.scss @@ -1,8 +1,7 @@ // // Styles for rendered markdown in the .main-content container // - -// stylelint-disable selector-no-type +// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors .page-content { ul, @@ -19,13 +18,17 @@ position: relative; &::before { - counter-increment: step-counter; - content: counter(step-counter); - left: -1.5em; - top: 0.11em; position: absolute; + top: 0.2em; + left: -1.5em; color: $grey-dk-000; + content: counter(step-counter); + counter-increment: step-counter; @include fs-3; + + @include mq(sm) { + top: 0.11em; + } } ol { @@ -33,8 +36,8 @@ li { &::before { - counter-increment: sub-counter; content: counter(sub-counter, lower-alpha); + counter-increment: sub-counter; } } } diff --git a/_sass/custom/custom.scss b/_sass/custom/custom.scss new file mode 100644 index 0000000..51399f2 --- /dev/null +++ b/_sass/custom/custom.scss @@ -0,0 +1,112 @@ +// // +// // Typography +// // +// +// $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif; +// $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace; +// $root-font-size: 16px; // Base font-size for rems +// $body-line-height: 1.4; +// $body-heading-line-height: 1.15; +// +// // +// // Colors +// // +// +// $white: #fff; +// +// $grey-dk-000: #959396; +// $grey-dk-100: #5c5962; +// $grey-dk-200: #44434d; +// $grey-dk-300: #27262b; +// +// $grey-lt-000: #f5f6fa; +// $grey-lt-100: #eeebee; +// $grey-lt-200: #ecebed; +// $grey-lt-300: #e6e1e8; +// +// $purple-000: #7253ed; +// $purple-100: #5e41d0; +// $purple-200: #4e26af; +// $purple-300: #381885; +// +// $blue-000: #2c84fa; +// $blue-100: #2869e6; +// $blue-200: #264caf; +// $blue-300: #183385; +// +// $green-000: #41d693; +// $green-100: #11b584; +// $green-200: #009c7b; +// $green-300: #026e57; +// +// $body-text-color: $grey-dk-100; +// $body-heading-color: $grey-dk-300; +// $link-color: $purple-000; +// +// // +// // Media queries in pixels +// // +// +// $media-queries: ( +// xs: 320px, +// sm: 500px, +// md: 740px, +// lg: 1120px, +// xl: 1400px +// ); +// +// // +// // Spacing +// // +// +// $spacing-unit: 1rem; // 1rem == 16px +// +// $spacers: ( +// sp-0: 0, +// sp-1: $spacing-unit * 0.25, +// sp-2: $spacing-unit * 0.5, +// sp-3: $spacing-unit * 0.75, +// sp-4: $spacing-unit, +// sp-5: $spacing-unit * 1.5, +// sp-6: $spacing-unit * 2, +// sp-7: $spacing-unit * 2.5, +// sp-8: $spacing-unit * 3, +// sp-9: $spacing-unit * 3.5, +// sp-10: $spacing-unit * 4 +// ); +// +// $sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px +// $sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px +// $sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px +// $sp-4: map-get($spacers, sp-4); // 1 rem == 16px +// $sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px +// $sp-6: map-get($spacers, sp-6); // 2 rem == 32px +// $sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px +// $sp-8: map-get($spacers, sp-8); // 3 rem == 48px +// $sp-9: map-get($spacers, sp-9); // 4 rem == 48px +// $sp-10: map-get($spacers, sp-10); // 4.5 rem == 48px +// +// // +// // Borders +// // +// +// $border: 1px solid; +// $border-radius: 4px; +// $border-color: $grey-lt-100; +// +// // +// // Grid system +// // +// +// $gutter-spacing: $sp-6; +// $gutter-spacing-sm: $sp-4; +// $nav-width: 232px; +// $content-width: 800px; +// +// $media-queries: ( +// xs: 320px, +// sm: 500px, +// md: 740px, +// lg: 800px, +// xl: 1316px +// ); diff --git a/_sass/labels.scss b/_sass/labels.scss new file mode 100644 index 0000000..3e2d2dd --- /dev/null +++ b/_sass/labels.scss @@ -0,0 +1,35 @@ +// +// Labels (not the form kind) +// + +.label, +.label-blue { + display: inline-block; + padding-top: 0.16em; + padding-right: 0.42em; + padding-bottom: 0.16em; + padding-left: 0.42em; + margin-right: $sp-1; + margin-left: $sp-1; + color: $white; + vertical-align: middle; + background-color: $blue-100; + @include fs-2; +} + +.label-green { + background-color: $green-200; +} + +.label-purple { + background-color: $purple-100; +} + +.label-red { + background-color: $red-200; +} + +.label-yellow { + color: $grey-dk-200; + background-color: $yellow-200; +} diff --git a/_sass/layout.scss b/_sass/layout.scss index 6dffaba..8c07ea0 100644 --- a/_sass/layout.scss +++ b/_sass/layout.scss @@ -4,10 +4,10 @@ .page-wrap { @include mq(md) { - display: flex; position: absolute; top: 0; left: 0; + display: flex; width: 100%; height: 100%; overflow-x: hidden; @@ -16,22 +16,21 @@ } .side-bar { + z-index: 100; padding-top: $gutter-spacing-sm; padding-bottom: $gutter-spacing-sm; background-color: $grey-lt-000; - z-index: 100; @include mq(md) { - padding-top: $gutter-spacing * 2; - border-right: $border $border-color; - padding-bottom: 0; - display: flex; - flex-direction: column; position: absolute; - align-items: flex-end; + display: flex; width: $nav-width + 16px; height: 100%; - min-height: 400px; + padding-top: $gutter-spacing * 2; + padding-bottom: 0; + flex-direction: column; + border-right: $border $border-color; + align-items: flex-end; } @include mq(lg) { @@ -43,33 +42,34 @@ .main-content-wrap { @include mq(md) { position: absolute; + top: 0; + left: 0; width: 100%; height: 100%; min-height: 600px; - top: 0; - left: 0; -webkit-overflow-scrolling: touch; overflow-x: hidden; overflow-y: scroll; } } -.main-content { +.main-content, +.search { padding-top: $gutter-spacing-sm; @include container; @include mq(md) { position: relative; - margin-left: $nav-width; max-width: $content-width; padding-top: $gutter-spacing; - padding-left: $gutter-spacing * 1.5; padding-bottom: $gutter-spacing; + padding-left: $gutter-spacing * 1.5; + margin-left: $nav-width; } @include mq(lg) { - margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}); padding-left: $gutter-spacing; + margin-left: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}); } } @@ -88,22 +88,15 @@ .navigation { @include mq(md) { position: absolute; - padding-top: $sp-8; top: 0; right: 0; height: 100%; + padding-top: $sp-8; } } .site-footer { - @include mq(md) { - display: block; - position: absolute; - right: 0; - bottom: $sp-8; - z-index: 100; - - @include container; + margin-top: $sp-10; } } diff --git a/_sass/navigation.scss b/_sass/navigation.scss index 4d226c1..8a16e9c 100644 --- a/_sass/navigation.scss +++ b/_sass/navigation.scss @@ -7,6 +7,7 @@ flex-grow: 1; flex-shrink: 1; flex-basis: auto; + background-color: $grey-lt-000; @include mq(md) { position: absolute; @@ -17,9 +18,9 @@ } .navigation-list { - list-style: none; padding: 0; margin-top: $sp-4; + list-style: none; @include mq(md) { margin-top: $sp-8; @@ -27,10 +28,8 @@ } .navigation-list-child-list { - list-style: none; padding-left: $sp-3; - margin-top: $sp-2; - margin-bottom: $sp-2; + list-style: none; .navigation-list-link { color: $grey-dk-100; @@ -39,9 +38,10 @@ .navigation-list-item { &::before { position: absolute; - content: "- "; + margin-top: 0.3em; margin-left: -0.8em; color: $grey-dk-000; + content: "- "; } &.active { @@ -54,15 +54,18 @@ .navigation-list-item { @include fs-3; + margin: 0; } .navigation-list-link { display: block; + padding-top: $sp-1; + padding-bottom: $sp-1; &.active { + font-weight: 600; color: $grey-dk-200; text-decoration: none; - font-weight: 600; } } @@ -85,6 +88,7 @@ @include mq(md) { display: block; + overflow-y: auto; } } @@ -100,10 +104,14 @@ // Breadcrumb nav .breadcrumb-nav-list { - list-style: none; padding-left: 0; margin-top: $sp-3; - margin-bottom: $sp-5; + margin-bottom: $sp-3; + list-style: none; + + @include mq(md) { + margin-bottom: $sp-5; + } } .breadcrumb-nav-list-item { @@ -116,10 +124,10 @@ &::after { display: inline-block; - margin-left: $sp-2; margin-right: $sp-2; - content: "/"; + margin-left: $sp-2; color: $grey-dk-000; + content: "/"; } &:last-child { @@ -128,25 +136,3 @@ } } } - - // Table of contents - -#markdown-toc { - counter-reset: toc-counter; - li { - &::before { - counter-increment: toc-counter; - content: counter(toc-counter, upper-roman); - } - ol { - counter-reset: toc-sub-counter; - } - - li { - &::before { - counter-increment: toc-sub-counter; - content: counter(toc-sub-counter, lower-roman); - } - } - } -} diff --git a/_sass/search.scss b/_sass/search.scss index 10c3786..bfbf3e8 100644 --- a/_sass/search.scss +++ b/_sass/search.scss @@ -1,6 +1,92 @@ -.search-results-wrap { - position: absolute; - background: $white; - width: 400px; - z-index: 100; +// +// Search input and autocomplete +// + +.search { + display: none; + + @include mq(md) { + position: relative; + z-index: 99; + display: flex; + justify-content: flex-end; + padding-top: 0; + padding-bottom: 0; + } +} + +.search-results-wrap { + display: none; + + &.active { + position: absolute; + top: $sp-10; + right: $gutter-spacing; + z-index: 100; + display: block; + width: 200px; + background: $white; + box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05); + } +} + +.search-input-wrap { + position: absolute; + top: $sp-7; + right: $gutter-spacing; + z-index: 99; + display: flex; + background-color: $white; +} + +.search-input { + width: 200px; + padding-top: $sp-1; + padding-bottom: $sp-1; + border-top: 0; + border-right: 0; + border-bottom: $border $border-color; + border-left: 0; + order: 2; + + &:focus { + border-bottom: $border $grey-lt-300; + outline: 0; + box-shadow: 0; + + + .search-icon { + fill: $purple-000; + } + } +} + +.search-icon { + align-self: center; + margin-right: $sp-2; + fill: $grey-dk-000; + order: 1; +} + +.search-results-list { + padding-left: 0; + margin-bottom: $sp-1; + list-style: none; + @include fs-3; +} + +.search-results-list-item { + padding: 0; + margin: 0; +} + +.search-results-link { + display: block; + padding-top: $sp-1; + padding-right: $sp-3; + padding-bottom: $sp-1; + padding-left: $sp-3; + + &:hover { + background-color: $grey-lt-000; + } } diff --git a/_sass/support/_variables.scss b/_sass/support/_variables.scss index 96abff6..59cb59e 100644 --- a/_sass/support/_variables.scss +++ b/_sass/support/_variables.scss @@ -5,8 +5,8 @@ $body-font-family: -apple-system, BlinkMacSystemFont, "helvetica neue", helvetica, roboto, noto, "segoe ui", arial, sans-serif !default; $mono-font-family: "SFMono-Regular", Menlo, Consolas, Monospace !default; $root-font-size: 16px !default; // Base font-size for rems -$body-line-height: 1.4; -$body-heading-line-height: 1.15; +$body-line-height: 1.4 !default; +$body-heading-line-height: 1.15 !default !default; // // Colors @@ -39,6 +39,16 @@ $green-100: #11b584 !default; $green-200: #009c7b !default; $green-300: #026e57 !default; +$yellow-000: #ffeb82 !default; +$yellow-100: #fadf50 !default; +$yellow-200: #f7d12e !default; +$yellow-300: #e7af06 !default; + +$red-000: #f77e7e !default; +$red-100: #f96e65 !default; +$red-200: #e94c4c !default; +$red-300: #dd2e2e !default; + $body-text-color: $grey-dk-100 !default; $body-heading-color: $grey-dk-300 !default; $link-color: $purple-000 !default; @@ -70,17 +80,21 @@ $spacers: ( sp-5: $spacing-unit * 1.5, sp-6: $spacing-unit * 2, sp-7: $spacing-unit * 2.5, - sp-8: $spacing-unit * 3 + sp-8: $spacing-unit * 3, + sp-9: $spacing-unit * 3.5, + sp-10: $spacing-unit * 4 ) !default; -$sp-1: map-get($spacers, sp-1); // 0.25 rem == 4px -$sp-2: map-get($spacers, sp-2); // 0.5 rem == 8px -$sp-3: map-get($spacers, sp-3); // 0.75 rem == 12px -$sp-4: map-get($spacers, sp-4); // 1 rem == 16px -$sp-5: map-get($spacers, sp-5); // 1.5 rem == 24px -$sp-6: map-get($spacers, sp-6); // 2 rem == 32px -$sp-7: map-get($spacers, sp-7); // 2.5 rem == 40px -$sp-8: map-get($spacers, sp-8); // 3 rem == 48px +$sp-1: map-get($spacers, sp-1) !default; // 0.25 rem == 4px +$sp-2: map-get($spacers, sp-2) !default; // 0.5 rem == 8px +$sp-3: map-get($spacers, sp-3) !default; // 0.75 rem == 12px +$sp-4: map-get($spacers, sp-4) !default; // 1 rem == 16px +$sp-5: map-get($spacers, sp-5) !default; // 1.5 rem == 24px +$sp-6: map-get($spacers, sp-6) !default; // 2 rem == 32px +$sp-7: map-get($spacers, sp-7) !default; // 2.5 rem == 40px +$sp-8: map-get($spacers, sp-8) !default; // 3 rem == 48px +$sp-9: map-get($spacers, sp-9) !default; // 4 rem == 48px +$sp-10: map-get($spacers, sp-10) !default; // 4.5 rem == 48px // // Borders diff --git a/_sass/tables.scss b/_sass/tables.scss index e107151..5728c88 100644 --- a/_sass/tables.scss +++ b/_sass/tables.scss @@ -1,13 +1,14 @@ // // Tables // +// stylelint-disable max-nesting-depth, selector-no-type table { display: block; width: 100%; max-width: 100%; - overflow-x: auto; margin-bottom: $sp-5; + overflow-x: auto; border-collapse: separate; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.07), 0 4px 14px rgba(0, 0, 0, 0.05); @@ -19,20 +20,21 @@ table { th, td { @include fs-3; + min-width: 120px; padding-top: $sp-2; - padding-left: $sp-3; - padding-bottom: $sp-2; padding-right: $sp-3; + padding-bottom: $sp-2; + padding-left: $sp-3; border-bottom: $border $grey-lt-000; border-left: $border $border-color; - min-width: 120px; &:first-of-type { border-left: 0; } } -thead, tbody:first-child { +thead, +tbody:first-child { tr { &:first-of-type { th, @@ -40,6 +42,7 @@ thead, tbody:first-child { &:first-of-type { border-top-left-radius: $border-radius; } + &:last-of-type { border-top-right-radius: $border-radius; } @@ -58,6 +61,7 @@ tbody { &:first-of-type { border-bottom-left-radius: $border-radius; } + &:last-of-type { border-bottom-right-radius: $border-radius; } diff --git a/_sass/typography.scss b/_sass/typography.scss index 1b2cb28..3528b04 100644 --- a/_sass/typography.scss +++ b/_sass/typography.scss @@ -1,6 +1,7 @@ // // Typography // +// stylelint-disable primer/selector-no-utility, selector-no-type h1, .text-alpha { diff --git a/_sass/utilities/_colors.scss b/_sass/utilities/_colors.scss index 6ea1578..011f4c1 100644 --- a/_sass/utilities/_colors.scss +++ b/_sass/utilities/_colors.scss @@ -83,3 +83,149 @@ .text-purple-300 { color: $purple-300 !important; } + +.text-yellow-000 { + color: $yellow-000 !important; +} + +.text-yellow-100 { + color: $yellow-100 !important; +} + +.text-yellow-200 { + color: $yellow-200 !important; +} + +.text-yellow-300 { + color: $yellow-300 !important; +} + +.text-red-000 { + color: $red-000 !important; +} + +.text-red-100 { + color: $red-100 !important; +} + +.text-red-200 { + color: $red-200 !important; +} + +.text-red-300 { + color: $red-300 !important; +} + +// Background colors + +.bg-grey-dk-000 { + background-color: $grey-dk-000 !important; +} + +.bg-grey-dk-100 { + background-color: $grey-dk-100 !important; +} + +.bg-grey-dk-200 { + background-color: $grey-dk-200 !important; +} + +.bg-grey-dk-300 { + background-color: $grey-dk-300 !important; +} + +.bg-grey-lt-000 { + background-color: $grey-lt-000 !important; +} + +.bg-grey-lt-100 { + background-color: $grey-lt-100 !important; +} + +.bg-grey-lt-200 { + background-color: $grey-lt-200 !important; +} + +.bg-grey-lt-300 { + background-color: $grey-lt-300 !important; +} + +.bg-blue-000 { + background-color: $blue-000 !important; +} + +.bg-blue-100 { + background-color: $blue-100 !important; +} + +.bg-blue-200 { + background-color: $blue-200 !important; +} + +.bg-blue-300 { + background-color: $blue-300 !important; +} + +.bg-green-000 { + background-color: $green-000 !important; +} + +.bg-green-100 { + background-color: $green-100 !important; +} + +.bg-green-200 { + background-color: $green-200 !important; +} + +.bg-green-300 { + background-color: $green-300 !important; +} + +.bg-purple-000 { + background-color: $purple-000 !important; +} + +.bg-purple-100 { + background-color: $purple-100 !important; +} + +.bg-purple-200 { + background-color: $purple-200 !important; +} + +.bg-purple-300 { + background-color: $purple-300 !important; +} + +.bg-yellow-000 { + background-color: $yellow-000 !important; +} + +.bg-yellow-100 { + background-color: $yellow-100 !important; +} + +.bg-yellow-200 { + background-color: $yellow-200 !important; +} + +.bg-yellow-300 { + background-color: $yellow-300 !important; +} + +.bg-red-000 { + background-color: $red-000 !important; +} + +.bg-red-100 { + background-color: $red-100 !important; +} + +.bg-red-200 { + background-color: $red-200 !important; +} + +.bg-red-300 { + background-color: $red-300 !important; +} diff --git a/_sass/utilities/_layout.scss b/_sass/utilities/_layout.scss index 24f4fe1..d16ed5a 100644 --- a/_sass/utilities/_layout.scss +++ b/_sass/utilities/_layout.scss @@ -1,7 +1,10 @@ +// stylelint-disable primer/selector-no-utility // -// Utility classes for layout and spacing +// Utility classes for layout // +// Display + .d-block { display: block !important; } .d-flex { display: flex !important; } .d-inline { display: inline !important; } @@ -24,3 +27,12 @@ } } } + +// Vertical alignment + +.v-align-baseline { vertical-align: baseline !important; } +.v-align-bottom { vertical-align: bottom !important; } +.v-align-middle { vertical-align: middle !important; } +.v-align-text-bottom { vertical-align: text-bottom !important; } +.v-align-text-top { vertical-align: text-top !important; } +.v-align-top { vertical-align: top !important; } diff --git a/assets/css/just-the-docs.scss b/assets/css/just-the-docs.scss index 4fc74ea..f730643 100644 --- a/assets/css/just-the-docs.scss +++ b/assets/css/just-the-docs.scss @@ -15,11 +15,17 @@ // Support @import "./support/support"; + +// Custom overrides +@import "./custom/custom"; + +// Modules @import "./base"; @import "./layout"; @import "./content"; @import "./navigation"; @import "./typography"; +@import "./labels"; @import "./buttons"; @import "./search"; @import "./tables"; diff --git a/assets/images/search.svg b/assets/images/search.svg new file mode 100644 index 0000000..421ca4d --- /dev/null +++ b/assets/images/search.svg @@ -0,0 +1 @@ +Search diff --git a/assets/js/just-the-docs.js b/assets/js/just-the-docs.js index 4d29799..a06a540 100644 --- a/assets/js/just-the-docs.js +++ b/assets/js/just-the-docs.js @@ -13,7 +13,6 @@ function toggleNav(){ const nav = document.querySelector('.js-main-nav'); const navTrigger = document.querySelector('.js-main-nav-trigger'); - addEvent(navTrigger, 'click', function(){ var text = navTrigger.innerText; var textToggle = navTrigger.getAttribute('data-text-toggle'); @@ -74,35 +73,54 @@ function initSearch() { var searchResults = document.querySelector('.js-search-results'); var store = dataStore; - addEvent(searchInput, 'keyup', function(){ - var query = this.value; + function hideResults() { + searchResults.innerHTML = ''; + searchResults.classList.remove('active'); + } - searchResults.innerHTML = ''; + addEvent(searchInput, 'keyup', function(e){ + var query = this.value; + + searchResults.innerHTML = ''; + searchResults.classList.remove('active'); + + if (query === '') { + hideResults(); + } else { + var results = index.search(query); + + if (results.length > 1) { + searchResults.classList.add('active'); + var resultsList = document.createElement('ul'); + searchResults.appendChild(resultsList); - if (query === '') { - searchResults.innerHTML = ''; - } else { - var results = index.search(query); for (var i in results) { - var resultsList = document.createElement("ul"); - var resultsListItem = document.createElement("li"); - var resultsLink = document.createElement("a"); + var resultsListItem = document.createElement('li'); + var resultsLink = document.createElement('a'); var resultsUrl = store[results[i].ref].url; var resultsTitle = store[results[i].ref].title; - resultsLink.setAttribute("href", store[results[i].ref].url); + resultsLink.setAttribute('href', store[results[i].ref].url); resultsLink.innerText = resultsTitle; - resultsList.classList.add("search-results-list"); - searchResults.appendChild(resultsList); + resultsList.classList.add('search-results-list'); + resultsListItem.classList.add('search-results-list-item'); + resultsLink.classList.add('search-results-link'); resultsList.appendChild(resultsListItem); - resultsListItem.appendChild(resultsLink) + resultsListItem.appendChild(resultsLink); } } + + // When esc key is pressed, hide the results and clear the field + if (e.keyCode == 27) { + hideResults(); + searchInput.value = ''; + } + } }); addEvent(searchInput, 'blur', function(){ - setTimeout(function(){searchResults.innerHTML = '';}, 300); + setTimeout(function(){hideResults()}, 300); }); } } diff --git a/docs/customization.md b/docs/customization.md index 78418ae..ee1c8de 100644 --- a/docs/customization.md +++ b/docs/customization.md @@ -3,3 +3,42 @@ layout: default title: Customization nav_order: 4 --- + +# Customization +{:.no_toc} + +## Table of contents +{: .no_toc .text-delta } + +1. TOC +{:toc} + +--- + +## Visual customization + +To customize your site’s aesthetic, open `_sass/custom/custom.scss` in your editor to see if there is a variable that you can override. Most styles like fonts, colors, spacing, etc.. are derived from these variables. To override a specific variable, uncomment out it’s line and change it’s value. + +For example, to change the link color from the purple default to blue, open `_sass/custom/custom.css` and find the link color variable on line `44`. Uncomment it out, and change it's value to our `$blue-000` variable, or another shade of your choosing. + +```scss +// ... +// +// $body-text-color: $grey-dk-100; +// $body-heading-color: $grey-dk-300; +$link-color: $blue-000; +// +// ... +``` + +_Note:_ Editing the variables directly in `_sass/support/variables.scss` is not recommended and can cause other dependancies to fail. + +--- + +## Themes +{: .d-inline-block :} + +Coming soon +{: .label .label-yellow :} + +Hard at work on a dark theme, and more. diff --git a/docs/navigation-structure.md b/docs/navigation-structure.md index 83516b6..1e7a76f 100644 --- a/docs/navigation-structure.md +++ b/docs/navigation-structure.md @@ -19,4 +19,8 @@ nav_order: 4 --- +## Breadcrumbs + +--- + ## In-page navigation with Table of Contents diff --git a/docs/ui-components/buttons.md b/docs/ui-components/buttons.md index eec5deff..1184af2 100644 --- a/docs/ui-components/buttons.md +++ b/docs/ui-components/buttons.md @@ -62,7 +62,7 @@ GitHub flavored markdown does not support the `button` element, so you'll have t ### Button size -Wrap the button in container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities.md %}#typography) to scale buttons: +Wrap the button in container that uses the [font-size utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#typography) to scale buttons:
@@ -87,7 +87,7 @@ Wrap the button in container that uses the [font-size utility classes]({{ site.b ### Spacing between buttons -Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities.md %}#spacing) to add spacing between two buttons in the same block. +Use the [margin utility classes]({{ site.baseurl }}{% link docs/utilities/utilities.md %}#spacing) to add spacing between two buttons in the same block.
diff --git a/docs/ui-components/code.md b/docs/ui-components/code.md index bc1baf2..c98055c 100644 --- a/docs/ui-components/code.md +++ b/docs/ui-components/code.md @@ -2,7 +2,7 @@ layout: default title: Code parent: UI Components -nav_order: 4 +nav_order: 5 --- # Code diff --git a/docs/ui-components/labels.md b/docs/ui-components/labels.md new file mode 100644 index 0000000..710218f --- /dev/null +++ b/docs/ui-components/labels.md @@ -0,0 +1,53 @@ +--- +layout: default +title: Labels +parent: UI Components +nav_order: 3 +--- + +# Labels + +Use labels as a way to add an additional mark to a section of your docs. Labels come in a few colors. By default, labels will be blue. + +
+ +Default label +{: .label } + +Blue label +{: .label .label-blue} + +Stable +{: .label .label-green} + +New release +{: .label .label-purple} + +Coming soon +{: .label .label-yellow} + +Deprecated +{: .label .label-red} + +
+```markdown + +Default label +{: .label } + +Blue label +{: .label .label-blue} + +Stable +{: .label .label-green} + +New release +{: .label .label-purple} + +Coming soon +{: .label .label-yellow} + +Deprecated +{: .label .label-red} + +``` diff --git a/docs/ui-components/tables.md b/docs/ui-components/tables.md index a26082d..36920ca 100644 --- a/docs/ui-components/tables.md +++ b/docs/ui-components/tables.md @@ -2,21 +2,10 @@ layout: default title: Tables parent: UI Components -nav_order: 3 +nav_order: 4 --- # Tables -{:.no_toc} - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc } - ---- - -## Default tables Tables are responsive by default, allowing wide tables to have a horizontal scroll to access columns outside of the normal viewport. diff --git a/docs/ui-components/typography.md b/docs/ui-components/typography.md index 5b434d5..8c2b6b8 100644 --- a/docs/ui-components/typography.md +++ b/docs/ui-components/typography.md @@ -111,4 +111,4 @@ Text can be **bold**, _italic_, or ~~strikethrough~~. There are a number of specific typographic CSS classes that allow you to do override default styling for font size, font-weight, line height, and capitalization. -[View typography utilities]({{ site.base_url }}{% link docs/utilities.md %}#typography){: .btn .btn-outline } +[View typography utilities]({{ site.base_url }}{% link docs/utilities/utilities.md %}#typography){: .btn .btn-outline } diff --git a/docs/ui-components/ui-components.md b/docs/ui-components/ui-components.md index 96088a8..26df511 100644 --- a/docs/ui-components/ui-components.md +++ b/docs/ui-components/ui-components.md @@ -9,5 +9,5 @@ permalink: /ui-components # UI Components -Just the Docs includes all the CSS you need to create structured documentation for your next project. To make it as easy as possible to write documentation in plain Markdown, most styles will require no additional CSS classes. +To make it as easy as possible to write documentation in plain Markdown, most UI components are styled using default Markdown elements with few additional CSS classes needed. {: .fs-6 .fw-300 } diff --git a/docs/utilities.md b/docs/utilities.md deleted file mode 100644 index 384820a..0000000 --- a/docs/utilities.md +++ /dev/null @@ -1,259 +0,0 @@ ---- -layout: default -title: Utilities -nav_order: 3 ---- - -# Utilities -{:.no_toc} - -CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size. -{: .fs-6 .fw-300 } - -## Table of contents -{: .no_toc .text-delta } - -1. TOC -{:toc} - ---- - -## Responsive modifiers - -Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prexix and suffix classes. For example `prefix-modifier-suffix` - -| Modifier | Screen size | -|:----------|:-------------------------------------| -| (none) | All screens until the next modifier | -| `xs` | 320px (20rem) and up | -| `sm` | 500px (31.25rem) and up | -| `md` | 740px (46.25rem) and up | -| `lg` | 1120px (70rem) and up | -| `xl` | 1400px (87.5rem) and up | - -## Layout Utilities - -### Spacing - -These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively. - -| Classname prefix | What it does | -|:-----------------|:------------------------------| -| `.m-` | `margin` | -| `.mx-` | `margin-left`, `margin-right` | -| `.my-` | `margin top`, `margin bottom` | -| `.mt-` | `margin-top` | -| `.mr-` | `margin-right` | -| `.mb-` | `margin-bottom` | -| `.ml-` | `margin-left` | - -| Classname prefix | What it does | -|:-----------------|:--------------------------------| -| `.p-` | `padding` | -| `.px-` | `padding-left`, `padding-right` | -| `.py-` | `padding top`, `padding bottom` | -| `.pt-` | `padding-top` | -| `.pr-` | `padding-right` | -| `.pb-` | `padding-bottom` | -| `.pl-` | `padding-left` | - -Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units: - -| Spacer/suffix | Size in rems | Rem converted to px | -|:---------------|:--------------|:--------------------| -| `1` | 0.25rem | 4px | -| `2` | 0.5rem | 8px | -| `3` | 0.75rem | 12px | -| `4` | 1rem | 16px | -| `5` | 1.5rem | 24px | -| `6` | 2rem | 32px | -| `7` | 2.5rem | 40px | -| `8` | 3rem | 48px | - -#### Examples -{: .no_toc } - -```markdown -In Markdown, use the `{: }` wrapper to apply custom classes: - -This paragraph will have a margin bottom of 1rem/16px at large screens. -{: .mb-lg-4 } - -This paragraph will have 2rem/32px of padding on the right and left at all screen sizes. -{: .px-6 } - -``` - -### Display - -Display classes aid in adapting the layout of the elements on a page: - -| Class | | -|:------------------|:------------------------| -| `.d-block` | `display: block` | -| `.d-flex` | `display: flex` | -| `.d-inline` | `display: inline` | -| `.d-inline-block` | `display: inline-block` | -| `.d-none` | `display: none` | - -Use these classes in conjunction with the responsive modifiers. - -#### Examples -{: .no_toc } - -```markdown -In Markdown, use the `{: }` wrapper to apply custom classes: - -This button will be hidden until medium screen sizes: - -[ A button ](#url) -{: .d-none .d-md-inline-block } - -These headings will be `inline-block`: - -### heading 3 -{ .d-inline-block } - -### heading 3 -{ .d-inline-block } - -``` - ---- -## Typography - -### Font size - -Use the `.fs-1` - `.fs-10` to set an explicit font-size. - -| Class | Small screen size `font-size` | Large screen size `font-size` | -|:--------|:-------------------------------|:------------------------------| -| `.fs-1` | 9px | 10px | -| `.fs-2` | 11px | 12px | -| `.fs-3` | 12px | 14px | -| `.fs-4` | 14px | 16px | -| `.fs-5` | 16px | 18px | -| `.fs-6` | 18px | 24px | -| `.fs-7` | 24px | 32px | -| `.fs-8` | 32px | 38px | -| `.fs-9` | 38px | 42px | -| `.fs-10`| 42px | 48px | - -
-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/docs/utilities/color.md b/docs/utilities/color.md new file mode 100644 index 0000000..f2bfc53 --- /dev/null +++ b/docs/utilities/color.md @@ -0,0 +1,82 @@ +--- +layout: default +title: Color +nav_order: 3 +parent: Utilities +--- + +# Color Utilities +{:.no_toc} + +## Table of contents +{: .no_toc .text-delta } + +1. TOC +{:toc} + +--- + +All the colors used in Just the Docs have been systemsized into a series of variables that have been extended to both font color and background color utility classes. + +## Light Greys + +| Color value | Font color utility | Background color utility | +|:---------------|:---------------------|:-------------------------| +| `grey-lt-000` | `.text-grey-lt-000` | `.bg-grey-lt-000` | +| `grey-lt-100` | `.text-grey-lt-100` | `.bg-grey-lt-100` | +| `grey-lt-200` | `.text-grey-lt-200` | `.bg-grey-lt-200` | +| `grey-lt-300` | `.text-grey-lt-300` | `.bg-grey-lt-300` | + +## Dark Greys + +| Color value | Font color utility | Background color utility | +|:---------------|:---------------------|:-------------------------| +| `grey-dk-000` | `.text-grey-dk-000` | `.bg-grey-dk-000` | +| `grey-dk-100` | `.text-grey-dk-100` | `.bg-grey-dk-100` | +| `grey-dk-200` | `.text-grey-dk-200` | `.bg-grey-dk-200` | +| `grey-dk-300` | `.text-grey-dk-300` | `.bg-grey-dk-300` | + +## Purples + +| Color value | Font color utility | Background color utility | +|:---------------|:---------------------|:-------------------------| +| `purple-000` | `.text-purple-000` | `.bg-purple-000` | +| `purple-100` | `.text-purple-100` | `.bg-purple-100` | +| `purple-200` | `.text-purple-200` | `.bg-purple-200` | +| `purple-300` | `.text-purple-300` | `.bg-purple-300` | + +## Blues + +| Color value | Font color utility | Background color utility | +|:---------------|:---------------------|:-------------------------| +| `blue-000` | `.text-blue-000` | `.bg-blue-000` | +| `blue-100` | `.text-blue-100` | `.bg-blue-100` | +| `blue-200` | `.text-blue-200` | `.bg-blue-200` | +| `blue-300` | `.text-blue-300` | `.bg-blue-300` | + +## Greens + +| Color value | Font color utility | Background color utility | +|:---------------|:---------------------|:-------------------------| +| `green-000` | `.text-green-000` | `.bg-green-000` | +| `green-100` | `.text-green-100` | `.bg-green-100` | +| `green-200` | `.text-green-200` | `.bg-green-200` | +| `green-300` | `.text-green-300` | `.bg-green-300` | + +## Yellows + +| Color value | Font color utility | Background color utility | +|:---------------|:---------------------|:-------------------------| +| `yellow-000` | `.text-yellow-000` | `.bg-yellow-000` | +| `yellow-100` | `.text-yellow-100` | `.bg-yellow-100` | +| `yellow-200` | `.text-yellow-200` | `.bg-yellow-200` | +| `yellow-300` | `.text-yellow-300` | `.bg-yellow-300` | + +## Reds + +| Color value | Font color utility | Background color utility | +|:---------------|:---------------------|:-------------------------| +| `red-000` | `.text-red-000` | `.bg-red-000` | +| `red-100` | `.text-red-100` | `.bg-red-100` | +| `red-200` | `.text-red-200` | `.bg-red-200` | +| `red-300` | `.text-red-300` | `.bg-red-300` | diff --git a/docs/utilities/layout.md b/docs/utilities/layout.md new file mode 100644 index 0000000..33f4951 --- /dev/null +++ b/docs/utilities/layout.md @@ -0,0 +1,114 @@ +--- +layout: default +title: Layout +nav_order: 2 +parent: Utilities +--- + +# Layout Utilities +{:.no_toc} + +## Table of contents +{: .no_toc .text-delta } + +1. TOC +{:toc} + +--- + +## Spacing + +These spacers are available to use for margins and padding with responsive utility classes. Combine these prefixes with a screen size and spacing scale to use them responsively. + +| Classname prefix | What it does | +|:-----------------|:------------------------------| +| `.m-` | `margin` | +| `.mx-` | `margin-left`, `margin-right` | +| `.my-` | `margin top`, `margin bottom` | +| `.mt-` | `margin-top` | +| `.mr-` | `margin-right` | +| `.mb-` | `margin-bottom` | +| `.ml-` | `margin-left` | + +| Classname prefix | What it does | +|:-----------------|:--------------------------------| +| `.p-` | `padding` | +| `.px-` | `padding-left`, `padding-right` | +| `.py-` | `padding top`, `padding bottom` | +| `.pt-` | `padding-top` | +| `.pr-` | `padding-right` | +| `.pb-` | `padding-bottom` | +| `.pl-` | `padding-left` | + +Spacing values are based on a `1rem = 16px` spacing scale, broken down into these units: + +| Spacer/suffix | Size in rems | Rem converted to px | +|:---------------|:--------------|:--------------------| +| `1` | 0.25rem | 4px | +| `2` | 0.5rem | 8px | +| `3` | 0.75rem | 12px | +| `4` | 1rem | 16px | +| `5` | 1.5rem | 24px | +| `6` | 2rem | 32px | +| `7` | 2.5rem | 40px | +| `8` | 3rem | 48px | + +#### Examples +{: .no_toc } + +```markdown +In Markdown, use the `{: }` wrapper to apply custom classes: + +This paragraph will have a margin bottom of 1rem/16px at large screens. +{: .mb-lg-4 } + +This paragraph will have 2rem/32px of padding on the right and left at all screen sizes. +{: .px-6 } + +``` + +## Vertical Alignment + +| Classname | What it does | +|:-----------------------|:--------------------------------| +| `.v-align-baseline` | `vertical-align: baseline` | +| `.v-align-bottom` | `vertical-align: bottom` | +| `.v-align-middle` | `vertical-align: middle` | +| `.v-align-text-bottom` | `vertical-align: text-bottom` | +| `.v-align-text-top` | `vertical-align: text-top` | +| `.v-align-top` | `vertical-align: top` | + +## Display + +Display classes aid in adapting the layout of the elements on a page: + +| Class | | +|:------------------|:------------------------| +| `.d-block` | `display: block` | +| `.d-flex` | `display: flex` | +| `.d-inline` | `display: inline` | +| `.d-inline-block` | `display: inline-block` | +| `.d-none` | `display: none` | + +Use these classes in conjunction with the responsive modifiers. + +#### Examples +{: .no_toc } + +```markdown +In Markdown, use the `{: }` wrapper to apply custom classes: + +This button will be hidden until medium screen sizes: + +[ A button ](#url) +{: .d-none .d-md-inline-block } + +These headings will be `inline-block`: + +### heading 3 +{ .d-inline-block } + +### heading 3 +{ .d-inline-block } + +``` diff --git a/docs/utilities/responsive-modifiers.md b/docs/utilities/responsive-modifiers.md new file mode 100644 index 0000000..235a1a8 --- /dev/null +++ b/docs/utilities/responsive-modifiers.md @@ -0,0 +1,19 @@ +--- +layout: default +title: Responsive Modifiers +nav_order: 1 +parent: Utilities +--- + +# Responsive modifiers + +Just the Docs spacing works in conjunction with a variety of modifiers that allow you to target specific screen sizes responsively. Use these in conjunction with spacing and display prefix and suffix classes. + +| Modifier | Screen size | +|:----------|:-------------------------------------| +| (none) | All screens until the next modifier | +| `xs` | 320px (20rem) and up | +| `sm` | 500px (31.25rem) and up | +| `md` | 740px (46.25rem) and up | +| `lg` | 1120px (70rem) and up | +| `xl` | 1400px (87.5rem) and up | diff --git a/docs/utilities/typography.md b/docs/utilities/typography.md new file mode 100644 index 0000000..a517384 --- /dev/null +++ b/docs/utilities/typography.md @@ -0,0 +1,149 @@ +--- +layout: default +title: Typography +nav_order: 3 +parent: Utilities +--- + +# Typography Utilities +{:.no_toc} + +## Table of contents +{: .no_toc .text-delta } + +1. TOC +{:toc} + +--- + +## Font size + +Use the `.fs-1` - `.fs-10` to set an explicit font-size. + +| Class | Small screen size `font-size` | Large screen size `font-size` | +|:--------|:-------------------------------|:------------------------------| +| `.fs-1` | 9px | 10px | +| `.fs-2` | 11px | 12px | +| `.fs-3` | 12px | 14px | +| `.fs-4` | 14px | 16px | +| `.fs-5` | 16px | 18px | +| `.fs-6` | 18px | 24px | +| `.fs-7` | 24px | 32px | +| `.fs-8` | 32px | 38px | +| `.fs-9` | 38px | 42px | +| `.fs-10`| 42px | 48px | + +
+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 } +``` diff --git a/docs/utilities/utilities.md b/docs/utilities/utilities.md new file mode 100644 index 0000000..d897142 --- /dev/null +++ b/docs/utilities/utilities.md @@ -0,0 +1,14 @@ +--- +layout: default +title: Utilities +nav_order: 3 +parent: Utilities +has_children: true +permalink: /utilities +--- + +# Utilities +{:.no_toc} + +CSS utility classes come in handy when you to want to override default styles to give create additional whitespace (margins/padding), unexpected shifts in font-size or weight, add color, or to hide (or show) something a specific screen size. +{: .fs-6 .fw-300 } diff --git a/index.md b/index.md index 703b0c9..86a0192 100644 --- a/index.md +++ b/index.md @@ -5,15 +5,15 @@ nav_order: 1 --- -# Focus on writing documentation, not building a website for it. -{: .mt-4 .mt-md-0 :} +# Focus on writing your docs, instead of building a website for them. +{: .fs-9 .mb-md-8 :}
-
+
- Just the Docs gives your documentation a home with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages. + Just the Docs gives your documentation a jumpstart with a responsive Jekyll theme that is easily customizable and hosted on GitHub pages. {: .fs-6 .fw-300 } [Get Started](#getting-started){: .btn .btn-purple .mr-2 } [View GitHub](https://github.com/pmarsceill/just-the-docs){: .btn } diff --git a/search-data.json b/search-data.json index 0c01c80..1543454 100644 --- a/search-data.json +++ b/search-data.json @@ -1,15 +1,13 @@ --- --- { - {% for page in site.pages %} - {% unless page.url contains "css" %} - "{{ forloop.index - 1 }}": { - "id": "{{ forloop.index - 1 }}", + {% for page in site.html_pages %} + "{{ forloop.index0 }}": { + "id": "{{ forloop.index0 }}", "title": "{{ page.title | xml_escape }}", "content": "{{ page.content | strip_html | strip_newlines | escape | remove: "\"}}", "url": " {{ page.url | xml_escape }}" } {% unless forloop.last %},{% endunless %} - {% endunless %} {% endfor %} }