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 <svsanketverma5@gmail.com>

* 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 <svsanketverma5@gmail.com>
Co-authored-by: Josh Moore <josh@openmicroscopy.org>

Author: 3 people

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]);
+    }
+})();