Merge pull request #26 from rakeshAlgo/ui-fixes

Docs-Sandbox-Site-Validation UI Fixes.

Author: amarantha-k

package-lock.json

@@ -16,8 +16,7 @@ body {
 
 body {
   color: var(--color-text);
-  font-family: "Open Sans", sans-serif;
-  /* font-family: "Gotham", sans-serif; */
+  font-family: "Source Sans Pro", sans-serif;
   line-height: var(--line-height-body);
   margin: 0;
 }
@@ -59,14 +58,14 @@ button::-moz-focus-inner {
 code,
 kbd,
 pre {
-  /* font-family: "Roboto Mono", monospace; */
-  font-family: "Source Code Pro", sans-serif;
+  font-family: 'Source Code Pro', monospace;
 }
 
 code {
-  color: var(--color-brand-black);
-  font-size: var(--font-base);
+  background-color: #0074e00e;
+  font-size: var(--font-small);
   word-spacing: -0.125em;
+  color: var(--color-brand-gray1);
 }
 
 html code {
@@ -82,6 +81,13 @@ small {
   font-size: 0.8em;
 }
 
+em,
+i {
+  font-style: italic;
+  font-family: "Open Sans", sans-serif;
+  font-weight: 400;
+}
+
 .container,
 .container-fluid {
   margin: 0 auto;

src/css/base.css

@@ -78,12 +78,10 @@
   border-left: 3px solid var(--color-brand-gray8);
 }
 
-.frame-dropdown ul.frame-dropdown-list li,
+/* .frame-dropdown ul.frame-dropdown-list li,
 .frame-dropdown ul.related li {
   border-bottom: 1px solid var(--color-brand-gray8);
-  /* padding-bottom: 5px; */
-  /* margin-bottom: 5px; */
-}
+} */
 
 ul.frame-dropdown-list li:last-child,
 .frame-dropdown ul.related li:last-child {

src/css/component-frame.css

@@ -15,7 +15,7 @@
   font-weight: var(--weight-semibold);
   letter-spacing: -0.025rem;
   line-height: var(--line-height-heading);
-  margin: 1.5rem 0 -0.25rem;
+  margin: 1.5rem 0 1rem;
 }
 
 .doc h1 {
@@ -32,21 +32,20 @@
 
 .doc h2 {
   font-size: var(--heading-h2);
-  margin: 1.5rem 0 1.5rem;
   max-width: fit-content;
   display: inline-block;
   width: 100%;
   /* NOTE used to restrict width of key line */
 }
 
-.doc h2::after {
+/* .doc h2::after {
   content: "";
   display: block;
   max-width: 5.75rem;
   height: 0;
   outline: 0.5px solid currentColor;
   margin-top: 1.0625rem;
-}
+} */
 
 .doc h3 {
   font-size: var(--heading-h3);
@@ -109,10 +108,10 @@
   text-decoration: underline;
 }
 
-.doc code {
+/* .doc code {
   color: var(--color-text);
   font-weight: var(--weight-medium);
-}
+} */
 
 .doc pre code {
   display: block;
@@ -484,9 +483,9 @@
 }
 
 .doc .exampleblock > .content {
-  /* background-color: var(--color-shade); */
-  box-shadow: inset 0 0 1px #bec0c1;
-  /* padding: 1rem 1.25rem; */
+  box-shadow: 0 3px 10px #0000000f;
+  padding: 20px;
+  border: 1px solid var(--color-brand-gray8);
 }
 
 .doc .exampleblock > .content > :first-child {
@@ -540,17 +539,17 @@
   position: relative;
 }
 
-.doc pre.highlight .hljs-attr {
+/* .doc pre.highlight .hljs-attr {
   color: var(--hljs-attr);
-}
+} */
 
-.doc pre.highlight .hljs-string {
+/* .doc pre.highlight .hljs-string {
   color: var(--hljs-string);
-}
+} */
 
-.doc pre.highlight .hljs-number {
+/* .doc pre.highlight .hljs-number {
   color: var(--hljs-number);
-}
+} */
 
 /* .doc .listingblock code[data-lang]::before {
   content: attr(data-lang);
@@ -590,14 +589,14 @@
   font-family: "Source Sans Pro", sans-serif;
   padding-right: 0.5rem;
   border-right: 1px solid var(--color-brand-gray9);
+  z-index: 1;
 }
 
 .doc .listingblock:hover code[data-lang] + .data-source {
   display: block;
 }
 
 .doc .listingblock pre .fade-shadow {
-  content: "";
   display: inline-block;
   background:
     transparent