[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, 11 insertions, 14 deletions

diff --git a/doc/_extensions/odoo_ext/static/variables.less b/doc/_extensions/odoo_ext/static/variables.less
index 27399411813..d337f796865 100644
--- a/doc/_extensions/odoo_ext/static/variables.less
+++ b/doc/_extensions/odoo_ext/static/variables.less
@@ -78,11 +78,8 @@
 // Typography
 // ===============================================
 
-//== Fonts
-@import url(https://fonts.googleapis.com/css?family=Work+Sans:300,400,500,600,700&subset=latin,latin-ext);
-
 //== Font sizes/weigths
-@font-size-base : 15px;
+@font-size-base : 16px;
 
 @fw_light       : 300;
 @fw_regular     : 400;
@@ -91,19 +88,20 @@
 @fw_bold        : 700;
 
 //== Paragraphs
-@font-family-base        : -apple-system, BlinkMacSystemFont, Helvetica, "Helvetica Neue", Arial, sans-serif;
-@text-color              : saturate(@gray-dark, 5%);
+@font-family-base        : -apple-system, system-ui, "Segoe UI", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+@text-color              : #373e42;
 
 //== Headings
 @headings-color          : saturate(@gray-darker, 15%);
-@headings-font-family    : "Work Sans", sans-serif;
-@headings-font-weight    : @fw_light;
+@headings-font-family    : @font-family-base;
+@headings-font-weight    : @fw_regular;
 @headings-small-color    : @headings-color;
 
-@display1-size           : 6rem;
-@display2-size           : 5.5rem;
-@display3-size           : 4.5rem;
-@display4-size           : 3.5rem;
+@font-size-h2: 30px;
+@font-size-h3: 24px;
+@font-size-h4: 19px;
+@font-size-h5: 17px;
+@font-size-h6: 17px;
 
 //== Global textual link color.
 @link-color              : @o-violet-dark;
@@ -160,8 +158,7 @@
 
 // Cards
 // --------------------------------------------------
-@card_min-height: 200px;
-@card_margin-bottom: 20px;
+@card_margin-bottom: 25px;