feat: editor preview styling + code highlighting

2018-02-24 20:53:32 -05:00
parent 4fa7ed4e93
commit a3948c7f45
9 changed files with 294 additions and 11 deletions
--- a/client/scss/components/markdown-content.scss
+++ b/client/scss/components/markdown-content.scss
@@ -0,0 +1,61 @@
+.markdown-content {
+  font-size: 1rem;
+  color: mc('blue-grey', '900');
+
+  // --------------------------------------------
+  // Headers
+  // --------------------------------------------
+
+  h1, h2, h3, h4, h5, h6 {
+    color: mc('blue-grey', '800');
+  }
+
+  > * + h1, > * + h2, > * + h3, > * + h4 {
+    margin-top: 1rem;
+  }
+  h1 {
+    font-size: 1.5rem;
+    border-bottom: 1px solid mc('blue-grey', '100');
+    margin-bottom: 1rem;
+  }
+  h2 {
+    font-size: 1.25rem;
+    border-bottom: 1px dotted mc('blue-grey', '100');
+    margin-bottom: .75rem;
+  }
+  h3 {
+    font-size: 1.15rem;
+    margin-bottom: .5rem;
+  }
+  h4 {
+    font-size: 1.1rem;
+  }
+  h5 {
+    font-size: 1.05rem;
+  }
+  h6 {
+    font-size: 1.025rem;
+  }
+
+  // --------------------------------------------
+  // Code Blocks
+  // --------------------------------------------
+  > pre {
+    border: none;
+    border-radius: 5px;
+    box-shadow: initial;
+    background-color: mc('blue-grey', '900');
+    padding: 1rem 1rem 1rem 3rem;
+
+    > code {
+      box-shadow: initial;
+      display: block;
+      font-size: .85rem;
+
+      &:after, &:before {
+        content: initial;
+        letter-spacing: initial;
+      }
+    }
+  }
+}