elixir-toolkit-theme 1.26.0 → 2.1.0

data/_includes/topnav.html

@@ -9,11 +9,11 @@
                 <i title="navbar-toggler" class="fa-solid fa-bars"></i>
             </button>
             <div class="collapse navbar-collapse justify-content-end" id="navbarCollapse">
-                <ul class="navbar-nav">
+                <ul class="navbar-nav gap-2">
                     <!-- navigation entries -->
                     {%- assign topnav = site.data.topnav %}
                     {%- for item in topnav.subitems %}
-                    <li class="nav-item {% if item.subitems %}dropdown {% endif %}ms-0 ms-lg-3 mt-2 mt-lg-0">
+                    <li class="nav-item {% if item.subitems %}dropdown {% endif %}">
                         {%- assign page_sidebar = page.sidebar | downcase | replace: "-", "_" | replace: " ", "_" %}
                         {%- assign nav_title = item.title | downcase | replace: "-", "_" | replace: " ", "_" %}
                         {%- if item.external_url %}
@@ -49,15 +49,15 @@
                     {%- else %}
                     {%- assign break_color = "light" %}
                     {%- endif -%}
-                    <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0 nav-break bg-{{break_color}} opacity-25"></li>
+                    <li class="nav-item nav-break bg-{{break_color}} opacity-25"></li>
                     {%- endif %}
                     {%- if site.theme_variables.topnav.twitter %}
-                    <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0">
+                    <li class="nav-item">
                         <a class="nav-link ps-2 d-flex align-items-center" href="{{site.theme_variables.topnav.twitter}}"><i class="fa-brands fa-twitter me-2"></i>Twitter</a>
                     </li>
                     {%- endif %}
                     {%- if site.theme_variables.topnav.github or site.theme_variables.topnav.github == nil %}
-                    <li class="nav-item ms-0 ms-lg-3 mt-2 mt-lg-0">
+                    <li class="nav-item">
                         <a class="nav-link ps-2 d-flex align-items-center" href="{{site.github.repository_url}}">
                             {%- assign git_host = site.theme_variables.git_host | downcase %}
                             {%- if git_host == 'gitlab' %}
@@ -71,7 +71,7 @@
                     {%- endif %}
                     {%- unless include.search == false %}
                     <!--start search-->
-                    <li class="nav-item ms-0 ms-lg-3 my-2 my-lg-0">
+                    <li class="nav-item">
                         <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 {{ site.title }}" aria-label="Search {{ site.title }}" autocomplete="off">

data/_layouts/default.html

@@ -7,17 +7,13 @@
     <!-- Page Content -->
     <div class="container flex-grow-1">
         <!-- Content Row -->
-        <div class="row gx-0 gx-lg-5">
-            {%- assign content_col_size = "col-lg-12" %}{% unless page.hide_sidebar %}
-            <!-- Sidebar Column -->
-            <div class="col-lg-3 mb-0 mb-lg-4">
+        <div id="layout" class="gap-5">
+            <!-- Sidebar -->
+            <aside id="sidebar">
                 {% include sidebar.html %}
-            </div>
-            {%- assign content_col_size = "col-lg-9" %}{% endunless %}
-            <!-- Content Column -->
-            <div class="{{content_col_size}}">
-                {{content}}
-            </div>
+            </aside>
+            <!-- Content -->
+            {{content}}
         </div>
     </div>
     {%- if site.theme_variables.back_to_top or site.theme_variables.back_to_top == nil %}

data/_layouts/page.html

@@ -1,38 +1,43 @@
 ---
 layout: default
 ---
