Improve annotation typography

 * Move the styled-text module into it's own file.
 * Add markdown examples to the pattern primer.
 * Fix list item, blockquote and code styles.
 * Improve font sizing of heading elements.
 * Ensure code, serif and sans-serif are rendered at similar sizes.
 * Style sub lists.

h/static/styles/annotations.scss

@@ -39,52 +39,6 @@
     }
   }
 
-// This class applies to the markdown rendered annotation body.
-  .styled-text {
-
-    p, h1, h2, h3, h4, h5, h6, ol, ul, img, pre, blockquote {
-      margin: 0 0 .25em 0;
-    }
-
-    ol {
-      list-style-type: decimal;
-      list-style-position:inside;
-      padding-left: 1.5em;
-    }
-
-    ul {
-      list-style-type: disc;
-      list-style-position:inside;
-      padding-left: 1.5em;
-    }
-
-    img {
-      display: block;
-      max-width: 100%;
-    }
-
-    textarea {
-      min-height: 8em;
-      width: 100%;
-      resize: vertical;
-    }
-
-    code {
-      font-family: monospace;
-    }
-
-    pre code {
-      padding: 5px;
-      display: block;
-      background-color: $gray-lighter;
-      border-radius: .2em;
-    }
-
-    blockquote {
-      @include quote;
-    }
-  }
-
   .buttonbar {
     @include pie-clearfix;
     margin: .25em 0;

h/static/styles/common.scss

@@ -14,6 +14,7 @@ $headings-color: $text-color;
 @import 'responsive';
 @import 'threads';
 @import 'yui_grid';
+@import 'styled-text';
 @import 'simple-search';
 @import 'tags-input';
 
@@ -66,41 +67,6 @@ html {
   }
 }
 
-h1, h2, h3, h4, h5, h6 {
-  font-family: $sans-font-family;
-  color: $headings-color;
-}
-
-h1 {
-  font-size: 2em;
-  margin: .67em 0;
-}
-
-h2 {
-  font-size: 1.5em;
-  margin-top: 15px;
-}
-
-h3 {
-  font-size: 1.25em;
-  margin: .83em 0;
-}
-
-h4 {
-  font-size: 1.15em;
-  margin: .83em 0;
-}
-
-h5 {
-  font-size: 1.05em;
-  margin: 1.5em 0;
-}
-
-h6 {
-  font-size: 1em;
-  margin: 1.67em 0;
-}
-
 //PAPER////////////////////////////////
 //Provides the white background upon which items sit
 .paper {

h/static/styles/styled-text.scss

+@import "base";
+
+.styled-text {
+  h1, h2, h3, h4, h5, h6, p, ol, ul, img, pre, blockquote {
+    margin: .618em 0;
+  }
+
+  h1, h2, h3, h4, h5, h6 {
+    font-family: $sans-font-family;
+  }
+
+  // Use a modular scale for headings:
+  // http://modularscale.com/scale/?px1=13&px2=16&ra1=1.618&ra2=0
+  h1 {
+    font-size: 2.618em;
+    font-weight: bold;
+    margin: .2327em 0;
+  }
+
+  h2 {
+    font-size: 1.991em;
+    font-weight: bold;
+    margin: .309em 0;
+  }
+
+  h3 {
+    font-size: 1.991em;
+    margin: .309em 0;
+  }
+
+  h4 {
+    font-size: 1.618em;
+    margin: .3803em 0;
+  }
+
+  h5 {
+    font-size: 1.231em;
+    margin: .4944em 0;
+  }
+
+  h6 {
+    font-size: 1.231em;
+    margin: .4944em 0;
+  }
+
+  ol, ul {
+    padding-left: 1.25em;
+  }
+
+  ol {
+    list-style-type: decimal;
+  }
+
+  ul {
+    list-style-type: disc;
+  }
+
+  ol, ul {
+    ul {
+      list-style-type: circle;
+    }
+  }
+
+  li {
+    margin-bottom: .291em;
+  }
+
+  li, p {
+    line-height: 1.3;
+  }
+
+  a {
+    text-decoration: underline;
+  }
+
+  img {
+    display: block;
+    max-width: 100%;
+  }
+
+  blockquote {
+    @include quote;
+    font-size: .8125em; // Serif font is much larger than sans.
+    margin: 1em 0;
+
+    p, ol, ul, img, pre, blockquote {
+      margin: .7063em 0;
+    }
+
+    p, li {
+      line-height: 1.5;
+    }
+  }
+
+  code {
+    font-family: Open Sans Mono, Menlo, DejaVu Sans Mono, monospace;
+    font-size: .875em;
+    color: black;
+  }
+
+  pre code {
+    padding: 10px;
+    display: block;
+    background-color: $gray-lightest;
+    border-radius: 2px;
+  }
+}