Style tables for docs section

styles/_mixins.scss

@@ -32,6 +32,26 @@
   }
 }
 
+@mixin m() {
+  font-size: $m-size;
+  line-height: 1.9;
+
+  // @note: Consideration on stopping type reduction here?
+  @media (max-width: $width-tablet-1) {
+    font-size: $ms-size;
+  }
+}
+
+@mixin ms () {
+  font-size: $ms-size;
+  line-height: 2;
+
+  // @note: Consideration on stopping type reduction here
+  // @media (max-width: $width-tablet-1) {
+  //   font-size: $mxs-size;
+  // }
+}
+
 @mixin cta() {
   margin-top: 96px;
 

styles/_typography.scss

@@ -192,23 +192,11 @@ em {
 }
 
 .m {
-  font-size: $m-size;
-  line-height: 1.9;
-
-  // @note: Consideration on stopping type reduction here?
-  @media (max-width: $width-tablet-1) {
-    font-size: $ms-size;
-  }
+  @include m();
 }
 
 .ms {
-  font-size: $ms-size;
-  line-height: 2;
-
-  // @note: Consideration on stopping type reduction here
-  // @media (max-width: $width-tablet-1) {
-  //   font-size: $mxs-size;
-  // }
+  @include ms();
 }
 
 .mxs {

styles/_vars.scss

@@ -3,10 +3,11 @@
 *******************************************************************************/
 $black: #000;
 $white: #fff;
+$charcoal: #231f20;
 $grey: #f8f8f8;
+$grey-light: mix($white, $charcoal, 75%);
 $jambonz: #da1c5c;
 $pink: #fff3f6;
-$charcoal: #231f20;
 $purple: #9662b2;
 $teal: #30beb0;
 $blue: #006dff;

styles/pages/_docs.scss

@@ -36,7 +36,7 @@
     }
 
     > div {
-      > h1, > h2, > h3, > h4, > h5, > h6, > p, > div, > ul, > ol {
+      > h1, > h2, > h3, > h4, > h5, > h6, > p, > div, > ul, > ol, > table {
         margin: 16px 0;
       }
 
@@ -52,6 +52,33 @@
           @include p();
         }
       }
+
+      > table {
+        @include ms();
+        width: 100%;
+
+        td, th {
+          padding: 8px 12px;
+          border: 1px solid $grey-light;
+        }
+
+        th {
+          @include font-bold();
+        }
+
+        tbody {
+          tr:nth-child(odd) {
+            background-color: $grey;
+          }
+        }
+      }
+
+      code[class*="language-"],
+      pre[class*="language-"] {
+        @media (max-width: $width-tablet-1) {
+          font-size: 13px;
+        }
+      }
     }
 
     > div > :first-child {