update doc version style

src/css/breadcrumbs.css

@@ -19,7 +19,7 @@ a + .breadcrumbs {
   display: flex;
   flex-wrap: wrap;
   margin: 0;
-  padding: 0;
+  padding: 0 !important;
   list-style: none;
 }
 

src/css/header.css

@@ -9,8 +9,8 @@ body {
 }
 
 .navbar {
-  background: var(--color-white);
-  /* border-bottom: 1px solid var(--color-bwg-main); */
+  background: var(--nav-background);
+  box-shadow: 0 0 0.4rem rgba(0, 0, 0, 0.1), 0 0.4rem 0.6rem rgba(0, 0, 0, 0.1);
   color: var(--color-bwg-main);
   height: 4.5rem;
   font-size: calc(16 / var(--rem-base) * 1rem);
@@ -308,7 +308,7 @@ body {
     content: "";
     display: block;
     position: absolute;
-    bottom: 0;
+    bottom: 1rem;
     left: 0;
     width: 0;
     height: 2px;

src/css/nav.css

@@ -36,7 +36,8 @@
 }
 
 .nav {
-  background: var(--nav-background);
+  /* background: var(--nav-background); */
+  background: var(--color-white);
   position: relative;
   top: var(--toolbar-height);
   height: var(--nav-height);
@@ -73,6 +74,7 @@
   overscroll-behavior: none;
   height: var(--nav-panel-menu-height);
   padding: 1.25em;
+  padding-top: 0;
 }
 
 .nav-panel-menu:not(.is-active) .nav-menu {

src/css/page-versions.css

 .page-versions {
-  margin: 0 0.2rem 0 auto;
+  /* margin: 0 0.2rem 0 auto; */
   position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
   line-height: 1;
+  height: var(--toolbar-height);
+  margin: 1rem 0.7rem;
+  padding: 0 1.25em;
 }
 
-@media screen and (min-width: 1024px) {
+/* @media screen and (min-width: 1024px) {
   .page-versions {
     margin-right: 0.7rem;
   }
+} */
+
+.page-versions .backdrop {
+  display: none;
+  width: 100vw;
+  height: 100vh;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 2;
+}
+
+.page-versions h2.title {
+  color: var(--nav-heading-font-color);
+  font-size: inherit;
+  font-weight: var(--body-font-weight-bold);
+  margin: 0;
+  /* padding: 0.25em 0 0.125em 0.75em; */
 }
 
 .page-versions .version-menu-toggle {
-  color: inherit;
+  color: var(--color-bwg-main);
+  font-weight: 600;
   background: url(../img/chevron.svg) no-repeat;
   background-position: right 0.5rem top 50%;
   background-size: auto 0.75em;
   border: none;
   outline: none;
   line-height: inherit;
-  padding: 0.5rem 1.5rem 0.5rem 0.5rem;
+  padding: 0.5rem 2rem 0.5rem 1rem;
   position: relative;
+  border-radius: 0.5rem;
+  border: 2px solid var(--color-smoke-90);
+  transition: all .15s ease-in-out;
   z-index: var(--z-index-page-version-menu);
+  }
+
+.page-versions .version-menu-toggle:hover {
+  border: 2px solid var(--color-bwg-main);
 }
 
 .page-versions .version-menu {
   display: flex;
-  min-width: 100%;
+  min-width: 85px;
   flex-direction: column;
-  align-items: flex-end;
-  background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat;
-  padding: 1.375rem 1.5rem 0.5rem 0.5rem;
+  align-items: flex-start;
+  /* background: linear-gradient(to bottom, var(--page-version-menu-background) 0%, var(--page-version-menu-background) 100%) no-repeat; */
+  background-color: white;
+  padding: 0.25rem;
   position: absolute;
-  top: 0;
-  right: 0;
+  top: 45px;
+  right: 22px;
   white-space: nowrap;
+  z-index: var(--z-index-page-version-menu);
+  box-shadow: 0 8px 16px rgba(10, 10, 10, 0.1);
+  border-radius: 0.5rem;
 }
 
 .page-versions:not(.is-active) .version-menu {
@@ -41,10 +77,18 @@
 }
 
 .page-versions .version {
+  color: var(--color-gray-50);
+  width: 100%;
   display: block;
-  padding-top: 0.5rem;
+  padding: 0.35rem 0 0.35rem 0.85rem;
+  border-radius: 0.5rem;
 }
 
+.page-versions .version:hover {
+  background-color: var(--color-blue-10);
+}
+
+
 .page-versions .version.is-current {
   display: none;
 }

src/css/toolbar.css

 .toolbar {
   color: var(--toolbar-font-color);
   align-items: center;
-  background-color: var(--toolbar-background);
-  /* box-shadow: 0 1px 0 var(--toolbar-border-color); */
-  /* background-color: var(--color-white); */
-  /* margin: 0.5rem 0; */
-  box-shadow: rgba(33, 35, 38, 0.1) 0 10px 10px -10px;
+  background-color: var(--color-white);
   display: flex;
   font-size: calc(15 / var(--rem-base) * 1rem);
   height: var(--toolbar-height);
   justify-content: flex-start;
-  top: var(--navbar-height);
-  padding: 0 3.15rem;
-  position: sticky;
-  z-index: var(--z-index-toolbar);
+  margin: 1rem 0;
 }
 
 .toolbar a {
@@ -58,7 +51,7 @@
 
 .edit-this-page {
   display: none;
-  padding-right: 0.5rem;
+  /* padding-right: 0.5rem; */
 }
 
 @media screen and (min-width: 1024px) {
@@ -70,3 +63,8 @@
 .toolbar .edit-this-page a {
   color: var(--toolbar-muted-color);
 }
+
+.toolbar .edit-this-page a:hover {
+  color: var(--color-bwg-main);
+  font-weight: 600;
+}

src/css/vars.css

@@ -39,6 +39,11 @@
   --monospace-font-family: "Roboto Mono", monospace;
   --monospace-font-weight-bold: 600;
   --h-font-weight-bold: 800;
+  /* border */
+  --border-radius-fa: 0.5rem;
+  /* shadow */
+  --shadow-sm: 0px 1px 1px hsla(0, 0%, 0%, 0.06), 0px 2px 1px hsla(0, 0%, 0%, 0.06);
+  --box-shadow-depth-fa: 0.385rem;
   /* base */
   --body-background: var(--color-white);
   --panel-background: var(--color-smoke-30);
@@ -74,7 +79,7 @@
   --toolbar-font-color: var(--color-gray-70);
   --toolbar-muted-color: var(--color-gray-40);
   --page-version-menu-background: var(--color-smoke-70);
-  --page-version-missing-font-color: var(--color-gray-40);
+  --page-version-missing-font-color: var(--color-gray-30);
   /* admonitions */
   --caution-color: #a0439c;
   --caution-on-color: var(--color-white);

src/js/03-fragment-jumper.js

@@ -20,7 +20,8 @@
       window.location.hash = '#' + this.id
       e.preventDefault()
     }
-    var y = computePosition(this, 0) - toolbar.getBoundingClientRect().bottom
+    // var y = computePosition(this, 0) - toolbar.getBoundingClientRect().bottom
+    var y = computePosition(this, 0) - 95
     var instant = e === false && supportsScrollToOptions
     instant ? window.scrollTo({ left: 0, top: y, behavior: 'instant' }) : window.scrollTo(0, y)
   }

src/js/04-page-versions.js

@@ -5,12 +5,18 @@
   if (!toggle) return
 
   var selector = document.querySelector('.page-versions')
+  var backdrop = document.querySelector('.backdrop')
 
   toggle.addEventListener('click', function (e) {
     selector.classList.toggle('is-active')
+    backdrop.style.display = 'block'
     e.stopPropagation() // trap event
   })
 
+  backdrop.addEventListener('click', function () {
+    selector.classList.remove('is-active')
+  })
+
   document.documentElement.addEventListener('click', function () {
     selector.classList.remove('is-active')
   })

src/partials/article.hbs

 <article class="doc">
-{{!-- {{> toolbar}} --}}
+{{> toolbar}}
 {{#with page.title}}
 <h1 class="page">{{{this}}}</h1>
 {{/with}}

src/partials/main.hbs

 <main class="article">
-{{> toolbar}}
+{{!-- {{> toolbar}} --}}
   <div class="content">
 {{#if (eq page.layout '404')}}
 {{> article-404}}

src/partials/nav-menu.hbs

 {{#with page.navigation}}
 <div class="nav-panel-menu is-active" data-panel="menu">
   <nav class="nav-menu">
-    <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button>
-    {{#with @root.page.componentVersion}}
+    {{!-- <button class="nav-menu-toggle" aria-label="Toggle expand/collapse all" style="display: none"></button> --}}
+    {{!-- {{#with @root.page.componentVersion}}
     <h3 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h3>
-    {{/with}}
+    {{/with}} --}}
 {{> nav-tree navigation=this}}
   </nav>
 </div>

src/partials/nav.hbs

 <div class="nav-container"{{#if page.component}} data-component="{{page.component.name}}" data-version="{{page.version}}"{{/if}}>
   <aside class="nav">
     <div class="panels">
+{{> page-versions}}
 {{> nav-menu}}
-{{> nav-explore}}
+{{!-- {{> nav-explore}} --}}
     </div>
   </aside>
 </div>

src/partials/page-versions.hbs

 {{#with page.versions}}
 <div class="page-versions">
-  <button class="version-menu-toggle" title="Show other versions of page">{{@root.page.componentVersion.displayVersion}}</button>
+  <div class="backdrop"></div>
+  {{#with @root.page.componentVersion}}
+  <h2 class="title"><a href="{{{relativize ./url}}}">{{./title}}</a></h2>
+  {{/with}}
+  <button class="version-menu-toggle" title="Show other versions of page">v{{@root.page.componentVersion.displayVersion}}</button>
   <div class="version-menu">
     {{#each this}}
     <a class="version
       {{~#if (eq ./version @root.page.version)}} is-current{{/if~}}
-      {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">{{./displayVersion}}</a>
+      {{~#if ./missing}} is-missing{{/if}}" href="{{{relativize ./url}}}">v{{./displayVersion}}</a>
     {{/each}}
   </div>
 </div>

src/partials/toolbar.hbs

@@ -4,6 +4,6 @@
   <a href="{{{relativize this}}}" class="home-link{{#if @root.page.home}} is-current{{/if}}"></a>
   {{/with}} --}}
 {{> breadcrumbs}}
-{{> page-versions}}
+{{!-- {{> page-versions}} --}}
 {{> edit-this-page}}
 </div>