elixir-toolkit-theme 6.1.0 → 7.0.0

data/_includes/section-navigation-tiles.html

@@ -1,45 +1,53 @@
-{%- if include.affiliations == true or include.search == true %}
+{%- assign show_supported_by = include.supported_by -%}
+{%- if show_supported_by == nil -%}{%- assign show_supported_by = include.affiliations -%}{%- endif -%}
+{%- if show_supported_by == true or include.search == true %}
 {%- assign allcountries = site.data.countries %}
 {%- for current_page in site.pages | sorted %}
-{%- if current_page.affiliations and current_page.search_exclude != true and current_page.type == include.type %}
-{%- assign pageaffiliations = current_page.affiliations | join: ", " %}
+{%- assign current_page_supported_by = current_page.supported_by -%}
+{%- if current_page_supported_by == nil -%}{%- assign current_page_supported_by = current_page.affiliations -%}{%- endif -%}
+{%- if current_page_supported_by and current_page.search_exclude != true and current_page.type == include.type %}
+{%- assign pagesupporters = current_page_supported_by | join: ", " %}
 {%- if allaffiliations %}
-{%- assign allaffiliations = allaffiliations | append: ", " | append: pageaffiliations %}
+{%- assign allaffiliations = allaffiliations | append: ", " | append: pagesupporters %}
 {%- else %}
-{%- assign allaffiliations = allaffiliations | append: pageaffiliations %}
+{%- assign allaffiliations = allaffiliations | append: pagesupporters %}
 {%- endif %}
 {%- endif %}
 {%- endfor %}
 {%- assign allaffiliations = allaffiliations | split: ", " | uniq | sort %}
 <div class="row g-4 row-cols-1 row-cols-md-2 row-cols-lg-{{ include.col | default: 2 }} my-4">
-    {%- if include.affiliations == true %}
+    {%- if show_supported_by == true %}
     <div class="col">
-        <div class="input-group">
-            <label class="input-group-text" for="affiliations-input">Filter by affiliation</label>
-            <select class="form-select" id="affiliations-input" aria-label="Example select with button addon">
-                <option selected="" value="reset">Choose...</option>
-                {%- for affiliation in allaffiliations %}
-                {%- if affiliation.size == 2 %}
-                {%- assign country = affiliation | upcase %}
-                <option value="{{country | slugify}}">{{allcountries[country]}}</option>
-                {%- else %}
-                <option value="{{affiliation | slugify}}">{{affiliation}}</option>
-                {%- endif %}
-                {%- endfor %}
-            </select>
-            <button class="btn btn-primary" title="Button to clear affiliations selection" type="button" id="clearfilter">
-                <i class="fa-solid fa-backspace"></i>
+        <div class="navigation-tile-filter d-flex align-items-center gap-2">
+            <div class="input-group flex-grow-1">
+                <label class="input-group-text" for="affiliations-input">Supported by:</label>
+                <select class="form-select" id="affiliations-input" aria-label="Select a supporter">
+                    <option selected="" value="reset">Choose...</option>
+                    {%- for affiliation in allaffiliations %}
+                    {%- if affiliation.size == 2 %}
+                    {%- assign country = affiliation | upcase %}
+                    <option value="{{country | slugify}}">{{allcountries[country]}}</option>
+                    {%- else %}
+                    <option value="{{affiliation | slugify}}">{{affiliation}}</option>
+                    {%- endif %}
+                    {%- endfor %}
+                </select>
+            </div>
+            <button class="btn btn-sm btn-icon-round rounded-circle p-0 d-inline-flex align-items-center justify-content-center flex-shrink-0" data-bs-toggle="tooltip" title="Clear supporter selection" aria-label="Clear supporter selection" type="button" id="clearfilter">
+                <i class="icon-trash-2"></i>
             </button>
         </div>
     </div>
     {%- endif %}
     {%- if include.search == true %}
     <div class="col">
