Skip to content

Commit 82c4562

Browse files
alphapapaalphapapa
authored
Refactor "Ecosystem/Scientific Domains" tab on front page (#706)
* Update theme * Change: Refactor "Ecosystem/Scientific Domains" tab * assets/css/tabs.scss: Convert to Sass file. * content/en/tabcontents.yaml: Define "Scientific Domains" tab and links entirely in this file. * layouts/partials/scientific-domains.html: Rewrite to use CSS flex. * Improve link spacing This keeps wrapped lines slightly closer together than separate items for visual clarity. * Adjust width, spacing, etc. See <#706 (comment)>.
1 parent 1a3f518 commit 82c4562

File tree

4 files changed

+181
-155
lines changed

4 files changed

+181
-155
lines changed

‎assets/css/tabs.css renamed to ‎assets/css/tabs.scss

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@ table td, table th {
2828
margin: 30px 0;
2929
}
3030

31-
.visualization, .data-science, .scientific-domains, .machine-learning, .array-libraries {
31+
.visualization, .data-science, .machine-learning, .array-libraries {
3232
max-width: 900px;
3333
margin: 15px auto;
3434
}
@@ -80,49 +80,49 @@ table td, table th {
8080
}
8181

8282
/* Scientific Domains */
83-
td, th {
84-
font-size: 0.8rem;
85-
padding: 8px;
86-
}
87-
88-
td > a {
89-
font-size: 0.8rem;
90-
}
91-
92-
tr.highlight-th {
93-
border-top: 1px solid rgb(238, 238, 238);
94-
font-size: 0.8rem;
95-
}
96-
97-
td.bold-text {
98-
font-weight: bold;
99-
text-align: center;
100-
min-width: 120px;
101-
}
102-
103-
img.cell-layout {
104-
border-radius: 10px;
105-
width: 50px;
106-
height: 50px;
107-
display: block;
108-
margin-left: 0px;
109-
margin-right: auto;
110-
}
111-
112-
td.center-text {
113-
text-align: center;
114-
line-height: 35%;
115-
}
116-
117-
td.full-center-text {
118-
text-align: center;
119-
vertical-align: middle;
120-
line-height: 45%;
121-
}
122-
123-
td.lastrow-center-text {
124-
text-align: center;
125-
line-height: 35%;
83+
section.scientific-domains {
84+
max-width: 900px !important;
85+
86+
& ul {
87+
display: flex;
88+
flex-wrap: wrap;
89+
list-style: none;
90+
margin: 15px auto;
91+
padding-inline-start: 0;
92+
93+
& li {
94+
align-content: center;
95+
font-size: 0.8rem;
96+
line-height: 130%;
97+
margin: 0.2em 0.4em;
98+
flex-basis: 13%;
99+
100+
& header {
101+
// FIXME: Use appropriate PST color for this header text.
102+
color: var(--colorPrimaryDark);
103+
font-weight: 700;
104+
// Ensure headers are the same minimum height (some wrap
105+
// to two lines).
106+
min-height: 3.3em;
107+
text-align: left;
108+
}
109+
& img {
110+
width: 50px;
111+
height: 50px;
112+
margin-bottom: 0.5em;
113+
}
114+
& ul {
115+
align-content: left;
116+
display: flex;
117+
flex-direction: column;
118+
padding-inline-start: 0;
119+
120+
& li {
121+
margin-left: 0em;
122+
}
123+
}
124+
}
125+
}
126126
}
127127

128128
/* Array Libraries */

‎content/en/tabcontents.yaml

Lines changed: 111 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -84,51 +84,159 @@ params:
8484
- text: Nearly every scientist working in Python draws on the power of NumPy.
8585
- text: "NumPy brings the computational power of languages like C and Fortran to Python, a language much easier to learn and use. With this power comes simplicity: a solution in NumPy is often clear and elegant."
8686

87-
librariesrow1:
87+
libraries:
8888
- title: Quantum Computing
8989
alttext: A computer chip.
9090
img: /images/content_images/sc_dom_img/quantum_computing.svg
91+
links:
92+
- url: http://qutip.org
93+
label: QuTiP
94+
- url: https://pyquil-docs.rigetti.com/en/stable
95+
label: PyQuil
96+
- url: https://qiskit.org
97+
label: Qiskit
98+
- url: https://pennylane.ai
99+
label: PennyLane
91100
- title: Statistical Computing
92101
alttext: A line graph with the line moving up.
93102
img: /images/content_images/sc_dom_img/statistical_computing.svg
103+
links:
104+
- url: https://pandas.pydata.org/
105+
label: Pandas
106+
- url: https://github.com/statsmodels/statsmodels
107+
label: statsmodels
108+
- url: https://xarray.pydata.org/en/stable/
109+
label: Xarray
110+
- url: https://github.com/mwaskom/seaborn
111+
label: Seaborn
94112
- title: Signal Processing
95113
alttext: A bar chart with positive and negative values.
96114
img: /images/content_images/sc_dom_img/signal_processing.svg
115+
links:
116+
- url: https://www.scipy.org/
117+
label: SciPy
118+
- url: https://pywavelets.readthedocs.io/
119+
label: PyWavelets
120+
- url: https://python-control.org/
121+
label: python-control
97122
- title: Image Processing
98123
alttext: An photograph of the mountains.
99124
img: /images/content_images/sc_dom_img/image_processing.svg
125+
links:
126+
- url: https://scikit-image.org/
127+
label: Scikit-image
128+
- url: https://opencv.org/
129+
label: OpenCV
130+
- url: https://mahotas.rtfd.io/
131+
label: Mahotas
100132
- title: Graphs and Networks
101133
alttext: A simple graph.
102134
img: /images/content_images/sc_dom_img/sd6.svg
135+
links:
136+
- url: https://networkx.org/
137+
label: NetworkX
138+
- url: https://graph-tool.skewed.de/
139+
label: graph-tool
140+
- url: https://igraph.org/python/
141+
label: igraph
142+
- url: https://pygsp.rtfd.io/
143+
label: PyGSP
103144
- title: Astronomy
104145
alttext: A telescope.
105146
img: /images/content_images/sc_dom_img/astronomy_processes.svg
147+
links:
148+
- url: https://www.astropy.org/
149+
label: AstroPy
150+
- url: https://github.com/sunpy/sunpy
151+
label: SunPy
152+
- url: https://github.com/spacepy/spacepy
153+
label: SpacePy
106154
- title: Cognitive Psychology
107155
alttext: A human head with gears.
108156
img: /images/content_images/sc_dom_img/cognitive_psychology.svg
109-
110-
librariesrow2:
157+
links:
158+
- url: https://www.psychopy.org/
159+
label: PsychoPy
111160
- title: Bioinformatics
112161
alttext: A strand of DNA.
113162
img: /images/content_images/sc_dom_img/bioinformatics.svg
163+
links:
164+
- url: https://biopython.org/
165+
label: BioPython
166+
- url: http://scikit-bio.org/
167+
label: Scikit-Bio
168+
- url: https://github.com/openvax/pyensembl
169+
label: PyEnsembl
170+
- url: http://etetoolkit.org/
171+
label: ETE
114172
- title: Bayesian Inference
115173
alttext: A graph with a bell-shaped curve.
116174
img: /images/content_images/sc_dom_img/bayesian_inference.svg
175+
links:
176+
- url: https://pystan.readthedocs.io/en/latest/
177+
label: PyStan
178+
- url: https://docs.pymc.io/
179+
label: PyMC3
180+
- url: https://arviz-devs.github.io/arviz/
181+
label: ArviZ
182+
- url: https://emcee.readthedocs.io/
183+
label: emcee
117184
- title: Mathematical Analysis
118185
alttext: Four mathematical symbols.
119186
img: /images/content_images/sc_dom_img/mathematical_analysis.svg
187+
links:
188+
- url: https://www.scipy.org/
189+
label: SciPy
190+
- url: https://www.sympy.org/
191+
label: SymPy
192+
- url: https://github.com/cvxgrp/cvxpy
193+
label: cvxpy
194+
- url: https://fenicsproject.org/
195+
label: FEniCS
120196
- title: Chemistry
121197
alttext: A test tube.
122198
img: /images/content_images/sc_dom_img/chemistry.svg
199+
links:
200+
- url: https://cantera.org/
201+
label: Cantera
202+
- url: https://www.mdanalysis.org/
203+
label: MDAnalysis
204+
- url: https://github.com/rdkit/rdkit
205+
label: RDKit
206+
- url: https://www.pybamm.org/
207+
label: PyBaMM
123208
- title: Geoscience
124209
alttext: The Earth.
125210
img: /images/content_images/sc_dom_img/geoscience.svg
211+
links:
212+
- url: https://pangeo.io/
213+
label: Pangeo
214+
- url: https://simpeg.xyz/
215+
label: Simpeg
216+
- url: https://github.com/obspy/obspy/wiki
217+
label: ObsPy
218+
- url: https://www.fatiando.org/
219+
label: Fatiando a Terra
126220
- title: Geographic Processing
127221
alttext: A map.
128222
img: /images/content_images/sc_dom_img/GIS.svg
223+
links:
224+
- url: https://shapely.readthedocs.io/
225+
label: Shapely
226+
- url: https://geopandas.org/
227+
label: GeoPandas
228+
- url: https://python-visualization.github.io/folium
229+
label: Folium
129230
- title: Architecture & Engineering
130231
alttext: A microprocessor development board.
131232
img: /images/content_images/sc_dom_img/robotics.svg
233+
links:
234+
- url: https://compas.dev/
235+
label: COMPAS
236+
- url: https://cityenergyanalyst.com/
237+
label: City Energy Analyst
238+
- url: https://nortikin.github.io/sverchok/
239+
label: Sverchok
132240

133241
datascience:
134242

‎layouts/partials/scientific-domains.html

Lines changed: 25 additions & 107 deletions
Original file line numberDiff line numberDiff line change
@@ -1,109 +1,27 @@
11
<!-- Scientific Domains Tab Content -->
2-
{{- $scientificdomains := .Site.Params.scientificdomains }}
3-
{{- $intro := index $scientificdomains "intro" }}
4-
{{- $librariesrow1 := index $scientificdomains "librariesrow1" }}
5-
{{- $librariesrow2 := index $scientificdomains "librariesrow2" }}
6-
<li class="scientific-domains">
7-
{{- range $intro }}
8-
<p>
9-
{{ .text }}
10-
</p>
11-
{{- end }}
12-
<!-- First Row -->
13-
<table>
14-
<tr class="highlight-th">
15-
{{- range $librariesrow1 }}
16-
<td class="bold-text">{{ .title }}</td>
17-
{{- end }}
18-
</tr>
19-
<tr>
20-
{{- range $librariesrow1 }}
21-
<td><img class="cell-layout" src="{{ .img }}" alt="{{ .alttext }}"></td>
22-
{{- end }}
23-
</tr>
24-
<tr>
25-
<td class="center-text"><a href="http://qutip.org">QuTiP</a></td>
26-
<td class="center-text"><a href="https://pandas.pydata.org">Pandas</a></td>
27-
<td class="center-text"><a href="https://www.scipy.org">SciPy</a></td>
28-
<td class="center-text"><a href="https://scikit-image.org">Scikit-image</a></td>
29-
<td class="center-text"><a href="https://networkx.org">NetworkX</a></td>
30-
<td class="center-text"><a href="https://www.astropy.org">AstroPy</a></td>
31-
<td class="center-text"><a href="https://www.psychopy.org">PsychoPy</a></td>
32-
</tr>
33-
<tr>
34-
<td class="center-text"><a href="https://pyquil-docs.rigetti.com/en/stable">PyQuil</a></td>
35-
<td class="center-text"><a href="https://github.com/statsmodels/statsmodels"> statsmodels</a></td>
36-
<td class="center-text"><a href="https://pywavelets.readthedocs.io">PyWavelets</a></td>
37-
<td class="center-text"><a href="https://opencv.org">OpenCV</a></td>
38-
<td class="center-text"><a href="https://graph-tool.skewed.de/">graph-tool</a></td>
39-
<td class="center-text"><a href="https://github.com/sunpy/sunpy">SunPy</a></td>
40-
<td class="center-text"></td>
41-
</tr>
42-
<tr>
43-
<td class="center-text"><a href="https://qiskit.org">Qiskit</a></td>
44-
<td class="center-text"><a href="https://xarray.pydata.org/en/stable/">Xarray</a></td>
45-
<td class="center-text"><a href="https://python-control.org">python-control</a></td>
46-
<td class="center-text"><a href="https://mahotas.rtfd.io/">Mahotas</a></td>
47-
<td class="center-text"><a href="https://igraph.org/python/">igraph</a></td>
48-
<td class="center-text"><a href="https://github.com/spacepy/spacepy">SpacePy</a></td>
49-
<td class="center-text"></td>
50-
</tr>
51-
<tr>
52-
<td class="center-text"><a href="https://pennylane.ai">PennyLane</a></td>
53-
<td class="center-text"><a href="https://github.com/mwaskom/seaborn">Seaborn</a></td>
54-
<td class="lastrow-center-text"></td>
55-
<td class="lastrow-center-text"></td>
56-
<td class="center-text"><a href="https://pygsp.rtfd.io">PyGSP</a></td>
57-
<td class="lastrow-center-text"></td>
58-
<td class="lastrow-center-text"></td>
59-
</tr>
2+
{{ with .Site.Params.scientificdomains }}
603

61-
<!-- Second Row -->
62-
<tr class="highlight-th">
63-
{{- range $librariesrow2 }}
64-
<td class="bold-text">{{ .title }}</td>
65-
{{- end }}
66-
</tr>
67-
<tr>
68-
{{- range $librariesrow2 }}
69-
<td><img class="cell-layout" src="{{ .img }}" alt="{{ .alttext }}"></td>
70-
{{- end }}
71-
</tr>
72-
<tr>
73-
<td class="center-text"><a href="https://biopython.org">BioPython</a></td>
74-
<td class="center-text"><a href="https://pystan.readthedocs.io/en/latest/">PyStan</a></td>
75-
<td class="center-text"><a href="https://www.scipy.org">SciPy</a></td>
76-
<td class="center-text"><a href="https://cantera.org/">Cantera</a></td>
77-
<td class="center-text"><a href="https://pangeo.io/">Pangeo</a></td>
78-
<td class="center-text"><a href="https://shapely.readthedocs.io">Shapely</a></td>
79-
<td class="center-text"><a href="https://compas.dev/">COMPAS</a></td>
80-
</tr>
81-
<tr>
82-
<td class="center-text"><a href="http://scikit-bio.org">Scikit-Bio</a></td>
83-
<td class="center-text"><a href="https://docs.pymc.io">PyMC3</a></td>
84-
<td class="center-text"><a href="https://www.sympy.org">SymPy</a></td>
85-
<td class="center-text"><a href="https://www.mdanalysis.org/">MDAnalysis</a></td>
86-
<td class="center-text"><a href="https://simpeg.xyz/">Simpeg</a></td>
87-
<td class="center-text"><a href="https://geopandas.org/">GeoPandas</a></td>
88-
<td class="center-text"><a href="https://cityenergyanalyst.com/">City Energy Analyst</a></td>
89-
</tr>
90-
<tr>
91-
<td class="center-text"><a href="https://github.com/openvax/pyensembl">PyEnsembl</a></td>
92-
<td class="center-text"><a href="https://arviz-devs.github.io/arviz/">ArviZ</a></td>
93-
<td class="center-text"><a href="https://github.com/cvxgrp/cvxpy">cvxpy</a></td>
94-
<td class="center-text"><a href="https://github.com/rdkit/rdkit">RDKit</a></td>
95-
<td class="center-text"><a href="https://github.com/obspy/obspy/wiki">ObsPy</a></td>
96-
<td class="center-text"><a href="https://python-visualization.github.io/folium">Folium</a></td>
97-
<td class="center-text"><a href="https://nortikin.github.io/sverchok/">Sverchok</a></td>
98-
</tr>
99-
<tr>
100-
<td class="lastrow-center-text"><a href="http://etetoolkit.org/">ETE</a></td>
101-
<td class="lastrow-center-text"><a href="https://emcee.readthedocs.io/">emcee</a></td>
102-
<td class="lastrow-center-text"><a href="https://fenicsproject.org/">FEniCS</a></td>
103-
<td class="lastrow-center-text"><a href="https://www.pybamm.org">PyBaMM</a></td>
104-
<td class="lastrow-center-text"><a href="https://www.fatiando.org/">Fatiando a Terra</a></td>
105-
<td class="lastrow-center-text"></td>
106-
<td class="lastrow-center-text"></td>
107-
</tr>
108-
</table>
109-
</li>
4+
<section class="scientific-domains container">
5+
{{ range .intro }}
6+
<p>{{ .text }}</p>
7+
{{ end }}
8+
<ul>
9+
{{ range .libraries }}
10+
<li>
11+
<header>
12+
{{ .title }}
13+
</header>
14+
<ul>
15+
<img src="{{ .img }}" alt="{{ .alttext }}">
16+
{{ range .links }}
17+
<li>
18+
<a href="{{ .url }}">{{ .label }}</a>
19+
</li>
20+
{{ end }}
21+
</ul>
22+
</li>
23+
{{ end }}
24+
</ul>
25+
</section>
26+
27+
{{ end }}

0 commit comments

Comments
 (0)