From 669b78b9679da13264b6f6207f77d0e573065e16 Mon Sep 17 00:00:00 2001
From: Tanya <fomina.tatianaaa@yandex.ru>
Date: Mon, 27 Jun 2022 20:04:26 +0800
Subject: [PATCH] Layout update (#208)

* Add right column

* Cleanup

* Fix center column position

* Change sidebar width

* Fixes

* Make right column sticky

* Add placeholder element to right column

* Fix right aside padding top
---
 src/backend/views/layout.twig               |  5 ++++
 src/frontend/styles/components/writing.pcss |  4 ---
 src/frontend/styles/layout.pcss             | 29 +++++++++++++++++++++
 src/frontend/styles/vars.pcss               |  6 ++++-
 4 files changed, 39 insertions(+), 5 deletions(-)

diff --git a/src/backend/views/layout.twig b/src/backend/views/layout.twig
index 72d20fd..b57c910 100644
--- a/src/backend/views/layout.twig
+++ b/src/backend/views/layout.twig
@@ -21,9 +21,14 @@
       {% include "components/sidebar.twig" %}
       
       <div class="docs__content">
+        
         <div class="docs__content-inner">
           {% block body %}{% endblock %}
         </div>
+
+        <aside class="docs__aside-right">
+          <div style="width: 100%; height: 100px; background: grey"/>
+        </aside>
       </div>
     </div>
     <script src="/dist/main.bundle.js"></script>
diff --git a/src/frontend/styles/components/writing.pcss b/src/frontend/styles/components/writing.pcss
index c7ccebf..5bb1efa 100644
--- a/src/frontend/styles/components/writing.pcss
+++ b/src/frontend/styles/components/writing.pcss
@@ -53,10 +53,6 @@
   line-height: 1.6;
   letter-spacing: 0.005em;
 
-  @media (--desktop) {
-    margin: 0 -100px;
-  }
-
   .ce-code__textarea {
     color: #41314e;
     line-height: 1.6em;
diff --git a/src/frontend/styles/layout.pcss b/src/frontend/styles/layout.pcss
index ca89c3f..9fa5753 100644
--- a/src/frontend/styles/layout.pcss
+++ b/src/frontend/styles/layout.pcss
@@ -18,14 +18,43 @@
     &-inner {
       max-width: var(--layout-width-main-col);
       margin: 0 auto;
+
+      @media (--desktop) {
+        margin-right: var(--layout-padding-horizontal);
+        margin-left: 0;
+      }
     }
   }
 
   &__content {
+    --max-space-between-cols: 160px;
     padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
+    display: flex;
+    justify-content: space-between;
+    max-width: calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width));
+    margin-left: max(0px, calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2));
+    margin-right: auto;
 
     @media (--mobile) {
       padding: 20px var(--layout-padding-horizontal);
     }
   }
+
+  &__aside-right {
+    width: var(--layout-sidebar-width);
+    min-width: 160px;
+    display: none;
+
+    position: sticky;
+    top: calc(var(--layout-height-header) + var(--layout-padding-vertical));
+    align-self: flex-start;
+
+    @media (--desktop) {
+      display: block;
+    }
+  }
+
+  &-sidebar {
+    flex-shrink: 0;
+  }
 }
diff --git a/src/frontend/styles/vars.pcss b/src/frontend/styles/vars.pcss
index c9a780d..4d4ebf0 100644
--- a/src/frontend/styles/vars.pcss
+++ b/src/frontend/styles/vars.pcss
@@ -25,7 +25,7 @@
    */
   --layout-padding-horizontal: 22px;
   --layout-padding-vertical: 30px;
-  --layout-sidebar-width: 344px;
+  --layout-sidebar-width: 290px;
   --layout-width-main-col: 650px;
   --layout-height-header: 56px;
 
@@ -35,6 +35,10 @@
     --layout-height-header: 88px;
   }
 
+  @media (--wide-desktop) {
+    --layout-sidebar-width: 344px;
+  }
+
   --font-mono: Menlo,Monaco,Consolas,Courier New,monospace;
 
   --font-serif {