Skip to content

Backport PR #52097 on branch 2.0.x (DOC: improve (dark) theme getting started tutorials) #52320

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

Merged
merged 1 commit into from
Mar 31, 2023
Merged

Backport PR #52097 on branch 2.0.x (DOC: improve (dark) theme getting started tutorials) #52320

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
53 changes: 26 additions & 27 deletions doc/source/_static/css/getting_started.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,14 @@
font-size: 0.9rem;
}

.gs-data-header {
background-color: var(--pst-color-on-surface);
}

.gs-data-list {
background-color: var(--pst-color-on-background);
}

.gs-data-title .badge {
margin: 10px;
padding: 5px;
Expand Down Expand Up @@ -57,45 +65,33 @@
margin-top: -5px;
}
.gs-callout-remember {
border-left-color: #f0ad4e;
border-left-color: var(--pst-color-secondary);
align-items: center;
font-size: 1.2rem;
}
.gs-callout-remember h4 {
color: #f0ad4e;
color: var(--pst-color-secondary);
}

/* reference to user guide */
.gs-torefguide {
align-items: center;
font-size: 0.9rem;
background-color: var(--pst-color-on-background);
border-radius: .25rem;
padding: 2px;
}

.gs-torefguide .badge {
background-color: #130654;
margin: 10px 10px 10px 0px;
background-color: var(--pst-color-primary);
margin: 10px 10px 10px 10px;
padding: 5px;
}

.gs-torefguide a {
margin-left: 5px;
color: #130654;
border-bottom: 1px solid #FFCA00f3;
box-shadow: 0px -10px 0px #FFCA00f3 inset;
}

.gs-torefguide p {
margin-top: 1rem;
}

.gs-torefguide a:hover {
margin-left: 5px;
color: grey;
text-decoration: none;
border-bottom: 1px solid #b2ff80f3;
box-shadow: 0px -10px 0px #b2ff80f3 inset;
}

/* question-task environment */

