fix markdown preview on publish page

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;

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 {

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;
 }

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 {

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 {