restore toolbar (#285)

Author: recrwplay

src/css/docs-ndl.css

@@ -140,6 +140,16 @@ body.docs-ndl .nav-menu .nav-item > a > strong {
 
 /* end of nav */
 
+/* toolbar */
+
+body.docs-ndl.hub .toolbar {
+  visibility: hidden;
+}
+
+body.docs-ndl.explainer .toolbar {
+  background-color: rgba(var(--colors-neutral-10));
+}
+
 body.docs-ndl .doc a {
   text-decoration: none;
 }
@@ -819,7 +829,7 @@ body.docs-ndl .bottom-cards:not(.selectable) .sect2 .paragraph.link {
 }
 
 body.docs-ndl .cards .sect2 .paragraph.category {
-  display: flex;
+  display: none;
 }
 
 body.docs-ndl .plain-links a.external::after {

src/css/toolbar.css

@@ -1,3 +1,17 @@
+.toolbar {
+  color: var(--toolbar-font-color);
+  align-items: center;
+  background-color: var(--toolbar-background);
+  box-shadow: 0 1px 0 var(--toolbar-border-color);
+  display: flex;
+  font-size: calc(15 / var(--rem-base) * 1rem);
+  height: var(--toolbar-height);
+  justify-content: flex-start;
+  position: sticky;
+  top: var(--navbar-height);
+  z-index: var(--z-index-toolbar);
+}
+
 body.has-banner .toolbar {
   top: calc(var(--navbar-height) + var(--banner-height));
 }
@@ -37,6 +51,8 @@ body.has-banner .toolbar {
 }
 
 .home-link {
+  background: url(../img/home-o.svg) no-repeat 50% 45%;
+  background-size: 50%;
   display: block;
   height: 2.5rem;
   margin: 0;
@@ -46,8 +62,7 @@ body.has-banner .toolbar {
 
 .home-link:hover,
 .home-link.is-current {
-  background: rgba(var(--colors-baltic-10));
-  color: rgba(var(--colors-baltic-50));
+  background-image: url(../img/home.svg);
 }
 
 .home-link a line {