-        <div class="input-group">
-            <span class="input-group-text" id="search-label-tiles"><i class="fa-solid fa-magnifying-glass"></i></span>
-            <input type="text" id="title-search" class="form-control" onkeyup="StartSearch();" placeholder="Find your page..." aria-label="{{page.type | replace: '_', ' ' }}" aria-describedby="search-label-tiles">
-            <button class="btn btn-primary" title="Button to clear search" type="button" id="clearsearch">
-                <i class="fa-solid fa-backspace"></i>
+        <div class="navigation-tile-filter d-flex align-items-center gap-2">
+            <div class="input-group flex-grow-1">
+                <span class="input-group-text" id="search-label-tiles"><i class="icon-search"></i></span>
+                <input type="text" id="title-search" class="form-control" onkeyup="StartSearch();" placeholder="Find your page..." aria-label="{{page.type | replace: '_', ' ' }}" aria-describedby="search-label-tiles">
+            </div>
+            <button class="btn btn-sm btn-icon-round rounded-circle p-0 d-inline-flex align-items-center justify-content-center flex-shrink-0" data-bs-toggle="tooltip" title="Clear search" aria-label="Clear search" type="button" id="clearsearch">
+                <i class="icon-trash-2"></i>
             </button>
         </div>
     </div>
@@ -50,7 +58,7 @@
     {%- if include.custom %}
     {%- assign related_pages = include.custom | split: ", " %}
     {%- unless include.sort == false %}
-    {%- assign related_pages = related_pages | sort %}
+    {%- assign related_pages = related_pages | sort_natural %}
     {%- endunless %}
     {%- elsif include.type %}
     {%- assign related_pages = site.pages | where:"type", include.type %}
@@ -58,7 +66,7 @@
     {%- assign related_pages = site.pages %}
     {%- endif %}
     {%- unless include.sort == false %}
-    {%- assign related_pages = related_pages | sort: 'title'%}
+    {%- assign related_pages = related_pages | sort_natural: 'title'%}
     {%- endunless %}
     {%- for related_page in related_pages %}
     {%- if include.custom %}
@@ -70,77 +78,19 @@
     {%- assign except = include.except | split: ", " %}
     {%- if current_page.title and current_page.search_exclude != true %}
     {%- unless except contains current_page.name %}
-    {%- if current_page.affiliations %}
+    {%- assign current_page_supported_by = current_page.supported_by -%}
+    {%- if current_page_supported_by == nil -%}{%- assign current_page_supported_by = current_page.affiliations -%}{%- endif -%}
+    {%- if current_page_supported_by %}
     {%- capture affiliations_classes -%}
     {%- assign affiliations_output = "" %}
-    {%- for affiliation in current_page.affiliations %}
+    {%- for affiliation in current_page_supported_by %}
     {%- assign group_affiliations = affiliation | slugify | prepend: " " %}
     {%- assign affiliations_output = affiliations_output | append: group_affiliations | strip %}
     {%- endfor %}{{affiliations_output}}
     {%- endcapture -%}
     {%- endif %}
     <div class="col" data-affiliations="{{affiliations_classes}}">
