elixir-toolkit-theme 6.1.0 → 7.0.0

data/assets/css/main.scss

@@ -25,6 +25,8 @@ $input-border-width: 0 !default;
 $alert-border-width: 0 !default;
 $form-select-border-width: 0 !default;
 $card-border-width: 0 !default;
+$btn-icon-color: $primary !default;
+$btn-icon-bg-hover: rgba($primary, 0.08) !default;
 $enable-caret: false !default;
 $breadcrumb-font-size: 0.85rem !default;
 $breadcrumb-divider: '>' !default;
@@ -113,14 +115,22 @@ body img {
     font-family: $font-family-theme !important;
 }
 
+[class^="icon-"],
+[class*=" icon-"],
+.fa-brands {
+    font-size: 1.08em;
+    line-height: 1;
+    vertical-align: -.125em;
+}
+
 // Add external link icon to all urls
 #content a:is([href^="http"], [href^="//"]):not([href^="{{ site.url }}"]):not([href^="mailto:"]):not([href^="tel:"]):not(:has(> span:only-child)):not(:has(> img)):not(.btn):not(.no-ext-icon)::after {
-    content: "\f35d";
-    font-family: "Font Awesome 6 Free";
-    font-weight: 900;
+    content: "\e0b9";
+    font-family: "lucide";
+    font-weight: normal;
     display: inline-block;
     margin-left: .4em;
-    font-size: .60em;
+    font-size: .65em;
     line-height: 1;
     text-rendering: auto;
     -webkit-font-smoothing: antialiased;
@@ -218,11 +228,140 @@ body img {
 /*-----Blockquote-----*/
 
 blockquote {
-    margin-left: 20px;
-    border-left: 5px solid $gray-600;
-    padding-left: 10px;
-    color: $gray-600;
+    @extend .alert;
+    @extend .alert-light;
+    border-left-width: $border-width * 4;
     border-radius: $border-radius;
+    margin-left: 0;
+    margin-right: 0;
+}
+
+/*-----Callouts-----*/
+
+$callout-variants: (
+    note: primary,
+    tip: success,
+    warning: danger,
+    important: warning
+);
+
+$callout-titles: (
+    note: "Note",
+    tip: "Tip",
+    warning: "Warning",
+    important: "Important"
+);
+
+$callout-icons: (
+    note: "\e0f9",
+    tip: "\e1c2",
+    warning: "\e193",
+    important: "\e077"
+);
+
+@mixin callout-heading {
+    color: var(--#{$prefix}alert-color);
+    font-size: .75em;
+    font-weight: $font-weight-bold;
+    padding-left: $alert-padding-x * 1.5;
+    padding-bottom: $spacer * .125;
+    text-transform: uppercase;
+}
+
+@each $callout, $variant in $callout-variants {
+    blockquote.#{$callout},
+    .callout--#{$callout},
+    blockquote.#{$callout}-title {
+        @extend .alert;
+        @extend .alert-#{$variant};
+        border-left-width: $border-width * 4;
+    }
+
+    blockquote.#{$callout},
+    .callout--#{$callout},
+    blockquote.#{$callout}-title {
+        position: relative;
+        padding-left: $alert-padding-x;
+
+        &::after {
+            color: var(--#{$prefix}alert-color);
+            content: map-get($callout-icons, $callout);
+            font-family: "lucide";
+            font-size: 1.18em;
+            font-weight: normal;
+            left: $alert-padding-x;
+            position: absolute;
+            top: $alert-padding-y - .3rem;
+        }
+    }
+
+    @if map-has-key($callout-titles, $callout) {
+        blockquote.#{$callout} {
+            &::before {
+                @include callout-heading;
+                content: map-get($callout-titles, $callout);
+                display: block;
+            }
+        }
+    }
+
+    blockquote.#{$callout}-title {
+        > p:first-child {
+            @include callout-heading;
+            margin-bottom: 0;
+            margin-top: -1.5px;
+        }
+    }
+
+    blockquote.#{$callout},
+    blockquote.#{$callout}-title {
+        color: var(--#{$prefix}alert-color);
+        margin-left: 0;
+        margin-right: 0;
+    }
+
+    blockquote.#{$callout} > p:first-child,
+    blockquote.#{$callout}-title > p:nth-child(2) {
+        margin-top: 0;
+    }
+}
+
+blockquote,
+blockquote.important,
+blockquote.note,
+blockquote.tip,
+blockquote.warning,
+blockquote.important-title,
+blockquote.note-title,
+blockquote.tip-title,
+blockquote.warning-title {
+    > :last-child {
+        margin-bottom: 0;
+    }
+
+    > ol:last-child > li:last-child,
+    > ul:last-child > li:last-child {
+        margin-bottom: 0;
+    }
+
+    > .opaque:last-child > :last-child {
+        margin-bottom: 0;
+    }
+}
+
+// Legacy include callouts use the same heading and pseudo-icon layout as Markdown callouts.
+.callout {
+    .callout__heading {
+        @include callout-heading;
+    }
+
+    .callout__content > :last-child {
+        margin-bottom: 0;
+    }
+
+    .callout__content > :first-child {
+        margin-top: 0;
+    }
 }
 
 /*-----Selection color-----*/
