[IMP] doc: revamp documentation design

A comprehensive theme’s revamp, details:

=== New features ===
- Show titles permalink markers on hover
- “Scrollspy” effect for the sidebar

=== Fixes ===
- Solve an issue causing the sidebar to flicker on scroll
- Hide the sidebar if less then two links

=== Design ===
- Improve typography vertical rhythm and line height
- Visually increase separation between sections
- Review alerts and <dl> design
- Reduce cover’s size
- Reduce overall paddings/margins.

Closes #21304

1 files changed, 126 insertions, 172 deletions

diff --git a/doc/_extensions/odoo_ext/static/layout.less b/doc/_extensions/odoo_ext/static/layout.less
index 033468afa4e..c826e769544 100644
--- a/doc/_extensions/odoo_ext/static/layout.less
+++ b/doc/_extensions/odoo_ext/static/layout.less
@@ -1,210 +1,164 @@
-.pseudo-col(){
-  position: relative;
-  min-height: 1px;
-  padding-right: 15px;
-  padding-left: 15px;
-  float: left;
-  width: 100%;
+// ================================================
+// ================  Layout =======================
+// ================================================
+
+
+// Bootrstrap adaptations
+// ------------------------------------------------------------------
+body, header {
+    position: relative;
+}
+
+.container .container {
+    max-width: 100%;
+    padding: 0;
+    margin: 0;
 }
 
-.code-col(){
-  content: "";
-  background: @doc_code-bg;
-  .box-shadow(inset 40px 0 40px -18px rgba(22, 24, 29, 0.3));
-  position: absolute;
-  width: 43%;
-  height: 100%;
-  top: 0;
-  right: 0;
+.img-responsive {
+    display: inline-block;
 }
 
+.img-responsive.center-block {
+    display: block;
+}
 
-body, header {
-  position: relative;
+article.doc-content *[class*="col-"] {
+    padding: 0;
 }
 
-// Index layout
+
+// Main Components
+// ------------------------------------------------------------------
 #wrap {
-  > .container.index {
-    background-color: @gray-lightest;
-    width: 100%;
+    z-index: 1;
+    position: relative;
+    background: @gray-lightest;
+    padding-bottom: 40px;
+}
+
+main {
     position: relative;
+    display: block;
+
+    .o_content {
+        background-color: @doc_paper;
+        .deep-1;
 
-    > .index {
-      .container;
+        @media (min-width: @screen-sm-min) {
+            margin: -40px auto 0;
+            border-radius: 2px;
+        }
     }
-  }
-}
 
-#main_title {
-  margin: 10px;
-  @media (min-width:@screen-md-min) {
-    margin: 0 0 9px 0;
-  }
-}
+    article.doc-body {
+        .pseudo-col();
+        padding: 15px;
 
+        @media (min-width: @screen-sm-min) {
+            padding: 15px 30px;
+        }
 
-.container .container {
-  max-width: 100%;
-  padding:0;
-  margin:0;
-}
+        @media (min-width: @screen-md-min) {
+            max-width: 700px;
+        }
 
-article.doc-content *[class^="col-"] {
-  padding:0;
-}
+        @media (min-width: @screen-lg-min) {
+            margin-left: 7%;
+            margin-top: 20px;
+        }
 
-main{
-
-  aside, article.doc-body, .doc-content, .doc-aside {
-    .pseudo-col();
-  }
-  .doc-content, .doc-aside {
-    position:relative;
-  }
-  aside {
-    width: 25%;
-    max-width: 300px;
-    position:static;
-    padding:0;
-    display:block;
-    float:left;
-    @media (max-width:@screen-md-min) {
-      display: none;
-    }
-  }
-  article.doc-body {
-    background: @doc_paper;
-    border-left: 1px solid @gray-lighter;
-    padding: 15px 30px;
-    @media (min-width: @screen-md-min) {
-      width: 75%;
-      &.doc-toc {
-        width: 100%;
-      }
+        > * {
+            max-width: 100%;
+        }
     }
-    > *{
-      max-width: 100%;
+}
+
+main.o_aside_removed, main.o_slim_page {
+    max-width: 700px;
+
+    @media (min-width: @screen-lg-min) {
+        max-width: 760px;
     }
-  }
 
+    article.doc-body {
+        @media (min-width: @screen-md-min) {
+            padding-left: 30px;
+        }
+    }
 }
 
-main.has_code_col{
-  .container;
+main.has_code_col {
+    max-width: 700px;
 
-  aside {
-    display: none;
-  }
+    @media (min-width: @screen-lg-min) {
+        max-width: @container-lg;
+    }
 
-  article.doc-body {
-    width: 100%;
+    .doc-aside, .doc-content {
+        .pseudo-col();
 
-    > *{
-      max-width: 100%;
+        @media (max-width: @screen-md-max) {
+            padding: 0;
+        }
     }
-    > section {
-      position: relative;
-      display:block;
-      float: left;
-      width: 100%;
+
+    aside {
+        display: none;
     }
 
-    @media (min-width: @screen-lg-min) {
-      width: 100%;
-      padding-right: 0;
-      &:before {
-        .code-col();
-      }
-      > section {
-        > * {
-          width: 54.633333%;
-          max-width: 600px;
-          float: left;
-          clear: left;
+    article.doc-body {
+        > section {
+            max-width: 100%;
         }
-        > h1, > h2, > h3, > h4, > h5, > h6 {
-          width: 100%;
-          float: none;
-          clear: none;
-        }
-        .doc-aside {
-          width: 41%;
-          float: none;
-          clear: none;
-          margin-right: 15px;
-          margin-left: 57%;
-
-          .content-switcher{
-            margin-top:0;
-            > ul {
-              margin-bottom: 0;
+
+        @media (min-width: @screen-lg-min) {
+            width: 100%;
+            max-width: none;
+            margin:0;
+
+            &:before {
+                .code-col();
             }
 
-            > ul > li {
-               color: @gray-light;
+            > section {
+                position: relative;
+                display: block;
+                float: left;
+                width: 100%;
+
+                > * {
+                    width: 48%;
+                    float: left;
+                    clear: left;
+                }
+
+                > h2, > h3, > h4, > h5, > h6, > h1 {
+                    width: 48%;
+                    float: none;
+                    clear: none;
+                }
+
+                .doc-aside {
+                    width: 49%;
+                    float: none;
+                    clear: none;
+                    margin-left: 51%;
+                    color: @gray-light;
+                    font-size: 14px;
+                    line-height: 1.45;
+
+                    pre {
+                        font-size: 12px;
+                    }
+                }
             }
-          }
+
         }
-      }
     }
-  }
-}
-
-main.index .toctree-wrapper {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
-
-  > .row {
-    flex: 1 0 100%;
-  }
-  @media screen and(min-width: @screen-md){
-    // display these 2 as 2x2 squares
-    > .row.tutorials, .row.api {
-      flex: 0 0 50%;
-
-      display: flex;
-      flex-wrap: wrap;
-      > div {
-        flex: 0 0 50%;
-      }
-    }
-
-    // FIXME: reimplement a single big box (.toc-single-entry)
-  }
 }
 
 article.doc-toc .toctree-wrapper > ul > li > span {
-  display: block;
-  font-size: 28px;
-}
-
-.code-fields{
-  display: table;
-  width: 100%;
-  .code-field{
-    display: table-row;
-  }
-  .code-field-body{
     display: block;
-    padding-left:  15px;
-    @media screen and (min-width: @screen-md-min){
-      display: table-cell;
-      padding-left:  0;
-    }
-  }
-  .code-field-name{
-    width:auto;
-    display:block;
-    @media screen and (min-width: @screen-md-min){
-      width:20%;
-      padding-right: 20px;
-      display: table-cell;
-    }
-  }
-  ul {
-    margin: .2em 0;
-    padding: 0;
-  }
+    font-size: 28px;
 }