From 2dd4873029ac5e1fbc1c4aa7428c196af9c0c3c8 Mon Sep 17 00:00:00 2001
From: Peter Savchenko <specc.dev@gmail.com>
Date: Thu, 15 Sep 2022 22:37:12 +0300
Subject: [PATCH] fix(styles): editor styles improved (#268)

* editor blocks margin fix, horisontal scroll fix

* make page and editor more similar
---
 src/frontend/styles/components/page.pcss    | 19 +++++++----------
 src/frontend/styles/components/sidebar.pcss |  3 +--
 src/frontend/styles/components/writing.pcss | 22 ++++++++++++--------
 src/frontend/styles/vars.pcss               | 23 ++++++++++++++++++++-
 4 files changed, 44 insertions(+), 23 deletions(-)

diff --git a/src/frontend/styles/components/page.pcss b/src/frontend/styles/components/page.pcss
index e8d6359..7109556 100644
--- a/src/frontend/styles/components/page.pcss
+++ b/src/frontend/styles/components/page.pcss
@@ -48,12 +48,17 @@
     &-button {
       margin-left: 20px;
       text-decoration: none;
+
+      @media (--mobile) {
+        margin-left: auto;
+      }
     }
   }
 
   &__title {
     @apply --text-content-title;
     margin-bottom: 10px;
+    line-height: 1.35em;
   }
 
   .cdx-marker {
@@ -99,10 +104,12 @@
 .block-header {
   @apply --text-header;
 
+  margin-top: 10px;
   display: flex;
   align-items: center;
   transform: translateX(-36px);
   cursor: text;
+
   &--2 {
     @apply --text-header-2;
   }
@@ -332,17 +339,7 @@
  * ==================
  */
 .block-list {
-  margin: 0;
-  list-style: outside;
-  padding-left: 40px;
-
-  &--ordered {
-    list-style-type: decimal
-  }
-
-  li:not(:last-of-type) {
-    margin-bottom: 8px;
-  }
+  @apply --text-list;
 }
 
 /**
diff --git a/src/frontend/styles/components/sidebar.pcss b/src/frontend/styles/components/sidebar.pcss
index ae29f06..5fc4ef5 100644
--- a/src/frontend/styles/components/sidebar.pcss
+++ b/src/frontend/styles/components/sidebar.pcss
@@ -60,13 +60,12 @@
     }
 
     @media (--tablet) {
-      margin: 0 -8px;
       display: none;
     }
 
     @media (--mobile) {
-      margin: 0 -8px;
       display: none;
+      padding: var(--layout-padding-vertical) 7px;
     }
 
     &--visible {
diff --git a/src/frontend/styles/components/writing.pcss b/src/frontend/styles/components/writing.pcss
index 945c694..9a9a428 100644
--- a/src/frontend/styles/components/writing.pcss
+++ b/src/frontend/styles/components/writing.pcss
@@ -58,13 +58,17 @@
     border-radius: 8px;
   }
 
-  .ce-paragraph a {
-    @apply --text-inline-link;
+  .ce-paragraph {
+    line-height: inherit;
+
+    a {
+     @apply --text-inline-link;
+    }
   }
 
   .ce-header {
     @apply --text-header;
-    padding: 0;
+    padding: 0 0 10px;
   }
 
   h2.ce-header {
@@ -75,10 +79,6 @@
     @apply --text-header-3;
   }
 
-  .cdx-block {
-    padding: 0;
-  }
-
   .inline-code {
     @apply  --text-inline-code;
   }
@@ -92,7 +92,11 @@
   }
 
   .cdx-list {
-    padding-left: 40px;
+    @apply --text-list;
+
+    &__item {
+      line-height: inherit;
+    }
   }
 
   @media (--desktop) {
@@ -107,7 +111,7 @@
   @apply --text-content-title;
 }
 
-.ce-block {
+.cdx-block {
   @apply --content-block;
 }
 
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index 91c6d1d..2af7f66 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -184,7 +184,7 @@
    * Common styles for text headings (H2, H3, H4)
    */
   --text-header {
-    margin: 18px 0 0;
+    margin: 20px 0 0;
     line-height: 1.35em;
   }
 
@@ -257,6 +257,27 @@
     }
   }
 
+  /**
+   * Styles for the List block
+   */
+  --text-list {
+    margin: 0;
+    list-style: outside;
+    padding-left: 40px;
+
+    &--ordered {
+      list-style-type: decimal
+    }
+
+    li {
+      padding: 0;
+
+      &:not(:last-of-type){
+        margin-bottom: 8px;
+      }
+    }
+  }
+
 }
 
 /**