-        <div class="card h-100">
-            {%- if current_page.page_img %}
-            <div class="d-flex">
-            {%- endif %}
-            <div class="card-body d-flex flex-column">
-                <div class="d-flex align-items-center">
-                    {%- if current_page.type_img %}
-                    <img src="{{current_page.type_img | relative_url}}" class="type-icon me-2" alt="{{current_page.type}} icon">
-                    {%- endif %}
-                    {%- if current_page.type %}
-                    <span class=""><small>{{current_page.type | replace: "_", " " }}</small></span>
-                    {%- endif %}
-                </div>
-                <a class="stretched-link section-title" aria-label="Go to the {{current_page.title}} page" href="{{ current_page.url | relative_url }}">
-                    <b>{{current_page.title}}</b>
-                </a>
-                {%- if current_page.description %}
-                <p class="card-text h-100">{{ current_page.description}}</p>
-                {%- endif %}
-                {%- if current_page.affiliations %}
-                {%- assign pageaffil = current_page.affiliations | sort %}
-                {%- assign alllogos = site.data.affiliations %}
-                {%- assign allcountries = site.data.countries %}
-                <div class="d-flex align-items-center flex-wrap gap-2">
-                    <span><b><small>Affiliations:</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 affiliation-img-sm">
-                            <span class="flag-icon flag-icon-{{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 affiliation-img-sm">
-                        {%- else %}
-                        {{filter_affiliation.name}}
-                        {%- endif %}
-                    </a>
-                    {%- endif %}
-                    {%- endfor %}
-
-                </div>
-                {%- endif %}
-            </div>
-            {%- if current_page.page_img %}
-            {%- capture file_url -%}
-            {{ "/images/" | append: current_page.page_img | relative_url }}
-            {%- endcapture -%}
-                <img alt="logo of {{current_page.title}}" src="{{ file_url }}" class="page-img-sm pt-3 pe-3" />   
-            </div>
-            {%- endif %}
-        </div>
+        {% include navigation-tile-card.html tile_page=current_page variant="section" %}
     </div>
     {% endunless %}
     {%- endif %}
@@ -148,10 +98,10 @@
 </div>
 
 
