elixir-toolkit-theme 6.0.0 → 7.0.0

data/_includes/more-information-tiles.html

@@ -63,21 +63,23 @@
 {%- if actual_fairsharing %}
 <!-- FAIRsharing -->
 <a data-bs-toggle="collapse" href="#fairsharing_collapse" role="button" aria-expanded="false" aria-controls="fairsharing_collapse" class="d-flex align-items-baseline pb-3 border-top info-collapse">
-    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Links to FAIRsharing</h3><i class="fa-solid fa-chevron-right fs-5"></i>
+    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Links to FAIRsharing</h3><i class="icon-chevron-right fs-5"></i>
 </a>
 <div class="collapse info-card" id="fairsharing_collapse">
-    <div class="mt-2 p-3 pb-5">
-        <img alt="FAIRsharing logo" class="img-fluid info-logo mb-4" src="{{ 'assets/img/fairsharing_logo.svg' | relative_url }}">
-        <p><a href="https://fairsharing.org/">FAIRsharing</a> is a curated, informative and educational resource on data and metadata standards, inter-related to databases and data policies.</p>
-        <div class="row row-cols-1 row-cols-md-2 gy-2 gx-4 info-links">
+    <div class="mt-2 pb-4 pe-2">
+        <div class="d-flex align-items-start gap-3 gap-sm-4">
+            <p class="mb-0 flex-grow-1"><a href="https://fairsharing.org/">FAIRsharing</a> is a curated, informative and educational resource on data and metadata standards, inter-related to databases and data policies.</p>
+            <span class="info-logo-tile info-logo-fairsharing d-inline-flex align-items-center justify-content-center ms-auto flex-shrink-0 rounded">
+                <img alt="FAIRsharing logo" class="info-logo" src="{{ 'assets/img/fairsharing_compact_logo.svg' | relative_url }}">
+            </span>
+        </div>
+        <ul class="mb-0 mt-3">
             {%- for standard in page.fairsharing %}
-            <div class="col">
-                <a class="btn text-start d-flex align-items-center h-100" href="{{ standard.url }}">
-                    {{standard.name}}
-                </a>
-            </div>
+            <li>
+                <a href="{{ standard.url }}">{{standard.name}}</a>
+            </li>
             {%- endfor %}
-        </div>
+        </ul>
     </div>
 </div>
 {%- endif %}
@@ -85,21 +87,23 @@
 {%- if actual_faircookbook %}
 <!-- FAIR Cookbook -->
 <a data-bs-toggle="collapse" href="#faircookbook_collapse" role="button" aria-expanded="false" aria-controls="faircookbook_collapse" class="d-flex align-items-baseline pb-3 border-top info-collapse">
-    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Links to FAIR Cookbook</h3><i class="fa-solid fa-chevron-right fs-5"></i>
+    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Links to FAIR Cookbook</h3><i class="icon-chevron-right fs-5"></i>
 </a>
 <div class="collapse info-card" id="faircookbook_collapse">
-    <div class="mt-2 p-3 pb-5">
-        <img alt="FAIR Cookbook logo" class="img-fluid info-logo mb-4" src="{{ 'assets/img/faircookbook_logo.svg' | relative_url }}">
-        <p><a href="https://faircookbook.elixir-europe.org/">FAIR Cookbook</a> is an online, open and live resource for the Life Sciences with recipes that help you to make and keep data Findable, Accessible, Interoperable and Reusable; in one word FAIR.</p>
-        <div class="row row-cols-1 row-cols-md-2 gy-2 gx-4 info-links">
+    <div class="mt-2 pb-4 pe-2">
+        <div class="d-flex align-items-start gap-3 gap-sm-4">
+            <p class="mb-0 flex-grow-1"><a href="https://faircookbook.elixir-europe.org/">FAIR Cookbook</a> is an online, open and live resource for the Life Sciences with recipes that help you to make and keep data Findable, Accessible, Interoperable and Reusable; in one word FAIR.</p>
+            <span class="info-logo-tile info-logo-faircookbook d-inline-flex align-items-center justify-content-center ms-auto flex-shrink-0 rounded">
+                <img alt="FAIR Cookbook logo" class="info-logo" src="{{ 'assets/img/faircookbook_compact_logo.svg' | relative_url }}">
+            </span>
+        </div>
+        <ul class="mb-0 mt-3">
             {%- for recipe in page.faircookbook %}
-            <div class="col">
-                <a class="btn text-start d-flex align-items-center h-100" href="{{ recipe.url }}">
-                    {{recipe.name}}
-                </a>
-            </div>
+            <li>
+                <a href="{{ recipe.url }}">{{recipe.name}}</a>
+            </li>
             {%- endfor %}
-        </div>
+        </ul>
     </div>
 </div>
 {%- endif %}
