add basic markdown document styling

web/pw-server/src/routes/docs/doc.svelte

@@ -1,15 +1,11 @@
-<div class="container">
+<div class="container markdown-body">
   <slot />
 </div>
 
-<style scoped lang="scss">
+<style lang="scss">
   @use "src/styles/variables";
   .container {
     max-width: 800px;
-    color: rgb(36, 41, 47);
   }
 
-  .container a {
-    color: variables.$blue-primary;
-  }
 </style>

web/pw-server/src/styles/global.scss

@@ -1,3 +1,4 @@
 @forward "./variables.scss";
 @forward "./buttons.scss";
 @forward "./prism.scss";
+@forward "./markdown.scss"

web/pw-server/src/styles/markdown.scss

@@ -0,0 +1,37 @@
+@use "./variables.scss";
+
+.markdown-body {
+  color: rgb(36, 41, 47);
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell,
+  "Open Sans", "Helvetica Neue", sans-serif;
+
+
+  a {
+    color: variables.$blue-primary;
+  }
+
+  code {
+    color: darken(#e3116c, 5%);
+    font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace;
+    direction: ltr;
+    text-align: left;
+    white-space: pre;
+    word-spacing: normal;
+    word-break: normal;
+    font-size: 0.9em;
+    line-height: 1.2em;
+
+    -moz-tab-size: 4;
+    -o-tab-size: 4;
+    tab-size: 4;
+
+    -webkit-hyphens: none;
+    -moz-hyphens: none;
+    -ms-hyphens: none;
+    hyphens: none;
+  }
+
+  li {
+    padding: .5em;
+  }
+}