Remove GlMarkdown classgl-markdown

10 files changed, 452 insertions, 506 deletions

diff --git a/content/assets/stylesheets/_mixins.scss b/content/assets/stylesheets/_mixins.scss
index 88e81681..0bc2be74 100644
--- a/content/assets/stylesheets/_mixins.scss
+++ b/content/assets/stylesheets/_mixins.scss
@@ -1,10 +1,9 @@
 ---
-version: 1
+version: 2
 ---
 
 // Mixins
 
-@import 'mixins/functions';
 @import 'mixins/breakpoints';
 @import 'mixins/screen-reader';
 @import 'mixins/md-typography';
diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index 6ac5d2ac..702e93fa 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -1,554 +1,556 @@
-//---
-//version: 2
-//---
+---
+version: 2
+---
 
 @import 'variables';
 @import 'mixins/breakpoints';
 @import 'mixins/md-typography';
 @import 'mixins/spacing';
 
-p,
-ul,
-ol,
-pre,
-blockquote {
-  font-size: 1rem;
-  font-weight: normal;
-  letter-spacing: normal;
-  margin-top: 0;
-  margin-bottom: 1.5em;
-}
+.gl-docs {
+  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-roman;
+      list-style-type: lower-alpha;
+      ol {
+        list-style-type: lower-roman;
+      }
     }
   }
-}
 
 
-ul ul,
-ol ol,
-ul ol,
-ol ul {
-  margin-top: 0.5rem;
-  margin-bottom: 0;
-}
-
-b,
-strong,
-em,
-small {
-  line-height: 1;
-}
-
-sup {
-  line-height: 0;
-  position: relative;
-  vertical-align: baseline;
-  top: -0.5em;
-}
+  ul ul,
+  ol ol,
+  ul ol,
+  ol ul {
+    margin-top: 0.5rem;
+    margin-bottom: 0;
+  }
 
-sub {
-  bottom: -0.25em;
-}
+  b,
+  strong,
+  em,
+  small {
+    line-height: 1;
+  }
 
-// Keyboard input
+  sup {
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+    top: -0.5em;
+  }
 
-kbd {
-  background-color: $gray-700;
-  border-radius: 4px;
-  color: $white;
-  line-height: 1;
-  overflow-wrap: break-word;
-  padding: 2px 4px;
-}
+  sub {
+    bottom: -0.25em;
+  }
 
-// Highlighted text
+  // Keyboard input
 
-mark {
-  background-color: $blue-100;
-}
+  kbd {
+    background-color: $gray-700;
+    border-radius: 4px;
+    color: $white;
+    line-height: 1;
+    overflow-wrap: break-word;
+    padding: 2px 4px;
+  }
 
-// Code
+  // Highlighted text
 
-*: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;
-}
+  mark {
+    background-color: $blue-100;
+  }
 
-pre {
-  background-color: desaturate($theme-indigo-950, 20%);
-  border-radius: 4px;
-  color: $white;
-  padding: 1rem;
-}
+  // Code
 
-.clip-btn {
-  fill: $white;
-  background-color: $pre-code-color;
-  border: 0;
-  svg {
-    opacity: 0.5;
-    transition: opacity 0.3s ease-in;
-    pointer-events: none;
+  *: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;
   }
-  @media all and (max-width: $bp-sm) {
-    display: none;
+
+  pre {
+    background-color: desaturate($theme-indigo-950, 20%);
+    border-radius: 4px;
+    color: $white;
+    padding: 1rem;
   }
 
-  &:hover {
+  .clip-btn {
+    fill: $white;
+    background-color: $pre-code-color;
+    border: 0;
     svg {
-      opacity: 1;
+      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;
+      }
     }
   }
-}
 
-// 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 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;
+    @include breakpoint(md) {
+      margin-top: 2rem;
+      margin-bottom: 2rem;
+    }
   }
 
-  &:hover {
+  @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;
-      opacity: 1;
+      margin-left: 0.25rem;
+      margin-top: -0.25rem;
+      border-bottom: 0;
+    }
+
+    &:hover {
+      .anchor {
+        border-bottom: 0;
+        opacity: 1;
+      }
     }
   }
-}
 
-h3,
-h4,
-h5,
-h6,
-.gl-h3,
-.gl-h4,
-.gl-h5,
-.gl-h6 {
-  @include gl-mt-6;
-  @include gl-mb-3;
-}
+  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;
-}
+  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;
+  }
 
