[DOC] Freshen up the homepage

doc/_static/css/custom.css

@@ -27,8 +27,8 @@
 }
 
 .card-body {
-    padding-left: 32px;
-    padding-right: 32px;
+    padding-left: 0px;
+    padding-right: 0px;
 }
 
 .card-title {
@@ -171,8 +171,7 @@ div.sk-landing-bg-more-info dd {
 
 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%);
-    margin-top: -18px !important;
-    margin-bottom: 45px;
+    margin-bottom: 0px;
 }
 
 div.sk-landing-bg-more-info {
@@ -214,8 +213,8 @@ div.sk-landing-footer {
     }
 
     div.card-landing {
-	margin-left: 5%;
-	margin-right: 5%;
+	margin-left: 0%;
+	margin-right: 0%;
     }
     div.bd-sidebar-primary {
 	margin-right: 5%;
@@ -233,17 +232,101 @@ div.sk-landing-footer {
 }
 
 /** Scikit-learn buttons ***************************/
+
 a.sk-btn-orange {
     font-size: 1.1rem;
     font-weight: 500;
-    background-color: #f99f44;  /* sk-orange-tint-1 */
-    color: black !important;
+    background-color: #DA7007; /* Original sk-orange-tint-1 */
+    color: #ffffff; /* 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: #fcb575;  /* --sk-orange-tint-3 */
+    background-color: #fbe1ca; /* Fill with white on hover */
+    color: #DA7007; /* Text color changes to match the original background color */
+    border: 2px solid #DA7007; /* Border remains the same on hover */
+}
+
+.container {
+    max-width: 150ch;
+}
+
+.feature-title {
+    color: #DA7007; /* Darker text color for the title */
+    font-weight: 600; /* Bold font for title */
+    margin-bottom: 10px; /* Spacing below title */
+    margin-top: 0px;
+}
+
+.feature-text {
+    font-size: 1rem; /* Regular font size for text */
+    margin-bottom: 0; /* Remove default bottom margin */
 }
 
+
+.hero-description {
+    text-align: left;
+    font-size: 1.25rem;
+    margin-bottom: 10px;
+}
+
+.click-table-report-hint {
+    color: #da4607;
+    font-size: 1.25rem;
+}
+
+
+.thin-line {
+    width: 100%;
+    height: 1px; /* Adjust the thickness of the line */
+    background-color: #12134b; /* Change the color as needed */
+    border: none; /* Ensures no border is applied */
+    margin-top: 20px;
+    margin-bottom: 20px;
+}
+
+@media (min-width: 768px) {
+    .thin-line {
+        margin-top: 50px;
+        margin-bottom: 50px;
+    }
+}
+
+.contributors-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 30px; /* Adds space between contributors */
+}
+.contributor {
+    text-align: center;
+}
+.contributor img {
+    border-radius: 50%;
+    width: 80px;
+    height: 80px;
+}
+.contributor-name {
+    margin-top: 10px;
+    font-size: 14px;
+    font-weight: bold;
+}
+
+.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;
+}
+
+
 /* Download/laucher links and top hint (sphinx-gallery) */
 
 .sphx-glr-download-link-note,

doc/_templates/demo_gap_encoder.html

@@ -0,0 +1,9 @@
+<div class="doctest highlight-default notranslate">
+
+    <div class="highlight hl-ipython3">
+<pre><span></span><span class="kn">from</span> <span class="nn">skrub</span> <span class="kn">import</span> <span class="n">GapEncoder</span>
+<span class="n">gap</span> <span class="o">=</span> <span class="n">GapEncoder</span><span class="p">()</span><span class="o">.</span><span class="n">fit</span><span class="p">(</span><span class="n">X</span><span class="p">[</span><span class="s2">"employee_position_title"</span><span class="p">])</span>
+<span class="n">encoded_labels</span> <span class="o">=</span> <span class="n">gap</span><span class="o">.</span><span class="n">transform</span><span class="p">(</span><span class="n">X</span><span class="p">[</span><span class="s2">"employee_position_title"</span><span class="p">]</span><span class="o">.</span><span class="n">head</span><span class="p">())</span>
+<span class="n">plt</span><span class="o">.</span><span class="n">imshow</span><span class="p">(</span><span class="n">encoded_labels</span><span class="p">)</span></pre>
+    </div>
+  </div>

doc/_templates/demo_table_report_code.html

@@ -0,0 +1,7 @@
+<div class="doctest highlight-default notranslate">
+
+    <div class="highlight hl-ipython3">
+<pre><span></span><span class="kn">from</span> <span class="nn">skrub</span> <span class="kn">import</span> <span class="n">TableReport</span>
+<span class="n">TableReport</span><span class="p">(df)</pre>
+    </div>
+</div>

