Remove GlMarkdown class

6 files changed, 422 insertions, 428 deletions

diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index 92ca1fca..6ac5d2ac 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -1,560 +1,554 @@
----
-version: 1
----
-
-// Typography
+//---
+//version: 2
+//---
 
 @import 'variables';
 @import 'mixins/breakpoints';
 @import 'mixins/md-typography';
 @import 'mixins/spacing';
 
-// Documentation Markdown typescale
-
-.gl-markdown {
-  p,
-  ul,
-  ol,
-  pre,
-  blockquote {
-    font-size: 1rem;
-    font-weight: normal;
-    letter-spacing: normal;
-    margin-top: 0;
-    margin-bottom: 1.5em;
-  }
+p,
+ul,
+ol,
+pre,
+blockquote {
+  font-size: 1rem;
+  font-weight: normal;
+  letter-spacing: normal;
+  margin-top: 0;
+  margin-bottom: 1.5em;
+}
 
-  blockquote {
-    background-color: $gds-gray-50;
-    color: $gds-black;
-    border: solid 1px $gray-100;
-    border-radius: 0.313rem;
-    margin: 1rem 0;
-    padding: 1rem;
+blockquote {
+  background-color: $gds-gray-50;
+  color: $gds-black;
+  border: solid 1px $gray-100;
+  border-radius: 0.313rem;
+  margin: 1rem 0;
+  padding: 1rem;
 
-    ul {
-      margin-bottom: 0;
-    }
+  ul {
+    margin-bottom: 0;
   }
+}
 
-  ul,
-  ol {
-    margin-top: 0.5rem;
-    margin-left: 0;
-    padding-left: 1em;
+ul,
+ol {
+  margin-top: 0.5rem;
+  margin-left: 0;
+  padding-left: 1em;
 
-    li {
-      margin-bottom: 0.5rem;
-    }
+  li {
+    margin-bottom: 0.5rem;
   }
+}
 
+ol {
   ol {
+    list-style-type: lower-alpha;
     ol {
-      list-style-type: lower-alpha;
-      ol {
-        list-style-type: lower-roman;
-      }
+      list-style-type: lower-roman;
     }
   }
+}
 
 
-  ul ul,
-  ol ol,
-  ul ol,
-  ol ul {
-    margin-top: 0.5rem;
-    margin-bottom: 0;
-  }
+ul ul,
+ol ol,
+ul ol,
+ol ul {
+  margin-top: 0.5rem;
+  margin-bottom: 0;
+}
 
-  b,
-  strong,
-  em,
-  small {
-    line-height: 1;
-  }
+b,
+strong,
+em,
+small {
+  line-height: 1;
+}
 
-  sup {
-    line-height: 0;
-    position: relative;
-    vertical-align: baseline;
-    top: -0.5em;
-  }
+sup {
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+  top: -0.5em;
+}
 
-  sub {
-    bottom: -0.25em;
-  }
+sub {
+  bottom: -0.25em;
+}
 
-  // Keyboard input
+// Keyboard input
 
-  kbd {
-    background-color: $gray-700;
-    border-radius: 4px;
-    color: $white;
-    line-height: 1;
-    overflow-wrap: break-word;
-    padding: 2px 4px;
-  }
+kbd {
+  background-color: $gray-700;
+  border-radius: 4px;
+  color: $white;
+  line-height: 1;
+  overflow-wrap: break-word;
+  padding: 2px 4px;
+}
 
-  // Highlighted text
+// Highlighted text
 
-  mark {
-    background-color: $blue-100;
-  }
+mark {
+  background-color: $blue-100;
+}
 
-  // Code
+// Code
 
-  *:not(pre) > code {
-    background-color: $gray-50;
-    border-radius: 4px;
-    line-height: 1;
-    overflow-wrap: break-word;
-    padding: 2px 4px;
-    transition: background-color 0.15s linear;
-  }
+*:not(pre) > code {
+  background-color: $gray-50;
+  border-radius: 4px;
+  line-height: 1;
+  overflow-wrap: break-word;
+  padding: 2px 4px;
+  transition: background-color 0.15s linear;
+}
+
+pre {
+  background-color: desaturate($theme-indigo-950, 20%);
+  border-radius: 4px;
+  color: $white;
+  padding: 1rem;
+}
 
-  pre {
-    background-color: desaturate($theme-indigo-950, 20%);
-    border-radius: 4px;
-    color: $white;
-    padding: 1rem;
+.clip-btn {
+  fill: $white;
+  background-color: $pre-code-color;
+  border: 0;
+  svg {
+    opacity: 0.5;
+    transition: opacity 0.3s ease-in;
+    pointer-events: none;
+  }
+  @media all and (max-width: $bp-sm) {
+    display: none;
   }
 
-  .clip-btn {
-    fill: $white;
-    background-color: $pre-code-color;
-    border: 0;
+  &:hover {
     svg {
-      opacity: 0.5;
-      transition: opacity 0.3s ease-in;
-      pointer-events: none;
-    }
-    @media all and (max-width: $bp-sm) {
-      display: none;
-    }
-
-    &:hover {
-      svg {
-        opacity: 1;
-      }
+      opacity: 1;
     }
   }
+}
 
-  // Badge tier
+// Badge tier
 
-  .badge-tier {
-    color: $red-500;
-    font-size: 0.75rem;
-    font-weight: 800;
-    text-transform: uppercase;
+.badge-tier {
+  color: $red-500;
+  font-size: 0.75rem;
+  font-weight: 800;
+  text-transform: uppercase;
 
-    &:hover {
-      border-bottom-color: $red-700;
-      color: $red-700;
-    }
+  &:hover {
+    border-bottom-color: $red-700;
+    color: $red-700;
   }
+}
 
-  .introduced-in {
-    border-left: 4px solid $theme-indigo-200;
-    padding-left: 0.75rem;
-    margin-bottom: 1.5rem;
+.introduced-in {
+  border-left: 4px solid $theme-indigo-200;
+  padding-left: 0.75rem;
+  margin-bottom: 1.5rem;
 
-    p {
-      font-size: 0.875rem;
-    }
+  p {
+    font-size: 0.875rem;
   }
+}
 
-  hr {
-    border: 0;
-    border-top: 1px solid rgba($theme-indigo-900, 0.16);
-    height: 0;
-    margin-top: 1rem;
-    margin-bottom: 1rem;
+hr {
+  border: 0;
+  border-top: 1px solid rgba($theme-indigo-900, 0.16);
+  height: 0;
+  margin-top: 1rem;
+  margin-bottom: 1rem;
 
-    @include breakpoint(md) {
-      margin-top: 2rem;
-      margin-bottom: 2rem;
-    }
+  @include breakpoint(md) {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
   }
+}
 
-  @include gl-font-size-markdown;
-  @include gl-line-height-24;
-  @include gl-font-regular;
-  @include gl-font-weight-normal;
-
-  -webkit-font-smoothing: auto;
-
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .gl-h1,
-  .gl-h2,
-  .gl-h3,
-  .gl-h4,
-  .gl-h5,
-  .gl-h6 {
-    @include gl-font-weight-bold;
-    @include gl-mb-3;
-
-    // Permalinks on header elements.
+@include gl-font-size-markdown;
+@include gl-line-height-24;
+@include gl-font-regular;
+@include gl-font-weight-normal;
+
+-webkit-font-smoothing: auto;
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.gl-h1,
+.gl-h2,
+.gl-h3,
+.gl-h4,
+.gl-h5,
+.gl-h6 {
+  @include gl-font-weight-bold;
+  @include gl-mb-3;
+
+  // Permalinks on header elements.
+  .anchor {
+    transition: all 0.3s;
+    background: url('/assets/images/icon_anchor.svg') center center / contain no-repeat;
+    opacity: 0;
+    display: inline-block;
+    width: 1em;
+    height: 1em;
+    max-height: 2rem;
+    vertical-align: middle;
+    border-bottom: 0;
+    margin-left: 0.25rem;
+    margin-top: -0.25rem;
+    border-bottom: 0;
+  }
+
+  &:hover {
     .anchor {
-      transition: all 0.3s;
-      background: url('/assets/images/icon_anchor.svg') center center / contain no-repeat;
-      opacity: 0;
-      display: inline-block;
-      width: 1em;
-      height: 1em;
-      max-height: 2rem;
-      vertical-align: middle;
       border-bottom: 0;
-      margin-left: 0.25rem;
-      margin-top: -0.25rem;
-      border-bottom: 0;
-    }
-
-    &:hover {
-      .anchor {
-        border-bottom: 0;
-        opacity: 1;
-      }
+      opacity: 1;
     }
   }
+}
 
-  h3,
-  h4,
-  h5,
-  h6,
-  .gl-h3,
-  .gl-h4,
-  .gl-h5,
-  .gl-h6 {
-    @include gl-mt-6;
-    @include gl-mb-3;
-  }
-
-  h1,
-  .gl-h1 {
-    @include gl-font-size-markdown-h1;
-    @include gl-line-height-32;
-    @include gl-fluid-font-size(
-      $min: $gl-font-size-markdown-h1-md,
-      $max: $gl-font-size-markdown-h1-xl
-    );
-    @include gl-fluid-line-height($min: $gl-line-height-36, $max: $gl-line-height-52);
-    @include gl-mt-0;
-  }
+h3,
+h4,
+h5,
+h6,
+.gl-h3,
+.gl-h4,
+.gl-h5,
+.gl-h6 {
+  @include gl-mt-6;
+  @include gl-mb-3;
+}
 
-  h2,
-  .gl-h2 {
-    @include gl-font-size-markdown-h2;
-    @include gl-line-height-28;
-    @include gl-fluid-font-size(
-      $min: $gl-font-size-markdown-h2-md,
-      $max: $gl-font-size-markdown-h2-xl
-    );
-    @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
-    @include gl-mt-6;
-  }
+h1,
+.gl-h1 {
+  @include gl-font-size-markdown-h1;
+  @include gl-line-height-32;
+  @include gl-fluid-font-size(
+    $min: $gl-font-size-markdown-h1-md,
+    $max: $gl-font-size-markdown-h1-xl
+  );
+  @include gl-fluid-line-height($min: $gl-line-height-36, $max: $gl-line-height-52);
+  @include gl-mt-0;
+}
 
-  h3,
-  .gl-h3 {
-    @include gl-font-size-markdown-h3;
-    @include gl-line-height-24;
-    @include gl-fluid-font-size(
-      $min: $gl-font-size-markdown-h3-md,
-      $max: $gl-font-size-markdown-h3-xl
-    );
-    @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
-  }
+h2,
+.gl-h2 {
+  @include gl-font-size-markdown-h2;
+  @include gl-line-height-28;
+  @include gl-fluid-font-size(
+    $min: $gl-font-size-markdown-h2-md,
+    $max: $gl-font-size-markdown-h2-xl
+  );
+  @include gl-fluid-line-height($min: $gl-line-height-28, $max: $gl-line-height-36);
+  @include gl-mt-6;
+}
 
-  h4,
-  .gl-h4 {
-    @include gl-font-size-markdown;
-    @include gl-line-height-20;
-  }
+h3,
+.gl-h3 {
+  @include gl-font-size-markdown-h3;
+  @include gl-line-height-24;
+  @include gl-fluid-font-size(
+    $min: $gl-font-size-markdown-h3-md,
+    $max: $gl-font-size-markdown-h3-xl
+  );
+  @include gl-fluid-line-height($min: $gl-line-height-24, $max: $gl-line-height-28);
+}
 
-  h5,
-  .gl-h5,
-  h6,
-  .gl-h6 {
-    @include gl-font-size-markdown-sm;
-    @include gl-line-height-20;
-  }
+h4,
+.gl-h4 {
+  @include gl-font-size-markdown;
+  @include gl-line-height-20;
+}
 
-  h6,
-  .gl-h6 {
-    @include gl-text-gray-700;
-  }
+h5,
+.gl-h5,
+h6,
+.gl-h6 {
+  @include gl-font-size-markdown-sm;
+  @include gl-line-height-20;
+}
 
-  p,
-  .gl-paragraph {
-    @include gl-mt-0;
-    @include gl-mb-0;
+h6,
+.gl-h6 {
+  @include gl-text-gray-700;
+}
 
-    + p,
-    + .gl-paragraph {
-      @include gl-mt-5;
-    }
+p,
+.gl-paragraph {
+  @include gl-mt-0;
+  @include gl-mb-0;
 
-    &.sm {
-      @include gl-font-size-markdown-sm;
-      @include gl-line-height-20;
-    }
+  + p,
+  + .gl-paragraph {
+    @include gl-mt-5;
   }
 
-  .sm {
+  &.sm {
     @include gl-font-size-markdown-sm;
     @include gl-line-height-20;
   }
+}
 
-  .monospace {
-    @include gl-font-monospace;
-    @include gl-font-size-monospace-lg;
-    @include gl-line-height-24;
+.sm {
+  @include gl-font-size-markdown-sm;
+  @include gl-line-height-20;
+}
 
-    &.sm {
-      @include gl-font-size-monospace;
-      @include gl-line-height-20;
-    }
+.monospace {
+  @include gl-font-monospace;
+  @include gl-font-size-monospace-lg;
+  @include gl-line-height-24;
+
+  &.sm {
+    @include gl-font-size-monospace;
+    @include gl-line-height-20;
   }
+}
 
-  // Links
+// Links
 
-  a {
-    border-bottom: 1px solid rgba($purple-700, 0.24);
-    color: $purple-700;
-    text-decoration: none;
-    transition: color 0.15s linear, border-bottom-color 0.15s linear;
+a {
+  border-bottom: 1px solid rgba($purple-700, 0.24);
+  color: $purple-700;
+  text-decoration: none;
+  transition: color 0.15s linear, border-bottom-color 0.15s linear;
 
-    &:hover {
-      border-bottom: 1px solid $purple-900;
-      color: $purple-900;
+  &:hover {
+    border-bottom: 1px solid $purple-900;
+    color: $purple-900;
 
-      code {
-        background-color: $theme-indigo-100;
-      }
+    code {
+      background-color: $theme-indigo-100;
     }
   }
+}
 
-  // Responsive Headers
+// Responsive Headers
 
-  /* stylelint-disable max-nesting-depth */
-  @mixin responsive-headers($settings) {
-    @each $property, $attribute in $settings {
-      @if type-of($attribute) == 'map' { // property is a breakpoint
-        $breakpoint: $property;
-        @if $breakpoint == $bp-xs {
+/* stylelint-disable max-nesting-depth */
+@mixin responsive-headers($settings) {
+  @each $property, $attribute in $settings {
+    @if type-of($attribute) == 'map' { // property is a breakpoint
+      $breakpoint: $property;
+      @if $breakpoint == $bp-xs {
+        @each $key, $value in $attribute {
+          #{$key}: #{$value};
+        }
+      } @else {
+        @media screen and (min-width: $breakpoint) {
           @each $key, $value in $attribute {
             #{$key}: #{$value};
           }
-        } @else {
-          @media screen and (min-width: $breakpoint) {
-            @each $key, $value in $attribute {
-              #{$key}: #{$value};
-            }
-          }
         }
-      } @else {
-        #{$property}: #{$attribute};
       }
+    } @else {
+      #{$property}: #{$attribute};
     }
   }
-  /* stylelint-enable max-nesting-depth */
-
-  // Headings
-  // For the system of .h1-.h6 classes to properly overwrite the base tag, you must include all properties transformed
-  // at every breakpoint, even if those properties are the default or assigned at an earlier breakpoint.
-
-  // Close to a 1.2 (minor third) scale at the LG breakpoint
-  $h1-properties: (
-    color: $theme-indigo-900,
-    font-weight: 600,
-    margin-top: 0,
-    text-transform: none,
-    $bp-xs : (
+}
+/* stylelint-enable max-nesting-depth */
+
+// Headings
+// For the system of .h1-.h6 classes to properly overwrite the base tag, you must include all properties transformed
+// at every breakpoint, even if those properties are the default or assigned at an earlier breakpoint.
+
+// Close to a 1.2 (minor third) scale at the LG breakpoint
+$h1-properties: (
+  color: $theme-indigo-900,
+  font-weight: 600,
+  margin-top: 0,
+  text-transform: none,
+  $bp-xs : (
+    font-size : 2rem,         // 32px
+    line-height : 1,          // 32px
+    margin-bottom: 1.5rem,    // 24px
+  ),
+    $bp-sm: (
       font-size : 2rem,         // 32px
       line-height : 1,          // 32px
       margin-bottom: 1.5rem,    // 24px
     ),
-      $bp-sm: (
-        font-size : 2rem,         // 32px
-        line-height : 1,          // 32px
+      $bp-md : (
+        font-size : 2.5rem,       // 40px
+        line-height : 1,          // 40px
         margin-bottom: 1.5rem,    // 24px
       ),
-        $bp-md : (
+        $bp-lg : (
           font-size : 2.5rem,       // 40px
           line-height : 1,          // 40px
           margin-bottom: 1.5rem,    // 24px
-        ),
-          $bp-lg : (
-            font-size : 2.5rem,       // 40px
-            line-height : 1,          // 40px
-            margin-bottom: 1.5rem,    // 24px
-          )
-          ) !default;
-
-  $h2-properties: (
-    color: $theme-indigo-900,
-    font-weight: 600,
-    $bp-xs : (
+        )
+        ) !default;
+
+$h2-properties: (
+  color: $theme-indigo-900,
+  font-weight: 600,
+  $bp-xs : (
+    font-size : 1.5rem,       // 24px
+    line-height : 1.25,       // 30px
+    margin-bottom: 1.5rem,    // 24px
+  ),
+    $bp-sm : (
       font-size : 1.5rem,       // 24px
       line-height : 1.25,       // 30px
       margin-bottom: 1.5rem,    // 24px
     ),
-      $bp-sm : (
-        font-size : 1.5rem,       // 24px
-        line-height : 1.25,       // 30px
+      $bp-md : (
+        font-size : 2rem,         // 32px
+        line-height : 1,          // 32px
         margin-bottom: 1.5rem,    // 24px
       ),
-        $bp-md : (
+        $bp-lg : (
           font-size : 2rem,         // 32px
           line-height : 1,          // 32px
           margin-bottom: 1.5rem,    // 24px
-        ),
-          $bp-lg : (
-            font-size : 2rem,         // 32px
-            line-height : 1,          // 32px
-            margin-bottom: 1.5rem,    // 24px
-          )
-          ) !default;
-
-  $h3-properties: (
-    color: $theme-indigo-900,
-    font-weight: 600,
-    text-transform: none,
-    $bp-xs : (
+        )
+        ) !default;
+
+$h3-properties: (
+  color: $theme-indigo-900,
+  font-weight: 600,
+  text-transform: none,
+  $bp-xs : (
+    font-size : 1.25rem,      // 20px
+    line-height : 1.4,        // 28px
+    margin-bottom: 1rem,   // 20px
+  ),
+    $bp-sm : (
       font-size : 1.25rem,      // 20px
       line-height : 1.4,        // 28px
       margin-bottom: 1rem,   // 20px
     ),
-      $bp-sm : (
-        font-size : 1.25rem,      // 20px
-        line-height : 1.4,        // 28px
+      $bp-md : (
+        font-size : 1.5rem,       // 24px
+        line-height : 1.273,      // 28px
         margin-bottom: 1rem,   // 20px
       ),
-        $bp-md : (
+        $bp-lg : (
           font-size : 1.5rem,       // 24px
           line-height : 1.273,      // 28px
-          margin-bottom: 1rem,   // 20px
-        ),
-          $bp-lg : (
-            font-size : 1.5rem,       // 24px
-            line-height : 1.273,      // 28px
-            margin-bottom: 1rem,      // 16px
-          )
-          ) !default;
-
-  $h4-properties: (
-    color: $theme-indigo-900,
-    text-transform: none,
-    $bp-xs : (
+          margin-bottom: 1rem,      // 16px
+        )
+        ) !default;
+
+$h4-properties: (
+  color: $theme-indigo-900,
+  text-transform: none,
+  $bp-xs : (
+    font-size : 1rem,         // 16px
+    line-height : 1.5,        // 24px
+    margin-bottom: 0.75rem,      // 12px
+  ),
+    $bp-sm : (
       font-size : 1rem,         // 16px
       line-height : 1.5,        // 24px
       margin-bottom: 0.75rem,      // 12px
     ),
-      $bp-sm : (
-        font-size : 1rem,         // 16px
-        line-height : 1.5,        // 24px
+      $bp-md : (
+        font-size : 1.125rem,     // 18px
+        line-height : 1.375,      // 22px
         margin-bottom: 0.75rem,      // 12px
       ),
-        $bp-md : (
+        $bp-lg : (
           font-size : 1.125rem,     // 18px
           line-height : 1.375,      // 22px
           margin-bottom: 0.75rem,      // 12px
-        ),
-          $bp-lg : (
-            font-size : 1.125rem,     // 18px
-            line-height : 1.375,      // 22px
-            margin-bottom: 0.75rem,      // 12px
-          )
-          ) !default;
-
-  $h5-properties: (
-    color: $theme-indigo-900,
-    font-weight: 700,
-    text-transform: none,
-    $bp-xs : (
+        )
+        ) !default;
+
+$h5-properties: (
+  color: $theme-indigo-900,
+  font-weight: 700,
+  text-transform: none,
+  $bp-xs : (
+    font-size : 0.875rem,     // 14px
+    line-height : 1.429,      // 20px
+    margin-bottom: 0.5rem,      // 8px
+  ),
+    $bp-sm : (
       font-size : 0.875rem,     // 14px
       line-height : 1.429,      // 20px
       margin-bottom: 0.5rem,      // 8px
     ),
-      $bp-sm : (
-        font-size : 0.875rem,     // 14px
-        line-height : 1.429,      // 20px
+      $bp-md : (
+        font-size : 1rem,         // 16px
+        line-height : 1.5,        // 24px
         margin-bottom: 0.5rem,      // 8px
       ),
-        $bp-md : (
+        $bp-lg : (
           font-size : 1rem,         // 16px
           line-height : 1.5,        // 24px
           margin-bottom: 0.5rem,      // 8px
-        ),
-          $bp-lg : (
-            font-size : 1rem,         // 16px
-            line-height : 1.5,        // 24px
-            margin-bottom: 0.5rem,      // 8px
-          )
-          ) !default;
-
-  $h6-properties: (
-    color: $theme-indigo-900,
-    text-transform: none,
-    $bp-xs : (
+        )
+        ) !default;
+
+$h6-properties: (
+  color: $theme-indigo-900,
+  text-transform: none,
+  $bp-xs : (
+    font-size : 0.875rem,     // 14px
+    line-height : 1.25,       // 17.5px
+    margin-bottom : 0.25rem,  // 4px
+  ),
+    $bp-sm : (
       font-size : 0.875rem,     // 14px
       line-height : 1.25,       // 17.5px
       margin-bottom : 0.25rem,  // 4px
     ),
-      $bp-sm : (
+      $bp-md : (
         font-size : 0.875rem,     // 14px
         line-height : 1.25,       // 17.5px
         margin-bottom : 0.25rem,  // 4px
       ),
-        $bp-md : (
+        $bp-lg : (
           font-size : 0.875rem,     // 14px
           line-height : 1.25,       // 17.5px
           margin-bottom : 0.25rem,  // 4px
-        ),
-          $bp-lg : (
-            font-size : 0.875rem,     // 14px
-            line-height : 1.25,       // 17.5px
-            margin-bottom : 0.25rem,  // 4px
-          )
-          ) !default;
-
-  // 	Headings
-
-  // See the headings section in _variables.scss for the responsive properties.
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  .h1,
-  .h2,
-  .h3,
-  .h4,
-  .h5,
-  .h6 {
-    margin-top: 2.5rem;
-    text-rendering: optimizelegibility;
-  }
-
-  h1 { @include responsive-headers($h1-properties);}
-  h2 { @include responsive-headers($h2-properties);}
-  h3 { @include responsive-headers($h3-properties);}
-  h4 { @include responsive-headers($h4-properties);}
-  h5 { @include responsive-headers($h5-properties);}
-  h6 { @include responsive-headers($h6-properties);}
-
-  // These declarations are kept separate from and placed after
-  // the previous tag-based declarations so that the classes beat the tags in
-  // the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.
-  .h1 { @include responsive-headers($h1-properties);}
-  .h2 { @include responsive-headers($h2-properties);}
-  .h3 { @include responsive-headers($h3-properties);}
-  .h4 { @include responsive-headers($h4-properties);}
-  .h5 { @include responsive-headers($h5-properties);}
-  .h6 { @include responsive-headers($h6-properties);}
+        )
+        ) !default;
+
+// 	Headings
+
+// See the headings section in _variables.scss for the responsive properties.
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+  margin-top: 2.5rem;
+  text-rendering: optimizelegibility;
 }
+
+h1 { @include responsive-headers($h1-properties);}
+h2 { @include responsive-headers($h2-properties);}
+h3 { @include responsive-headers($h3-properties);}
+h4 { @include responsive-headers($h4-properties);}
+h5 { @include responsive-headers($h5-properties);}
+h6 { @include responsive-headers($h6-properties);}
+
+// These declarations are kept separate from and placed after
+// the previous tag-based declarations so that the classes beat the tags in
+// the CSS cascade, and thus <h1 class="h2"> will be styled like an h2.
+.h1 { @include responsive-headers($h1-properties);}
+.h2 { @include responsive-headers($h2-properties);}
+.h3 { @include responsive-headers($h3-properties);}
+.h4 { @include responsive-headers($h4-properties);}
+.h5 { @include responsive-headers($h5-properties);}
+.h6 { @include responsive-headers($h6-properties);}
diff --git a/layouts/404.html b/layouts/404.html
index d4325c74..e6fa464c 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -6,7 +6,7 @@
     <link rel="canonical" href="<%= @config[:base_url] %>/404.html">
     <link rel="stylesheet" href="<%= @items['/assets/stylesheets/404.*'].path %>">
   </head>
-  <body class="gl-markdown">
+  <body>
     <%= render '/header.*' %>
     <section class="container">
       <div class="row">
diff --git a/layouts/archives.html b/layouts/archives.html
index ec33277c..73a7e3f5 100644
--- a/layouts/archives.html
+++ b/layouts/archives.html
@@ -3,7 +3,7 @@
 <head>
 <%= render '/head.*' %>
 </head>
-<body class="gl-markdown">
+<body>
   <%= render '/gtm.*' %>
   <%= render '/header.*' %>
   <div id="js-banner"></div>
diff --git a/layouts/default.html b/layouts/default.html
index c29febe6..e025322f 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -6,7 +6,7 @@
     <%= render '/head.*' %>
     <%= render '/canonical_urls.*' %>
   </head>
-  <body class="gl-markdown" itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
+  <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
     <section class="container-fluid pt-5">
diff --git a/layouts/instantsearch.html b/layouts/instantsearch.html
index 507f31b1..aaa7e307 100644
--- a/layouts/instantsearch.html
+++ b/layouts/instantsearch.html
@@ -5,7 +5,7 @@
     <link rel="canonical" href="<%= @config[:base_url] %>/search/">
     <%= render '/instantsearch-head.*' %>
   </head>
-  <body class="gl-markdown">
+  <body>
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
     <section class="container">
diff --git a/layouts/redirect.html b/layouts/redirect.html
index 3f9177a6..5aa62908 100644
--- a/layouts/redirect.html
+++ b/layouts/redirect.html
@@ -16,7 +16,7 @@
     <link href='https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,400italic' rel='stylesheet' type='text/css'>
     <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   </head>
-  <body class="gl-markdown">
+  <body>
     <%= render '/header.*' %>
     <div class="wrapper pt-5">
       <div id="doc-nav" class="doc-nav"></div>