@@ -107,21 +111,23 @@
 {%- if actual_dsw %}
 <!-- DSW -->
 <a data-bs-toggle="collapse" href="#dsw_collapse" role="button" aria-expanded="false" aria-controls="dsw_collapse" class="d-flex align-items-baseline pb-3 border-top info-collapse">
-    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Links to DSW</h3><i class="fa-solid fa-chevron-right fs-5"></i>
+    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Links to DSW</h3><i class="icon-chevron-right fs-5"></i>
 </a>
 <div class="collapse info-card" id="dsw_collapse">
-    <div class="mt-2 p-3 pb-5">
-        <img alt="DSW logo" class="img-fluid info-logo mb-4" src="{{ 'assets/img/dsw_logo.svg' | relative_url }}">
-        <p>With <a href="https://ds-wizard.org/">Data Stewardship Wizard</a> (DSW), you can create, plan, collaborate, and bring your data management plans to life with a tool trusted by thousands of people worldwide — from data management pioneers, to international research institutes.</p>
-        <div class="row row-cols-1 row-cols-md-2 gy-2 gx-4 info-links">
+    <div class="mt-2 pb-4 pe-2">
+        <div class="d-flex align-items-start gap-3 gap-sm-4">
+            <p class="mb-0 flex-grow-1">With <a href="https://ds-wizard.org/">Data Stewardship Wizard</a> (DSW), you can create, plan, collaborate, and bring your data management plans to life with a tool trusted by thousands of people worldwide — from data management pioneers, to international research institutes.</p>
+            <span class="info-logo-tile info-logo-dsw d-inline-flex align-items-center justify-content-center ms-auto flex-shrink-0 rounded">
+                <img alt="DSW logo" class="info-logo" src="{{ 'assets/img/dsw_compact_logo.svg' | relative_url }}">
+            </span>
+        </div>
+        <ul class="mb-0 mt-3">
             {%- for question in page.dsw %}
-            <div class="col">
-                <a class="btn text-start d-flex align-items-center h-100" href="{{ site.dsw_deep_link_prefix | append: question.uuid }}">
-                    {{question.name}}
-                </a>
-            </div>
+            <li>
+                <a href="{{ site.dsw_deep_link_prefix | append: question.uuid }}">{{question.name}}</a>
+            </li>
             {%- endfor %}
-        </div>
+        </ul>
     </div>
 </div>
 {%- endif %}
@@ -129,21 +135,23 @@
 {%- if actual_rdmkit %}
 <!-- RDMkit -->
 <a data-bs-toggle="collapse" href="#rdmkit_collapse" role="button" aria-expanded="false" aria-controls="rdmkit_collapse" class="d-flex align-items-baseline pb-3 border-top info-collapse">
-    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Links to RDMkit</h3><i class="fa-solid fa-chevron-right fs-5"></i>
+    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Links to RDMkit</h3><i class="icon-chevron-right fs-5"></i>
 </a>
 <div class="collapse info-card" id="rdmkit_collapse">
-    <div class="mt-2 p-3 pb-5">
-        <img alt="RDMkit logo" class="img-fluid info-logo mb-4" src="{{ 'assets/img/rdmkit_logo.svg' | relative_url }}">
-        <p><a href="https://rdmkit.elixir-europe.org/">RDMkit</a> is the Research Data Management toolkit for Life Sciences describing best practices and guidelines to help you make your data FAIR (Findable, Accessible, Interoperable and Reusable)</p>
-        <div class="row row-cols-1 row-cols-md-2 gy-2 gx-4 info-links">
+    <div class="mt-2 pb-4 pe-2">
+        <div class="d-flex align-items-start gap-3 gap-sm-4">
+            <p class="mb-0 flex-grow-1"><a href="https://rdmkit.elixir-europe.org/">RDMkit</a> is the Research Data Management toolkit for Life Sciences describing best practices and guidelines to help you make your data FAIR (Findable, Accessible, Interoperable and Reusable)</p>
+            <span class="info-logo-tile info-logo-rdmkit d-inline-flex align-items-center justify-content-center ms-auto flex-shrink-0 rounded">
+                <img alt="RDMkit logo" class="info-logo" src="{{ 'assets/img/rdmkit_compact_logo.svg' | relative_url }}">
+            </span>
+        </div>
+        <ul class="mb-0 mt-3">
             {%- for rdmdoc in page.rdmkit %}
-            <div class="col">
-                <a class="btn text-start d-flex align-items-center h-100" href="{{ rdmdoc.url }}">
-                    {{rdmdoc.name}}
-                </a>
-            </div>
+            <li>
+                <a href="{{ rdmdoc.url }}">{{rdmdoc.name}}</a>
+            </li>
             {%- endfor %}
-        </div>
+        </ul>
     </div>
 </div>
 {%- endif %}
@@ -152,39 +160,27 @@
 {%- if actual_training %}
 <!-- Training -->
 <a data-bs-toggle="collapse" href="#training_collapse" role="button" aria-expanded="false" aria-controls="training_collapse" class="d-flex align-items-baseline pb-3 border-top info-collapse">
