improve preview CSS

static/default.css

@@ -1,3 +1,32 @@
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 400;
+  src: local('IBM Plex Sans'), local('IBMPlexSans'),
+    url('./fonts/ibm-plex-sans-v7-latin-ext_latin_greek-regular.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 400;
+  src: local('IBM Plex Sans Italic'), local('IBMPlexSans-Italic'),
+    url('./fonts/ibm-plex-sans-v7-latin-ext_latin_greek-italic.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: normal;
+  font-weight: 700;
+  src: local('IBM Plex Sans Bold'), local('IBMPlexSans-Bold'),
+    url('./fonts/ibm-plex-sans-v7-latin-ext_latin_greek-700.woff2') format('woff2');
+}
+@font-face {
+  font-family: 'IBM Plex Sans';
+  font-style: italic;
+  font-weight: 700;
+  src: local('IBM Plex Sans Bold Italic'), local('IBMPlexSans-BoldItalic'),
+    url('./fonts/ibm-plex-sans-v7-latin-ext_latin_greek-700italic.woff2') format('woff2');
+}
+
 * {
   -webkit-print-color-adjust: exact; /* force printing of CSS backgrounds */
 }
@@ -9,24 +38,40 @@ uncomment this when https://gitlab.pagedmedia.org/tools/pagedjs/issues/94 is fix
 }
 */
 html {
-  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
-  line-height: 1.5;
+  font-family: 'IBM Plex Sans', 'Segoe UI', Helvetica, Arial, sans-serif;
+  font-size: 18px;
+  line-height: 1.7;
+  background-color: #fcfcfc;
+  color: #1a1a1a;
 }
 body {
-  margin: 50px;
-  margin-top: 100px;
+  margin: 0 auto;
+  max-width: 40em;
+  padding: 50px;
   word-wrap: break-word;
+  text-rendering: optimizeLegibility;
+  font-kerning: normal;
+}
+p {
+  margin-top: 1.7em;
+}
+a {
+  color: #1a1a1a;
 }
 img {
   max-width: 100%;
 }
 h1, h2, h3, h4, h5, h6 {
   margin-top: 1.5em;
 }
+ol, ul {
+  padding-left: 1.7em;
+}
 blockquote {
-  margin: 2.5em 0 2.5em 2.5em;
-  padding-left: 16px;
+  margin: 1.7em 0 1.7em 1.7em;
+  padding-left: 1em;
   border-left: 2px solid #e6e6e6;
+  font-style: italic;
 }
 code {
   font-family: Menlo, Monaco, 'Lucida Console', Consolas, monospace;
@@ -36,11 +81,14 @@ code {
   padding: .2em .4em;
 }
 pre {
-  padding: 16px;
+  padding: 1em;
   background-color: rgb(246,248,250);
   overflow: auto;
 }
 pre code {
   padding: 0;
   overflow: visible;
 }
+hr {
+  color: #1a1a1a;
+}