From 75ff933adddcb929e789668f670a49639c8eb3d7 Mon Sep 17 00:00:00 2001
From: Pavel Mineev <pavel@mineev.me>
Date: Sun, 9 Feb 2020 22:34:01 +0300
Subject: [PATCH] Small restyling of comment elements

* quote with left border and without background
* style for old code insetions (structure pre > code)
* unified elemets margins
* 1px separator height
---
 .../_theme/_dark/raw-content_theme_dark.scss  |  2 +-
 .../_light/raw-content_theme_light.scss       |  2 +-
 .../raw-content/code-highlight.scss           |  2 +-
 .../components/raw-content/raw-content.scss   | 35 +++++++++++--------
 4 files changed, 24 insertions(+), 17 deletions(-)

diff --git a/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss b/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss
index 010be31e..82ae2e89 100644
--- a/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss
+++ b/frontend/app/components/raw-content/_theme/_dark/raw-content_theme_dark.scss
@@ -1,6 +1,6 @@
 .raw-content_theme_dark {
   blockquote {
-    background: #393734;
+    border-left-color: rgba(255, 255, 255, 0.3);
   }
 
   table {
diff --git a/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss b/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss
index 03218747..dc651f7d 100644
--- a/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss
+++ b/frontend/app/components/raw-content/_theme/_light/raw-content_theme_light.scss
@@ -1,6 +1,6 @@
 .raw-content_theme_light {
   blockquote {
-    background: #fafafa;
+    border-left-color: rgba(0, 0, 0, 0.1);
   }
 
   table {
diff --git a/frontend/app/components/raw-content/code-highlight.scss b/frontend/app/components/raw-content/code-highlight.scss
index 8a683b5f..115ef370 100644
--- a/frontend/app/components/raw-content/code-highlight.scss
+++ b/frontend/app/components/raw-content/code-highlight.scss
@@ -1,4 +1,4 @@
-.chroma {
+pre {
   color: var(--chroma-base);
   background-color: var(--chroma-bg);
 
diff --git a/frontend/app/components/raw-content/raw-content.scss b/frontend/app/components/raw-content/raw-content.scss
index a04404f3..285fc80a 100644
--- a/frontend/app/components/raw-content/raw-content.scss
+++ b/frontend/app/components/raw-content/raw-content.scss
@@ -23,19 +23,22 @@
 
   word-break: break-word;
 
-  p {
-    margin: 0;
+  p,
+  blockquote {
+    margin: 1rem 0;
 
-    + blockquote,
-    + p {
-      margin-top: 8px;
+    &:first-child {
+      margin-top: 0rem;
     }
 
+    &:last-child {
+      margin-bottom: 0rem;
+    }
     /* imported comments have br instead of p */
     br {
       content: '';
       display: block;
-      margin-top: 8px;
+      margin-top: 1rem;
     }
   }
 
@@ -65,13 +68,8 @@
   }
 
   blockquote {
-    margin: 0;
-    padding: 8px 8px 8px 24px;
-    border-radius: 2px;
-
-    + p {
-      margin-top: 8px;
-    }
+    padding: 12px 8px 12px 16px;
+    border-left: 2px solid;
   }
 
   table {
@@ -111,7 +109,7 @@
   }
 
   pre {
-    padding: 16px;
+    padding: 12px 16px 12px 18px;
     overflow-x: auto;
     overflow-y: hidden;
     tab-size: 2;
@@ -127,6 +125,11 @@
     &:last-child {
       margin-bottom: 0;
     }
+
+    > code {
+      background-color: transparent;
+      padding: 0;
+    }
   }
 
   sup,
@@ -136,4 +139,8 @@
       vertical-align: middle; /* to prevent some visual cheats */
     }
   }
+
+  hr {
+    border-width: 0 0 1px 0;
+  }
 }