-    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Training</h3><i class="fa-solid fa-chevron-right fs-5"></i>
+    <h3 class="mb-0 flex-grow-1 mt-3 text-dark">Training</h3><i class="icon-chevron-right fs-5"></i>
 </a>
 <div class="collapse info-card" id="training_collapse">
-    <div class="mt-2 p-3 pb-5">
-        <div class="row row-cols-1 row-cols-md-2 gy-2 gx-4 info-links">
+    <div class="mt-2 pb-4 pe-2">
+        <div class="d-flex align-items-start gap-3 gap-sm-4">
+            <p class="mb-0 flex-grow-1">Training materials, tutorials, and learning resources that help readers build practical skills and explore this topic in more depth.</p>
+            <span class="info-logo-tile info-logo-training d-inline-flex align-items-center justify-content-center ms-auto flex-shrink-0 rounded text-primary" aria-hidden="true">
+                <i class="icon-graduation-cap fs-2"></i>
+            </span>
+        </div>
+        <ul class="mb-0 mt-3">
             {%- for training in page.training %}
-            <div class="col">
-                <a class="btn d-grid h-100" href="{{ training.url }}">
-                    <div class="row g-1">
-                        <div class="col-2 d-flex align-items-center justify-content-center">
-                            {%- assign registry = training.registry | downcase %}
-                            {%- if registry == "tess" %}
-                            <img alt="TeSS logo" class="img-fluid" src="{{ 'assets/img/tess_logo.svg' | relative_url }}">
-                            {%- elsif registry == "zenodo" %}
-                            <img alt="Zenodo logo" class="img-fluid" src="{{ 'assets/img/zenodo_logo.svg' | relative_url }}">
-                            {%- elsif registry == "youtube" %}
-                            <img alt="YouTube logo" class="img-fluid" src="{{ 'assets/img/youtube_logo.svg' | relative_url }}">
-                            {%- elsif registry == "carpentries" %}
-                            <img alt="Carpentries" class="img-fluid" src="{{ 'assets/img/carpentries_logo.svg' | relative_url }}">
-                            {%- elsif registry == "github" %}
-                            <i class="fa-brands fa-github text-dark fa-2xl my-3"></i>
-                            {%- else %}
-                            <i class="fa-solid fa-external-link-alt text-primary fa-lg my-3"></i>
-                            {%- endif %}
-                        </div>
-                        <div class="col-10 d-flex align-items-center">
-                            <span class="text-start">{{training.name}}</span>
-                        </div>
-                    </div>
-                </a>
-            </div>
+            {%- assign training_registry = training.registry | strip %}
+            <li>
+                <a href="{{ training.url }}">{{training.name}}</a>
+                {%- if training_registry != "" %}
+                <span class="badge bg-light text-secondary fw-semibold ms-2 align-middle">{{training_registry}}</span>
+                {%- endif %}
+            </li>
             {%- endfor %}
-        </div>
+        </ul>
     </div>
 </div>
 {%- endif %}

data/_includes/navigation-tile-card.html

