Main elements created (#4)

src/frontend/styles/components/aside.pcss

@@ -0,0 +1,28 @@
+.docs-aside {
+  font-size: 15px;
+  color: var(--color-text-second);
+
+  a {
+    text-decoration: none;
+  }
+
+  &__section {
+    margin-bottom: 30px;
+
+    &-title {
+      margin-bottom: 15px;
+      color: var(--color-link-active);
+    }
+
+    &-list {
+      padding-left: 0;
+      list-style: none;
+
+      a {
+        display: inline-block;
+        color: inherit;
+        padding: 8px 0;
+      }
+    }
+  }
+}

src/frontend/styles/components/header.pcss

@@ -0,0 +1,31 @@
+.docs-header {
+  font-size: 15.8px;
+  border-bottom: 1px solid var(--color-line-gray);
+  line-height: 50px;
+  display: flex;
+  padding: 0 var(--layout-padding-horisontal);
+
+  a {
+    text-decoration: none;
+    color: inherit;
+    display: inline-block;
+
+    &:hover {
+      color: var(--color-link-active);
+    }
+  }
+
+  &__logo {
+    font-weight: bold;
+  }
+
+  &__menu {
+    display: flex;
+    margin: 0 0 0 auto;
+
+    li {
+      list-style: none;
+      margin-left: 20px;
+    }
+  }
+}

src/frontend/styles/layout.pcss

@@ -0,0 +1,22 @@
+.docs {
+  display: flex;
+  padding: 0 var(--layout-padding-horisontal);
+
+  &__aside {
+    width: var(--layout-width-aside);
+  }
+
+  &__content {
+    flex-grow: 2;
+
+    &-inner {
+      max-width: var(--layout-width-main-col);
+      margin: 0 auto;
+    }
+  }
+
+  &__aside,
+  &__content {
+    padding: 40px 0;
+  }
+}

src/frontend/styles/main.pcss

@@ -1,7 +1,12 @@
+@import url('../../../node_modules/normalize.css');
+@import url('vars.pcss');
+@import url('layout.pcss');
+@import url('components/header.pcss');
+@import url('components/aside.pcss');
+
 body {
   font-family: system-ui, Helvetica, Arial, Verdana;
-}
-
-a {
-  color: #00B7FF;
+  color: var(--color-text-main);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
 }

src/frontend/styles/vars.pcss

@@ -0,0 +1,13 @@
+:root {
+  --color-text-main: #1D202B;
+  --color-text-second: #7B7E89;
+  --color-line-gray: #E8E8EB;
+  --color-link-active: #388AE5;
+
+  /**
+   * Site layout sizes
+   */
+  --layout-padding-horisontal: 40px;
+  --layout-width-aside: 250px;
+  --layout-width-main-col: 650px;
+}