Merge branch 'debug-rule' into 'master'

Add debug statement for CI pipeline failures

See merge request gitlab-org/gitlab-docs!1806

8 files changed, 29 insertions, 863 deletions

diff --git a/content/assets/stylesheets/404.scss b/content/assets/stylesheets/404.scss
index 3b202dd6..f12da8f7 100644
--- a/content/assets/stylesheets/404.scss
+++ b/content/assets/stylesheets/404.scss
@@ -1,5 +1,5 @@
 ---
-version: 3
+version: 4
 ---
 
 @import 'variables';
@@ -12,18 +12,18 @@ version: 3
   }
 
   h1 {
-    font-size: 65px;
+    font-size: 4.063rem;
     border-bottom-color: $color-gray-medium;
   }
 
   h2 {
     border-bottom: 0;
-    font-size: 22px;
+    font-size: 1.375rem;
   }
 
   .back-button {
-    margin-top: 30px;
-    margin-bottom: 30px;
+    margin-top: 1.875rem;
+    margin-bottom: 1.875rem;
   }
 
   .gray {
diff --git a/content/assets/stylesheets/_sidebar.scss b/content/assets/stylesheets/_sidebar.scss
index 7f07a53b..e86c7780 100644
--- a/content/assets/stylesheets/_sidebar.scss
+++ b/content/assets/stylesheets/_sidebar.scss
@@ -1,5 +1,5 @@
 ---
-version: 1
+version: 2
 ---
 
 @import 'variables';
@@ -93,6 +93,10 @@ version: 1
     line-height: 1rem;
     font-size: 0.875rem;
     width: 100%;
+
+    &:hover {
+      border-bottom: 0;
+    }
   }
 
   .nav-link {
diff --git a/content/assets/stylesheets/_typography.scss b/content/assets/stylesheets/_typography.scss
index 702e93fa..5489e27d 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -1,5 +1,5 @@
 ---
-version: 2
+version: 3
 ---
 
 @import 'variables';
@@ -336,28 +336,32 @@ version: 2
 
   // Responsive Headers
 
-  /* stylelint-disable max-nesting-depth */
+  /* stylelint-disable */
   @mixin responsive-headers($settings) {
     @each $property, $attribute in $settings {
+      @debug "responsive headers attribute type: #{type-of($attribute)}";
       @if type-of($attribute) == 'map' { // property is a breakpoint
         $breakpoint: $property;
         @if $breakpoint == $bp-xs {
           @each $key, $value in $attribute {
+            @debug "responsive headers key-val 1: #{$key}: #{$value}";
             #{$key}: #{$value};
           }
         } @else {
           @media screen and (min-width: $breakpoint) {
             @each $key, $value in $attribute {
+              @debug "responsive headers key-val 2: #{$key}: #{$value}";
               #{$key}: #{$value};
             }
           }
         }
       } @else {
+        @debug "responsive headers $property-$attribute 3: #{$property}: #{$attribute}";
         #{$property}: #{$attribute};
       }
     }
   }
-  /* stylelint-enable max-nesting-depth */
+  /* stylelint-enable */
 
   // Headings
   // For the system of .h1-.h6 classes to properly overwrite the base tag, you must include all properties transformed
diff --git a/content/assets/stylesheets/_variables.scss b/content/assets/stylesheets/_variables.scss
index bb1f0f12..cb24c8af 100644
--- a/content/assets/stylesheets/_variables.scss
+++ b/content/assets/stylesheets/_variables.scss
@@ -351,6 +351,7 @@ $gl-font-size-monospace-sm: 0.688rem;
   @include gl-responsive-property('line-height', $min, $max);
 }
 
