diff --git a/src/css/clipboard.css b/src/css/clipboard.css
index 7c299d53..b880f6f0 100644
--- a/src/css/clipboard.css
+++ b/src/css/clipboard.css
@@ -121,7 +121,6 @@ a.copy-code-button:hover {
}
.doc .listingblock pre .fade-shadow {
- content: "";
display: inline-block;
background:
transparent
@@ -136,7 +135,7 @@ a.copy-code-button:hover {
width: 65px;
height: 80%;
position: absolute;
- right: 2px;
+ right: 1px;
top: 0;
}
@@ -147,16 +146,17 @@ a.copy-code-button:hover {
}
}
-code.language-console.hljs.shell {
+code.language-console.hljs.shell,
+pre code.language-bash.hljs {
white-space: nowrap;
overflow-x: auto;
}
-code.language-console.hljs.shell::-webkit-scrollbar {
+code::-webkit-scrollbar {
width: 0.25rem;
height: 5px;
}
-code.language-console.hljs.shell::-webkit-scrollbar-thumb {
+code::-webkit-scrollbar-thumb {
background-color: var(--color-border);
}
diff --git a/src/css/component-frame.css b/src/css/component-frame.css
index 81e54cbc..8030143f 100644
--- a/src/css/component-frame.css
+++ b/src/css/component-frame.css
@@ -8,35 +8,25 @@
}
.frame-body {
- margin-left: 10px;
+ margin-left: var(--base-extra-small-space);
position: relative;
}
.frame-body .title {
margin: 0;
- font-size: 1.125rem;
+ font-size: var(--font-medium);
line-height: 1.5rem;
font-weight: var(--weight-semibold);
color: var(--color-brand-gray1);
+ display: inline-block;
}
-.frame-body .frame-link {
- position: relative;
+.component-frame .frame-link-dropdowns {
+ display: inline-block;
}
-.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 {
+ position: relative;
}
.frame-body .frame-link-dropdowns:hover .frame-dropdown {
@@ -46,10 +36,19 @@
.frame-dropdown {
position: absolute;
display: none;
- left: 0;
- top: 45px;
+ left: 56%;
+ top: 0;
z-index: 1;
- padding: 17px 0 0;
+ padding: 47px 0 0;
+}
+
+.frame-link-dropdowns .frame-link {
+ color: var(--color-brand-gray1);
+ font-weight: var(--weight-semibold);
+}
+
+.frame-link-dropdowns .frame-link svg {
+ color: var(--color-brand-black);
}
.frame-dropdown .frame-dropdown-list,
@@ -72,6 +71,18 @@
padding: 8px 0.625rem;
display: inline-block;
width: 100%;
+ color: var(--color-brand-primary);
+ font-weight: var(--weight-semibold);
+}
+
+.frame-dropdown ul li a:hover,
+.frame-dropdown .related li a:hover {
+ background-color: var(--color-brand-gray7);
+}
+
+.frame-link-dropdowns .version {
+ font-family: "Source Sans Pro", sans-serif;
+ font-size: var(--font-medium);
}
.frame-dropdown .related {
diff --git a/src/css/doc.css b/src/css/doc.css
index 7bcd71ca..3d1c9f8e 100644
--- a/src/css/doc.css
+++ b/src/css/doc.css
@@ -1,5 +1,5 @@
.doc {
- padding: var(--base-space) 0;
+ padding-top: 1.25rem;
}
.doc p {
@@ -147,6 +147,14 @@
margin-left: -10px;
}
+.ulist {
+ padding-left: var(--base-space);
+}
+
+ul ul ul {
+ list-style: disc;
+}
+
.doc hr {
margin: 1rem 0;
border: 0 solid var(--color-border);
@@ -265,6 +273,7 @@
padding-bottom: var(--base-space);
padding-left: 0;
padding-right: var(--base-space);
+ border-bottom: 0;
}
.doc .admonitionblock td.content > .title {
@@ -567,7 +576,8 @@
*/
-table.tableblock code.language-console.hljs.shell {
+table.tableblock code.language-console.hljs.shell,
+table.tableblock pre code.language-bash.hljs {
white-space: normal;
}
diff --git a/src/css/header.css b/src/css/header.css
index 5b8b2666..18453f89 100644
--- a/src/css/header.css
+++ b/src/css/header.css
@@ -13,7 +13,7 @@
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
- padding: 0.75rem var(--width-container-gutter);
+ padding: 0.5rem var(--width-container-gutter);
}
.navbar-toggler {
@@ -48,7 +48,7 @@
}
.navbar-new-bottom .nav-item {
- margin: 0 15px;
+ margin: 0 var(--base-space);
}
.navbar-nav .nav-link {
@@ -56,10 +56,15 @@
text-transform: uppercase;
opacity: 1;
font-size: 1.125rem;
- line-height: 23px;
+ line-height: 24px;
font-family: "Source Sans Pro", sans-serif;
}
+.navbar-nav .nav-link .arrow {
+ margin-left: 0.5rem;
+ display: inline-block;
+}
+
.active .nav-link {
font-weight: var(--weight-semibold);
text-decoration: none;
@@ -78,6 +83,13 @@
align-items: center;
}
+.primary-action .btn:hover {
+ background-color: var(--color-link-hover);
+ color: var(--color-brand-white);
+ text-decoration: none;
+ border-color: var(--color-link-hover);
+}
+
.primary-action > * {
display: inline-block;
}
@@ -89,13 +101,14 @@
.parent-site {
margin: 0 10px;
padding: 0 10px;
- border-right: 1px solid var(--color-brand-gray5);
- border-left: 1px solid var(--color-brand-gray5);
+ /* border-right: 1px solid var(--color-brand-gray5);
+ border-left: 1px solid var(--color-brand-gray5); */
}
.parent-site a {
color: var(--color-brand-gray4);
font-size: 1rem;
+ font-family: "Source Sans Pro", sans-serif;
}
.search .query {
@@ -190,13 +203,14 @@
.primary-action {
position: absolute;
- right: 1.875rem;
- top: -110%;
+ right: 1.25rem;
+ top: -137%;
}
.navbar.navbar-new-bottom,
.navbar-nav {
display: flex;
+ line-height: 1;
}
.navbar-new-bottom .nav-item:first-child {
@@ -204,18 +218,19 @@
}
}
-@media screen and (min-width: 1024px) {
+@media screen and (min-width: 993px) {
.search .query {
width: 283px;
}
.parent-site {
- margin: 0 20px;
- padding: 0 25px;
+ margin: 0;
+ padding: 0 var(--column-space);
}
- .navbar {
- padding: 0.75rem 1.875rem;
+ .navbar.navbar-new-top {
+ padding: 1.25rem;
+ line-height: 1;
}
}
diff --git a/src/css/is-this-helpful.css b/src/css/is-this-helpful.css
index d9191344..521dd711 100644
--- a/src/css/is-this-helpful.css
+++ b/src/css/is-this-helpful.css
@@ -9,7 +9,7 @@
display: inline-block;
width: 100%;
margin-bottom: 25px;
- border-top: 1px solid #ccc;
+ /* border-top: 1px solid #ccc; */
padding-top: 25px;
font-family: "Source Sans Pro", sans-serif;
}
diff --git a/src/css/labels.css b/src/css/labels.css
index 551f764c..16d0c24e 100644
--- a/src/css/labels.css
+++ b/src/css/labels.css
@@ -112,10 +112,10 @@
opacity: 1;
}
-.doc .labels span:first-child,
+/* .doc .labels span:first-child,
.doc .labels li:first-child {
opacity: 1;
-}
+} */
/* .doc .labels span.edition::before{
color: var(--color-brand-blue-secondary);
diff --git a/src/css/landing-page.css b/src/css/landing-page.css
index f98f4c6d..650614b3 100644
--- a/src/css/landing-page.css
+++ b/src/css/landing-page.css
@@ -146,12 +146,14 @@
}
.doc.landing-page-doc .media-left {
- margin-left: 40px;
- width: 115px;
+ padding-left: 40px;
margin-top: 0;
border: 0;
box-shadow: none;
- padding: 0;
+}
+
+.doc.landing-page-doc .videoblock.media-left {
+ width: auto;
}
.media-left .icon {
@@ -245,6 +247,7 @@
width: 100%;
height: 315px;
margin-top: 8px;
+ box-shadow: 0 0 15px -5px #ccc;
}
/* CSS for nav filter */
diff --git a/src/css/main.css b/src/css/main.css
index cab95536..1b5bff8f 100644
--- a/src/css/main.css
+++ b/src/css/main.css
@@ -50,7 +50,7 @@ main p {
color: var(--color-brand-blue-secondary);
display: flex;
line-height: 1;
- margin: var(--base-small-space) 0 var(--base-space);
+ margin: 1.25rem 0 0;
/* margin: calc(-1 * var(--height-spacer)) calc(-1 * var(--width-container-gutter)) var(--height-spacer); */
padding: var(--base-space);
border-radius: 3px;
diff --git a/src/css/nav.css b/src/css/nav.css
index d3dfa33e..ed9f7151 100644
--- a/src/css/nav.css
+++ b/src/css/nav.css
@@ -46,7 +46,6 @@
/* height: var(--height-nav); */
z-index: var(--z-index-nav);
border-left: 2px solid #eee;
- border-right: 2px solid #eee;
}
}
diff --git a/src/css/toc.css b/src/css/toc.css
index 25c8ebb5..cc4f0ef8 100644
--- a/src/css/toc.css
+++ b/src/css/toc.css
@@ -3,7 +3,8 @@
}
.toc-menu {
- margin-bottom: 1.5rem;
+ margin-top: var(--base-large-space);
+ line-height: 1;
}
.sidebar-box {
@@ -16,6 +17,7 @@
-ms-overflow-style: none;
scrollbar-width: none;
padding-right: var(--base-space);
+ padding-left: var(--base-space);
}
.sidebar-box::-webkit-scrollbar {
@@ -55,11 +57,10 @@
line-height: 1.2;
}
-.toc .toc-menu h3,
+/* .toc .toc-menu h3,
.toc .toc-menu ul {
margin-left: 0.75rem;
-}
-
+} */
.toc .toc-menu li {
margin: 0;
}
diff --git a/src/css/toolbar.css b/src/css/toolbar.css
index 74caf85b..431ad54c 100644
--- a/src/css/toolbar.css
+++ b/src/css/toolbar.css
@@ -1,11 +1,14 @@
-.sidebar-box .tools {
+/* .sidebar-box .tools {
margin-left: 0.75rem;
+} */
+.tools ul {
+ margin: 0;
+ padding: 0;
+ line-height: 1;
}
-.tools ul { padding-left: 0; }
.tools .edit {
- /* width: 1.5em;
- height: 1.5em; */
+ line-height: 1;
display: inline-block;
width: 100%;
list-style: none;
@@ -23,5 +26,13 @@
vertical-align: top;
color: #999;
padding-left: 25px;
+ padding-top: 0;
+ padding-bottom: 0;
font-family: "Source Sans Pro", sans-serif;
}
+
+.sidebar-box .tools {
+ padding-top: 1.25rem;
+ display: inline-block;
+ width: 100%;
+}
diff --git a/src/css/vars.css b/src/css/vars.css
index d404d8b5..3cadb899 100644
--- a/src/css/vars.css
+++ b/src/css/vars.css
@@ -64,7 +64,7 @@
--hljs-string: #295d1e;
--hljs-number: #0711ba;
/* --height-navbar: 4rem; */
- --height-spacer: 1rem;
+ --height-spacer: 1.2rem;
--height-navbar: 6rem;
--height-version-control: 4.5rem;
--height-to-body: calc(var(--height-navbar) + var(--height-spacer));
@@ -79,7 +79,7 @@
--width-container-fluid: 100%;
--width-container-gutter: 1.25rem;
--width-nav: 20rem;
- --width-toc: 12rem;
+ --width-toc: 13rem;
/* Font weight */
--weight-light: 300;
--weight-normal: 400;
@@ -101,6 +101,7 @@
/* New design font style */
--font-base: 1rem; /* ~16px */
+ --font-medium: 1.25rem; /* ~20px */
--font-small: 0.875rem; /* ~14px */
--labels-font-size: 0.75rem; /* ~12px */
--labels-line-height: 1;
@@ -119,6 +120,7 @@
/* Spacing variables */
--base-space: 1rem; /* ~ 16px */
--base-small-space: 0.75rem; /* ~ 12px */
+ --base-extra-small-space: 0.5rem; /* ~ 8px */
--base-medium-space: 1.5rem; /* ~ 24px */
--base-large-space: 2rem; /* ~ 32px */
--column-space: 2.5rem; /* ~ 40px */
diff --git a/src/js/01-nav.js b/src/js/01-nav.js
index 4c165d59..3e9d60d0 100644
--- a/src/js/01-nav.js
+++ b/src/js/01-nav.js
@@ -133,25 +133,24 @@
}
// hide left nav on top level landing page
- setTimeout(function () {
- if (nav.innerText === '') {
- nav.classList.add('hide-nav')
+
+ if (nav.innerText === '') {
+ nav.classList.add('hide-nav')
+ } else {
+ nav.classList.add('show-nav')
+ }
+
+ menuExpandToggle.addEventListener('click', function (e) {
+ e.preventDefault()
+ // var navBarHeight = nav.querySelector('.nav-menu')
+ // navBarHeight.style.height = '100vh'
+ // console.log(navBarHeight.style.height)
+ if (nav.classList.contains('collapse-menu')) {
+ nav.classList.remove('collapse-menu')
} else {
- nav.classList.add('show-nav')
+ nav.classList.add('collapse-menu')
}
-
- menuExpandToggle.addEventListener('click', function (e) {
- e.preventDefault()
- // var navBarHeight = nav.querySelector('.nav-menu')
- // navBarHeight.style.height = '100vh'
- // console.log(navBarHeight.style.height)
- if (nav.classList.contains('collapse-menu')) {
- nav.classList.remove('collapse-menu')
- } else {
- nav.classList.add('collapse-menu')
- }
- })
- }, 100)
+ })
// has children in li
// $('ul.nav-list li.nav-item ul.nav-list .nav-item').has('ul.nav-list').addClass('has-children')
function concealEvent (e) {
diff --git a/src/js/02-on-this-page.js b/src/js/02-on-this-page.js
index deb4f0a9..641f7778 100644
--- a/src/js/02-on-this-page.js
+++ b/src/js/02-on-this-page.js
@@ -33,9 +33,9 @@
menu.className = 'toc-menu'
}
- var title = document.createElement('h3')
- title.textContent = 'On This Page'
- menu.appendChild(title)
+ // var title = document.createElement('h3')
+ // title.textContent = 'On This Page'
+ // menu.appendChild(title)
menu.appendChild(list)
if (sidebar) {
diff --git a/src/partials/header-content.hbs b/src/partials/header-content.hbs
index ca7b83fa..3ba4a53c 100644
--- a/src/partials/header-content.hbs
+++ b/src/partials/header-content.hbs
@@ -39,7 +39,7 @@
Tutorials
- ->
+
diff --git a/src/partials/nav-version-control.hbs b/src/partials/nav-version-control.hbs
index adbb466d..6520f574 100644
--- a/src/partials/nav-version-control.hbs
+++ b/src/partials/nav-version-control.hbs
@@ -10,7 +10,7 @@
{{{page.component.title}}}