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.
alphapapa · Nov 16, 2023 · 0fce201 · 0fce201
1 parent ea8c5e9
commit 0fce201
Show file tree

Hide file tree

Showing 3 changed files with 165 additions and 153 deletions.
diff --git a/assets/css/tabs.css → assets/css/tabs.scss b/assets/css/tabs.css → assets/css/tabs.scss
@@ -32,7 +32,7 @@ table td, table th {
     margin: 30px 0;
 }
 
-.visualization, .data-science, .scientific-domains, .machine-learning, .array-libraries {
+.visualization, .data-science, .machine-learning, .array-libraries {
     max-width: 900px;
     margin: 15px auto;
 }
@@ -84,49 +84,35 @@ table td, table th {
 }
 
 /* Scientific Domains */
-td, th {
-    font-size: 0.8rem;
-    padding: 8px;
-}
-
-td > a {
-    font-size: 0.8rem;
-}
-
-tr.highlight-th {
-    border-top: 1px solid rgb(238, 238, 238);
-    font-size: 0.8rem;
-}
-
-td.bold-text {
-    font-weight: bold;
-    text-align: center;
-    min-width: 120px;
-}
-
-img.cell-layout {
-    border-radius: 10px;
-    width: 50px;
-    height: 50px;
-    display: block;
-    margin-left: 0px;
-    margin-right: auto;
-}
-
-td.center-text {
-    text-align: center;
-    line-height: 35%;
-}
-
-td.full-center-text {
-    text-align: center;
-    vertical-align: middle;
-    line-height: 45%;
-}
+section.scientific-domains ul {
+    display: flex;
+    flex-wrap: wrap;
+    list-style: none;
+    margin: 15px auto;
 
-td.lastrow-center-text {
-    text-align: center;
-    line-height: 35%;
+    & li {
+        align-content: center;
+        font-size: 0.8rem;
+        margin: 0 0.5em;
+        flex-basis: 13%;
+
+        & header {
+            // FIXME: Use appropriate PST color for this header text.
+            color: var(--colorPrimaryDark);
+            font-weight: 700;
+            text-align: center;
+        }
+        & img {
+            width: 50px;
+            height: 50px;
+            }
+        & ul {
+            align-content: left;
+            display: flex;
+            flex-direction: column;
+            padding-inline-start: 0;
+        }
+    }
 }
 
 /* Array Libraries */

diff --git a/content/en/tabcontents.yaml b/content/en/tabcontents.yaml
@@ -84,51 +84,159 @@ params:
     - text: Nearly every scientist working in Python draws on the power of NumPy.
     - 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."
 
-    librariesrow1:
+    libraries:
     - title: Quantum Computing
       alttext: A computer chip.
       img: /images/content_images/sc_dom_img/quantum_computing.svg
+      links:
+        - url: http://qutip.org
+          label: QuTiP
+        - url: https://pyquil-docs.rigetti.com/en/stable
+          label: PyQuil
+        - url: https://qiskit.org
+          label: Qiskit
+        - url: https://pennylane.ai
+          label: PennyLane
     - title: Statistical Computing
       alttext: A line graph with the line moving up.
       img: /images/content_images/sc_dom_img/statistical_computing.svg
+      links:
+        - url: https://pandas.pydata.org/
+          label: Pandas
+        - url: https://github.com/statsmodels/statsmodels
+          label: statsmodels
+        - url: https://xarray.pydata.org/en/stable/
+          label: Xarray
+        - url: https://github.com/mwaskom/seaborn
+          label: Seaborn
     - title: Signal Processing
       alttext: A bar chart with positive and negative values.
       img: /images/content_images/sc_dom_img/signal_processing.svg
+      links:
+        - url: https://www.scipy.org/
+          label: SciPy
+        - url: https://pywavelets.readthedocs.io/
+          label: PyWavelets
+        - url: https://python-control.org/
+          label: python-control
     - title: Image Processing
       alttext: An photograph of the mountains.
       img: /images/content_images/sc_dom_img/image_processing.svg
+      links:
+        - url: https://scikit-image.org/
+          label: Scikit-image
+        - url: https://opencv.org/
+          label: OpenCV
+        - url: https://mahotas.rtfd.io/
+          label: Mahotas
     - title: Graphs and Networks
       alttext: A simple graph.
       img: /images/content_images/sc_dom_img/sd6.svg
+      links:
+        - url: https://networkx.org/
+          label: NetworkX
+        - url: https://graph-tool.skewed.de/
+          label: graph-tool
+        - url: https://igraph.org/python/
+          label: igraph
+        - url: https://pygsp.rtfd.io/
+          label: PyGSP
     - title: Astronomy
       alttext: A telescope.
       img: /images/content_images/sc_dom_img/astronomy_processes.svg
+      links:
+        - url: https://www.astropy.org/
+          label: AstroPy
+        - url: https://github.com/sunpy/sunpy
+          label: SunPy
+        - url: https://github.com/spacepy/spacepy
+          label: SpacePy
     - title: Cognitive Psychology
       alttext: A human head with gears.
       img: /images/content_images/sc_dom_img/cognitive_psychology.svg
-
-    librariesrow2:
+      links:
+        - url: https://www.psychopy.org/
+          label: PsychoPy
     - title: Bioinformatics
       alttext: A strand of DNA.
       img: /images/content_images/sc_dom_img/bioinformatics.svg
+      links:
+        - url: https://biopython.org/
+          label: BioPython
+        - url: http://scikit-bio.org/
+          label: Scikit-Bio
+        - url: https://github.com/openvax/pyensembl
+          label: PyEnsembl
+        - url: http://etetoolkit.org/
+          label: ETE
     - title: Bayesian Inference
       alttext: A graph with a bell-shaped curve.
       img: /images/content_images/sc_dom_img/bayesian_inference.svg
+      links:
+        - url: https://pystan.readthedocs.io/en/latest/
+          label: PyStan
+        - url: https://docs.pymc.io/
+          label: PyMC3
+        - url: https://arviz-devs.github.io/arviz/
+          label: ArviZ
+        - url: https://emcee.readthedocs.io/
+          label: emcee
     - title: Mathematical Analysis
       alttext: Four mathematical symbols.
       img: /images/content_images/sc_dom_img/mathematical_analysis.svg
+      links:
+        - url: https://www.scipy.org/
+          label: SciPy
+        - url: https://www.sympy.org/
+          label: SymPy
+        - url: https://github.com/cvxgrp/cvxpy
+          label: cvxpy
+        - url: https://fenicsproject.org/
+          label: FEniCS
     - title: Chemistry
       alttext: A test tube.
       img: /images/content_images/sc_dom_img/chemistry.svg
+      links:
+        - url: https://cantera.org/
+          label: Cantera
+        - url: https://www.mdanalysis.org/
+          label: MDAnalysis
+        - url: https://github.com/rdkit/rdkit
+          label: RDKit
+        - url: https://www.pybamm.org/
+          label: PyBaMM
     - title: Geoscience
       alttext: The Earth.
       img: /images/content_images/sc_dom_img/geoscience.svg
+      links:
+        - url: https://pangeo.io/
+          label: Pangeo
+        - url: https://simpeg.xyz/
+          label: Simpeg
+        - url: https://github.com/obspy/obspy/wiki
+          label: ObsPy
+        - url: https://www.fatiando.org/
+          label: Fatiando a Terra
     - title: Geographic Processing
       alttext: A map.
       img: /images/content_images/sc_dom_img/GIS.svg
+      links:
+        - url: https://shapely.readthedocs.io/
+          label: Shapely
+        - url: https://geopandas.org/
+          label: GeoPandas
+        - url: https://python-visualization.github.io/folium
+          label: Folium
     - title: Architecture & Engineering
       alttext: A microprocessor development board.
       img: /images/content_images/sc_dom_img/robotics.svg
+      links:
+        - url: https://compas.dev/
+          label: COMPAS
+        - url: https://cityenergyanalyst.com/
+          label: City Energy Analyst
+        - url: https://nortikin.github.io/sverchok/
+          label: Sverchok
 
   datascience:
 

diff --git a/layouts/partials/scientific-domains.html b/layouts/partials/scientific-domains.html
@@ -1,109 +1,27 @@
 <!-- Scientific Domains Tab Content -->
-{{- $scientificdomains := .Site.Params.scientificdomains }}
-{{- $intro := index $scientificdomains "intro" }}
-{{- $librariesrow1 := index $scientificdomains "librariesrow1" }}
-{{- $librariesrow2 := index $scientificdomains "librariesrow2" }}
-<li class="scientific-domains">
-    {{- range $intro }}
-    <p>
-        {{ .text }}
-    </p>
-    {{- end }}
-    <!-- First Row -->
-    <table>
-        <tr class="highlight-th">
-            {{- range $librariesrow1 }}
-                <td class="bold-text">{{ .title }}</td>
-            {{- end }}
-        </tr>
-        <tr>
-            {{- range $librariesrow1 }}
-                <td><img class="cell-layout" src="{{ .img }}" alt="{{ .alttext }}"></td>
-            {{- end }}
-        </tr>
-        <tr>
-            <td class="center-text"><a href="http://qutip.org">QuTiP</a></td>
-            <td class="center-text"><a href="https://pandas.pydata.org">Pandas</a></td>
-            <td class="center-text"><a href="https://www.scipy.org">SciPy</a></td>
-            <td class="center-text"><a href="https://scikit-image.org">Scikit-image</a></td>
-            <td class="center-text"><a href="https://networkx.org">NetworkX</a></td>
-            <td class="center-text"><a href="https://www.astropy.org">AstroPy</a></td>
-            <td class="center-text"><a href="https://www.psychopy.org">PsychoPy</a></td>
-        </tr>
-        <tr>
-            <td class="center-text"><a href="https://pyquil-docs.rigetti.com/en/stable">PyQuil</a></td>
-            <td class="center-text"><a href="https://github.com/statsmodels/statsmodels"> statsmodels</a></td>
-            <td class="center-text"><a href="https://pywavelets.readthedocs.io">PyWavelets</a></td>
-            <td class="center-text"><a href="https://opencv.org">OpenCV</a></td>
-            <td class="center-text"><a href="https://graph-tool.skewed.de/">graph-tool</a></td>
-            <td class="center-text"><a href="https://github.com/sunpy/sunpy">SunPy</a></td>
-            <td class="center-text"></td>
-        </tr>
-        <tr>
-            <td class="center-text"><a href="https://qiskit.org">Qiskit</a></td>
-            <td class="center-text"><a href="https://xarray.pydata.org/en/stable/">Xarray</a></td>
-            <td class="center-text"><a href="https://python-control.org">python-control</a></td>
-            <td class="center-text"><a href="https://mahotas.rtfd.io/">Mahotas</a></td>
-            <td class="center-text"><a href="https://igraph.org/python/">igraph</a></td>
-            <td class="center-text"><a href="https://github.com/spacepy/spacepy">SpacePy</a></td>
-            <td class="center-text"></td>
-        </tr>
-        <tr>
-            <td class="center-text"><a href="https://pennylane.ai">PennyLane</a></td>
-            <td class="center-text"><a href="https://github.com/mwaskom/seaborn">Seaborn</a></td>
-            <td class="lastrow-center-text"></td>
-            <td class="lastrow-center-text"></td>
-            <td class="center-text"><a href="https://pygsp.rtfd.io">PyGSP</a></td>
-            <td class="lastrow-center-text"></td>
-            <td class="lastrow-center-text"></td>
-        </tr>
+{{ with .Site.Params.scientificdomains }}
 
-        <!-- Second Row -->
-        <tr class="highlight-th">
-            {{- range $librariesrow2 }}
-                <td class="bold-text">{{ .title }}</td>
-            {{- end }}
-        </tr>
-        <tr>
-            {{- range $librariesrow2 }}
-                <td><img class="cell-layout" src="{{ .img }}" alt="{{ .alttext }}"></td>
-            {{- end }}
-        </tr>
-        <tr>
-            <td class="center-text"><a href="https://biopython.org">BioPython</a></td>
-            <td class="center-text"><a href="https://pystan.readthedocs.io/en/latest/">PyStan</a></td>
-            <td class="center-text"><a href="https://www.scipy.org">SciPy</a></td>
-            <td class="center-text"><a href="https://cantera.org/">Cantera</a></td>
-            <td class="center-text"><a href="https://pangeo.io/">Pangeo</a></td>
-            <td class="center-text"><a href="https://shapely.readthedocs.io">Shapely</a></td>
-            <td class="center-text"><a href="https://compas.dev/">COMPAS</a></td>
-        </tr>
-        <tr>
-            <td class="center-text"><a href="http://scikit-bio.org">Scikit-Bio</a></td>
-            <td class="center-text"><a href="https://docs.pymc.io">PyMC3</a></td>
-            <td class="center-text"><a href="https://www.sympy.org">SymPy</a></td>
-            <td class="center-text"><a href="https://www.mdanalysis.org/">MDAnalysis</a></td>
-            <td class="center-text"><a href="https://simpeg.xyz/">Simpeg</a></td>
-            <td class="center-text"><a href="https://geopandas.org/">GeoPandas</a></td>
-            <td class="center-text"><a href="https://cityenergyanalyst.com/">City Energy Analyst</a></td>
-        </tr>
-        <tr>
-            <td class="center-text"><a href="https://github.com/openvax/pyensembl">PyEnsembl</a></td>
-            <td class="center-text"><a href="https://arviz-devs.github.io/arviz/">ArviZ</a></td>
-            <td class="center-text"><a href="https://github.com/cvxgrp/cvxpy">cvxpy</a></td>
-            <td class="center-text"><a href="https://github.com/rdkit/rdkit">RDKit</a></td>
-            <td class="center-text"><a href="https://github.com/obspy/obspy/wiki">ObsPy</a></td>
-            <td class="center-text"><a href="https://python-visualization.github.io/folium">Folium</a></td>
-            <td class="center-text"><a href="https://nortikin.github.io/sverchok/">Sverchok</a></td>
-        </tr>
-        <tr>
-            <td class="lastrow-center-text"><a href="http://etetoolkit.org/">ETE</a></td>
-            <td class="lastrow-center-text"><a href="https://emcee.readthedocs.io/">emcee</a></td>
-            <td class="lastrow-center-text"><a href="https://fenicsproject.org/">FEniCS</a></td>
-            <td class="lastrow-center-text"><a href="https://www.pybamm.org">PyBaMM</a></td>
-            <td class="lastrow-center-text"><a href="https://www.fatiando.org/">Fatiando a Terra</a></td>
-            <td class="lastrow-center-text"></td>
-            <td class="lastrow-center-text"></td>
-        </tr>
-    </table>
-</li>
+<section class="scientific-domains container">
+  {{ range .intro }}
+  <p>{{ .text }}</p>
+  {{ end }}
+  <ul>
+    {{ range .libraries }}
+    <li>
+      <header>
+        {{ .title }}
+      </header>
+      <ul>
+        <img src="{{ .img }}" alt="{{ .alttext }}">
+        {{ range .links }}
+        <li>
+          <a href="{{ .url }}">{{ .label }}</a>
+        </li>
+        {{ end }}
+      </ul>
+    </li>
+    {{ end }}
+  </ul>
+</section>
+
+{{ end }}