improve docs styles

Author: ocombe

packages/angular/preview/src/app/docs/docs.component.ts

@@ -2,7 +2,7 @@ import { Component, Input, ViewChild, ElementRef } from '@angular/core';
 
 @Component({
   selector: 'app-docs',
-  template: ` <div #docsRoot [innerHTML]="template | safeHtml"></div> `,
+  template: ` <div #docsRoot [innerHTML]="template | safeHtml" class='docsMainBlock'></div> `,
   styleUrls: ['./docs.style.scss'],
 })
 export class DocsComponent {

packages/angular/preview/src/app/docs/docs.style.scss

@@ -0,0 +1,85 @@
+.docsMainBlock {
+  padding: 50px 40px 10px;
+  max-width: 1440px;
+  margin: 0 auto 150px;
+
+  ::ng-deep {
+    color: #414141;
+
+    h1, h2, h3, h4, h5, h6 {
+      font-weight: 700;
+      margin: 0 0 20px;
+    }
+
+    h1, h2 {
+      border-bottom: 1px solid #ededed;
+      padding-bottom: 8px;
+    }
+
+    h3, h4, h5, h6 {
+      margin-top: 40px;
+      width: 100%;
+      justify-content: start;
+    }
+
+    h1 {
+      font-size: 36px
+    }
+
+    h2 {
+      font-size: 26px
+    }
+
+    h3 {
+      font-size: 24px
+    }
+
+    h4 {
+      font-size: 18px
+    }
+
+    h5, h6 {
+      font-size: 16px
+    }
+
+    :not(pre) > code {
+      font-family: monospace,sans-serif;
+      border-radius: .25em;
+      padding: .2em .4em;
+      font-size: .85em;
+      background-color: hsla(0,0%,65.1%,.2);
+    }
+
+    a {
+      text-decoration: none;
+    }
+
+    blockquote {
+      background-color: rgba(202,200,200,.2);
+      border-left: 5px solid #897dec;
+      border-radius: 5px;
+      padding: 1em 10px 1em 18px;
+      margin: 0 0 1em;
+    }
+
+    ul {
+      padding-left: 18px;
+      margin-bottom: 0;
+    }
+
+    ol {
+      list-style: revert;
+      list-style-position: outside;
+      margin: 0 0 16px;
+      padding: 0 0 0 32px;
+    }
+
+    hr {
+      border: none;
+      border-bottom: 1px solid #ededed;
+      border-radius: 5px;
+      margin-bottom: 40px;
+      margin-top: 30px;
+    }
+  }
+}