UI issues fixes for table paragraph spacing , h1 label alignment, fix font size of h4 and h5

Author: rakeshAlgo

src/css/doc.css

@@ -25,17 +25,22 @@
   margin: 2.5rem 0 0;
 }
 
+.page-heading-title {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 .doc h1.page {
   font-size: var(--heading-h1);
+  line-height: 50px;
   margin-top: 0;
+  margin-right: var(--base-space);
   display: inline-block;
 }
 
 .doc h1.page + .labels {
   display: inline-block;
-  position: relative;
-  top: -5px;
-  margin-left: var(--base-space);
 }
 
 .doc h2 {
@@ -64,7 +69,7 @@
 }
 
 .doc h5 {
-  font-size: var(--heading-h4);
+  font-size: var(--heading-h5);
 }
 
 .doc h1 > a.anchor,
@@ -77,10 +82,20 @@
   position: absolute;
   text-decoration: none;
   width: 3ex;
-  margin-left: -2.5ex;
+  margin-left: -2.75ex;
   visibility: hidden;
   text-align: center;
+  transform: scale(0.85);
+}
+
+.doc h1 > a.anchor {
+  transform: scale(0.65);
+  margin-left: -2.25ex;
+}
+
+.doc h2 > a.anchor {
   transform: scale(0.75);
+  margin-left: -2.5ex;
 }
 
 .doc h1:hover a.anchor,
@@ -1015,6 +1030,7 @@ table.tableblock pre code.language-bash.hljs {
     font-size: var(--heading-h1-sm);
     margin-bottom: 10px;
     display: block;
+    line-height: 46px;
   }
 
   .doc h2 {

src/css/table.css

@@ -58,7 +58,7 @@ table.tableblock > tbody th {
   display: block;
   border-bottom: 1px solid var(--color-brand-gray8);
   padding-left: var(--base-small-space);
-  padding-top: var(--base-space);
+  /* padding-top: var(--base-space); */
   padding-bottom: var(--base-space);
 }
 
@@ -69,10 +69,14 @@ table.tableblock tbody td p {
   font-weight: var(--weight-medium);
 }
 
-table.tableblock .content .paragraph,
+table.tableblock tbody td.tableblock p.tableblock {
+  margin-top: 1rem;
+}
+
+/* table.tableblock .content .paragraph,
 table.tableblock .content .ulist {
   margin-top: 0;
-}
+} */
 
 /* table.tableblock tr:nth-child(odd) {
     background: rgba(0, 0, 0, 0.07);g29
@@ -105,6 +109,12 @@ table.table-tutorial tr td:last-child {
   background-color: var(--color-brand-gray7);
 }
 
+.tableblock thead a,
+.tableblock tbody a,
+.tableblock p {
+  font-family: inherit;
+}
+
 /* Responsive css  */
 
 @media screen and (min-width: 768px) {
@@ -147,6 +157,7 @@ table.table-tutorial tr td:last-child {
   table.tableblock tbody td,
   table.tableblock > tbody th {
     display: table-cell;
+    min-width: 5rem;
   }
 
   table.tableblock td,

src/css/vars.css

@@ -110,7 +110,8 @@
   --heading-h1: 2.5rem; /* ~40px */
   --heading-h2: 2rem; /* ~32px */
   --heading-h3: 1.5rem; /* ~24px */
-  --heading-h4: 1rem; /* ~16px */
+  --heading-h4: 1.25rem; /* ~20px */
+  --heading-h5: var(--font-base);  /* ~16px */
 
   /* line height  */
   --line-height-body: 160%;

src/partials/article.hbs

@@ -1,7 +1,9 @@
 <article class="doc">
 {{#if page.title}}
+<div class="page-heading-title">
 <h1 class="page">{{{page.title}}}</h1>
 {{> labels}}
+</div>
 {{/if}}
 {{> contributor-bot}}
 {{{page.contents}}}