diff --git a/package-lock.json b/package-lock.json index 2937a489..15be9829 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5652,6 +5652,207 @@ "ansi-regex": "^4.1.0" } }, + "type-check": { + "version": "0.3.2", + "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", + "integrity": "sha1-WITKtRLPHTVeP7eE8wgEsrUg23I=", + "dev": true, + "requires": { + "readable-stream": "~2.3.6", + "xtend": "~4.0.1" + } + } + } + }, + "gulp-connect": { + "version": "5.7.0", + "resolved": "https://registry.npmjs.org/gulp-connect/-/gulp-connect-5.7.0.tgz", + "integrity": "sha512-8tRcC6wgXMLakpPw9M7GRJIhxkYdgZsXwn7n56BA2bQYGLR9NOPhMzx7js+qYDy6vhNkbApGKURjAw1FjY4pNA==", + "dev": true, + "requires": { + "ansi-colors": "^2.0.5", + "connect": "^3.6.6", + "connect-livereload": "^0.6.0", + "fancy-log": "^1.3.2", + "map-stream": "^0.0.7", + "send": "^0.16.2", + "serve-index": "^1.9.1", + "serve-static": "^1.13.2", + "tiny-lr": "^1.1.1" + }, + "dependencies": { + "ansi-colors": { + "version": "2.0.5", + "resolved": "https://registry.npmjs.org/ansi-colors/-/ansi-colors-2.0.5.tgz", + "integrity": "sha512-yAdfUZ+c2wetVNIFsNRn44THW+Lty6S5TwMpUfLA/UaGhiXbBv/F8E60/1hMLd0cnF/CDoWH8vzVaI5bAcHCjw==", + "dev": true + } + } + }, + "gulp-eslint": { + "version": "6.0.0", + "resolved": "https://registry.npmjs.org/gulp-eslint/-/gulp-eslint-6.0.0.tgz", + "integrity": "sha512-dCVPSh1sA+UVhn7JSQt7KEb4An2sQNbOdB3PA8UCfxsoPlAKjJHxYHGXdXC7eb+V1FAnilSFFqslPrq037l1ig==", + "dev": true, + "requires": { + "eslint": "^6.0.0", + "fancy-log": "^1.3.2", + "plugin-error": "^1.0.1" + }, + "dependencies": { + "ansi-regex": { + "version": "4.1.0", + "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-4.1.0.tgz", + "integrity": "sha512-1apePfXM1UOSqw0o9IiFAovVz9M5S1Dg+4TrDwfMewQ6p/rmMueb7tWZjQ1rx4Loy1ArBggoqGpfqqdI4rondg==", + "dev": true + }, + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "dev": true, + "requires": { + "ms": "^2.1.1" + } + }, + "eslint": { + "version": "6.8.0", + "resolved": "https://registry.npmjs.org/eslint/-/eslint-6.8.0.tgz", + "integrity": "sha512-K+Iayyo2LtyYhDSYwz5D5QdWw0hCacNzyq1Y821Xna2xSJj7cijoLLYmLxTQgcgZ9mC61nryMy9S7GRbYpI5Ig==", + "dev": true, + "requires": { + "@babel/code-frame": "^7.0.0", + "ajv": "^6.10.0", + "chalk": "^2.1.0", + "cross-spawn": "^6.0.5", + "debug": "^4.0.1", + "doctrine": "^3.0.0", + "eslint-scope": "^5.0.0", + "eslint-utils": "^1.4.3", + "eslint-visitor-keys": "^1.1.0", + "espree": "^6.1.2", + "esquery": "^1.0.1", + "esutils": "^2.0.2", + "file-entry-cache": "^5.0.1", + "functional-red-black-tree": "^1.0.1", + "glob-parent": "^5.0.0", + "globals": "^12.1.0", + "ignore": "^4.0.6", + "import-fresh": "^3.0.0", + "imurmurhash": "^0.1.4", + "inquirer": "^7.0.0", + "is-glob": "^4.0.0", + "js-yaml": "^3.13.1", + "json-stable-stringify-without-jsonify": "^1.0.1", + "levn": "^0.3.0", + "lodash": "^4.17.14", + "minimatch": "^3.0.4", + "mkdirp": "^0.5.1", + "natural-compare": "^1.4.0", + "optionator": "^0.8.3", + "progress": "^2.0.0", + "regexpp": "^2.0.1", + "semver": "^6.1.2", + "strip-ansi": "^5.2.0", + "strip-json-comments": "^3.0.1", + "table": "^5.2.3", + "text-table": "^0.2.0", + "v8-compile-cache": "^2.0.3" + } + }, + "eslint-utils": { + "version": "1.4.3", + "resolved": "https://registry.npmjs.org/eslint-utils/-/eslint-utils-1.4.3.tgz", + "integrity": "sha512-fbBN5W2xdY45KulGXmLHZ3c3FHfVYmKg0IrAKGOkT/464PQsx2UeIzfz1RmEci+KLm1bBaAzZAh8+/E+XAeZ8Q==", + "dev": true, + "requires": { + "eslint-visitor-keys": "^1.1.0" + } + }, + "espree": { + "version": "6.2.1", + "resolved": "https://registry.npmjs.org/espree/-/espree-6.2.1.tgz", + "integrity": "sha512-ysCxRQY3WaXJz9tdbWOwuWr5Y/XrPTGX9Kiz3yoUXwW0VZ4w30HTkQLaGx/+ttFjF8i+ACbArnB4ce68a9m5hw==", + "dev": true, + "requires": { + "acorn": "^7.1.1", + "acorn-jsx": "^5.2.0", + "eslint-visitor-keys": "^1.1.0" + } + }, + "import-fresh": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.2.1.tgz", + "integrity": "sha512-6e1q1cnWP2RXD9/keSkxHScg508CdXqXWgWBaETNhyuBFz+kUZlKboh+ISK+bU++DmbHimVBrOz/zzPe0sZ3sQ==", + "dev": true, + "requires": { + "parent-module": "^1.0.0", + "resolve-from": "^4.0.0" + } + }, + "levn": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/levn/-/levn-0.3.0.tgz", + "integrity": "sha1-OwmSTt+fCDwEkP3UwLxEIeBHZO4=", + "dev": true, + "requires": { + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2" + } + }, + "ms": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz", + "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==", + "dev": true + }, + "optionator": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", + "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", + "dev": true, + "requires": { + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.6", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "word-wrap": "~1.2.3" + } + }, + "prelude-ls": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", + "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", + "dev": true + }, + "regexpp": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz", + "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==", + "dev": true + }, + "resolve-from": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", + "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==", + "dev": true + }, + "semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true + }, + "strip-ansi": { + "version": "5.2.0", + "resolved": "https://registry.npmjs.org/strip-ansi/-/strip-ansi-5.2.0.tgz", + "integrity": "sha512-DuRs1gKbBqsMKIZlrffwlug8MHkcnpjs5VPmL1PAh+mA30U0DTotfDZ0d2UUsXpPmPmMMJ6W773MaA3J+lbiWA==", + "dev": true, + "requires": { + "ansi-regex": "^4.1.0" + } + }, "type-check": { "version": "0.3.2", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.3.2.tgz", @@ -9791,6 +9992,32 @@ "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==", "dev": true }, + "optionator": { + "version": "0.8.3", + "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.8.3.tgz", + "integrity": "sha512-+IW9pACdk3XWmmTXG8m3upGUJst5XRGzxMRjXzAuJ1XnIFNvfhjjIuYkDvysnPQ7qzqVzLt78BCruntqRhWQbA==", + "dev": true, + "requires": { + "deep-is": "~0.1.3", + "fast-levenshtein": "~2.0.6", + "levn": "~0.3.0", + "prelude-ls": "~1.1.2", + "type-check": "~0.3.2", + "word-wrap": "~1.2.3" + } + }, + "prelude-ls": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.1.2.tgz", + "integrity": "sha1-IZMqVJ9eUv/ZqCf1cOBL5iqX2lQ=", + "dev": true + }, + "regexpp": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/regexpp/-/regexpp-2.0.1.tgz", + "integrity": "sha512-lv0M6+TkDVniA3aD1Eg0DVpfU/booSu7Eev3TDO/mZKHBfVjgCGTV4t4buppESEYDtkArYFOxTJWv6S5C+iaNw==", + "dev": true + }, "resolve-from": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz", diff --git a/src/css/base.css b/src/css/base.css index 251915c5..e367650d 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -16,8 +16,7 @@ body { body { color: var(--color-text); - font-family: "Open Sans", sans-serif; - /* font-family: "Gotham", sans-serif; */ + font-family: "Source Sans Pro", sans-serif; line-height: var(--line-height-body); margin: 0; } @@ -59,14 +58,14 @@ button::-moz-focus-inner { code, kbd, pre { - /* font-family: "Roboto Mono", monospace; */ - font-family: "Source Code Pro", sans-serif; + font-family: 'Source Code Pro', monospace; } code { - color: var(--color-brand-black); - font-size: var(--font-base); + background-color: #0074e00e; + font-size: var(--font-small); word-spacing: -0.125em; + color: var(--color-brand-gray1); } html code { @@ -82,6 +81,13 @@ small { font-size: 0.8em; } +em, +i { + font-style: italic; + font-family: "Open Sans", sans-serif; + font-weight: 400; +} + .container, .container-fluid { margin: 0 auto; diff --git a/src/css/component-frame.css b/src/css/component-frame.css index 8760c723..de47edbd 100644 --- a/src/css/component-frame.css +++ b/src/css/component-frame.css @@ -78,12 +78,10 @@ border-left: 3px solid var(--color-brand-gray8); } -.frame-dropdown ul.frame-dropdown-list li, +/* .frame-dropdown ul.frame-dropdown-list li, .frame-dropdown ul.related li { border-bottom: 1px solid var(--color-brand-gray8); - /* padding-bottom: 5px; */ - /* margin-bottom: 5px; */ -} +} */ ul.frame-dropdown-list li:last-child, .frame-dropdown ul.related li:last-child { diff --git a/src/css/doc.css b/src/css/doc.css index a3e1600e..6bc40e2c 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -15,7 +15,7 @@ font-weight: var(--weight-semibold); letter-spacing: -0.025rem; line-height: var(--line-height-heading); - margin: 1.5rem 0 -0.25rem; + margin: 1.5rem 0 1rem; } .doc h1 { @@ -32,21 +32,20 @@ .doc h2 { font-size: var(--heading-h2); - margin: 1.5rem 0 1.5rem; max-width: fit-content; display: inline-block; width: 100%; /* NOTE used to restrict width of key line */ } -.doc h2::after { +/* .doc h2::after { content: ""; display: block; max-width: 5.75rem; height: 0; outline: 0.5px solid currentColor; margin-top: 1.0625rem; -} +} */ .doc h3 { font-size: var(--heading-h3); @@ -109,10 +108,10 @@ text-decoration: underline; } -.doc code { +/* .doc code { color: var(--color-text); font-weight: var(--weight-medium); -} +} */ .doc pre code { display: block; @@ -484,9 +483,9 @@ } .doc .exampleblock > .content { - /* background-color: var(--color-shade); */ - box-shadow: inset 0 0 1px #bec0c1; - /* padding: 1rem 1.25rem; */ + box-shadow: 0 3px 10px #0000000f; + padding: 20px; + border: 1px solid var(--color-brand-gray8); } .doc .exampleblock > .content > :first-child { @@ -540,17 +539,17 @@ position: relative; } -.doc pre.highlight .hljs-attr { +/* .doc pre.highlight .hljs-attr { color: var(--hljs-attr); -} +} */ -.doc pre.highlight .hljs-string { +/* .doc pre.highlight .hljs-string { color: var(--hljs-string); -} +} */ -.doc pre.highlight .hljs-number { +/* .doc pre.highlight .hljs-number { color: var(--hljs-number); -} +} */ /* .doc .listingblock code[data-lang]::before { content: attr(data-lang); @@ -590,6 +589,7 @@ font-family: "Source Sans Pro", sans-serif; padding-right: 0.5rem; border-right: 1px solid var(--color-brand-gray9); + z-index: 1; } .doc .listingblock:hover code[data-lang] + .data-source { @@ -597,7 +597,6 @@ } .doc .listingblock pre .fade-shadow { - content: ""; display: inline-block; background: transparent diff --git a/src/css/highlight.css b/src/css/highlight.css index 451eb26d..334ebcf7 100644 --- a/src/css/highlight.css +++ b/src/css/highlight.css @@ -18,29 +18,30 @@ Other CSS rules for styling code blocks: .hljs-keyword, .hljs-selector-tag { - color: #66d9ef; + color: var(--hljs-attr); font-weight: var(--weight-medium); } .hljs-subst { - color: #66d9ef; + color: var(--hljs-attr); } .hljs-number, .hljs-literal, .hljs-variable, .hljs-tag .hljs-attr { - color: #ae81ff; + color: var(--hljs-number); } .hljs-string, .hljs-doctag { - color: #a6e22e; + color: var(--hljs-string); } .hljs-tag, -.hljs-attribute { - color: #f92672; +.hljs-attribute, +.hljs-attr { + color: var(--hljs-attr); } .hljs-built_in, diff --git a/src/css/nav.css b/src/css/nav.css index e32905a1..604a172f 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -47,6 +47,7 @@ .nav-menu .nav-link, .nav-menu .nav-text { display: block; + word-break: break-word; } .nav-menu .nav-line { diff --git a/src/css/site.css b/src/css/site.css index e181dd63..76cc13b4 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -1,5 +1,6 @@ @import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap"); -@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300;0,400;0,600;0,700;1,300;1,400;1,600;1,700&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@300;400;500;600;700&display=swap'); @import "common.css"; @import "typeface-gotham.css"; @import "typeface-roboto-mono.css"; diff --git a/src/css/table.css b/src/css/table.css index e71a4d98..7b5d7476 100644 --- a/src/css/table.css +++ b/src/css/table.css @@ -9,7 +9,6 @@ table.tableblock * { table.tableblock { display: block; width: 100%; - margin: 1em 0; border-spacing: 0; } @@ -41,8 +40,8 @@ table.tableblock th { table.tableblock th { padding-left: var(--base-small-space); - padding-top: var(--base-space); - padding-bottom: var(--base-space); + padding-top: 8px; + padding-bottom: 8px; text-align: left; border-bottom: 2px solid var(--color-brand-blue-secondary); font-size: 1rem; @@ -115,7 +114,6 @@ table.table-tutorial tr td:last-child { table.tableblock { display: table; position: relative; - /* margin-top: 2.5rem; */ } table.tableblock caption.title { @@ -124,8 +122,7 @@ table.table-tutorial tr td:last-child { top: -30px; } - div + table.tableblock, - div.paragraph + table.tableblock, + div + table.tableblock.caption-table, div.ulist + table.tableblock, table.tableblock + table.tableblock { margin-top: 2.5rem; diff --git a/src/css/toc.css b/src/css/toc.css index 53208106..626e97ea 100644 --- a/src/css/toc.css +++ b/src/css/toc.css @@ -11,10 +11,11 @@ width: inherit; /* for position: fixed */ position: sticky; /* stylelint-disable-line declaration-block-no-duplicate-properties */ top: var(--height-to-body); - max-height: var(--height-nav); + max-height: var(--height-toc-sidebar); overflow-y: auto; -ms-overflow-style: none; scrollbar-width: none; + padding-right: var(--base-space); } .sidebar-box::-webkit-scrollbar { diff --git a/src/css/vars.css b/src/css/vars.css index 10e9beef..453ec583 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -69,7 +69,8 @@ --height-version-control: 4.5rem; --height-to-body: calc(var(--height-navbar) + var(--height-spacer)); --height-min-body: calc(100vh - var(--height-to-body)); - --height-nav: calc(var(--height-min-body) + var(--height-spacer) + var(--height-version-control)); + --height-toc-sidebar: calc(var(--height-min-body)); + --height-nav: calc(100vh - var(--height-to-body) - var(--height-version-control)); --nav-menu-top-space: calc(var(--height-to-body) + var(--height-version-control)); /* --width-main-gutter: 1.5rem; */ --width-main-gutter: 2.5rem; diff --git a/src/js/01-nav.js b/src/js/01-nav.js index 43273375..0bf68cb8 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -5,7 +5,7 @@ var navMenu = {} if (!(navMenu.element = nav && nav.querySelector('.nav-menu'))) return var navControl - //var currentPageItem = navMenu.element.querySelector('.is-current-page') + var currentPageItem = navMenu.element.querySelector('.is-current-page') // NOTE prevent text from being selected by double click navMenu.element.addEventListener('mousedown', function (e) { @@ -29,11 +29,42 @@ } }) - // fitNavMenuInit({}) - // window.addEventListener('load', fitNavMenuInit) - // window.addEventListener('resize', fitNavMenuInit) + fitNavMenuInit({}) + window.addEventListener('load', fitNavMenuInit) + window.addEventListener('resize', fitNavMenuInit) if ((navControl = document.querySelector('main .nav-control'))) navControl.addEventListener('click', revealNav) + + function scrollItemToMiddle (el, parentEl) { + var adjustment = (el.getBoundingClientRect().height - parentEl.getBoundingClientRect().height) * 0.5 + el.offsetTop + if (adjustment > 0) parentEl.scrollTop = adjustment + } + + function fitNavMenuInit (e) { + window.removeEventListener('scroll', fitNavMenuOnScroll) + navMenu.element.style.height = '' + if ((navMenu.preferredHeight = navMenu.element.getBoundingClientRect().height) > 0) { + // QUESTION should we check if x value > 0 instead? + if (window.getComputedStyle(nav).visibility === 'visible') { + if (!navMenu.encroachingElement) navMenu.encroachingElement = document.querySelector('footer.footer') + fitNavMenu(navMenu.preferredHeight, (navMenu.viewHeight = window.innerHeight), navMenu.encroachingElement) + window.addEventListener('scroll', fitNavMenuOnScroll) + } + if (currentPageItem && e.type !== 'resize') { + scrollItemToMiddle(currentPageItem.querySelector('.nav-link'), navMenu.element) + } + } + } + + function fitNavMenuOnScroll () { + fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement) + } + + function fitNavMenu (preferredHeight, availableHeight, encroachingElement) { + var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top + navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : '' + } + var navMenuControl if (document.querySelector('.main-nav-parent')) { navMenuControl = document.querySelector('.main-nav-parent') diff --git a/src/js/11-page-customize.js b/src/js/11-page-customize.js index 2a2e9f57..3c81bf17 100644 --- a/src/js/11-page-customize.js +++ b/src/js/11-page-customize.js @@ -1,14 +1,18 @@ ;(function ($) { 'use strict' + var tableBlock = document.querySelectorAll('table.tableblock') // for label edition/statuses var $labels = $('.edition').find('a') - // console.log($labels.length) for (var i = 0; i < $labels.length; i++) { - // console.log(i, 445, $labels[i]) if ($labels[i].text.toLocaleLowerCase().indexOf('community') !== -1) { $labels[i].parentNode.classList.add('page-edition') } } - + // add a caption class for all tablelock + tableBlock.forEach(function (elem, index) { + if (elem.caption !== null) { + elem.classList.add('caption-table') + } + }) /*eslint-env jquery*/ })(jQuery)