From fe5ae49a4f4e58e63ec06db2bd8ca7d5d242cb0e Mon Sep 17 00:00:00 2001
From: Thomas Grimonet <tgrimonet@arista.com>
Date: Mon, 13 May 2024 15:19:03 +0200
Subject: [PATCH] doc(anta): Update CSS for better titles readability (#668)

* doc(anta): Update CSS for better titles readability

* doc(anta): Update CSS for better titles readability
---
 docs/stylesheets/extra.material.css | 66 ++++++++++++++++++++++++++---
 mkdocs.yml                          |  2 +-
 2 files changed, 60 insertions(+), 8 deletions(-)

diff --git a/docs/stylesheets/extra.material.css b/docs/stylesheets/extra.material.css
index b401c9ad6..517646506 100644
--- a/docs/stylesheets/extra.material.css
+++ b/docs/stylesheets/extra.material.css
@@ -2,11 +2,15 @@
   --md-hue: 210;
 }
 
+#page {
+  counter-reset: heading;
+}
+
 :root {
   /* Color schema based on Arista Color Schema */
   /* Default color shades */
   --md-default-fg-color:               #000000;
-  --md-default-fg-color--light:        #a1a0a0;
+  --md-default-fg-color--light:        #444343;
   --md-default-fg-color--lighter:      #FFFFFF;
   --md-default-fg-color--lightest:     #FFFFFF;
   --md-default-bg-color:               #FFFFFF;
@@ -49,6 +53,9 @@
 
 [data-md-color-scheme="slate"] {
 
+  /* Default color shades */
+  --md-default-fg-color--light: #949393;
+
   /* Link color */
   --md-typeset-a-color:                #75aaf8;
   --md-typeset-a-color-fg:             #FFFFFF;
@@ -76,6 +83,7 @@
 }
 
 @media only screen {
+
   .md-typeset a:hover {
     background-color: var(--md-typeset-a-color-bg);
     color: var(--md-typeset-a-color-fg);
@@ -102,12 +110,56 @@
     color: var(--md-default-fg-color--light);
   }
 
-  .md-typeset h4 h5 h6 {
-      font-size: 1.5rem;
-      margin: 1em 0;
-      /* font-weight: 700; */
-      letter-spacing: -.01em;
-      line-height: 3em;
+  .md-typeset h2 {
+    line-height: 2em;
+    font-size: 1.5rem;
+    margin: 1em 0;
+    /* font-weight: 700; */
+    letter-spacing: -.01em;
+    color: var(--md-default-fg-color--light);
+    text-transform: uppercase;
+    font-style: normal;
+    font-weight: bolder;
+  }
+
+  .md-typeset h3 {
+    line-height: 1em;
+    font-size: 1.3rem;
+    margin: 1em 0;
+    /* font-weight: 700; */
+    letter-spacing: -.01em;
+    color: var(--md-default-fg-color--light);
+    text-transform: uppercase;
+    font-style: normal;
+    font-weight: bold;
+  }
+
+  .md-typeset h4::before {
+    content: ">> ";
+  }
+
+  .md-typeset h4 {
+    font-size: 1.1rem;
+    margin: 1em 0;
+    font-weight: 700;
+    letter-spacing: -.01em;
+    line-height: 1em;
+    color: var(--md-default-fg-color--light);
+    font-style: italic;
+    text-transform: capitalize;
+  }
+
+  .md-typeset h5,
+  .md-typeset h6 {
+    font-size: 0.9rem;
+    margin: 1em 0;
+    /* font-weight: 700; */
+    letter-spacing: -.01em;
+    /* line-height: 2em; */
+    color: var(--md-default-fg-color--light);
+    font-style: italic;
+    text-transform: capitalize;
+    text-decoration: underline;
   }
 
   .md-typeset table:not([class]) th {
diff --git a/mkdocs.yml b/mkdocs.yml
index 78ac2421b..834c8ab1a 100644
--- a/mkdocs.yml
+++ b/mkdocs.yml
@@ -145,7 +145,7 @@ markdown_extensions:
       separator: "-"
       # permalink: "#"
       permalink: true
-      baselevel: 3
+      # baselevel: 3
   - pymdownx.highlight
   - pymdownx.snippets:
       base_path: