From 09d8b38073806eeb2325bc4b7a524befaf8a8599 Mon Sep 17 00:00:00 2001
From: infinite-persistence
 <64950861+infinite-persistence@users.noreply.github.com>
Date: Fri, 21 May 2021 03:31:14 +0800
Subject: [PATCH] Markdown editor tweaks (#6096)

* Markdown: make '>Quote' look less like a banner

Quotes should be subtle as it is primarily intended for redundant content, but currently it looks more like a banner that brings lots of focus.

This change is also background-independent. Currently, the Quotes in Posts doesn't look like it has a background color, because it happened to be the same as the Post's background. This makes it inconsistent with Quotes in Comments. Let's just always make it blend in + grayish text.

* Markdown: inline code tweak

- better symmetry
- less spacing to the left and right, since it's common to already have a space in the sentence (even if it doesn't, like in CJK, the new spacing looks sufficient).

* 4481: Use regular font in Markdown Editor

I think we should not use Monospace fonts for the Markdown Editor since we are not coding.

Similar to Github, code-blocks and inline-code only gets converted to monospace in the Preview.
---
 ui/scss/component/_file-render.scss      | 2 +-
 ui/scss/component/_markdown-preview.scss | 2 +-
 ui/scss/init/_gui.scss                   | 9 ++++++---
 3 files changed, 8 insertions(+), 5 deletions(-)

diff --git a/ui/scss/component/_file-render.scss b/ui/scss/component/_file-render.scss
index eba45692b..adea7827f 100644
--- a/ui/scss/component/_file-render.scss
+++ b/ui/scss/component/_file-render.scss
@@ -312,7 +312,7 @@
   }
 
   .CodeMirror-code {
-    @include font-mono;
+    @include font-sans;
     letter-spacing: 0.1rem;
   }
 
diff --git a/ui/scss/component/_markdown-preview.scss b/ui/scss/component/_markdown-preview.scss
index 60013a975..ae39627d0 100644
--- a/ui/scss/component/_markdown-preview.scss
+++ b/ui/scss/component/_markdown-preview.scss
@@ -161,7 +161,7 @@
     display: inline-block;
     border-radius: 0.2rem;
     font-size: var(--font-small);
-    padding: calc(var(--spacing-xxs) - 4px) var(--spacing-xxs) calc(var(--spacing-xxs) - 5px);
+    padding: calc(var(--spacing-xxs) - 4px) calc(var(--spacing-xxs) * 3 / 4) calc(var(--spacing-xxs) - 6px);
   }
 
   a {
diff --git a/ui/scss/init/_gui.scss b/ui/scss/init/_gui.scss
index d87376ad4..32a56e29f 100644
--- a/ui/scss/init/_gui.scss
+++ b/ui/scss/init/_gui.scss
@@ -128,9 +128,12 @@ dd {
 }
 
 blockquote {
-  padding: 0.8rem;
-  background-color: var(--color-blockquote-bg);
-  border-left: 0.3rem solid var(--color-blockquote);
+  padding: 0 0.8rem;
+  margin-top: var(--spacing-xxs);
+  margin-bottom: var(--spacing-xxs);
+  opacity: 0.9;
+  border-left: 0.2rem solid var(--color-blockquote);
+  color: var(--color-text-subtitle);
 }
 
 code {