diff --git a/preview-src/index.adoc b/preview-src/index.adoc index 4e386ed..581b485 100644 --- a/preview-src/index.adoc +++ b/preview-src/index.adoc @@ -98,8 +98,9 @@ It might be a gentle suggestion in the form of a note or tip or something more s **** [TIP] +==== This oughta do it! - +==== [NOTE] ==== Oh, you've been down _this_ road before. diff --git a/preview-src/ui-model.yml b/preview-src/ui-model.yml index e355fe8..ddf16d2 100644 --- a/preview-src/ui-model.yml +++ b/preview-src/ui-model.yml @@ -77,6 +77,7 @@ page: latest: *latest_page navigation: - content: Introduction + icons: fas fa-database items: - content: Why Couchbase? url: '#' @@ -85,6 +86,7 @@ page: url: '#' urlType: fragment - content: Getting Started + icons: fas fa-database items: - content: Start Here! url: '#' @@ -93,6 +95,7 @@ page: url: '#' urlType: fragment - content: Developers + icons: fas fa-database items: - content: Hello World! url: '#' @@ -102,6 +105,7 @@ page: urlType: fragment - &crumb_0 content: Managing Clusters + icons: fas fa-database items: - &crumb_1 content: Monitoring @@ -144,6 +148,7 @@ page: url: '#' urlType: fragment - content: Installing & Upgrading + icons: fas fa-database items: - content: Couchbase Server Installation Home url: '#' @@ -163,6 +168,7 @@ page: url: '#' urlType: fragment - content: Understanding Couchbase + icons: fas fa-database items: - content: Overview url: '#' diff --git a/src/css/base.css b/src/css/base.css index e18589b..4f53222 100644 --- a/src/css/base.css +++ b/src/css/base.css @@ -16,7 +16,8 @@ body { body { color: var(--color-text); - font-family: "Gotham", sans-serif; + font-family: "Source Sans Pro", sans-serif; + /* font-family: "Gotham", sans-serif; */ line-height: 1.5; margin: 0; } @@ -74,8 +75,22 @@ small { font-size: 0.8em; } -.container { +.container, +.container-fluid { margin: 0 auto; max-width: var(--width-container); padding: 0 var(--width-container-gutter); } +/* .container-fluid { + max-width: var(--width-container-fluid); + padding: 0; + margin: 0 auto; +} */ + +@media screen and (min-width: 1024px) { + .container-fluid { + max-width: var(--width-container-fluid); + padding: 0; + margin: 0 auto; + } +} diff --git a/src/css/clipboard.css b/src/css/clipboard.css new file mode 100644 index 0000000..f435e92 --- /dev/null +++ b/src/css/clipboard.css @@ -0,0 +1,49 @@ +.copy-code-button { + position: absolute; + background: url(../img/copy.png) no-repeat center right/contain; + width: 20px; + height: 10px; + right: 0.5rem; + top: 0.375rem; + display: none; + cursor: pointer; +} + +.doc .listingblock:hover .copy-code-button { + display: block; +} + +.copy-code-button:hover::after { + content: attr(data-title); + color: var("--color-brand-gray4"); + font-size: 0.7em; + font-weight: var(--weight-light); + letter-spacing: 1px; + line-height: 1; + text-transform: capitalize; + position: absolute; + bottom: -30px; + right: -100%; + left: -100%; + margin: auto; + padding: 5px; + text-align: center; + box-shadow: inset 0 0 1px #bec0c1; + background: var(--color-brand-white); + border: 1px solid var(--color-brand-gray6); + box-sizing: border-box; + border-radius: 3px; +} + +.copy-code-button:hover::before { + width: 0; + height: 0; + border-left: 5px solid transparent; + border-right: 5px solid transparent; + border-bottom: 10px solid var(--color-brand-white); + position: absolute; + content: ""; + box-shadow: inset 0 0 1px #bec0c1; + bottom: -10px; + right: 0; +} diff --git a/src/css/common.css b/src/css/common.css new file mode 100644 index 0000000..69eff6d --- /dev/null +++ b/src/css/common.css @@ -0,0 +1,26 @@ +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: var(--z-index-nav-mobile); +} + +.btn { + border-radius: 3px; + font-family: "Source Sans Pro", sans-serif; + font-size: 1.125rem; +} + +.btn-primary { + padding: 5px 15px; + border: 1px solid var(--color-brand-blue); + background: var(--color-brand-blue); + color: var(--color-brand-white); +} + +@media screen and (min-width: 768px) { + .btn-primary { + padding: 8px 25px; + } +} diff --git a/src/css/component-frame.css b/src/css/component-frame.css new file mode 100644 index 0000000..2912be4 --- /dev/null +++ b/src/css/component-frame.css @@ -0,0 +1,71 @@ +.component-frame { + /* rgba(87, 160, 255, 1) */ + /* background: rgba(var(--color-blue-rgb), 0.07); */ + padding: 12px 30px 12px 15px; + display: flex; + align-items: center; +} + +.frame-body { + margin-left: 10px; + position: relative; +} + +.frame-body .title { + margin: 0; + font-size: 1.25rem; + font-weight: var(--weight-semibold); + color: var(--color-brand-gray1); +} + +.frame-body .frame-link { + position: relative; +} + +.frame-body .frame-link::after { + width: 0; + height: 0; + border-left: 4px solid transparent; + border-right: 4px solid transparent; + border-top: 8px solid var(--color-brand-gray4); + top: 0; + position: absolute; + content: ''; + cursor: pointer; + right: -15px; + bottom: 0; + margin: auto; +} + +.frame-body .frame-link-dropdowns:hover .frame-dropdown { + display: block; +} + +.frame-dropdown { + position: absolute; + display: none; + background: var(--color-brand-white); + padding: 5px 15px; + left: -15px; + top: 50px; + border-radius: 4px; + z-index: 1; +} + +.frame-dropdown .frame-dropdown-list { + margin: 0; + padding: 0; + list-style: none; +} + +.frame-link, +.frame-item { + font-size: 1rem; + color: var(--color-brand-gray4); + text-decoration: none; +} + +.frame-link:hover, +.frame-item:hover { + text-decoration: none; +} diff --git a/src/css/doc.css b/src/css/doc.css index 3b5cac5..cb71624 100644 --- a/src/css/doc.css +++ b/src/css/doc.css @@ -60,7 +60,12 @@ .doc h5 > a.anchor, .doc h6 > a.anchor { color: var(--color-brand-red); - background-image: -webkit-linear-gradient(-45deg, var(--color-brand-purple), var(--color-brand-red) 75%); + background-image: + -webkit-linear-gradient( + -45deg, + var(--color-brand-purple), + var(--color-brand-red) 75% + ); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: var(--weight-normal); @@ -255,6 +260,8 @@ .doc .admonitionblock > table > tbody > tr { display: flex; + border: 1px solid var(--color-brand-gray6); + border-radius: 4px; } .doc .admonitionblock td.icon { @@ -262,7 +269,7 @@ } .doc .admonitionblock td.icon i::before { - background: no-repeat 0/cover; + background: no-repeat 0 / cover; content: ""; display: block; height: 1.875rem; @@ -270,15 +277,15 @@ } .doc .admonitionblock td.content { - border-bottom: 1px solid var(--color-brand-silver); + /* border-bottom: 1px solid var(--color-brand-silver); border-right: 1px solid var(--color-brand-silver); - border-top: 1px solid var(--color-brand-silver); + border-top: 1px solid var(--color-brand-silver); */ flex: 1; font-size: 0.9375rem; hyphens: auto; line-height: 1.6; min-width: 0; - padding: 0.75rem; + padding: 0.75rem 0.75rem 0.75rem 0.5rem; } .doc .admonitionblock td.content > .title { @@ -292,7 +299,7 @@ } .doc .admonitionblock td.content::before { - font-weight: var(--weight-medium); + font-weight: var(--weight-bold); } .doc .admonitionblock.caution > table { @@ -305,11 +312,11 @@ .doc .admonitionblock.caution td.content::before { content: "Caution: "; - color: var(--color-brand-orange); + color: var(--color-brand-gray1); } -.doc .admonitionblock.caution td.content { - border-left: 6px solid var(--color-brand-orange); +.doc .admonitionblock.caution tr { + border-left: 4px solid var(--color-brand-caution); } .doc .admonitionblock.important > table { @@ -322,11 +329,11 @@ .doc .admonitionblock.important td.content::before { content: "Important: "; - color: var(--color-brand-blue); + color: var(--color-brand-gray1); } -.doc .admonitionblock.important td.content { - border-left: 6px solid var(--color-brand-blue); +.doc .admonitionblock.important tr { + border-left: 4px solid var(--color-brand-important); } .doc .admonitionblock.note > table { @@ -339,11 +346,11 @@ .doc .admonitionblock.note td.content::before { content: "Note: "; - color: var(--color-brand-light-blue); + color: var(--color-brand-gray1); } -.doc .admonitionblock.note td.content { - border-left: 6px solid var(--color-brand-light-blue); +.doc .admonitionblock.note tr { + border-left: 4px solid var(--color-brand-note); } .doc .admonitionblock.tip > table { @@ -356,11 +363,11 @@ .doc .admonitionblock.tip td.content::before { content: "Tip: "; - color: var(--color-brand-purple); + color: var(--color-brand-gray1); } -.doc .admonitionblock.tip td.content { - border-left: 6px solid var(--color-brand-purple); +.doc .admonitionblock.tip tr { + border-left: 4px solid var(--color-brand-tip); } .doc .admonitionblock.warning > table { @@ -373,11 +380,11 @@ .doc .admonitionblock.warning td.content::before { content: "Warning: "; - color: var(--color-brand-red); + color: var(--color-brand-gray1); } -.doc .admonitionblock.warning td.content { - border-left: 6px solid var(--color-brand-red); +.doc .admonitionblock.warning tr { + border-left: 4px solid var(--color-brand-warning); } .doc .admonitionblock td.content > :first-child { @@ -487,9 +494,9 @@ } .doc .exampleblock > .content { - background-color: var(--color-shade); + /* background-color: var(--color-shade); */ box-shadow: inset 0 0 1px #bec0c1; - padding: 2rem 2.25rem; + /* padding: 1rem 1.25rem; */ } .doc .exampleblock > .content > :first-child { @@ -504,8 +511,8 @@ .doc pre:not(.highlight), .doc pre.highlight code { - background-color: #151514; - color: #f8f8f2; + /* background-color: #151514; */ + color: var(--color-brand-gray1); font-weight: var(--weight-normal); /* needed to override third-party styles */ padding: 0.625rem; white-space: pre-wrap; @@ -515,6 +522,9 @@ word-wrap: normal; overflow-x: auto; */ + background: rgba(87, 160, 255, 0.0555); + border: 1px solid #eaebf1; + border-radius: 3px; } /* NOTE assume pre.highlight contains code[data-lang] */ @@ -524,7 +534,7 @@ .doc .listingblock code[data-lang]::before { content: attr(data-lang); - color: #f8f8f2; + color: var("--color-brand-gray4") /*#f8f8f2*/; display: none; font-size: 0.75em; font-weight: var(--weight-light); @@ -533,7 +543,7 @@ text-transform: uppercase; position: absolute; top: 0.375rem; - right: 0.5rem; + right: 1.5rem; } .doc .listingblock:hover code[data-lang]::before { @@ -724,15 +734,16 @@ .doc .tabs li { align-items: center; - border: 1px solid var(--color-border); + border: 1px solid var(--color-brand-white); + border-top: 3px solid var(--color-brand-white); border-bottom: 0; cursor: pointer; display: flex; - font-weight: var(--weight-bold); + font-weight: var(--weight-semibold); height: 2.5rem; line-height: 1; - margin-right: 0.25rem; - padding: 0 1.5rem; + /* margin-right: 0.25rem; */ + padding: 0 1rem; position: relative; } @@ -742,8 +753,15 @@ .doc .tabset.is-loading .tabs li:not(:first-child), .doc .tabset:not(.is-loading) .tabs li:not(.is-active) { - background-color: var(--color-text); - color: var(--color-brand-white); + background-color: var(--color-brand-white); + color: var(--color-brand-gray4); +} + +.doc .tabs li.is-active { + color: var(--color-active-tabset); + border-radius: 3px 3px 0 0; + border-color: var(--color-brand-gray6); + border-top: 3px solid var(--color-active-tabset); } .doc .tabset.is-loading .tabs li:first-child::after, @@ -758,9 +776,24 @@ right: 0; } +.doc .tabs li.is-active::before { + background-color: var(--color-active-tabset); + content: ""; + display: block; + height: 3px; + position: absolute; + bottom: -2px; + left: 0; + right: 0; + width: 40px; + z-index: 1; + margin: auto; +} + .doc .tabset > .content { - border: 1px solid var(--color-border); + border: 1px solid var(--color-brand-gray6); padding: 1.25rem; + border-radius: 3px; } .doc .tabset.is-loading .tab-pane:not(:first-child), diff --git a/src/css/header.css b/src/css/header.css index 7f165eb..c3854a3 100644 --- a/src/css/header.css +++ b/src/css/header.css @@ -1,378 +1,262 @@ -.navbar { - background-color: var(--color-navbar-bg); - height: var(--height-navbar); - position: fixed; - top: 0; - right: 0; - left: 0; - z-index: var(--z-index-navbar); - line-height: 1; +.navbar-new-top { + background: var(--color-brand-white); } -.navbar .container { - display: flex; - align-items: center; - height: inherit; -} - -.navbar, -.navbar a { - color: var(--color-navbar-text); -} - -.navbar a:focus, -.navbar a:hover { - text-decoration: none; +.navbar-brand img { + height: 32px; + transition: height 0.5s ease; } -.navbar-brand { +.navbar { + position: relative; + display: -webkit-box; + display: -ms-flexbox; display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; + -webkit-box-align: center; + -ms-flex-align: center; align-items: center; - flex: 1; /* FIXME this works without this property in antora-ui-default */ + -webkit-box-pack: justify; + -ms-flex-pack: justify; + justify-content: space-between; + padding: 0.75rem var(--width-container-gutter); } -.navbar-brand .navbar-item { - display: flex; - height: 42px; - transition: height 0.5s ease; +.navbar-toggler { + padding: 0.25rem 0.75rem; + font-size: 1.25rem; + line-height: 1; + background-color: transparent; + border: 1px solid transparent; + display: none; + border-radius: 0.25rem; } -.navbar-brand img { - height: 100%; +.navbar-toggler:hover, +.navbar-toggler:focus { + text-decoration: none; } -.navbar-burger { - width: 30px; - height: 19px; - background: none; - border: 0; - position: relative; - margin-left: auto; - padding: 0; +.navbar-toggler:not(:disabled):not(.disabled) { + cursor: pointer; } -.navbar-burger span { - display: block; - width: inherit; - height: 4px; - background: var(--color-navbar-text); - margin-bottom: 3px; - transition: all 0.3s ease-in-out; - transform: translate3d(0, 0, 0); +.navbar-nav { + margin: 0; + list-style: none; + padding: 0; + display: inline-block; } -.navbar-burger.is-active span { - position: absolute; +.navbar.navbar-new-bottom { + background: var(--color-brand-blue); + display: none; } -.navbar-burger.is-active span:nth-child(1) { - top: 8px; - transform: rotate(135deg); +.navbar-new-bottom .nav-item { + margin: 0 15px; } -.navbar-burger.is-active span:nth-child(2) { - opacity: 0; +.navbar-nav .nav-link { + color: var(--color-brand-white); + text-transform: uppercase; + opacity: 0.8; + font-size: 1.125rem; + line-height: 23px; + font-family: "Source Sans Pro", sans-serif; } -.navbar-burger.is-active span:nth-child(3) { - top: 8px; - transform: rotate(-135deg); +.active .nav-link { + font-weight: var(--weight-semibold); + text-decoration: none; + opacity: 1; } -.navbar-menu { - display: none; - flex-grow: 1; +.nav-link:focus, +.nav-link:hover { + text-decoration: none; } -.navbar-start { - flex-grow: 1; +.primary-action { display: flex; align-items: center; - font-size: 1.0625rem; -} - -.navbar-start > a.navbar-item, -.navbar-start > .navbar-item > .navbar-link { - display: block; - padding: 0.75rem 1.25rem; - text-transform: uppercase; - letter-spacing: -0.025em; - position: relative; } -a.navbar-item.has-dropdown::after, -.navbar-item.has-dropdown > .navbar-link::after { - content: ""; - position: absolute; - background: url(../img/caret-down.svg) no-repeat 50% 50%; - width: 0.875rem; - height: 0.625rem; - height: 1rem; - margin-left: 0.25rem; +.primary-action > * { + display: inline-block; } -.navbar-dropdown { - margin: 0 1.25rem; +.try-btn { + font-weight: var(--weight-bold); } -.navbar-dropdown a { - position: relative; +.parent-site { + margin: 0 10px; + padding: 0 10px; + border-right: 1px solid var(--color-brand-gray5); + border-left: 1px solid var(--color-brand-gray5); } -.navbar-dropdown a::after { - content: ""; - position: absolute; - bottom: -3px; - left: 0; - right: 0; - height: 1px; - background-color: var(--color-navbar-text); - transform: scale3d(0, 0.9999, 0.9999); - transition: transform 0.3s; +.parent-site a { + color: var(--color-brand-gray4); + font-size: 1rem; } -.navbar-dropdown a:focus::after, -.navbar-dropdown a:hover::after { - transform: scale3d(1, 0.9999, 0.9999); - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +.search .query { + border: none; + width: 283px; + border-bottom: 1px solid var(--color-brand-gray5); + color: var(--color-brand-gray4); + font-size: 1rem; + padding-right: 20px; } -.navbar-dropdown.explore .title { - display: none; +.search { + position: relative; } -.navbar-dropdown ul { - list-style: none; - padding: 0.5rem 0; - margin: 0; +.search-btn { + position: absolute; + top: 0; + bottom: 0; + right: 0; + font-size: 1rem; + border: none; + background: none; + padding: 0; + width: 16px; + height: 16px; } -.navbar-dropdown ul.two-cols { - display: grid; - grid-template-columns: repeat(2, auto); - align-content: flex-start; +.navbar-burger { + width: 30px; + height: 19px; + background: none; + border: 0; + position: relative; + margin-left: 10px; + padding: 0; } -.navbar-dropdown li { - padding: 0.75rem 1rem 0.75rem 1.25rem; +.navbar-burger span { + display: block; + width: inherit; + height: 4px; + background: var(--color-brand-blue); + margin-bottom: 3px; + transition: all 0.3s ease-in-out; + transform: translate3d(0, 0, 0); } -.navbar-link .version { - text-transform: none; +.navbar-burger.is-active span { + position: absolute; } -.navbar-dropdown li:hover { - background-color: rgba(0, 0, 0, 0.3); +.navbar-burger.is-active span:nth-child(1) { + top: 8px; + transform: rotate(135deg); } -.navbar-dropdown li.heading { - font-weight: var(--weight-bold); +.navbar-burger.is-active span:nth-child(2) { + opacity: 0; } -.navbar-dropdown ul.two-cols li.heading { - grid-column: 1 / 3; +.navbar-burger.is-active span:nth-child(3) { + top: 8px; + transform: rotate(-135deg); } -@media screen and (min-width: 1024px) { - .navbar-start > a.navbar-item:hover, - .navbar-start > .navbar-item:hover > .navbar-link { - color: var(--color-brand-red); +@media screen and (min-width: 768px) { + .search .query { + width: 235px; } - .navbar-dropdown { - visibility: hidden; - position: absolute; - margin-left: 1.25rem; /* FIXME can we get rid of this? */ - box-shadow: -5px 6px 10px rgba(25, 24, 24, 0.6); - opacity: 0; + .navbar-burger { + display: none; } - .navbar-dropdown.explore .title { - display: block; - font-weight: var(--weight-bold); - padding: 1rem 1.25rem 0.75rem; - background-color: #151514; + .primary-action { + position: absolute; + right: 1.875rem; + top: -110%; } - .navbar-dropdown .cols { + .navbar.navbar-new-bottom, + .navbar-nav { display: flex; - background: #333 linear-gradient(#333 0%, #201a19 100%); - } - - .navbar-dropdown .cols ul + ul { - border-left: 3px solid #151514; } - .navbar-dropdown.versions li { - padding-right: 1.25rem; /* FIXME make this stretch to size of parent */ + .navbar-new-bottom .nav-item:first-child { + margin-left: 0; } } -.navbar-start .navbar-item.search { - flex-grow: 1; - justify-content: flex-end; - display: flex; - padding-right: 1.25rem; -} - -.navbar-menu:not(.is-active) .reveal-search-input > .navbar-item:not(.search) { - display: none; -} - -.navbar-start input.query { - flex-grow: 1; - background-color: var(--color-navbar-bg); - color: inherit; - padding: 0.5rem 0.25rem; - font-size: 1rem; - font-weight: var(--weight-light); - border: 0; -} - -.navbar-start input.query::placeholder { - color: inherit; - padding-left: 0.125rem; -} - -.reveal-search-input .algolia-autocomplete { - flex-grow: 1; - display: flex !important; - align-items: center; - border-bottom: 1px solid var(--color-navbar-text); -} - -.reveal-search-input .algolia-autocomplete::before { - content: ""; - background: url(../img/search.svg) 50% 50% no-repeat; - background-size: cover; - border: 0; - height: 1rem; - width: 1rem; -} - -.navbar-start:not(.reveal-search-input) input.query { - display: none; -} - -.navbar-start button.search { - align-items: center; - background: none; - border: 0; - display: flex; - font-size: 1.125rem; - padding: 0 0.5rem; -} - -.navbar-start button.search::before { - content: ""; - background: url(../img/search.svg) 50% 50% no-repeat; - background-size: cover; - border: 0; - height: 1.25rem; - width: 1.25rem; -} - -.navbar-start button.search span { - color: var(--color-navbar-text); - padding-left: 0.5rem; -} - -.reveal-search-input button.search::before { - background: url(../img/search-close.svg) 50% 50% no-repeat; -} +@media screen and (min-width: 1024px) { + .search .query { + width: 283px; + } -.navbar .red-btn { - border: 2px solid var(--color-brand-red); - background-color: var(--color-brand-red); - color: inherit; - font-weight: var(--weight-bold); - font-size: 1.125rem; - height: 3.25rem; - width: 9.75rem; /* equal to 1.875rem padding on sides */ - display: inline-flex; - align-items: center; - justify-content: center; - letter-spacing: -0.025em; - transition: background-color 0.3s; -} + .parent-site { + margin: 0 20px; + padding: 0 25px; + } -.navbar .red-btn:focus, -.navbar .red-btn:hover { - background-color: var(--color-navbar-bg); - color: var(--color-navbar-text); + .navbar { + padding: 0.75rem 1.875rem; + } } -/* mobile menu */ - -html.is-clipped--navbar { - overflow-y: hidden; -} +@media screen and (max-width: 767px) { + .header { + border-bottom: 1px solid var(--color-brand-blue); + } -.navbar-menu.is-active { - display: block; - background-color: var(--color-navbar-bg); - position: absolute; - top: var(--height-navbar); - left: 0; - right: 0; - padding: 1.25rem 0; - height: calc(100vh - var(--height-navbar)); - overflow-y: auto; -} + .primary-action { + flex-wrap: wrap; + justify-content: center; + } -.navbar-menu.is-active .navbar-start { - display: block; -} + .navbar-collapse { + width: 100%; + } -.navbar-menu.is-active .navbar-item.search { /* FIXME quick hacks to get something working */ - justify-content: center; - padding-left: 1.25rem; - height: 2.5rem; -} + .navbar-new-bottom .nav-item { + padding: 0 15px; + width: 100%; + margin: 10px 0; + } -.navbar-menu.is-active .navbar-end { - text-align: center; - margin: 1rem 0; -} + .search { + margin: 10px 0; + } -@media screen and (min-width: 1024px) { - .navbar-brand { - flex: none; - margin-right: 1.25rem; + .search .query { + border: 1px solid var(--color-brand-gray5); + padding: 10px 20px; } - .navbar-brand .navbar-item { - height: 47px; - width: 165px; - justify-content: center; + .search-btn { + top: 10px; + right: 5px; } - .navbar-burger { - display: none; + .parent-site { + border-left: none; } - .navbar-menu { - display: flex; + .parent-site a { + color: var(--color-brand-white); } - .navbar-item.has-dropdown:hover .navbar-dropdown { - visibility: visible; - opacity: 1; - transition: opacity 0.3s 0.25s; + .try-btn { + background: var(--color-brand-white); + color: var(--color-brand-blue); } - .navbar-item.has-dropdown:hover .navbar-dropdown::before { - content: ""; + .navbar-new-bottom.is-active { display: block; position: absolute; - top: -2.5rem; - right: 0; - left: 0; - height: 2.5rem; - z-index: var(--z-index-navbar-dropdown); - } - - .navbar-item.has-dropdown:hover > .navbar-link { - z-index: var(--z-index-navbar-dropdown-link); + width: 100%; } } diff --git a/src/css/nav.css b/src/css/nav.css index ce54be0..95b0945 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -1,10 +1,10 @@ .nav-menu { - background-color: var(--color-shade); + background-color: var(--color-brand-gray7); position: fixed; width: inherit; overflow-y: scroll; - font-size: 0.875rem; - line-height: 1.35; + font-size: 1rem; + line-height: 24px; } @media screen and (max-width: 768px) { @@ -34,14 +34,31 @@ background-color: var(--color-border); } -.nav-menu .nav-line, .nav-menu .nav-link, .nav-menu .nav-text { display: block; } +.nav-menu .nav-line { + display: flex; + word-break: break-all; + align-items: center; +} + +.nav-line .fas { + color: var(--color-brand-gray3); +} + +.nav-item.is-active .nav-line[data-depth="0"] .fas { + color: var(--color-brand-blue); +} + +.nav-menu .nav-text { + margin-left: 0.75rem; +} + .nav-menu a.nav-link { - color: var(--color-text); + color: var(--color-brand-gray3); text-decoration: none; } @@ -57,40 +74,67 @@ } .nav-menu > .nav-list { - margin: 1rem 0.5rem 1rem 0.75rem; + /* margin: 1rem 1.875rem; */ + margin: 1.5rem 0; } -.nav-menu .nav-item .nav-list { +.nav-menu .nav-item[data-depth='0'] > .nav-list { /* margin-top: -0.0625rem; margin-bottom: 0.625rem; */ margin-bottom: 0.75rem; + margin-left: 3.6875rem; + border-left: 1px solid var(--color-brand-gray5); } +/* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-list { + margin-left: 1.875rem; + border-left: none; +} */ + +/* .nav-menu .nav-item.is-active.is-active-depth-2[data-depth='0'] > .nav-line { + display: none; +} */ + .nav-menu .nav-item:not(.is-active) > .nav-list { display: none; } -.nav-menu .nav-item { +/* .nav-menu .nav-item { margin-left: 0.75em; -} +} */ /* NOTE navigation list without a category */ .nav-item[data-depth="0"] > .nav-list:first-child { margin-left: -0.75em; } -.nav-menu .nav-item[data-depth="0"] + .nav-item { +/* .nav-menu .nav-item[data-depth="0"] + .nav-item { margin-top: 1.25em; -} +} */ -.nav-menu .nav-item .nav-item { +/* .nav-menu .nav-item .nav-item { margin-top: 0.5em; -} +} */ -.nav-item[data-depth="0"] > .nav-line { +/* .nav-item[data-depth="0"] > .nav-line { text-transform: uppercase; +} */ + +.nav-line[data-depth="0"] { + padding: 0.625rem 1.875rem; + color: var(--brand-color-gray2); +} + +.nav-item.is-active .nav-line[data-depth="0"] { + background: rgba(var(--color-gray-rgb), 0.06); + margin-bottom: 0.625rem; +} + +.nav-item.is-active .nav-line[data-depth="0"] .nav-text { + color: var(--color-brand-blue); + font-weight: var(--weight-semibold); } .nav-menu .nav-item.is-current-page > .nav-line > a.nav-link { @@ -102,9 +146,9 @@ background: none; border: 0; padding: 0; - position: absolute; - margin-left: -1.25em; - width: 1.25em; + /* position: absolute; */ + /* margin-left: -1.25em; */ + width: 1rem; color: var(--color-border); transform: scale(1.25); } @@ -141,6 +185,108 @@ html.is-clipped--nav { background-size: 75%; } +.is-inactive { + display: none; +} + +.main-nav-parent { + font-size: 16px; + line-height: 20px; + color: var(--color-brand-gray2); + display: flex; + margin: 10px 0; + text-decoration: none; + align-items: center; + flex-wrap: wrap; + background: rgba(var(--color-blue-rgb), 0.06); + padding: 10px 0; + border-top: 1px solid var(--color-brand-gray5); + border-bottom: 2px solid var(--color-brand-gray5); +} + +.main-nav-parent .back-to-menu { + padding: 0 40px; + width: 100%; + background: url(../img/back-arrow.png) no-repeat 20px center; +} + +.main-nav-parent .nav-text { + width: 100%; + font-size: 18px; + line-height: 23px; + color: var(--color-brand-gray2); + padding: 0 40px; + margin-left: 0; +} + +.main-nav-parent:hover { + text-decoration: none; +} + +.in-toggle { + display: none; + cursor: pointer; + /* margin-right: 10px; */ +} + +.nav-item .nav-line[data-depth="0"] .in-toggle { + display: none; +} + +.nav-line[data-depth="1"], +.nav-line[data-depth="2"] { + display: flex; + justify-content: flex-end; + padding: 0.625rem 1rem; + flex-direction: row-reverse; +} + +.nav-line[data-depth="1"] .nav-link { + color: var(--color-brand-gray4); +} + +.is-active[data-depth='0'] .is-active > .nav-line[data-depth="1"] { + /* padding-left: 0; */ + /* justify-content: start; */ + /* flex-direction: unset; */ + font-size: 1.125rem; + font-weight: 300; + color: var(--color-brand-gray1); +} + +/* .is-active[data-depth='1'] > .nav-line[data-depth="1"] .in-toggle { + transform: rotate(90deg); +} */ + +.nav-menu .nav-item.is-active[data-depth='1'] .nav-list { + margin-left: 1.5rem; +} + +.nav-menu .nav-item[data-depth='2'] { + margin: 0 8px 8px 0; +} + +.nav-menu .nav-item.is-active[data-depth='1'] > .nav-line .nav-link { + color: var(--color-brand-blue); +} + +.nav-menu .nav-item.is-active.is-active-depth-2[data-depth='1'] > .nav-line .nav-link { + color: var(--color-brand-gray1); +} + +.nav-menu .nav-item.is-active[data-depth='2'] > .nav-line .nav-link { + color: var(--color-brand-blue); + font-weight: 900; +} + +.nav-item[data-depth='1'] .in-toggle { + background: url(../img/back-arrow.png) no-repeat center center; + transform: rotate(180deg); + width: 20px; + height: 20px; + margin-left: 5px; +} + @media screen and (min-width: 769px) { .nav-control { display: none; diff --git a/src/css/site.css b/src/css/site.css index 1df4b82..b973a10 100644 --- a/src/css/site.css +++ b/src/css/site.css @@ -1,3 +1,5 @@ +@import url("https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,600,700&display=swap"); +@import "common.css"; @import "typeface-gotham.css"; @import "typeface-roboto-mono.css"; @import "vars.css"; @@ -17,3 +19,5 @@ @import "optanon.css"; @import "highlight.css"; @import "feedback.css"; +@import "component-frame.css"; +@import "clipboard.css"; diff --git a/src/css/vars.css b/src/css/vars.css index 9582a44..748a273 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -6,17 +6,31 @@ --color-brand-red-tint: #fcdedf; --color-brand-white: #fff; /* secondary */ + --color-brand-blue: #4287d6; + --color-blue-rgb: 87, 160, 255; --color-brand-light-blue: #00ace0; --color-brand-light-blue-tint: #d9f3fb; --color-brand-pink: #eb4971; --color-brand-green: #00b9be; --color-brand-purple: #b36cdb; --color-brand-purple-tint: #f4e9fa; + --color-brand-tip: #00d770; + --color-brand-note: #4e90e6; + --color-brand-important: #9e70b1; + --color-brand-warning: #ed2226; + --color-brand-caution: #f57f17; /* tertiary */ - --color-brand-gray: #666; + --color-gray-rgb: 115, 118, 138; + --color-brand-gray1: #292b36; + --color-brand-gray2: #3d4151; + --color-brand-gray3: #52566c; + --color-brand-gray4: #73768a; + --color-brand-gray5: #c8cbdf; + --color-brand-gray6: #eaebf1; + --color-brand-gray7: #f9f9f9; /* --color-brand-silver: #ccc; */ --color-brand-silver: #c1c1c1; - --color-brand-blue: #0074e0; + /* --color-brand-blue: #0074e0; */ --color-brand-blue-tint: #d9eafb; --color-brand-orange: #fc9c0c; --color-brand-orange-tint: #fff0da; @@ -32,9 +46,9 @@ --color-navbar-text: var(--color-brand-white); --color-footer-bg: var(--color-brand-black); --color-footer-text: var(--color-brand-white); - --height-spacer: 1.5rem; + --height-spacer: 1.3rem; /* --height-navbar: 4rem; */ - --height-navbar: 4.875rem; + --height-navbar: 6.09rem; --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)); @@ -43,12 +57,14 @@ /* --width-main-gutter: 1.5rem; */ --width-main-gutter: 2.5rem; --width-container: 90rem; + --width-container-fluid: 100%; --width-container-gutter: 1.25rem; - --width-nav: 16rem; + --width-nav: 20rem; --width-toc: 12rem; --weight-light: 300; --weight-normal: 400; --weight-medium: 500; + --weight-semibold: 600; --weight-bold: 700; --z-index-feedback: 7; --z-index-nav-mobile: 6; @@ -57,4 +73,7 @@ --z-index-navbar: 3; --z-index-footer: 2; --z-index-nav: 1; + + /* Color brand tabsets */ + --color-active-tabset: #57a1ff; } diff --git a/src/img/back-arrow.png b/src/img/back-arrow.png new file mode 100644 index 0000000..6ce8ed9 Binary files /dev/null and b/src/img/back-arrow.png differ diff --git a/src/img/copy.png b/src/img/copy.png new file mode 100644 index 0000000..2eb6656 Binary files /dev/null and b/src/img/copy.png differ diff --git a/src/img/important.svg b/src/img/important.svg index 90cc4f8..4e3dc80 100644 --- a/src/img/important.svg +++ b/src/img/important.svg @@ -5,20 +5,140 @@ xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" - viewBox="0 0 10 10" - version="1.1"> + version="1.1" + viewBox="0 0 10 10"> + style="fill:#9e70b1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.35277778" + d="m 6.7302172,4.05672 c 0,0.37888 -0.1199444,0.74083 -0.3471333,1.04634 l -0.010231,0.0155 C 5.742439,6.00403 5.6627113,6.16772 5.663064,6.57941 l -0.014464,0.054 -0.041628,0.009 h -1.20015 c -0.040922,0 -0.068086,-0.012 -0.06985,-0.0702 0,-0.39723 -0.085372,-0.57292 -0.7041444,-1.44251 L 3.6165996,5.1032 C 3.3897635,4.79769 3.2694663,4.43574 3.2694663,4.05686 c 0,-0.96344 0.7764638,-1.74731 1.7303749,-1.74731 0.9542639,0 1.730375,0.78387 1.730375,1.74731 m 0.3351389,0 c 0,-1.15006 -0.9267472,-2.08562 -2.0655139,-2.08562 -1.1387666,0 -2.065161,0.93556 -2.065161,2.08562 0,0.44203 0.136525,0.86572 0.3961694,1.22484 l 0.013053,0.0219 c 0.6134805,0.86113 0.6582833,0.97155 0.6582833,1.26859 0,0.16404 0.1075972,0.40851 0.4046361,0.40851 h 1.20015 c 0.1471083,0 0.2363611,-0.0624 0.2853972,-0.115 0.1157111,-0.12418 0.1058333,-0.28999 0.1054805,-0.29351 0,-0.29951 0.044803,-0.41064 0.6611056,-1.27671 0.2659944,-0.3623 0.4064,-0.79057 0.4064,-1.2386"/> + style="fill:#9e70b1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.35277778" + d="m 4.9999172,2.32881 c -0.9436805,0 -1.711325,0.77505 -1.711325,1.72791 0,0.37465 0.1188861,0.73271 0.3432528,1.03469 l 0.017992,0.0296 c 0.6205361,0.87136 0.7062611,1.0481 0.7062611,1.45097 0.00141,0.0437 0.01658,0.0511 0.0508,0.0511 H 5.607048 l 0.028928,-0.004 0.00776,-0.0392 c 0,-0.41768 0.079728,-0.58278 0.7136695,-1.47284 l 0.010583,-0.0159 C 6.5923552,4.78881 6.7112413,4.4311 6.7112413,4.05645 c 0,-0.95286 -0.7676445,-1.72791 -1.711325,-1.72791 m 0.6071305,4.33282 h -1.200149 c -0.037042,0 -0.086783,-0.009 -0.0889,-0.0893 0,-0.39264 -0.085019,-0.5662 -0.7006167,-1.43157 L 3.6015061,5.1147 C 3.3718478,4.80566 3.2504922,4.43983 3.2504922,4.05672 c 0,-0.97402 0.7849306,-1.76636 1.749425,-1.76636 0.9644944,0 1.749425,0.79234 1.749425,1.76636 0,0.38311 -0.1213556,0.74894 -0.3510139,1.05762 l -0.00917,0.0138 C 5.760861,6.01079 5.6818388,6.17342 5.6818388,6.57947 l -0.019756,0.0674 z M 4.9999172,1.9905 c -1.1285361,0 -2.0464638,0.92674 -2.0464638,2.06622 0,0.43815 0.1358194,0.8576 0.3926416,1.21355 l 0.013053,0.0219 c 0.6170083,0.86607 0.6621639,0.97755 0.6621639,1.27988 0,0.15663 0.1026583,0.38947 0.3855861,0.38947 h 1.2001499 c 0.1400528,0 0.2247195,-0.0593 0.2712861,-0.10901 C 5.9880479,6.73468 5.9788757,6.57523 5.9788757,6.57381 5.9785229,6.26725 6.0240317,6.15507 6.643509,5.28406 6.907034,4.92493 7.0463812,4.50054 7.0463812,4.05675 c 0,-1.13948 -0.9182805,-2.06622 -2.0464638,-2.06622 M 5.6070479,6.99997 H 4.4068978 c -0.31115,0 -0.4240389,-0.25612 -0.4240389,-0.42792 0,-0.29175 -0.04445,-0.40075 -0.6544028,-1.2573 L 3.3136391,5.29005 C 3.0536418,4.93021 2.915353,4.503 2.915353,4.05674 c 0,-1.16064 0.9352138,-2.10468 2.0845638,-2.10468 1.14935,0 2.0845638,0.94404 2.0845638,2.10468 0,0.45226 -0.1418166,0.88441 -0.4099277,1.24989 -0.6131278,0.86148 -0.6575778,0.97119 -0.6575778,1.26541 0,0 0.011995,0.17498 -0.1107722,0.30656 C 5.8546969,6.934 5.7608584,6.99996 5.6070473,6.99996"/> + style="fill:#9e70b1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.35277778" + d="M 3.6656372,5.10955 C 4.2889955,5.9862 4.3754261,6.164 4.3754261,6.57217 c 7.055e-4,0.0317 0.0067,0.0317 0.031397,0.0317 h 1.20015 l 0.014817,-7.1e-4 0.00282,-0.0222 c 0,-0.42404 0.080433,-0.5902 0.7171972,-1.48485 l 0.011289,-0.0166 c 0.2215444,-0.29845 0.3390194,-0.65228 0.3390194,-1.0227 0,-0.94227 -0.7591778,-1.7085 -1.692275,-1.7085 -0.9330972,0 -1.6922749,0.76623 -1.6922749,1.7085 0,0.37042 0.117475,0.72425 0.339725,1.02341 z m 1.9413361,1.57127 h -1.20015 c -0.069497,0 -0.1058333,-0.0363 -0.10795,-0.1076 0,-0.3877 -0.084314,-0.56021 -0.6967361,-1.42098 l -0.00317,-0.005 -0.0127,-0.0205 C 3.3541394,4.81418 3.2317255,4.44447 3.2317255,4.05712 c 0,-0.9846 0.7930445,-1.78576 1.7681222,-1.78576 0.9750778,0 1.768475,0.80116 1.768475,1.78576 0,0.38735 -0.1227667,0.75706 -0.3545417,1.06927 l -0.00811,0.012 C 5.7794905,6.01787 5.7008211,6.17944 5.7011738,6.57984 l -0.025047,0.0808 c -0.013758,0.0138 -0.036336,0.0205 -0.069144,0.0205 M 4.9998522,2.01001 c -1.1179527,0 -2.027061,0.91828 -2.027061,2.04717 0,0.43392 0.1344083,0.84949 0.3887611,1.20227 l 0.00318,0.005 0.00988,0.0162 c 0.6205361,0.87101 0.6656917,0.98389 0.6656917,1.29152 0,0.14887 0.097367,0.37006 0.3665361,0.37006 h 1.20015 c 0.13335,0 0.2137833,-0.0561 0.2575277,-0.10301 0.1044223,-0.11183 0.09525,-0.26247 0.09525,-0.26388 0,-0.31327 0.045508,-0.42686 0.6685139,-1.30245 0.2610556,-0.35596 0.3989917,-0.77647 0.3989917,-1.21603 0,-1.12889 -0.9094611,-2.04717 -2.0274139,-2.04717 m 0.6071306,5.00945 h -1.20015 c -0.3249083,0 -0.4427361,-0.26741 -0.4427361,-0.44697 0,-0.28611 -0.04445,-0.39441 -0.6512278,-1.24601 L 3.2980592,5.30186 C 3.0352397,4.93674 2.8962453,4.50635 2.8962453,4.05691 c 0,-1.17122 0.9436805,-2.12407 2.1036138,-2.12407 1.1599333,0 2.1036139,0.95285 2.1036139,2.12407 0,0.45614 -0.1432278,0.89253 -0.4138084,1.26153 -0.6092472,0.8562 -0.6536972,0.96485 -0.6536972,1.25342 0.00106,0.0272 0.00247,0.19333 -0.1157111,0.32033 -0.054328,0.0579 -0.1527527,0.127 -0.3132666,0.127"/> + style="fill:#9e70b1;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0.35277778" + d="m 4.3952872,6.58437 0.011642,3.5e-4 H 5.605668 v -0.003 c 0,-0.43004 0.080786,-0.59796 0.720725,-1.49684 L 6.337682,5.06798 C 6.5571098,4.7727 6.6731737,4.4231 6.6731737,4.05692 c 0,-0.93169 -0.7507111,-1.68946 -1.673225,-1.68946 -0.9225139,0 -1.673225,0.75777 -1.673225,1.68946 0,0.36653 0.1160639,0.71614 0.3354917,1.01176 l 0.019755,0.031 c 0.6258278,0.87983 0.7122584,1.05868 0.7122584,1.47249 z m 1.2117916,0.0388 H 4.4069289 c -0.034219,0 -0.049389,-0.007 -0.0508,-0.0508 0,-0.40323 -0.085725,-0.57962 -0.7059084,-1.45168 l -0.00141,-0.002 -0.016933,-0.0268 C 3.4075108,4.78992 3.2886247,4.43185 3.2886247,4.0572 c 0,-0.95286 0.7676445,-1.72791 1.711325,-1.72791 0.9436805,0 1.7109722,0.77505 1.7109722,1.72791 0,0.37465 -0.1181806,0.73236 -0.3429,1.03434 l -0.00917,0.0141 C 5.7234991,5.99782 5.6437713,6.16292 5.6437713,6.58131 l -0.00318,0.0258 -0.00247,0.0134 -0.013406,0.002 z M 4.9999483,2.29035 c -0.9648472,0 -1.749425,0.79234 -1.749425,1.76636 0,0.38311 0.1213556,0.74894 0.3510139,1.05798 l 0.014464,0.0236 0.00212,0.004 c 0.6148916,0.86396 0.6999111,1.03788 0.6999111,1.43087 0.00176,0.0603 0.029986,0.0885 0.0889,0.0885 h 1.2001499 l 0.055386,-0.0152 0.019403,-0.0663 C 5.6815184,6.1734 5.7612462,6.01042 6.390249,5.12671 l 0.00847,-0.0123 C 6.6280245,4.80572 6.7493801,4.43989 6.7493801,4.05678 c 0,-0.97402 -0.7849306,-1.76636 -1.749425,-1.76636 M 5.6070856,6.70014 H 4.4069289 c -0.079728,0 -0.1248834,-0.0452 -0.127,-0.12665 0,-0.38241 -0.084314,-0.55386 -0.6932083,-1.41005 l -0.00423,-0.007 -0.011289,-0.0187 C 3.3366044,4.82201 3.2124266,4.44806 3.2124266,4.05648 c 0,-0.99519 0.8018639,-1.80481 1.787525,-1.80481 0.9856611,0 1.787525,0.80962 1.787525,1.80481 0,0.39158 -0.1241778,0.76517 -0.3584223,1.08091 l -0.0067,0.01 C 5.7986432,6.02404 5.7196209,6.1842 5.7199737,6.57931 c 0,0 0.00106,0.0614 -0.030339,0.0938 -0.017286,0.018 -0.04445,0.0268 -0.08255,0.0268 M 4.9999542,2.02878 c -1.1073694,0 -2.0083638,0.90981 -2.0083638,2.02777 0,0.42968 0.13335,0.84137 0.3852333,1.19098 l 0.00423,0.006 0.00882,0.0152 c 0.6237111,0.87595 0.6692194,0.9899 0.6692194,1.30281 0,0.14111 0.09278,0.35102 0.3478389,0.35102 h 1.2001499 c 0.1266473,0 0.2024945,-0.0529 0.2434167,-0.097 C 5.9475126,6.72149 5.9411626,6.58144 5.9408096,6.5758 5.9404568,6.25653 5.9863176,6.14153 6.6128513,5.26099 6.8714374,4.90822 7.0079624,4.49194 7.0079624,4.05626 7.0079624,2.9383 6.1073207,2.02849 4.9999513,2.02849 M 5.6070818,6.96103 H 4.4069289 C 4.1236483,6.96103 4.02099,6.7282 4.02099,6.57156 4.02099,6.26923 3.976187,6.15775 3.3588261,5.29133 l -0.011289,-0.019 -0.00247,-0.004 C 3.0893032,4.91379 2.9534838,4.49398 2.9534838,4.05619 c 0,-1.13947 0.9179277,-2.06622 2.0464638,-2.06622 1.1281833,0 2.0461111,0.92675 2.0461111,2.06622 0,0.44379 -0.1389945,0.86818 -0.4025195,1.22731 -0.6194777,0.87101 -0.6649861,0.9839 -0.6646333,1.29117 3.528e-4,0.005 0.00741,0.16122 -0.1005417,0.27728 -0.046214,0.0497 -0.1308805,0.10901 -0.2712861,0.10901 M 4.9999476,1.95152 c -1.14935,0 -2.0845638,0.94403 -2.0845638,2.10467 0,0.4452 0.1375833,0.87171 0.3982861,1.23366 l 0.014817,0.024 c 0.6099528,0.8569 0.6544028,0.96591 0.6544028,1.25765 0,0.17181 0.1128889,0.42792 0.4240389,0.42792 h 1.2001499 c 0.1538111,0 0.24765,-0.066 0.2991556,-0.12135 0.1146528,-0.12312 0.1114778,-0.28787 0.1107722,-0.30621 0,-0.29457 0.04445,-0.40429 0.657225,-1.26542 C 6.9426952,4.94061 7.0845118,4.50846 7.0845118,4.0562 7.0845118,2.89556 6.149298,1.95153 4.999948,1.95153 M 5.6070785,7.03787 H 4.4069289 C 4.0679094,7.03787 3.94479,6.75883 3.94479,6.5715 3.94479,6.29069 3.901046,6.1838 3.2974428,5.33643 L 3.2812148,5.30993 C 3.0176898,4.9441 2.8772843,4.50948 2.8772843,4.05616 c 0,-1.18181 0.9521472,-2.14313 2.1226638,-2.14313 1.1701639,0 2.1223111,0.96132 2.1223111,2.14313 0,0.46037 -0.1442861,0.90064 -0.4173361,1.27282 -0.6057195,0.85161 -0.6498167,0.95885 -0.6498167,1.24213 0.00106,0.0321 0.00141,0.20179 -0.1210028,0.33337 -0.056797,0.061 -0.1598083,0.13335 -0.327025,0.13335"/> + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/img/logo.png b/src/img/logo.png new file mode 100644 index 0000000..c2f7ebe Binary files /dev/null and b/src/img/logo.png differ diff --git a/src/img/server-icon.png b/src/img/server-icon.png new file mode 100644 index 0000000..a28551e Binary files /dev/null and b/src/img/server-icon.png differ diff --git a/src/img/tip.svg b/src/img/tip.svg index 4e3dc80..31f8bb3 100644 --- a/src/img/tip.svg +++ b/src/img/tip.svg @@ -1,144 +1,3 @@ - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + diff --git a/src/js/01-nav.js b/src/js/01-nav.js index 1e17d70..6c3b8e9 100644 --- a/src/js/01-nav.js +++ b/src/js/01-nav.js @@ -1,67 +1,107 @@ -;(function () { +; (function () { 'use strict' var nav = document.querySelector('nav.nav') 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) { if (e.detail > 1) e.preventDefault() }) - find('.nav-toggle', navMenu.element).forEach(function (toggleBtn) { + find(/*'.nav-toggle',*/'.in-toggle', navMenu.element).forEach(function (toggleBtn) { var navItem = findAncestorWithClass('nav-item', toggleBtn, navMenu.element) toggleBtn.addEventListener('click', toggleActive.bind(navItem)) + // var dataDepth = toggleBtn.getAttribute('data-depth') + // if (dataDepth === 1) { + // toggleBtn.classList.add("mystyle") + // } + // toggleBtn.addEventListener('click', addActive.bind(navItem)) + var navItemSpan = findNextElement(toggleBtn) if (navItemSpan.classList.contains('nav-text')) { navItemSpan.style.cursor = 'pointer' navItemSpan.addEventListener('click', toggleActive.bind(navItem)) + // navItemSpan.addEventListener('click', addActive.bind(navItem)) } }) - 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 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 = document.querySelector('.main-nav-parent') + // var navWrap = document.querySelector('.currentNav-wrap') + + navMenuControl.addEventListener('click', function () { + // navWrap.style.display = 'none' + for (var i = 0; i < navItems.length; i++) { + navItems[i].classList.remove('is-active') + navItems[i].classList.remove('is-inactive') + } + this.style.display = 'none' + }) - 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) + // Toggle class + function toggleActive (e) { + if (this.getAttribute('data-depth') === '1') { + var otherNavs = document.querySelectorAll('.nav-item[data-depth="0"]:not(.is-active)') + console.log(otherNavs) + for (var i = 0; i < otherNavs.length; i++) { + otherNavs[i].classList.add('is-inactive') } } + this.classList.toggle('is-active') } - function fitNavMenuOnScroll () { - fitNavMenu(navMenu.preferredHeight, navMenu.viewHeight, navMenu.encroachingElement) - } + // function addActive (e) { + // removeClasses(e) + // this.classList.add('is-active') + // concealEvent(e) + // } - function fitNavMenu (preferredHeight, availableHeight, encroachingElement) { - var reclaimedHeight = availableHeight - encroachingElement.getBoundingClientRect().top - navMenu.element.style.height = reclaimedHeight > 0 ? Math.max(0, preferredHeight - reclaimedHeight) + 'px' : '' - } + var navItems = document.querySelectorAll('.nav .nav-item') - function toggleActive (e) { - this.classList.toggle('is-active') - concealEvent(e) - } + // function removeClasses (e) { + // for (var i = 0; i < navItems.length; i++) { + // navItems[i].classList.remove('is-active') + // } + // concealEvent(e) + // } function revealNav (e) { if (nav.classList.contains('is-active')) return hideNav(e) diff --git a/src/js/07-copy-to-clipboard.js b/src/js/07-copy-to-clipboard.js new file mode 100644 index 0000000..ae887b4 --- /dev/null +++ b/src/js/07-copy-to-clipboard.js @@ -0,0 +1,30 @@ +;(function () { + 'use strict' + document.querySelectorAll('pre > code').forEach(function (codeBlock) { + var button = document.createElement('a') + button.className = 'copy-code-button' + //button.type = 'button' + button.dataset.title = 'Copy' + + button.addEventListener('click', function () { + navigator.clipboard.writeText(codeBlock.innerText).then( + function () { + /* Chrome doesn't seem to blur automatically, + leaving the button in a focused state. */ + button.blur() + + button.dataset.title = 'Copied!' + + setTimeout(function () { + button.dataset.title = 'Copy' + }, 2000) + }, + function () { + button.dataset.title = 'Error' + } + ) + }) + var pre = codeBlock.parentNode + pre.appendChild(button) + }) +})() diff --git a/src/partials/body-home.hbs b/src/partials/body-home.hbs index 05fef19..f442d23 100644 --- a/src/partials/body-home.hbs +++ b/src/partials/body-home.hbs @@ -1,6 +1,8 @@ -
-
-

