Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[DOC] Freshen up the homepage #1062

Merged
merged 19 commits into from
Sep 12, 2024
Merged

[DOC] Freshen up the homepage #1062

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
19 commits
Select commit Hold shift + click to select a range
33547df
first version of the new homepage
Vincent-Maladiere Sep 5, 2024
122135b
enhance feature engineering wording
Vincent-Maladiere Sep 5, 2024
4b18a9b
fix footer
Vincent-Maladiere Sep 6, 2024
65ea45e
split the index.html file into demo html files
Vincent-Maladiere Sep 6, 2024
466783d
remove unused style class
Vincent-Maladiere Sep 6, 2024
101065f
apply some feedbacks
Vincent-Maladiere Sep 6, 2024
8f327e8
apply feedback
Vincent-Maladiere Sep 9, 2024
59d3a4b
apply jerome feedback on max-width
Vincent-Maladiere Sep 9, 2024
7987a85
apply ricardo feedback on hero wording
Vincent-Maladiere Sep 9, 2024
6543855
Update doc/_templates/index.html
Vincent-Maladiere Sep 9, 2024
a39d341
add 'and many more' link
Vincent-Maladiere Sep 9, 2024
192fa81
generate table report only once
Vincent-Maladiere Sep 9, 2024
54c305b
Merge branch 'main' into revamp_homepage
Vincent-Maladiere Sep 11, 2024
d889cf7
Geal feedback reduce scrolling
Vincent-Maladiere Sep 11, 2024
e583052
fix the vertical alignment issue
Vincent-Maladiere Sep 11, 2024
757c758
justify left community section
Vincent-Maladiere Sep 11, 2024
1b139f8
use col-md-6 / col-md-6 for the hero
Vincent-Maladiere Sep 11, 2024
00be307
add diag arrow
Vincent-Maladiere Sep 12, 2024
46602ef
put community title and text on the right side
Vincent-Maladiere Sep 12, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
100 changes: 92 additions & 8 deletions doc/_static/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,8 +27,8 @@
}

.card-body {
padding-left: 32px;
padding-right: 32px;
padding-left: 0px;
padding-right: 0px;
}

.card-title {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -214,8 +214,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%;
Expand All @@ -233,17 +233,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 */
}

.feature-text {
font-size: 1rem; /* Regular font size for text */
margin-bottom: 0; /* Remove default bottom margin */
}


.hero-description {
text-align: center;
font-size: 1.25rem;
margin-bottom: 40px;
}

.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 {
Vincent-Maladiere marked this conversation as resolved.
Show resolved Hide resolved
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,
Expand Down
Binary file added doc/_static/gap.png
View file
Open in desktop
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use an SVG here? Matplotlib saves very nice SVGs (I think that you need to use ", transparent=True" to savefig to have a transparent background, which comes in handy)

Copy link
Member Author

@Vincent-Maladiere Vincent-Maladiere Sep 9, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The transparent background is challenging to see in darkmode (see below), why do we want SVG? The image is not super big and is displayed in good quality even with a big screen

Screenshot 2024-09-09 at 18 06 46

Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions doc/_templates/demo_gap_encoder.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
7 changes: 7 additions & 0 deletions doc/_templates/demo_table_report_code.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
118 changes: 118 additions & 0 deletions doc/_templates/demo_tabular_learner.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Loading