+/* stylelint-disable */
 @mixin gl-responsive-property(
   $property,
   $property-min,
@@ -358,17 +359,24 @@ $gl-font-size-monospace-sm: 0.688rem;
   $breakpoint-min: $breakpoint-md,
   $breakpoint-max: $breakpoint-xl
 ) {
+  @debug "responsive headers property: #{$breakpoint-max} #{$breakpoint-min}, #{$property-max}, #{$property-min}";
   $breakpoint-range: ($breakpoint-max - $breakpoint-min) / 1rem;
   $property-range: ($property-max - $property-min) / 1rem;
 
+  @debug "responsive headers property $breakpoint-range: #{($breakpoint-max - $breakpoint-min) / 1rem}";
+  @debug "responsive headers property $property-range: #{($property-max - $property-min) / 1rem}";
+
   @media (min-width: $breakpoint-min) {
+    @debug "responsive headers property $breakpoint-min: #{calc(#{$property-min} + #{$property-range} * ((100vw - #{$breakpoint-min}) / #{$breakpoint-range}))}";
     #{$property}: calc(#{$property-min} + #{$property-range} * ((100vw - #{$breakpoint-min}) / #{$breakpoint-range}));
   }
 
   @media (min-width: $breakpoint-max) {
+    @debug "responsive headers property $breakpoint-min: #{$property}: #{$property-max}";
     #{$property}: $property-max;
   }
 }
+/* stylelint-enable */
 
 $gl-border-size-1: 1px;
 
@@ -407,8 +415,6 @@ $gl-spacing-scale-13: 12 * $grid-size;
 $gl-spacing-scale-15: 15 * $grid-size;
 $gl-spacing-scale-20: 20 * $grid-size;
 
-// Markdown typescale
-
 // default (min-width: 0)
 $gl-font-size-markdown: 1rem;
 $gl-font-size-markdown-sm: 0.875rem;
diff --git a/content/assets/stylesheets/mixins/_md-typography.scss b/content/assets/stylesheets/mixins/_md-typography.scss
index c937f1f6..bacb707b 100644
--- a/content/assets/stylesheets/mixins/_md-typography.scss
+++ b/content/assets/stylesheets/mixins/_md-typography.scss
@@ -1,5 +1,5 @@
 ---
-version: 1
+version: 2
 ---
 
 /**
@@ -18,15 +18,6 @@ version: 1
 }
 
 /**
-* Font style utility
-*
-* naming convention: gl-font-style-{family-name}
-*/
-@mixin gl-font-style-italic {
-  font-style: italic;
-}
-
-/**
 * Font size utility
 *
 * naming convention: gl-font-{type-scale-size}
@@ -34,18 +25,10 @@ version: 1
 * - Strictly based on design system type scale. See
 * $gl-type-scale for further references.
 */
-@mixin gl-font-sm {
-  font-size: $gl-font-size-sm;
-}
-
 @mixin gl-font-base {
   font-size: $gl-font-size;
 }
 
-@mixin gl-font-lg {
-  font-size: $gl-font-size-lg;
-}
-
 @mixin gl-font-size-h-display {
   font-size: $gl-font-size-h-display;
 }
@@ -116,10 +99,6 @@ version: 1
 * naming convention: gl-font-weight-[bold|normal|number]
 */
 
-@mixin gl-font-weight-100 {
-  font-weight: 100;
-}
-
 @mixin gl-font-weight-normal {
   font-weight: $gl-font-weight-normal;
 }
@@ -128,12 +107,6 @@ version: 1
   font-weight: $gl-font-weight-bold;
 }
 
-@mixin gl-sm-font-weight-bold {
-  @media (min-width: $breakpoint-sm) {
-    @include gl-font-weight-bold;
-  }
-}
-
 /**
 * Line height utilities.
 *
@@ -141,14 +114,6 @@ version: 1
 * notes:
 * - Strictly based in gl-line-height-{n} variables
 */
-@mixin gl-line-height-0 {
-  line-height: 0;
-}
-
-@mixin gl-line-height-normal {
-  line-height: $gl-line-height-16;
-}
-
 @mixin gl-line-height-20 {
   line-height: $gl-line-height-20;
 }
@@ -172,7 +137,3 @@ version: 1
 @mixin gl-line-height-52 {
   line-height: $gl-line-height-52;
 }