{{{page.title}}}

-{{{page.contents}}} -
-
+
+
+

+ {{{page.title}}} +

+ {{{page.contents}}} +
+
\ No newline at end of file diff --git a/src/partials/body.hbs b/src/partials/body.hbs index 8cb08ae..6f4b9d4 100644 --- a/src/partials/body.hbs +++ b/src/partials/body.hbs @@ -1,4 +1,4 @@ -
+
{{> nav}} {{> toc}} {{> main}} diff --git a/src/partials/crumbs.hbs b/src/partials/crumbs.hbs index 4be6843..2271a62 100644 --- a/src/partials/crumbs.hbs +++ b/src/partials/crumbs.hbs @@ -1,13 +1,13 @@ + + \ No newline at end of file diff --git a/src/partials/head-last.hbs b/src/partials/head-last.hbs index dc7fb0d..d32d54a 100644 --- a/src/partials/head-last.hbs +++ b/src/partials/head-last.hbs @@ -1,4 +1,6 @@ + {{!-- include fontAwesome CDN --}} + {{#if env.OPTANON_SCRIPT_URL}} diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs index 6d5160a..1cfc249 100644 --- a/src/partials/header-content.hbs +++ b/src/partials/header-content.hbs @@ -1,105 +1,65 @@ -
- + {{! End primary header }} + {{! Start secondary header }} + -
+ \ No newline at end of file diff --git a/src/partials/nav-menu.hbs b/src/partials/nav-menu.hbs index 102eb31..69925d4 100644 --- a/src/partials/nav-menu.hbs +++ b/src/partials/nav-menu.hbs @@ -1,3 +1,4 @@
-{{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}} + {{> nav-version-control}} + {{> nav-tree navigation=page.navigation level=0 crumbLevel=0 crumbAtLevel=(lookup page.breadcrumbs 0)}}
diff --git a/src/partials/nav-tree.hbs b/src/partials/nav-tree.hbs index 4ebedeb..a4d178a 100644 --- a/src/partials/nav-tree.hbs +++ b/src/partials/nav-tree.hbs @@ -1,23 +1,39 @@ {{#if navigation}} - + {{/if}} diff --git a/src/partials/nav-version-control.hbs b/src/partials/nav-version-control.hbs new file mode 100644 index 0000000..fe56a37 --- /dev/null +++ b/src/partials/nav-version-control.hbs @@ -0,0 +1,47 @@ +{{#if (and page.component (ne page.component.name 'home'))}} + {{#if (and page.component (ne page.component.name 'tutorials'))}} + {{#if (and page.component (ne page.component.name 'userprofile-couchbase-mobile'))}} + {{#if (or page.versions (ends-with page.component.name '-sdk'))}} +
+
+ +
+
+

{{{page.component.title}}}

+
+ Version {{page.componentVersion.displayVersion}} +
+ + {{#if (ends-with page.component.name '-sdk')}} +
    + {{#each (related-sdk-pages 'c,dotnet,go,java,nodejs,php,python,scala')}} +
  • {{{./title}}}
    • + {{/each}} +
+ {{/if}} +
+
+
+
+ {{else}} +
+
+ +
+
+

{{{page.component.title}}}

+ {{#unless (eq page.componentVersion.displayVersion 'master')}} Version {{page.componentVersion.displayVersion}}{{/unless}} +
+
+ {{/if}} + {{/if}} + {{/if}} +{{/if}} \ No newline at end of file