-{%- if include.affiliations == true or include.search == true %}
+{%- if show_supported_by == true or include.search == true %}
 <script type="text/javascript">
     /** 
-     * Filter cards by affiliation
+     * Filter cards by supporter
      */
 
     $(document).ready(function () {

data/_includes/sidebar-item-label.html

@@ -0,0 +1,4 @@
+{%- if include.item.icon -%}
+<i class="{{ include.item.icon | escape }} sidebar-icon" aria-hidden="true"></i>
+{%- endif -%}
+<span class="sidebar-link-text">{{ include.item.title }}</span>

data/_includes/sidebar.html

@@ -7,7 +7,7 @@
 {%- capture collecting -%}{%- if page.url == "/collecting" -%}st6{%- else -%}st16{%- endif -%}{%- endcapture -%}
 {%- capture sharing -%}{%- if page.url == "/sharing" -%}st7{%- else -%}st17{%- endif -%}{%- endcapture -%}
 <button class="btn text-start d-lg-none hover-primary collapsed sidebar-collapse w-100 mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#side-nav" aria-controls="side-nav" aria-expanded="true" aria-label="Toggle navigation">
-    {{ page.sidebar | capitalize | replace: "_", " " }} menu <i title="navbar-toggler" class="fa-solid fa-bars ms-2"></i>
+    {{ page.sidebar | capitalize | replace: "_", " " }} menu <i title="navbar-toggler" class="icon-menu ms-2"></i>
 </button>
 <nav class="collapse text-muted" id="side-nav" aria-label="Side navigation">
     {%- if sidebar.title or sidebar.version %}
@@ -35,14 +35,15 @@
         {%- endfor %}
         {%- endif %}
         {%- if folder.external_url %}
-            <a class="text-start w-100" href="{{folder.external_url}}" target="_blank" rel="noopener">{{folder.title}}</a>
+            <a class="text-start w-100" href="{{folder.external_url}}" target="_blank" rel="noopener">{% include sidebar-item-label.html item=folder %}</a>
         {%- else %}
-            <a class="text-start w-100{%- if page.url == folder.url %} active{% endif %}" {%- if folder.url %}href="{{folder.url | relative_url }}"{% else %}data-bs-toggle="collapse" data-bs-target="#sidebar-list-lvl-1-{{subitems_count}}" aria-expanded="{{subfolder_active}}" aria-controls="sidebar-list-lvl-1-{{subitems_count}}"{% endif %}>{{ folder.title }}</a>
+            <a class="text-start w-100{%- if page.url == folder.url %} active{% endif %}" {% if folder.url %}href="{{folder.url | relative_url }}"{% else %}data-bs-toggle="collapse" data-bs-target="#sidebar-list-lvl-1-{{subitems_count}}" aria-expanded="{{subfolder_active}}" aria-controls="sidebar-list-lvl-1-{{subitems_count}}"{% endif %}>{% include sidebar-item-label.html item=folder %}</a>
         {%- endif %}
         {%- if folder.subitems %}
-         <button type="button" class="btn btn-sm btn-link rounded-circle{%- unless subfolder_active or page.url == folder.url or page.type == 'Data_life_cycle' and folder.title == 'Data life cycle' %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#sidebar-list-lvl-1-{{subitems_count}}" aria-expanded="{{subfolder_active}}" aria-controls="sidebar-list-lvl-1-{{subitems_count}}">
-            <i class="fa-solid fa-chevron-right"></i><span class="visually-hidden">Expand sidebar</span>
+         <button type="button" class="btn btn-sm btn-icon-round rounded-circle p-0 d-inline-flex align-items-center justify-content-center{%- unless subfolder_active or page.url == folder.url or page.type == 'Data_life_cycle' and folder.title == 'Data life cycle' %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#sidebar-list-lvl-1-{{subitems_count}}" aria-expanded="{{subfolder_active}}" aria-controls="sidebar-list-lvl-1-{{subitems_count}}">
+            <i class="icon-chevron-right"></i><span class="visually-hidden">Expand sidebar</span>
           </button>
+        </li>
         <li class="py-0">
             <ul id="sidebar-list-lvl-1-{{subitems_count}}" class="list-unstyled collapse{%- if subfolder_active or page.url == folder.url or page.type == 'Data_life_cycle' and folder.title == 'Data life cycle' %} show{% endif %}" data-bs-parent="#sidebar-list-lvl-0">
                 {%- assign subsubitems_count = 0 %}
@@ -215,13 +216,13 @@
                 {%- endfor %}
                 {%- endif %}
                 {%- if subfolder.external_url %}
-                    <a class="text-start w-100" href="{{subfolder.external_url}}" target="_blank" rel="noopener">{{subfolder.title}}</a>
+                    <a class="text-start w-100" href="{{subfolder.external_url}}" target="_blank" rel="noopener">{% include sidebar-item-label.html item=subfolder %}</a>
                 {%- else %}    
-                    <a class="text-start w-100{%- if page.url == subfolder.url %} active{% endif %}" {%- if subfolder.url %}href="{{subfolder.url | relative_url }}"{% else %}data-bs-toggle="collapse" data-bs-target="#sidebar-list-lvl-2-{{subsubitems_count}}" aria-expanded="{{subsubfolder_active}}" aria-controls="sidebar-list-lvl-2-{{subsubitems_count}}"{% endif %}>{{ subfolder.title }}</a>
+                    <a class="text-start w-100{%- if page.url == subfolder.url %} active{% endif %}" {% if subfolder.url %}href="{{subfolder.url | relative_url }}"{% else %}data-bs-toggle="collapse" data-bs-target="#sidebar-list-lvl-2-{{subsubitems_count}}" aria-expanded="{{subsubfolder_active}}" aria-controls="sidebar-list-lvl-2-{{subsubitems_count}}"{% endif %}>{% include sidebar-item-label.html item=subfolder %}</a>
                 {%- endif %}
                 {%- if subfolder.subitems %}
-                <button type="button" class="btn btn-sm btn-link rounded-circle{%- unless subsubfolder_active or page.url == subfolder.url %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#sidebar-list-lvl-2-{{subsubitems_count}}" aria-expanded="{{subsubfolder_active}}" aria-controls="sidebar-list-lvl-2-{{subsubitems_count}}">
-                    <i class="fa-solid fa-chevron-right"></i><span class="visually-hidden">Expand sidebar</span>
+                <button type="button" class="btn btn-sm btn-icon-round rounded-circle p-0 d-inline-flex align-items-center justify-content-center{%- unless subsubfolder_active or page.url == subfolder.url %} collapsed{% endunless %}" data-bs-toggle="collapse" data-bs-target="#sidebar-list-lvl-2-{{subsubitems_count}}" aria-expanded="{{subsubfolder_active}}" aria-controls="sidebar-list-lvl-2-{{subsubitems_count}}">
+                    <i class="icon-chevron-right"></i><span class="visually-hidden">Expand sidebar</span>
                 </button>
                 </li>
                 <li class="py-0">
@@ -229,9 +230,9 @@
                         {%- for subsubfolder in subfolder.subitems %}
                         <li class="d-flex align-items-center{%- if subsubfolder.hr %} mt-3{% endif %}">
                         {%- if subsubfolder.external_url %}
-                            <a class="text-start w-100" href="{{subsubfolder.external_url}}" target="_blank" rel="noopener">{{subsubfolder.title}}</a>
+                            <a class="text-start w-100" href="{{subsubfolder.external_url}}" target="_blank" rel="noopener">{% include sidebar-item-label.html item=subsubfolder %}</a>
                         {%- else %}
-                            <a class="text-start w-100{%- if page.url == subsubfolder.url %} active{% endif %}" href="{{subsubfolder.url | relative_url }}">{{ subsubfolder.title }}</a>
+                            <a class="text-start w-100{%- if page.url == subsubfolder.url %} active{% endif %}" href="{{subsubfolder.url | relative_url }}">{% include sidebar-item-label.html item=subsubfolder %}</a>
                         {%- endif %}
                         </li>
                         {%- endfor %}

data/_includes/{affiliation-logo.html → supported-by-logo.html}

@@ -1,8 +1,8 @@
 {%- if include.image_url -%}
-  <img src="{{ include.image_url | relative_url }}" alt="{{ include.name }}" class="affiliation-img">
+  <img src="{{ include.image_url | relative_url }}" alt="{{ include.name }}" class="supported-by-img">
 {%- elsif include.country_code -%}
   <div class="ratio ratio-4x3">
-    <div class="rounded shadow-sm flag-icon flag-icon-{{ include.country_code | downcase }}">
+    <div class="rounded shadow-sm fi fi-{{ include.country_code | downcase }}">
     </div>
   </div>
 {%- else -%}

data/_includes/supported-by-tiles-page.html

@@ -0,0 +1,32 @@
+{%- assign supporter_data = site.data.affiliations | default: site.data.supported_by %}
+{%- assign supported_by_list = include.supported_by_list | default: include.affiliations_list %}
+{%- unless include.sort == false %}
+{%- assign supported_by_list = supported_by_list | sort %}
+{%- else %}
+{%- assign supported_by_list = supported_by_list %}
+{%- endunless %}
+<div class="d-flex flex-wrap gap-2">
+  {%- for supporter_name in supported_by_list -%}
+    {%- if supporter_name.size == 2 -%}
+      
+      {%- assign country_code = supporter_name | upcase %}
+      {%- assign country_link = site.pages | where:"country_code",country_code | first %}
+      {%- assign country_name = site.data.countries[country_code] %}
+
+      {%- if country_link %}
+        <a role="button" data-bs-toggle="tooltip" title="{{country_name}}" class="btn btn-sm d-flex align-items-center supported-by-link hover-primary" href="{{country_link.url | relative_url}}">
+      {%- else %}
+        <a role="button" data-bs-toggle="tooltip" title="{{country_name}}" class="btn btn-sm supported-by-link d-flex align-items-center disabled border-0" aria-disabled="true">
+      {%- endif %}
+        <div class="d-flex justify-content-center supported-by-flag">
+          {%- include supported-by-logo.html country_code=country_code name=country_code -%}
+        </div>
+      </a>
+    {%- else -%}
+      {%- assign supporter_info = supporter_data | where:"name",supporter_name | first %}
+      <a class="btn btn-sm supported-by-link d-flex align-items-center justify-content-center hover-primary" data-bs-toggle="tooltip" title="{{supporter_info.name}}" href="{{supporter_info.url}}">
+        <img src="{{supporter_info.image_url | relative_url}}" alt="{{supporter_info.name}}" class="supported-by-img">
+      </a>
+    {%- endif -%}
+  {%- endfor -%}
+</div>

data/_includes/supported-by-tiles-selection.html

@@ -0,0 +1,22 @@
+{%- assign alllogos = site.data.affiliations | default: site.data.supported_by %}
+<div class="supported-by-tiles row row-cols-2 row-cols-sm-3 row-cols-md-4 g-4 my-3">
+  {%- assign filtered_logos = alllogos %}
+  {%- if include.type %}
+    {%- assign filtered_logos = filtered_logos | where: "type", include.type %}
+  {%- endif %}
+  {%- unless include.sort == false %}
+    {%- assign filtered_logos = filtered_logos | sort: "name" %}
+  {%- endunless %}
+  {%- for affiliation in filtered_logos %}
+  {%- if affiliation.image_url and affiliation.expose == true %}
+  <div class="col">
+    <div class="card h-100">
+      {% if affiliation.url %}<a class="h-100 d-flex align-items-center justify-content-center stretched-link rounded" href="{{ affiliation.url }}">{% else %}<div class="h-100 d-flex align-items-center justify-content-center">{% endif %}
+        <img class="p-3" src="{{ affiliation.image_url | relative_url }}" alt="{{ affiliation.name }}">
+        <span class="supported-by-name" aria-hidden="true">{{ affiliation.name }}</span>
+      {%- if affiliation.url %}</a>{% else %}</div>{% endif %}
+    </div>
+  </div>
+  {%- endif %}
+  {%- endfor %}
+</div>

data/_includes/toc.html

@@ -46,7 +46,7 @@
   });
 </script>
 <button id="btn-toc-hide" class="btn bg-light me-auto d-xl-none hover-primary mb-3" type="button" data-bs-toggle="collapse" data-bs-target="#toc-contents" aria-expanded="true" aria-controls="toc-contents">