@@ -0,0 +1,70 @@
+{%- assign tile_page = include.tile_page -%}
+{%- assign tile_variant = include.variant | default: "related" -%}
+{%- assign is_section_tile = false -%}
+{%- if tile_variant == "section" -%}{%- assign is_section_tile = true -%}{%- endif -%}
+{%- assign tile_supported_by = tile_page.supported_by -%}
+{%- if tile_supported_by == nil -%}{%- assign tile_supported_by = tile_page.affiliations -%}{%- endif -%}
+<div class="card h-100 navigation-tile-card-with-side flex-row">
+    <div class="card-body d-flex flex-column">
+        <div class="d-flex align-items-center">
+            {%- if tile_page.type_img %}
+            <img src="{{tile_page.type_img | relative_url}}" class="type-icon me-2" alt="{{tile_page.type}} icon">
+            {%- endif %}
+            {%- if tile_page.type %}
+            <span class=""><small>{{tile_page.type | replace: "_", " " }}</small></span>
+            {%- endif %}
+        </div>
+        <div class="navigation-tile-heading">
+            <a class="stretched-link section-title" aria-label="Go to the {{tile_page.title}} page" href="{{ tile_page.url | relative_url }}">
+                <b>{{tile_page.title}}</b>
+            </a>
+        </div>
+        {%- if tile_page.description %}
+        <p class="card-text{% if is_section_tile == true %} h-100{% endif %}">{{ tile_page.description}}</p>
+        {%- endif %}
+        {%- if is_section_tile == true and tile_supported_by %}
+        {%- assign pageaffil = tile_supported_by | sort %}
+        {%- assign alllogos = site.data.affiliations | default: site.data.supported_by %}
+        {%- assign allcountries = site.data.countries %}
+        <div class="d-flex align-items-center flex-wrap gap-2">
+            <span><b><small>Supported by:</small></b></span>
+            {%- for affiliation in pageaffil %}
+            {%- assign filter_affiliation = alllogos | where: "name", affiliation | first %}
+            {%- assign country = affiliation | upcase %}
+            {%- if affiliation.size == 2 %}
+            {%- assign country_link = site.pages | where:"country_code",country | first %}
+            {%- if country_link %}
+            <a role="button" href="{{country_link.url | relative_url}}" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm bg-white hover-primary">
+            {%- else %}
+            <a role="button" data-bs-toggle="tooltip" title="{{allcountries[country]}}" class="btn btn-sm bg-white hover-primary disabled border-white" aria-disabled="true">
+                {%- endif %}
+                <div class="d-block supported-by-img-sm">
+                    <span class="fi fi-{{affiliation | downcase}} shadow-sm"></span>
+                </div>
+            </a>
+            {%- elsif filter_affiliation %}
+            <a role="button" href="{{filter_affiliation.url}}" data-bs-toggle="tooltip" data-bs-original-title="{{affiliation}}" class="btn btn-sm bg-white hover-primary">
+                {%- if filter_affiliation.image_url %}
+                <img alt="logo of {{filter_affiliation.name}}" src="{{filter_affiliation.image_url | relative_url }}" class="d-inline supported-by-img-sm">
+                {%- else %}
+                {{filter_affiliation.name}}
+                {%- endif %}
+            </a>
+            {%- endif %}
+            {%- endfor %}
+
+        </div>
+        {%- endif %}
+    </div>
+    <div class="navigation-tile-side d-flex gap-2 flex-column align-items-end justify-content-{% if is_section_tile == true and tile_page.page_img %}between{% else %}end{% endif %} flex-shrink-0 ms-auto p-3">
+        {%- if is_section_tile == true and tile_page.page_img %}
+    {%- capture file_url -%}
+    {{ "/images/" | append: tile_page.page_img | relative_url }}
+    {%- endcapture -%}
+        <img alt="logo of {{tile_page.title}}" src="{{ file_url }}" class="page-img-sm" />
+        {%- endif %}
+        <span class="navigation-tile-arrow" aria-hidden="true">
+            <i class="icon-arrow-right"></i>
+        </span>
+    </div>
+</div>

data/_includes/news.html

@@ -4,16 +4,19 @@
   {%- endif %}
   {%- assign news = site.data.news | sort: "date" %}
   {%- assign count = 0 %}
-  <ul class="list-unstyled mt-3">
+  <ul class="news-timeline list-unstyled my-3">
     {%- for new in news reversed%}
-    <li>
-      <span class="title mb-1">{{ new.name | escape }}</span>
-      <p class="text-muted"><i class="far fa-calendar me-2"></i><time>{{ new.date | date_to_long_string }}</time>{% if new.linked_pr %} - <i class="fa-solid fa-code-branch me-2"></i><a href="{{ site.github.repository_url | append: '/pull/' | append: new.linked_pr }}"><span>{{new.linked_pr }}</span></a>{% endif %}</p>
+    <li class="news-timeline-item">
+      <article class="news-timeline-content">
+      <h3 class="title mt-0 mb-2">{{ new.name | escape }}</h3>
+      <p class="news-timeline-date text-muted mb-3">
+        <span class="news-metadata-item"><i class="icon-calendar me-2" aria-hidden="true"></i><time>{{ new.date | date_to_long_string }}</time></span>{% if new.linked_pr %}<span class="metadata-separator" aria-hidden="true">&middot;</span><span class="news-metadata-item"><i class="icon-git-branch me-2" aria-hidden="true"></i><a href="{{ site.github.repository_url | append: '/pull/' | append: new.linked_pr }}"><span>PR #{{new.linked_pr }}</span></a></span>{% endif %}
+      </p>
       {%- if new.description %}
       {%- assign word_count = new.description | split: " " | size %}
       {%- if include.truncate == true and word_count > 40 %}
-      <p class="mb-0"><a data-bs-toggle="collapse" href="#collapse-{{count}}" role="button" aria-expanded="false" aria-controls="collapse-{{count}}">
-        View description
+      <p class="mb-0"><a class="description-toggle btn btn-sm d-inline-flex align-items-center gap-2" data-bs-toggle="collapse" href="#collapse-{{count}}" role="button" aria-expanded="false" aria-controls="collapse-{{count}}">
+        <i class="icon-chevron-right" aria-hidden="true"></i><span>View description</span>
       </a>
       </p>
       <div class="full-description collapse" id="collapse-{{count}}">
@@ -23,6 +26,7 @@
       {{ new.description | markdownify }}
       {%- endif %}
       {%- endif %}
+      </article>
     </li>
     {%- assign count = count | plus: 1 %}
     {%- if include.limit and count == include.limit %}