-
-@mixin gl-reset-line-height {
-  line-height: inherit;
-}
diff --git a/content/assets/stylesheets/mixins/_screen-reader.scss b/content/assets/stylesheets/mixins/_screen-reader.scss
index 705dc4bc..72bc5bbe 100644
--- a/content/assets/stylesheets/mixins/_screen-reader.scss
+++ b/content/assets/stylesheets/mixins/_screen-reader.scss
@@ -1,5 +1,5 @@
 ---
-version: 1
+version: 2
 ---
 
 // Only display content to screen readers
@@ -17,20 +17,3 @@ version: 1
   white-space: nowrap;
 }
 
-// Use in conjunction with .sr-only to only display content when it's focused.
-// Useful for "Skip to main content" links; see http://www.w3.org/TR/2013/NOTE-WCAG20-TECHS-20130905/G1
-// Credit: HTML5 Boilerplate
-
-@mixin sr-only-focusable {
-  &:active,
-  &:focus {
-    position: static;
-    width: auto;
-    height: auto;
-    margin: 0;
-    overflow: visible;
-    clip: auto;
-    white-space: normal;
-  }
-}
-
diff --git a/content/assets/stylesheets/mixins/_spacing.scss b/content/assets/stylesheets/mixins/_spacing.scss
index 18e5ca87..fc36a696 100644
--- a/content/assets/stylesheets/mixins/_spacing.scss
+++ b/content/assets/stylesheets/mixins/_spacing.scss
@@ -1,364 +1,19 @@
 ---