ul.task-bullet, ol.custom-bullet{
Expand All @@ -113,14 +109,14 @@ ul.task-bullet > li:before {
margin-left:-2em;
background-position:center;
background-repeat:no-repeat;
background-color: #130654;
background-color: var(--pst-color-primary);
border-radius: 50%;
background-size:100%;
background-image:url('../question_mark_noback.svg');
}

ul.task-bullet > li {
border-left: 1px solid #130654;
border-left: 1px solid var(--pst-color-primary);
padding-left:1em;
}

Expand All @@ -132,7 +128,7 @@ ul.task-bullet > li > p:first-child {
/* Getting started index page */

.comparison-card {
background:#FFF;
background-color: var(--pst-color-background);
border-radius:0;
padding: 30px 10px 10px 10px;
margin: 10px 0px;
Expand All @@ -146,6 +142,7 @@ ul.task-bullet > li > p:first-child {
margin: 10px;
margin-bottom: 20px;
height: 72px;
background: none !important;
}

.comparison-card-excel .card-img-top, .comparison-card-stata .card-img-top, .comparison-card-sas .card-img-top {
Expand All @@ -154,7 +151,7 @@ ul.task-bullet > li > p:first-child {

.comparison-card .card-footer {
border: none;
background-color: transparent;
background-color: var(--pst-color-background);
}

.install-block {
Expand Down Expand Up @@ -236,15 +233,16 @@ ul.task-bullet > li > p:first-child {

.tutorial-card .card-header {
cursor: pointer;
background-color: transparent;
background-color: var(--pst-color-surface);
border: 1px solid var(--pst-color-border)
}

.tutorial-card .card-body {
background-color: transparent;
background-color: var(--pst-color-on-background);
}

.tutorial-card .badge {
background-color: #130654;
background-color: var(--pst-color-primary);
margin: 10px 10px 10px 10px;
padding: 5px;
}
Expand All @@ -253,8 +251,9 @@ ul.task-bullet > li > p:first-child {
margin: 0px;
}


.tutorial-card .gs-badge-link a {
color: white;
color: var(--pst-color-text-base);
text-decoration: none;
}

Expand Down
3 changes: 2 additions & 1 deletion doc/source/_static/css/pandas.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ table {
.intro-card .card-img-top {
margin: 10px;
height: 52px;
background: none !important;
}

.intro-card .card-header {
Expand All @@ -48,5 +49,5 @@ table {
}

.card, .card img {
background-color: transparent !important;
background-color: var(--pst-color-background);
}
1 change: 1 addition & 0 deletions doc/source/getting_started/index.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -537,6 +537,7 @@ Are you familiar with other software for manipulating tablular data? Learn
the pandas-equivalent operations compared to software you already know:

.. panels::
:img-top-cls: dark-light
:card: + comparison-card text-center shadow
:column: col-lg-6 col-md-6 col-sm-6 col-xs-12 d-flex

Expand Down
6 changes: 3 additions & 3 deletions doc/source/getting_started/intro_tutorials/02_read_write.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
.. raw:: html

<div class="card gs-data">
<div class="card-header">
<div class="card-header gs-data-header">
<div class="gs-data-title">
Data used for this tutorial:
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<li class="list-group-item gs-data-list">

.. include:: includes/titanic.rst

Expand Down Expand Up @@ -198,7 +198,7 @@ The method :meth:`~DataFrame.info` provides technical information about a

.. raw:: html

<div class="d-flex flex-row bg-light gs-torefguide">
<div class="d-flex flex-row gs-torefguide">
<span class="badge badge-info">To user guide</span>

For a complete overview of the input and output possibilities from and to pandas, see the user guide section about :ref:`reader and writer functions <io>`.
Expand Down
4 changes: 2 additions & 2 deletions doc/source/getting_started/intro_tutorials/03_subset_data.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
.. raw:: html

<div class="card gs-data">
<div class="card-header">
<div class="card-header gs-data-header">
<div class="gs-data-title">
Data used for this tutorial:
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<li class="list-group-item gs-data-list">

.. include:: includes/titanic.rst

Expand Down
4 changes: 2 additions & 2 deletions doc/source/getting_started/intro_tutorials/04_plotting.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ How do I create plots in pandas?
.. raw:: html

<div class="card gs-data">
<div class="card-header">
<div class="card-header gs-data-header">
<div class="gs-data-title">
Data used for this tutorial:
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<li class="list-group-item gs-data-list">

.. include:: includes/air_quality_no2.rst

Expand Down
4 changes: 2 additions & 2 deletions doc/source/getting_started/intro_tutorials/05_add_columns.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
.. raw:: html

<div class="card gs-data">
<div class="card-header">
<div class="card-header gs-data-header">
<div class="gs-data-title">
Data used for this tutorial:
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<li class="list-group-item gs-data-list">

.. include:: includes/air_quality_no2.rst

Expand Down
4 changes: 2 additions & 2 deletions doc/source/getting_started/intro_tutorials/06_calculate_statistics.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
.. raw:: html

<div class="card gs-data">
<div class="card-header">
<div class="card-header gs-data-header">
<div class="gs-data-title">
Data used for this tutorial:
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<li class="list-group-item gs-data-list">

.. include:: includes/titanic.rst

Expand Down
6 changes: 3 additions & 3 deletions doc/source/getting_started/intro_tutorials/07_reshape_table_layout.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
.. raw:: html

<div class="card gs-data">
<div class="card-header">
<div class="card-header gs-data-header">
<div class="gs-data-title">
Data used for this tutorial:
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<li class="list-group-item gs-data-list">

.. include:: includes/titanic.rst

Expand All @@ -27,7 +27,7 @@
.. raw:: html

</li>
<li class="list-group-item">
<li class="list-group-item gs-data-list">
<div data-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
<span class="badge badge-dark">Air quality data</span>
</div>
Expand Down
6 changes: 3 additions & 3 deletions doc/source/getting_started/intro_tutorials/08_combine_dataframes.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
.. raw:: html

<div class="card gs-data">
<div class="card-header">
<div class="card-header gs-data-header">
<div class="gs-data-title">
Data used for this tutorial:
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<li class="list-group-item gs-data-list">
<div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
<span class="badge badge-dark">Air quality Nitrate data</span>
</div>
Expand Down Expand Up @@ -49,7 +49,7 @@ Westminster* in respectively Paris, Antwerp and London.
.. raw:: html

</li>
<li class="list-group-item">
<li class="list-group-item gs-data-list">
<div data-toggle="collapse" href="#collapsedata2" role="button" aria-expanded="false" aria-controls="collapsedata2">
<span class="badge badge-dark">Air quality Particulate matter data</span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions doc/source/getting_started/intro_tutorials/09_timeseries.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,13 +10,13 @@
.. raw:: html

<div class="card gs-data">
<div class="card-header">
<div class="card-header gs-data-header">
<div class="gs-data-title">
Data used for this tutorial:
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<li class="list-group-item gs-data-list">
<div data-toggle="collapse" href="#collapsedata" role="button" aria-expanded="false" aria-controls="collapsedata">
<span class="badge badge-dark">Air quality data</span>
</div>
Expand Down
4 changes: 2 additions & 2 deletions doc/source/getting_started/intro_tutorials/10_text_data.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,13 +9,13 @@
.. raw:: html

<div class="card gs-data">
<div class="card-header">
<div class="card-header gs-data-header">
<div class="gs-data-title">
Data used for this tutorial:
</div>
</div>
<ul class="list-group list-group-flush">
<li class="list-group-item">
<li class="list-group-item gs-data-list">
.. include:: includes/titanic.rst

.. ipython:: python
Expand Down