From 3b1a3bf836927507715661e93376f159e06e49f5 Mon Sep 17 00:00:00 2001
From: Subhraneel Haldar <subhraneel777@chromium.org>
Date: Sun, 26 Dec 2021 14:31:18 +0530
Subject: [PATCH]  Space between title and subtopics( UI, UX) #62 added

Signed-off-by: Subhraneel Haldar <subhraneel777@chromium.org>
---
 docs/source/_static/theme_overrides.css | 124 +++++++++++++++++++-----
 docs/source/_templates/layout.html      |  13 +--
 2 files changed, 106 insertions(+), 31 deletions(-)

diff --git a/docs/source/_static/theme_overrides.css b/docs/source/_static/theme_overrides.css
index f889139a..7f51a57b 100644
--- a/docs/source/_static/theme_overrides.css
+++ b/docs/source/_static/theme_overrides.css
@@ -8,19 +8,34 @@ p {
     margin-bottom: 10px;
 }
 
+
 /* ul, ul.simple {
     margin-bottom: 10px;
 } */
 
-.wy-plain-list-disc, .rst-content .section ul, .rst-content .toctree-wrapper ul, article ul {
+.wy-plain-list-disc,
+.rst-content .section ul,
+.rst-content .toctree-wrapper ul,
+article ul {
     margin-bottom: 10px;
+    text-transform: uppercase;
+    font-weight: bold;
 }
 
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin-bottom: 10px;
 }
 
-h2, h3, h4, h5, h6 {
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin-top: 20px;
     margin-top: 30px;
 }
@@ -45,15 +60,18 @@ h6 {
     color: #009933;
     color: #661aff;
     /* color: #666699; */
-
     /* font-style: italic; */
     /* font-weight: normal; */
     margin-bottom: 10px;
 }
 
+
 /* custom admonitions */
+
+
 /* success */