-version: 1
+version: 2
 ---
 
 /**
-* Padding utilities.
-*
-* naming convention: gl-p{position}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-@mixin gl-p-0 {
-  padding: 0;
-}
-
-@mixin gl-p-1 {
-  padding: $gl-spacing-scale-1;
-}
-
-@mixin gl-p-2 {
-  padding: $gl-spacing-scale-2;
-}
-
-@mixin gl-p-3 {
-  padding: $gl-spacing-scale-3;
-}
-
-@mixin gl-p-4 {
-  padding: $gl-spacing-scale-4;
-}
-
-@mixin gl-p-5 {
-  padding: $gl-spacing-scale-5;
-}
-
-@mixin gl-p-6 {
-  padding: $gl-spacing-scale-6;
-}
-
-@mixin gl-p-7 {
-  padding: $gl-spacing-scale-7;
-}
-
-@mixin gl-px-0 {
-  padding-left: 0;
-  padding-right: 0;
-}
-
-@mixin gl-px-1 {
-  padding-left: $gl-spacing-scale-1;
-  padding-right: $gl-spacing-scale-1;
-}
-
-@mixin gl-px-2 {
-  padding-left: $gl-spacing-scale-2;
-  padding-right: $gl-spacing-scale-2;
-}
-
-@mixin gl-px-3 {
-  padding-left: $gl-spacing-scale-3;
-  padding-right: $gl-spacing-scale-3;
-}
-
-@mixin gl-px-4 {
-  padding-left: $gl-spacing-scale-4;
-  padding-right: $gl-spacing-scale-4;
-}
-
-@mixin gl-px-5 {
-  padding-left: $gl-spacing-scale-5;
-  padding-right: $gl-spacing-scale-5;
-}
-
-@mixin gl-px-6 {
-  padding-left: $gl-spacing-scale-6;
-  padding-right: $gl-spacing-scale-6;
-}
-
-@mixin gl-px-7 {
-  padding-left: $gl-spacing-scale-7;
-  padding-right: $gl-spacing-scale-7;
-}
-
-@mixin gl-px-8 {
-  padding-left: $gl-spacing-scale-8;
-  padding-right: $gl-spacing-scale-8;
-}
-
-@mixin gl-pr-0 {
-  padding-right: 0;
-}
-
-@mixin gl-pr-1 {
-  padding-right: $gl-spacing-scale-1;
-}
-
-@mixin gl-pr-2 {
-  padding-right: $gl-spacing-scale-2;
-}
-
-@mixin gl-pr-3 {
-  padding-right: $gl-spacing-scale-3;
-}
-
-@mixin gl-pr-4 {
-  padding-right: $gl-spacing-scale-4;
-}
-
-@mixin gl-pr-5 {
-  padding-right: $gl-spacing-scale-5;
-}
-
-@mixin gl-pr-6 {
-  padding-right: $gl-spacing-scale-6;
-}
-
-@mixin gl-pr-7 {
-  padding-right: $gl-spacing-scale-7;
-}
-
-@mixin gl-pr-8 {
-  padding-right: $gl-spacing-scale-8;
-}
-
-@mixin gl-pr-9 {
-  padding-right: $gl-spacing-scale-9;
-}
-
-@mixin gl-pl-0 {
-  padding-left: 0;
-}
-
-@mixin gl-pl-1 {
-  padding-left: $gl-spacing-scale-1;
-}
-
-@mixin gl-pl-2 {
-  padding-left: $gl-spacing-scale-2;
-}
-
-@mixin gl-pl-3 {
-  padding-left: $gl-spacing-scale-3;
-}
-
-@mixin gl-pl-4 {
-  padding-left: $gl-spacing-scale-4;
-}
-
-@mixin gl-pl-5 {
-  padding-left: $gl-spacing-scale-5;
-}
-
-@mixin gl-pl-6 {
-  padding-left: $gl-spacing-scale-6;
-}
-
-@mixin gl-pl-7 {
-  padding-left: $gl-spacing-scale-7;
-}
-
-@mixin gl-pl-9 {
-  padding-left: $gl-spacing-scale-9;
-}
-
-@mixin gl-pt-0 {
-  padding-top: 0;
-}
-
-@mixin gl-pt-1 {
-  padding-top: $gl-spacing-scale-1;
-}
-
-@mixin gl-pt-2 {
-  padding-top: $gl-spacing-scale-2;
-}
-
-@mixin gl-pt-md-2 {
-  @media (min-width: $breakpoint-md) {
-    padding-top: $gl-spacing-scale-2;
-  }
-}
-
-@mixin gl-pt-3 {
-  padding-top: $gl-spacing-scale-3;
-}
-
-@mixin gl-pt-4 {
-  padding-top: $gl-spacing-scale-4;
-}
-
-@mixin gl-pt-5 {
-  padding-top: $gl-spacing-scale-5;
-}
-
-@mixin gl-pt-6 {
-  padding-top: $gl-spacing-scale-6;
-}
-
-@mixin gl-pt-7 {
-  padding-top: $gl-spacing-scale-7;
-}
-
-@mixin gl-pt-8 {
-  padding-top: $gl-spacing-scale-8;
-}
-
-@mixin gl-pt-9 {
-  padding-top: $gl-spacing-scale-9;
-}
-
-@mixin gl-pt-12 {
-  padding-top: $gl-spacing-scale-12;
-}
-
-@mixin gl-md-pt-12 {
-  @media (min-width: $breakpoint-md) {
-    @include gl-pt-12;
-  }
-}
-
-@mixin gl-pb-0 {
-  padding-bottom: 0;
-}
-
-@mixin gl-pb-1 {
-  padding-bottom: $gl-spacing-scale-1;
-}
-
-@mixin gl-pb-2 {
-  padding-bottom: $gl-spacing-scale-2;
-}
-
-@mixin gl-pb-3 {
-  padding-bottom: $gl-spacing-scale-3;
-}
-
-@mixin gl-pb-4 {
-  padding-bottom: $gl-spacing-scale-4;
-}
-
-@mixin gl-pb-5 {
-  padding-bottom: $gl-spacing-scale-5;
-}
-
-@mixin gl-pb-6 {
-  padding-bottom: $gl-spacing-scale-6;
-}
-
-@mixin gl-pb-7 {
-  padding-bottom: $gl-spacing-scale-7;
-}
-
-@mixin gl-pb-11 {
-  padding-bottom: $gl-spacing-scale-11;
-}
-
-@mixin gl-py-0 {
-  padding-top: 0;
-  padding-bottom: 0;
-}
-
-@mixin gl-py-1 {
-  padding-top: $gl-spacing-scale-1;
-  padding-bottom: $gl-spacing-scale-1;
-}
-
-@mixin gl-py-2 {
-  padding-top: $gl-spacing-scale-2;
-  padding-bottom: $gl-spacing-scale-2;
-}
-
-@mixin gl-py-3 {
-  padding-top: $gl-spacing-scale-3;
-  padding-bottom: $gl-spacing-scale-3;
-}
-
-@mixin gl-py-4 {
-  padding-top: $gl-spacing-scale-4;
-  padding-bottom: $gl-spacing-scale-4;
-}
-
-@mixin gl-py-5 {
-  padding-top: $gl-spacing-scale-5;
-  padding-bottom: $gl-spacing-scale-5;
-}
-
-@mixin gl-py-6 {
-  padding-top: $gl-spacing-scale-6;
-  padding-bottom: $gl-spacing-scale-6;
-}
-
-@mixin gl-py-7 {
-  padding-top: $gl-spacing-scale-7;
-  padding-bottom: $gl-spacing-scale-7;
-}
-
-/**
 * Margin utilities.
 *
 * naming convention: gl-m{position}-{spacing-scale-index}
 * notes:
 * - Utilities should strictly follow $gl-spacing-scale
 */