-<main id="main" class="mb-5">
-    {%- if page.title %}
-    {%- if page.type %}
-    {%- assign subtitle = page.type | replace: "_", " " | capitalize %}
-    <h1 class="has-subtitle"><span class="d-block text-secondary fs-4 ff-body">{{subtitle}}</span><span class="visually-hidden">:</span> {{ page.title }}
-    {%- else %}
-    <h1>{{ page.title }}
-    {%- endif %}
-    {%- if site.theme_variables.github_buttons.position == "top" or site.theme_variables.github_buttons.position == nil %}
-    {% include github-buttons.html %}
-    {%- endif %}
-    </h1>
-    {%- endif %}
-    {%- if page.summary %}
-    <div class="summary">{{page.summary}}</div>
-    {%- endif %}
-    {%- unless page.toc == false %}
-    {%- include toc.html %}
-    {%- endunless %}
-    {{content}}
-    {% include resource-table-page.html %}
-    {% include related-pages.html %}
-    {% include more-information-tiles.html %}
-    {%- if page.page_id %}
-    {% include resource-table-all.html tag=page.page_id %}
-    {%- endif %}
-    {% include affiliation-tiles-page.html %}
-    {% include contributor-minitiles-page.html %}
-    {%- if site.theme_variables.github_buttons.position == "bottom" %}
-    <div id="github-buttons-wrapper" class="d-flex mt-5">
-    {% include github-buttons.html %}
+<main id="main" class="order-1">
+    <div id="intro">
+        {%- if page.title %}
+        {%- if page.type %}
+        {%- assign subtitle = page.type | replace: "_", " " | capitalize %}
+        <h1 class="has-subtitle"><span class="d-block text-secondary fs-4 ff-body">{{subtitle}}</span><span class="visually-hidden">:</span> {{ page.title }}
+        {%- else %}
+        <h1>{{ page.title }}
+        {%- endif %}
+        {%- if site.theme_variables.github_buttons.position == "top" or site.theme_variables.github_buttons.position == nil %}
+        {% include github-buttons.html %}
+        {%- endif %}
+        </h1>
+        {%- endif %}
+        {%- if page.summary %}
+        <div class="summary">{{page.summary}}</div>
+        {%- endif %}
+    </div>
+    <div id="toc" class="text-muted sticky-lg-top">
+        {%- include toc.html %}
+    </div>
+    <div id="content" class="mb-5" data-bs-spy="scroll" data-bs-target="#toc-contents" data-bs-smooth-scroll="true" tabindex="0">
+        {{content}}
+        {% include resource-table-page.html %}
+        {% include related-pages.html %}
+        {% include more-information-tiles.html %}
+        {%- if page.page_id %}
+        {% include resource-table-all.html tag=page.page_id %}
+        {%- endif %}
+        {% include affiliation-tiles-page.html %}
+        {% include contributor-minitiles-page.html %}
+        {%- if site.theme_variables.github_buttons.position == "bottom" %}
+        <div id="github-buttons-wrapper" class="d-flex mt-5">
+        {% include github-buttons.html %}
+        </div>
+        {%- endif %}
     </div>
-    {%- endif %}
 </main>
 
+

data/_sass/_bootstrap_variables.scss

@@ -1,4 +1,4 @@
-@import "bootstrap/functions";
+
 
 /*-----Theme colors-----*/
 $primary:       #0d6efd;
@@ -8,5 +8,3 @@ $dark:          #212529;
 
 /*-----Custom values for Bootstrap variables-----*/
 $link-decoration: none;
-
-@import "bootstrap/variables";

data/_sass/_variables.scss

@@ -24,9 +24,6 @@ $sidebar-lvl3-color: $dark;
 $sidebar-bg-active: $primary;
 $sidebar-color-active: $white;
 
-/*-----TOC-----*/
-$toc-bg: $light;
-
 /*-----Section navigation tiles-----*/
 $nav-card-bg: $light;
 $nav-card-header-bg: $secondary;

data/assets/css/main.scss

@@ -1,23 +1,34 @@
 --- 
 layout: none
-permalink: assets/css/main.css
+permalink: assets/css/main
 ---
 
 /*-----Default theme variables-----*/
+
+@import "bootstrap/functions";
 $popover-max-width: 12em;
 $enable-caret: false;
 $card-border-width: 0;
+$custom-container-max-widths: (
+    xxxl: 1500px,
+);
 
-/*-----Include other SASS files-----*/
+/*-----Initialize Bootstrap variables-----*/
 
 @import "bootstrap_variables";
+@import "bootstrap/variables";
+
+/*-----Custom maps-----*/
+$container-max-widths: map-merge($container-max-widths, $custom-container-max-widths);
+
+/*-----Include other SASS files-----*/
 @import "bootstrap/bootstrap";
 @import "variables";
 @import "custom_variables";
 
 /*-----General styling-----*/
 
-main {
+#content {
     h1 {
         font-family: $font-family-theme;
         font-weight: 400;
@@ -67,10 +78,10 @@ main {
             font-weight: 600;
         }
     }
+}
 