-  <i class="fa-solid fa-up-right-and-down-left-from-center me-2"></i>On this page
+  <i class="icon-panel-top-open me-2"></i>On this page
 </button>
 <nav id="toc-contents" class="collapse" aria-label="Table of contents"></nav>
-{% endif %}
+{% endif %}

data/_includes/topnav.html

@@ -1,13 +1,15 @@
 <!-- Navigation -->
 <header>
+    {%- if page.sidebar %}
     <a class="visually-hidden-focusable" href='#side-nav'>Skip to aside</a>
+    {%- endif %}
     <a class="visually-hidden-focusable" href='#main'>Skip to content</a>
     <a class="visually-hidden-focusable" href='#footer'>Skip to footer</a>
-    <nav class="navbar navbar-{{ site.theme_variables.topnav.theme | default: 'light' }} navbar-expand-lg mb-3 mb-lg-5 shadow-sm">
+    <nav class="navbar navbar-expand-lg mb-3 mb-lg-5 shadow-sm">
         <div class="container g-lg-5">
             <a class="navbar-brand flex-grow-1 overflow-x-auto" href="{{ '/' | relative_url }}"><img class="{% if site.topnav_title %}me-3 {% endif %}img-fluid" alt="{{site.title}} logo" src="{{ site.theme_variables.topnav.brand_logo | default: 'assets/img/main_logo.svg' | relative_url }}">{% if site.topnav_title %}<span class="me-0 me-lg-3">{{site.topnav_title}}</span>{% endif %}</a>
             <button class="navbar-toggler text-primary" type="button" data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
