Work on Eric's feedback for header,navbar & right sidebar

Author: rakeshAlgo

src/css/doc.css

@@ -1,5 +1,5 @@
 .doc {
-  padding: var(--base-space) 0;
+  padding-top: 1.25rem;
 }
 
 .doc p {

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,22 @@
 }
 
 .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;
+}
+
 .active .nav-link {
   font-weight: var(--weight-semibold);
   text-decoration: none;
@@ -78,6 +82,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 +100,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 +202,34 @@
 
   .primary-action {
     position: absolute;
-    right: 1.875rem;
-    top: -110%;
+    right: 1.25rem;
+    top: -116%;
   }
 
   .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/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/toc.css

@@ -3,7 +3,8 @@
 }
 
 .toc-menu {
-  margin-bottom: 1.5rem;
+  margin-top: var(--column-space);
+  line-height: 1;
 }
 
 .sidebar-box {
@@ -55,11 +56,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;
 }

src/css/toolbar.css

@@ -1,7 +1,7 @@
-.sidebar-box .tools {
+/* .sidebar-box .tools {
   margin-left: 0.75rem;
-}
-.tools ul { padding-left: 0; }
+} */
+.tools ul { margin: 0; padding: 0; }
 
 .tools .edit {
   /* width: 1.5em;
@@ -23,5 +23,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%;
+}

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

src/partials/header-content.hbs

@@ -39,7 +39,8 @@
           <a class="nav-link" href="{{relativize site.components.tutorials.url}}">
             Tutorials
             <span class="arrow">
-              ->
+              <i class="fas fa-arrow-right"></i>
+              <i class="fal fa-arrow-right"></i>
             </span>
           </a>
         </li>

src/partials/toolbar.hbs

@@ -1,7 +1,7 @@
 {{#with (or (and (not env.CI) page.fileUri) (and (not page.origin.private) page.editUrl))}}
 <div class="tools" role="navigation">
 <ul>
-<li class="tool edit"><a href="{{this}}" title="Edit Page" target="_blank" rel="noopener">Edit</a></li>
+<li class="tool edit"><a href="{{this}}" title="Edit Page" target="_blank" rel="noopener">Edit on GitHub</a></li>
 </ul>
 </div>
 {{/with}}