changed documentation theme to pydata_sphinx_theme (#1242)

* changed documentation theme to pydata_sphinx_theme

* updated documentation layout

* Update docs/index.rst

Co-authored-by: Sanket Verma <[email protected]>

* Updated Acknowledgements section and added twitter icon

* Added client-side javascript redirects

* Add more redirects

* Minor tweaks and added acknowledgments.rst

* Added acknowledgments.html to redirect

* Add indices from the old main page

---------

Co-authored-by: Sanket Verma <[email protected]>
Co-authored-by: Josh Moore <[email protected]>

docs/_static/custom.css

@@ -1,36 +1,123 @@
-/* override text color */
-.wy-menu-vertical a {
- color: #000000;
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,400;0,700;0,900;1,400;1,700;1,900&family=Open+Sans:ital,wght@0,400;0,600;1,400;1,600&display=swap');
+
+.navbar-brand img {
+ height: 75px;
+}
+.navbar-brand {
+ height: 75px;
+}
+
+body {
+ font-family: 'Open Sans', sans-serif;
+}
+
+pre, code {
+ font-size: 100%;
+ line-height: 155%;
+}
+
+/* Style the active version button.
+
+- dev: orange
+- stable: green
+- old, PR: red
+
+Colors from:
+
+Wong, B. Points of view: Color blindness.
+Nat Methods 8, 441 (2011). https://doi.org/10.1038/nmeth.1618
+*/
+
+/* If the active version has the name "dev", style it orange */
+#version_switcher_button[data-active-version-name*="dev"] {
+ background-color: #E69F00;
+ border-color: #E69F00;
+ color:#000000;
+}
+
+/* green for `stable` */
+#version_switcher_button[data-active-version-name*="stable"] {
+ background-color: #009E73;
+ border-color: #009E73;
+}
+
+/* red for `old` */
+#version_switcher_button:not([data-active-version-name*="stable"], [data-active-version-name*="dev"], [data-active-version-name=""]) {
+ background-color: #980F0F;
+ border-color: #980F0F;
 }
 
-/* Sidebar background color */
-.wy-nav-side, div.wy-side-nav-search {
- background-color: rgb(198, 197, 213, 0); /* full alpha */
+/* Main page overview cards */
+
+.sd-card {
+ background: #fff;
+ border-radius: 0;
+ padding: 30px 10px 20px 10px;
+ margin: 10px 0px;
+}
+
+.sd-card .sd-card-header {
+ text-align: center;
+}
+
+.sd-card .sd-card-header .sd-card-text {
+ margin: 0px;
+}
+
+.sd-card .sd-card-img-top {
+ height: 52px;
+ width: 52px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+.sd-card .sd-card-header {
+ border: none;
+ background-color: white;
+ color: #150458 !important;
+ font-size: var(--pst-font-size-h5);
+ font-weight: bold;
+ padding: 2.5rem 0rem 0.5rem 0rem;
+}
+
+.sd-card .sd-card-footer {
+ border: none;
+ background-color: white;
+}
+
+.sd-card .sd-card-footer .sd-card-text {
+ max-width: 220px;
+ margin-left: auto;
+ margin-right: auto;
+}
+
+/* Dark theme tweaking */
+html[data-theme=dark] .sd-card img[src*='.svg'] {
+ filter: invert(0.82) brightness(0.8) contrast(1.2);
 }
 
-/* Sidebar link click color */
-.wy-menu-vertical .toctree-l1 > a:active {
- background-color: rgb(198, 197, 213);
- color: rgb(0, 0, 0);
+/* Main index page overview cards */
+html[data-theme=dark] .sd-card {
+ background-color:var(--pst-color-background);
 }
 
-/* Link color is darker to make hovering more clear */
-.wy-menu-vertical .toctree-l1 > a:hover {
- background-color: rgb(198, 197, 213);
- color: rgb(0, 0, 0);
+html[data-theme=dark] .sd-shadow-sm {
+ box-shadow: 0 .1rem 1rem rgba(250, 250, 250, .6) !important
 }
 
-.wy-menu-vertical li.current > a:hover, .wy-menu-vertical li.current > a:active {
- color: #404040;
- background-color: #F5F5F5;
+html[data-theme=dark] .sd-card .sd-card-header {
+ background-color:var(--pst-color-background);
+ color: #150458 !important;
 }
 
-/* On hover over logo */
-.wy-side-nav-search > a:hover, .wy-side-nav-search .wy-dropdown > a:hover {
- background: inherit;
+html[data-theme=dark] .sd-card .sd-card-footer {
+ background-color:var(--pst-color-background);
 }
 
-/* Border around search box */
-.wy-side-nav-search input[type="text"] {
- border: 0px;
+html[data-theme=dark] h1 {
+ color: var(--pst-color-primary);
 }
+
+html[data-theme=dark] h3 {
+ color: #0a6774;
+}

docs/_static/custom.js

@@ -0,0 +1,18 @@
+// handle redirects
+(() => {
+ let anchorMap = {
+ "installation": "installation.html",
+ "getting-started": "getting_started.html#getting-started",
+ "highlights": "getting_started.html#highlights",
+ "contributing": "contributing.html",
+ "projects-using-zarr": "getting_started.html#projects-using-zarr",
+ "acknowledgments": "acknowledgments.html",
+ "contents": "getting_started.html#contents",
+ "indices-and-tables": "api.html#indices-and-tables"
+ }
+
+ let hash = window.location.hash.substring(1);
+ if (hash) {
+ window.location.replace(anchorMap[hash]);
+ }
+})();