-                <i title="navbar-toggler" class="fa-solid fa-bars"></i>
+                <i title="navbar-toggler" class="icon-menu"></i>
             </button>
             <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
                 <ul class="navbar-nav pt-3 pt-lg-0 pb-2 pb-lg-0 gap-2">
@@ -44,13 +46,7 @@
                     </li>
                     {%- endfor %}
                     {%- if topnav.subitems.size > 1 %}
-                    {%- assign topnav_theme = site.theme_variables.topnav.theme | default: "light" %}
-                    {%- if topnav_theme == "light" %}
-                    {%- assign break_color = "dark" %}
-                    {%- else %}
-                    {%- assign break_color = "light" %}
-                    {%- endif -%}
-                    <li class="nav-item nav-break bg-{{break_color}} opacity-25"></li>
+                    <li class="nav-item nav-break" aria-hidden="true"></li>
                     {%- endif %}
                     {%- if site.theme_variables.topnav.twitter %}
                     <li class="nav-item">
@@ -87,10 +83,10 @@
                     {%- endif %}
                     {%- unless include.search == false %}
                     <!--start search-->
-                    <li class="nav-item">
+                    <li class="nav-item d-lg-flex align-items-center">
                         <div class="position-relative">
                             <form role="search" class="input-group">
-                                <span class="input-group-text" id="search-label"><i class="fa-solid fa-magnifying-glass"></i></span><input type="search" id="search-input" class="search-input form-control" tabindex="0" placeholder="Search..." aria-label="Search..." autocomplete="off">
+                                <span class="input-group-text" id="search-label"><i class="icon-search"></i></span><input type="search" id="search-input" class="search-input form-control" tabindex="0" placeholder="Search..." aria-label="Search..." autocomplete="off">
                             </form>
                             <div id="search-results" class="search-results"></div>
                         </div>

