Updated doc styles

harisankar95 · Feb 12, 2024 · 14c3015 · 14c3015
1 parent 3238696
commit 14c3015
Show file tree

Hide file tree

Showing 2 changed files with 64 additions and 29 deletions.
diff --git a/docs/USAGE.md b/docs/USAGE.md
@@ -579,6 +579,7 @@ Let's cut to the chase and see how it works:
     ```
 
     This will open a new tab in your browser with the following visualization:
+
     <style>
         iframe {
             width: 100%;
@@ -588,8 +589,9 @@ Let's cut to the chase and see how it works:
             border-radius: 15px;
             box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
             opacity: 0.9;
-            margin: 20px;
+            margin: 20px auto;
             padding: 10px;
+            display: block;
         }
     </style>
     <iframe src="theta_star.html"></iframe>

diff --git a/docs/_static/custom.css b/docs/_static/custom.css
@@ -4,74 +4,107 @@
 :root {
     --main-bg-color: #B6C8DB;
     --link-color: #6DB59F;
+    --font-family-headers: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
+    --font-family-body: "Open Sans", "Helvetica Neue", Arial, sans-serif;
 }
 
-/* Header fonts y */
+/* Header fonts */
 h1,
 h2,
-.rst-content .toctree-wrapper p.caption,
 h3,
 h4,
 h5,
 h6,
+.rst-content .toctree-wrapper p.caption,
 legend,
 p.caption {
-    font-family: "Lato", "proxima-nova", "Helvetica Neue", Arial, sans-serif;
+    font-weight: bold;
+    font-family: var(--font-family-headers);
 }
 
-
-/* Docs background */
-.wy-side-nav-search {
-    background-color: var(--main-bg-color);
+/* Body text */
+body {
+    font-family: var(--font-family-body);
+    line-height: 1.6;
 }
 
-/* Mobile version */
+/* Docs background */
+.wy-side-nav-search,
 .wy-nav-top {
     background-color: var(--main-bg-color);
 }
 
-/* Change link colors (except for the menu) */
-a {
-    color: var(--link-color);
-}
-
-a:hover {
-    color: #798EA9;
-}
 
-.wy-menu a {
-    color: #b3b3b3;
+/* Link colors */
+a {
+    color: #5CA982;
 }
 
+a:hover,
 .wy-menu a:hover {
-    color: #b3b3b3;
+    color: #507C6A;
 }
 
+.wy-menu a,
 a.icon.icon-home {
-    color: #b3b3b3;
+    color: var(--link-color);
 }
 
 .version {
     color: var(--link-color) !important;
 }
 
 
-/* Make code blocks have a background */
+.wy-menu a:hover {
+    text-decoration: underline;
+    /* Adding underline on hover for better visibility */
+}
+
+
+/* Code blocks */
 .codeblock,
 pre.literal-block,
 .rst-content .literal-block,
 .rst-content pre.literal-block,
 div[class^='highlight'] {
-    background: #FFFFFF;
-    ;
+    background: #F0F0F0;
+    border-left: 3px solid var(--link-color);
+    padding: 0.5em;
 }
 
-/* Change style of types in the docstrings .rst-content .field-list */
+/* Docstrings */
 .field-list .xref.py.docutils,
 .field-list code.docutils,
 .field-list .docutils.literal.notranslate {
-    border: None;
-    padding-left: 0;
-    padding-right: 0;
-    color: #404040;
+    background-color: #E9F5F5;
+    border-radius: 5px;
+    padding: 2px 4px;
+    color: #333333;
+}
+
+
+@media (max-width: 768px) {
+    .wy-side-nav-search {
+        display: block;
+        position: fixed;
+        left: 0;
+        top: 0;
+        height: 100%;
+        width: 250px;
+        overflow-y: auto;
+        z-index: 1000;
+        background-color: var(--main-bg-color);
+    }
+
+    .rst-content {
+        margin-left: 250px;
+    }
+
+    .sidebar-toggle {
+        display: block;
+        position: fixed;
+        top: 15px;
+        left: calc(100% - 60px);
+        z-index: 1010;
+    }
 }