video thumbnail & Top level page lagging UI fixes

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);
 }

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 {

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;
 }
 

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,18 +48,23 @@
 }
 
 .navbar-new-bottom .nav-item {
-  margin: 0 15px;
+  margin: 0 var(--base-space);
 }
 
 .navbar-nav .nav-link {
   color: #ffffffbf;
   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,32 +203,34 @@
 
   .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 {
     margin-left: 0;
   }
 }
 
-@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;
   }
 }
 

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;
 }

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);

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 */

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;

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;
   }
 }
 

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;
 }