From 6c91e8cbf24dbbee9d1b781158412be86e89db18 Mon Sep 17 00:00:00 2001
From: btzr-io <btzr.io@gmail.com>
Date: Wed, 30 May 2018 12:12:54 -0600
Subject: [PATCH] fix markdown preview on publish page

---
 src/renderer/scss/_vars.scss                  |  1 +
 src/renderer/scss/component/_card.scss        |  1 -
 .../scss/component/_markdown-editor.scss      | 17 +----
 .../scss/component/_markdown-preview.scss     | 72 ++++++++++---------
 src/renderer/scss/component/_table.scss       |  2 +
 5 files changed, 45 insertions(+), 48 deletions(-)

diff --git a/src/renderer/scss/_vars.scss b/src/renderer/scss/_vars.scss
index db8bf3e9e..a30c51765 100644
--- a/src/renderer/scss/_vars.scss
+++ b/src/renderer/scss/_vars.scss
@@ -12,6 +12,7 @@ $large-breakpoint: 1760px;
   --side-nav-width: 220px;
   --side-nav-width-m: 240px;
   --side-nav-width-l: 320px;
+  --font-size-subtext-multiple: 0.92;
 
   --video-aspect-ratio: 56.25%; // 9 x 16
   --snack-bar-width: 756px;
diff --git a/src/renderer/scss/component/_card.scss b/src/renderer/scss/component/_card.scss
index b872a95e0..e9f38fbd1 100644
--- a/src/renderer/scss/component/_card.scss
+++ b/src/renderer/scss/component/_card.scss
@@ -198,7 +198,6 @@
   padding-top: $spacing-vertical * 1/3;
   word-break: break-word;
   font-family: 'metropolis-medium';
-  font-size: 13px;
 }
 
 .card__actions {
diff --git a/src/renderer/scss/component/_markdown-editor.scss b/src/renderer/scss/component/_markdown-editor.scss
index 7211c0d08..d6a07c1d1 100644
--- a/src/renderer/scss/component/_markdown-editor.scss
+++ b/src/renderer/scss/component/_markdown-editor.scss
@@ -45,8 +45,9 @@ div.editor-toolbar a {
 }
 
 .editor-preview {
-  background: var(--card-bg) !important;
-  border: 0 !important;
+  font-size: calc(var(--font-size-subtext-multiple) * 1em);
+  background: var(--color-bg) !important;
+  border: 0;
 }
 
 .editor-preview-side {
@@ -54,18 +55,6 @@ div.editor-toolbar a {
   border: 1px solid var(--input-border-color) !important;
 }
 
-.editor-preview pre,
-.editor-preview-side pre {
-  background: #eee;
-}
-
-.editor-preview table td,
-.editor-preview table th,
-.editor-preview-side table td,
-.editor-preview-side table th {
-  border: 1px solid var(--input-border-color) !important;
-}
-
 .CodeMirror .CodeMirror-code .cm-tag {
   color: #63a35c;
 }
diff --git a/src/renderer/scss/component/_markdown-preview.scss b/src/renderer/scss/component/_markdown-preview.scss
index fa19c2b18..99b377370 100644
--- a/src/renderer/scss/component/_markdown-preview.scss
+++ b/src/renderer/scss/component/_markdown-preview.scss
@@ -1,7 +1,8 @@
+.editor-preview,
 .markdown-preview {
   margin: 0;
 
-  /* Headings: title */
+  /* Headers */
   h1,
   h2,
   h3,
@@ -36,43 +37,48 @@
     font-size: 0.84em;
     color: var(--color-help);
   }
-}
 
-.markdown-preview p {
-  white-space: pre-line;
-}
-
-.markdown-preview table {
-  padding: 8px;
-  margin: 16px 0;
-  background-color: var(--card-bg);
-
-  tr td,
-  tr th,
-  tr td:first-of-type,
-  tr th:first-of-type,
-  tr td:last-of-type,
-  tr th:last-of-type {
-    padding: 8px;
+  /* Paragraphs */
+  p {
+    white-space: pre-line;
   }
-}
 
-.markdown-preview code {
-  display: block;
-  padding: 8px;
-  margin: 16px 0;
-  background-color: var(--color-bg-alt);
-  color: var(--color-help);
-  font-size: 1em;
-  font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
-}
+  /* Strikethrough text */
+  del {
+    color: var(--color-help);
+  }
 
-.markdown-preview hr {
-  border: 1px solid var(--color-divider);
-}
+  /* Tables */
+  table {
+    padding: 8px;
+    margin: 16px 0;
+    background-color: var(--card-bg);
 
-.markdown-preview del {
-  color: var(--color-help);
+    tr td,
+    tr th,
+    tr td:first-of-type,
+    tr th:first-of-type,
+    tr td:last-of-type,
+    tr th:last-of-type {
+      padding: 8px;
+    }
+  }
+
+  /* Horizontal Rule */
+  hr {
+    border: 1px solid var(--color-divider);
+  }
+
+  /* Code */
+  code {
+    display: block;
+    padding: 8px;
+    margin: 16px 0;
+    background-color: var(--color-bg-alt);
+    color: var(--color-help);
+    font-size: 1em;
+    font-family: Consolas, 'Lucida Console', 'Source Sans', monospace;
+  }
 }
 
 blockquote {
diff --git a/src/renderer/scss/component/_table.scss b/src/renderer/scss/component/_table.scss
index 399789ea7..207e0d45b 100644
--- a/src/renderer/scss/component/_table.scss
+++ b/src/renderer/scss/component/_table.scss
@@ -1,4 +1,5 @@
 table.table,
+.editor-preview table,
 .markdown-preview table {
   word-wrap: break-word;
   max-width: 100%;
@@ -28,6 +29,7 @@ table.table,
 
   th {
     font-family: 'metropolis-semibold';
+    border: 0;
   }
 
   td {