Fix various spacings in markdown in shartcodes

4 files changed, 24 insertions, 10 deletions

diff --git a/assets/_markdown.scss b/assets/_markdown.scss
index d52dddb..3814028 100644
--- a/assets/_markdown.scss
+++ b/assets/_markdown.scss
@@ -3,17 +3,18 @@
 $block-border-radius: 0.15rem;
 
 .markdown {
-  line-height: 1.7;
+  line-height: 1.6;
 
   h1, h2, h3, h4, h5 {
-    font-weight: $body-font-weight;
-    line-height: 1.25;
+    font-weight: normal;
+    line-height: 1;
+    margin-top: $padding-16 * 2;
+    margin-bottom: $padding-8;
   }
 
   // remove padding at the beginning of page
   > :first-child {
     margin-top: 0;
-    line-height: 1;
   }
 
   b, optgroup, strong {
@@ -42,7 +43,7 @@ $block-border-radius: 0.15rem;
     padding: $padding-16;
     background: $gray-100;
     border-radius: $block-border-radius;
-    font-size: $font-size-14;
+    font-size: .875em;
     overflow-x: auto;
 
     code {
@@ -53,7 +54,7 @@ $block-border-radius: 0.15rem;
 
   blockquote {
     border-left: $padding-1*2 solid $gray-300;
-    margin: 0;
+    margin: $padding-16 0;
     padding: $padding-1 $padding-16;
 
     :first-child { margin-top: 0; }
@@ -63,11 +64,13 @@ $block-border-radius: 0.15rem;
   table {
     border-spacing: 0;
     border-collapse: collapse;
+    margin-top: $padding-16;
+    margin-bottom: $padding-16;
   
     tr th, tr td {
       padding: $padding-8 $padding-16;
       line-height: 1;
-      border: 1px solid $gray-200;
+      border: $padding-1 solid $gray-200;
     }
 
     tr:nth-child(2n) {
diff --git a/assets/_shortcode.scss b/assets/_shortcodes.scss
index 0417ae7..2ec5712 100644
--- a/assets/_shortcode.scss
+++ b/assets/_shortcodes.scss
@@ -1,4 +1,4 @@
-@import "variables";
+@import 'variables';
 
 .markdown-inner { // Util class to remove extra margin in nested markdown content
   > :first-child {
@@ -61,6 +61,10 @@
 }
 
 // {{< columns >}}
+.book-columns {
+  margin-top: $padding-16;
+  margin-bottom: $padding-16;
+}
 .book-columns > {
   div {
     max-width: 50%;
diff --git a/assets/_variables.scss b/assets/_variables.scss
index 68d1099..5fbd04c 100644
--- a/assets/_variables.scss
+++ b/assets/_variables.scss
@@ -1,8 +1,15 @@
+// Used in layout
 $padding-1: 1px;
 $padding-4: 0.25rem;
 $padding-8: 0.5rem;
 $padding-16: 1rem;
 
+// Used in markdown and shortcodes
+$padding-em-1: 1px;
+$padding-em-4: .25em;
+$padding-em-8: .5em;
+$padding-em-16: 1em;
+
 $font-size-base: 16px;
 $font-size-12: 0.75rem;
 $font-size-14: 0.875rem;
diff --git a/assets/book.scss b/assets/book.scss
index 835395a..7be66a6 100644
--- a/assets/book.scss
+++ b/assets/book.scss
@@ -1,8 +1,8 @@
 @import "normalize";
 @import "variables";
-@import "markdown";
-@import "shortcode";
 @import "utils";
+@import "markdown";
+@import "shortcodes";
 
 html {
   font-size: $font-size-base;