@@ -285,9 +424,20 @@ div.highlight {
 
 header .navbar {
     background-color: $topnav-bg;
+
     #search-label, #search-input {
         background-color: $topnav-searchbar;
     }
+    #search-label {
+        align-items: center;
+        display: inline-flex;
+
+        i {
+            line-height: 1;
+            vertical-align: 0;
+        }
+    }
+
     .navbar-brand {
         color: $topnav-title-color;
 
@@ -295,38 +445,97 @@ header .navbar {
             max-height: $topnav-brand-height;
         }
     }
-}
 
-// More modern dropdown toggle
-.dropdown-toggle::after {
-    display: inline-block;
-    font-style: normal;
-    font-variant: normal;
-    text-rendering: auto;
-    -webkit-font-smoothing: antialiased;
-    font-family: "Font Awesome 6 Free";
-    font-weight: 900;
-    margin-left: 0.25rem;
-    content: "\f0d7";
-    transition: transform 0.15s ease-in-out;
-}
+    .dropdown-toggle {
+        align-items: center;
+        display: flex;
+    }
 
-.dropdown-toggle[aria-expanded="true"]::after {
-    transform: rotate(-180deg);
+    .navbar-nav > .nav-item > .nav-link {
+        color: $topnav-link-color;
+        border-radius: $border-radius;
+        transition: $transition-base;
+    }
+
+    .navbar-nav > .nav-item > .nav-link:hover,
+    .navbar-nav > .nav-item > .nav-link.active {
+        color: $topnav-link-color-active;
+        background-color: $topnav-link-bg-active;
+    }
+
+    .dropdown-menu {
+        padding: $spacer * 0.5;
+        border: 0;
+        box-shadow: $box-shadow;
+    }
+
+    .dropdown-item {
+        color: $topnav-link-color;
+        border-radius: $border-radius;
+        transition: $transition-base;
+
+        &:hover,
+        &:focus,
+        &:active,
+        &.active {
+            color: $topnav-link-color-active;
+            background-color: $topnav-link-bg-active;
+        }
+    }
 }
 
+
 // Break line in top navigation
 
 .nav-break {
+    flex: 0 0 auto;
+    background: linear-gradient(
+        to right,
+        transparent,
+        $topnav-break-color 30%,
+        $topnav-break-color 70%,
+        transparent
+    );
+
     @include media-breakpoint-up(lg) {
         width: 1px;
+        align-self: stretch;
+        background: linear-gradient(
+            to bottom,
+            transparent,
+            $topnav-break-color 30%,
+            $topnav-break-color 70%,
+            transparent
+        );
     }
 
     @include media-breakpoint-down(lg) {
         height: 1px;
+        width: 100%;
     }
 }
 