data/_includes/training-table-all.html

@@ -5,7 +5,7 @@
             <tr class="text-nowrap">
                 <th>Name
                     <a data-bs-toggle="tooltip" data-bs-original-title="This is a curated subset of (and not a comprehensive list of all) training resources on relevant topics - you'll typically find only training resources referenced in pages of this website.">
-                        <i class="fa-solid fa-info-circle"></i>
+                        <i class="icon-info"></i>
                     </a>
                 </th>
                 <th>Related page</th>
@@ -26,7 +26,7 @@
             {%- if actual_training %}
             {%- for training in page.training %}
             <tr>
-                <td><a href="{{training.url | relative_url }}">{{training.name}}{%- if training.name == 'Training in TeSS'%} about {{page.title}}{%- endif %}</a></td>
+                <td><a href="{{training.url | relative_url }}">{{training.name}}</a></td>
                 <td><a href="{{page.url | relative_url }}"><span class="badge default-badge">{{page.title}}</span></a></td>
                 <td>{%- if training.registry %}<span class="badge bg-dark text-white hover-primary">{{training.registry}}</span>{%- endif %}</td>
             </tr>

data/_sass/_custom_classes.scss

@@ -1,6 +0,0 @@
-/*-----Top navigation-----*/
-
-.navbar-nav .nav-item > a.active {
-    border-bottom: 4px solid $primary;
-    margin-bottom: -4px;
-}

data/_sass/_variables.scss

@@ -11,6 +11,10 @@ $topnav-bg: $light;
 $topnav-title-color: $primary;
 $topnav-brand-height: 44px;
 $topnav-searchbar: $white;
+$topnav-link-color: $navbar-light-color !default;
+$topnav-link-color-active: $primary !default;
+$topnav-link-bg-active: rgba($primary, 0.08) !default;
+$topnav-break-color: rgba($dark, 0.25) !default;
 
 /*-----Search-----*/
 $search-result-color: $primary;
@@ -25,12 +29,10 @@ $nav-card-bg: $light;
 $nav-card-color: $dark;
 $nav-card-bg-hover: rgba($primary, 0.08) !default;
 $nav-card-color-hover: $dark;
