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

@@ -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;
+  @apply --text-list;
-  list-style: outside;
-  padding-left: 40px;
-
-  &--ordered {
-    list-style-type: decimal
-  }
-
-  li:not(:last-of-type) {
-    margin-bottom: 8px;
-  }
 }
 
 /**

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 {

src/frontend/styles/components/writing.pcss

@@ -58,13 +58,17 @@
     border-radius: 8px;
   }
 
-  .ce-paragraph a {
+  .ce-paragraph {
-    @apply --text-inline-link;
+    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;
 }
 

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;
+      }
+    }
+  }
+
 }
 
 /**