-    img {
-        @extend .img-fluid;
-    }
+body img {
+    @extend .img-fluid;
 }
 
 .ff-body {
@@ -81,6 +92,78 @@ main {
     font-family: $font-family-theme !important;
 }
 
+/*-----Layout-----*/
+
+#main {
+    grid-area: main;
+}
+
+
+    
+@include media-breakpoint-up(md) {
+    #main {
+        display: grid;
+        grid-template-areas:
+            "intro"
+            "toc"
+            "content";
+        grid-template-rows: auto auto 1fr;
+    }
+}
+@include media-breakpoint-up(lg) {
+    #main {
+        grid-template-areas:
+            "intro toc"
+            "content toc";
+        grid-template-rows: auto 1fr;
+    }
+
+    .add-grid {
+        grid-template-columns: 5fr 2fr;
+    }
+}
+
+#toc {
+    grid-area: toc;
+    display: none;
+}
+
+@include media-breakpoint-up(lg) {
+    #toc {
+        top: $spacer * 3;
+        right: 0;
+        z-index: 2;
+        height: calc(100vh - 7rem);
+        overflow-y: auto;
+        margin-left: $spacer * 3;
+    }
+}
+
+#intro {
+    grid-area: intro;
+}
+
+#sidebar {
+    grid-area: sidebar;
+}
+
+#content {
+    grid-area: content;
+    min-width: 1px;
+    position: relative;
+    h2:first-child {
+        margin-top: 0;
+    }
+}
+
+@include media-breakpoint-up(lg) {
+    #layout {
+        display: grid;
+        grid-template-areas: "sidebar main";
+        grid-template-columns: 2fr 9fr;
+    }
+}
+
 /*-----Blockquote-----*/
 
 blockquote {
@@ -153,7 +236,7 @@ header .navbar {
         color: $topnav-title-color;
 
         img {
-            height: $topnav-brand-height;
+            max-height: $topnav-brand-height;
         }
     }
 }
@@ -169,7 +252,7 @@ header .navbar {
     font-weight: 900;
     margin-left: 0.25rem;
     content: "\f0d7";
-    transition: transform 0.2s ease-in-out;
+    transition: transform 0.15s ease-in-out;
 }
 
 .dropdown-toggle[aria-expanded="true"]::after {
@@ -292,15 +375,14 @@ header .navbar {
 /*-----Sidebar-----*/
 
 @include media-breakpoint-up(lg) {
-    #side-nav {
+    #sidebar > nav {
         display: block !important;
     }
 }
 
-#side-nav .btn.sidebar-title {
+#sidebar > nav .btn.sidebar-title {
     color: $sidebar-color;
-    background-color: transparent;
-    border-color: transparent;
+    border: 0;
 }
 
 .sidebar-collapse {
@@ -318,7 +400,7 @@ header .navbar {
     background-color: $sidebar-bg-active;
 }
 
-#side-nav > ul {
+#sidebar > nav > ul {
     > li:not(.sidebar-title) > a {
         background-color: $sidebar-bg;
         color: $sidebar-color;
@@ -341,7 +423,7 @@ header .navbar {
             font-family: "Font Awesome 6 Free";
             font-weight: 900;
             content: "\f078";
-            transition: transform 0.2s ease-in-out;
+            transition: transform 0.15s ease-in-out;
         }
     }
 
@@ -391,25 +473,32 @@ header .navbar {
 
 /*-----TOC-----*/
 
-#toc {
-    background-color: $toc-bg;
-    // Indent the lists and reset any other padding
-
+#toc-contents {
+    @include media-breakpoint-up(lg) {
+        display: block !important;
+    } // Indent the lists and reset any other padding
     ul {
-        padding: 0 0 0 20px;
+        // highlighting active links
+        a {
+            color: inherit;
+            padding-left: 0.25rem;
+            border-left: 0.125rem solid transparent;
+            display: block;
+            transition: border-left 0.15s ease-in-out;
+            &.active,
+            &:hover {
+                text-decoration: none !important;
+                border-left: 0.125rem solid $primary;
+                color: $primary;
+            }
+        }
     }
 
     // Consistent vertical space between list items
 
     li,
     ul ul li {
-        margin: 8px 0 0 0;
-    }
-
-    // Sublists
-
-    ul ul {
-        list-style: circle outside;
+        margin: 13px 0 0 0;
     }
 }
 
@@ -495,11 +584,11 @@ footer {
     }
 
     #ett-logo {
-        transition: color .15s ease-in-out;
+        transition: color 0.15s ease-in-out;
 
         .cls-1 {
             fill: $footer-ett;
-            transition: fill .15s ease-in-out;
+            transition: fill 0.15s ease-in-out;
         }
         &:hover {
             .cls-1 {
@@ -552,17 +641,31 @@ footer {
 }
 
 @include media-breakpoint-down(md) {
-    #contributors-carousel .card-title {
-        font-size: 0.5em;
-    }
+    #contributors-carousel {
+        .card-title {
+            font-size: 0.5em;
+        }
 
-    #contributors-carousel .card-affiliation {
-        color: $primary;
-        font-size: 0.4em;
-    }
+        .card-affiliation,
+        .badge {
+            font-size: 0.4em;
+        }
+
+        .card-body,
+        .card-footer {
+            padding: 0.5rem 0.25rem;
+        }
 
-    #contributors-carousel .card-body {
-        padding: 0rem 0.5rem 0.5rem 0.5rem;
+        .social-icons {
+            line-height: 2ex;
+            width: 2.2ex;
+            height: 2.2ex;
+            i {
+                font-size: 0.625em;
+                line-height: 0.1em;
+                vertical-align: 0.225em;
+            }
+        }
     }
 }
 
