Bring CSS closer to Dokka

Right now the specification looks very different from the rest of the Kotlin documentation. This PR brings it closer to the fonts and colors used in Dokka.

Author: serras

web/resources/css/main.css

@@ -2,6 +2,8 @@
  * I add this to html files generated with pandoc.
  */
 
+@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
+
 html {
     font-size: 100%;
     overflow-y: scroll;
@@ -11,9 +13,9 @@ html {
 
 body {
     color: #444;
-    font-family: Georgia, Palatino, 'Palatino Linotype', Times, 'Times New Roman', serif;
-    font-size: 12px;
-    line-height: 1.7;
+    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
+    font-size: 16px;
+    line-height: 26px;
     padding: 1em 1em 1em 300px;
     margin: auto;
     max-width: 700px;
@@ -63,7 +65,7 @@ h2 {
     background: #fbfbfd;
 
     font-size: 13px;
-    font-family: Arial, serif;
+    font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Droid Sans, Helvetica Neue, Arial, sans-serif;
 
     z-index: 2;
     border-right: 1px solid rgba(39, 40, 44, 0.20);
@@ -355,7 +357,7 @@ h1, h2, h3, h4, h5, h6 {
     color: #111;
     line-height: 125%;
     margin-top: 2em;
-    font-weight: normal;
+    font-weight: 600;
 }
 
 h4, h5, h6 {
@@ -366,6 +368,7 @@ h1 {
     font-size: 2.5em;
     counter-increment: part;
     counter-reset: chapter section subsection subsubsection paragraph;
+    text-align: center;
 }
 
 h1.unnumbered {
@@ -374,10 +377,6 @@ h1.unnumbered {
     counter-reset: none;
 }
 
-h1:before {
-    content: counter(part) "\0000a0\0000a0";
-}
-
 h1.unnumbered:before {
     content: none;
 }
@@ -397,7 +396,9 @@ h2.unnumbered {
 h2:before {
     content: "Chapter\00a0" counter(chapter);
     display: block;
-    margin-bottom: 2ex;
+    margin-bottom: 5px;
+    color: grey;
+    font-style: italic;
 }
 
 h2.unnumbered:before {
@@ -487,8 +488,7 @@ hr {
 
 pre, code, kbd, samp {
     color: #000;
-    font-family: monospace, monospace;
-    _font-family: 'courier new', monospace;
+    font: 400 15.5px/24px JetBrains Mono,SFMono-Regular,Consolas,Liberation Mono,Menlo,Courier,monospace;
     font-size: 0.98em;
 }
 
@@ -498,6 +498,10 @@ pre {
     word-wrap: break-word;
 }
 
+em {
+    font-style: oblique;
+}
+
 b, strong {
     font-weight: bold;
 }
@@ -612,6 +616,13 @@ table td {
 .author {
     font-size: 1.2em;
     text-align: center;
+    margin: 0;
+}
+
+.subtitle {
+    font-size: 1.2em;
+    text-align: center;
+    font-style: italic;
 }
 
 @media only screen and (min-width: 480px) {
@@ -1228,4 +1239,4 @@ h2, h3, h4, h5 {
 #toc-element-kotlincore{
     pointer-events: none;
     cursor: default;
-}
+}