Fixed some visual bugs and harmonized typography

src/assets/stylesheets/modules/article/_appearance.scss

@@ -46,10 +46,17 @@
   /*
    * Headlines and chapters in primary color
    */
-  h1, h2, p > code, td > code {
+  h1, h2 {
     color: $primary;
   }
 
+  /*
+   * Lower border for main headline
+   */
+  h1 {
+    border-bottom: 1px solid $black-lightest;
+  }
+
   /*
    * Color links
    */

src/assets/stylesheets/modules/article/_layout.scss

@@ -29,7 +29,7 @@
  */
 .article {
   font-size: 14px;
-  line-height: 24px;
+  line-height: 1.7em;
 
   /* [tablet landscape+]: Indent to account for drawer */
   @include break-from-device(tablet landscape) {
@@ -40,8 +40,8 @@
    * Clearfix
    */
   &:after {
-    display: block;
     content: " ";
+    display: block;
     clear: both;
   }
 
@@ -83,21 +83,20 @@
   }
 
   /*
-   * Article headlines
+   * Article headline
    */
   h1 {
     font-size: 24px;
-    line-height: 32px;
+    line-height: 1.333334em;
-    padding-top: 20px;
+    padding: 20px 0 42px;
-    margin-bottom: 42px;
   }
 
   /*
-   * Article chapters - account for fixed header offset
+   * Article chapters
    */
   h2 {
     font-size: 20px;
-    line-height: 28px;
+    line-height: 1.4em;
     padding-top: (36px + 56px);
     margin-top: (0px - 56px);
 
@@ -110,18 +109,25 @@
     }
   }
 
+  /*
+   * Sub headlines
+   */
+  h3, h4 {
+    font-size: 1.0em;
+  }
+
   /*
    * Paragraphs and section titles
    */
-  p, h3, li {
+  p, h3, h4, ul, ol {
-    font-size: 14px;
+    margin-top: 1.5em;
-    margin-top: 20px;
   }
 
   /*
    * List elements
    */
   li {
+    margin-top: 0.75em;
     margin-left: 18px;
 
     /*
@@ -136,8 +142,8 @@
    * Add icon for elements of an unordered list
    */
   ul li:before {
+    content: "\e602";
     display: inline-block;
-    content: '\e602';
     font-family: 'Icon';
     font-size: 16px;
     width: 1.2em;
@@ -152,28 +158,36 @@
     white-space: nowrap;
   }
 
+  /*
+   * Add spacing at top of separator
+   */
+  hr {
+    margin-top: 1.5em;
+  }
+
+  /*
+   * Limit images to article container
+   */
+  img {
+    max-width: 100%;
+  }
+
   /*
    * Code listing container
    */
   pre {
     padding: 16px;
-    margin: 20px -16px 0;
+    margin: 1.5em -16px 0;
+    line-height: 1.5em;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-
-    /*
-     * Code listing
-     */
-    code {
-      line-height: 21px;
-    }
   }
 
   /*
    * Data tables
    */
   table {
-    margin: 40px 0 20px;
+    margin: 3.0em 0 1.5em;
     font-size: 13px;
 
     /*
@@ -210,8 +224,8 @@
    * Data table wrapper, in case javascript is available
    */
   .data {
-    margin: 20px -16px;
+    margin: 1.5em -16px;
-    padding: 20px 0;
+    padding: 1.5em 0;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
     text-align: center;
@@ -227,7 +241,7 @@
 
     /* [tablet portait+]: Increase spacing */
     @include break-from-device(tablet portrait) {
-      margin: 20px -24px;
+      margin: 1.5em -24px;
 
       /*
        * Data table
@@ -261,8 +275,8 @@
      * Increase spacing for code blocks
      */
     pre {
-      padding: 20px 24px;
+      padding: 1.5em 24px;
-      margin: 20px -24px 0;
+      margin: 1.5em -24px 0;
     }
   }
 }

src/assets/stylesheets/modules/article/_typography.scss

@@ -30,9 +30,17 @@
 .article {
 
   /*
-   * Section titles should be bold
+   * Third-level headlines should be bold
    */
   h3 {
     font-weight: 700;
   }
+
+  /*
+   * Fourth-level headlines should be italic
+   */
+  h4 {
+    font-weight: 400;
+    font-style: italic;
+  }
 }

src/assets/stylesheets/modules/base/_layout.scss

@@ -115,8 +115,8 @@ hr {
    * Actual paper
    */
   &:after {
-    display: block;
     content: " ";
+    display: block;
     height: 100%;
     margin-left: 262px;
   }