doc/_templates/demo_tabular_learner.html

@@ -0,0 +1,118 @@
+<div class="container-fluid" style="max-width: 58rem;">
+    <div class="sd-card card-landing">
+      <div class="card-body">
+        <details>
+          <summary>Given, a complex dataframe
+            <code class="docutils literal notranslate"><span
+class="pre">df</span></code>: <i>(expand for full code)</i></summary>
+      <div class="doctest highlight-default notranslate">
+        <div class="highlight">
+<pre style="overflow-x: auto;">
+<span class="kn">from</span> <span class="nn">skrub.datasets</span> <span class="kn">import</span> <span class="n">fetch_employee_salaries</span>
+<span class="n">dataset</span> <span class="o">=</span> <span class="n">fetch_employee_salaries</span><span class="p">()</span>
+<span class="n">df</span> <span class="o">=</span> <span class="n">dataset</span><span class="o">.</span><span class="n">X</span>
+<span class="n">y</span> <span class="o">=</span> <span class="n">dataset</span><span class="o">.</span><span class="n">y</span>
+<span class="n">df</span></pre>
+        </div>
+      </div>
+    </details>
+<div class="output_subarea output_html rendered_html output_result">
+<div>
+<style scoped="">
+    .dataframe tbody tr th:only-of-type {
+        vertical-align: middle;
+    }
+
+    .dataframe tbody tr th {
+        vertical-align: top;
+    }
+
+    .dataframe thead th {
+        text-align: right;
+    }
+</style>
+<table border="1" class="dataframe">
+  <thead>
+    <tr style="text-align: right;">
+      <th></th>
+      <th>gender</th>
+      <th>department</th>
+      <th>department_name</th>
+      <th>division</th>
+      <th>assignment_category</th>
+      <th>employee_position_title</th>
+      <th>date_first_hired</th>
+      <th>year_first_hired</th>
+    </tr>
+  </thead>
+  <tbody>
+    <tr>
+      <th>0</th>
+      <td>F</td>
+      <td>POL</td>
+      <td>Department of Police</td>
+      <td>MSB Information Mgmt and...</td>
+      <td>Fulltime-Regular</td>
+      <td>Office Services Coordinator</td>
+      <td>09/22/1986</td>
+      <td>1986</td>
+    </tr>
+    <tr>
+      <th>1</th>
+      <td>M</td>
+      <td>POL</td>
+      <td>Department of Police</td>
+      <td>ISB Major Crimes...</td>
+      <td>Fulltime-Regular</td>
+      <td>Master Police Officer</td>
+      <td>09/12/1988</td>
+      <td>1988</td>
+    </tr>
+    <tr>
+      <th>...</th>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+      <td>...</td>
+    </tr>
+    <tr>
+      <th>9226</th>
+      <td>M</td>
+      <td>CCL</td>
+      <td>County Council</td>
+      <td>Council Central Staff</td>
+      <td>Fulltime-Regular</td>
+      <td>Manager II</td>
+      <td>09/05/2006</td>
+      <td>2006</td>
+    </tr>
+    <tr>
+      <th>9227</th>
+      <td>M</td>
+      <td>DLC</td>
+      <td>Department of Liquor Control</td>
+      <td>Licensure, Regulation...</td>
+      <td>Fulltime-Regular</td>
+      <td>Alcohol/Tobacco Enforcement Specialist II</td>
+      <td>01/30/2012</td>
+      <td>2012</td>
+    </tr>
+  </tbody>
+</table>
+</div>
+</div>
+      <div class="doctest highlight-default notranslate">
+        <div class="highlight">
+<pre style="overflow-x: auto;"><span class="kn">from</span> <span class="nn">sklearn.model_selection</span> <span class="kn">import</span> <span class="n">cross_val_score</span>
+<span class="kn">from</span> <span class="nn">skrub</span> <span class="kn">import</span> <span class="n">tabular_learner</span>
+<span class="n">cross_val_score</span><span class="p">(</span><span class="n">tabular_learner</span><span class="p">(</span><span class="s1">&#39;regressor&#39;</span><span class="p">),</span> </span><span class="n">df</span><span class="p">,</span> <span class="n">y</span><span class="p">)</span></pre>
+        </div>
+      </div>
+<pre><span class="sx">array([0.89370447, 0.89279068, 0.92282557, 0.92319094, 0.92162666])</span></pre>
+    </div>
+  </div>
+</div>