data/_includes/page-metadata-tabs.html

@@ -2,23 +2,25 @@
 {%- assign has_contributors = false -%}
 {%- assign has_coordinators = false -%}
 {%- assign has_editors = false -%}
-{%- assign has_affiliations = false -%}
+{%- assign has_supported_by = false -%}
 {%- assign has_citations = false -%}
+{%- assign supported_by = page.supported_by -%}
+{%- if supported_by == nil -%}{%- assign supported_by = page.affiliations -%}{%- endif -%}
 
 {%- if page.contributors and page.contributors.size > 0 -%}{%- assign has_contributors = true -%}{%- endif -%}
 {%- if page.coordinators and page.coordinators.size > 0 -%}{%- assign has_coordinators = true -%}{%- endif -%}
 {%- if page.editors and page.editors.size > 0 -%}{%- assign has_editors = true -%}{%- endif -%}
-{%- if page.affiliations and page.affiliations.size > 0 -%}{%- assign has_affiliations = true -%}{%- endif -%}
+{%- if supported_by and supported_by.size > 0 -%}{%- assign has_supported_by = true -%}{%- endif -%}
 {%- if page.page_citation -%}{%- assign has_citations = true -%}{%- endif -%}
 
-{% if has_contributors or has_coordinators or has_editors or has_affiliations or has_citations %}
+{% if has_contributors or has_coordinators or has_editors or has_supported_by or has_citations %}
 
 {%- comment -%} Determine which tab should be active by default {%- endcomment -%}
 {%- assign first_tab = nil -%}
 {%- unless first_tab -%}{%- if has_contributors -%}{%- assign first_tab = "contributors" -%}{%- endif -%}{%- endunless -%}
 {%- unless first_tab -%}{%- if has_coordinators -%}{%- assign first_tab = "coordinators" -%}{%- endif -%}{%- endunless -%}
 {%- unless first_tab -%}{%- if has_editors -%}{%- assign first_tab = "editors" -%}{%- endif -%}{%- endunless -%}
-{%- unless first_tab -%}{%- if has_affiliations -%}{%- assign first_tab = "affiliations" -%}{%- endif -%}{%- endunless -%}
+{%- unless first_tab -%}{%- if has_supported_by -%}{%- assign first_tab = "supported-by" -%}{%- endif -%}{%- endunless -%}
 {%- unless first_tab -%}{%- if has_citations -%}{%- assign first_tab = "citations" -%}{%- endif -%}{%- endunless -%}
 
 <div class="page-metadata p-4 mt-5 rounded">
@@ -26,31 +28,31 @@
         <div class="nav nav-tabs mb-3" id="nav-credits" role="tablist">
             {%- if has_contributors %}
             <button class="nav-link {% if first_tab == 'contributors' %}active{% endif %}" id="credits-contributors-tab" data-bs-toggle="tab" data-bs-target="#credits-contributors" type="button" role="tab" aria-controls="credits-contributors" aria-selected="{% if first_tab == 'contributors' %}true{% else %}false{% endif %}">
-                <i class="fa-solid fa-users me-2"></i>
+                <i class="icon-users me-2"></i>
                 Contributors
             </button>
             {%- endif %}
             {%- if has_coordinators %}
             <button class="nav-link {% if first_tab == 'coordinators' %}active{% endif %}" id="credits-coordinators-tab" data-bs-toggle="tab" data-bs-target="#credits-coordinators" type="button" role="tab" aria-controls="credits-coordinators" aria-selected="{% if first_tab == 'coordinators' %}true{% else %}false{% endif %}">
-                <i class="fa-solid fa-crown me-2"></i>
+                <i class="icon-crown me-2"></i>
                 Coordinators
             </button>
             {%- endif %}
             {%- if has_editors %}
             <button class="nav-link {% if first_tab == 'editors' %}active{% endif %}" id="credits-editors-tab" data-bs-toggle="tab" data-bs-target="#credits-editors" type="button" role="tab" aria-controls="credits-editors" aria-selected="{% if first_tab == 'editors' %}true{% else %}false{% endif %}">
-                <i class="fa-solid fa-comment-dots me-2"></i>
+                <i class="icon-message-circle me-2"></i>
                 Editors
             </button>
             {% endif %}
