DOC: use the sphinx-panels extension for cards instead of raw html (pandas-dev#34065)

Author: jorisvandenbossche

doc/source/_static/css/getting_started.css

@@ -131,20 +131,30 @@ ul.task-bullet > li > p:first-child {
 
 /* Getting started index page */
 
-.intro-card {
+.comparison-card {
   background:#FFF;
   border-radius:0;
   padding: 30px 10px 10px 10px;
   margin: 10px 0px;
 }
 
-.intro-card .card-text {
-  margin:20px 0px;
-  /*min-height: 150px; */
+.comparison-card p.card-text {
+  margin: 0px;
 }
 
-.intro-card .card-img-top {
+.comparison-card .card-img-top {
   margin: 10px;
+  margin-bottom: 20px;
+  height: 72px;
+}
+
+.comparison-card-excel .card-img-top, .comparison-card-stata .card-img-top, .comparison-card-sas .card-img-top {
+  height: 52px;
+}
+
+.comparison-card .card-footer {
+  border: none;
+  background-color:white;
 }
 
 .install-block {
@@ -154,10 +164,13 @@ ul.task-bullet > li > p:first-child {
 .install-card .card-header {
   border: none;
   background-color:white;
+  padding: 1rem 1rem 0rem 1rem;
+}
+
+.install-card .card-header p.card-text {
   color: #150458;
   font-size: 1.1rem;
   font-weight: bold;
-  padding: 1rem 1rem 0rem 1rem;
 }
 
 .install-card .card-footer {

doc/source/_static/css/pandas.css

@@ -5,39 +5,40 @@
   --pst-color-info: 23, 162, 184;
 }
 
-/* Getting started index page */
+/* Main index page overview cards */
 
 .intro-card {
   background: #fff;
   border-radius: 0;
-  padding: 30px 10px 10px 10px;
+  padding: 30px 10px 20px 10px;
   margin: 10px 0px;
 }
 
-.intro-card .card-text {
-  margin: 20px 0px;
-  /*min-height: 150px; */
+.intro-card p.card-text {
+  margin: 0px;
 }
 
-.custom-button {
-  background-color: #dcdcdc;
+.intro-card .card-img-top {
+  margin: 10px;
+  height: 52px;
+}
+
+.intro-card .card-header {
   border: none;
-  color: #484848;
-  text-align: center;
-  text-decoration: none;
-  display: inline-block;
-  font-size: 0.9rem;
-  border-radius: 0.5rem;
-  max-width: 220px;
-  padding: 0.5rem 0rem;
+  background-color:white;
+  color: #150458 !important;
+  font-size: var(--pst-font-size-h5);
+  font-weight: bold;
+  padding: 2.5rem 0rem 0.5rem 0rem;
 }
 
-.custom-button a {
-  color: #484848;
+.intro-card .card-footer {
+  border: none;
+  background-color:white;
 }
 
-.custom-button p {
-  margin-top: 0;
-  margin-bottom: 0rem;
-  color: #484848;
+.intro-card .card-footer p.card-text{
+  max-width: 220px;
+  margin-left: auto;
+  margin-right: auto;
 }

doc/source/conf.py

@@ -65,6 +65,7 @@
     "sphinx.ext.ifconfig",
     "sphinx.ext.linkcode",
     "nbsphinx",
+    "sphinx_panels",
     "contributors",  # custom pandas extension
 ]
 
@@ -139,6 +140,10 @@
 # nbsphinx do not use requirejs (breaks bootstrap)
 nbsphinx_requirejs_path = ""
 
+# sphinx-panels shouldn't add bootstrap css since the pydata-sphinx-theme
+# already loads it
+panels_add_bootstrap_css = False
+
 # Add any paths that contain templates here, relative to this directory.
 templates_path = ["../_templates"]