-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;
-}
+  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;
+  }
 
-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);
-}
+  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);
+  }
 
-h4,
-.gl-h4 {
-  @include gl-font-size-markdown;
-  @include gl-line-height-20;
-}
+  h4,
+  .gl-h4 {
+    @include gl-font-size-markdown;
+    @include gl-line-height-20;
+  }
 
-h5,
-.gl-h5,
-h6,
-.gl-h6 {
-  @include gl-font-size-markdown-sm;
-  @include gl-line-height-20;
-}
+  h5,
+  .gl-h5,
+  h6,
+  .gl-h6 {
+    @include gl-font-size-markdown-sm;
+    @include gl-line-height-20;
+  }
 
-h6,
-.gl-h6 {
-  @include gl-text-gray-700;
-}
+  h6,
+  .gl-h6 {
+    @include gl-text-gray-700;
+  }
+
+  p,
+  .gl-paragraph {
+    @include gl-mt-0;
+    @include gl-mb-0;
 
-p,
-.gl-paragraph {
-  @include gl-mt-0;
-  @include gl-mb-0;
+    + p,
+    + .gl-paragraph {
+      @include gl-mt-5;
+    }
 
-  + p,
-  + .gl-paragraph {
-    @include gl-mt-5;
+    &.sm {
+      @include gl-font-size-markdown-sm;
+      @include gl-line-height-20;
+    }
   }
 
-  &.sm {
+  .sm {
     @include gl-font-size-markdown-sm;
     @include gl-line-height-20;
   }
-}
 
-.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;
+  .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;
+    &.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 {
-        @each $key, $value in $attribute {
-          #{$key}: #{$value};
-        }
-      } @else {
-        @media screen and (min-width: $breakpoint) {
+  /* 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 {
+        #{$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 : (
-    font-size : 2rem,         // 32px
-    line-height : 1,          // 32px
-    margin-bottom: 1.5rem,    // 24px
-  ),
-    $bp-sm: (
+  /* 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-md : (
-        font-size : 2.5rem,       // 40px
-        line-height : 1,          // 40px
+      $bp-sm: (
+        font-size : 2rem,         // 32px
+        line-height : 1,          // 32px
         margin-bottom: 1.5rem,    // 24px
       ),
-        $bp-lg : (
+        $bp-md : (
           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 : (
-    font-size : 1.5rem,       // 24px
-    line-height : 1.25,       // 30px
-    margin-bottom: 1.5rem,    // 24px
-  ),
-    $bp-sm : (
+        ),
+          $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 : (
       font-size : 1.5rem,       // 24px
       line-height : 1.25,       // 30px
       margin-bottom: 1.5rem,    // 24px
     ),
-      $bp-md : (
-        font-size : 2rem,         // 32px
-        line-height : 1,          // 32px
+      $bp-sm : (
+        font-size : 1.5rem,       // 24px
+        line-height : 1.25,       // 30px
         margin-bottom: 1.5rem,    // 24px
       ),
-        $bp-lg : (
+        $bp-md : (
           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 : (
-    font-size : 1.25rem,      // 20px
-    line-height : 1.4,        // 28px
-    margin-bottom: 1rem,   // 20px
-  ),
-    $bp-sm : (
+        ),
+          $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 : (
       font-size : 1.25rem,      // 20px
       line-height : 1.4,        // 28px
       margin-bottom: 1rem,   // 20px
     ),
-      $bp-md : (
-        font-size : 1.5rem,       // 24px
-        line-height : 1.273,      // 28px
+      $bp-sm : (
+        font-size : 1.25rem,      // 20px
+        line-height : 1.4,        // 28px
         margin-bottom: 1rem,   // 20px
       ),
-        $bp-lg : (
+        $bp-md : (
           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 : (
-    font-size : 1rem,         // 16px
-    line-height : 1.5,        // 24px
-    margin-bottom: 0.75rem,      // 12px
-  ),
-    $bp-sm : (
+          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 : (
       font-size : 1rem,         // 16px
       line-height : 1.5,        // 24px
       margin-bottom: 0.75rem,      // 12px
     ),
-      $bp-md : (
-        font-size : 1.125rem,     // 18px
-        line-height : 1.375,      // 22px
+      $bp-sm : (
+        font-size : 1rem,         // 16px
+        line-height : 1.5,        // 24px
         margin-bottom: 0.75rem,      // 12px
       ),
-        $bp-lg : (
+        $bp-md : (
           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 : (
-    font-size : 0.875rem,     // 14px
-    line-height : 1.429,      // 20px
-    margin-bottom: 0.5rem,      // 8px
-  ),
-    $bp-sm : (
+        ),
+          $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 : (
       font-size : 0.875rem,     // 14px
       line-height : 1.429,      // 20px
       margin-bottom: 0.5rem,      // 8px
     ),
-      $bp-md : (
-        font-size : 1rem,         // 16px
-        line-height : 1.5,        // 24px
+      $bp-sm : (
+        font-size : 0.875rem,     // 14px
+        line-height : 1.429,      // 20px
         margin-bottom: 0.5rem,      // 8px
       ),
-        $bp-lg : (
+        $bp-md : (
           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 : (
-    font-size : 0.875rem,     // 14px
-    line-height : 1.25,       // 17.5px
-    margin-bottom : 0.25rem,  // 4px
-  ),
-    $bp-sm : (
+        ),
+          $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 : (
       font-size : 0.875rem,     // 14px
       line-height : 1.25,       // 17.5px
       margin-bottom : 0.25rem,  // 4px
     ),
-      $bp-md : (
+      $bp-sm : (
         font-size : 0.875rem,     // 14px
         line-height : 1.25,       // 17.5px
         margin-bottom : 0.25rem,  // 4px
       ),
-        $bp-lg : (
+        $bp-md : (
           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;
-}
+        ),
+          $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);}
+  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/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index 15072b60..bb1f0f12 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -317,9 +317,9 @@ $gl-font-weights: (
   'bold': $gl-font-weight-bold,
 );
 
-$gl-font-size-monospace: px-to-rem(13px);
-$gl-font-size-monospace-lg: px-to-rem(15px);
-$gl-font-size-monospace-sm: px-to-rem(11px);
+$gl-font-size-monospace: 0.813rem;
+$gl-font-size-monospace-lg: 0.938rem;
+$gl-font-size-monospace-sm: 0.688rem;
 
 // Misc mixins
 
@@ -373,20 +373,20 @@ $gl-font-size-monospace-sm: px-to-rem(11px);
 $gl-border-size-1: 1px;
 
 // Responsive breakpoints
-$breakpoint-sm: px-to-rem(576px);
-$breakpoint-md: px-to-rem(768px);
-$breakpoint-lg: px-to-rem(992px);
-$breakpoint-xl: px-to-rem(1200px);
+$breakpoint-sm: 36rem;
+$breakpoint-md: 48rem;
+$breakpoint-lg: 62rem;
+$breakpoint-xl: 75rem;
 
 // Line height
-$gl-line-height-16: px-to-rem(16px);
-$gl-line-height-20: px-to-rem(20px);
-$gl-line-height-24: px-to-rem(24px);
-$gl-line-height-28: px-to-rem(28px);
-$gl-line-height-32: px-to-rem(32px);
-$gl-line-height-36: px-to-rem(36px);
-$gl-line-height-44: px-to-rem(44px);
-$gl-line-height-52: px-to-rem(52px);
+$gl-line-height-16: 1rem;
+$gl-line-height-20: 1.25rem;
+$gl-line-height-24: 1.5rem;
+$gl-line-height-28: 1.75rem;
+$gl-line-height-32: 2rem;
+$gl-line-height-36: 2.25rem;
+$gl-line-height-44: 2.75rem;
+$gl-line-height-52: 3.25rem;
 
 // Layout
 $grid-size: 0.5rem;
@@ -410,19 +410,19 @@ $gl-spacing-scale-20: 20 * $grid-size;
 // Markdown typescale
 
 // default (min-width: 0)
-$gl-font-size-markdown: px-to-rem(16px);
-$gl-font-size-markdown-sm: px-to-rem(14px);
+$gl-font-size-markdown: 1rem;
+$gl-font-size-markdown-sm: 0.875rem;
 
-$gl-font-size-markdown-h1: px-to-rem(28px);
-$gl-font-size-markdown-h2: px-to-rem(23px);
-$gl-font-size-markdown-h3: px-to-rem(19px);
+$gl-font-size-markdown-h1: 1.75rem;
+$gl-font-size-markdown-h2: 1.438rem;
+$gl-font-size-markdown-h3: 1.188rem;
 
 // breakpoint (min-width: 768px)
-$gl-font-size-markdown-h1-md: px-to-rem(31px);
-$gl-font-size-markdown-h2-md: px-to-rem(25px);
-$gl-font-size-markdown-h3-md: px-to-rem(20px);
+$gl-font-size-markdown-h1-md: 1.938rem;
+$gl-font-size-markdown-h2-md: 1.563rem;
+$gl-font-size-markdown-h3-md: 1.25rem;
 
 // breakpoint (min-width: 1200px)
-$gl-font-size-markdown-h1-xl: px-to-rem(45px);
-$gl-font-size-markdown-h2-xl: px-to-rem(32px);
-$gl-font-size-markdown-h3-xl: px-to-rem(23px);
+$gl-font-size-markdown-h1-xl: 2.813rem;
+$gl-font-size-markdown-h2-xl: 2rem;
+$gl-font-size-markdown-h3-xl: 1.438rem;
diff --git a/content/assets/stylesheets/help.scss b/content/assets/stylesheets/help.scss
index 988fdea0..db1fa84f 100644
--- a/content/assets/stylesheets/help.scss
+++ b/content/assets/stylesheets/help.scss
@@ -1,5 +1,5 @@
 ---
-version: 5
+version: 6
 ---
 
 @import 'variables';
diff --git a/content/assets/stylesheets/mixins/_functions.scss b/content/assets/stylesheets/mixins/_functions.scss
deleted file mode 100644
index 0a7aec9f..00000000
--- a/content/assets/stylesheets/mixins/_functions.scss
+++ /dev/null
@@ -1,55 +0,0 @@
----
-version: 1
----
-
-/*
-* SASS preserves units in arithmetic operations. For example:
-* 12em * 0 = 0em. This function return the unit of a numeric value.
-*
-* For more examples, see: https://codepen.io/paulgv/pen/XWrqMgQ
-*/
-@function extract-unit($number) {
-  @return $number * 0 + 1;
-}
-
-@function strip-unit($number) {
-  @if type-of($number) == 'number' and not unitless($number) {
-    @return $number / extract-unit($number);
-  }
-
-  @return $number;
-}
-
-@function single-unit-rem($value, $font-size-base) {
-  @if (extract-unit($value) != 1px) {
-    @return $value;
-  }
-
-  $converted: $value / $font-size-base;
-
-  @return strip-unit($converted) * 1rem;
-}
-
-@function multiple-units-rem($values, $font-size-base) {
-  $rem-values: ();
-
-  @each $value in $values {
-    $rem-values: append($rem-values, single-unit-rem($value, $font-size-base));
-  }
-
-  @return $rem-values;
-}
-
-@function px-to-rem($px, $font-size-base: 16px) {
-  @if type-of($px) == 'number' {
-    @return single-unit-rem($px, $font-size-base);
-  } @else if type-of($px) == 'list' {
-    @return multiple-units-rem($px, $font-size-base);
-  } @else {
-    @return $px;
-  }
-}
-
-@function if-important($important) {
-  @return #{if($important, '!important', '')};
-}
diff --git a/layouts/404.html b/layouts/404.html
index e6fa464c..3cc7d7d8 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>
+  <body class="gl-docs">
     <%= render '/header.*' %>
     <section class="container">
       <div class="row">
diff --git a/layouts/archives.html b/layouts/archives.html
index 73a7e3f5..60ab3b01 100644
--- a/layouts/archives.html
+++ b/layouts/archives.html
@@ -3,7 +3,7 @@
 <head>
 <%= render '/head.*' %>
 </head>
-<body>
+<body class="gl-docs">
   <%= render '/gtm.*' %>
   <%= render '/header.*' %>
   <div id="js-banner"></div>
diff --git a/layouts/default.html b/layouts/default.html
index e025322f..939a6583 100644
--- a/layouts/default.html
+++ b/layouts/default.html
@@ -6,7 +6,7 @@
     <%= render '/head.*' %>
     <%= render '/canonical_urls.*' %>
   </head>
-  <body itemscope itemtype="http://schema.org/WebPage" data-spy="scroll" data-target="#doc-nav" data-offset="90">
+  <body class="gl-docs" 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 aaa7e307..d62de1af 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>
+  <body class="gl-docs">
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
     <section class="container">
diff --git a/layouts/redirect.html b/layouts/redirect.html
index 5aa62908..8868f0fa 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>
+  <body class="gl-docs">
     <%= render '/header.*' %>
     <div class="wrapper pt-5">
       <div id="doc-nav" class="doc-nav"></div>