update layout

src/css/doc.css

@@ -4,7 +4,6 @@
   hyphens: auto;
   line-height: var(--doc-line-height);
   margin: var(--doc-margin);
-  max-width: var(--doc-max-width);
   padding: 0 1rem 4rem;
 }
 
@@ -13,7 +12,6 @@
     flex: auto;
     font-size: var(--doc-font-size--desktop);
     margin: var(--doc-margin--desktop);
-    max-width: var(--doc-max-width--desktop);
     min-width: 0;
   }
 }

src/css/nav.css

@@ -39,6 +39,7 @@
   position: relative;
   top: var(--toolbar-height);
   height: var(--nav-height);
+  border-right: 1px solid var(--color-blue-30);
 }
 
 @media screen and (min-width: 769px) {

src/css/toc.css

 .toc-menu {
   color: var(--toc-font-color);
+  margin-top: 2.5rem;
 }
 
 .toc.sidebar .toc-menu {
@@ -73,7 +74,7 @@
 
 .toc .toc-menu a {
   color: inherit;
-  border-left: 2px solid var(--toc-border-color);
+  border-left: 4px solid var(--toc-border-color);
   display: inline-block;
   padding: 0.25rem 0 0.25rem 0.5rem;
   text-decoration: none;

src/css/vars.css

@@ -17,6 +17,8 @@
   --color-jet-70: #222;
   --color-jet-80: #12071f;
   --color-black: #000;
+  --color-blue-10: #f8f9fd;
+  --color-blue-30: #dee2e6;
   /* fonts */
   --rem-base: 18; /* used to compute rem value from desired pixel value (e.g., calc(18 / var(--rem-base) * 1rem) = 18px) */
   --body-font-size: 1.0625em; /* 17px */
@@ -41,14 +43,14 @@
   --navbar-font-color: var(--color-white);
   --navbar_hover-background: var(--color-black);
   --navbar-button-background: var(--color-white);
-  --navbar-button-border-color: var(--panel-border-color);
+  --navbar-button-border-color: var(--color-blue-30);
   --navbar-button-font-color: var(--body-font-color);
-  --navbar-menu-border-color: var(--panel-border-color);
+  --navbar-menu-border-color: var(--color-blue-30);
   --navbar-menu-background: var(--color-white);
   --navbar-menu-font-color: var(--body-font-color);
   --navbar-menu_hover-background: var(--color-smoke-50);
   /* nav */
-  --nav-background: var(--panel-background);
+  --nav-background: var(--color-blue-10);
   --nav-border-color: var(--color-gray-10);
   --nav-line-height: 1.35;
   --nav-heading-font-color: var(--color-jet-30);
@@ -56,8 +58,8 @@
   --nav-panel-divider-color: var(--color-smoke-90);
   --nav-secondary-background: var(--color-smoke-70);
   /* toolbar */
-  --toolbar-background: var(--panel-background);
-  --toolbar-border-color: var(--panel-border-color);
+  --toolbar-background: var(--color-blue-10);
+  --toolbar-border-color: var(--color-blue-30);
   --toolbar-font-color: var(--color-gray-70);
   --toolbar-muted-color: var(--color-gray-40);
   --page-version-menu-background: var(--color-smoke-70);

src/js/02-on-this-page.js

@@ -40,9 +40,9 @@
   var menu = sidebar.querySelector('.toc-menu')
   if (!menu) (menu = document.createElement('div')).className = 'toc-menu'
 
-  var title = document.createElement('h3')
-  title.textContent = sidebar.dataset.title || 'Contents'
-  menu.appendChild(title)
+  // var title = document.createElement('h3')
+  // title.textContent = sidebar.dataset.title || 'Contents'
+  // menu.appendChild(title)
   menu.appendChild(list)
 
   var startOfContent = !document.getElementById('toc') && article.querySelector('h1.page ~ :not(.is-before-toc)')

src/partials/header-content.hbs

@@ -26,14 +26,6 @@
             <a class="navbar-item" href="#">Product C</a>
           </div>
         </div>
-        <div class="navbar-item has-dropdown is-hoverable">
-          <a class="navbar-link" href="#">Services</a>
-          <div class="navbar-dropdown">
-            <a class="navbar-item" href="#">Service A</a>
-            <a class="navbar-item" href="#">Service B</a>
-            <a class="navbar-item" href="#">Service C</a>
-          </div>
-        </div>
         <div class="navbar-item">
           <span class="control">
             <a class="button is-primary" href="#">Download</a>