doc: Revamp the key concepts part (#1468)

Backported-from: main
Backported-to: 23.09

changes/1468.doc.md

@@ -0,0 +1 @@
+Refine and elaborate the Concepts section to reflect all the new features and concepts added in last 3 years

docs/_static/css/customTheme.css

@@ -1,9 +1,9 @@
 /* --Reset CSS Start-- */
-html, body, div, span, 
-h1, h2, h3, h4, h5, h6, 
-p, a, img, strong, 
-dl, dt, dd, ol, ul, li, 
-table, article, aside, canvas, 
+html, body, div, span,
+h1, h2, h3, h4, h5, h6,
+p, a, img, strong,
+dl, dt, dd, ol, ul, li,
+table, article, aside, canvas,
 footer, header, menu, nav, section, mark, code {
   margin: 0;
 	padding: 0;
@@ -70,7 +70,7 @@ ol, ul {
   -webkit-box-sizing: border-box !important;
   -moz-box-sizing: border-box !important;
   -ms-box-sizing: border-box !important;
-  box-sizing: border-box !important;  
+  box-sizing: border-box !important;
 }
 
 html {
@@ -466,7 +466,7 @@ input::placeholder {
     font-size: 1.4rem;
     padding: .8rem 1.2rem;
   }
-  
+
   input::placeholder {
     font-size: 1.4rem;
   }
@@ -3499,7 +3499,7 @@ input::placeholder {
     height: 9rem;
     border-bottom: 1px solid #000;
   }
-  
+
   #backend-ai-header a div {
     width: 18rem;
   }
@@ -5065,7 +5065,7 @@ hr {
   .breadcrumb-item a {
     font-size: 2.308rem;
   }
-  
+
   .breadcrumb-item:before, .breadcrumb-item:after {
     font-size: 2.308rem;
     padding: 0 .923rem 0 0;
@@ -5085,7 +5085,7 @@ hr {
   .breadcrumb-item a {
     font-size: 1.8rem;
   }
-  
+
   .breadcrumb-item:before, .breadcrumb-item:after {
     font-size: 1.8rem;
     padding: 0 1rem;
@@ -5674,7 +5674,7 @@ hr {
 .wy-nav-content {
   height: 100%;
   max-width: 1199px;
-  margin: auto
+  margin: auto;
 }
 
 .wy-body-mask {
@@ -5950,16 +5950,16 @@ img.search-icon {
   .customized-search-bar {
     margin-top: 3.072rem;
   }
-  
+
   .customized-search-bar input:first-child {
     padding-right: 5rem;
     height: 6.142rem;
   }
-  
+
   .customized-search-bar input:first-child::placeholder {
     font-size: 2.3rem;
   }
-  
+
   #search-icon-wrapper {
     position: absolute;
     width: 3.69rem;
@@ -5979,21 +5979,25 @@ img.search-icon {
     padding-top: 8rem;
   }
 
+  html {
+    scroll-padding-top: 10rem;
+  }
+
   .customized-search-bar {
     display: none;
     margin-top: 1.5rem;
   }
-  
+
   .customized-search-bar input:first-child {
     width: 29rem;
     padding-right: 3.5rem;
     height: 4rem;
   }
-  
+
   .customized-search-bar input:first-child::placeholder {
     font-size: 1.4rem;
   }
-  
+
   #search-icon-wrapper {
     position: absolute;
     width: 2.4rem;
@@ -6401,14 +6405,14 @@ div.rst-other-versions small a {
   .rst-content .admonition-title:before {
     font-size: 2.918rem;
     margin-right: 1.536rem;
-  } 
+  }
 }
 
 @media (min-width: 1200px) {
   .rst-content .admonition-title:before {
     font-size: 1.9rem;
     margin-right: 1rem;
-  } 
+  }
 }
 
 .rst-content .admonition.warning p {
@@ -6432,7 +6436,7 @@ div.rst-other-versions small a {
   .rst-content .admonition.warning .admonition-title:before {
     font-size: 1.9rem;
     margin-right: 1rem;
-  } 
+  }
 }
 
 .rst-content .admonition.danger .admonition-title:before {
@@ -6445,14 +6449,14 @@ div.rst-other-versions small a {
   .rst-content .admonition.danger .admonition-title:before {
     font-size: 2.918rem;
     margin-right: 1.536rem;
-  } 
+  }
 }
 
 @media (min-width: 1200px) {
   .rst-content .admonition.danger .admonition-title:before {
     font-size: 1.9rem;
     margin-right: 1rem;
-  } 
+  }
 }
 
 .rst-content .admonition.tip .admonition-title:before {
@@ -6465,14 +6469,14 @@ div.rst-other-versions small a {
   .rst-content .admonition.tip .admonition-title:before {
     font-size: 2.918rem;
     margin-right: 1.536rem;
-  } 
+  }
 }
 
 @media (min-width: 1200px) {
   .rst-content .admonition.tip .admonition-title:before {
     font-size: 1.9rem;
     margin-right: 1rem;
-  } 
+  }
 }
 
 .rst-content .admonition.hint .admonition-title:before {
@@ -7115,7 +7119,7 @@ tbody tr td .admonition.warning p, tbody tr td .admonition.note p {
   div.versionchanged, div.versionchanged p {
     font-size: 1.536rem;
   }
-  
+
   tbody tr td div.versionchanged .versionmodified, tbody tr td div.versionadded .versionmodified {
     font-size: 1.536rem;
   }
@@ -7269,7 +7273,7 @@ div.rst-footer-buttons a:last-child {
   div.rst-footer-buttons a:last-child {
     padding-right: 0;
     border-left: none;
-  }  
+  }
 }
 
 @media (min-width: 600px) {
@@ -7296,11 +7300,11 @@ div.rst-footer-buttons a:last-child {
 
   div.rst-footer-buttons a:last-child {
     padding-left: 8.063rem;
-  
+
     ::after {
       margin-left: 1.229rem;
     }
-  
+
   }
 }
 
@@ -7343,7 +7347,7 @@ div.rst-footer-buttons a:last-child {
 
   div.rst-footer-buttons a:first-child {
     padding-right: 0;
-  
+
     ::before {
       margin-right: .2rem;
     }
@@ -7491,8 +7495,8 @@ span.linenos { color: inherit; background-color: transparent; padding-left: 5px;
 td.linenos .special { color: #767676; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
 span.linenos.special { color: #767676; background-color: #ffffc0; padding-left: 5px; padding-right: 5px; }
 .highlight .hll { background-color: #ffffcc }
-.highlight { 
-  background: #1E1E1E; 
+.highlight {
+  background: #1E1E1E;
   color: #FFF;
 }
 .highlight .c { color: #8f5902; font-style: italic } /* Comment */

docs/_static/custom.css

@@ -107,3 +107,8 @@ code, .code, .pre, tt {
 .rst-content .descclassname {
     font-weight: normal !important;
 }
+
+.highlight .err {
+    border: 0 none;
+    color: inherit;
+}