-            {%- if has_affiliations %}
-            <button class="nav-link {% if first_tab == 'affiliations' %}active{% endif %}" id="credits-affiliations-tab" data-bs-toggle="tab" data-bs-target="#credits-affiliations" type="button" role="tab" aria-controls="credits-affiliations" aria-selected="{% if first_tab == 'affiliations' %}true{% else %}false{% endif %}">
-                <i class="fa-solid fa-building-columns me-2"></i>
-                Affiliations
+            {%- if has_supported_by %}
+            <button class="nav-link {% if first_tab == 'supported-by' %}active{% endif %}" id="credits-supported-by-tab" data-bs-toggle="tab" data-bs-target="#credits-supported-by" type="button" role="tab" aria-controls="credits-supported-by" aria-selected="{% if first_tab == 'supported-by' %}true{% else %}false{% endif %}">
+                <i class="icon-handshake me-2"></i>
+                Supported by
             </button>
             {%- endif %}
             {%- if has_citations %}
             <button class="nav-link {% if first_tab == 'citations' %}active{% endif %}" id="credits-cite-tab" data-bs-toggle="tab" data-bs-target="#credits-citations" type="button" role="tab" aria-controls="credits-cite" aria-selected="{% if first_tab == 'citations' %}true{% else %}false{% endif %}">
-                <i class="fa-solid fa-quote-left me-2"></i>
+                <i class="icon-quote me-2"></i>
                 Citation
             </button>
             {%- endif %}
@@ -77,9 +79,11 @@
             </div>
         </div>
         {%- endif %}
-        {%- if has_affiliations %}
-        <div class="tab-pane {% if first_tab == 'affiliations' %}show active{% endif %}" id="credits-affiliations" role="tabpanel">
-            {% include affiliation-tiles-page.html affiliations_list=page.affiliations sort=site.theme_variables.page_metadata.affiliations_sort %}
+        {%- if has_supported_by %}
+        <div class="tab-pane {% if first_tab == 'supported-by' %}show active{% endif %}" id="credits-supported-by" role="tabpanel">
+            {%- assign supported_by_sort = site.theme_variables.page_metadata.supported_by_sort -%}
+            {%- if supported_by_sort == nil -%}{%- assign supported_by_sort = site.theme_variables.page_metadata.affiliations_sort -%}{%- endif -%}
+            {% include supported-by-tiles-page.html supported_by_list=supported_by sort=supported_by_sort %}
         </div>
         {%- endif %}
         {%- if has_citations %}

data/_includes/related-pages.html

@@ -16,24 +16,7 @@
     {%- assign page_hit = section_pages | where:"page_id", page_id | first %}
     {%- if page_hit %}
     <div class="col">
-        <div class="card h-100">
-            <div class="card-body d-flex flex-column">
-                <div class="d-flex align-items-center">
-                    {%- if page_hit.type_img %}
-                    <img src="{{page_hit.type_img | relative_url}}" class="type-icon me-2" alt="{{page_hit.type}} icon">
-                    {%- endif %}
-                    {%- if page_hit.type %}
-                    <span class=""><small>{{page_hit.type | replace: "_", " " }}</small></span>
-                    {%- endif %}
-                </div>
-                <a class="stretched-link section-title" aria-label="Go to the {{page_hit.title}} page" href="{{ page_hit.url | relative_url }}">
-                    <b>{{page_hit.title}}</b>
-                </a>
-                {%- if page_hit.description %}
-                <p class="card-text">{{ page_hit.description}}</p>
-                {%- endif %}
-            </div>
-        </div>
+        {% include navigation-tile-card.html tile_page=page_hit variant="related" %}
     </div>
     {%- endif %}
     {%- endfor %}

data/_includes/resource-table-all.html

@@ -26,7 +26,7 @@
 {%- endif %}
 {% if site.theme_variables.headings.resource-table-all-collapse %}<h3 class="mb-0 mt-3 flex-grow-1 text-dark">{% else %}<h2 class="h2-like fs-2">{% endif %}{{site.theme_variables.headings.resource-table-all | default: 'Tools and resources on this page' }}{% if site.theme_variables.headings.resource-table-all-collapse %}</h3>{% else % %}</h2>{% endif %}
 {%- if site.theme_variables.headings.resource-table-all-collapse %}
-    <i class="fa-solid fa-chevron-right fs-5"></i>
+    <i class="icon-chevron-right fs-5"></i>
 </a>
 <div class="collapse info-card" id="tools_collapse">
 {%- endif %}
@@ -41,7 +41,7 @@
                 <th>Tool or resource
                     {%- if include.tag %}
                     <a data-bs-toggle="tooltip" data-bs-original-title="This is a curated subset of (and not a comprehensive list of all) tools and resources on this topic - you'll typically find only the tools or resources referenced on this page.">
-                        <i class="fa-solid fa-info-circle"></i>
+                        <i class="icon-info"></i>
                     </a>
                     {%- endif %}
                 </th>
@@ -49,7 +49,7 @@
                 <th>Related pages</th>
                 <th>Registry {%- if include.tag -%}
                     <a data-bs-toggle="tooltip" data-bs-original-title="Links to related information in ELIXIR registries: related policies and standards in FAIRsharing, scientific and technical descriptions of the resource in bio.tools, and related training in TeSS.">
-                        <i class="fa-solid fa-info-circle"></i>
+                        <i class="icon-info"></i>
                     </a>{%- endif %}
                 </th>
             </tr>