-@mixin gl-m-0 {
-  margin: 0;
-}
-
-@mixin gl-m-2 {
-  margin: $gl-spacing-scale-2;
-}
-
-@mixin gl-m-3 {
-  margin: $gl-spacing-scale-3;
-}
-
-@mixin gl-m-4 {
-  margin: $gl-spacing-scale-4;
-}
-
-@mixin gl-m-5 {
-  margin: $gl-spacing-scale-5;
-}
 
 @mixin gl-mt-0 {
   margin-top: 0;
 }
 
-@mixin gl-mt-1 {
-  margin-top: $gl-spacing-scale-1;
-}
-
-@mixin gl-mt-n1 {
-  margin-top: -$gl-spacing-scale-1;
-}
-
-@mixin gl-mt-md-n2 {
-  @media (min-width: $breakpoint-md) {
-    margin-top: -$gl-spacing-scale-2;
-  }
-}
-
-@mixin gl-mt-2 {
-  margin-top: $gl-spacing-scale-2;
-}
-
-@mixin gl-mt-n2 {
-  margin-top: -$gl-spacing-scale-2;
-}
-
-@mixin gl-mt-3 {
-  margin-top: $gl-spacing-scale-3;
-}
-
-@mixin gl-mt-n3 {
-  margin-top: -$gl-spacing-scale-3;
-}
-
-@mixin gl-mt-4 {
-  margin-top: $gl-spacing-scale-4;
-}
-
 @mixin gl-mt-5 {
   margin-top: $gl-spacing-scale-5;
 }
@@ -367,457 +22,10 @@ version: 1
   margin-top: $gl-spacing-scale-6;
 }
 
-@mixin gl-mt-7 {
-  margin-top: $gl-spacing-scale-7;
-}
-
-@mixin gl-mr-auto {
-  margin-right: auto;
-}
-
-@mixin gl-mr-0 {
-  margin-right: 0;
-}
-
-@mixin gl-mr-1 {
-  margin-right: $gl-spacing-scale-1;
-}
-
-@mixin gl-mr-n1 {
-  margin-right: -$gl-spacing-scale-1;
-}
-
-@mixin gl-mr-2 {
-  margin-right: $gl-spacing-scale-2;
-}
-
-@mixin gl-mr-3 {
-  margin-right: $gl-spacing-scale-3;
-}
-
-@mixin gl-mr-4 {
-  margin-right: $gl-spacing-scale-4;
-}
-
-@mixin gl-mr-n4 {
-  margin-right: -$gl-spacing-scale-4;
-}
-
-@mixin gl-mr-5 {
-  margin-right: $gl-spacing-scale-5;
-}
-
-@mixin gl-mr-6 {
-  margin-right: $gl-spacing-scale-6;
-}
-
-@mixin gl-mr-7 {
-  margin-right: $gl-spacing-scale-7;
-}
-
 @mixin gl-mb-0 {
   margin-bottom: 0;
 }
 