+/*-----More modern dropdown toggle-----*/
+.dropdown-toggle::after {
+    align-self: center;
+    display: inline-block;
+    font-style: normal;
+    font-variant: normal;
+    line-height: 1;
+    text-rendering: auto;
+    -webkit-font-smoothing: antialiased;
+    font-family: "lucide";
+    font-weight: normal;
+    margin-left: 0.25rem;
+    content: "\e06d";
+    transition: transform 0.15s ease-in-out;
+    vertical-align: 0;
+}
+
+.dropdown-toggle[aria-expanded="true"]::after {
+    transform: rotate(-180deg);
+}
+
 /*-----Search box top navigation-----*/
 
 .search-results {
@@ -478,10 +687,14 @@ header .navbar {
     margin-bottom: 0;
 
     li {
+        color: $text-muted;
         padding: 0.25rem 0.5rem;
         position: relative;
         
         a {
+            display: inline-flex;
+            align-items: center;
+            gap: 0.45rem;
             color: inherit;
             cursor: pointer;
             transition: $transition-base;
@@ -510,33 +723,38 @@ header .navbar {
             }
 
             &.active {
-                font-weight: 600;
                 color: $sidebar-link-color-active;
             }
         }
 
-        .btn {
-            transition: $transition-base;
-            color: inherit;
-            width: 1.85rem;
-            height: 1.75rem;
-            display: flex;
-            justify-content: center;
-            align-items: center;
+        .sidebar-icon {
+            color: currentColor;
+            flex: 0 0 1.15em;
+            line-height: 1;
+            text-align: center;
+        }
 
-            &:hover {
-                color: $sidebar-link-color-active;
-                background: $sidebar-link-bg-active;
-            }
+        .sidebar-link-text {
+            min-width: 0;
+        }
 
-            &:not(.collapsed) {
-                i {
-                    transform: rotate(90deg);
-                }
+        .btn-icon-round {
+            --bs-btn-color: #{$text-muted};
+            --bs-btn-hover-color: #{$sidebar-link-color-active};
+            --bs-btn-active-color: #{$sidebar-link-color-active};
+            --bs-btn-hover-bg: #{$sidebar-link-bg-active};
+            --bs-btn-active-bg: #{$sidebar-link-bg-active};
+            flex: 0 0 auto;
+            height: 1.85rem;
+            transition: background-color .15s ease-in-out, box-shadow .15s ease-in-out;
+            width: 1.85rem;
+
+            &:not(.collapsed) i {
+                transform: rotate(90deg);
             }
 
             i {
-                transition: $transition-base;
+                transition: transform .2s ease-in-out;
             }
         }
 
@@ -651,9 +869,33 @@ table {
         font-size: 0.9em;
     }
 
+
     p {
         margin-bottom: 0;
     }
+
+    .badge,
+    .btn-badge {
+        display: inline-flex;
+        align-items: center;
+        gap: .45rem;
+        line-height: 1;
+        vertical-align: middle;
+    }
+
+    .badge > [class^="icon-"],
+    .badge > [class*=" icon-"],
+    .btn-badge > [class^="icon-"],
+    .btn-badge > [class*=" icon-"] {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 auto;
+        width: 1em;
+        height: 1em;
+        margin-right: 0 !important;
+        vertical-align: 0;
+    }
 }
 
 .tooltable td:nth-child(1) a,
@@ -669,7 +911,36 @@ table {
     --bs-btn-font-size: .75em;
     --bs-btn-line-height: 1;
     --bs-btn-font-weight: 700;
-  }
+}
+
+.btn-icon-round {
+    --bs-btn-color: #{$btn-icon-color};
+    --bs-btn-hover-color: #{$btn-icon-color};
+    --bs-btn-active-color: #{$btn-icon-color};
+    --bs-btn-hover-bg: #{$btn-icon-bg-hover};
+    --bs-btn-active-bg: #{$btn-icon-bg-hover};
+    --bs-btn-border-color: transparent;
+    --bs-btn-hover-border-color: transparent;
+    --bs-btn-active-border-color: transparent;
+    --bs-btn-disabled-border-color: transparent;
+    --bs-btn-box-shadow: none;
+    --bs-btn-active-shadow: none;
+    --bs-btn-focus-box-shadow: none;
+    height: 2.25rem;
+    line-height: 1;
+    vertical-align: middle;
+    width: 2.25rem;
+
+    &.btn-sm {
+        height: 2rem;
+        width: 2rem;
+    }
+
+    > i {
+        line-height: 1;
+        vertical-align: 0;
+    }
+}
 
 /*-----Footer-----*/
 
@@ -813,14 +1084,11 @@ footer {
         }
 
         .social-icons {
-            line-height: 2ex;
             width: 2.2ex;
             height: 2.2ex;
 
             i {
                 font-size: 0.625em;
-                line-height: 0.1em;
-                vertical-align: 0.225em;
             }
         }
     }
@@ -841,16 +1109,28 @@ footer {
 /*-----------Social icons----------*/
 
 .social-icons {
-    line-height: 4ex;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex: 0 0 auto;
     width: 4ex;
     height: 4ex;
+    aspect-ratio: 1 / 1;
+    line-height: 1;
     text-align: center;
+    vertical-align: middle;
+
+    i {
+        display: block;
+        line-height: 1;
+        vertical-align: 0;
+    }
 }
 
 /*---- Page metadata ----*/
 .page-metadata {
     background-color: $page-metadata-bg;
-    .affiliation-link {
+    .supported-by-link {
         background-color: $page-metadata-link-bg;
     }
     .nav-link {
@@ -984,25 +1264,177 @@ footer {
     color: $primary !important;
 }
 
-/*-----Affiliation sizes-----*/
+/*-----Supported by-----*/
+
+.supported-by-tiles {
+    .card {
+        overflow: hidden;
+
+        .supported-by-name {
+            position: absolute;
+            right: 0;
+            bottom: 0;
+            left: 0;
+            z-index: 2;
+            padding: 0.5rem 0.75rem;
+            border-top-left-radius: $border-radius;
+            border-top-right-radius: $border-radius;
+            background-color: mix($primary, $white, 8%);
+            color: $nav-card-color-hover;
+            font-size: $font-size-sm;
+            font-weight: $font-weight-semibold;
+            text-align: center;
+            pointer-events: none;
+            transform: translateY(100%);
+            transition: transform 180ms ease-out;
+        }
+
+        &:hover,
+        &:focus-within {
+            .supported-by-name {
+                transform: translateY(0);
+            }
+        }
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .supported-by-tiles .supported-by-name {
+        transition: none;
+    }
+}
 
-.affiliation-img-sm {
+.supported-by-img-sm {
     height: 24px;
 }
 
-.affiliation-img {
+.supported-by-img {
     height: 45px;
 }
 
-.affiliation-flag {
+.supported-by-flag {
     width: 50px;
 }
 
-.affiliation-flag .ratio {
+.supported-by-flag .ratio {
     width: 35px;
 }
 
-/*-----News and events-----*/
+/*-----News-----*/
+
+.news-timeline {
+    position: relative;
+    max-width: 72rem;
+    margin-bottom: 0;
+    padding-left: 2.5rem;
+
+    &::before {
+        position: absolute;
+        top: .75rem;
+        bottom: 0rem;
+        left: .45rem;
+        width: 2px;
+        background: $news-timeline-color;
+        content: "";
+    }
+}
+
+.news-timeline-item {
+    position: relative;
+    margin: 0;
+    padding: 0 0 2.5rem;
+
+    &:last-child {
+        padding-bottom: 0;
+    }
+
+}
+
+#main .news-timeline-item {
+    margin: 0;
+}
+
+.news-timeline-content {
+    .title {
+        position: relative;
+        color: $headings-color;
+        font-size: 1.2rem;
+        font-weight: 650;
+        line-height: 1.35;
+
+        &::before {
+            position: absolute;
+            z-index: 1;
+            top: 50%;
+            left: -2.45rem;
+            width: .9rem;
+            height: .9rem;
+            border: 3px solid $body-bg;
+            border-radius: 50%;
+            background: $news-accent-color;
+            box-shadow: 0 0 0 2px $news-timeline-color;
+            content: "";
+            transform: translateY(-50%);
+        }
+    }
+
+    > *:last-child,
+    .full-description > *:last-child {
+        margin-bottom: 0;
+    }
+}
+
+.news-timeline-date {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    font-size: .9rem;
+    line-height: 1.45;
+
+    i {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        flex: 0 0 1.15rem;
+        width: 1.15rem;
+        height: 1.15rem;
+        text-align: center;
+        vertical-align: 0;
+    }
+
+    .news-metadata-item {
+        display: inline-flex;
+        align-items: center;
+    }
+}
+
+.metadata-separator {
+    margin: 0 .45rem;
+}
+
+.description-toggle {
+    margin-top: -1rem;
+}
+
+.description-toggle .icon-chevron-right {
+    transition: transform .2s ease-in-out;
+}
+
+.description-toggle[aria-expanded="true"] .icon-chevron-right {
+    transform: rotate(90deg);
+}
+
+@media (max-width: 575.98px) {
+    .news-timeline {
+        padding-left: 2rem;
+    }
+
+    .news-timeline-content .title::before {
+        left: -2rem;
+    }
+}
+
+/*-----Events-----*/
 
 li.upcoming_event,
 li.past_event,
@@ -1010,33 +1442,42 @@ li.past_event,
     display: none;
 }
 
-.events>ul>li,
-.news>ul>li {
-    border-left: $news-border-color 5px solid;
-    border-radius: $border-radius;
-    padding: 0px 11px;
+.events-grid {
+    row-gap: $spacer * 1.5;
+    margin-bottom: 0;
+}
 
-    i {
-        width: 20px;
-        text-align: center;
-    }
+
+.event-card {
+    background-color: $nav-card-bg;
+    color: $nav-card-color;
 
     .title {
-        background-color: $news-title-bg;
-        font-weight: 600;
-        color: $news-title-color;
-        padding: 0px 11px;
-        border-radius: 0px 4px 4px 0px;
-        margin-left: -11px;
-        display: inline-block;
+        color: $headings-color;
+        font-size: 1.2rem;
+        font-weight: 650;
+        line-height: 1.35;
     }
 
-    .full-description>*:last-child {
+    .card-body > *:last-child,
+    .full-description > *:last-child {
         margin-bottom: 0;
+    }
+}
 
-        li {
-            margin-bottom: 0;
-        }
+.event-card-icon {
+    width: 2.5rem;
+    height: 2.5rem;
+    background: rgba($news-accent-color, .1);
+    color: $news-accent-color;
+}
+
+.event-card-date {
+    font-size: .9rem;
+    line-height: 1.45;
+
+    .event-date-range-separator {
+        margin: 0 .25rem;
     }
 }
 
@@ -1068,73 +1509,86 @@ a.info-collapse {
 }
 
 // Add a bottom border to the last accordion.
-a.info-collapse[aria-expanded="false"]:last-of-type,
-a.info-collapse[aria-expanded="true"]:last-of-type+.show {
+a.info-collapse[aria-expanded="false"]:not(:has(~ a.info-collapse)),
+a.info-collapse[aria-expanded="true"]:not(:has(~ a.info-collapse))+.show {
     border-bottom: 1px solid $border-color;
 }
 
 // Collapsed content styling
 .info-card {
+    .info-logo-tile {
+        height: 3.25rem;
+        width: 3.25rem;
+    }
+
     .info-logo {
-        max-width: 250px;
-        max-height: 40px;
+        max-height: 2.25rem;
+        max-width: 2.65rem;
+        object-fit: contain;
     }
 
-    // Do not show border on last row tools table
-    .tooltable tbody tr:last-of-type {
-        border-bottom-color: transparent;
+    .info-logo-fairsharing {
+        background-color: rgba(#35a9e1, .08);
     }
 
-    .info-links {
-        a.btn {
-            background-color: $info-card-bg;
-            color: $info-card-color;
+    .info-logo-faircookbook {
+        background-color: rgba(#ef4358, .08);
+    }
 
-            i {
-                transition: $btn-transition;
-                color: $info-card-color !important;
-            }
+    .info-logo-dsw {
+        background-color: rgba(#f05a24, .08);
+    }
 
-            &:hover {
-                background-color: $info-card-bg-hover;
-                color: $info-card-color-hover !important;
+    .info-logo-rdmkit {
+        background-color: rgba(#2a2e3d, .08);
+    }
 
-                i {
-                    color: $info-card-color-hover !important;
-                }
-            }
-        }
+    .info-logo-training {
+        background-color: rgba($primary, .08);
+    }
 
-        img {
-            height: 30px;
-            max-width: 35px;
-        }
+    // Do not show border on last row tools table
+    .tooltable tbody tr:last-of-type {
+        border-bottom-color: transparent;
     }
 }
 
 /*-----Country flags-----*/
 
-.flag-icon {
+.fi {
     border-radius: 3px;
     background-size: cover;
 }
 
 /*-----Section navigation tiles-----*/
+.navigation-tile-filter {
+    .input-group {
+        min-width: 0;
+    }
+
+    .btn-icon-round {
+        @include button-variant($primary, $primary);
+        --#{$prefix}btn-active-shadow: none;
+    }
+}
+
 .navigation-tiles {
 
     .card,
     .btn {
         background-color: $nav-card-bg;
         color: $nav-card-color;
-        transition: $btn-transition;
+        position: relative;
+        transition: $transition-base;
 
-        &:hover {
+        &:hover,
+        &:focus-visible,
+        &:focus-within {
             background-color: $nav-card-bg-hover;
             color: $nav-card-color-hover;
 
             a.section-title {
                 text-decoration: none;
-                transition: $btn-transition;
                 color: $nav-card-color-hover;
             }
         }
@@ -1161,6 +1615,36 @@ a.info-collapse[aria-expanded="true"]:last-of-type+.show {
             max-height: 3.2em;
         }
     }
+
+    .navigation-tile-heading {
+        margin-top: $spacer * .25;
+    }
+
+    .navigation-tile-arrow {
+        align-items: center;
+        background-color: $nav-card-arrow-bg;
+        border-radius: 50%;
+        color: $nav-card-arrow-color;
+        display: inline-flex;
+        font-size: 1rem;
+        height: 2rem;
+        justify-content: center;
+        line-height: 1;
+        pointer-events: none;
+        transition: $transition-base;
+        width: 2rem;
+        z-index: 2;
+    }
+
+    .card:hover,
+    .card:focus-within,
+    >.col>.btn.section-title:hover,
+    >.col>.btn.section-title:focus-visible {
+        .navigation-tile-arrow {
+            background-color: $nav-card-arrow-bg-hover;
+            color: $nav-card-arrow-color-hover;
+        }
+    }
 }
 
 /*-----Scaling presentations and videos-----*/