@@ -71,7 +71,7 @@
                         <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="This resource is an instance of {{linked_tool.name}}"><span class="badge text-primary border border-primary">{{linked_tool.name}}</span></span>
                         {%- endif %}
                         {%- if tool.how_to_access %}
-                        <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="{{tool.how_to_access}}"><span class="badge text-primary border border-primary"> <i class="fa-solid fa-key"></i></span></span>
+                        <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="{{tool.how_to_access}}"><span class="badge text-primary border border-primary"><i class="icon-key-round"></i></span></span>
                         {%- endif %}
                         {%- if instances_tool > 0 %}
                         {%- assign dropdown_id = 'instances-dd-' | append: forloop.index0 %}
@@ -81,7 +81,7 @@
                                     id="{{ dropdown_id }}"
                                     data-bs-toggle="dropdown"
                                     aria-expanded="false">
-                            <i class="fa-solid fa-globe me-2"></i>Instances
+                            <i class="icon-globe me-2"></i>Instances
                             </button>
                             <ul class="dropdown-menu" aria-labelledby="{{ dropdown_id }}">
                             {%- for inst in tool.instances %}
@@ -89,7 +89,7 @@
                                     <a class="dropdown-item no-ext-icon" href="{{ inst.url }}">
                                         {{ inst.name }}
                                         {%- if inst.country_code.size != 0 %}
-                                            <span class="flag-icon ms-2 shadow-sm flag-icon-{{ inst.country_code | downcase }}"></span>
+                                            <span class="fi ms-2 shadow-sm fi-{{ inst.country_code | downcase }}"></span>
                                         {%- endif %}
                                     </a>
                                 </li>
