elixir-toolkit-theme 4.2.0 → 6.0.0

data/_includes/sidebar.html

@@ -9,39 +9,46 @@
 <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>
 </button>
-<nav class="collapse" id="side-nav" aria-label="Side navigation">
+<nav class="collapse text-muted" id="side-nav" aria-label="Side navigation">
     {%- if sidebar.title or sidebar.version %}
-    {%- if sidebar.title_url %}
-    {%- if page.url == sidebar.title_url %}
-    <a class="btn hover-primary text-start d-block mb-1 sidebar-title active" href="{{ sidebar.title_url | relative_url }}">{{sidebar.title}} {{sidebar.version}}</a>
-    {%- else %}
-    <a class="btn hover-primary text-start d-block mb-1 sidebar-title" href="{{ sidebar.title_url | relative_url }}">{{sidebar.title}} {{sidebar.version}}</a>
+    <div class="sidebar-title-wrapper pb-1 pt-2">
+        <a class="text-start d-block sidebar-title text-dark{% if page.url == sidebar.title_url %} active{%- endif %}{% unless sidebar.title_url %} disabled{%- endunless %}" {%- if sidebar.title_url %}href="{{ sidebar.title_url | relative_url }}"{%- endif %}>{{sidebar.title}} {{sidebar.version}}</a>
+    </div>    
     {%- endif %}
-    {%- else %}
-    <a class="btn text-start d-block mb-1 sidebar-title disabled" aria-disabled="true">{{sidebar.title}} {{sidebar.version}}</a>
-    {%- endif %}
-    {%- endif %}
-    <ul class="list-unstyled mb-4">
+    <ul id="sidebar-list-lvl-0"  class="list-unstyled mb-4{%- unless sidebar.title or sidebar.version %} pt-2{%- endunless %}">
+        {%- assign subitems_count = 0 %}
         {%- for folder in sidebar.subitems %}
-        {%- if page.url == folder.url %}
-        <li class="active{%- if folder.hr %} mt-3{% endif %}">
-        {%- else %}
-        <li {%- if folder.hr %} class="mt-3"{% endif %}>
+        <li class="d-flex align-items-center{%- if folder.hr %} mt-3{% endif %}">
+        {%- if folder.subitems %}
+        {%- assign subfolder_active = false %}
+        {%- for subfolder in folder.subitems %}
+        {%- if page.url == subfolder.url %}
+        {%- assign subfolder_active = true %}
+        {%- endif %}
+        {%- if subfolder.subitems %}
+        {%- for subsubfolder in subfolder.subitems %}
+        {%- if page.url == subsubfolder.url %}
+        {%- assign subfolder_active = true %}
+        {%- endif %}
+        {%- endfor %}
+        {%- endif %}
+        {%- endfor %}
         {%- endif %}
         {%- if folder.external_url %}
-            <a class="btn hover-primary text-start d-block mb-1" href="{{folder.external_url}}" target="_blank" rel="noopener">{{folder.title}}</a>
-        {%- else %}    
-            <a class="btn hover-primary text-start d-block mb-1" href="{{folder.url | relative_url }}">{{ folder.title }}</a>
+            <a class="text-start w-100" href="{{folder.external_url}}" target="_blank" rel="noopener">{{folder.title}}</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>
         {%- endif %}
         {%- if folder.subitems %}
-            <ul class="list-unstyled">
+         <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>
+        <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 %}
                 {%- for subfolder in folder.subitems %}
                 {%- if subfolder.RDM -%}
-                {%- if page.type == "data_life_cycle" %}
-                <li class="active sidebar_rdm_sub mb-1">
-                {% else %}
-                <li class="sidebar_rdm_sub mb-1">
-                {% endif %}
+                <li class="sidebar_rdm_sub mb-1{%- if page.type == 'Data_life_cycle' %} active{% endif %}">
                     <svg version="1.1" id="data-life-cycle" xmlns="http://www.w3.org/2000/svg"
                         xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 250.9 251"
                         style="enable-background:new 0 0 250.9 251;" xml:space="preserve" class="sidebar_rdm">
@@ -198,40 +205,49 @@
                     </svg>
                 </li>
                 {%- else %}