-.custom-admonition-success  .admonition-title {
+
+.custom-admonition-success .admonition-title {
     color: #ffffff;
     color: #000000;
     background: #009900;
@@ -61,6 +79,7 @@ h6 {
     background: #ccffcc;
     border-radius: 5px 5px 0px 0px;
 }
+
 div.custom-admonition-success.admonition {
     color: #000000;
     background: #f5f5f5;
@@ -73,8 +92,10 @@ div.custom-admonition-success.admonition {
     margin: 20px 0px 30px 0px;
 }
 
+
 /* important */
-.custom-admonition-important  .admonition-title {
+
+.custom-admonition-important .admonition-title {
     color: #ffffff;
     color: #000000;
     background: #009900;
@@ -82,6 +103,7 @@ div.custom-admonition-success.admonition {
     background: #ccffcc;
     border-radius: 5px 5px 0px 0px;
 }
+
 div.custom-admonition-important.admonition {
     color: #000000;
     background: #f5f5f5;
@@ -94,8 +116,10 @@ div.custom-admonition-important.admonition {
     margin: 20px 0px 30px 0px;
 }
 
+
 /* caution */
-.custom-admonition-caution  .admonition-title {
+
+.custom-admonition-caution .admonition-title {
     color: #000000;
     background: #ffff66;
     background: #ffff99;
@@ -103,6 +127,7 @@ div.custom-admonition-important.admonition {
     border-radius: 5px 5px 0px 0px;
     border-bottom: solid 1px #e8e8e8;
 }
+
 div.custom-admonition-caution.admonition {
     color: #000000;
     background: #f5f5f5;
@@ -115,8 +140,10 @@ div.custom-admonition-caution.admonition {
     margin: 20px 0px 30px 0px;
 }
 
+
 /* note */
-.custom-admonition-note  .admonition-title {
+
+.custom-admonition-note .admonition-title {
     color: #ffffff;
     /* color: #000000; */
     background: #3399ff;
@@ -126,6 +153,7 @@ div.custom-admonition-caution.admonition {
     background: #2196f3;
     border-radius: 5px 5px 0px 0px;
 }
+
 div.custom-admonition-note.admonition {
     color: #000000;
     background: #f5f5f5;
@@ -140,8 +168,10 @@ div.custom-admonition-note.admonition {
     margin: 20px 0px 30px 0px;
 }
 
+
 /* todo */
-.custom-admonition-todo  .admonition-title {
+
+.custom-admonition-todo .admonition-title {
     color: #000000;
     color: #cc0000;
     background: #cce6ff;
@@ -158,6 +188,7 @@ div.custom-admonition-note.admonition {
     border-bottom: solid 1px #ffd9b3;
     border-bottom: solid 1px #d8d8d8;
 }
+
 div.custom-admonition-todo.admonition {
     color: #000000;
     background: #f5f5f5;
@@ -175,8 +206,10 @@ div.custom-admonition-todo.admonition {
     margin: 20px 0px 30px 0px;
 }
 
+
 /* examples */
-.custom-admonition-examples  .admonition-title {
+
+.custom-admonition-examples .admonition-title {
     color: #000000;
     /* color: #ffffff; */
     background: #f5f5f5;
@@ -186,6 +219,7 @@ div.custom-admonition-todo.admonition {
     border-radius: 5px 5px 0px 0px;
     border-bottom: solid 1px #d8d8d8;
 }
+
 div.custom-admonition-examples.admonition {
     color: #000000;
     background: #f5f5f5;
@@ -222,7 +256,6 @@ div.rst-content {
     /* border: 1px solid #e6f2ff; */
     /* border: 1px solid #fff3cd; */
     border: 1px solid #ccffff;
-
     /* background: #e7f2fa; */
     /* background: #e6ffff; */
     /* background: #ffff99; */
@@ -231,7 +264,6 @@ div.rst-content {
     /* background: #e6f2ff; */
     /* background: #fff3cd; */
     background: #ccffff;
-
     /* font-size: 80%; */
     font-size: 100%;
     /* font-size: 12px; */
@@ -244,12 +276,11 @@ div.rst-content {
     padding: 4px 6px;
     padding: 2px 0px;
     margin: auto 2px;
-
     vertical-align: middle;
 }
 
 .rst-content kbd {
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace;
     border: solid 1px #d8d8d8;
     background-color: #f5f5f5;
     padding: 0px 3px;
@@ -260,6 +291,7 @@ div.rst-content {
     color: #0066cc;
     text-decoration: none;
 }
+
 .wy-nav-content-wrap a:hover {
     color: #0099cc;
     text-decoration: underline;
@@ -269,10 +301,14 @@ div.rst-content {
     color: #ffffff;
 }
 
+
 /* Based on numerous similar approaches e.g., https://github.com/readthedocs/sphinx_rtd_theme/issues/117 and https://rackerlabs.github.io/docs-rackspace/tools/rtd-tables.html -- but remove form-factor limits to enable table wrap on full-size and smallest-size form factors */
+
 .wy-table-responsive table td {
     white-space: normal !important;
 }
+
+
 /* .wy-table-responsive {
     overflow: visible !important;
 } */
@@ -282,11 +318,13 @@ div.rst-content {
     padding: 5px;
     padding: 5px 10px 5px 10px;
 }
+
 .rst-content table.docutils td p,
 .rst-content table.docutils th p {
     font-size: 14px;
     margin-bottom: 0px;
 }
+
 .rst-content table.docutils td p cite,
 .rst-content table.docutils th p cite {
     font-size: 14px;
@@ -297,12 +335,15 @@ div.rst-content {
     /* border: solid 1px #e8e8e8 !important; */
     border: solid 1px #d8d8d8 !important;
 }
+
 .colwidths-given td {
     /* border: solid 1px #e8e8e8 !important; */
     border: solid 1px #d8d8d8 !important;
 }
 
+
 /*handles single-tick inline code*/
+
 .wy-body-for-nav cite {
     color: #000000;
     background-color: transparent;
@@ -313,8 +354,10 @@ div.rst-content {
     padding: 3px 3px 3px 3px;
 }
 
-.rst-content pre.literal-block, .rst-content div[class^="highlight"] pre, .rst-content .linenodiv pre {
-    font-family: SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",Courier,monospace;
+.rst-content pre.literal-block,
+.rst-content div[class^="highlight"] pre,
+.rst-content .linenodiv pre {
+    font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", Courier, monospace;
     font-size: 13px;
     /* line-height: 1.5; */
     overflow: visible;
@@ -322,7 +365,8 @@ div.rst-content {
     /* color: #e74c3c; */
 }
 
-.rst-content pre.literal-block, .rst-content div[class^='highlight'] {
+.rst-content pre.literal-block,
+.rst-content div[class^='highlight'] {
     border: 1px solid #e1e4e5;
     border: 0;
     background-color: #f6f8fa;
@@ -332,8 +376,12 @@ div.rst-content {
     border: solid 1px #e8e8e8;
 }
 
+
 /* This enables inline code to wrap. */
-code, .rst-content tt, .rst-content code {
+
+code,
+.rst-content tt,
+.rst-content code {
     white-space: pre-wrap;
     padding: 2px 3px 1px;
     border-radius: 3px;
@@ -341,12 +389,17 @@ code, .rst-content tt, .rst-content code {
     background-color: #f8f8f8;
 }
 
+
 /* use this added class for code blocks attached to bulleted list items */
+
 .highlight-top-margin {
     margin-top: 20px !important;
 }
 
+
 /* change color of inline code block */
+
+
 /* span.pre {
     color: #e74c3c;
     color: #e01e5a;
@@ -360,27 +413,47 @@ code, .rst-content tt, .rst-content code {
     color: #000000;
 }
 
+
 /* Fix the unwanted top and bottom padding inside a nested bulleted/numbered list */
-.rst-content .section ol p, .rst-content .section ul p {
+
+.rst-content .section ol p,
+.rst-content .section ul p {
     margin-bottom: 0px;
+    text-transform: uppercase;
+    font-weight: bold;
 }
 
+
 /* add spacing between bullets for legibility */
-.rst-content .section ol li, .rst-content .section ul li {
+
+.rst-content .section ol li,
+.rst-content .section ul li {
     margin-bottom: 5px;
+    text-transform: uppercase;
+    font-weight: bold;
 }
 
-.rst-content .section ol li:first-child, .rst-content .section ul li:first-child {
+.rst-content .section ol li:first-child,
+.rst-content .section ul li:first-child {
     margin-top: 5px;
+    text-transform: uppercase;
+    font-weight: bold;
 }
 
+
 /* but exclude the toctree bullets */
-.rst-content .toctree-wrapper ul li, .rst-content .toctree-wrapper ul li:first-child {
+
+.rst-content .toctree-wrapper ul li,
+.rst-content .toctree-wrapper ul li:first-child {
     margin-top: 0px;
     margin-bottom: 0px;
+    text-transform: uppercase;
+    font-weight: bold;
 }
 
+
 /* remove extra space at bottom of multine list-table cell */
+
 .rst-content .line-block {
     margin-left: 0px;
     margin-bottom: 24px;
@@ -388,9 +461,12 @@ code, .rst-content tt, .rst-content code {
     line-height: 24px;
 }
 
+
 /* === */
 
+
 /* this is used by the genindex added via layout.html (see source/_templates/) to sidebar toc */
+
 .reference.internal.toc-index {
     color: #d9d9d9;
 }
@@ -407,11 +483,13 @@ code, .rst-content tt, .rst-content code {
     padding-top: 10px;
 }
 
+
 /* The next 2 fix the poor vertical spacing in genindex.html (the alphabetized index) */
+
 .indextable.genindextable {
     margin-bottom: 20px;
 }
 
 div.genindex-jumpbox {
     margin-bottom: 20px;
-}
+}
\ No newline at end of file
diff --git a/docs/source/_templates/layout.html b/docs/source/_templates/layout.html
index c0ecc66e..4fa4c420 100644
--- a/docs/source/_templates/layout.html
+++ b/docs/source/_templates/layout.html
@@ -1,8 +1,5 @@
-{% extends "!layout.html" %}
-
-  {% block menu %}
-    {{ super() }}
-    <div class="toc-index-div">
-        <a href="{{pathto('genindex.html', 1)}}" class="reference internal toc-index">Index</a>
-    </div>
-  {% endblock %}
+{% extends "!layout.html" %} {% block menu %} {{ super() }}
+<div class="toc-index-div">
+    <a href="{{pathto('genindex.html', 1)}}" class="reference internal toc-index">IINDEX</a>
+</div>
+{% endblock %}
\ No newline at end of file