Styles for headers inside user markdown

When markdown is used inside jsdoc, any headers are just emitted
as is; in practice this leads to bigger headers inside smaller
headers (h1 inside h2 in the readme), which does not look very good.

This commit introduces a special set of header styles for use inside
documentation, which makes the case above look great.

static/styles/jsdoc.css

@@ -119,6 +119,51 @@ h6 {
   font-style: italic;
 }
 
+.usertext h1 {
+  font-family: "Source Code Pro", monospace;
+  font-size: 24px;
+  margin: 2.5em 0 1em;
+  font-weight: 300;
+}
+
+.usertext h2 {
+  font-family: "Source Code Pro", monospace;
+  font-size: 18px;
+  margin: 2em 0 0.5em;
+  font-weight: 300;
+
+}
+
+.usertext h3 {
+  font-family: "Source Code Pro", monospace;
+  font-size: 15px;
+  margin: 1.5em 0 0;
+  font-weight: 300;
+}
+
+.usertext h4 {
+  font-family: "Source Code Pro", monospace;
+  font-size: 14px;
+  margin: 0 0 0;
+  font-weight: 400;
+}
+
+.usertext h5 {
+  font-size: 12px;
+  margin: 1em 0 0;
+  font-weight: normal;
+  color: #666;
+}
+
+.usertext h6 {
+  font-size: 11px;
+  margin: 1em 0 0;
+  font-weight: normal;
+  font-style: normal;
+  color: #666;
+}
+
+
 tt, code, kbd, samp {
   font-family: Consolas, Monaco, 'Andale Mono', monospace;
   background: #f4f4f4;
@@ -669,3 +714,18 @@ html[data-search-mode] .level-hide {
 #disqus_thread{
     margin-left: 30px;
 }
+
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 300;
+  font-display: swap;
+  src: local('Source Code Pro Light'), local('SourceCodePro-Light'), url(fonts/SourceCodePro-Light.ttf) format('truetype');
+}
+@font-face {
+  font-family: 'Source Code Pro';
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Source Code Pro'), local('SourceCodePro-Regular'), url(fonts/SourceCodePro-Regular.ttf) format('truetype');
+}

tmpl/container.tmpl

@@ -29,7 +29,7 @@
             <sup class="variation"><?js= doc.variation ?></sup>
         <?js } ?></h2>
         <?js if (doc.classdesc) { ?>
-            <div class="class-description"><?js= doc.classdesc ?></div>
+            <div class="class-description usertext"><?js= doc.classdesc ?></div>
         <?js } ?>
     <?js } else if (doc.kind === 'module' && doc.modules) { ?>
         <?js doc.modules.forEach(function(module) { ?>
@@ -45,7 +45,7 @@
         <div class="container-overview">
         <?js if (doc.kind === 'module' && doc.modules) { ?>
             <?js if (doc.description) { ?>
-                <div class="description"><?js= doc.description ?></div>
+                <div class="description usertext"><?js= doc.description ?></div>
             <?js } ?>
 
             <?js doc.modules.forEach(function(module) { ?>
@@ -57,7 +57,7 @@
             <?js= self.partial('details.tmpl', doc) ?>
 
             <?js if (doc.description) { ?>
-                <div class="description"><?js= doc.description ?></div>
+                <div class="description usertext"><?js= doc.description ?></div>
             <?js } ?>
 
             <?js if (doc.examples && doc.examples.length) { ?>

tmpl/exceptions.tmpl

@@ -4,7 +4,7 @@
 <?js if (data.description && data.type && data.type.names) { ?>
 <dl>
     <dt>
-        <div class="param-desc">
+        <div class="param-desc usertext">
         <?js= data.description ?>
         </div>
     </dt>
@@ -22,7 +22,7 @@
     <dd></dd>
 </dl>
 <?js } else { ?>
-    <div class="param-desc">
+    <div class="param-desc usertext">
     <?js if (data.description) { ?>
         <?js= data.description ?>
     <?js } else if (data.type && data.type.names) { ?>

tmpl/mainpage.tmpl

@@ -9,7 +9,7 @@ var self = this;
     </section>
 <?js } ?>
 <?js if (data.readme) { ?>
-    <section class="readme">
+    <section class="readme usertext">
         <article><?js= data.readme ?></article>
     </section>
 <?js } ?>

tmpl/members.tmpl

@@ -11,7 +11,7 @@ var self = this;
 <?js= this.partial('details.tmpl', data) ?>
 
 <?js if (data.description) { ?>
-<div class="description">
+<div class="description usertext">
     <?js= data.description ?>
 </div>
 <?js } ?>

tmpl/method.tmpl

@@ -20,14 +20,14 @@ var self = this;
     ?><?js= (data.signature || '') ?></h4>
 
     <?js if (data.summary) { ?>
-    <p class="summary"><?js= summary ?></p>
+    <p class="summary usertext"><?js= summary ?></p>
     <?js } ?>
 <?js } ?>
 
 <?js= this.partial('details.tmpl', data) ?>
 
 <?js if (data.kind !== 'module' && data.description) { ?>
-<div class="description">
+<div class="description usertext">
     <?js= data.description ?>
 </div>
 <?js } ?>

tmpl/properties.tmpl

@@ -1,7 +1,6 @@
 <?js
     var data = obj;
     var props = data.subprops || data.properties;
-
     /* sort subprops under their parent props (like opts.classname) */
     var parentProp = null;
     props.forEach(function(prop, i) {