-@mixin gl-mb-1 {
-  margin-bottom: $gl-spacing-scale-1;
-}
-
-@mixin gl-mb-n1 {
-  margin-bottom: -$gl-spacing-scale-1;
-}
-
-@mixin gl-mb-2 {
-  margin-bottom: $gl-spacing-scale-2;
-}
-
 @mixin gl-mb-3 {
   margin-bottom: $gl-spacing-scale-3;
 }
-
-@mixin gl-mb-4 {
-  margin-bottom: $gl-spacing-scale-4;
-}
-
-@mixin gl-mb-5 {
-  margin-bottom: $gl-spacing-scale-5;
-}
-
-@mixin gl-mb-6 {
-  margin-bottom: $gl-spacing-scale-6;
-}
-
-@mixin gl-mb-7 {
-  margin-bottom: $gl-spacing-scale-7;
-}
-
-@mixin gl-mb-8 {
-  margin-bottom: $gl-spacing-scale-8;
-}
-
-@mixin gl-md-mb-0 {
-  @media (min-width: $breakpoint-md) {
-    @include gl-mb-0;
-  }
-}
-
-@mixin gl-ml-auto {
-  margin-left: auto;
-}
-
-@mixin gl-ml-0 {
-  margin-left: 0;
-}
-
-@mixin gl-ml-1 {
-  margin-left: $gl-spacing-scale-1;
-}
-
-@mixin gl-ml-n1 {
-  margin-left: -$gl-spacing-scale-1;
-}
-
-@mixin gl-ml-2 {
-  margin-left: $gl-spacing-scale-2;
-}
-
-@mixin gl-ml-n2 {
-  margin-left: -$gl-spacing-scale-2;
-}
-
-@mixin gl-ml-3 {
-  margin-left: $gl-spacing-scale-3;
-}
-
-@mixin gl-ml-4 {
-  margin-left: $gl-spacing-scale-4;
-}
-
-@mixin gl-ml-n4 {
-  margin-left: -$gl-spacing-scale-4;
-}
-
-@mixin gl-ml-5 {
-  margin-left: $gl-spacing-scale-5;
-}
-
-@mixin gl-ml-6 {
-  margin-left: $gl-spacing-scale-6;
-}
-
-@mixin gl-ml-7 {
-  margin-left: $gl-spacing-scale-7;
-}
-
-@mixin gl-ml-11 {
-  margin-left: $gl-spacing-scale-11;
-}
-
-@mixin gl-my-auto {
-  margin-top: auto;
-  margin-bottom: auto;
-}
-
-@mixin gl-my-0 {
-  margin-top: 0;
-  margin-bottom: 0;
-}
-
-@mixin gl-my-1 {
-  margin-top: $gl-spacing-scale-1;
-  margin-bottom: $gl-spacing-scale-1;
-}
-
-@mixin gl-my-2 {
-  margin-top: $gl-spacing-scale-2;
-  margin-bottom: $gl-spacing-scale-2;
-}
-
-@mixin gl-my-3 {
-  margin-top: $gl-spacing-scale-3;
-  margin-bottom: $gl-spacing-scale-3;
-}
-
-@mixin gl-my-4 {
-  margin-top: $gl-spacing-scale-4;
-  margin-bottom: $gl-spacing-scale-4;
-}
-
-@mixin gl-my-5 {
-  margin-top: $gl-spacing-scale-5;
-  margin-bottom: $gl-spacing-scale-5;
-}
-
-@mixin gl-my-6 {
-  margin-top: $gl-spacing-scale-6;
-  margin-bottom: $gl-spacing-scale-6;
-}
-
-@mixin gl-my-7 {
-  margin-top: $gl-spacing-scale-7;
-  margin-bottom: $gl-spacing-scale-7;
-}
-
-@mixin gl-my-8 {
-  margin-top: $gl-spacing-scale-8;
-  margin-bottom: $gl-spacing-scale-8;
-}
-
-@mixin gl-my-9 {
-  margin-top: $gl-spacing-scale-9;
-  margin-bottom: $gl-spacing-scale-9;
-}
-
-@mixin gl-my-11 {
-  margin-top: $gl-spacing-scale-11;
-  margin-bottom: $gl-spacing-scale-11;
-}
-
-@mixin gl-my-12 {
-  margin-top: $gl-spacing-scale-12;
-  margin-bottom: $gl-spacing-scale-12;
-}
-
-@mixin gl-mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-@mixin gl-mx-0 {
-  margin-left: 0;
-  margin-right: 0;
-}
-
-@mixin gl-mx-1 {
-  margin-left: $gl-spacing-scale-1;
-  margin-right: $gl-spacing-scale-1;
-}
-
-@mixin gl-mx-2 {
-  margin-left: $gl-spacing-scale-2;
-  margin-right: $gl-spacing-scale-2;
-}
-
-@mixin gl-mx-3 {
-  margin-left: $gl-spacing-scale-3;
-  margin-right: $gl-spacing-scale-3;
-}
-
-@mixin gl-mx-4 {
-  margin-left: $gl-spacing-scale-4;
-  margin-right: $gl-spacing-scale-4;
-}
-
-@mixin gl-mx-5 {
-  margin-left: $gl-spacing-scale-5;
-  margin-right: $gl-spacing-scale-5;
-}
-
-@mixin gl-mx-6 {
-  margin-left: $gl-spacing-scale-6;
-  margin-right: $gl-spacing-scale-6;
-}
-
-@mixin gl-mx-7 {
-  margin-left: $gl-spacing-scale-7;
-  margin-right: $gl-spacing-scale-7;
-}
-
-@mixin gl-mx-8 {
-  margin-left: $gl-spacing-scale-8;
-  margin-right: $gl-spacing-scale-8;
-}
-
-/**
-* Negative margin utilities.
-*
-* naming convention: gl-m{position}-n{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-@mixin gl-my-n1 {
-  margin-top: -#{$gl-spacing-scale-1};
-  margin-bottom: -#{$gl-spacing-scale-1};
-}
-
-@mixin gl-mx-n1 {
-  margin-left: -#{$gl-spacing-scale-1};
-  margin-right: -#{$gl-spacing-scale-1};
-}
-
-@mixin gl-my-n2 {
-  margin-top: -#{$gl-spacing-scale-2};
-  margin-bottom: -#{$gl-spacing-scale-2};
-}
-
-@mixin gl-mx-n2 {
-  margin-left: -#{$gl-spacing-scale-2};
-  margin-right: -#{$gl-spacing-scale-2};
-}
-
-@mixin gl-my-n3 {
-  margin-top: -#{$gl-spacing-scale-3};
-  margin-bottom: -#{$gl-spacing-scale-3};
-}
-
-@mixin gl-mx-n3 {
-  margin-left: -#{$gl-spacing-scale-3};
-  margin-right: -#{$gl-spacing-scale-3};
-}
-
-@mixin gl-my-n4 {
-  margin-top: -#{$gl-spacing-scale-4};
-  margin-bottom: -#{$gl-spacing-scale-4};
-}
-
-@mixin gl-mx-n4 {
-  margin-left: -#{$gl-spacing-scale-4};
-  margin-right: -#{$gl-spacing-scale-4};
-}
-
-/**
-* Responsive margin utilities.
-*
-* naming convention: gl-{breakpoint}-m{position}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-
-@mixin gl-xs-mb-3 {
-  @media (max-width: $breakpoint-sm) {
-    @include gl-mb-3;
-  }
-}
-
-@mixin gl-sm-ml-3 {
-  @media (min-width: $breakpoint-sm) {
-    @include gl-ml-3;
-  }
-}
-
-@mixin gl-sm-mt-0 {
-  @media (min-width: $breakpoint-sm) {
-    @include gl-mt-0;
-  }
-}
-
-@mixin gl-sm-mt-5 {
-  @media (min-width: $breakpoint-sm) {
-    @include gl-mt-5;
-  }
-}
-
-@mixin gl-sm-mb-7 {
-  @media (min-width: $breakpoint-sm) {
-    @include gl-mb-7;
-  }
-}
-
-@mixin gl-sm-my-12 {
-  @media (min-width: $breakpoint-sm) {
-    @include gl-my-12;
-  }
-}
-
-@mixin gl-sm-mx-0 {
-  @media (min-width: $breakpoint-sm) {
-    @include gl-mx-0;
-  }
-}
-
-@mixin gl-md-mt-0 {
-  @media (min-width: $breakpoint-md) {
-    @include gl-mx-0;
-  }
-}
-
-@mixin gl-lg-mb-0 {
-  @media (min-width: $breakpoint-lg) {
-    @include gl-mb-0;
-  }
-}
-
-@mixin gl-md-mr-3 {
-  @media (min-width: $breakpoint-md) {
-    @include gl-mr-3;
-  }
-}
-
-@mixin gl-lg-mr-2 {
-  @media (min-width: $breakpoint-lg) {
-    @include gl-mr-2;
-  }
-}
-
-@mixin gl-lg-mr-3 {
-  @media (min-width: $breakpoint-lg) {
-    @include gl-mr-3;
-  }
-}
-
-@mixin gl-lg-ml-2 {
-  @media (min-width: $breakpoint-lg) {
-    @include gl-ml-2;
-  }
-}
-
-@mixin gl-lg-ml-3 {
-  @media (min-width: $breakpoint-lg) {
-    @include gl-ml-3;
-  }
-}
-
-@mixin gl-lg-mx-2 {
-  @media (min-width: $breakpoint-lg) {
-    @include gl-mx-2;
-  }
-}
-
-@mixin gl-lg-mx-3 {
-  @media (min-width: $breakpoint-lg) {
-    @include gl-mx-3;
-  }
-}
-
-@mixin gl-lg-mt-0 {
-  @media (min-width: $breakpoint-lg) {
-    @include gl-mt-0;
-  }
-}
-
-/**
-* Responsive padding utilities.
-*
-* naming convention: gl-{breakpoint}-p{position}-{spacing-scale-index}
-* notes:
-* - Utilities should strictly follow $gl-spacing-scale
-*/
-@mixin gl-sm-pr-5 {
-  @media (max-width: $breakpoint-sm) {
-    @include gl-pr-5;
-  }
-}
-
-@mixin gl-sm-pl-5 {
-  @media (max-width: $breakpoint-sm) {
-    @include gl-pl-5;
-  }
-}
-
-@mixin gl-md-pr-1 {
-  @media (min-width: $breakpoint-md) {
-    @include gl-pr-1;
-  }
-}
-
-@mixin gl-md-pr-2 {
-  @media (min-width: $breakpoint-md) {
-    @include gl-pr-2;
-  }
-}
-
-@mixin gl-lg-pr-5 {
-  @media (min-width: $breakpoint-lg) {
-    @include gl-pr-5;
-  }
-}
diff --git a/content/assets/stylesheets/stylesheet.scss b/content/assets/stylesheets/stylesheet.scss
index c5f32478..0dd5e910 100644
--- a/content/assets/stylesheets/stylesheet.scss
+++ b/content/assets/stylesheets/stylesheet.scss
@@ -8,10 +8,10 @@ version: 111
 @import 'normalize';
 @import 'mixins';
 @import 'base';
-@import 'typography';
 @import 'tables';
 @import 'breadcrumbs';
 @import 'sidebar';
+@import 'typography';
 
 body {
   overflow-x: hidden;