Increase content paddings (#257)

* Increase content paddings

* add margin to the page title

src/frontend/styles/components/page.pcss

@@ -53,6 +53,7 @@
 
   &__title {
     @apply --text-content-title;
+    margin-bottom: 10px;
   }
 
   .cdx-marker {

src/frontend/styles/components/sidebar.pcss

@@ -1,6 +1,15 @@
 .docs-sidebar {
   width: 100vw;
 
+  /* Bottom and Left coord of the "Hide Sidebar" toggler  */
+  --hide-sidebar-toggler-offset: 11px;
+  --hide-sidebar-toggler-size: 28px;
+
+  @media (--widest-desktop) {
+    --hide-sidebar-toggler-offset: var(--layout-padding-horizontal);
+    --hide-sidebar-toggler-size: 32px;
+  }
+
   &--animated {
     .docs-sidebar__content {
       transition: transform 200ms ease-in-out;
@@ -21,7 +30,7 @@
     }
 
     .docs-sidebar__slider {
-      transform: translateX(20px);
+      transform: translateX(var(--hide-sidebar-toggler-offset));
 
       svg {
         transform: rotate(180deg);
@@ -228,15 +237,16 @@
   &__slider {
     display: none;
     position: fixed;
-    transform: translateX(calc(var(--layout-sidebar-width) + 20px));
+    transform: translateX(calc(var(--layout-sidebar-width) + var(--hide-sidebar-toggler-offset)));
-    bottom: 20px;
+    bottom: var(--hide-sidebar-toggler-offset);
-    width: 32px;
+    width: var(--hide-sidebar-toggler-size);
-    height: 32px;
+    height: var(--hide-sidebar-toggler-size);
-    border-radius: 8px;
     cursor: pointer;
     background-color: var(--color-link-hover);
     z-index: 10;
 
+    @apply --squircle;
+
     @media (--desktop) {
       display: flex;
       justify-content: center;

src/frontend/styles/layout.pcss

@@ -14,15 +14,29 @@
   }
 
   &__content {
+    --max-space-between-cols: 160px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
     flex-grow: 2;
     word-wrap: break-word;
 
-
     @media (--mobile) {
       width: 100%;
       flex-basis: 100%;
     }
 
+    @media (--desktop) {
+      max-width: min(
+        calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)),
+        calc(100vw - var(--layout-sidebar-width))
+      );
+      margin-left: max(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal));
+      margin-right: auto;
+      padding: 0;
+    }
+
     &-inner {
       max-width: var(--layout-width-main-col);
       margin: 0 auto;
@@ -31,29 +45,11 @@
 
       @media (--desktop) {
         margin-left: 0;
-        padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
+        padding: var(--layout-padding-vertical) var(--layout-padding-content-horizontal);
       }
     }
   }
 
-  &__content {
-    --max-space-between-cols: 160px;
-    box-sizing: border-box;
-    display: flex;
-    justify-content: space-between;
-    padding: var(--layout-padding-vertical) var(--layout-padding-horizontal);
-
-    @media (--desktop) {
-      max-width: min(
-        calc(var(--layout-width-main-col) + var(--max-space-between-cols) + var(--layout-sidebar-width)),
-        calc(100vw - var(--layout-sidebar-width))
-      );
-      margin-left: max(var(--main-col-min-margin-left), calc(50vw - var(--layout-sidebar-width) - var(--layout-width-main-col) / 2) - var(--layout-padding-horizontal));
-      margin-right: auto;
-      padding: 0;
-    }
-  }
-
   &__aside-right {
     width: var(--layout-sidebar-width);
     min-width: 160px;

src/frontend/styles/vars.pcss

@@ -40,7 +40,8 @@
    */
   --layout-padding-horizontal: 22px;
   --layout-padding-vertical: 30px;
-  --layout-sidebar-width: 290px;
+  --layout-padding-content-horizontal: 50px;
+  --layout-sidebar-width: 280px;
   --layout-width-main-col: 700px;
   --layout-height-header: 56px;
 
@@ -48,6 +49,7 @@
     --layout-padding-horizontal: 15px;
     --layout-padding-vertical: 15px;
     --layout-height-header: 88px;
+    --layout-padding-content-horizontal: var(--layout-padding-horizontal);
   }
 
   @media (--wide-desktop) {
@@ -264,3 +266,7 @@
 @custom-media --not-mobile all and (min-width: 981px);
 @custom-media --retina all and (-webkit-min-device-pixel-ratio: 1.5);
 @custom-media --can-hover all and (hover:hover);
+/**
+ * Big screens that have additional space around the center column
+ */
+@custom-media --widest-desktop all and (min-width: 1470px);