@@ -587,14 +690,6 @@ footer {
     text-align: center;
 }
 
-@include media-breakpoint-down(md) {
-    #contributors-carousel .social-icons {
-        line-height: 1.2ex;
-        width: 1.2ex;
-        height: 1.2ex;
-    }
-}
-
 /*--------Page contributors---------*/
 .page-contributors {
     background-color: $contr-bg;
@@ -669,6 +764,30 @@ footer {
     transition-delay: 1000ms;
 }
 
+/*-----Tools-----*/
+
+.tool {
+    cursor: pointer;
+    white-space: nowrap;
+    color: $link-color;
+    background-color: rgba($link-color, 0.05);
+    border-radius: $border-radius;
+    padding: 0.1rem 0.25rem;
+
+    &:hover {
+        text-decoration: none !important;
+        color: $primary;
+    }
+}
+
+.popover-tool {
+    max-width: 20rem;
+
+    h5 {
+        font-weight: bold;
+    }
+}
+
 /*-----Hoover classes-----*/
 
 .hover-primary:hover,

data/assets/js/main.js

@@ -31,7 +31,7 @@ $(document).ready(function () {
  */
 $(document).ready(function () {
     // Initialize navgoco with default options
-    $("#side-nav>ul").navgoco({
+    $("#sidebar>nav>ul").navgoco({
         caretHtml: '',
         accordion: true,
         openClass: 'active', // open
@@ -163,3 +163,14 @@ $(function () {
         })
     })
 })
+
+/**
+ * Activate popovers
+ */
+
+$(function () {
+    var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
+    var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
+        return new bootstrap.Popover(popoverTriggerEl)
+    })
+})

data/assets/js/toc.js

@@ -1,6 +1,6 @@
 // https://github.com/ghiculescu/jekyll-table-of-contents
-(function($){
-  $.fn.toc = function(options) {
+(function ($) {
+  $.fn.toc = function (options) {
     var defaults = {
       noBackToTopLinks: false,
       title: '<i>Jump to...</i>',
@@ -9,36 +9,39 @@
       listType: 'ol', // values: [ol|ul]
       showEffect: 'show', // values: [show|slideDown|fadeIn|none]
       showSpeed: 'slow', // set to 0 to deactivate effect
-      classes: { list: '',
-                 item: '',
-                 link: '', 
-                 toc: ''
-               }
+      classes: {
+        list: '',
+        item: '',
+        link: '',
+        toc: ''
+      }
     },
-    settings = $.extend(defaults, options);
+      settings = $.extend(defaults, options);
 
-    function fixedEncodeURIComponent (str) {
-      return encodeURIComponent(str).replace(/[!'()*]/g, function(c) {
+    function fixedEncodeURIComponent(str) {
+      return encodeURIComponent(str).replace(/[!'()*]/g, function (c) {
         return '%' + c.charCodeAt(0).toString(16);
       });
     }
 
-    function createLink (header) {
+    function createLink(header) {
       var innerText = (header.textContent === undefined) ? header.innerText : header.textContent;
-      return "<a class='"+settings.classes.link+"' href='#" + fixedEncodeURIComponent(header.id) + "'>" + innerText + "</a>";
+      return "<a class='" + settings.classes.link + "' href='#" + fixedEncodeURIComponent(header.id) + "'>" + innerText + "</a>";
     }
 
-    var headers = $(settings.headers).filter(function() {
+    var headers = $(settings.headers).filter(function () {
       // get all headers with an ID
-      var previousSiblingName = $(this).prev().attr( "name" );
+      var previousSiblingName = $(this).prev().attr("name");
       if (!this.id && previousSiblingName) {
-        this.id = $(this).attr( "id", previousSiblingName.replace(/\./g, "-") );
+        this.id = $(this).attr("id", previousSiblingName.replace(/\./g, "-"));
       }
       return this.id;
     }), output = $(this);
     if (!headers.length || headers.length < settings.minimumHeaders || !output.length) {
-      $(this).hide();
       return;
+    } else {
+      $('#main').addClass("add-grid");
+      $("#toc").show();
     }
 
     if (0 === settings.showSpeed) {
@@ -48,50 +51,50 @@
     $(this).addClass(settings.classes.toc)
 
     var render = {
-      show: function() { output.hide().html(html).show(settings.showSpeed); },
-      slideDown: function() { output.hide().html(html).slideDown(settings.showSpeed); },
-      fadeIn: function() { output.hide().html(html).fadeIn(settings.showSpeed); },
-      none: function() { output.html(html); }
+      show: function () { output.hide().html(html).show(settings.showSpeed); },
+      slideDown: function () { output.hide().html(html).slideDown(settings.showSpeed); },
+      fadeIn: function () { output.hide().html(html).fadeIn(settings.showSpeed); },
+      none: function () { output.html(html); }
     };
 
-    var get_level = function(ele) { return parseInt(ele.nodeName.replace("H", ""), 10); };
-    var highest_level = headers.map(function(_, ele) { return get_level(ele); }).get().sort()[0];
+    var get_level = function (ele) { return parseInt(ele.nodeName.replace("H", ""), 10); };
+    var highest_level = headers.map(function (_, ele) { return get_level(ele); }).get().sort()[0];
     var return_to_top = '<i class="icon-arrow-up back-to-top"> </i>';
 
     var level = get_level(headers[0]),
       this_level,
-      html = settings.title + " <" +settings.listType + " class=\"" + settings.classes.list +"\">";
-    headers.on('click', function() {
+      html = settings.title + " <" + settings.listType + " class=\"" + settings.classes.list + "\">";
+    headers.on('click', function () {
       if (!settings.noBackToTopLinks) {
         window.location.hash = this.id;
       }
     })
-    .addClass('clickable-header')
-    .each(function(_, header) {
-      this_level = get_level(header);
-      if (!settings.noBackToTopLinks && this_level === highest_level) {
-        $(header).addClass('top-level-header').after(return_to_top);
-      }
-      if (this_level === level) // same level as before; same indenting
-        html += "<li class=\"" + settings.classes.item + "\">" + createLink(header);
-      else if (this_level <= level){ // higher level than before; end parent ol
-        for(var i = this_level; i < level; i++) {
-          html += "</li></"+settings.listType+">"
+      .addClass('clickable-header')
+      .each(function (_, header) {
+        this_level = get_level(header);
+        if (!settings.noBackToTopLinks && this_level === highest_level) {
+          $(header).addClass('top-level-header').after(return_to_top);
         }
-        html += "<li class=\"" + settings.classes.item + "\">" + createLink(header);
-      }
-      else if (this_level > level) { // lower level than before; expand the previous to contain a ol
-        for(i = this_level; i > level; i--) {
-          html += "<" + settings.listType + " class=\"" + settings.classes.list +"\">" +
-                  "<li class=\"" + settings.classes.item + "\">"
+        if (this_level === level) // same level as before; same indenting
+          html += "<li class=\"" + settings.classes.item + "\">" + createLink(header);
+        else if (this_level <= level) { // higher level than before; end parent ol
+          for (var i = this_level; i < level; i++) {
+            html += "</li></" + settings.listType + ">"
+          }
+          html += "<li class=\"" + settings.classes.item + "\">" + createLink(header);
         }
-        html += createLink(header);
-      }
-      level = this_level; // update for the next one
-    });
-    html += "</"+settings.listType+">";
+        else if (this_level > level) { // lower level than before; expand the previous to contain a ol
+          for (i = this_level; i > level; i--) {
+            html += "<" + settings.listType + " class=\"" + settings.classes.list + "\">" +
+              "<li class=\"" + settings.classes.item + "\">"
+          }
+          html += createLink(header);
+        }
+        level = this_level; // update for the next one
+      });
+    html += "</" + settings.listType + ">";
     if (!settings.noBackToTopLinks) {
-      $(document).on('click', '.back-to-top', function() {
+      $(document).on('click', '.back-to-top', function () {
         $(window).scrollTop(0);
         window.location.hash = '';
       });