@@ -111,19 +111,16 @@
                 <td>{{related_pages}}</td>
                 <td>
                     {%- if tool.registry.biotools and tool.registry.biotools != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="Bio.tools" href="https://bio.tools/{{tool.registry.biotools}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-info me-2"></i>Tool info</span></a>
+                    <a data-bs-toggle="tooltip" data-bs-original-title="Bio.tools" href="https://bio.tools/{{tool.registry.biotools}}"><span class="badge bg-dark text-white hover-primary"><i class="icon-info me-2"></i>Tool info</span></a>
                     {%- endif %}
                     {%- if tool.registry.fairsharing and tool.registry.fairsharing != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="FAIRsharing" href="https://fairsharing.org/FAIRsharing.{{tool.registry.fairsharing}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-database me-2"></i>Standards/Databases</span></a>
-                    {%- endif %}
-                    {%- if tool.registry.fairsharing-coll and tool.registry.fairsharing-coll != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="FAIRsharing collection" href="https://fairsharing.org/{{tool.registry.fairsharing-coll}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-database me-2"></i>Standards/Databases</span></a>
+                    <a data-bs-toggle="tooltip" data-bs-original-title="FAIRsharing" href="https://fairsharing.org/FAIRsharing.{{tool.registry.fairsharing}}"><span class="badge bg-dark text-white hover-primary"><i class="icon-database me-2"></i>Standards/Databases</span></a>
                     {%- endif %}
                     {%- if tool.registry.tess and tool.registry.tess != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="TeSS" href="https://tess.elixir-europe.org/search?q={{tool.registry.tess}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-graduation-cap me-2"></i>Training</span></a>
+                    <a data-bs-toggle="tooltip" data-bs-original-title="TeSS" href='https://tess.elixir-europe.org/search?q="{{tool.registry.tess}}"'><span class="badge bg-dark text-white hover-primary"><i class="icon-graduation-cap me-2"></i>Training</span></a>
                     {%- endif %}
                     {%- if tool.registry.europmc and tool.registry.europmc != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="EuroPMC" href="https://europepmc.org/article/MED/{{tool.registry.europmc}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-book me-2"></i>Publication</span></a>
+                    <a data-bs-toggle="tooltip" data-bs-original-title="EuroPMC" href="https://europepmc.org/article/MED/{{tool.registry.europmc}}"><span class="badge bg-dark text-white hover-primary"><i class="icon-book-open me-2"></i>Publication</span></a>
                     {%- endif %}
                 </td>
             </tr>
@@ -149,7 +146,7 @@
 {%- endif %}
     <h3 class="{% if site.theme_variables.headings.resource-table-all-collapse %}mb-0 mt-3 flex-grow-1 text-dark {% endif %}">National resources</h3>
 {%- if site.theme_variables.headings.resource-table-all-collapse %}
-    <i class="fa-solid fa-chevron-right fs-5"></i>
+    <i class="icon-chevron-right fs-5"></i>
 </a>
 <div class="collapse info-card" id="nat_tools_collapse">
 {%- endif %}
@@ -164,7 +161,7 @@
                 <th>Related pages</th>
                 <th>Registry
                     <a data-bs-toggle="tooltip" data-bs-original-title="Links to related information in ELIXIR registries: related policies and standards in FAIRsharing, scientific and technical descriptions of the resource in bio.tools, and related training in TeSS.">
-                        <i class="fa-solid fa-info-circle"></i>
+                        <i class="icon-info"></i>
                     </a>
                 </th>
             </tr>
@@ -180,9 +177,9 @@
             {%- for tool in tool_matches %}
             <tr>
                 {% if tool.url %}
-                <td><a href="{{tool.url}}">{{tool.name}}</a><a href="{{country_page.url | relative_url }}" data-bs-toggle="tooltip" title="{{country_page.title}}"><span class="flag-icon ms-2 shadow-sm flag-icon-{{country_page.country_code | downcase }}"></span></a></td>
+                <td><a href="{{tool.url}}">{{tool.name}}</a><a href="{{country_page.url | relative_url }}" data-bs-toggle="tooltip" title="{{country_page.title}}"><span class="fi ms-2 shadow-sm fi-{{country_page.country_code | downcase }}"></span></a></td>
                 {%- else %}
-                <td>{{tool.name}}<a href="{{country_page.url}}"><span class="flag-icon ms-2 shadow-sm flag-icon-{{country_page.country_code | downcase }}"></span></a></td>
+                <td>{{tool.name}}<a href="{{country_page.url}}"><span class="fi ms-2 shadow-sm fi-{{country_page.country_code | downcase }}"></span></a></td>
                 {%- endif %}
                 <td>{{tool.description | markdownify }}
                     {%- if tool.instance_of or tool.how_to_access %}
@@ -192,7 +189,7 @@
                         <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="This resource is an instance of {{linked_tool.name}}"><span class="badge text-primary border border-primary">{{linked_tool.name}}</span></span>
                         {%- endif %}
                         {%- if tool.how_to_access %}
-                        <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="{{tool.how_to_access}}"><span class="badge text-primary border border-primary"> <i class="fa-solid fa-key"></i></span></span>
+                        <span class="d-inline-block" tabindex="0" data-bs-toggle="tooltip" title="{{tool.how_to_access}}"><span class="badge text-primary border border-primary"><i class="icon-key-round"></i></span></span>
                         {%- endif %}
                     </div>
                     {%- endif %}
@@ -216,19 +213,16 @@
                 {%- endif %}
                 <td>
                     {%- if tool.registry.biotools and tool.registry.biotools != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="Bio.tools" href="https://bio.tools/{{tool.registry.biotools}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-info me-2"></i>Tool info</span></a>
+                    <a data-bs-toggle="tooltip" data-bs-original-title="Bio.tools" href="https://bio.tools/{{tool.registry.biotools}}"><span class="badge bg-dark text-white hover-primary"><i class="icon-info me-2"></i>Tool info</span></a>
                     {%- endif %}
                     {%- if tool.registry.fairsharing and tool.registry.fairsharing != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="FAIRsharing" href="https://fairsharing.org/FAIRsharing.{{tool.registry.fairsharing}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-database me-2"></i>Standards/Databases</span></a>
-                    {%- endif %}
-                    {%- if tool.registry.fairsharing-coll and tool.registry.fairsharing-coll != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="FAIRsharing collection" href="https://fairsharing.org/{{tool.registry.fairsharing-coll}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-database me-2"></i>Standards/Databases</span></a>
+                    <a data-bs-toggle="tooltip" data-bs-original-title="FAIRsharing" href="https://fairsharing.org/FAIRsharing.{{tool.registry.fairsharing}}"><span class="badge bg-dark text-white hover-primary"><i class="icon-database me-2"></i>Standards/Databases</span></a>
                     {%- endif %}
                     {%- if tool.registry.tess and tool.registry.tess != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="TeSS" href="https://tess.elixir-europe.org/search?q={{tool.registry.tess}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-graduation-cap me-2"></i>Training</span></a>
+                    <a data-bs-toggle="tooltip" data-bs-original-title="TeSS" href='https://tess.elixir-europe.org/search?q="{{tool.registry.tess}}"'><span class="badge bg-dark text-white hover-primary"><i class="icon-graduation-cap me-2"></i>Training</span></a>
                     {%- endif %}
                     {%- if tool.registry.europmc and tool.registry.europmc != "NA" %}
-                    <a data-bs-toggle="tooltip" data-bs-original-title="EuroPMC" href="https://europepmc.org/article/MED/{{tool.registry.europmc}}"><span class="badge bg-dark text-white hover-primary"><i class="fa-solid fa-book me-2"></i>Publication</span></a>
+                    <a data-bs-toggle="tooltip" data-bs-original-title="EuroPMC" href="https://europepmc.org/article/MED/{{tool.registry.europmc}}"><span class="badge bg-dark text-white hover-primary"><i class="icon-book-open me-2"></i>Publication</span></a>
                     {%- endif %}
                 </td>
             </tr>