-                {%- if page.url == subfolder.url %}
-                <li class="active">
-                {%- else %}
-                <li>
+                <li class="d-flex align-items-center{%- if subfolder.hr %} mt-3{% endif %}">
+                {%- if subfolder.subitems %}
+                {%- assign subsubfolder_active = false %}
+                {%- for subsubfolder in subfolder.subitems %}
+                {%- if page.url == subsubfolder.url %}
+                {%- assign subsubfolder_active = true %}
+                {%- endif %}
+                {%- endfor %}
                 {%- endif %}
                 {%- if subfolder.external_url %}
-                    <a class="btn hover-primary text-start d-block mb-1" 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">{{subfolder.title}}</a>
                 {%- else %}    
-                    <a class="btn hover-primary text-start d-block mb-1" href="{{subfolder.url | relative_url }}">{{ 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 %}>{{ subfolder.title }}</a>
                 {%- endif %}
                 {%- if subfolder.subitems %}
-                    <ul class="list-unstyled">
+                <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>
+                </li>
+                <li class="py-0">
+                    <ul id="sidebar-list-lvl-2-{{subsubitems_count}}" class="list-unstyled collapse{%- if subsubfolder_active or page.url == subfolder.url %} show{% endif %}" data-bs-parent="#sidebar-list-lvl-1-{{subitems_count}}">
                         {%- for subsubfolder in subfolder.subitems %}
-                        {%- if page.url == subsubfolder.url %}
-                        <li class="active">
-                        {%- else %}
-                        <li>
-                        {%- endif %}
+                        <li class="d-flex align-items-center{%- if subsubfolder.hr %} mt-3{% endif %}">
                         {%- if subsubfolder.external_url %}
-                            <a class="btn hover-primary text-start d-block mb-1" href="{{subsubfolder.external_url}}" target="_blank" rel="noopener">{{subsubfolder.title}}</a>
-                        {%- else %}    
-                            <a class="btn hover-primary text-start d-block mb-1" href="{{subsubfolder.url | relative_url }}">{{ subsubfolder.title }}</a>
+                            <a class="text-start w-100" href="{{subsubfolder.external_url}}" target="_blank" rel="noopener">{{subsubfolder.title}}</a>
+                        {%- else %}
+                            <a class="text-start w-100{%- if page.url == subsubfolder.url %} active{% endif %}" href="{{subsubfolder.url | relative_url }}">{{ subsubfolder.title }}</a>
                         {%- endif %}
                         </li>
                         {%- endfor %}
                     </ul>
+                </li>
                 {%- endif %}
-                {%- endif %}
+                {%- unless subfolder.subitems %}
                 </li>
+                {%- endunless  %}
+                {%- endif %}
+                {%- assign subsubitems_count = subsubitems_count | plus: 1 %}
                 {%- endfor %}
             </ul>
         {%- endif %}
-        </li>
+        </li>        
+        {%- assign subitems_count = subitems_count | plus: 1 %}
         {%- endfor %}
     </ul>
-    <script>$("li.active").parents('li').toggleClass("active parent");</script>
 </nav>

data/_includes/toc.html

@@ -19,7 +19,7 @@
       classes: { list: 'list-unstyled mb-4' },
       showSpeed: 0,
       headers: '{{site.theme_variables.toc.headings | default: "main h2" }}',
-      title: '<strong class="my-2">On this page</strong><hr class="my-2">' 
+      title: '<strong class="my-0 my-xl-2 pt-2 d-block text-dark">On this page</strong><hr class="mt-2">' 
     });
     // After generating the TOC, check the hash in the URL and scroll to the anchor if present
     if (window.location.hash) {

data/_includes/topnav.html

@@ -1,8 +1,9 @@
 <!-- Navigation -->
 <header>
+    <a class="visually-hidden-focusable" href='#side-nav'>Skip to aside</a>
     <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">
+    <nav class="navbar navbar-{{ site.theme_variables.topnav.theme | default: 'light' }} 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">

data/_layouts/default.html

@@ -1,12 +1,12 @@
 <!doctype html>
 <html lang="en">
 {% include head.html %}
-<body class="d-flex flex-column min-vh-100"{% if page.toc or page.toc == nil %} data-bs-spy="scroll" data-bs-target="#toc-contents" data-bs-smooth-scroll="true" tabindex="0"{% endif %}>
+<body class=""{% if page.toc or page.toc == nil %} data-bs-spy="scroll" data-bs-target="#toc-contents" data-bs-smooth-scroll="true" tabindex="0"{% endif %}>
     {% if site.topnav_banner %}{% include banner.html %}{% endif %}
     {% if jekyll.environment == "development" and site.theme_variables.dev-info-banner == true %}{% include dev-info.html %}{% endif %}
-    {% include topnav.html %}
+    {% include topnav.html search=site.theme_variables.topnav.search %}
     <!-- Page Content -->
-    <div class="container g-lg-5 flex-grow-1">
+    <div class="container g-lg-5">
         <!-- Content Row -->
         <div {% if page.sidebar %}id="layout" class="gap-5"{% endif %}>
             <!-- Sidebar -->

data/_layouts/page.html

@@ -1,14 +1,14 @@
 ---
 layout: default
 ---
-<main id="main" class="order-1{%- if page.toc or page.toc == nil or page.page_img %} add-grid{% endif %}">
+<main id="main" class="min-vh-100{%- if page.toc or page.toc == nil or page.page_img %} add-grid{% endif %}">
     <div id="intro">
         {%- if site.theme_variables.breadcrumb %}
         {% include breadcrumb.html %}
         {%- endif %}
         {%- if page.title %}
         {%- if page.type and site.theme_variables.breadcrumb != true %}
-        {%- assign subtitle = page.type | replace: "_", " " | capitalize %}
+        {%- assign subtitle = page.type | replace: "_", " " %}
         <h1 class="has-subtitle order-1 order-md-0"><span class="d-block text-secondary fs-4 ff-body">{{subtitle}}</span><span class="visually-hidden">:</span> {{ page.title }}
         {%- else %}
         <h1>{{ page.title }}
@@ -35,9 +35,9 @@ layout: default
         {%- if page.page_id %}
         {% include resource-table-all.html tag=page.page_id %}
         {%- endif %}
-        {% include affiliation-tiles-page.html %}
-        {% include contributor-minitiles-page.html %}
-        {% include citation-page.html %}
+        
+        {% include page-metadata-tabs.html %}
+        
         {%- if site.theme_variables.github_buttons.position == "bottom" %}
         <div id="github-buttons-wrapper" class="d-flex mt-5">
             {% include github-buttons.html %}

data/_sass/_bootstrap_variables.scss

@@ -7,4 +7,5 @@ $light:         #f8f9fa;
 $dark:          #212529;
 
 /*-----Custom values for Bootstrap variables-----*/
-$link-decoration: none;
+
+

data/_sass/_variables.scss

@@ -10,40 +10,34 @@ $btn-primary-color-hover: $white;
 $topnav-bg: $light;
 $topnav-title-color: $primary;
 $topnav-brand-height: 44px;
+$topnav-searchbar: $white;
 
 /*-----Search-----*/
 $search-result-color: $primary;
 
 /*-----Sidebar-----*/
-$sidebar-bg: $light;
-$sidebar-color: $dark;
-$sidebar-lvl2-bg: $white;
-$sidebar-lvl2-color: $dark;
-$sidebar-lvl3-bg: $white;
-$sidebar-lvl3-color: $dark;
-$sidebar-bg-active: $primary;
-$sidebar-color-active: $white;
+$sidebar-title-bg: $white;
+$sidebar-link-color-active: $primary !default;
+$sidebar-link-bg-active:rgba($primary, 0.08) !default;
 
 /*-----Section navigation tiles-----*/
 $nav-card-bg: $light;
 $nav-card-color: $dark;
-$nav-card-bg-hover: $primary;
-$nav-card-color-hover: $white;
+$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: $primary;
-$info-card-color-hover: $white;
+$info-card-bg-hover: rgba($primary, 0.08) !default;
+$info-card-color-hover: $dark;
 
 /*-----Contributors-cards-----*/
 $contr-card-bg: $light;
 
-/*-----Page contributors-----*/
-$contr-bg: $light;
-$contr-link-bg: $white;
-$contr-crown-bg: $dark;
-$contr-crown-color: $white;
+/*-----Page metadata-----*/
+$page-metadata-bg: rgba($primary, 0.08);
+$page-metadata-link-bg: $white;
 $contr-popover-bg: $white;
 
 /*-----Events & news-----*/