updated homepage

doc/_static/custom.css

@@ -0,0 +1,216 @@
+/* Hero */
+
+
+#hero {
+  display: flex;
+  flex-direction: row;
+  min-height: min(calc(75vh), 1000px); /* Make hero fill up most of the page on load */
+}
+#hero-left {
+  max-width: 476px;
+  width: 40%;
+  margin: auto 0;
+}
+#hero-right {
+  min-width: 476px;
+  width: 60%;
+  margin: auto 0;
+}
+
+.homepage-button-container {
+  margin-bottom: 1rem;
+  display: flex;
+  flex-direction: column;
+}
+.homepage-button-container-row {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.homepage-button-container a {
+  transition: 0.1s;
+}
+.homepage-button {
+  min-width: 142px;
+  padding: 0.5em 2em;
+  border: 1px solid var(--pst-color-primary);
+  border-radius: 4px;
+  margin: 1em 0.5em 0.5em 0;
+}
+.primary-button {
+  background-color: var(--pst-color-primary);
+  color: var(--pst-color-background) !important;
+}
+.secondary-button {
+  background-color: var(--pst-color-background);
+  color: var(--pst-color-primary);
+}
+.homepage-button:hover {
+  text-decoration: none;
+  background-color: var(--pst-color-secondary);
+  color: var(--pst-color-background);
+  border: 1px solid var(--pst-color-secondary);
+}
+.homepage-button-link {
+  text-decoration: underline;
+}
+
+/* Key Features */
+#key-features .sd-card-body {
+  display: flex;
+}
+#key-features .sd-card img {
+  width: 140px;
+  height: 140px;
+}
+#key-features .sd-card-body .key-features-text {
+  min-width: 70%;
+  padding: 20px 10px;
+}
+
+/* Sponsors */
+#sponsors-and-institutional-partners p {
+  text-align: center;
+}
+#sponsors-and-institutional-partners img {
+  max-width: 200px;
+}
+
+/* Support ArviZ */
+#support-arviz .sd-col {
+  margin-bottom: 3rem;
+}
+#support-arviz p {
+  text-align: center;
+}
+.support-arviz-img-merch img {
+  height: 160px;
+}
+.support-arviz-img-donate img {
+  display: block;
+  width: 100%;
+  padding: 60px 40px 20px;
+}
+.support-arviz-img-donate-responsive img {
+  display: none;
+  margin: auto;
+  width: 80%;
+  min-width: 0px;
+  padding: 20px;
+}
+
+/* Responsive */
+@media (max-width: 768px) {
+  #hero {
+    display: block;
+  }
+  #hero-left,
+  #hero-right {
+    width: 100%;
+    min-width: 0px;
+  }
+  .support-arviz-img-donate img {
+    display: none;
+  }
+  .support-arviz-img-donate-responsive img {
+    display: block;
+  }
+}
+
+/* -------------------- HOMEPAGE + EXAMPLE GALLERY -------------------- */
+
+/* Homepage - grid layout */
+.home-flex-grid {
+  display: flex;
+  flex-flow: row wrap;
+  justify-content: center;
+  gap: 10px;
+  padding: 20px 0px 40px;
+}
+
+/* Homepage + Example Gallery Body - Set dimensions */
+.home-img-plot,
+.bd-content div.sd-card.example-gallery .sd-card-body,
+.home-img-plot-overlay,
+.example-img-plot-overlay {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  padding: 10px;
+}
+.home-img-plot,
+.home-img-plot-overlay {
+  width: 235px;
+  height: 130px;
+}
+.bd-content div.sd-card.example-gallery .sd-card-body,
+.example-img-plot-overlay {
+  width: 100%;
+  height: 150px;
+}
+.home-img-plot img,
+.bd-content div.sd-card.example-gallery .sd-card-body img {
+  /* Images keep aspect ratio and fit in container */
+  /* To make images stretch/fill container, change to min-width */
+  max-width: 100%;
+  max-height: 100%;
+}
+
+/* Homepage + Example Gallery Body - Set color and hover */
+.home-img-plot.img-thumbnail,
+.bd-content div.sd-card.example-gallery .sd-card-body {
+  background-color: var(--pst-color-plot-background);  /* Same as img-thumbnail from pydata css, adjusted for dark mode */
+}
+.home-img-plot-overlay,
+.example-img-plot-overlay,
+.bd-content div.sd-card.example-gallery .sd-card-body {
+  border: 1px solid #dee2e6;  /* Same as img-thumbnail from pydata css */
+  border-radius: 0.25rem;  /* Same as img-thumbnail from pydata css */
+}
+.home-img-plot-overlay,
+.example-img-plot-overlay,
+.example-img-plot-overlay p.sd-card-text {
+  background: var(--pst-color-primary);
+  position: absolute;
+  color: var(--pst-color-background);
+  opacity: 0;
+  transition: .2s ease;
+  text-align: center;
+  padding: 10px;
+  z-index: 998;  /* Make sure overlay is above image...this is here to handle dark mode */
+}
+.home-img-plot-overlay:hover,
+.bd-content div.sd-card.example-gallery:hover .example-img-plot-overlay,
+.example-img-plot-overlay p.sd-card-text {
+  opacity: 90%;
+}
+
+/* Example Gallery Body - Set syntax highlighting for code on hover */
+.example-img-plot-overlay .sd-card-text code.code {
+  background-color: var(--pst-color-background);
+}
+.example-img-plot-overlay .sd-card-text .code span.pre {
+  color: var(--pst-color-primary);
+  font-weight: 700;
+}
+
+/* Example Gallery Footer - Plot titles goes here */
+.example-gallery .sd-card-footer {
+  height: 40px;
+  padding: 5px;
+  border-top: none !important;
+}
+.example-gallery .sd-card-footer p.sd-card-text {
+  color: var(--pst-color-text-muted);
+  font-size: 1rem;  /* This is font size for plot titles (below the chart) */
+  font-weight: 700;
+}
+.sd-card.example-gallery:hover .sd-card-footer p.sd-card-text {
+  color: var(--pst-color-primary);  /* Change text color on hover over card */
+}
+
+/* Overlapping */
+.example-gallery a.sd-stretched-link.reference.external {
+  z-index: 999;  /* Countermeasure where z-index = 998 */
+}

doc/_static/theme_overrides.css

@@ -16,3 +16,10 @@
     }
 
 }
+
+html[data-theme="dark"] {
+    /* tobac primary colors: #A2C2E5, #4D80BE, F6D94F*/
+    --pst-color-primary: #4D80BE;
+    --pst-color-secondary: #F6D94F;
+}
+

doc/conf.py

@@ -20,13 +20,19 @@
     "sphinx.ext.napoleon",
     "nbsphinx",
     "sphinx_gallery.load_style",
+    "myst_parser",
+    "sphinx_design",
 ]
 
 
 html_theme = "pydata_sphinx_theme"
 
 html_static_path = ["_static"]
+html_css_files = ["custom.css", "theme_overrides.css"]
+
 exclude_patterns = ["_build", "Thumbs.db", ".DS_Store"]
+source_suffix = {".rst": "restructuredtext", ".md": "restructuredtext"}
+myst_enable_extensions = ["colon_fence"]
 
 
 html_theme_options = {
@@ -59,6 +65,7 @@
 # Include our custom CSS (currently for special table config)
 def setup(app):
     app.add_css_file("theme_overrides.css")
+    app.add_css_file("custom.css")
 
 
 # This should include all modules used in tobac. These are dummy imports,

doc/developer_guide/index.rst

@@ -1,3 +1,5 @@
+.. _Developer-Guide:
+
 ##############################
   Contributing
 ##############################