From 1c1af5155c4b4b6e6b2d3aa5bb1136be449722b9 Mon Sep 17 00:00:00 2001
From: Sebastian Gsell <sebastian.gsell93@gmail.com>
Date: Fri, 5 Apr 2024 12:38:04 +0200
Subject: [PATCH] Boxes in dark mode

---
 docs/source/_static/css/custom.css     | 162 ++++--------------
 docs/source/_static/css/custom_org.css | 220 +++++++++++++++++++++++++
 docs/source/index.md                   |   6 +-
 3 files changed, 256 insertions(+), 132 deletions(-)
 create mode 100644 docs/source/_static/css/custom_org.css

diff --git a/docs/source/_static/css/custom.css b/docs/source/_static/css/custom.css
index c1de14395..cd0276318 100644
--- a/docs/source/_static/css/custom.css
+++ b/docs/source/_static/css/custom.css
@@ -1,28 +1,14 @@
-/* Remove execution count for notebook cells. */
-div.prompt {
-  display: none;
-}
-
-/* Getting started index page */
-
-
-.intro-card .card-text {
-  margin: 20px 0px;
-}
-
+/* Override some aspects of the pydata-sphinx-theme */
 
-.card-title {
-  margin-top: 0.25rem;
+:root {
+  /* Use softer blue from bootstrap's default info color */
+  --pst-color-info: 23, 162, 184;
 }
 
-div#index-container {
-  padding-bottom: 20px;
+table {
+  width: auto; /* Override fit-content which breaks Styler user guide ipynb */
 }
 
-a#index-link {
-  color: #333;
-  text-decoration: none;
-}
 
 /* reference to user guide */
 .gs-torefguide {
@@ -43,6 +29,7 @@ a#index-link {
   box-shadow: 0px -10px 0px #FFCA00f3 inset;
 }
 
+
 .gs-torefguide p {
   margin-top: 1rem;
 }
@@ -66,121 +53,46 @@ a#index-link {
 
 
 
-.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;
-}
+/* Main index page overview cards */
 
-.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;
-}
-
-/* selecting constraints guide collapsed cards */
-
-.tutorial-accordion {
-  margin-top: 20px;
-  margin-bottom: 20px;
-}
-
-.tutorial-card .card-header.card-link .btn {
-  margin-right: 12px;
-}
-
-.tutorial-card .card-header.card-link .btn:after {
-  content: "-";
-}
-
-.tutorial-card .card-header.card-link.collapsed .btn:after {
-  content: "+";
-}
-
-.tutorial-card-header-1 {
-  justify-content: space-between;
-  align-items: center;
+.intro-card {
+  padding: 30px 10px 20px 10px;
 }
 
-.tutorial-card-header-2 {
-  justify-content: flex-start;
-  align-items: center;
-  font-size: 1.3rem;
+.intro-card .sd-card-img-top {
+  margin: 10px;
+  height: 52px;
+  background: none !important;
 }
 
-.tutorial-card .card-header {
-  cursor: pointer;
-  background-color: white;
+.intro-card .sd-card-title {
+  color: var(--pst-color-primary);
+  font-size: var(--pst-font-size-h5);
+  padding: 1rem 0rem 0.5rem 0rem;
 }
 
-.tutorial-card .card-body {
-  background-color: #F0F0F0;
+.intro-card .sd-card-footer {
+  border: none !important;
 }
 
-.tutorial-card .badge:hover {
-  background-color: grey;
+.intro-card .sd-card-footer p.sd-card-text {
+  max-width: 220px;
+  margin-left: auto;
+  margin-right: auto;
 }
 
-/* tables in selecting constraints guide */
-
-table.rows th {
-  background-color: #F0F0F0;
-  border-style: solid solid solid solid;
-  border-width: 0px 0px 0px 0px;
-  border-color: #F0F0F0;
-  text-align: center;
+.intro-card .sd-btn-secondary {
+  background-color: #6c757d !important;
+  border-color: #6c757d !important;
 }
 
-table.rows tr:nth-child(even) {
-  background-color: #F0F0F0;
-  text-align: right;
+.intro-card .sd-btn-secondary:hover {
+  background-color: #5a6268 !important;
+  border-color: #545b62 !important;
 }
 
-table.rows tr:nth-child(odd) {
-  background-color: #FFFFFF;
-  text-align: right;
+.card, .card img {
+  background-color: var(--pst-color-background);
 }
 
 
@@ -208,13 +120,3 @@ details.dropdown .summary-down {
 .my-3 {
   margin-bottom: 0.2rem !important;
 }
-
-/* Background color of dropdown boxes */
-.card {
-  background-color: white !important;
-}
-
-/* Color of inline code */
-:root {
-  --pst-color-inline-code: 160, 4, 4 !important;
-}
diff --git a/docs/source/_static/css/custom_org.css b/docs/source/_static/css/custom_org.css
new file mode 100644
index 000000000..c1de14395
--- /dev/null
+++ b/docs/source/_static/css/custom_org.css
@@ -0,0 +1,220 @@
+/* Remove execution count for notebook cells. */
+div.prompt {
+  display: none;
+}
+
+/* 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;
+}
+
+/* selecting constraints guide collapsed cards */
+
+.tutorial-accordion {
+  margin-top: 20px;
+  margin-bottom: 20px;
+}
+
+.tutorial-card .card-header.card-link .btn {
+  margin-right: 12px;
+}
+
+.tutorial-card .card-header.card-link .btn:after {
+  content: "-";
+}
+
+.tutorial-card .card-header.card-link.collapsed .btn:after {
+  content: "+";
+}
+
+.tutorial-card-header-1 {
+  justify-content: space-between;
+  align-items: center;
+}
+
+.tutorial-card-header-2 {
+  justify-content: flex-start;
+  align-items: center;
+  font-size: 1.3rem;
+}
+
+.tutorial-card .card-header {
+  cursor: pointer;
+  background-color: white;
+}
+
+.tutorial-card .card-body {
+  background-color: #F0F0F0;
+}
+
+.tutorial-card .badge:hover {
+  background-color: grey;
+}
+
+/* tables in selecting constraints guide */
+
+table.rows th {
+  background-color: #F0F0F0;
+  border-style: solid solid solid solid;
+  border-width: 0px 0px 0px 0px;
+  border-color: #F0F0F0;
+  text-align: center;
+}
+
+table.rows tr:nth-child(even) {
+  background-color: #F0F0F0;
+  text-align: right;
+}
+
+table.rows tr:nth-child(odd) {
+  background-color: #FFFFFF;
+  text-align: right;
+}
+
+
+/* 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;
+}
+
+/* Background color of dropdown boxes */
+.card {
+  background-color: white !important;
+}
+
+/* Color of inline code */
+:root {
+  --pst-color-inline-code: 160, 4, 4 !important;
+}
diff --git a/docs/source/index.md b/docs/source/index.md
index 90956b5e8..f73ddf34a 100644
--- a/docs/source/index.md
+++ b/docs/source/index.md
@@ -20,8 +20,10 @@
 <br>
 <br>
 
-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
+## 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.
 
 For a complete introduction to optimization in estimagic, check out the