-
-/*-----More information tiles-----*/
-$info-card-bg: $light;
-$info-card-color: $dark;
-$info-card-bg-hover: rgba($primary, 0.08) !default;
-$info-card-color-hover: $dark;
+$nav-card-arrow-bg: rgba($primary, 0.08) !default;
+$nav-card-arrow-bg-hover: $primary !default;
+$nav-card-arrow-color: $primary !default;
+$nav-card-arrow-color-hover: $white !default;
 
 /*-----Contributors-cards-----*/
 $contr-card-bg: $light;
@@ -40,10 +42,9 @@ $page-metadata-bg: rgba($primary, 0.08);
 $page-metadata-link-bg: $white;
 $contr-popover-bg: $white;
 
-/*-----Events & news-----*/
-$news-title-bg: $primary;
-$news-border-color: $light;
-$news-title-color: $white;
+/*-----News-----*/
+$news-accent-color: $primary;
+$news-timeline-color: $gray-300;
 
 /*-----Default badge-----*/
 $badge-color: $body-color;

data/_sass/bootstrap/_accordion.scss

@@ -134,17 +134,12 @@
     &:last-child { border-bottom: 0; }
 
     // stylelint-disable selector-max-class
-    > .accordion-header .accordion-button {
-      &,
-      &.collapsed {
-        @include border-radius(0);
-      }
-    }
-    // stylelint-enable selector-max-class
-
-    > .accordion-collapse {
+    > .accordion-collapse,
+    > .accordion-header .accordion-button,
+    > .accordion-header .accordion-button.collapsed {
       @include border-radius(0);
     }
+    // stylelint-enable selector-max-class
   }
 }
 

data/_sass/bootstrap/_button-group.scss

@@ -39,7 +39,7 @@
   // Prevent double borders when buttons are next to each other
   > :not(.btn-check:first-child) + .btn,
   > .btn-group:not(:first-child) {
-    margin-left: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-left: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -126,7 +126,7 @@
 
   > .btn:not(:first-child),
   > .btn-group:not(:first-child) {
-    margin-top: calc(#{$btn-border-width} * -1); // stylelint-disable-line function-disallowed-list
+    margin-top: calc(-1 * #{$btn-border-width}); // stylelint-disable-line function-disallowed-list
   }
 
   // Reset rounded corners
@@ -135,7 +135,12 @@
     @include border-bottom-radius(0);
   }
 
-  > .btn ~ .btn,
+  // The top radius should be 0 if the button is:
+  // - the "third or more" child
+  // - the second child and the previous element isn't `.btn-check` (making it the first child visually)
+  // - part of a btn-group which isn't the first child
+  > .btn:nth-child(n + 3),
+  > :not(.btn-check) + .btn,
   > .btn-group:not(:first-child) > .btn {
     @include border-top-radius(0);
   }

data/_sass/bootstrap/_card.scss

@@ -193,8 +193,7 @@
     // The child selector allows nested `.card` within `.card-group`
     // to display properly.
     > .card {
-      // Flexbugs #4: https://github.com/philipwalton/flexbugs#flexbug-4
-      flex: 1 0 0%;
+      flex: 1 0 0;
       margin-bottom: 0;
 
       + .card {
@@ -207,13 +206,13 @@
         &:not(:last-child) {
           @include border-end-radius(0);
 
-          .card-img-top,
-          .card-header {
+          > .card-img-top,
+          > .card-header {
             // stylelint-disable-next-line property-disallowed-list
             border-top-right-radius: 0;
           }
-          .card-img-bottom,
-          .card-footer {
+          > .card-img-bottom,
+          > .card-footer {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-right-radius: 0;
           }
@@ -222,13 +221,13 @@
         &:not(:first-child) {
           @include border-start-radius(0);
 
-          .card-img-top,
-          .card-header {
+          > .card-img-top,
+          > .card-header {
             // stylelint-disable-next-line property-disallowed-list
             border-top-left-radius: 0;
           }
-          .card-img-bottom,
-          .card-footer {
+          > .card-img-bottom,
+          > .card-footer {
             // stylelint-disable-next-line property-disallowed-list
             border-bottom-left-radius: 0;
           }