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..c4c8b96 --- /dev/null +++ b/src/css/common.css @@ -0,0 +1,26 @@ +.fixed-top { + position: fixed; + top: 0; + right: 0; + left: 0; + z-index: 1030; +} + +.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..dc00c09 --- /dev/null +++ b/src/css/component-frame.css @@ -0,0 +1,41 @@ +.component-frame { + /* rgba(87, 160, 255, 1) */ + background: rgba(var(--color-blue-rgb), 0.07); + padding: 12px 30px; + display: flex; + align-items: center; +} + +.frame-body { + margin-left: 10px; +} + +.frame-body .title { + margin: 0; + font-size: 1.25rem; + font-weight: var(--weight-semibold); + color: var(--color-brand-gray1); +} + +.frame-dropdown { + position: absolute; + display: none; +} + +.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..25da36b 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); @@ -262,7 +267,7 @@ } .doc .admonitionblock td.icon i::before { - background: no-repeat 0/cover; + background: no-repeat 0 / cover; content: ""; display: block; height: 1.875rem; @@ -487,9 +492,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 +509,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 +520,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 +532,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 +541,7 @@ text-transform: uppercase; position: absolute; top: 0.375rem; - right: 0.5rem; + right: 1.5rem; } .doc .listingblock:hover code[data-lang]::before { @@ -724,15 +732,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 +751,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 +774,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..c220da7 100644 --- a/src/css/nav.css +++ b/src/css/nav.css @@ -57,7 +57,7 @@ } .nav-menu > .nav-list { - margin: 1rem 0.5rem 1rem 0.75rem; + margin: 1rem 1.875rem; } .nav-menu .nav-item .nav-list { 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..e8808f6 100644 --- a/src/css/vars.css +++ b/src/css/vars.css @@ -6,6 +6,8 @@ --color-brand-red-tint: #fcdedf; --color-brand-white: #fff; /* secondary */ + --color-brand-blue: #57a0ff; + --color-blue-rgb: 87, 160, 255; --color-brand-light-blue: #00ace0; --color-brand-light-blue-tint: #d9f3fb; --color-brand-pink: #eb4971; @@ -13,10 +15,16 @@ --color-brand-purple: #b36cdb; --color-brand-purple-tint: #f4e9fa; /* tertiary */ - --color-brand-gray: #666; + --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 +40,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 +51,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 +67,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/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/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/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/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-version-control.hbs b/src/partials/nav-version-control.hbs new file mode 100644 index 0000000..abcd654 --- /dev/null +++ b/src/partials/nav-version-control.hbs @@ -0,0 +1,37 @@ +{{#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')}} {{page.componentVersion.displayVersion}}{{/unless}} + {{/if}} + {{/if}} + {{/if}} +{{/if}} \ No newline at end of file