Revert to old page layout styling

docs/_static/scss/components/_layout.scss

@@ -5,25 +5,28 @@
 }
 
 .wy-grid-for-nav {
+    display: grid;
+    grid-template-columns: 300px 900px 300px;
+    justify-content: center;
+    position: relative;
     margin-top: 80px;
-    max-width: 1500px;
-    margin: auto;
-    position: unset;
-    width: unset;
-    height: unset;
 
-    @media (min-width: $breakpoint-mobile) {
-        display: flex;
+    @media (max-width: $breakpoint-laptop) {
+        display: grid;
+        grid-template-columns: 300px 700px 200px;
+        justify-content: center;
     }
-}
 
-.wy-nav-content {
-    max-width: 100% !important;
+    @media (max-width: $breakpoint-width1200) {
+        grid-template-columns: 300px auto;
+    }
+
+    @media (max-width: $breakpoint-landscape){
+        display: block;
+    }
 }
 
 .wy-nav-content-wrap {
-    display: flex;
-    flex: 1 1 auto;
     background: #fcfcfc;
 
     @media (max-width: $breakpoint-landscape){
@@ -122,8 +125,7 @@
 }
 
 .wy-nav-content {
-    display: flex;
-    max-width: 100% !important;
+    max-width: 1200px;
     padding: 20px;
     height: auto;
 
@@ -207,23 +209,18 @@
 
 }
 
-.wy-grid-for-nav .wy-nav-side {
+.wy-nav-side {
     position: sticky;
     top: 0;
     background: inherit;
     z-index: 10;
-    width: 0;
 
-    @media (max-width: $breakpoint-landscape - 1) {
+    @media (max-width: $breakpoint-landscape){
+        width: 300px;
         left: -300px;
     }
-
-    @media (min-width: $breakpoint-landscape) {
-        flex: 0 0 300px;
-    }
-
     .wy-menu-vertical {
-        @media (max-width: $breakpoint-landscape - 1) {
+        @media (max-width: $breakpoint-landscape) {
             left: -300px;
             width: 300px;
             transition: 0.2s ease-in-out;
@@ -368,41 +365,35 @@
     }
 }
 
-.aside-tiles {
-    display: none;
-    gap: 32px;
-    height: 100%;
+.aside-tile {
+    display: flex;
     flex-direction: column;
-    flex: 0 0 300px;
-    font-size: 12px;
-    color: var(--blue);
-    text-align: left;
-    margin-bottom: 5px;
+    justify-content: center;
     align-items: center;
+    position: relative;
+    width: 100%;
+    height: max-content;
+    padding: 10px;
 
-    @media (min-width: $breakpoint-laptop) {
-        display: flex;
-    }
-
-    &__cards {
-        position: fixed;
-        top: 150px;
-    }
-
-    &__card {
+    &__container {
         border-radius: 5px;
         border: 1px solid var(--grey-border);
+        position: fixed;
+        top: 150px;
         background-color: #fff;
         width: 250px;
         height: max-content;
         padding: 20px 20px 10px 20px;
-        margin-bottom: 32px;
 
         @media (max-width: $breakpoint-laptop) {
             width: 179px;
         }
     }
 
+    &__feedback {
+        top: 350px;
+    }
+
     &__content {
         display: flex;
         flex-direction: column;
@@ -423,13 +414,12 @@
         display: none;
     }
 
-    ul {
+    .aside-tile__feedback-list {
         font-size: 12px;
         color: var(--blue);
         text-align: left;
         margin-bottom: 5px;
 
-
         li {
             line-height: 25px;
 
@@ -438,6 +428,8 @@
                 color: var(--message-success);
             }
         }
+
+
     }
 }
 /* aside end */

docs/_static/scss/components/_module.scss

@@ -5,9 +5,6 @@
 
 @use "../breakpoints" as *;
 
-header {
-    margin-bottom: 60px;
-}
 
 .main-content a {
     color: var(--secondary-blue);
@@ -46,7 +43,8 @@ header {
 }
 
 .rst-content {
-    padding: 20px 50px;
+    max-width: 900px;
+    padding: 0 50px;
 
     @media (max-width: $breakpoint-portrait) {
         padding: 0;

docs/_static/scss/components/defaults/_code.scss

@@ -1,3 +1,5 @@
+@use "../../breakpoints" as *;
+
 .rst-content section ul {
     line-height: auto;
 }

docs/_templates/layout.html

@@ -268,26 +268,24 @@
       {%- endblock %}
       </div>
     </section>
-    <aside class="aside-tiles">
-      <div class="aside-tiles__cards">
-        <div class="aside-tiles__card">
-          <div class="aside-tiles__content">
-            <img src="https://static.hypernode.com/img/berend/logo.svg">
-            <h4>Need support?</h4>
-            <p><a class="ahref-orange" href="https://www.hypernode.com/contact/#contact" target="_blank">Submit a ticket</a></p>
-          </div>
+    <aside class="aside-tile">
+      <div class="aside-tile__container">
+        <div class="aside-tile__content">
+          <img src="https://static.hypernode.com/img/berend/logo.svg">
+          <h4>Need support?</h4>
+          <p><a class="ahref-orange" href="https://www.hypernode.com/contact/#contact" target="_blank">Submit a ticket</a></p>
         </div>
-        <div class="aside-tiles__card">
-          <div class="aside-tiles__content">
-            <img src="https://static.hypernode.com/img/icons-multi-color/chat-bot.svg">
-            <h4>Join our<br>Feedback Group</h4>
-            <ul class="aside-tiles__feedback-list">
-              <li><i class="fa fa-check-circle"></i>Experience new features first</li>
-              <li><i class="fa fa-check-circle"></i>Get a gift after each session</li>
-              <li><i class="fa fa-check-circle"></i>Join product decision making</li>
-            </ul>
-            <p><a class="ahref-orange" href="https://forms.gle/ocQjMzhghMkUzkB19" target="_blank">read more</a></p>
-          </div>
+      </div>
+      <div class="aside-tile__container aside-tile__feedback">
+        <div class="aside-tile__content">
+          <img src="https://static.hypernode.com/img/icons-multi-color/chat-bot.svg">
+          <h4>Join our<br>Feedback Group</h4>
+          <ul class="aside-tile__feedback-list">
+            <li><i class="fa fa-check-circle"></i>Experience new features first</li>
+            <li><i class="fa fa-check-circle"></i>Get a gift after each session</li>
+            <li><i class="fa fa-check-circle"></i>Join product decision making</li>
+          </ul>
+          <p><a class="ahref-orange" href="https://forms.gle/ocQjMzhghMkUzkB19" target="_blank">read more</a></p>
         </div>
       </div>
     </aside>