From 083d30e8e644eedf46cfbfa9e39f25705e37ade7 Mon Sep 17 00:00:00 2001
From: Sebastian Gsell <sebastian.gsell93@gmail.com>
Date: Fri, 5 Apr 2024 15:27:44 +0200
Subject: [PATCH] Fix dark mode logo on index page

---
 docs/source/_static/css/custom.css        | 145 ----------------
 docs/source/_static/css/custom_backup.css | 197 ++++++++++++++++++++++
 docs/source/index.md                      |  19 +--
 3 files changed, 199 insertions(+), 162 deletions(-)
 create mode 100644 docs/source/_static/css/custom_backup.css

diff --git a/docs/source/_static/css/custom.css b/docs/source/_static/css/custom.css
index c9fbe01b6..114517789 100644
--- a/docs/source/_static/css/custom.css
+++ b/docs/source/_static/css/custom.css
@@ -9,124 +9,6 @@ table {
   width: auto; /* Override fit-content which breaks Styler user guide ipynb */
 }
 
-/* Getting started index page */
-
-.intro-card .card-text {
-  margin: 20px 0px;
-}
-
-
-.card-title {
-  margin-top: 0.25rem;
-}
-
-div#index-container {
-  padding-bottom: 20px;
-}
-
-a#index-link {
-  color: #333;
-  text-decoration: none;
-}
-
-/* reference to user guide */
-.gs-torefguide {
-  align-items: center;
-  font-size: 0.9rem;
-}
-
-.gs-torefguide .badge {
-  background-color: #130654;
-  margin: 10px 10px 10px 0px;
-  padding: 5px;
-}
-
-.gs-torefguide a {
-  margin-left: 5px;
-  color: #130654;
-  border-bottom: 1px solid #FFCA00f3;
-  box-shadow: 0px -10px 0px #FFCA00f3 inset;
-}
-
-
-.gs-torefguide p {
-  margin-top: 1rem;
-}
-
-.gs-torefguide a:hover {
-  margin-left: 5px;
-  color: grey;
-  text-decoration: none;
-  border-bottom: 1px solid #b2ff80f3;
-  box-shadow: 0px -10px 0px #b2ff80f3 inset;
-}
-
-/* selecting constraints guide */
-.intro-card {
-  background: #fff;
-  border-radius: 0;
-  padding: 20px 5px 5px 0px;
-  margin: 10px 0px;
-  max-height: 85%;
-}
-
-
-.intro-card .card-text {
-  margin: 20px 0px;
-  /*min-height: 150px; */
-}
-
-.intro-card .card-img-top {
-  margin: 0px;
-}
-
-.install-block {
-  padding-bottom: 30px;
-}
-
-.install-card .card-header {
-  border: none;
-  background-color: white;
-  color: #150458;
-  font-size: 1.1rem;
-  font-weight: bold;
-  padding: 1rem 1rem 0rem 1rem;
-}
-
-.install-card .card-footer {
-  border: none;
-  background-color: white;
-}
-
-.install-card pre {
-  margin: 0 1em 1em 1em;
-}
-
-.custom-button {
-  background-color: #DCDCDC;
-  border: none;
-  color: #484848;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 0.9rem;
-  border-radius: 0.5rem;
-  max-width: 120px;
-  padding: 0.5rem 0rem;
-}
-
-.custom-button a {
-  color: #484848;
-}
-
-.custom-button p {
-  margin-top: 0;
-  margin-bottom: 0rem;
-  color: #484848;
-}
-
-
-
 /* Main index page overview cards */
 
 .intro-card {
@@ -168,30 +50,3 @@ a#index-link {
 .card, .card img {
   background-color: var(--pst-color-background);
 }
-
-
-
-/* reduce size of dropdown boxes and change color */
-
-/* Title text attributes */
-details.dropdown .summary-title {
-  font-weight: bold !important;
-  font-family: var(--pst-font-family-monospace) !important;
-}
-
-/* Space of box around the text */
-details.dropdown summary {
-  padding: 0.4rem !important;
-}
-
-/* Vertical spacing of arrow */
-details.dropdown .summary-up,
-details.dropdown .summary-down {
-  top: 0.5em !important;
-}
-
-/* Vertical space between dropdown boxes */
-.mb-3,
-.my-3 {
-  margin-bottom: 0.2rem !important;
-}
diff --git a/docs/source/_static/css/custom_backup.css b/docs/source/_static/css/custom_backup.css
new file mode 100644
index 000000000..c9fbe01b6
--- /dev/null
+++ b/docs/source/_static/css/custom_backup.css
@@ -0,0 +1,197 @@
+/* Override some aspects of the pydata-sphinx-theme */
+
+:root {
+  /* Use softer blue from bootstrap's default info color */
+  --pst-color-info: 23, 162, 184;
+}
+
+table {
+  width: auto; /* Override fit-content which breaks Styler user guide ipynb */
+}
+
+/* Getting started index page */
+
+.intro-card .card-text {
+  margin: 20px 0px;
+}
+
+
+.card-title {
+  margin-top: 0.25rem;
+}
+
+div#index-container {
+  padding-bottom: 20px;
+}
+
+a#index-link {
+  color: #333;
+  text-decoration: none;
+}
+
+/* reference to user guide */
+.gs-torefguide {
+  align-items: center;
+  font-size: 0.9rem;
+}
+
+.gs-torefguide .badge {
+  background-color: #130654;
+  margin: 10px 10px 10px 0px;
+  padding: 5px;
+}
+
+.gs-torefguide a {
+  margin-left: 5px;
+  color: #130654;
+  border-bottom: 1px solid #FFCA00f3;
+  box-shadow: 0px -10px 0px #FFCA00f3 inset;
+}
+
+
+.gs-torefguide p {
+  margin-top: 1rem;
+}
+
+.gs-torefguide a:hover {
+  margin-left: 5px;
+  color: grey;
+  text-decoration: none;
+  border-bottom: 1px solid #b2ff80f3;
+  box-shadow: 0px -10px 0px #b2ff80f3 inset;
+}
+
+/* selecting constraints guide */
+.intro-card {
+  background: #fff;
+  border-radius: 0;
+  padding: 20px 5px 5px 0px;
+  margin: 10px 0px;
+  max-height: 85%;
+}
+
+
+.intro-card .card-text {
+  margin: 20px 0px;
+  /*min-height: 150px; */
+}
+
+.intro-card .card-img-top {
+  margin: 0px;
+}
+
+.install-block {
+  padding-bottom: 30px;
+}
+
+.install-card .card-header {
+  border: none;
+  background-color: white;
+  color: #150458;
+  font-size: 1.1rem;
+  font-weight: bold;
+  padding: 1rem 1rem 0rem 1rem;
+}
+
+.install-card .card-footer {
+  border: none;
+  background-color: white;
+}
+
+.install-card pre {
+  margin: 0 1em 1em 1em;
+}
+
+.custom-button {
+  background-color: #DCDCDC;
+  border: none;
+  color: #484848;
+  text-align: center;
+  text-decoration: none;
+  display: inline-block;
+  font-size: 0.9rem;
+  border-radius: 0.5rem;
+  max-width: 120px;
+  padding: 0.5rem 0rem;
+}
+
+.custom-button a {
+  color: #484848;
+}
+
+.custom-button p {
+  margin-top: 0;
+  margin-bottom: 0rem;
+  color: #484848;
+}
+
+
+
+/* Main index page overview cards */
+
+.intro-card {
+  padding: 30px 10px 20px 10px;
+}
+
+.intro-card .sd-card-img-top {
+  margin: 10px;
+  height: 52px;
+  background: none !important;
+}
+
+.intro-card .sd-card-title {
+  color: var(--pst-color-primary);
+  font-size: var(--pst-font-size-h5);
+  padding: 1rem 0rem 0.5rem 0rem;
+}
+
+.intro-card .sd-card-footer {
+  border: none !important;
+}
+
+.intro-card .sd-card-footer p.sd-card-text {
+  max-width: 220px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.intro-card .sd-btn-secondary {
+  background-color: #6c757d !important;
+  border-color: #6c757d !important;
+}
+
+.intro-card .sd-btn-secondary:hover {
+  background-color: #5a6268 !important;
+  border-color: #545b62 !important;
+}
+
+.card, .card img {
+  background-color: var(--pst-color-background);
+}
+
+
+
+/* reduce size of dropdown boxes and change color */
+
+/* Title text attributes */
+details.dropdown .summary-title {
+  font-weight: bold !important;
+  font-family: var(--pst-font-family-monospace) !important;
+}
+
+/* Space of box around the text */
+details.dropdown summary {
+  padding: 0.4rem !important;
+}
+
+/* Vertical spacing of arrow */
+details.dropdown .summary-up,
+details.dropdown .summary-down {
+  top: 0.5em !important;
+}
+
+/* Vertical space between dropdown boxes */
+.mb-3,
+.my-3 {
+  margin-bottom: 0.2rem !important;
+}
diff --git a/docs/source/index.md b/docs/source/index.md
index f73ddf34a..22eaa1631 100644
--- a/docs/source/index.md
+++ b/docs/source/index.md
@@ -1,27 +1,12 @@
 ```{raw} html
-<style>
-    .logo.mainlogo img {
-        background-color: transparent; /* Ensure SVG has no background */
-        max-height: 100px; /* Adjust size as needed */
-    }
-</style>
-
-<!-- Light mode logo -->
-<div class="logo mainlogo only-light" style="text-align: center;">
-    <img src="_static/images/estimagic_logo.svg" alt="estimagic-logo" height="100" />
-</div>
+<img src="_static/images/estimagic_logo.svg" class="only-light center" style="display:block; margin-left:auto; margin-right:auto; width:300px; height:auto;"/>
 
-<!-- Dark mode logo -->
-<div class="logo mainlogo only-dark" style="text-align: center;">
-    <img src="_static/images/estimagic_logo_dark_mode.svg" alt="estimagic-logo" height="100" />
-</div>
+<img src="_static/images/estimagic_logo_dark_mode.svg" class="only-dark center" style="display:block; margin-left:auto; margin-right:auto; width:300px; height:auto;"/>
 ```
 
 <br>
 <br>
 
-## estimagic documentation
-
 `estimagic` is a Python package for nonlinear optimization with or without constraints.
 It is particularly suited to solve difficult nonlinear estimation problems. On top, it
 provides functionality to perform statistical inference on estimated parameters.