docs(skore): Rework landing page to show takeaway messages (#2281)

closes #1763

Reworking the `skore` landing page to be close to the `skrub` page with
small blocks emphasizing the major features with small pieces of visual
code and output as well.

It is a first approximation that can be further improved by for example
using more of a `skore` style. But as a quick win, I think it will be
nice.

Author: glemaitre

skore/src/skore/_sklearn/_cross_validation/report.py

@@ -143,6 +143,7 @@ class CrossValidationReport(_BaseReport, DirNamesMixin):
     """
 
     _ACCESSOR_CONFIG: dict[str, dict[str, str]] = {
+        "data": {"name": "data"},
         "metrics": {"name": "metrics"},
         "feature_importance": {"name": "feature_importance"},
     }

skore/src/skore/_sklearn/_estimator/report.py

@@ -101,9 +101,9 @@ class EstimatorReport(_BaseReport, DirNamesMixin):
     """
 
     _ACCESSOR_CONFIG: dict[str, dict[str, str]] = {
+        "data": {"name": "data"},
         "metrics": {"name": "metrics"},
         "feature_importance": {"name": "feature_importance"},
-        "data": {"name": "data"},
     }
 
     metrics: _MetricsAccessor

sphinx/_static/css/custom.css

@@ -42,6 +42,50 @@ div.docutils.container.index-box {
   }
 }
 
+.card-body {
+  padding-left: 0px;
+  padding-right: 0px;
+}
+
+.card-body p {
+  text-align: left;
+}
+
+.sd-card  {
+  border: 0px;
+  margin-block-end: 1.0rem;
+}
+
+div.card-body div.output_result {
+  overflow-x: auto;
+}
+
+div.card-body details {
+border-radius: 4px;
+}
+
+div.card-body summary i {
+  color: var(--pst-color-on-surface);
+  margin-left: 4em;
+}
+
+div.card-body summary {
+  margin: 0.5em;
+  padding-left: 0.5em;
+}
+
+div.card-body summary:hover {
+background-color: var(--pst-color-border-muted);
+}
+
+div.card-body details[open] summary {
+margin-bottom: -0.5em;
+}
+
+div.card-body details[open] summary i {
+  display: none;
+}
+
 /* Download/laucher links and top hint (sphinx-gallery) */
 
 .sphx-glr-download-link-note,
