From 6e76af36f5c4397a26baf202285b77330ad96393 Mon Sep 17 00:00:00 2001 From: ZanzyTHEbar Date: Fri, 6 May 2022 20:12:16 +0200 Subject: [PATCH] update - working build workflow --- .github/workflows/README.md | 9 + .github/workflows/build-jekyll.yml | 13 +- ...yml => github-actions-change-variable.txt} | 0 ...mplate.yml => github-actions-template.txt} | 0 .../{write_file.yml => write_file.txt} | 0 .gitignore | 3 +- Gemfile | 26 +- docs/_config.yml | 8 +- ...okies_consent.html => cookie_consent.html} | 0 docs/_includes/css/custom.scss.liquid | 1 + docs/_includes/fix_linenos.html | 65 +++ docs/_includes/header_custom.html | 0 docs/_includes/js/custom.js | 0 docs/_includes/nav.html | 99 ++++ docs/_includes/title.html | 5 + docs/_includes/vendor/anchor_headings.html | 144 ++++++ docs/_sass/base.scss | 108 ++++ docs/_sass/buttons.scss | 118 +++++ docs/_sass/code.scss | 340 +++++++++++++ docs/_sass/color_schemes/dark.scss | 17 + docs/_sass/color_schemes/light.scss | 0 docs/_sass/content.scss | 231 +++++++++ docs/_sass/labels.scss | 37 ++ docs/_sass/layout.scss | 205 ++++++++ docs/_sass/modules.scss | 20 + docs/_sass/navigation.scss | 219 ++++++++ docs/_sass/print.scss | 40 ++ docs/_sass/search.scss | 323 ++++++++++++ docs/_sass/support/_functions.scss | 9 + docs/_sass/support/_variables.scss | 153 ++++++ docs/_sass/support/mixins/_buttons.scss | 27 + docs/_sass/support/mixins/_layout.scss | 34 ++ docs/_sass/support/mixins/_typography.scss | 84 ++++ docs/_sass/support/mixins/mixins.scss | 3 + docs/_sass/support/support.scss | 3 + docs/_sass/tables.scss | 58 +++ docs/_sass/typography.scss | 64 +++ docs/_sass/utilities/_colors.scss | 239 +++++++++ docs/_sass/utilities/_layout.scss | 95 ++++ docs/_sass/utilities/_lists.scss | 17 + docs/_sass/utilities/_spacing.scss | 165 ++++++ docs/_sass/utilities/_typography.scss | 91 ++++ docs/_sass/utilities/utilities.scss | 5 + docs/_sass/vendor/normalize.scss/README.md | 7 + .../vendor/normalize.scss/normalize.scss | 349 +++++++++++++ docs/assets/css/just-the-docs-dark.scss | 3 + docs/assets/css/just-the-docs-default.scss | 8 + docs/assets/css/just-the-docs-light.scss | 3 + docs/assets/images/search.svg | 1 + docs/assets/js/just-the-docs.js | 471 ++++++++++++++++++ docs/assets/js/vendor/lunr.min.js | 6 + docs/assets/js/zzzz-search-data.json | 72 +++ todo.yaml | 4 - 53 files changed, 3971 insertions(+), 31 deletions(-) create mode 100644 .github/workflows/README.md rename .github/workflows/{github-actions-change-variable.yml => github-actions-change-variable.txt} (100%) rename .github/workflows/{github-actions-template.yml => github-actions-template.txt} (100%) rename .github/workflows/{write_file.yml => write_file.txt} (100%) rename docs/_includes/{cookies_consent.html => cookie_consent.html} (100%) create mode 100644 docs/_includes/css/custom.scss.liquid create mode 100644 docs/_includes/fix_linenos.html create mode 100644 docs/_includes/header_custom.html create mode 100644 docs/_includes/js/custom.js create mode 100644 docs/_includes/nav.html create mode 100644 docs/_includes/title.html create mode 100644 docs/_includes/vendor/anchor_headings.html create mode 100644 docs/_sass/base.scss create mode 100644 docs/_sass/buttons.scss create mode 100644 docs/_sass/code.scss create mode 100644 docs/_sass/color_schemes/dark.scss create mode 100644 docs/_sass/color_schemes/light.scss create mode 100644 docs/_sass/content.scss create mode 100644 docs/_sass/labels.scss create mode 100644 docs/_sass/layout.scss create mode 100644 docs/_sass/modules.scss create mode 100644 docs/_sass/navigation.scss create mode 100644 docs/_sass/print.scss create mode 100644 docs/_sass/search.scss create mode 100644 docs/_sass/support/_functions.scss create mode 100644 docs/_sass/support/_variables.scss create mode 100644 docs/_sass/support/mixins/_buttons.scss create mode 100644 docs/_sass/support/mixins/_layout.scss create mode 100644 docs/_sass/support/mixins/_typography.scss create mode 100644 docs/_sass/support/mixins/mixins.scss create mode 100644 docs/_sass/support/support.scss create mode 100644 docs/_sass/tables.scss create mode 100644 docs/_sass/typography.scss create mode 100644 docs/_sass/utilities/_colors.scss create mode 100644 docs/_sass/utilities/_layout.scss create mode 100644 docs/_sass/utilities/_lists.scss create mode 100644 docs/_sass/utilities/_spacing.scss create mode 100644 docs/_sass/utilities/_typography.scss create mode 100644 docs/_sass/utilities/utilities.scss create mode 100644 docs/_sass/vendor/normalize.scss/README.md create mode 100644 docs/_sass/vendor/normalize.scss/normalize.scss create mode 100644 docs/assets/css/just-the-docs-dark.scss create mode 100644 docs/assets/css/just-the-docs-default.scss create mode 100644 docs/assets/css/just-the-docs-light.scss create mode 100644 docs/assets/images/search.svg create mode 100644 docs/assets/js/just-the-docs.js create mode 100644 docs/assets/js/vendor/lunr.min.js create mode 100644 docs/assets/js/zzzz-search-data.json diff --git a/.github/workflows/README.md b/.github/workflows/README.md new file mode 100644 index 0000000..e66b533 --- /dev/null +++ b/.github/workflows/README.md @@ -0,0 +1,9 @@ +# Instructions + +Please rename the `.github/workflows/.txt` file of the workflow you wish to enable to `.github/workflows/.yml`. + +This file should be formatted as YAML, feel free to change the variables in the file. Please follow the [workflow documentation](https://docs.github.com/en/actions) for more information. [Learn more about workflows](https://docs.github.com/en/actions/using-workflows). + +Please note that the workflows will be enabled automatically after you push your changes to the repository, and can always be enabled manually from the `Workflows` section of the repository settings. + +Please ***do not delete*** the `.github/workflows/.txt` files, and do not delete the `.github/workflows/build-jekyll.yml` file. diff --git a/.github/workflows/build-jekyll.yml b/.github/workflows/build-jekyll.yml index 925cab0..5ff437c 100644 --- a/.github/workflows/build-jekyll.yml +++ b/.github/workflows/build-jekyll.yml @@ -2,8 +2,7 @@ name: Build and Deploy to Github Pages on: push: - branches: - - docs # Here source code branch is `master`, it could be other branch + branches: [docs] jobs: build_and_deploy: @@ -24,12 +23,4 @@ jobs: with: provider: 'github' token: ${{ secrets.GITHUB_TOKEN }} # It's your Personal Access Token(PAT) - repository: '' # Default is current repository - branch: 'docs' # Default is gh-pages for github provider - jekyll_src: './docs' # Default is root directory - jekyll_cfg: '_config.yml' # Default is _config.yml - jekyll_baseurl: '' # Default is according to _config.yml - bundler_ver: '>=0' # Default is latest bundler version - cname: '' # Default is to not use a cname - actor: '' # Default is the GITHUB_ACTOR - pre_build_commands: '' # Installing additional dependencies (Arch Linux) \ No newline at end of file + jekyll_src: './docs' # Default is root directory \ No newline at end of file diff --git a/.github/workflows/github-actions-change-variable.yml b/.github/workflows/github-actions-change-variable.txt similarity index 100% rename from .github/workflows/github-actions-change-variable.yml rename to .github/workflows/github-actions-change-variable.txt diff --git a/.github/workflows/github-actions-template.yml b/.github/workflows/github-actions-template.txt similarity index 100% rename from .github/workflows/github-actions-template.yml rename to .github/workflows/github-actions-template.txt diff --git a/.github/workflows/write_file.yml b/.github/workflows/write_file.txt similarity index 100% rename from .github/workflows/write_file.yml rename to .github/workflows/write_file.txt diff --git a/.gitignore b/.gitignore index 5b234c7..37782b4 100644 --- a/.gitignore +++ b/.gitignore @@ -1,8 +1,7 @@ /.vscode _site .bundle -vendor -zzzz-search-data.json +/vendor .sass-cache .jekyll-metadata gemfile.lock \ No newline at end of file diff --git a/Gemfile b/Gemfile index b409668..6f6ff35 100644 --- a/Gemfile +++ b/Gemfile @@ -16,6 +16,18 @@ gem "just-the-docs" # If you have any plugins, put them here! group :jekyll_plugins do gem "jekyll-feed", "~> 0.12" + # Jekyll SEO plugin + gem "jekyll-seo-tag", "~> 2.1" + # Jekyll Spaceship plugin + gem "jekyll-spaceship" + # Jekyll Sitemap plugin + gem "jekyll-sitemap" + # Jekyll Mermaid plugin + gem "jekyll-mermaid" + # Jekyll Remote Theme plugin + gem "jekyll-remote-theme" + + gem "kramdown-parser-gfm" end # Windows and JRuby does not include zoneinfo files, so bundle the tzinfo-data gem @@ -29,16 +41,4 @@ end gem "wdm", "~> 0.1.1", :platforms => [:mingw, :x64_mingw, :mswin] # GitHub page -gem "github-pages", "~> 221", group: :jekyll_plugins - -# Jekyll Spaceship plugin -gem "jekyll-spaceship" - -# Jekyll SEO plugin -gem "jekyll-seo-tag" - -# Jekyll Sitemap plugin -gem "jekyll-sitemap" - -# Jekyll Mermaid plugin -gem "jekyll-mermaid" \ No newline at end of file +#gem "github-pages", "~> 221", group: :jekyll_plugins diff --git a/docs/_config.yml b/docs/_config.yml index 4ec1fba..802aaca 100644 --- a/docs/_config.yml +++ b/docs/_config.yml @@ -16,6 +16,10 @@ search_enabled: true heading_level: 6 previews: 3 +baseurl: '/EyeTrackVR/' + +favicon: "/assets/images/favicon.png" # the favicon for your site + permalink: pretty exclude: [ @@ -48,8 +52,9 @@ plugins: - jekyll-sitemap - jekyll-mermaid - jekyll-spaceship + - jekyll-remote-theme -include: ["_pages", "_posts"] +include: ['_pages', '_posts', '_sass', '_layouts', '_includes', assets] timezone: "America/New_York" # Search options @@ -94,6 +99,7 @@ gh_edit_branch: 'docs' # the branch that your docs is served from gh_edit_source: docs # the source that your files originate from gh_edit_view_mode: 'edit' # "tree" or "edit" if you want the user to jump into the editor immediately ga_tracking: UA-5555555-55 # Google Analytics tracking code - Dahl Winters please update this to your own code +enableDNT: "false" # Enable Do-Not-Track ga_tracking_anonymize_ip: true # Use GDPR compliant Google Analytics settings (true by default) # Google Forms configuration diff --git a/docs/_includes/cookies_consent.html b/docs/_includes/cookie_consent.html similarity index 100% rename from docs/_includes/cookies_consent.html rename to docs/_includes/cookie_consent.html diff --git a/docs/_includes/css/custom.scss.liquid b/docs/_includes/css/custom.scss.liquid new file mode 100644 index 0000000..2ad1576 --- /dev/null +++ b/docs/_includes/css/custom.scss.liquid @@ -0,0 +1 @@ +@import "./custom/custom"; diff --git a/docs/_includes/fix_linenos.html b/docs/_includes/fix_linenos.html new file mode 100644 index 0000000..6243fb0 --- /dev/null +++ b/docs/_includes/fix_linenos.html @@ -0,0 +1,65 @@ +{%- comment -%} +This file can be used to fix the HTML produced by Jekyll for highlighted +code with line numbers. + +It works with `{% highlight some_language linenos %}...{% endhighlight %}` +and with the Kramdown option to add line numbers to fenced code. + +The implementation was derived from the workaround provided by +Dmitry Hrabrov (DeXP) at +https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-188144901 + +EXPLANATION + +The HTML produced by Rouge highlighting with lie numbers is of the form +`code table`. Jekyll (<= 4.1.1) always wraps the highlighted HTML +with `pre`. This wrapping is not only unnecessary, but also transforms +the conforming HTML produced by Rouge to non-conforming HTML, which +results in HTML validation error reports. + +The fix removes the outer `pre` tags whenever they contain the pattern +``. + +Apart from avoiding HTML validation errors, the fix allows the use of +the [Jekyll layout for compressing HTML](http://jch.penibelst.de), +which relies on `pre` tags not being nested, according to +https://github.com/penibelst/jekyll-compress-html/issues/71#issuecomment-172069842 + +USAGE + +(Any names can be used for `some_var` and `some_language`.) + +{% capture some_var %} +{% highlight some_language linenos %} +Some code +{% endhighlight %} +{% endcapture %} +{% include fix_linenos.html code=some_var %} + +For code fences: + +{% capture some_var %} +```some_language +Some code +``` +{% endcapture %} +{% assign some_var = some_var | markdownify %} +{% include fix_linenos.html code=some_var %} + +CAVEATS + +The above does not work when `Some code` happens to contain the matched string +`
`. + +The use of this file overwrites the variable `fix_linenos_code` with `nil`. + +{%- endcomment -%} + +{% assign fix_linenos_code = include.code %} +{% if fix_linenos_code contains '
' %} + {% assign fix_linenos_code = fix_linenos_code | replace: '
', '
' %}
+  {% assign fix_linenos_code = fix_linenos_code | replace: "
", "" %} +{% endif %} +{{ fix_linenos_code }} +{% assign fix_linenos_code = nil %} diff --git a/docs/_includes/header_custom.html b/docs/_includes/header_custom.html new file mode 100644 index 0000000..e69de29 diff --git a/docs/_includes/js/custom.js b/docs/_includes/js/custom.js new file mode 100644 index 0000000..e69de29 diff --git a/docs/_includes/nav.html b/docs/_includes/nav.html new file mode 100644 index 0000000..325a68c --- /dev/null +++ b/docs/_includes/nav.html @@ -0,0 +1,99 @@ + diff --git a/docs/_includes/title.html b/docs/_includes/title.html new file mode 100644 index 0000000..8bd3fa8 --- /dev/null +++ b/docs/_includes/title.html @@ -0,0 +1,5 @@ +{% if site.logo %} + +{% else %} + {{ site.title }} +{% endif %} diff --git a/docs/_includes/vendor/anchor_headings.html b/docs/_includes/vendor/anchor_headings.html new file mode 100644 index 0000000..e9ca862 --- /dev/null +++ b/docs/_includes/vendor/anchor_headings.html @@ -0,0 +1,144 @@ +{% capture headingsWorkspace %} + {% comment %} + Copyright (c) 2018 Vladimir "allejo" Jimenez + + Permission is hereby granted, free of charge, to any person + obtaining a copy of this software and associated documentation + files (the "Software"), to deal in the Software without + restriction, including without limitation the rights to use, + copy, modify, merge, publish, distribute, sublicense, and/or sell + copies of the Software, and to permit persons to whom the + Software is furnished to do so, subject to the following + conditions: + + The above copyright notice and this permission notice shall be + included in all copies or substantial portions of the Software. + + THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, + EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES + OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND + NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT + HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, + WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING + FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR + OTHER DEALINGS IN THE SOFTWARE. + {% endcomment %} + {% comment %} + Version 1.0.7 + https://github.com/allejo/jekyll-anchor-headings + + "Be the pull request you wish to see in the world." ~Ben Balter + + Usage: + {% include anchor_headings.html html=content anchorBody="#" %} + + Parameters: + * html (string) - the HTML of compiled markdown generated by kramdown in Jekyll + + Optional Parameters: + * beforeHeading (bool) : false - Set to true if the anchor should be placed _before_ the heading's content + * anchorAttrs (string) : '' - Any custom HTML attributes that will be added to the `` tag; you may NOT use `href`, `class` or `title`; + the `%heading%` and `%html_id%` placeholders are available + * anchorBody (string) : '' - The content that will be placed inside the anchor; the `%heading%` placeholder is available + * anchorClass (string) : '' - The class(es) that will be used for each anchor. Separate multiple classes with a space + * anchorTitle (string) : '' - The `title` attribute that will be used for anchors + * h_min (int) : 1 - The minimum header level to build an anchor for; any header lower than this value will be ignored + * h_max (int) : 6 - The maximum header level to build an anchor for; any header greater than this value will be ignored + * bodyPrefix (string) : '' - Anything that should be inserted inside of the heading tag _before_ its anchor and content + * bodySuffix (string) : '' - Anything that should be inserted inside of the heading tag _after_ its anchor and content + + Output: + The original HTML with the addition of anchors inside of all of the h1-h6 headings. + {% endcomment %} + + {% assign minHeader = include.h_min | default: 1 %} + {% assign maxHeader = include.h_max | default: 6 %} + {% assign beforeHeading = include.beforeHeading %} + {% assign nodes = include.html | split: ' + {% if headerLevel == 0 %} + + {% assign firstChunk = node | split: '>' | first %} + + + {% unless firstChunk contains '<' %} + {% capture node %}{% endcapture %} + {% assign _workspace = node | split: _closingTag %} + {% assign _idWorkspace = _workspace[0] | split: 'id="' %} + {% assign _idWorkspace = _idWorkspace[1] | split: '"' %} + {% assign html_id = _idWorkspace[0] %} + + {% capture _hAttrToStrip %}{{ _workspace[0] | split: '>' | first }}>{% endcapture %} + {% assign header = _workspace[0] | replace: _hAttrToStrip, '' %} + + + {% capture anchor %}{% endcapture %} + + {% if html_id and headerLevel >= minHeader and headerLevel <= maxHeader %} + {% capture anchor %}href="#{{ html_id }}"{% endcapture %} + + {% if include.anchorClass %} + {% capture anchor %}{{ anchor }} class="{{ include.anchorClass }}"{% endcapture %} + {% endif %} + + {% if include.anchorTitle %} + {% capture anchor %}{{ anchor }} title="{{ include.anchorTitle | replace: '%heading%', header }}"{% endcapture %} + {% endif %} + + {% if include.anchorAttrs %} + {% capture anchor %}{{ anchor }} {{ include.anchorAttrs | replace: '%heading%', header | replace: '%html_id%', html_id }}{% endcapture %} + {% endif %} + + {% capture anchor %}{{ include.anchorBody | replace: '%heading%', header | default: '' }}{% endcapture %} + + + {% if beforeHeading %} + {% capture anchor %}{{ anchor }} {% endcapture %} + {% else %} + {% capture anchor %} {{ anchor }}{% endcapture %} + {% endif %} + {% endif %} + + {% capture new_heading %} + + {% endcapture %} + + + {% assign chunkCount = _workspace | size %} + {% if chunkCount > 1 %} + {% capture new_heading %}{{ new_heading }}{{ _workspace | last }}{% endcapture %} + {% endif %} + + {% capture edited_headings %}{{ edited_headings }}{{ new_heading }}{% endcapture %} + {% endfor %} +{% endcapture %}{% assign headingsWorkspace = '' %}{{ edited_headings | strip }} diff --git a/docs/_sass/base.scss b/docs/_sass/base.scss new file mode 100644 index 0000000..c3b6698 --- /dev/null +++ b/docs/_sass/base.scss @@ -0,0 +1,108 @@ +// +// Base element style overrides +// +// stylelint-disable selector-no-type, selector-max-type + +* { + box-sizing: border-box; +} + +::selection { + color: $white; + background: $link-color; +} + +html { + @include fs-4; + scroll-behavior: smooth; +} + +body { + font-family: $body-font-family; + font-size: inherit; + line-height: $body-line-height; + color: $body-text-color; + background-color: $body-background-color; +} + +ol, +ul, +dl, +pre, +address, +blockquote, +table, +div, +hr, +form, +fieldset, +noscript .table-wrapper { + margin-top: 0; +} + +h1, +h2, +h3, +h4, +h5, +h6 { + margin-top: 0; + margin-bottom: 1em; + font-weight: 500; + line-height: $body-heading-line-height; + color: $body-heading-color; +} + +p { + margin-top: 1em; + margin-bottom: 1em; +} + +a { + color: $link-color; + text-decoration: none; +} + +a:not([class]) { + text-decoration: none; + background-image: linear-gradient($border-color 0%, $border-color 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; + } +} + +code { + font-family: $mono-font-family; + font-size: 0.75em; + line-height: $body-line-height; +} + +figure, +pre { + margin: 0; +} + +li { + margin: 0.25em 0; +} + +img { + max-width: 100%; + height: auto; +} + +hr { + height: 1px; + padding: 0; + margin: $sp-6 0; + background-color: $border-color; + border: 0; +} diff --git a/docs/_sass/buttons.scss b/docs/_sass/buttons.scss new file mode 100644 index 0000000..57660e0 --- /dev/null +++ b/docs/_sass/buttons.scss @@ -0,0 +1,118 @@ +// +// Buttons and things that look like buttons +// +// stylelint-disable color-named + +.btn { + display: inline-block; + box-sizing: border-box; + padding-top: 0.3em; + padding-right: 1em; + padding-bottom: 0.3em; + padding-left: 1em; + margin: 0; + font-family: inherit; + font-size: inherit; + font-weight: 500; + line-height: 1.5; + color: $link-color; + text-decoration: none; + vertical-align: baseline; + cursor: pointer; + background-color: $base-button-color; + border-width: 0; + border-radius: $border-radius; + 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: darken($link-color, 2%); + } + + &:hover, + &:active, + &.zeroclipboard-is-hover, + &.zeroclipboard-is-active { + text-decoration: none; + background-color: darken($base-button-color, 1%); + } + + &:active, + &.selected, + &.zeroclipboard-is-active { + background-color: darken($base-button-color, 3%); + 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 { + color: $link-color; + background: transparent; + box-shadow: inset 0 0 0 2px $grey-lt-300; + + &:hover, + &:active, + &.zeroclipboard-is-hover, + &.zeroclipboard-is-active { + color: darken($link-color, 4%); + text-decoration: none; + background-color: transparent; + box-shadow: inset 0 0 0 3px $grey-lt-300; + } + + &: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-primary { + @include btn-color($white, $btn-primary-color); +} + +.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/docs/_sass/code.scss b/docs/_sass/code.scss new file mode 100644 index 0000000..f038912 --- /dev/null +++ b/docs/_sass/code.scss @@ -0,0 +1,340 @@ +// +// Code and syntax highlighting +// +// stylelint-disable selector-no-qualifying-type, declaration-block-semicolon-newline-after,declaration-block-single-line-max-declarations, selector-no-type, selector-max-type + +code { + padding: 0.2em 0.15em; + font-weight: 400; + background-color: $code-background-color; + border: $border $border-color; + border-radius: $border-radius; +} + +// Avoid appearance of dark border around visited code links in Safari +a:visited code { + border-color: $border-color; +} + +// Content structure for highlighted code blocks using fences or Liquid +// +// ```[LANG]...```, no kramdown line_numbers: +// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code +// +// ```[LANG]...```, kramdown line_numbers = true: +// div.[language-LANG.]highlighter-rouge > div.highlight > pre.highlight > code +// > div.table-wrapper > table.rouge-table > tbody > tr +// > td.rouge-gutter.gl > pre.lineno +// | td.rouge-code > pre +// +// {% highlight LANG %}...{% endhighlight %}: +// figure.highlight > pre > code.language-LANG +// +// {% highlight LANG linenos %}...{% endhighlight %}: +// figure.highlight > pre > code.language-LANG +// > div.table-wrapper > table.rouge-table > tbody > tr +// > td.gutter.gl > pre.lineno +// | td.code > pre +// +// fix_linenos removes the outermost pre when it encloses table.rouge-table +// +// See docs/index-test.md for some tests. +// +// No kramdown line_numbers: fences and Liquid highlighting look the same. +// Kramdown line_numbers = true: fences have a wider gutter than with Liquid? + +// ```[LANG]...``` +div.highlighter-rouge { + padding: $sp-3; + margin-top: 0; + margin-bottom: $sp-3; + overflow-x: auto; + background-color: $code-background-color; + border-radius: $border-radius; + box-shadow: none; + -webkit-overflow-scrolling: touch; + + div.highlight, + pre.highlight, + code { + padding: 0; + margin: 0; + border: 0; + } +} + +// {% highlight LANG %}...{% endhighlight %}, +// {% highlight LANG linenos %}...{% endhighlight %}: +figure.highlight { + padding: $sp-3; + margin-top: 0; + margin-bottom: $sp-3; + background-color: $code-background-color; + border-radius: $border-radius; + box-shadow: none; + -webkit-overflow-scrolling: touch; + + pre, + code { + padding: 0; + margin: 0; + border: 0; + } +} + +// ```[LANG]...```, kramdown line_numbers = true, +// {% highlight LANG linenos %}...{% endhighlight %}: +.highlight .table-wrapper { + padding: 0; + margin: 0; + border: 0; + box-shadow: none; + + td, + pre { + @include fs-2; + min-width: 0; + padding: 0; + background-color: $code-background-color; + border: 0; + } + + td.gl { + padding-right: $sp-3; + } + + pre { + margin: 0; + line-height: 2; + } +} + +.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: #555; +} // 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: #555; +} // 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 { + padding: $sp-3; + margin-bottom: $sp-3; + overflow: auto; + border: 1px solid $border-color; + border-radius: $border-radius; + + + .highlighter-rouge, + + figure.highlight { + position: relative; + 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; + } +} diff --git a/docs/_sass/color_schemes/dark.scss b/docs/_sass/color_schemes/dark.scss new file mode 100644 index 0000000..a25f449 --- /dev/null +++ b/docs/_sass/color_schemes/dark.scss @@ -0,0 +1,17 @@ +$body-background-color: $grey-dk-300; +$sidebar-color: $grey-dk-300; +$border-color: $grey-dk-200; + +$body-text-color: $grey-lt-300; +$body-heading-color: $grey-lt-000; +$nav-child-link-color: $grey-dk-000; +$search-result-preview-color: $grey-dk-000; + +$link-color: $blue-000; +$btn-primary-color: $blue-200; +$base-button-color: $grey-dk-250; + +$code-background-color: $grey-dk-250; +$search-background-color: $grey-dk-250; +$table-background-color: $grey-dk-250; +$feedback-color: darken($sidebar-color, 3%); diff --git a/docs/_sass/color_schemes/light.scss b/docs/_sass/color_schemes/light.scss new file mode 100644 index 0000000..e69de29 diff --git a/docs/_sass/content.scss b/docs/_sass/content.scss new file mode 100644 index 0000000..a53271a --- /dev/null +++ b/docs/_sass/content.scss @@ -0,0 +1,231 @@ +@charset "UTF-8"; + +// +// Styles for rendered markdown in the .main-content container +// +// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type + +.main-content { + line-height: $content-line-height; + + ol, + ul, + dl, + pre, + address, + blockquote, + .table-wrapper { + margin-top: 0.5em; + } + + a { + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + + ul, + ol { + padding-left: 1.5em; + } + + li { + .highlight { + margin-top: $sp-1; + } + } + + ol { + list-style-type: none; + counter-reset: step-counter; + + > li { + position: relative; + + &::before { + position: absolute; + top: 0.2em; + left: -1.6em; + color: $grey-dk-000; + content: counter(step-counter); + counter-increment: step-counter; + @include fs-3; + + @include mq(sm) { + top: 0.11em; + } + } + + ol { + counter-reset: sub-counter; + + li { + &::before { + content: counter(sub-counter, lower-alpha); + counter-increment: sub-counter; + } + } + } + } + } + + ul { + list-style: none; + + > li { + &::before { + position: absolute; + margin-left: -1.4em; + color: $grey-dk-000; + content: "•"; + } + } + } + + .task-list { + padding-left: 0; + } + + .task-list-item { + display: flex; + align-items: center; + + &::before { + content: ""; + } + } + + .task-list-item-checkbox { + margin-right: 0.6em; + } + + hr + * { + margin-top: 0; + } + + h1:first-of-type { + margin-top: 0.5em; + } + + dl { + display: grid; + grid-template: auto / 10em 1fr; + } + + dt, + dd { + margin: 0.25em 0; + } + + dt { + grid-column: 1; + font-weight: 500; + text-align: right; + &::after { + content: ":"; + } + } + + dd { + grid-column: 2; + margin-bottom: 0; + margin-left: 1em; + blockquote, + div, + dl, + dt, + h1, + h2, + h3, + h4, + h5, + h6, + li, + ol, + p, + pre, + table, + ul, + .table-wrapper { + &:first-child { + margin-top: 0; + } + } + } + + dd, + ol, + ul { + dl:first-child { + dt:first-child, + dd:nth-child(2) { + margin-top: 0; + } + } + } + + .anchor-heading { + position: absolute; + right: -$sp-4; + width: $sp-5; + height: 100%; + padding-right: $sp-1; + padding-left: $sp-1; + overflow: visible; + + @include mq(md) { + right: auto; + left: -$sp-5; + } + + svg { + display: inline-block; + width: 100%; + height: 100%; + color: $link-color; + visibility: hidden; + } + } + + .anchor-heading:hover, + h1:hover > .anchor-heading, + h2:hover > .anchor-heading, + h3:hover > .anchor-heading, + h4:hover > .anchor-heading, + h5:hover > .anchor-heading, + h6:hover > .anchor-heading { + svg { + visibility: visible; + } + } + + summary { + cursor: pointer; + } + + h1, + h2, + h3, + h4, + h5, + h6 { + position: relative; + margin-top: 1.5em; + margin-bottom: 0.25em; + + &:first-child { + margin-top: $sp-2; + } + + + table, + + .table-wrapper, + + .code-example, + + .highlighter-rouge { + margin-top: 1em; + } + + + p { + margin-top: 0; + } + } +} diff --git a/docs/_sass/labels.scss b/docs/_sass/labels.scss new file mode 100644 index 0000000..e08ae80 --- /dev/null +++ b/docs/_sass/labels.scss @@ -0,0 +1,37 @@ +// +// Labels (not the form kind) +// + +.label, +.label-blue { + display: inline-block; + padding-top: 0.16em; + padding-right: 0.56em; + padding-bottom: 0.16em; + padding-left: 0.56em; + margin-right: $sp-2; + margin-left: $sp-2; + color: $white; + text-transform: uppercase; + vertical-align: middle; + background-color: $blue-100; + @include fs-2; + border-radius: 12px; +} + +.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/docs/_sass/layout.scss b/docs/_sass/layout.scss new file mode 100644 index 0000000..004cbe7 --- /dev/null +++ b/docs/_sass/layout.scss @@ -0,0 +1,205 @@ +// +// The basic two column layout +// + +.side-bar { + z-index: 0; + display: flex; + flex-wrap: wrap; + background-color: $sidebar-color; + + @include mq(md) { + flex-wrap: nowrap; + position: fixed; + width: $nav-width-md; + height: 100%; + flex-direction: column; + border-right: $border $border-color; + align-items: flex-end; + } + + @include mq(lg) { + width: calc((100% - #{$nav-width + $content-width}) / 2 + #{$nav-width}); + min-width: $nav-width; + } +} + +.main { + @include mq(md) { + position: relative; + max-width: $content-width; + margin-left: $nav-width-md; + } + + @include mq(lg) { + margin-left: calc( + (100% - #{$nav-width + $content-width}) / 2 + #{$nav-width} + ); + } +} + +.main-content-wrap { + @include container; + padding-top: $gutter-spacing-sm; + padding-bottom: $gutter-spacing-sm; + + @include mq(md) { + padding-top: $gutter-spacing; + padding-bottom: $gutter-spacing; + } +} + +.main-header { + z-index: 0; + display: none; + background-color: $sidebar-color; + + @include mq(md) { + display: flex; + justify-content: space-between; + height: $header-height; + background-color: $body-background-color; + border-bottom: $border $border-color; + } + + &.nav-open { + display: block; + + @include mq(md) { + display: flex; + } + } +} + +.site-nav, +.site-header, +.site-footer { + width: 100%; + + @include mq(lg) { + width: $nav-width; + } +} + +.site-nav { + display: none; + + &.nav-open { + display: block; + } + + @include mq(md) { + display: block; + padding-top: $sp-8; + padding-bottom: $gutter-spacing-sm; + overflow-y: auto; + flex: 1 1 auto; + } +} + +.site-header { + display: flex; + min-height: $header-height; + align-items: center; + + @include mq(md) { + height: $header-height; + max-height: $header-height; + border-bottom: $border $border-color; + } +} + +.site-title { + @include container; + flex-grow: 1; + display: flex; + height: 100%; + align-items: center; + padding-top: $sp-3; + padding-bottom: $sp-3; + color: $body-heading-color; + @include fs-6; + + @include mq(md) { + padding-top: $sp-2; + padding-bottom: $sp-2; + } +} + +@if variable-exists(logo) { + .site-logo { + width: 100%; + height: 100%; + background-image: url($logo); + background-repeat: no-repeat; + background-position: left center; + background-size: contain; + } +} + +.site-button { + display: flex; + height: 100%; + padding: $gutter-spacing-sm; + align-items: center; +} + +@include mq(md) { + .site-header .site-button { + display: none; + } +} + +.site-title:hover { + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 80%, + rgba($feedback-color, 0) 100% + ); +} + +.site-button:hover { + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 100% + ); +} + +// stylelint-disable selector-max-type + +body { + position: relative; + padding-bottom: $sp-10; + overflow-y: scroll; + + @include mq(md) { + position: static; + padding-bottom: 0; + } +} + +// stylelint-enable selector-max-type + +.site-footer { + @include container; + position: absolute; + bottom: 0; + left: 0; + padding-top: $sp-4; + padding-bottom: $sp-4; + color: $grey-dk-000; + @include fs-2; + + @include mq(md) { + position: static; + justify-self: end; + } +} + +.icon { + width: $sp-5; + height: $sp-5; + color: $link-color; +} diff --git a/docs/_sass/modules.scss b/docs/_sass/modules.scss new file mode 100644 index 0000000..d82591b --- /dev/null +++ b/docs/_sass/modules.scss @@ -0,0 +1,20 @@ +// +// Import external dependencies +// +@import "./vendor/normalize.scss/normalize.scss"; + +// +// Modules +// +@import "./base"; +@import "./layout"; +@import "./content"; +@import "./navigation"; +@import "./typography"; +@import "./labels"; +@import "./buttons"; +@import "./search"; +@import "./tables"; +@import "./code"; +@import "./utilities/utilities"; +@import "./print"; diff --git a/docs/_sass/navigation.scss b/docs/_sass/navigation.scss new file mode 100644 index 0000000..521c15f --- /dev/null +++ b/docs/_sass/navigation.scss @@ -0,0 +1,219 @@ +// +// Main nav, breadcrumb, etc... +// +// stylelint-disable selector-no-type, max-nesting-depth, selector-max-compound-selectors, selector-max-type, selector-max-specificity + +.nav-list { + padding: 0; + margin-top: 0; + margin-bottom: 0; + list-style: none; + + .nav-list-item { + @include fs-4; + position: relative; + margin: 0; + + @include mq(md) { + @include fs-3; + } + + .nav-list-link { + display: block; + min-height: $nav-list-item-height-sm; + padding-top: $sp-1; + padding-bottom: $sp-1; + line-height: #{$nav-list-item-height-sm - 2 * $sp-1}; + @if $nav-list-expander-right { + padding-right: $nav-list-item-height-sm; + padding-left: $gutter-spacing-sm; + } @else { + padding-right: $gutter-spacing-sm; + padding-left: $nav-list-item-height-sm; + } + + @include mq(md) { + min-height: $nav-list-item-height; + line-height: #{$nav-list-item-height - 2 * $sp-1}; + @if $nav-list-expander-right { + padding-right: $nav-list-item-height; + padding-left: $gutter-spacing; + } @else { + padding-right: $gutter-spacing; + padding-left: $nav-list-item-height; + } + } + + &.active { + font-weight: 600; + text-decoration: none; + } + + &:hover, + &.active { + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 80%, + rgba($feedback-color, 0) 100% + ); + } + } + + .nav-list-expander { + position: absolute; + @if $nav-list-expander-right { + right: 0; + } + width: $nav-list-item-height-sm; + height: $nav-list-item-height-sm; + padding-top: #{$nav-list-item-height-sm / 4}; + padding-right: #{$nav-list-item-height-sm / 4}; + padding-bottom: #{$nav-list-item-height-sm / 4}; + padding-left: #{$nav-list-item-height-sm / 4}; + color: $link-color; + + @include mq(md) { + width: $nav-list-item-height; + height: $nav-list-item-height; + padding-top: #{$nav-list-item-height / 4}; + padding-right: #{$nav-list-item-height / 4}; + padding-bottom: #{$nav-list-item-height / 4}; + padding-left: #{$nav-list-item-height / 4}; + } + + &:hover { + background-image: linear-gradient( + -90deg, + rgba($feedback-color, 1) 0%, + rgba($feedback-color, 0.8) 100% + ); + } + + @if $nav-list-expander-right { + svg { + transform: rotate(90deg); + } + } + } + + > .nav-list { + display: none; + padding-left: $sp-3; + list-style: none; + + .nav-list-item { + position: relative; + + .nav-list-link { + color: $nav-child-link-color; + } + + .nav-list-expander { + color: $nav-child-link-color; + } + } + } + + &.active { + > .nav-list-expander svg { + @if $nav-list-expander-right { + transform: rotate(-90deg); + } @else { + transform: rotate(90deg); + } + } + + > .nav-list { + display: block; + } + } + } +} + +.nav-category { + padding-top: $sp-2; + padding-right: $gutter-spacing-sm; + padding-bottom: $sp-2; + padding-left: $gutter-spacing-sm; + font-weight: 600; + text-align: end; + text-transform: uppercase; + border-bottom: $border $border-color; + @include fs-2; + + @include mq(md) { + padding-right: $gutter-spacing; + padding-left: $gutter-spacing; + margin-top: $gutter-spacing-sm; + text-align: start; + + &:first-child { + margin-top: 0; + } + } +} + +// Aux nav + +.aux-nav { + height: 100%; + overflow-x: auto; + @include fs-2; + + .aux-nav-list { + display: flex; + height: 100%; + padding: 0; + margin: 0; + list-style: none; + } + + .aux-nav-list-item { + display: inline-block; + height: 100%; + padding: 0; + margin: 0; + } + + @include mq(md) { + padding-right: $gutter-spacing-sm; + } +} + +// Breadcrumb nav + +.breadcrumb-nav { + @include mq(md) { + margin-top: -$sp-4; + } +} + +.breadcrumb-nav-list { + padding-left: 0; + margin-bottom: $sp-3; + list-style: none; +} + +.breadcrumb-nav-list-item { + display: table-cell; + @include fs-2; + + &::before { + display: none; + } + + &::after { + display: inline-block; + margin-right: $sp-2; + margin-left: $sp-2; + color: $grey-dk-000; + content: "/"; + } + + &:last-child { + &::after { + content: ""; + } + } +} diff --git a/docs/_sass/print.scss b/docs/_sass/print.scss new file mode 100644 index 0000000..6e6de37 --- /dev/null +++ b/docs/_sass/print.scss @@ -0,0 +1,40 @@ +// stylelint-disable selector-max-specificity, selector-max-id, selector-max-type, selector-no-qualifying-type, primer/no-override, + +@media print { + .site-footer, + .site-button, + #edit-this-page, + #back-to-top, + .site-nav, + .main-header { + display: none !important; + } + + .side-bar { + width: 100%; + height: auto; + border-right: 0 !important; + } + + .site-header { + border-bottom: 1px solid $border-color; + } + + .site-title { + font-size: $root-font-size !important; + font-weight: 700 !important; + } + + .text-small { + font-size: 8pt !important; + } + + pre.highlight { + border: 1px solid $border-color; + } + + .main { + max-width: none; + margin-left: 0; + } +} diff --git a/docs/_sass/search.scss b/docs/_sass/search.scss new file mode 100644 index 0000000..4290210 --- /dev/null +++ b/docs/_sass/search.scss @@ -0,0 +1,323 @@ +// +// Search input and autocomplete +// + +.search { + position: relative; + z-index: 2; + flex-grow: 1; + height: $sp-10; + padding: $sp-2; + transition: padding linear #{$transition-duration / 2}; + + @include mq(md) { + position: relative !important; + width: auto !important; + height: 100% !important; + padding: 0; + transition: none; + } +} + +.search-input-wrap { + position: relative; + z-index: 1; + height: $sp-8; + overflow: hidden; + border-radius: $border-radius; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + transition: height linear #{$transition-duration / 2}; + + @include mq(md) { + position: absolute; + width: 100%; + max-width: $search-results-width; + height: 100% !important; + border-radius: 0; + box-shadow: none; + transition: width ease $transition-duration; + } +} + +.search-input { + position: absolute; + width: 100%; + height: 100%; + padding-top: $sp-2; + padding-right: $gutter-spacing-sm; + padding-bottom: $sp-2; + padding-left: #{$gutter-spacing-sm + $sp-5}; + font-size: 16px; + background-color: $search-background-color; + border-top: 0; + border-right: 0; + border-bottom: 0; + border-left: 0; + border-radius: 0; + + @include mq(md) { + padding-top: $gutter-spacing-sm; + padding-bottom: $gutter-spacing-sm; + padding-left: #{$gutter-spacing + $sp-5}; + font-size: 14px; + background-color: $body-background-color; + transition: padding-left linear #{$transition-duration / 2}; + } + + &:focus { + outline: 0; + + + .search-label .search-icon { + color: $link-color; + } + } +} + +.search-label { + position: absolute; + display: flex; + height: 100%; + padding-left: $gutter-spacing-sm; + + @include mq(md) { + padding-left: $gutter-spacing; + transition: padding-left linear #{$transition-duration / 2}; + } + + .search-icon { + width: #{$sp-4 * 1.2}; + height: #{$sp-4 * 1.2}; + align-self: center; + color: $grey-dk-000; + } +} + +.search-results { + position: absolute; + left: 0; + display: none; + width: 100%; + max-height: calc(100% - #{$sp-10}); + overflow-y: auto; + background-color: $search-background-color; + border-bottom-right-radius: $border-radius; + border-bottom-left-radius: $border-radius; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + + @include mq(md) { + top: 100%; + width: $search-results-width; + max-height: calc(100vh - 200%) !important; + } +} + +.search-results-list { + padding-left: 0; + margin-bottom: $sp-1; + list-style: none; + @include fs-4; + + @include mq(md) { + @include fs-3; + } +} + +.search-results-list-item { + padding: 0; + margin: 0; +} + +.search-result { + display: block; + padding-top: $sp-1; + padding-right: $sp-3; + padding-bottom: $sp-1; + padding-left: $sp-3; + + &:hover, + &.active { + background-color: $feedback-color; + } +} + +.search-result-title { + display: block; + padding-top: $sp-2; + padding-bottom: $sp-2; + + @include mq(sm) { + display: inline-block; + width: 40%; + padding-right: $sp-2; + vertical-align: top; + } +} + +.search-result-doc { + display: flex; + align-items: center; + word-wrap: break-word; + + &.search-result-doc-parent { + opacity: 0.5; + @include fs-3; + + @include mq(md) { + @include fs-2; + } + } + + .search-result-icon { + width: $sp-4; + height: $sp-4; + margin-right: $sp-2; + color: $link-color; + flex-shrink: 0; + } + + .search-result-doc-title { + overflow: auto; + } +} + +.search-result-section { + margin-left: #{$sp-4 + $sp-2}; + word-wrap: break-word; +} + +.search-result-rel-url { + display: block; + margin-left: #{$sp-4 + $sp-2}; + overflow: hidden; + color: $search-result-preview-color; + text-overflow: ellipsis; + white-space: nowrap; + @include fs-1; +} + +.search-result-previews { + display: block; + padding-top: $sp-2; + padding-bottom: $sp-2; + padding-left: $sp-4; + margin-left: $sp-2; + color: $search-result-preview-color; + word-wrap: break-word; + border-left: $border; + border-left-color: $border-color; + @include fs-2; + + @include mq(sm) { + display: inline-block; + width: 60%; + padding-left: $sp-2; + margin-left: 0; + vertical-align: top; + } +} + +.search-result-preview + .search-result-preview { + margin-top: $sp-1; +} + +.search-result-highlight { + font-weight: bold; +} + +.search-no-result { + padding-top: $sp-2; + padding-right: $sp-3; + padding-bottom: $sp-2; + padding-left: $sp-3; + @include fs-3; +} + +.search-button { + position: fixed; + right: $sp-4; + bottom: $sp-4; + display: flex; + width: $sp-9; + height: $sp-9; + background-color: $search-background-color; + border: 1px solid rgba($link-color, 0.3); + border-radius: #{$sp-9 / 2}; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + align-items: center; + justify-content: center; +} + +.search-overlay { + position: fixed; + top: 0; + left: 0; + z-index: 1; + width: 0; + height: 0; + background-color: rgba(0, 0, 0, 0.3); + opacity: 0; + transition: opacity ease $transition-duration, width 0s $transition-duration, + height 0s $transition-duration; +} + +.search-active { + .search { + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + padding: 0; + } + + .search-input-wrap { + height: $sp-10; + border-radius: 0; + + @include mq(md) { + width: $search-results-width; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); + } + } + + .search-input { + background-color: $search-background-color; + + @include mq(md) { + padding-left: 2.3rem; + } + } + + .search-label { + @include mq(md) { + padding-left: 0.6rem; + } + } + + .search-results { + display: block; + } + + .search-overlay { + width: 100%; + height: 100%; + opacity: 1; + transition: opacity ease $transition-duration, width 0s, height 0s; + } + + @include mq(md) { + .main { + position: fixed; + right: 0; + left: 0; + } + } + + .main-header { + padding-top: $sp-10; + + @include mq(md) { + padding-top: 0; + } + } +} diff --git a/docs/_sass/support/_functions.scss b/docs/_sass/support/_functions.scss new file mode 100644 index 0000000..6772f4e --- /dev/null +++ b/docs/_sass/support/_functions.scss @@ -0,0 +1,9 @@ +@function rem($size, $unit: "") { + $remSize: $size / $root-font-size; + + @if ($unit == false) { + @return #{$remSize}; + } @else { + @return #{$remSize}rem; + } +} diff --git a/docs/_sass/support/_variables.scss b/docs/_sass/support/_variables.scss new file mode 100644 index 0000000..3ab3f05 --- /dev/null +++ b/docs/_sass/support/_variables.scss @@ -0,0 +1,153 @@ +// +// Typography +// + +$body-font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", + Roboto, "Helvetica Neue", 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 !default; +$content-line-height: 1.6 !default; +$body-heading-line-height: 1.25 !default; + +// +// Font size +// `-sm` suffix is the size at the small (and above) media query +// + +$font-size-1: 9px !default; +$font-size-1-sm: 10px !default; +$font-size-2: 11px !default; //h4 - uppercased!, h6 not uppercased, text-small +$font-size-3: 12px !default; //h5 +$font-size-4: 14px !default; +$font-size-5: 16px !default; //h3 +$font-size-6: 18px !default; //h2 +$font-size-7: 24px !default; +$font-size-8: 32px !default; //h1 +$font-size-9: 36px !default; +$font-size-10: 42px !default; +$font-size-10-sm: 48px !default; + +// +// Colors +// + +$white: #fff !default; + +$grey-dk-000: #959396 !default; +$grey-dk-100: #5c5962 !default; +$grey-dk-200: #44434d !default; +$grey-dk-250: #302d36 !default; +$grey-dk-300: #27262b !default; + +$grey-lt-000: #f5f6fa !default; +$grey-lt-100: #eeebee !default; +$grey-lt-200: #ecebed !default; +$grey-lt-300: #e6e1e8 !default; + +$purple-000: #7253ed !default; +$purple-100: #5e41d0 !default; +$purple-200: #4e26af !default; +$purple-300: #381885 !default; + +$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; + +$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-background-color: $white !default; +$sidebar-color: $grey-lt-000 !default; +$search-background-color: $white !default; +$table-background-color: $white !default; +$code-background-color: $grey-lt-000 !default; +$feedback-color: darken($sidebar-color, 3%) !default; + +$body-text-color: $grey-dk-100 !default; +$body-heading-color: $grey-dk-300 !default; +$search-result-preview-color: $grey-dk-000 !default; +$nav-child-link-color: $grey-dk-100 !default; +$link-color: $purple-000 !default; +$btn-primary-color: $purple-100 !default; +$base-button-color: #f7f7f7 !default; + +// +// 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, +) !default; + +$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; // 3.5 rem == 56px +$sp-10: map-get($spacers, sp-10) !default; // 4 rem == 64px + +// +// Borders +// + +$border: 1px solid !default; +$border-radius: 4px !default; +$border-color: $grey-lt-100 !default; + +// +// Grid system +// + +$gutter-spacing: $sp-6 !default; +$gutter-spacing-sm: $sp-4 !default; +$nav-width: 264px !default; +$nav-width-md: 248px !default; +$nav-list-item-height: $sp-6 !default; +$nav-list-item-height-sm: $sp-8 !default; +$nav-list-expander-right: true; +$content-width: 800px !default; +$header-height: 60px !default; +$search-results-width: $content-width - $nav-width !default; +$transition-duration: 400ms; + +// +// Media queries in pixels +// + +$media-queries: ( + xs: 320px, + sm: 500px, + md: $content-width, + lg: $content-width + $nav-width, + xl: 1400px, +) !default; diff --git a/docs/_sass/support/mixins/_buttons.scss b/docs/_sass/support/mixins/_buttons.scss new file mode 100644 index 0000000..e3e6c4f --- /dev/null +++ b/docs/_sass/support/mixins/_buttons.scss @@ -0,0 +1,27 @@ +// Colored button + +@mixin btn-color($fg, $bg) { + color: $fg; + background-color: darken($bg, 2%); + 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-color: darken($bg, 4%); + 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/docs/_sass/support/mixins/_layout.scss b/docs/_sass/support/mixins/_layout.scss new file mode 100644 index 0000000..27ad6c7 --- /dev/null +++ b/docs/_sass/support/mixins/_layout.scss @@ -0,0 +1,34 @@ +// Media query + +// Media query mixin +// Usage: +// @include mq(md) { +// ..medium and up styles +// } +@mixin mq($name) { + // Retrieves the value from the key + $value: map-get($media-queries, $name); + + // If the key exists in the map + @if $value != null { + // Prints a media query based on the value + @media (min-width: rem($value)) { + @content; + } + } @else { + @warn "No value could be retrieved from `#{$media-query}`. " + + "Please make sure it is defined in `$media-queries` map."; + } +} + +// Responsive container + +@mixin container { + padding-right: $gutter-spacing-sm; + padding-left: $gutter-spacing-sm; + + @include mq(md) { + padding-right: $gutter-spacing; + padding-left: $gutter-spacing; + } +} diff --git a/docs/_sass/support/mixins/_typography.scss b/docs/_sass/support/mixins/_typography.scss new file mode 100644 index 0000000..5207fcd --- /dev/null +++ b/docs/_sass/support/mixins/_typography.scss @@ -0,0 +1,84 @@ +@mixin fs-1 { + font-size: $font-size-1 !important; + + @include mq(sm) { + font-size: $font-size-1-sm !important; + } +} + +@mixin fs-2 { + font-size: $font-size-2 !important; + + @include mq(sm) { + font-size: $font-size-3 !important; + } +} + +@mixin fs-3 { + font-size: $font-size-3 !important; + + @include mq(sm) { + font-size: $font-size-4 !important; + } +} + +@mixin fs-4 { + font-size: $font-size-4 !important; + + @include mq(sm) { + font-size: $font-size-5 !important; + } +} + +@mixin fs-5 { + font-size: $font-size-5 !important; + + @include mq(sm) { + font-size: $font-size-6 !important; + } +} + +@mixin fs-6 { + font-size: $font-size-6 !important; + + @include mq(sm) { + font-size: $font-size-7 !important; + line-height: $body-heading-line-height; + } +} + +@mixin fs-7 { + font-size: $font-size-7 !important; + line-height: $body-heading-line-height; + + @include mq(sm) { + font-size: $font-size-8 !important; + } +} + +@mixin fs-8 { + font-size: $font-size-8 !important; + line-height: $body-heading-line-height; + + @include mq(sm) { + font-size: $font-size-9 !important; + } +} + +@mixin fs-9 { + font-size: $font-size-9 !important; + line-height: $body-heading-line-height; + + @include mq(sm) { + font-size: $font-size-10 !important; + } +} + +@mixin fs-10 { + font-size: $font-size-10 !important; + line-height: $body-heading-line-height; + + @include mq(sm) { + font-size: $font-size-10-sm !important; + } +} diff --git a/docs/_sass/support/mixins/mixins.scss b/docs/_sass/support/mixins/mixins.scss new file mode 100644 index 0000000..0506fbf --- /dev/null +++ b/docs/_sass/support/mixins/mixins.scss @@ -0,0 +1,3 @@ +@import "./layout"; +@import "./buttons"; +@import "./typography"; diff --git a/docs/_sass/support/support.scss b/docs/_sass/support/support.scss new file mode 100644 index 0000000..8131a32 --- /dev/null +++ b/docs/_sass/support/support.scss @@ -0,0 +1,3 @@ +@import "./variables"; +@import "./functions"; +@import "./mixins/mixins"; diff --git a/docs/_sass/tables.scss b/docs/_sass/tables.scss new file mode 100644 index 0000000..b2ac7cd --- /dev/null +++ b/docs/_sass/tables.scss @@ -0,0 +1,58 @@ +// +// Tables +// +// stylelint-disable max-nesting-depth, selector-no-type, selector-max-type + +.table-wrapper { + display: block; + width: 100%; + max-width: 100%; + margin-bottom: $sp-5; + overflow-x: auto; + border-radius: $border-radius; + box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12), 0 3px 10px rgba(0, 0, 0, 0.08); +} + +table { + display: table; + min-width: 100%; + border-collapse: separate; +} + +th, +td { + @include fs-3; + min-width: 120px; + padding-top: $sp-2; + padding-right: $sp-3; + padding-bottom: $sp-2; + padding-left: $sp-3; + background-color: $table-background-color; + border-bottom: $border rgba($border-color, 0.5); + border-left: $border $border-color; + + &:first-of-type { + border-left: 0; + } +} + +tbody { + tr { + &:last-of-type { + th, + td { + border-bottom: 0; + } + + td { + padding-bottom: $sp-3; + } + } + } +} + +thead { + th { + border-bottom: $border $border-color; + } +} diff --git a/docs/_sass/typography.scss b/docs/_sass/typography.scss new file mode 100644 index 0000000..cadee36 --- /dev/null +++ b/docs/_sass/typography.scss @@ -0,0 +1,64 @@ +// +// Typography +// +// stylelint-disable primer/selector-no-utility, primer/no-override, selector-no-type, selector-max-type + +h1, +.text-alpha { + @include fs-8; + font-weight: 300; +} + +h2, +.text-beta { + @include fs-6; +} + +h3, +.text-gamma { + @include fs-5; +} + +h4, +.text-delta { + @include fs-2; + font-weight: 400; + text-transform: uppercase; + letter-spacing: 0.1em; +} + +h4 code { + text-transform: none; +} + +h5, +.text-epsilon { + @include fs-3; + color: $grey-dk-200; +} + +h6, +.text-zeta { + @include fs-2; + color: $grey-dk-200; +} + +.text-small { + @include fs-2; +} + +.text-mono { + font-family: $mono-font-family !important; +} + +.text-left { + text-align: left !important; +} + +.text-center { + text-align: center !important; +} + +.text-right { + text-align: right !important; +} diff --git a/docs/_sass/utilities/_colors.scss b/docs/_sass/utilities/_colors.scss new file mode 100644 index 0000000..f3607ab --- /dev/null +++ b/docs/_sass/utilities/_colors.scss @@ -0,0 +1,239 @@ +// +// Utility classes for colors +// + +// Text colors + +.text-grey-dk-000 { + color: $grey-dk-000 !important; +} + +.text-grey-dk-100 { + color: $grey-dk-100 !important; +} + +.text-grey-dk-200 { + color: $grey-dk-200 !important; +} + +.text-grey-dk-250 { + color: $grey-dk-250 !important; +} + +.text-grey-dk-300 { + color: $grey-dk-300 !important; +} + +.text-grey-lt-000 { + color: $grey-lt-000 !important; +} + +.text-grey-lt-100 { + color: $grey-lt-100 !important; +} + +.text-grey-lt-200 { + color: $grey-lt-200 !important; +} + +.text-grey-lt-300 { + color: $grey-lt-300 !important; +} + +.text-blue-000 { + color: $blue-000 !important; +} + +.text-blue-100 { + color: $blue-100 !important; +} + +.text-blue-200 { + color: $blue-200 !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; +} + +.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-250 { + background-color: $grey-dk-250 !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/docs/_sass/utilities/_layout.scss b/docs/_sass/utilities/_layout.scss new file mode 100644 index 0000000..37ebe42 --- /dev/null +++ b/docs/_sass/utilities/_layout.scss @@ -0,0 +1,95 @@ +// stylelint-disable primer/selector-no-utility, primer/no-override +// +// Utility classes for layout +// + +// Display + +.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; + } + } + } +} + +// Horizontal alignment + +.float-left { + float: left !important; +} + +.float-right { + float: right !important; +} + +.flex-justify-start { + justify-content: flex-start !important; +} + +.flex-justify-end { + justify-content: flex-end !important; +} + +.flex-justify-between { + justify-content: space-between !important; +} + +.flex-justify-around { + justify-content: space-around !important; +} + +// 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/docs/_sass/utilities/_lists.scss b/docs/_sass/utilities/_lists.scss new file mode 100644 index 0000000..c7b2293 --- /dev/null +++ b/docs/_sass/utilities/_lists.scss @@ -0,0 +1,17 @@ +// +// Utility classes for lists +// + +// stylelint-disable primer/selector-no-utility, primer/no-override, selector-max-type + +.list-style-none { + padding: 0 !important; + margin: 0 !important; + list-style: none !important; + + li { + &::before { + display: none !important; + } + } +} diff --git a/docs/_sass/utilities/_spacing.scss b/docs/_sass/utilities/_spacing.scss new file mode 100644 index 0000000..162f801 --- /dev/null +++ b/docs/_sass/utilities/_spacing.scss @@ -0,0 +1,165 @@ +// +// 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, primer/no-override + +// Margin spacer utilities + +.mx-auto { + margin-right: auto !important; + margin-left: auto !important; +} + +@for $i from 1 through length($spacers) { + $size: #{map-get($spacers, sp-#{$i - 1})}; + $scale: #{$i - 1}; + + // .m-0, .m-1, .m-2... + .m-#{$scale} { + margin: #{$size} !important; + } + .mt-#{$scale} { + margin-top: #{$size} !important; + } + .mr-#{$scale} { + margin-right: #{$size} !important; + } + .mb-#{$scale} { + margin-bottom: #{$size} !important; + } + .ml-#{$scale} { + margin-left: #{$size} !important; + } + + .mx-#{$scale} { + margin-right: #{$size} !important; + margin-left: #{$size} !important; + } + + .my-#{$scale} { + margin-top: #{$size} !important; + margin-bottom: #{$size} !important; + } + + .mxn-#{$scale} { + margin-right: -#{$size} !important; + margin-left: -#{$size} !important; + } + .mx-#{$scale}-auto { + margin-right: auto !important; + margin-left: auto !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}; + + // .m-sm-0, .m-md-1, .m-lg-2... + .m-#{$media-query}-#{$scale} { + margin: #{$size} !important; + } + .mt-#{$media-query}-#{$scale} { + margin-top: #{$size} !important; + } + .mr-#{$media-query}-#{$scale} { + margin-right: #{$size} !important; + } + .mb-#{$media-query}-#{$scale} { + margin-bottom: #{$size} !important; + } + .ml-#{$media-query}-#{$scale} { + margin-left: #{$size} !important; + } + + .mx-#{$media-query}-#{$scale} { + margin-right: #{$size} !important; + margin-left: #{$size} !important; + } + + .my-#{$media-query}-#{$scale} { + margin-top: #{$size} !important; + margin-bottom: #{$size} !important; + } + + .mxn-#{$media-query}-#{$scale} { + margin-right: -#{$size} !important; + margin-left: -#{$size} !important; + } + } + } +} + +// Padding spacer utilities + +@for $i from 1 through length($spacers) { + $size: #{map-get($spacers, sp-#{$i - 1})}; + $scale: #{$i - 1}; + + // .p-0, .p-1, .p-2... + .p-#{$scale} { + padding: #{$size} !important; + } + .pt-#{$scale} { + padding-top: #{$size} !important; + } + .pr-#{$scale} { + padding-right: #{$size} !important; + } + .pb-#{$scale} { + padding-bottom: #{$size} !important; + } + .pl-#{$scale} { + padding-left: #{$size} !important; + } + + .px-#{$scale} { + padding-right: #{$size} !important; + padding-left: #{$size} !important; + } + + .py-#{$scale} { + padding-top: #{$size} !important; + padding-bottom: #{$size} !important; + } +} + +@each $media-query in map-keys($media-queries) { + @include mq($media-query) { + @for $i from 1 through length($spacers) { + $size: #{map-get($spacers, sp-#{$i - 1})}; + $scale: #{$i - 1}; + + // .p-sm-0, .p-md-1, .p-lg-2... + .p-#{$media-query}-#{$scale} { + padding: #{$size} !important; + } + .pt-#{$media-query}-#{$scale} { + padding-top: #{$size} !important; + } + .pr-#{$media-query}-#{$scale} { + padding-right: #{$size} !important; + } + .pb-#{$media-query}-#{$scale} { + padding-bottom: #{$size} !important; + } + .pl-#{$media-query}-#{$scale} { + padding-left: #{$size} !important; + } + + .px-#{$media-query}-#{$scale} { + padding-right: #{$size} !important; + padding-left: #{$size} !important; + } + + .py-#{$media-query}-#{$scale} { + padding-top: #{$size} !important; + padding-bottom: #{$size} !important; + } + } + } +} diff --git a/docs/_sass/utilities/_typography.scss b/docs/_sass/utilities/_typography.scss new file mode 100644 index 0000000..2397acb --- /dev/null +++ b/docs/_sass/utilities/_typography.scss @@ -0,0 +1,91 @@ +// +// Utility classes for typography +// + +// stylelint-disable primer/selector-no-utility, primer/no-override + +.fs-1 { + @include fs-1; +} + +.fs-2 { + @include fs-2; +} + +.fs-3 { + @include fs-3; +} + +.fs-4 { + @include fs-4; +} + +.fs-5 { + @include fs-5; +} + +.fs-6 { + @include fs-6; +} + +.fs-7 { + @include fs-7; +} + +.fs-8 { + @include fs-8; +} + +.fs-9 { + @include fs-9; +} + +.fs-10 { + @include fs-10; +} + +.fw-300 { + font-weight: 300 !important; +} + +.fw-400 { + font-weight: 400 !important; +} + +.fw-500 { + font-weight: 500 !important; +} + +.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/docs/_sass/utilities/utilities.scss b/docs/_sass/utilities/utilities.scss new file mode 100644 index 0000000..6c25bdf --- /dev/null +++ b/docs/_sass/utilities/utilities.scss @@ -0,0 +1,5 @@ +@import "./colors"; +@import "./layout"; +@import "./typography"; +@import "./lists"; +@import "./spacing"; diff --git a/docs/_sass/vendor/normalize.scss/README.md b/docs/_sass/vendor/normalize.scss/README.md new file mode 100644 index 0000000..7af1714 --- /dev/null +++ b/docs/_sass/vendor/normalize.scss/README.md @@ -0,0 +1,7 @@ +# normalize.scss + +Normalize.scss is an SCSS copy of [normalize.css](http://necolas.github.io/normalize.css), a customisable CSS file that makes browsers render all elements more consistently and in line with modern standards. + +The [normalize.scss fork](https://github.com/guerrero/normalize.scss) of [normalize.css](http://necolas.github.io/normalize.css) was archived in 2014, and has not been updated since v0.1.0. + +[View the normalize.css test file](http://necolas.github.io/normalize.css/latest/test.html) diff --git a/docs/_sass/vendor/normalize.scss/normalize.scss b/docs/_sass/vendor/normalize.scss/normalize.scss new file mode 100644 index 0000000..192eb9c --- /dev/null +++ b/docs/_sass/vendor/normalize.scss/normalize.scss @@ -0,0 +1,349 @@ +/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ + +/* Document + ========================================================================== */ + +/** + * 1. Correct the line height in all browsers. + * 2. Prevent adjustments of font size after orientation changes in iOS. + */ + +html { + line-height: 1.15; /* 1 */ + -webkit-text-size-adjust: 100%; /* 2 */ +} + +/* Sections + ========================================================================== */ + +/** + * Remove the margin in all browsers. + */ + +body { + margin: 0; +} + +/** + * Render the `main` element consistently in IE. + */ + +main { + display: block; +} + +/** + * Correct the font size and margin on `h1` elements within `section` and + * `article` contexts in Chrome, Firefox, and Safari. + */ + +h1 { + font-size: 2em; + margin: 0.67em 0; +} + +/* Grouping content + ========================================================================== */ + +/** + * 1. Add the correct box sizing in Firefox. + * 2. Show the overflow in Edge and IE. + */ + +hr { + box-sizing: content-box; /* 1 */ + height: 0; /* 1 */ + overflow: visible; /* 2 */ +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +pre { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/* Text-level semantics + ========================================================================== */ + +/** + * Remove the gray background on active links in IE 10. + */ + +a { + background-color: transparent; +} + +/** + * 1. Remove the bottom border in Chrome 57- + * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. + */ + +abbr[title] { + border-bottom: none; /* 1 */ + text-decoration: underline; /* 2 */ + text-decoration: underline dotted; /* 2 */ +} + +/** + * Add the correct font weight in Chrome, Edge, and Safari. + */ + +b, +strong { + font-weight: bolder; +} + +/** + * 1. Correct the inheritance and scaling of font size in all browsers. + * 2. Correct the odd `em` font sizing in all browsers. + */ + +code, +kbd, +samp { + font-family: monospace, monospace; /* 1 */ + font-size: 1em; /* 2 */ +} + +/** + * Add the correct font size in all browsers. + */ + +small { + font-size: 80%; +} + +/** + * Prevent `sub` and `sup` elements from affecting the line height in + * all browsers. + */ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* Embedded content + ========================================================================== */ + +/** + * Remove the border on images inside links in IE 10. + */ + +img { + border-style: none; +} + +/* Forms + ========================================================================== */ + +/** + * 1. Change the font styles in all browsers. + * 2. Remove the margin in Firefox and Safari. + */ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; /* 1 */ + font-size: 100%; /* 1 */ + line-height: 1.15; /* 1 */ + margin: 0; /* 2 */ +} + +/** + * Show the overflow in IE. + * 1. Show the overflow in Edge. + */ + +button, +input { /* 1 */ + overflow: visible; +} + +/** + * Remove the inheritance of text transform in Edge, Firefox, and IE. + * 1. Remove the inheritance of text transform in Firefox. + */ + +button, +select { /* 1 */ + text-transform: none; +} + +/** + * Correct the inability to style clickable types in iOS and Safari. + */ + +button, +[type="button"], +[type="reset"], +[type="submit"] { + -webkit-appearance: button; +} + +/** + * Remove the inner border and padding in Firefox. + */ + +button::-moz-focus-inner, +[type="button"]::-moz-focus-inner, +[type="reset"]::-moz-focus-inner, +[type="submit"]::-moz-focus-inner { + border-style: none; + padding: 0; +} + +/** + * Restore the focus styles unset by the previous rule. + */ + +button:-moz-focusring, +[type="button"]:-moz-focusring, +[type="reset"]:-moz-focusring, +[type="submit"]:-moz-focusring { + outline: 1px dotted ButtonText; +} + +/** + * Correct the padding in Firefox. + */ + +fieldset { + padding: 0.35em 0.75em 0.625em; +} + +/** + * 1. Correct the text wrapping in Edge and IE. + * 2. Correct the color inheritance from `fieldset` elements in IE. + * 3. Remove the padding so developers are not caught out when they zero out + * `fieldset` elements in all browsers. + */ + +legend { + box-sizing: border-box; /* 1 */ + color: inherit; /* 2 */ + display: table; /* 1 */ + max-width: 100%; /* 1 */ + padding: 0; /* 3 */ + white-space: normal; /* 1 */ +} + +/** + * Add the correct vertical alignment in Chrome, Firefox, and Opera. + */ + +progress { + vertical-align: baseline; +} + +/** + * Remove the default vertical scrollbar in IE 10+. + */ + +textarea { + overflow: auto; +} + +/** + * 1. Add the correct box sizing in IE 10. + * 2. Remove the padding in IE 10. + */ + +[type="checkbox"], +[type="radio"] { + box-sizing: border-box; /* 1 */ + padding: 0; /* 2 */ +} + +/** + * Correct the cursor style of increment and decrement buttons in Chrome. + */ + +[type="number"]::-webkit-inner-spin-button, +[type="number"]::-webkit-outer-spin-button { + height: auto; +} + +/** + * 1. Correct the odd appearance in Chrome and Safari. + * 2. Correct the outline style in Safari. + */ + +[type="search"] { + -webkit-appearance: textfield; /* 1 */ + outline-offset: -2px; /* 2 */ +} + +/** + * Remove the inner padding in Chrome and Safari on macOS. + */ + +[type="search"]::-webkit-search-decoration { + -webkit-appearance: none; +} + +/** + * 1. Correct the inability to style clickable types in iOS and Safari. + * 2. Change font properties to `inherit` in Safari. + */ + +::-webkit-file-upload-button { + -webkit-appearance: button; /* 1 */ + font: inherit; /* 2 */ +} + +/* Interactive + ========================================================================== */ + +/* + * Add the correct display in Edge, IE 10+, and Firefox. + */ + +details { + display: block; +} + +/* + * Add the correct display in all browsers. + */ + +summary { + display: list-item; +} + +/* Misc + ========================================================================== */ + +/** + * Add the correct display in IE 10+. + */ + +template { + display: none; +} + +/** + * Add the correct display in IE 10. + */ + +[hidden] { + display: none; +} diff --git a/docs/assets/css/just-the-docs-dark.scss b/docs/assets/css/just-the-docs-dark.scss new file mode 100644 index 0000000..ac92fb1 --- /dev/null +++ b/docs/assets/css/just-the-docs-dark.scss @@ -0,0 +1,3 @@ +--- +--- +{% include css/just-the-docs.scss.liquid color_scheme="dark" %} diff --git a/docs/assets/css/just-the-docs-default.scss b/docs/assets/css/just-the-docs-default.scss new file mode 100644 index 0000000..63fde26 --- /dev/null +++ b/docs/assets/css/just-the-docs-default.scss @@ -0,0 +1,8 @@ +--- +--- +{% if site.color_scheme and site.color_scheme != "nil" %} + {% assign color_scheme = site.color_scheme %} +{% else %} + {% assign color_scheme = "light" %} +{% endif %} +{% include css/just-the-docs.scss.liquid color_scheme=color_scheme %} diff --git a/docs/assets/css/just-the-docs-light.scss b/docs/assets/css/just-the-docs-light.scss new file mode 100644 index 0000000..ac69688 --- /dev/null +++ b/docs/assets/css/just-the-docs-light.scss @@ -0,0 +1,3 @@ +--- +--- +{% include css/just-the-docs.scss.liquid color_scheme="light" %} diff --git a/docs/assets/images/search.svg b/docs/assets/images/search.svg new file mode 100644 index 0000000..421ca4d --- /dev/null +++ b/docs/assets/images/search.svg @@ -0,0 +1 @@ +Search diff --git a/docs/assets/js/just-the-docs.js b/docs/assets/js/just-the-docs.js new file mode 100644 index 0000000..c287ec0 --- /dev/null +++ b/docs/assets/js/just-the-docs.js @@ -0,0 +1,471 @@ +--- +--- +(function (jtd, undefined) { + +// Event handling + +jtd.addEvent = function(el, type, handler) { + if (el.attachEvent) el.attachEvent('on'+type, handler); else el.addEventListener(type, handler); +} +jtd.removeEvent = function(el, type, handler) { + if (el.detachEvent) el.detachEvent('on'+type, handler); else el.removeEventListener(type, handler); +} +jtd.onReady = function(ready) { + // 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(); + }); +} + +// Show/hide mobile menu + +function initNav() { + jtd.addEvent(document, 'click', function(e){ + var target = e.target; + while (target && !(target.classList && target.classList.contains('nav-list-expander'))) { + target = target.parentNode; + } + if (target) { + e.preventDefault(); + target.parentNode.classList.toggle('active'); + } + }); + + const siteNav = document.getElementById('site-nav'); + const mainHeader = document.getElementById('main-header'); + const menuButton = document.getElementById('menu-button'); + + jtd.addEvent(menuButton, 'click', function(e){ + e.preventDefault(); + + if (menuButton.classList.toggle('nav-open')) { + siteNav.classList.add('nav-open'); + mainHeader.classList.add('nav-open'); + } else { + siteNav.classList.remove('nav-open'); + mainHeader.classList.remove('nav-open'); + } + }); + + {%- if site.search_enabled != false and site.search.button %} + const searchInput = document.getElementById('search-input'); + const searchButton = document.getElementById('search-button'); + + jtd.addEvent(searchButton, 'click', function(e){ + e.preventDefault(); + + mainHeader.classList.add('nav-open'); + searchInput.focus(); + }); + {%- endif %} +} + +{%- if site.search_enabled != false %} +// Site search + +function initSearch() { + var request = new XMLHttpRequest(); + request.open('GET', '{{ "assets/js/search-data.json" | absolute_url }}', true); + + request.onload = function(){ + if (request.status >= 200 && request.status < 400) { + var docs = JSON.parse(request.responseText); + + lunr.tokenizer.separator = {{ site.search.tokenizer_separator | default: site.search_tokenizer_separator | default: "/[\s\-/]+/" }} + + var index = lunr(function(){ + this.ref('id'); + this.field('title', { boost: 200 }); + this.field('content', { boost: 2 }); + {%- if site.search.rel_url != false %} + this.field('relUrl'); + {%- endif %} + this.metadataWhitelist = ['position'] + + for (var i in docs) { + this.add({ + id: i, + title: docs[i].title, + content: docs[i].content, + {%- if site.search.rel_url != false %} + relUrl: docs[i].relUrl + {%- endif %} + }); + } + }); + + searchLoaded(index, docs); + } else { + console.log('Error loading ajax request. Request status:' + request.status); + } + }; + + request.onerror = function(){ + console.log('There was a connection error'); + }; + + request.send(); +} + +function searchLoaded(index, docs) { + var index = index; + var docs = docs; + var searchInput = document.getElementById('search-input'); + var searchResults = document.getElementById('search-results'); + var mainHeader = document.getElementById('main-header'); + var currentInput; + var currentSearchIndex = 0; + + function showSearch() { + document.documentElement.classList.add('search-active'); + } + + function hideSearch() { + document.documentElement.classList.remove('search-active'); + } + + function update() { + currentSearchIndex++; + + var input = searchInput.value; + if (input === '') { + hideSearch(); + } else { + showSearch(); + // scroll search input into view, workaround for iOS Safari + window.scroll(0, -1); + setTimeout(function(){ window.scroll(0, 0); }, 0); + } + if (input === currentInput) { + return; + } + currentInput = input; + searchResults.innerHTML = ''; + if (input === '') { + return; + } + + var results = index.query(function (query) { + var tokens = lunr.tokenizer(input) + query.term(tokens, { + boost: 10 + }); + query.term(tokens, { + wildcard: lunr.Query.wildcard.TRAILING + }); + }); + + if ((results.length == 0) && (input.length > 2)) { + var tokens = lunr.tokenizer(input).filter(function(token, i) { + return token.str.length < 20; + }) + if (tokens.length > 0) { + results = index.query(function (query) { + query.term(tokens, { + editDistance: Math.round(Math.sqrt(input.length / 2 - 1)) + }); + }); + } + } + + if (results.length == 0) { + var noResultsDiv = document.createElement('div'); + noResultsDiv.classList.add('search-no-result'); + noResultsDiv.innerText = 'No results found'; + searchResults.appendChild(noResultsDiv); + + } else { + var resultsList = document.createElement('ul'); + resultsList.classList.add('search-results-list'); + searchResults.appendChild(resultsList); + + addResults(resultsList, results, 0, 10, 100, currentSearchIndex); + } + + function addResults(resultsList, results, start, batchSize, batchMillis, searchIndex) { + if (searchIndex != currentSearchIndex) { + return; + } + for (var i = start; i < (start + batchSize); i++) { + if (i == results.length) { + return; + } + addResult(resultsList, results[i]); + } + setTimeout(function() { + addResults(resultsList, results, start + batchSize, batchSize, batchMillis, searchIndex); + }, batchMillis); + } + + function addResult(resultsList, result) { + var doc = docs[result.ref]; + + var resultsListItem = document.createElement('li'); + resultsListItem.classList.add('search-results-list-item'); + resultsList.appendChild(resultsListItem); + + var resultLink = document.createElement('a'); + resultLink.classList.add('search-result'); + resultLink.setAttribute('href', doc.url); + resultsListItem.appendChild(resultLink); + + var resultTitle = document.createElement('div'); + resultTitle.classList.add('search-result-title'); + resultLink.appendChild(resultTitle); + + var resultDoc = document.createElement('div'); + resultDoc.classList.add('search-result-doc'); + resultDoc.innerHTML = ''; + resultTitle.appendChild(resultDoc); + + var resultDocTitle = document.createElement('div'); + resultDocTitle.classList.add('search-result-doc-title'); + resultDocTitle.innerHTML = doc.doc; + resultDoc.appendChild(resultDocTitle); + var resultDocOrSection = resultDocTitle; + + if (doc.doc != doc.title) { + resultDoc.classList.add('search-result-doc-parent'); + var resultSection = document.createElement('div'); + resultSection.classList.add('search-result-section'); + resultSection.innerHTML = doc.title; + resultTitle.appendChild(resultSection); + resultDocOrSection = resultSection; + } + + var metadata = result.matchData.metadata; + var titlePositions = []; + var contentPositions = []; + for (var j in metadata) { + var meta = metadata[j]; + if (meta.title) { + var positions = meta.title.position; + for (var k in positions) { + titlePositions.push(positions[k]); + } + } + if (meta.content) { + var positions = meta.content.position; + for (var k in positions) { + var position = positions[k]; + var previewStart = position[0]; + var previewEnd = position[0] + position[1]; + var ellipsesBefore = true; + var ellipsesAfter = true; + for (var k = 0; k < {{ site.search.preview_words_before | default: 5 }}; k++) { + var nextSpace = doc.content.lastIndexOf(' ', previewStart - 2); + var nextDot = doc.content.lastIndexOf('. ', previewStart - 2); + if ((nextDot >= 0) && (nextDot > nextSpace)) { + previewStart = nextDot + 1; + ellipsesBefore = false; + break; + } + if (nextSpace < 0) { + previewStart = 0; + ellipsesBefore = false; + break; + } + previewStart = nextSpace + 1; + } + for (var k = 0; k < {{ site.search.preview_words_after | default: 10 }}; k++) { + var nextSpace = doc.content.indexOf(' ', previewEnd + 1); + var nextDot = doc.content.indexOf('. ', previewEnd + 1); + if ((nextDot >= 0) && (nextDot < nextSpace)) { + previewEnd = nextDot; + ellipsesAfter = false; + break; + } + if (nextSpace < 0) { + previewEnd = doc.content.length; + ellipsesAfter = false; + break; + } + previewEnd = nextSpace; + } + contentPositions.push({ + highlight: position, + previewStart: previewStart, previewEnd: previewEnd, + ellipsesBefore: ellipsesBefore, ellipsesAfter: ellipsesAfter + }); + } + } + } + + if (titlePositions.length > 0) { + titlePositions.sort(function(p1, p2){ return p1[0] - p2[0] }); + resultDocOrSection.innerHTML = ''; + addHighlightedText(resultDocOrSection, doc.title, 0, doc.title.length, titlePositions); + } + + if (contentPositions.length > 0) { + contentPositions.sort(function(p1, p2){ return p1.highlight[0] - p2.highlight[0] }); + var contentPosition = contentPositions[0]; + var previewPosition = { + highlight: [contentPosition.highlight], + previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd, + ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter + }; + var previewPositions = [previewPosition]; + for (var j = 1; j < contentPositions.length; j++) { + contentPosition = contentPositions[j]; + if (previewPosition.previewEnd < contentPosition.previewStart) { + previewPosition = { + highlight: [contentPosition.highlight], + previewStart: contentPosition.previewStart, previewEnd: contentPosition.previewEnd, + ellipsesBefore: contentPosition.ellipsesBefore, ellipsesAfter: contentPosition.ellipsesAfter + } + previewPositions.push(previewPosition); + } else { + previewPosition.highlight.push(contentPosition.highlight); + previewPosition.previewEnd = contentPosition.previewEnd; + previewPosition.ellipsesAfter = contentPosition.ellipsesAfter; + } + } + + var resultPreviews = document.createElement('div'); + resultPreviews.classList.add('search-result-previews'); + resultLink.appendChild(resultPreviews); + + var content = doc.content; + for (var j = 0; j < Math.min(previewPositions.length, {{ site.search.previews | default: 3 }}); j++) { + var position = previewPositions[j]; + + var resultPreview = document.createElement('div'); + resultPreview.classList.add('search-result-preview'); + resultPreviews.appendChild(resultPreview); + + if (position.ellipsesBefore) { + resultPreview.appendChild(document.createTextNode('... ')); + } + addHighlightedText(resultPreview, content, position.previewStart, position.previewEnd, position.highlight); + if (position.ellipsesAfter) { + resultPreview.appendChild(document.createTextNode(' ...')); + } + } + } + + {%- if site.search.rel_url != false %} + var resultRelUrl = document.createElement('span'); + resultRelUrl.classList.add('search-result-rel-url'); + resultRelUrl.innerText = doc.relUrl; + resultTitle.appendChild(resultRelUrl); + {%- endif %} + } + + function addHighlightedText(parent, text, start, end, positions) { + var index = start; + for (var i in positions) { + var position = positions[i]; + var span = document.createElement('span'); + span.innerHTML = text.substring(index, position[0]); + parent.appendChild(span); + index = position[0] + position[1]; + var highlight = document.createElement('span'); + highlight.classList.add('search-result-highlight'); + highlight.innerHTML = text.substring(position[0], index); + parent.appendChild(highlight); + } + var span = document.createElement('span'); + span.innerHTML = text.substring(index, end); + parent.appendChild(span); + } + } + + jtd.addEvent(searchInput, 'focus', function(){ + setTimeout(update, 0); + }); + + jtd.addEvent(searchInput, 'keyup', function(e){ + switch (e.keyCode) { + case 27: // When esc key is pressed, hide the results and clear the field + searchInput.value = ''; + break; + case 38: // arrow up + case 40: // arrow down + case 13: // enter + e.preventDefault(); + return; + } + update(); + }); + + jtd.addEvent(searchInput, 'keydown', function(e){ + switch (e.keyCode) { + case 38: // arrow up + e.preventDefault(); + var active = document.querySelector('.search-result.active'); + if (active) { + active.classList.remove('active'); + if (active.parentElement.previousSibling) { + var previous = active.parentElement.previousSibling.querySelector('.search-result'); + previous.classList.add('active'); + } + } + return; + case 40: // arrow down + e.preventDefault(); + var active = document.querySelector('.search-result.active'); + if (active) { + if (active.parentElement.nextSibling) { + var next = active.parentElement.nextSibling.querySelector('.search-result'); + active.classList.remove('active'); + next.classList.add('active'); + } + } else { + var next = document.querySelector('.search-result'); + if (next) { + next.classList.add('active'); + } + } + return; + case 13: // enter + e.preventDefault(); + var active = document.querySelector('.search-result.active'); + if (active) { + active.click(); + } else { + var first = document.querySelector('.search-result'); + if (first) { + first.click(); + } + } + return; + } + }); + + jtd.addEvent(document, 'click', function(e){ + if (e.target != searchInput) { + hideSearch(); + } + }); +} +{%- endif %} + +// Switch theme + +jtd.getTheme = function() { + var cssFileHref = document.querySelector('[rel="stylesheet"]').getAttribute('href'); + return cssFileHref.substring(cssFileHref.lastIndexOf('-') + 1, cssFileHref.length - 4); +} + +jtd.setTheme = function(theme) { + var cssFile = document.querySelector('[rel="stylesheet"]'); + cssFile.setAttribute('href', '{{ "assets/css/just-the-docs-" | absolute_url }}' + theme + '.css'); +} + +// Document ready + +jtd.onReady(function(){ + initNav(); + {%- if site.search_enabled != false %} + initSearch(); + {%- endif %} +}); + +})(window.jtd = window.jtd || {}); + +{% include js/custom.js %} diff --git a/docs/assets/js/vendor/lunr.min.js b/docs/assets/js/vendor/lunr.min.js new file mode 100644 index 0000000..34b279d --- /dev/null +++ b/docs/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 - 2.3.6 + * Copyright (C) 2019 Oliver Nightingale + * @license MIT + */ +!function(){var e=function(t){var r=new e.Builder;return r.pipeline.add(e.trimmer,e.stopWordFilter,e.stemmer),r.searchPipeline.add(e.stemmer),t.call(r,r),r.build()};e.version="2.3.6",e.utils={},e.utils.warn=function(e){return function(t){e.console&&console.warn&&console.warn(t)}}(this),e.utils.asString=function(e){return void 0===e||null===e?"":e.toString()},e.utils.clone=function(e){if(null===e||void 0===e)return e;for(var t=Object.create(null),r=Object.keys(e),i=0;i0){var c=e.utils.clone(r)||{};c.position=[a,l],c.index=s.length,s.push(new e.Token(i.slice(a,o),c))}a=o+1}}return s},e.tokenizer.separator=/[\s\-]+/,e.Pipeline=function(){this._stack=[]},e.Pipeline.registeredFunctions=Object.create(null),e.Pipeline.registerFunction=function(t,r){r in this.registeredFunctions&&e.utils.warn("Overwriting existing registered function: "+r),t.label=r,e.Pipeline.registeredFunctions[t.label]=t},e.Pipeline.warnIfFunctionNotRegistered=function(t){var r=t.label&&t.label in this.registeredFunctions;r||e.utils.warn("Function is not registered with pipeline. This may cause problems when serialising the index.\n",t)},e.Pipeline.load=function(t){var r=new e.Pipeline;return t.forEach(function(t){var i=e.Pipeline.registeredFunctions[t];if(!i)throw new Error("Cannot load unregistered function: "+t);r.add(i)}),r},e.Pipeline.prototype.add=function(){var t=Array.prototype.slice.call(arguments);t.forEach(function(t){e.Pipeline.warnIfFunctionNotRegistered(t),this._stack.push(t)},this)},e.Pipeline.prototype.after=function(t,r){e.Pipeline.warnIfFunctionNotRegistered(r);var i=this._stack.indexOf(t);if(i==-1)throw new Error("Cannot find existingFn");i+=1,this._stack.splice(i,0,r)},e.Pipeline.prototype.before=function(t,r){e.Pipeline.warnIfFunctionNotRegistered(r);var i=this._stack.indexOf(t);if(i==-1)throw new Error("Cannot find existingFn");this._stack.splice(i,0,r)},e.Pipeline.prototype.remove=function(e){var t=this._stack.indexOf(e);t!=-1&&this._stack.splice(t,1)},e.Pipeline.prototype.run=function(e){for(var t=this._stack.length,r=0;r1&&(se&&(r=n),s!=e);)i=r-t,n=t+Math.floor(i/2),s=this.elements[2*n];return s==e?2*n:s>e?2*n:sa?l+=2:o==a&&(t+=r[u+1]*i[l+1],u+=2,l+=2);return t},e.Vector.prototype.similarity=function(e){return this.dot(e)/this.magnitude()||0},e.Vector.prototype.toArray=function(){for(var e=new Array(this.elements.length/2),t=1,r=0;t0){var o,a=s.str.charAt(0);a in s.node.edges?o=s.node.edges[a]:(o=new e.TokenSet,s.node.edges[a]=o),1==s.str.length&&(o["final"]=!0),n.push({node:o,editsRemaining:s.editsRemaining,str:s.str.slice(1)})}if(0!=s.editsRemaining){if("*"in s.node.edges)var u=s.node.edges["*"];else{var u=new e.TokenSet;s.node.edges["*"]=u}if(0==s.str.length&&(u["final"]=!0),n.push({node:u,editsRemaining:s.editsRemaining-1,str:s.str}),s.str.length>1&&n.push({node:s.node,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)}),1==s.str.length&&(s.node["final"]=!0),s.str.length>=1){if("*"in s.node.edges)var l=s.node.edges["*"];else{var l=new e.TokenSet;s.node.edges["*"]=l}1==s.str.length&&(l["final"]=!0),n.push({node:l,editsRemaining:s.editsRemaining-1,str:s.str.slice(1)})}if(s.str.length>1){var c,h=s.str.charAt(0),d=s.str.charAt(1);d in s.node.edges?c=s.node.edges[d]:(c=new e.TokenSet,s.node.edges[d]=c),1==s.str.length&&(c["final"]=!0),n.push({node:c,editsRemaining:s.editsRemaining-1,str:h+s.str.slice(2)})}}}return i},e.TokenSet.fromString=function(t){for(var r=new e.TokenSet,i=r,n=0,s=t.length;n=e;t--){var r=this.uncheckedNodes[t],i=r.child.toString();i in this.minimizedNodes?r.parent.edges[r["char"]]=this.minimizedNodes[i]:(r.child._str=i,this.minimizedNodes[i]=r.child),this.uncheckedNodes.pop()}},e.Index=function(e){this.invertedIndex=e.invertedIndex,this.fieldVectors=e.fieldVectors,this.tokenSet=e.tokenSet,this.fields=e.fields,this.pipeline=e.pipeline},e.Index.prototype.search=function(t){return this.query(function(r){var i=new e.QueryParser(t,r);i.parse()})},e.Index.prototype.query=function(t){for(var r=new e.Query(this.fields),i=Object.create(null),n=Object.create(null),s=Object.create(null),o=Object.create(null),a=Object.create(null),u=0;u1?this._b=1:this._b=e},e.Builder.prototype.k1=function(e){this._k1=e},e.Builder.prototype.add=function(t,r){var i=t[this._ref],n=Object.keys(this._fields);this._documents[i]=r||{},this.documentCount+=1;for(var s=0;s=this.length)return e.QueryLexer.EOS;var t=this.str.charAt(this.pos);return this.pos+=1,t},e.QueryLexer.prototype.width=function(){return this.pos-this.start},e.QueryLexer.prototype.ignore=function(){this.start==this.pos&&(this.pos+=1),this.start=this.pos},e.QueryLexer.prototype.backup=function(){this.pos-=1},e.QueryLexer.prototype.acceptDigitRun=function(){var t,r;do t=this.next(),r=t.charCodeAt(0);while(r>47&&r<58);t!=e.QueryLexer.EOS&&this.backup()},e.QueryLexer.prototype.more=function(){return this.pos1&&(t.backup(),t.emit(e.QueryLexer.TERM)),t.ignore(),t.more())return e.QueryLexer.lexText},e.QueryLexer.lexEditDistance=function(t){return t.ignore(),t.acceptDigitRun(),t.emit(e.QueryLexer.EDIT_DISTANCE),e.QueryLexer.lexText},e.QueryLexer.lexBoost=function(t){return t.ignore(),t.acceptDigitRun(),t.emit(e.QueryLexer.BOOST),e.QueryLexer.lexText},e.QueryLexer.lexEOS=function(t){t.width()>0&&t.emit(e.QueryLexer.TERM)},e.QueryLexer.termSeparator=e.tokenizer.separator,e.QueryLexer.lexText=function(t){for(;;){var r=t.next();if(r==e.QueryLexer.EOS)return e.QueryLexer.lexEOS;if(92!=r.charCodeAt(0)){if(":"==r)return e.QueryLexer.lexField;if("~"==r)return t.backup(),t.width()>0&&t.emit(e.QueryLexer.TERM),e.QueryLexer.lexEditDistance;if("^"==r)return t.backup(),t.width()>0&&t.emit(e.QueryLexer.TERM),e.QueryLexer.lexBoost;if("+"==r&&1===t.width())return t.emit(e.QueryLexer.PRESENCE),e.QueryLexer.lexText;if("-"==r&&1===t.width())return t.emit(e.QueryLexer.PRESENCE),e.QueryLexer.lexText;if(r.match(e.QueryLexer.termSeparator))return e.QueryLexer.lexTerm}else t.escapeCharacter()}},e.QueryParser=function(t,r){this.lexer=new e.QueryLexer(t),this.query=r,this.currentClause={},this.lexemeIdx=0},e.QueryParser.prototype.parse=function(){this.lexer.run(),this.lexemes=this.lexer.lexemes;for(var t=e.QueryParser.parseClause;t;)t=t(this);return this.query},e.QueryParser.prototype.peekLexeme=function(){return this.lexemes[this.lexemeIdx]},e.QueryParser.prototype.consumeLexeme=function(){var e=this.peekLexeme();return this.lexemeIdx+=1,e},e.QueryParser.prototype.nextClause=function(){var e=this.currentClause;this.query.clause(e),this.currentClause={}},e.QueryParser.parseClause=function(t){var r=t.peekLexeme();if(void 0!=r)switch(r.type){case e.QueryLexer.PRESENCE:return e.QueryParser.parsePresence;case e.QueryLexer.FIELD:return e.QueryParser.parseField;case e.QueryLexer.TERM:return e.QueryParser.parseTerm;default:var i="expected either a field or a term, found "+r.type;throw r.str.length>=1&&(i+=" with value '"+r.str+"'"),new e.QueryParseError(i,r.start,r.end)}},e.QueryParser.parsePresence=function(t){var r=t.consumeLexeme();if(void 0!=r){switch(r.str){case"-":t.currentClause.presence=e.Query.presence.PROHIBITED;break;case"+":t.currentClause.presence=e.Query.presence.REQUIRED;break;default:var i="unrecognised presence operator'"+r.str+"'";throw new e.QueryParseError(i,r.start,r.end)}var n=t.peekLexeme();if(void 0==n){var i="expecting term or field, found nothing";throw new e.QueryParseError(i,r.start,r.end)}switch(n.type){case e.QueryLexer.FIELD:return e.QueryParser.parseField;case e.QueryLexer.TERM:return e.QueryParser.parseTerm;default:var i="expecting term or field, found '"+n.type+"'";throw new e.QueryParseError(i,n.start,n.end)}}},e.QueryParser.parseField=function(t){var r=t.consumeLexeme();if(void 0!=r){if(t.query.allFields.indexOf(r.str)==-1){var i=t.query.allFields.map(function(e){return"'"+e+"'"}).join(", "),n="unrecognised field '"+r.str+"', possible fields: "+i;throw new e.QueryParseError(n,r.start,r.end)}t.currentClause.fields=[r.str];var s=t.peekLexeme();if(void 0==s){var n="expecting term, found nothing";throw new e.QueryParseError(n,r.start,r.end)}switch(s.type){case e.QueryLexer.TERM:return e.QueryParser.parseTerm;default:var n="expecting term, found '"+s.type+"'";throw new e.QueryParseError(n,s.start,s.end)}}},e.QueryParser.parseTerm=function(t){var r=t.consumeLexeme();if(void 0!=r){t.currentClause.term=r.str.toLowerCase(),r.str.indexOf("*")!=-1&&(t.currentClause.usePipeline=!1);var i=t.peekLexeme();if(void 0==i)return void t.nextClause();switch(i.type){case e.QueryLexer.TERM:return t.nextClause(),e.QueryParser.parseTerm;case e.QueryLexer.FIELD:return t.nextClause(),e.QueryParser.parseField;case e.QueryLexer.EDIT_DISTANCE:return e.QueryParser.parseEditDistance;case e.QueryLexer.BOOST:return e.QueryParser.parseBoost;case e.QueryLexer.PRESENCE:return t.nextClause(),e.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+i.type+"'";throw new e.QueryParseError(n,i.start,i.end)}}},e.QueryParser.parseEditDistance=function(t){var r=t.consumeLexeme();if(void 0!=r){var i=parseInt(r.str,10);if(isNaN(i)){var n="edit distance must be numeric";throw new e.QueryParseError(n,r.start,r.end)}t.currentClause.editDistance=i;var s=t.peekLexeme();if(void 0==s)return void t.nextClause();switch(s.type){case e.QueryLexer.TERM:return t.nextClause(),e.QueryParser.parseTerm;case e.QueryLexer.FIELD:return t.nextClause(),e.QueryParser.parseField;case e.QueryLexer.EDIT_DISTANCE:return e.QueryParser.parseEditDistance;case e.QueryLexer.BOOST:return e.QueryParser.parseBoost;case e.QueryLexer.PRESENCE:return t.nextClause(),e.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+s.type+"'";throw new e.QueryParseError(n,s.start,s.end)}}},e.QueryParser.parseBoost=function(t){var r=t.consumeLexeme();if(void 0!=r){var i=parseInt(r.str,10);if(isNaN(i)){var n="boost must be numeric";throw new e.QueryParseError(n,r.start,r.end)}t.currentClause.boost=i;var s=t.peekLexeme();if(void 0==s)return void t.nextClause();switch(s.type){case e.QueryLexer.TERM:return t.nextClause(),e.QueryParser.parseTerm;case e.QueryLexer.FIELD:return t.nextClause(),e.QueryParser.parseField;case e.QueryLexer.EDIT_DISTANCE:return e.QueryParser.parseEditDistance;case e.QueryLexer.BOOST:return e.QueryParser.parseBoost;case e.QueryLexer.PRESENCE:return t.nextClause(),e.QueryParser.parsePresence;default:var n="Unexpected lexeme type '"+s.type+"'";throw new e.QueryParseError(n,s.start,s.end)}}},function(e,t){"function"==typeof define&&define.amd?define(t):"object"==typeof exports?module.exports=t():e.lunr=t()}(this,function(){return e})}(); diff --git a/docs/assets/js/zzzz-search-data.json b/docs/assets/js/zzzz-search-data.json new file mode 100644 index 0000000..6235244 --- /dev/null +++ b/docs/assets/js/zzzz-search-data.json @@ -0,0 +1,72 @@ +--- +permalink: /assets/js/search-data.json +--- +{ +{%- assign i = 0 -%} +{%- assign pages_array = '' | split: '' -%} +{%- assign pages_array = pages_array | push: site.html_pages -%} +{%- if site.just_the_docs.collections -%} + {%- for collection_entry in site.just_the_docs.collections -%} + {%- assign collection_key = collection_entry[0] -%} + {%- assign collection_value = collection_entry[1] -%} + {%- assign collection = site[collection_key] -%} + {%- if collection_value.search_exclude != true -%} + {%- assign pages_array = pages_array | push: collection -%} + {%- endif -%} + {%- endfor -%} +{%- endif -%} +{%- for pages in pages_array -%} + {%- for page in pages -%} + {%- if page.title and page.search_exclude != true -%} + {%- assign page_content = page.content -%} + {%- assign heading_level = site.search.heading_level | default: 2 -%} + {%- for j in (2..heading_level) -%} + {%- assign tag = '' -%} + {%- assign title = titleAndContent[0] | replace_first: '>', '

' | split: '

' -%} + {%- assign title = title[1] | strip_html -%} + {%- assign content = titleAndContent[1] -%} + {%- assign url = page.url -%} + {%- if title == page.title and parts[0] == '' -%} + {%- assign title_found = true -%} + {%- else -%} + {%- assign id = titleAndContent[0] -%} + {%- assign id = id | split: 'id="' -%} + {%- if id.size == 2 -%} + {%- assign id = id[1] -%} + {%- assign id = id | split: '"' -%} + {%- assign id = id[0] -%} + {%- capture url -%}{{ url | append: '#' | append: id }}{%- endcapture -%} + {%- endif -%} + {%- endif -%} + {%- unless i == 0 -%},{%- endunless -%} + "{{ i }}": { + "doc": {{ page.title | jsonify }}, + "title": {{ title | jsonify }}, + "content": {{ content | replace: '