elixir-toolkit-theme 6.1.0 → 7.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2dfacff95bae6c8507e6ce18b3866b9fe3f0990f793c7f03637d6ad02dadf375
-  data.tar.gz: '019b16850550c4a7eb5e8a5fb33a9522b8b9755a1d0a6ee2b97e2631fcfe4bc4'
+  metadata.gz: cf055caeb038addaed85617a251b2709f4dd948f72a884ebf47fd8e5d4cc735a
+  data.tar.gz: a0cd04fdd3dd0c1a435bbb7f6ccb1c0f72b52965d4ff4255829e9008a30fb9c1
 SHA512:
-  metadata.gz: 36fbf492144ad890932cdd109580df03a65b072ff9e72ea664bef077dbf4023535abc8a57df6179b8fb7c69a24cd9d04a88068819caf279e00f88005180dd568
-  data.tar.gz: 67af3c8587bd09cfbf8424e5cadfdd2802f3b5f2dacd198d948f3351ef207bba3cab43b97f7db1061f5bcaa6d77253aff4951c9966345f351c5e7f2cde2b6d9c
+  metadata.gz: 490ec9d9ae1f6d8985f6ca861656c81bd0878a5b1fc9f49988ea22395a9ffdb1a0697fff1da6c58c185800e956fbeaed1fe9cc59e5894801c13fb141cbae6aca
+  data.tar.gz: 8ba032496af40b1186d43c4edcc1c8d3c5cce2b50e8ee09651a2f231a1a29bc60b27fa661e83ba4b125da5857b990fbccaa33d87b6a5fc2748a55efec6327fcf

data/README.md

@@ -17,7 +17,7 @@ Its key features:
 - Advanced content search
 - Create your own look with the many theme variables and support for custom classes
 - Support for a central tools table
-- Integrated attribution for contributors, editors and affiliations
+- Integrated attribution for contributors, editors and supporting organizations
 - Page tagging and listing of those tagged pages
 - Linking to ELIXIR resources including Bio.tools, FAIRsharing, FAIR Cookbook, RDMkit, TeSS and DSW
 - Easy side navigation, top navigation and footer management
@@ -28,29 +28,20 @@ Its key features:
 
 ## Enabling the theme on your Jekyll project
 
