scaling and text formatting scanner docs

Author: dpatanin

src/scss/components/_sidebar.scss

@@ -64,8 +64,7 @@ span {
 	@include media-breakpoint-down(sm) {
 		display: none;
 	}
-	min-width: 100px;
-	max-width: 250px;
+	width: 8vw;
     background: $secureCodeBlue;
     height: 100vh;
     align-self: flex-start;

src/scss/pages/scanners/_scanner.scss

@@ -1,23 +1,42 @@
 .scanner {
   display: flex;
   #content {
-    width: 80vw;
+    width: 90vw;
+    #scanner-doc{
+      width: 55vw;
+    }
     h1 {
+      font-family: $font-family-heading;
+      font-size: 2.2rem;
+      font-weight: bold;
       color: $black;
+      margin-top: 5px;
+      margin-bottom: 10px;
     }
     h2 {
+      font-family: $font-family-heading;
+      font-size: 1.6rem;
       color: $black;
+      margin-bottom: 10px;
     }
     h3 {
+      font-family: $font-family-heading;
+      font-size: 1.1rem;
       color: $black;
+      margin-bottom: 5px;
     }
     p {
+      font-family: $font-family-base;
+      color: $secondary;
+      margin-bottom: 15px;
+    }
+    pre {
       color: $secondary;
+      margin-bottom: 15px;
     }
     img {
-     max-height: 10vw;
-     max-width: 80vw;
-      
+      max-height: 10vw;
+      max-width: 80vw;
     }
     a {
       img {

src/templates/scanner.js

@@ -26,7 +26,7 @@ const Scanner = ({ data }) => {
         </nav>
 
         <div id="content">
-          <div class="container-fluid">
+          <div class="container-fluid" id="scanner-doc">
             <h1 className="title">{title}</h1>
             <div
               className="content"