@@ -88,7 +132,7 @@ div.docutils.container.index-box {
 }
 
 .hero-title {
-  color: #f68d2e;
+  color: #DA7007; /* Darker text color for the title */
   font-family: var(--pst-font-family-heading);
   font-size: 2.5rem;
   margin-bottom: 2rem;
@@ -108,6 +152,74 @@ div.docutils.container.index-box {
   padding-bottom: 2.5rem !important;
 }
 
+.row-padding-between-features {
+  padding-bottom: 2rem !important;
+  padding-top: 2rem !important;
+  border-top: #aaa solid 3px;
+  border-image: linear-gradient(to right, var(--pst-color-background) 0%, #4085a7 50%, var(--pst-color-background) 100%) 1;
+}
+
+.feature-title {
+  color: #DA7007; /* Darker text color for the title */
+  font-family: var(--pst-font-family-heading);
+  font-size: 2rem;
+  margin-bottom: 1.25rem; /* Spacing below title */
+  margin-top: 0px;
+}
+
+.feature-text {
+  font-family: var(--pst-font-family-base);
+  font-size: 1.05rem; /* Regular font size for text */
+  margin-bottom: 0; /* Remove default bottom margin */
+}
+
+.code-margin {
+  margin-top: 0.75em !important;
+  margin-bottom: 0.75em !important;
+}
+
+.prediction-error-image {
+  margin-bottom: 2rem;
+  margin-left: auto;
+  margin-right: auto;
+  width: 80%;
+  aspect-ratio: 1.2;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+html[data-theme="light"] .prediction-error-image {
+  background-image: url('../images/plot_prediction_error_light.png');
+}
+
+html[data-theme="dark"] .prediction-error-image {
+  background-image: url('../images/plot_prediction_error_dark.png');
+}
+
+.project-summary-image {
+  margin-left: auto;
+  margin-right: auto;
+  width: 100%;
+  aspect-ratio: 1.2;
+  background-size: contain;
+  background-repeat: no-repeat;
+  background-position: center;
+}
+
+html[data-theme="light"] .project-summary-image {
+  background-image: url('../images/project_summary_light.png');
+}
+
+html[data-theme="dark"] .project-summary-image {
+  background-image: url('../images/project_summary_dark.png');
+}
+
+.row-padding-main-container {
+  padding-top: 1.5rem !important;
+  padding-bottom: 2.5rem !important;
+}
+
 /* Change the colors to the orange and blue of skore */
 html[data-theme="dark"] {
   --pst-color-primary: #f89a36;
@@ -124,3 +236,182 @@ html[data-theme="light"] {
   --pst-color-secondary: #297ba6;
   --pst-color-inline-code-links: var(--pst-color-primary);
 }
+
+/** Styling **************************************************************/
+
+/* Make the footer a bit less visible */
+.bd-footer {
+  border-top: 1px solid var(--pst-color-on-surface);
+  opacity: .7;
+}
+
+.bd-footer p {
+  color: var(--pst-color-text-muted);
+}
+
+.bd-footer a {
+  color: var(--pst-color-info-highlight);
+}
+
+/** Adapt bootstrap colors ************************/
+:root {
+  /* Change colors on bootstrap elements to use the theme's colors */
+  --bs-nav-pills-link-active-bg: var(--pst-color-primary);
+  --bs-nav-link-color:  var(--pst-color-primary);
+  --bs-nav-link-hover-color: var(--pst-color-link-hover);
+}
+
+.nav-pills .nav-link.active, .nav-pills .show>.nav-link {
+  background-color:var(--pst-color-primary);
+}
+
+.nav-link {
+  color:var(--pst-color-primary);
+}
+
+.nav-link:focus, .nav-link:hover {
+color: var(--pst-color-link-hover);
+}
+
+/** Landing header *******************************/
+
+header > .bd-page-width {
+  max-width: 1200px;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+div.sk-landing-container {
+  margin-top: 0.5rem;
+  margin-bottom: 0.5rem;
+  max-width: 1200px;
+}
+
+div.sk-landing-container .text-white {
+  text-shadow: 0px 0px 8px rgb(42, 98, 128);
+}
+
+div.sk-landing-container a,
+div.sk-landing-container a:hover,
+div.sk-landing-container a:visited,
+div.sk-landing-container a:visited:hover,
+div.sk-landing-container a > code,
+div.sk-landing-container a:hover > code,
+div.sk-landing-container a:visited > code,
+div.sk-landing-container a:visited:hover > code {
+  color: #DA7007;
+}
+
+div.sk-landing-container code {
+  font-weight: normal !important;
+}
+
+ul.sk-landing-header-body {
+  margin-top: auto;
+  margin-bottom: auto;
+  font-family: var(--pst-font-family-base);
+  font-size: 1.2rem;
+  font-weight: 500;
+  color: black;
+}
+
+div.sk-landing-bg {
+  background-image: linear-gradient(160deg, rgba(0,48,70,.75) 0%, rgba(0,118,179,.75) 17%, rgba(255,239,193,.75) 59%, rgba(255,149,40,.75) 100%);
+}
+
+.sk-landing-header {
+  font-size: 3.2rem;
+}
+
+@media (max-width: 768px) {
+  .sk-landing-header {
+      margin-top: 1.5rem;
+      margin-bottom: 1.5rem;
+      text-align: center;
+  }
+
+  .sk-landing-container .col-md-4 {
+      display: flex;
+      justify-content: center;
+  }
+}
+
+/** Scikit-learn buttons ***************************/
+
+a.sk-btn-orange {
+  font-size: 1.1rem;
+  font-weight: 500;
+  background-color: #DA7007; /* Original sk-orange-tint-1 */
+  color: #ffffff !important; /* Changed to white for better contrast */
+  border: 2px solid #DA7007; /* Border to match background color, previous: f99f44 */
+  padding: 10px 20px; /* Added padding for better button size */
+  border-radius: 5px; /* Rounded corners for a modern look */
+  text-decoration: none; /* Remove underline */
+  transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */
+}
+
+a.sk-btn-orange:hover {
+  background-color: #fbe1ca; /* Fill with white on hover */
+  color: #DA7007 !important; /* Text color changes to match the original background color */
+  border: 2px solid #DA7007; /* Border remains the same on hover */
+}
+
+/** Contributors ***************************/
+
+.contributors-list {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 2rem;
+  justify-content: center;
+}
+
+.contributor {
+  text-align: center;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.contributor img {
+  border-radius: 50%;
+  width: 80px;
+  height: 80px;
+}
+
+.contributor-name {
+  margin-top: 0.5rem;
+  font-size: 0.6rem;
+}
+
+.more-contributors {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100px;
+}
+
+.more-contributors a,
+.more-contributors a:visited {
+  font-size: 1rem;
+  transition: color 0.3s ease;
+  font-weight: normal;
+}
+
+.more-contributors a:hover,
+.more-contributors a:visited:hover {
+  font-weight: bold;
+}
+
+
+/** Footer ***************************/
+
+.home-footer {
+  background-color: #12134b; /* Black background color */
+  color: #fff; /* White text color */
+  text-align: center;
+  padding: 10px 0; /* Padding for the footer */
+  position: relative;
+  width: 100%;
+  bottom: 0; /* Sticks footer to the bottom */
+  margin-top: 50px;
+}