[DOC] Freshen up the homepage

doc/_static/css/custom.css

@@ -27,7 +27,7 @@
 }
 
 .card-body {
-    padding-left: 32px;
+    padding-left: 0px;
     padding-right: 32px;
 }
 
@@ -172,7 +172,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 {
@@ -233,17 +233,104 @@ div.sk-landing-footer {
 }
 
 /** Scikit-learn buttons ***************************/
-a.sk-btn-orange {
+/* a.sk-btn-orange {
     font-size: 1.1rem;
     font-weight: 500;
-    background-color: #f99f44;  /* sk-orange-tint-1 */
+    background-color: #f99f44;  // sk-orange-tint-1
     color: black !important;
+} */
+
+a.sk-btn-orange {
+    font-size: 1.1rem;
+    font-weight: 500;
+    background-color: #f99f44; /* Original sk-orange-tint-1 */
+    color: #ffffff; /* Changed to white for better contrast */
+    border: 2px solid #f99f44; /* Border to match background color */
+    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: #ffffff; /* Fill with white on hover */
+    color: #f99f44; /* Text color changes to match the original background color */
+    border: 2px solid #f99f44; /* Border remains the same on hover */
+}
+
+
+a.sk-btn-orange:hover {
+    background-color: #fbe1ca;  /* --sk-orange-tint-3 */
 }
 
+
+.container {
+    max-width: 80%; /* Restrict container width for better readability */
+}
+
+.feature-title {
+    color: #f99f44; /* Darker text color for the title */
+    font-weight: 600; /* Bold font for title */
+    margin-bottom: 10px; /* Spacing below title */
+}
+
+.feature-text {
+    color: #555; /* Lighter grey for the description text */
+    font-size: 1rem; /* Regular font size for text */
+    margin-bottom: 0; /* Remove default bottom margin */
+}
+
+
+
+.hero-description {
+    text-align: center;
+    font-size: 20px;
+    margin-bottom: 40px;
+}
+
+
+.thin-line {
+    width: 100%;
+    height: 0.5px; /* Adjust the thickness of the line */
+    background-color: #12134b; /* Change the color as needed */
+    border: none; /* Ensures no border is applied */
+    margin-top: 50px;
+    margin-bottom: 50px;
+}
+
+
+.contributors-list {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center; /* Centers the content horizontally */
+    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>