fix vertical spaces and align issues

Author: rakeshAlgo

src/css/doc.css

@@ -15,7 +15,7 @@
   font-weight: var(--weight-semibold);
   letter-spacing: -0.025rem;
   line-height: var(--line-height-heading);
-  margin: 1.5rem 0 1rem;
+  margin-bottom: 0;
 }
 
 .doc h1 {
@@ -45,8 +45,9 @@
 
 .doc h2 {
   font-size: var(--heading-h2);
-  max-width: fit-content;
+  /* max-width: fit-content; */
   width: 100%;
+  margin-top: var(--base-extra-large-space);
   /* NOTE used to restrict width of key line */
 }
 
@@ -61,14 +62,17 @@
 
 .doc h3 {
   font-size: var(--heading-h3);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc h4 {
   font-size: var(--heading-h4);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc h5 {
   font-size: var(--heading-h5);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc h1 > a.anchor,
@@ -126,10 +130,20 @@
   word-spacing: inherit;
 }
 
-.doc .paragraph,
+.doc .paragraph {
+  margin-top: var(--base-space);
+}
+
+.doc .paragraph + .paragraph {
+  margin-top: var(--base-medium-space);
+}
+
+.doc .admonitionblock {
+  margin-top: var(--base-large-space);
+}
+
 .doc .olist,
 .doc .ulist,
-.doc .admonitionblock,
 .doc .exampleblock,
 .doc .imageblock,
 .doc .listingblock,
@@ -138,7 +152,7 @@
 .doc .swagger-container,
 .doc .verseblock,
 .doc .videoblock {
-  margin-top: 1rem;
+  margin-top: var(--base-medium-space);
 }
 
 .doc .paragraph .title,
@@ -149,11 +163,11 @@
 .doc .literalblock .title,
 .doc .openblock .title,
 .doc caption {
-  font-size: 1rem;
+  font-size: var(--font-base);
   font-weight: var(--weight-semibold);
   /* letter-spacing: -0.025em; */
   line-height: 1.2;
-  margin-bottom: 0.75rem;
+  margin-bottom: var(--base-space);
   color: var(--color-brand-gray3);
 }
 
@@ -430,14 +444,22 @@ ul ul ul {
   width: auto;
 }
 
+.doc .quoteblock {
+  margin-top: var(--base-medium-space);
+}
+
 .doc .abstract blockquote {
   font-size: 0.9375rem;
-  margin: 1rem 0 1.5625rem 0;
+  margin: 0;
   font-weight: var(--weight-light);
   border-left: 2px solid var(--color-brand-gray5);
   padding-left: 1.125rem;
 }
 
+.doc .quoteblock + .paragraph {
+  margin-top: var(--base-extra-large-space);
+}
+
 .doc .abstract blockquote * {
   font-weight: inherit;
 }
@@ -599,15 +621,15 @@ table.tableblock pre code.language-bash.hljs {
 }
 
 .doc .dlist {
-  margin: 1.5rem 0;
+  margin: 1.5rem 0 0;
 }
 
 .doc .dlist dl {
   margin: 0;
 }
 
 .doc .dlist dt {
-  font-weight: var(--weight-medium);
+  font-weight: var(--weight-semibold);
 }
 
 .doc .dlist dd + dt {
@@ -619,12 +641,12 @@ table.tableblock pre code.language-bash.hljs {
 }
 
 .doc .dlist dt + dd {
-  margin-top: 0.125rem;
+  margin-top: var(--base-small-space);
 }
 
-.doc .dlist dd > .openblock > .content > :first-child {
+/* .doc .dlist dd > .openblock > .content > :first-child {
   margin-top: 0;
-}
+} */
 
 .doc .sidebarblock > .content {
   border: 1px solid var(--color-border);
@@ -778,7 +800,7 @@ table.tableblock pre code.language-bash.hljs {
   padding: var(--base-space);
   border-radius: 8px;
   border: 1px solid var(--color-brand-gray8);
-  margin-top: var(--base-space);
+  margin-top: var(--base-extra-large-space);
 }
 
 .doc .tabs.ulist {

src/css/header.css

@@ -49,6 +49,7 @@
 .header-bottom-row {
   background: var(--color-brand-blue-secondary);
   display: none;
+  transition: all 0.3s;
 }
 
 .navbar-new-bottom .nav-item {
@@ -300,7 +301,7 @@
     color: var(--color-brand-blue);
   }
 
-  .navbar-new-bottom.is-active {
+  .header-bottom-row.is-active {
     display: block;
     position: absolute;
     width: 100%;

src/css/nav.css

@@ -8,6 +8,7 @@
   scrollbar-color: var(--color-border) transparent;
   height: 100%;
   z-index: var(--z-index-nav);
+  transition: all 0.1s;
 }
 
 .nav-menu::-webkit-scrollbar {
@@ -560,7 +561,7 @@ a.collapse-menu span {
   }
 }
 
-@media screen and (min-width: 767px) {
+@media screen and (max-width: 767px) {
   nav.nav a.menu-expand-toggle {
     right: -3.8rem;
     top: 60px;

src/css/vars.css

@@ -125,6 +125,7 @@
   --base-extra-small-space: 0.5rem; /* ~ 8px */
   --base-medium-space: 1.5rem; /* ~ 24px */
   --base-large-space: 2rem; /* ~ 32px */
+  --base-extra-large-space: 2.5rem; /* ~ 40px */
   --column-space: 2.5rem; /* ~ 40px */
   --admonition-icon-space: 1rem; /* ~ 16px */
   --admonition-content-space: 1rem; /* ~ 16px */

src/js/04-mobile-navbar.js

@@ -9,6 +9,7 @@
       navbarToggle.classList.toggle('is-active')
       document.getElementById(navbarToggle.dataset.target).classList.toggle('is-active')
       document.documentElement.classList.toggle('is-clipped--navbar')
+      document.querySelector('nav.collapse-menu').classList.remove('collapse-menu')
     })
   })
 })()

src/partials/header-content.hbs

@@ -18,9 +18,9 @@
   </div>
   {{! End primary header }}
   {{! Start secondary header }}
-  <div class="header-bottom-row">
+  <div class="header-bottom-row" id="topbar-menu">
     <div class="container">
-        <nav id="topbar-menu" class="navbar navbar-new-bottom">
+        <nav  class="navbar navbar-new-bottom">
 
               <div class="navbar-collapse collapse" id="navbar2">
                 <ul class="navbar-nav w-100 justify-content-start">