Multiple fixes (#2)

* variable improvements

* class changes

* border toc

* border toc

Author: bedroesb

_includes/resource-table-all.html

@@ -62,22 +62,22 @@ <h2>Relevant tools and resources</h2>
                 {%- if tool.registry.biotools %}
                 <a data-bs-toggle="tooltip"
                     data-bs-original-title="Find a scientific and technical description of the resource" href="https://bio.tools/{{tool.registry.biotools}}"
-                    ><span class="badge registry_badge">bio.tools</span></a>
+                    ><span class="badge bg-dark text-white hover-primary">bio.tools</span></a>
                 {%- endif %}
                 {%- if tool.registry.fairsharing %}
                 <a data-bs-toggle="tooltip"
                     data-bs-original-title="Find related policies and standards" href="https://fairsharing.org/FAIRsharing.{{tool.registry.fairsharing}}"
-                    ><span class="badge registry_badge">FAIRsharing</span></a>
+                    ><span class="badge bg-dark text-white hover-primary">FAIRsharing</span></a>
                 {%- endif %}
                 {%- if tool.registry.fairsharing-coll %}
                 <a data-bs-toggle="tooltip"
                     data-bs-original-title="Find related policies and standards" href="https://fairsharing.org/{{tool.registry.fairsharing-coll}}"
-                    ><span class="badge registry_badge">FAIRsharing</span></a>
+                    ><span class="badge bg-dark text-white hover-primary">FAIRsharing</span></a>
                 {%- endif %}
                 {%- if tool.registry.tess %}
                 <a data-bs-toggle="tooltip"
                     data-bs-original-title="Find training for this resource" href="https://tess.elixir-europe.org/search?q={{tool.registry.tess}}" 
-                    ><span class="badge registry_badge">TeSS</span></a>
+                    ><span class="badge bg-dark text-white hover-primary">TeSS</span></a>
                 {%- endif %}
                 </td> 
             </tr>

_includes/topnav.html

@@ -4,7 +4,7 @@
     <a class="visually-hidden-focusable" href='#footer'>Skip to footer</a>
     <nav class="navbar navbar-expand-lg mb-3 mb-lg-5">
         <div class="container">
-            <a class="navbar-brand" href="{{ 'index.html' | relative_url }}"><img class="me-3" alt="{{site.title}} logo" src="{{ 'assets/img/main_logo.svg' | relative_url }}">{% if site.topnav_title %}<span>{{site.topnav_title}}</span>{% endif %}</a>
+            <a class="navbar-brand" href="{{ 'index.html' | relative_url }}"><img class="me-3 img-fluid" alt="{{site.title}} logo" src="{{ 'assets/img/main_logo.svg' | relative_url }}">{% if site.topnav_title %}<span>{{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 fa-bars"></i>
             </button>

_includes/training-table-all.html

@@ -19,7 +19,7 @@
             <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="{{page.url | relative_url }}"><span class="badge default-badge">{{page.title}}</span></a></td>
-                <td>{%- if training.registry %}{%- if training.registry_url %}<a href="{{training.registry_url}}">{%- endif %}<span class="badge registry_badge">{{training.registry}}</span>{%- if training.registry_url %}</a>{%- endif %}{%- endif %}</td> 
+                <td>{%- if training.registry %}{%- if training.registry_url %}<a href="{{training.registry_url}}">{%- endif %}<span class="badge bg-dark text-white hover-primary">{{training.registry}}</span>{%- if training.registry_url %}</a>{%- endif %}{%- endif %}</td> 
             </tr>
             {%- endfor %}
             {%- endunless %}

_layouts/page.html

@@ -4,7 +4,7 @@
 <main id="main" class="mb-5">
     {%- if page.title %}
     {%- assign subtitle = page.type | replace: "_", " " | capitalize %}
-    <h1>{% unless subtitle == nil %}<span class="d-block text-secondary fs-4 ff-body">{{subtitle}}</span><span class="visually-hidden">:</span> {% endunless %}{{ page.title }}
+    <h1>{% unless subtitle == nil or subtitle == blank or subtitle == "" %}<span class="d-block text-secondary fs-4 ff-body">{{subtitle}}</span><span class="visually-hidden">:</span> {% endunless %}{{ page.title }}
         <div class="btn-group">
             {%- if page.custom-editme %}
             <a role="button" data-bs-toggle="tooltip" title="Propose changes to the content of this page on GitHub" href="{{site.github.repository_url}}/blob/master/{{page.custom-editme}}" class="btn hover-primary text-primary"><i class="fas fa-pencil-alt"></i></a>

_sass/_bootstrap_variables.scss

@@ -4,7 +4,7 @@ $secondary:     #6c757d;
 $light:         #f8f9fa;
 $dark:          #212529;
 
-/*-----Custom bootstrap values-----*/
+/*-----Custom values for Bootstrap variables-----*/
 $link-decoration: none;
 $nav-link-color: $dark;
 $nav-link-hover-color: $primary;

_sass/_custom_variables.scss

@@ -9,18 +9,25 @@ $btn-primary-color-hover: $white;
 /*-----Top navigation-----*/
 $topnav-bg: $light;
 $topnav-title-color: $primary;
+$topnav-brand-height: 44px;
+$topnav-border: 0;
 
 /*-----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;
 
 /*-----TOC-----*/
 $toc-bg: $light;
+$toc-border: 0;
 
 /*-----Section navigation tiles-----*/
 $nav-card-bg: $white;
@@ -48,7 +55,7 @@ $contr-crown-color: $white;
 /*-----Events & news-----*/
 $news-title-bg: $primary;
 
-/*-----Cookie banner-----*/
+/*-----Cookie consent banner-----*/
 $cookie-alert-bg: $light;
 
 /*-----Default badge-----*/
@@ -63,4 +70,5 @@ $footer-color: $dark;
 $footer-link-color: $dark;
 $footer-link-color-hover: $primary;
 $footer-copyright-bg: $gray-200;
+$footer-border: 0;
 

assets/css/main.scss

@@ -43,6 +43,11 @@ main {
     a:not(.btn):hover {
         text-decoration: underline;
     }
+
+    ol li,
+    ul li {
+        margin: 10px 0px;
+    }
 }
 
 .ff-body {
@@ -53,6 +58,8 @@ main {
     font-family: $font-family-theme !important;
 }
 
+/*-----Blockquote-----*/
+
 blockquote {
     margin-left: 20px;
     border-left: 5px solid $gray-600;
@@ -61,10 +68,9 @@ blockquote {
     border-radius: $border-radius;
 }
 
-/* Selection color */
+/*-----Selection color-----*/
 
 ::-moz-selection {
-    /* Code for Firefox */
     color: $white;
     background: $primary;
 }
@@ -74,20 +80,13 @@ blockquote {
     background: $primary;
 }
 
-/* End - Selection color */
-
-main ol li,
-main ul li {
-    margin: 10px 0px;
-}
-
-/* list circles colored */
+/*-----Color list marker-----*/
 
 ul li::marker {
     color: $primary;
 }
 
-/* position and size emoji */
+/*-----Emoji styling-----*/
 
 main img.emoji {
     margin: 0px 0px 0.2em 0px;
@@ -124,10 +123,11 @@ pre code {
 
 header .navbar {
     background-color: $topnav-bg;
+    border-bottom: $topnav-border;
     .navbar-brand {
         color: $topnav-title-color;
         img {
-            height: 40px;
+            height: $topnav-brand-height;
         }
     }
 }
@@ -268,6 +268,7 @@ ul#menu {
         > span {
             float: right;
             width: 15px;
+            margin-left: $btn-padding-x;
             text-align: center;
         }
 
@@ -283,25 +284,30 @@ ul#menu {
             transition: transform 0.2s ease-in-out;
         }
     }
-    li.active:not(.parent) > a {
-        background-color: $sidebar-bg-active;
-        color: $sidebar-color-active;
+    li.active {
+        &:not(.parent) > a {
+            background-color: $sidebar-bg-active;
+            color: $sidebar-color-active;
+        }
+        > a > span:after {
+            transform: rotate(-180deg);
+        }
     }
     ul {
         display: none;
         li {
             a {
-                padding-left: 30px;
+                margin-left: 30px;
+                background-color: $sidebar-lvl2-bg;
+                color: $sidebar-lvl2-color;
             }
             ul li a {
-                padding-left: 60px;
+                margin-left: 60px;
+                background-color: $sidebar-lvl3-bg;
+                color: $sidebar-lvl3-color;
             }
         }
     }
-
-    &.active > a > span:after {
-        transform: rotate(-180deg);
-    }
 }
 
 /*-----Summary under page title-----*/
@@ -322,27 +328,28 @@ ul#menu {
 
 #toc {
     background-color: $toc-bg;
-    /* Indent the lists and reset any other padding */
+    border: $toc-border;
+    // Indent the lists and reset any other padding
 
     ul {
         padding: 0 0 0 20px;
     }
 
-    /* Consistent vertical space between list items */
+    // Consistent vertical space between list items
 
     li,
     ul ul li {
         margin: 8px 0 0 0;
     }
 
-    /* Sublists */
+    // Sublists
 
     ul ul {
         list-style: circle outside;
     }
 }
 
-/* ---- Theme Badges-------- */
+/*-----Default badge-----*/
 
 .default-badge {
     font-weight: inherit;
@@ -369,7 +376,7 @@ table {
     @extend .table;
 }
 
-/* Name and description column improvements */
+// Tool table column width optimizations
 
 #tooltable {
     tr th:nth-child(1) {
@@ -392,23 +399,13 @@ table {
     font-weight: bold;
 }
 
-/*-----Registries in tool table------*/
-
-.registry_badge {
-    background-color: $dark;
-    color: $white;
-}
-
-.registry_badge:hover {
-    background-color: $primary;
-}
-
 /*-----Footer-----*/
 
 footer {
     font-size: 0.9em;
     line-height: 24px;
     background-color: $footer-bg;
+    border-top: $footer-border;
     color: $footer-color;
 
     a {
@@ -485,7 +482,7 @@ footer {
     }
 }
 
-/*--------Contributor list---------*/
+/*--------Page contributors---------*/
 .page-contributors {
     background-color: $contr-bg;
     .contributor-link {
@@ -512,7 +509,7 @@ footer {
     width: 130px;
 }
 
-/* ----- Cookie consent ----- */
+/*-----Cookie consent banner-----*/
 
 .cookiealert {
     position: fixed;
@@ -535,7 +532,7 @@ footer {
     transition-delay: 1000ms;
 }
 
-/*--------------Hover classes--------------*/
+/*-----Hoover classes-----*/
 
 .hover-primary:hover,
 .hover-primary:focus {
@@ -550,7 +547,7 @@ footer {
     color: $primary !important;
 }
 
-/*-------------- Fixed sizes --------------*/
+/*-----Size components-----*/
 
 .h-40px {
     height: 40px;
@@ -560,7 +557,7 @@ footer {
     height: 24px;
 }
 
-/*--------------News and events--------------*/
+/*-----News and events-----*/
 
 li.upcoming_event,
 li.past_event,
@@ -592,7 +589,7 @@ li.past_event,
         display: inline-block;
     }
 }
-/*--------------More information-------------*/
+/*-----More information tiles-----*/
 
 .info-card {
     background-color: $info-card-bg;
@@ -613,7 +610,7 @@ li.past_event,
     }
 }
 
-/*--------------Navigation tiles-------------*/
+/*-----Section navigation tiles-----*/
 
 .navigation-tiles {
     .card {
@@ -641,7 +638,7 @@ li.past_event,
     }
 }
 
-/*--------------Scaling presentations and videos-------------*/
+/*-----Scaling presentations and videos-----*/
 
 iframe.scale {
     height: 500px;