style updates for docs index page (#313)

Author: recrwplay

preview-src/docs-ndl.adoc

@@ -3,6 +3,7 @@
 :page-role: hub
 :page-theme: docs
 :page-hide-nav-title: true
+:page-disablefeedback: true
 :!page-show-home-link:
 :!toc:
 :page-toclevels: -1

src/css/docs-ndl.css

@@ -152,7 +152,8 @@ body.docs-ndl .nav-menu .nav-item > a > strong {
 /* toolbar */
 
 body.docs-ndl.hub .toolbar {
-  visibility: hidden;
+  /* visibility: hidden; */
+  display: none;
 }
 
 body.docs-ndl.explainer .toolbar {
@@ -200,9 +201,8 @@ body.docs-ndl .doc .flex-column {
 }
 
 body.docs-ndl .doc > .sect-header > h1.page:first-child {
-  margin-top: 0;
-  /* font-size: var(--font-size-h1); */
-  margin-bottom: 1.5rem;
+  margin: var(--docs-ndl-spacer) 0;
+  line-height: 1;
 }
 
 body.docs-ndl.hub .doc div:not(.display) h2 {
@@ -415,10 +415,11 @@ body.docs-ndl #preamble + .sect1 {
 
 /* sections */
 
-body.docs-ndl.hub .sect1,
+body.docs-ndl.hub .sect1:not(.banner),
 body.docs-ndl.explainer .sect1 {
   display: flex;
   flex-wrap: wrap;
+  margin-top: var(--docs-ndl-spacer);
 }
 
 body.docs-ndl .paragraph.caption {
@@ -489,7 +490,7 @@ body.docs-ndl.explainer .banner .sectionbody {
 }
 
 body.docs-ndl .banner .sectionbody > div.openblock {
-  flex: 0 0 50%;
+  flex: 0 0 65%;
 }
 
 body.docs-ndl .banner .sectionbody > div.icon {
@@ -727,7 +728,7 @@ body.docs-ndl .cards .sect2 .icon,
 body.docs-ndl .widget .icon {
   padding: 0;
   margin: 0;
-  width: 100%;
+  display: flex;
 }
 
 body.docs-ndl .cards .sect2 .icon,
@@ -745,7 +746,7 @@ body.docs-ndl .cards .sect2 .icon p {
 }
 
 body.docs-ndl .cards .sect2 .icon p div.labels {
-  display: flex;
+  display: none;
   flex-direction: row;
   gap: 0.25rem;
   height: min-content;
@@ -791,7 +792,7 @@ body.docs-ndl .lists .sect2 .icon img path {
 
 body.docs-ndl .cards .sect2 h3,
 body.docs-ndl .lists .sect2 h3 {
-  /* flex-grow: 1; */
+  display: flex;
   order: 2;
   margin: 0;
   font-weight: var(--font-weight-semibold);
@@ -819,14 +820,10 @@ body.docs-ndl .cards .sect2 .paragraph:not(.icon) {
   /* flex-grow: 1; */
 }
 
-body.docs-ndl .cards .sect2.selectable .paragraph.link:not(.display) {
+body.docs-ndl .cards .sect2.selectable .paragraph.link {
   display: none;
 }
 
-body.docs-ndl .cards .sect2.selectable .paragraph.link.display {
-  display: flex;
-}
-
 body.docs-ndl .cards.selectable .sect2 .paragraph.link,
 body.docs-ndl .cards:not(.selectable) .sect2 .paragraph.link {
   box-sizing: border-box;

src/css/nav.css

@@ -155,6 +155,9 @@ html.is-clipped--nav {
   width: 100%;
   line-height: var(--nav-line-height);
   position: relative;
+}
+
+.nav-panel-manu.has-feedback .nav-menu {
   margin-bottom: calc(var(--feedback-height) + 1rem);
 }
 

src/css/vars.css

@@ -301,6 +301,7 @@
   --doc-line-height: 1.8;
   --doc-margin: 0 auto;
   --doc-margin--desktop: 0 2rem;
+  --docs-ndl-spacer: 1.5rem;
 
   /* headers */
   --doc-font-size-h1: var(--font-size-h2);

src/partials/nav-ndl.hbs

@@ -4,7 +4,7 @@
 
 
 
-      <div class="nav-panel-menu is-active" data-panel="menu">
+      <div class="nav-panel-menu is-active{{#unless page.attributes.disablefeedback}} has-feedback{{/unless}}" data-panel="menu">
         <nav class="nav-menu">
 
           {{!-- add link back to home --}}