Integrate CodeXEditor: dynamic import added (#5)

* Main elements created

* Add Editor to the writing page

src/frontend/styles/components/header.pcss

@@ -7,16 +7,12 @@
 
   a {
     text-decoration: none;
-    color: inherit;
     display: inline-block;
-
-    &:hover {
-      color: var(--color-link-active);
-    }
   }
 
   &__logo {
     font-weight: bold;
+    color: inherit;
   }
 
   &__menu {
@@ -27,5 +23,18 @@
       list-style: none;
       margin-left: 20px;
     }
+
+    a:not(.docs-header__button) {
+      color: inherit;
+
+      &:hover {
+        color: var(--color-link-active);
+      }
+    }
+  }
+
+  &__button {
+    @apply --button;
+    margin: auto 30px auto auto;
   }
 }

src/frontend/styles/layout.pcss

@@ -8,6 +8,7 @@
 
   &__content {
     flex-grow: 2;
+    word-wrap: break-word;
 
     &-inner {
       max-width: var(--layout-width-main-col);

src/frontend/styles/main.pcss

@@ -10,3 +10,7 @@ body {
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
+
+svg {
+  fill: currentColor;
+}

src/frontend/styles/vars.pcss

@@ -10,4 +10,22 @@
   --layout-padding-horisontal: 40px;
   --layout-width-aside: 250px;
   --layout-width-main-col: 650px;
+
+  --button {
+    display: inline-block;
+    background:  var(--color-link-active);
+    color: #fff;
+    border-radius: 3px;
+    padding: 9px 15px;
+    font-size: 14px;
+    line-height: 1em;
+
+    svg {
+      margin: 0 0.3em 0 -0.05em;
+    }
+
+    &:hover {
+      background: color-mod(var(--color-link-active) blackness(+10%));
+    }
+  }
 }