Remove GlMarkdown class

10 files changed, 35 insertions, 95 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 92ca1fca..702e93fa 100644
--- a/content/assets/stylesheets/_typography.scss
+++ b/content/assets/stylesheets/_typography.scss
@@ -1,17 +1,13 @@
 ---
-version: 1
+version: 2
 ---
 
-// Typography
-
 @import 'variables';
 @import 'mixins/breakpoints';
 @import 'mixins/md-typography';
 @import 'mixins/spacing';
 
-// Documentation Markdown typescale
-
-.gl-markdown {
+.gl-docs {
   p,
   ul,
   ol,
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 d4325c74..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 class="gl-markdown">
+  <body class="gl-docs">
     <%= render '/header.*' %>
     <section class="container">
       <div class="row">
diff --git a/layouts/archives.html b/layouts/archives.html
index ec33277c..60ab3b01 100644
--- a/layouts/archives.html
+++ b/layouts/archives.html
@@ -3,7 +3,7 @@
 <head>
 <%= render '/head.*' %>
 </head>
-<body class="gl-markdown">
+<body class="gl-docs">
   <%= render '/gtm.*' %>
   <%= render '/header.*' %>
   <div id="js-banner"></div>
diff --git a/layouts/default.html b/layouts/default.html
index c29febe6..939a6583 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 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 507f31b1..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 class="gl-markdown">
+  <body class="gl-docs">
     <%= render '/gtm.*' %>
     <%= render '/header.*' %>
     <section class="container">
diff --git a/layouts/redirect.html b/layouts/redirect.html
index 3f9177a6..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 class="gl-markdown">
+  <body class="gl-docs">
     <%= render '/header.*' %>
     <div class="wrapper pt-5">
       <div id="doc-nav" class="doc-nav"></div>