-The quickest way to use the latest version of elixir-toolkit-theme is setting it as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) in your `config.yml` file:
+Use the theme as a [remote theme](https://blog.github.com/2017-11-29-use-any-theme-with-github-pages/) and lock it to a released version in your `_config.yml` file:
 
 ```yaml
-remote_theme: ELIXIR-Belgium/elixir-toolkit-theme
+remote_theme: ELIXIR-Belgium/elixir-toolkit-theme@7.0.0
 ```
 
-You can lock it onto a specific version (recommended!) using:
-
-```yaml
-remote_theme: ELIXIR-Belgium/elixir-toolkit-theme@6.0.0
-```
+An exact version is recommended so a website rebuild cannot silently pull a different theme. Before starting or upgrading, read the [release notes](https://github.com/ELIXIR-Belgium/elixir-toolkit-theme/releases) and use the `Gemfile` from the matching release tag. See [Versions and upgrades](versions_and_upgrades) for the complete workflow.
 
 ### Using Ruby Gems (alternative)
 
-Alternatively you can use the Ruby Gem of the theme (needed when using GitLab) by adding this line to your Jekyll site's Gemfile:
-
-```ruby
-gem "elixir-toolkit-theme"
-```
-You can lock it onto a specific version like this:
+Alternatively you can use the Ruby Gem of the theme (needed when using GitLab) by adding an exact version to your Jekyll site's `Gemfile`:
 
 ```ruby
-gem "elixir-toolkit-theme", "~> 6.0.0"
+gem "elixir-toolkit-theme", "7.0.0"
 ```
 
 And add this line to your Jekyll site's `_config.yml`:
@@ -167,7 +158,7 @@ This will start the docker container and serve the website locally. Make sure th
 - [Norwegian Life Science RDM LookUp](https://elixir.no/rdm-lookup/) (ELIXIR Norway)
 - [RSQkit: Research Software Quality kit](https://everse.software/RSQKit/) (EOSC-EVERSE)
 - [research-data.no](https://plan.research-data.no/pages/) (ELIXIR Norway & BOTT universities Norway)
-- [Learning-Library](https://patcapon39.github.io/Learning-Library/) (Australian BioCommons)
+- [Australian BioCommons Community Library](https://australianbiocommons.github.io/Community-Library/) (Australian BioCommons)
 - [ELIXIR-IT Training Platform](https://elixir-iib-training.github.io/site/training_courses) (ELIXIR IT)
 - [FAIRDOM-SEEK Documentation](https://docs.seek4science.org/) (SEEK community)
 - [FAIR Lesson Plan Handbook](https://elixir-europe-training.github.io/ELIXIR-TrP-FAIR-Converge/)  (ELIXIR Training platform)
@@ -176,12 +167,13 @@ This will start the docker container and serve the website locally. Make sure th
 - [Federated Learning toolkit (FLkit)](https://uhasselt-biomedicaldatasciences.github.io/federated-learning-toolkit/) (UHasselt)
 - [mTeSS-X](https://elixirtess.github.io/mTeSS-X/) (OSCARS project)
 - [Galaxy Codex](https://galaxyproject.github.io/galaxy_codex/) (Galaxy Community)
-- [ELIXIR Software Management Plan](https://elixir-europe.github.io/software-management-plans/community/) (ELIXIR SMP Community)
+- [ELIXIR Software Management Plan](https://elixir-europe.github.io/software-management-plans/) (ELIXIR SMP Community)
 - [FAIR Metroline](https://fairmetroline.org/) (Health-RI)
 - [Globus Community Australasia](https://aarnet.github.io/Globus-Community/) (AARNet)
 - [ELIXIR Research Software Ecosystem (RSEc)](https://research-software-ecosystem.github.io/) (ELIXIR Tools Platform)
 - [Knowledge Hub](https://knowledge.lnds.lu/) (Luxembourg National Data Service (LNDS))
 - [ELIXIR-ELITMa](https://elixir-europe-training.github.io/ELIXIR-ELITMa/) (ELIXIR Training platform)
+- [ELIXIR-GOBLET Train-the-Trainer](https://elixir-europe-training.github.io/ELIXIR-TrP-GOBLET-Train-the-Trainer/) (ELIXIR Training platform)
 - Want your instance here? [Open an issue](https://github.com/ELIXIR-Belgium/elixir-toolkit-theme/issues)
 
 ## Dependencies
@@ -194,7 +186,8 @@ This theme would not be possible without following open source projects:
 - [lunr.js](https://github.com/olivernn/lunr.js) - Main tool behind the search bar enabling content search
 - [jQuery](https://github.com/jquery/jquery) - A fast, small, and feature-rich JavaScript library for easy scripting
 - [jekyll-table-of-contents](https://github.com/ghiculescu/jekyll-table-of-contents) - Lightweight JS script to render the table of contents
-- [Font-Awesome](https://github.com/FortAwesome/Font-Awesome) - The famous icon library
+- [Lucide](https://github.com/lucide-icons/lucide) - The main icon library used by the theme through its static icon font
+- [Font-Awesome](https://github.com/FortAwesome/Font-Awesome) - Icon library kept available for backwards compatibility, brand icons and markdown/sidebar content
 - [flag-icons](https://github.com/lipis/flag-icons) - A curated collection of all country flags in SVG + css integration
 - [clipboard.js](https://github.com/zenorocha/clipboard.js) - Modern copy to clipboard. No Flash. Just 3kb gzipped clipboard.
 
@@ -210,4 +203,9 @@ If you like our work, you can add following badge to the readme of your project:
 
 ## License
 
-The theme is available as open source under the terms of the [MIT License](http://opensource.org/licenses/MIT).
+The theme source code is available as open source under the terms of the [MIT License](https://opensource.org/license/mit).
+
+Bundled third-party libraries and assets retain their upstream licenses. In particular:
+
+- [Lucide](https://github.com/lucide-icons/lucide) static icon font assets are distributed under the [ISC License](https://github.com/lucide-icons/lucide/blob/main/LICENSE). Some Lucide icons are derived from Feather and are covered by MIT as noted in the Lucide license file.
+- [Font Awesome Free](https://github.com/FortAwesome/Font-Awesome) assets use component-specific licenses: webfont files are under SIL OFL 1.1, CSS/code is under MIT, and SVG/JS icon assets are under CC BY 4.0. Brand icons are trademarks of their respective owners and should only be used to represent those brands.

data/_includes/affiliation-tiles-selection.html

@@ -1,15 +1,4 @@
-{%- assign alllogos = site.data.affiliations %}
-<div class="affiliation-tiles row row-cols-2 row-cols-sm-3 row-cols-md-4 g-4 my-3">
-  {%- assign filtered_logos = alllogos | where: "type", include.type %}
-  {%- for affiliation in filtered_logos %}
-  {%- if affiliation.image_url and affiliation.expose == true %}
-  <div class="col">
-    <div class="card h-100 border-0">
-      <div class="my-auto d-flex justify-content-center">
-        {% if affiliation.url %}<a class="w-100" href="{{ affiliation.url }}">{% endif %}<img class="rounded p-3" src="{{ affiliation.image_url | relative_url }}" alt="{{ affiliation.name }}">{%- if affiliation.url %}</a>{% endif %}
-      </div>
-    </div>
-  </div>
-  {%- endif %}
-  {%- endfor %}
-</div>
+{%- comment -%}
+Deprecated: use supported-by-tiles-selection.html. This alias will be removed in ETT v8.0.0.
+{%- endcomment -%}
+{%- include supported-by-tiles-selection.html type=include.type -%}

data/_includes/breadcrumb.html

@@ -3,7 +3,7 @@
     <ol class="breadcrumb">
         {% if crumbs.size > 0 %}
         <li class="breadcrumb-item mt-0">
-            <a href="{{ site.baseurl }}/"><i class="fa-solid fa-house  fa-xs"></i></a>
+            <a href="{{ site.baseurl }}/"><i class="icon-house"></i></a>
         </li>
         {% endif %}
         {% for crumb in crumbs offset: 1 %}

data/_includes/callout.html

@@ -1,9 +1,20 @@
-{%- if include.type == "tip" %}
-<div markdown="span" class="alert alert-success" role="alert"><i class="fa-solid fa-check-square"></i> <b>Tip:</b> {{include.content}}</div>
-{%- elsif include.type == "important" %}
-<div markdown="span" class="alert alert-warning" role="alert"><i class="fa-solid fa-exclamation-triangle"></i> <b>Important:</b> {{include.content}}</div>
-{%- elsif include.type == "note" %}
-<div markdown="span" class="alert alert-info" role="alert"><i class="fa-solid fa-info-circle"></i> <b>Note:</b> {{include.content}}</div>
-{%- elsif include.type == "warning" %}
-<div markdown="span" class="alert alert-danger" role="alert"><i class="fa-solid fa-exclamation-circle"></i> <b>Warning:</b> {{include.content}}</div>
-{%- endif %}
+{%- assign type = include.type | default: "note" -%}
+{%- assign content = include.content | markdownify | strip -%}
+{%- case type -%}
+  {%- when "tip" -%}
+    {%- assign default_title = "Tip" -%}
+  {%- when "important" -%}
+    {%- assign default_title = "Important" -%}
+  {%- when "warning" -%}
+    {%- assign default_title = "Warning" -%}
+  {%- else -%}
+    {%- assign type = "note" -%}
+    {%- assign default_title = "Note" -%}
+{%- endcase -%}
+{%- assign title = include.title | default: default_title -%}
+<div class="callout callout--{{ type }}" role="alert">
+  <div class="callout__heading">{{ title }}</div>
+  <div class="callout__content">
+    {{ content }}
+  </div>
+</div>

data/_includes/contributor-card.html

@@ -17,12 +17,12 @@
   </div>
   {%- if include.git or include.email or include.orcid %}
   <div class="card-footer">
-    <div class="d-flex justify-content-center gap-2">
+    <div class="d-flex justify-content-center gap-2 flex-wrap">
       {%- if include.git %}
       <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="https://github.com/{{ include.git }}"><i class="fa-brands fa-github"></i><span class="visually-hidden">GitHub</span></a>
       {%- endif -%}
       {%- if include.email %}
-      <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="mailto:{{ include.email }}"><i class="fa-solid fa-envelope"></i><span class="visually-hidden">Email</span></a>
+      <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="mailto:{{ include.email }}"><i class="icon-mail"></i><span class="visually-hidden">Email</span></a>
       {%- endif -%}
       {%- if include.orcid %}
       <a class="btn bg-white text-primary hover-primary rounded-circle social-icons p-0" href="https://orcid.org/{{ include.orcid }}"><i class="fa-brands fa-orcid"></i><span class="visually-hidden">Orcid</span></a>

data/_includes/events.html

@@ -9,21 +9,24 @@
   {%- assign events = site.data.events | sort: "startDate" | reverse %}
     {%- endif %}
   {%- assign count = 0 %}
-  <ul class="list-unstyled mt-3">
+  <ul class="events-grid row row-cols-1 row-cols-md-{{ include.col | default: 1 }} gx-4 gy-0 list-unstyled mt-3">
     {%- for event in events %}
-    <li class='{{include.event_type}}' data-start='{{ event.startDate}}'>
-      <span class="title mb-1">{{ event.name | escape }}</span>
-      <p class="text-muted mb-0"><i class="far fa-calendar me-2"></i><time datetime="{{ event.startDate | date: '%e %B, %Y %H:%M' }}">{{ event.startDate | date_to_long_string }} {{event.startTime}}</time>
-        {% if event.endDate or event.endTime %} - <time datetime="{{ event.endDate | date: '%e %B, %Y %H:%M %Z' }}">{{ event.endDate | date_to_long_string }} {{event.endTime}}</time>{% endif %}</p>
-      {%- if event.location %}
-      <i class="fa-solid fa-map-marker-alt me-2 text-muted"></i>
-      <div class="d-inline-block text-muted">{{ event.location | markdownify }}</div>
-      {%- endif %}
+    <li class='col {{include.event_type}}' data-start='{{ event.startDate}}'>
+      <article class="event-card card h-100">
+      <div class="card-body d-flex flex-column p-4">
+      <div class="event-card-header d-flex align-items-start gap-3 mb-3">
+        <span class="event-card-icon d-inline-flex flex-shrink-0 align-items-center justify-content-center rounded-circle" aria-hidden="true"><i class="icon-calendar"></i></span>
+        <div>
+          <h3 class="title mt-0 mb-0">{{ event.name | escape }}</h3>
+          <p class="event-card-date text-muted mt-1 mb-0"><time datetime="{{ event.startDate | date: '%e %B, %Y %H:%M' }}">{{ event.startDate | date_to_long_string }} {{event.startTime}}</time>
+            {% if event.endDate or event.endTime %}<span class="event-date-range-separator" aria-hidden="true">&ndash;</span><time datetime="{{ event.endDate | date: '%e %B, %Y %H:%M %Z' }}">{{ event.endDate | date_to_long_string }} {{event.endTime}}</time>{% endif %}{% if event.location %}<span class="metadata-separator" aria-hidden="true">&middot;</span><i class="icon-map-pin me-1" aria-hidden="true"></i><span>{{ event.location | markdownify | remove: '<p>' | remove: '</p>' | strip }}</span>{% endif %}</p>
+        </div>
+      </div>
       {%- if event.description %}
       {%- assign word_count = event.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}}">
@@ -33,13 +36,15 @@
       {{ event.description | markdownify }}
       {%- endif %}
       {%- endif %}
+      </div>
+      </article>
     </li>
     {%- assign count = count | plus: 1 %}
     {%- endfor %}
   </ul>
   {%- if include.caption == true%}
   {%- assign caption_url = include.caption_url | default: "/events" %}
-  <small>An overview of all our events can be fount on the <a href="{{ caption_url | relative_url}}">events page</a>.</small>
+  <small>An overview of all our events can be found on the <a href="{{ caption_url | relative_url}}">events page</a>.</small>
   {%- endif %}
 </div>
 <script>

data/_includes/github-buttons.html

@@ -2,25 +2,25 @@
 {%- assign show_github_history_button = site.theme_variables.github_buttons.history %}
 {%- assign show_github_open_issue_button = site.theme_variables.github_buttons.open_issue %}
 {%- unless show_github_edit_button and show_github_history_button and show_github_open_issue_button == false %}
-<div id="edit-me" class="btn-group">
+<div id="edit-me" class="d-inline-flex align-items-center align-middle ms-2">
     {%- unless show_github_edit_button == false %}
     {%- assign repo_url = page.github.repository_url | default: site.github.repository_url %}
     {%- assign repo_branch = page.github.branch | default: site.github.source.branch %}
     {%- assign file_path = page.github.file_path | default: page.path %}
     <a role="button" data-bs-toggle="tooltip"
         title="Propose changes to the content of this page on {{site.theme_variables.git_host | default: 'GitHub' }}"
-        href="{{repo_url}}/blob/{{repo_branch}}/{{file_path}}" class="btn btn-sm hover-primary text-primary"><i
-            class="fa-solid fa-pencil-alt"></i></a>
+        href="{{repo_url}}/blob/{{repo_branch}}/{{file_path}}" class="btn btn-sm btn-icon-round rounded-circle p-0 d-inline-flex align-items-center justify-content-center"><i
+            class="icon-pencil"></i></a>
     {%- endunless %}
     {%- unless show_github_open_issue_button == false %}
     <a role="button" data-bs-toggle="tooltip" title="Report an issue"
         href="{{repo_url}}/issues/new?title={{'Issue on page: ' | url_encode }}{{page.title | url_encode }}&amp;body={{'I would like to report an issue on the ' | url_encode }}{{page.title | url_encode }}{{' page at `'| url_encode }}{{page.url | url_encode }}{{'`. Description of the issue:' | url_encode }}"
-        class="btn btn-sm hover-primary text-primary"><i class="fa-solid fa-exclamation"></i></a>
+        class="btn btn-sm btn-icon-round rounded-circle p-0 d-inline-flex align-items-center justify-content-center"><i class="icon-circle-alert"></i></a>
     {%- endunless %}
     {%- unless show_github_history_button == false %}
     <a role="button" data-bs-toggle="tooltip" title="Check out the history of this page"
-        href="{{repo_url}}/commits/{{repo_branch}}/{{file_path}}" class="btn btn-sm hover-primary text-primary"><i
-            class="fa-solid fa-history"></i></a>
+        href="{{repo_url}}/commits/{{repo_branch}}/{{file_path}}" class="btn btn-sm btn-icon-round rounded-circle p-0 d-inline-flex align-items-center justify-content-center"><i
+            class="icon-history"></i></a>
     {%- endunless %}
 </div>
 {%- endunless %}

data/_includes/head.html

@@ -40,7 +40,9 @@
     <!-- Syntax highlighting  -->
     <link rel="stylesheet" href="{{ 'assets/css/syntax.css' | relative_url }}">
     <!-- Country flags  -->
-    <link rel="stylesheet" href="{{ 'assets/css/flag-icon.min.css' | relative_url }}">
+    <link rel="stylesheet" href="{{ 'assets/css/flag-icons.min.css' | relative_url }}">
+    <!-- Lucide icon font -->
+    <link rel="stylesheet" type="text/css" href="{{ 'assets/css/lucide.css' | relative_url }}">
     <!-- Font Awesome -->
     <link rel="stylesheet" type="text/css" href="{{ 'assets/css/all.min.css' | relative_url }}">
     <!-- Main css file -->
@@ -92,13 +94,11 @@
                     language: {
                         searchPlaceholder: "Type here..."
                     },
-                    "drawCallback": function ( settings ){
-                        var tableId = settings.nTable.id;
-                        if(settings.fnRecordsTotal() < {{ pagelength }}){     
-                            $('#'+tableId+'_wrapper .dt-length').hide();
-                            $('#'+tableId+'_wrapper .dt-paging').hide();
-                            $('#'+tableId+'_wrapper .dt-search').hide();
-                            $('#'+tableId+'_wrapper .dt-info').hide();
+                    "drawCallback": function (){
+                        var api = this.api();
+                        var wrapper = $(api.table().container());
+                        if(api.page.info().recordsTotal < {{ pagelength }}){     
+                            wrapper.find('.dt-length, .dt-paging, .dt-search, .dt-info').hide();
                         }
                         $('.dt-layout-table .dt-layout-full').addClass('table-responsive');
                     }

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>