Fix dark mode logo on index page

optimagic-dev · Apr 5, 2024 · 083d30e · 083d30e
1 parent 5d7d2f6
commit 083d30e
Show file tree

Hide file tree

Showing 3 changed files with 199 additions and 162 deletions.
diff --git 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
@@ -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
@@ -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.