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

@@ -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>

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;

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

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 {