Merge pull request #217 from gethinode/develop

v0.12.0 prerelease

.github/ISSUE_TEMPLATE/bug_report.md

@@ -27,8 +27,9 @@ If applicable, add a copy of Hugo's log messages.
 If applicable, add screenshots to help explain your problem.
 
 **Environment (please complete the following information):**
- - Host OS: [e.g. macOS Ventura 13.0]
- - Node version: [e.g. node v18.10.0]
+ - Hinode version: [e.g. v0.11.3]
+ - Host OS: [e.g. macOS Ventura 13.3]
+ - Node version: [e.g. node v18.15.0]
  - Hugo version: [e.g. hugo v0.109.0-47b12b83e636224e5e601813ff3e6790c191e371+extended darwin/amd64 BuildDate=2022-12-23T10:38:11Z VendorInfo=gohugoio]
  - Browser: [e.g. Google Chrome Version 108.0.5359.124 (Official Build) (arm64)]
 

.github/workflows/auto-merge.yml

@@ -0,0 +1,43 @@
+# Source: https://nicolasiensen.github.io/2022-07-23-automating-dependency-updates-with-dependabot-github-auto-merge-and-github-actions/
+name: Dependabot auto-merge
+on: pull_request_target
+
+permissions:
+  pull-requests: write
+  contents: write
+
+jobs:
+  review-dependabot-pr:
+    runs-on: ubuntu-latest
+    if: ${{ github.event.pull_request.user.login == 'dependabot[bot]' }}
+    steps:
+      - name: Dependabot metadata
+        id: metadata
+        uses: dependabot/fetch-metadata@v1
+        with:
+          github-token: "${{ secrets.GITHUB_TOKEN }}"
+      - name: Enable auto-merge for Dependabot PRs
+        run: gh pr merge --auto --merge "$PR_URL"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Approve patch and minor updates
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-patch' || steps.dependabot-metadata.outputs.update-type == 'version-update:semver-minor'}}
+        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a patch or minor update**"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Approve major updates of development dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:development'}}
+        run: gh pr review $PR_URL --approve -b "I'm **approving** this pull request because **it includes a major update of a dependency used only in development**"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}
+      - name: Comment on major updates of non-development dependencies
+        if: ${{steps.dependabot-metadata.outputs.update-type == 'version-update:semver-major' && steps.dependabot-metadata.outputs.dependency-type == 'direct:production'}}
+        run: |
+          gh pr comment $PR_URL --body "I'm **not approving** this PR because **it includes a major update of a dependency used in production**"
+          gh pr edit $PR_URL --add-label "requires-manual-qa"
+        env:
+          PR_URL: ${{github.event.pull_request.html_url}}
+          GITHUB_TOKEN: ${{secrets.GITHUB_TOKEN}}

assets/js/animation.js

@@ -0,0 +1,18 @@
+function reveal () {
+  const reveals = document.querySelectorAll('.reveal')
+
+  for (let i = 0; i < reveals.length; i++) {
+    const windowHeight = window.innerHeight
+    const elementTop = reveals[i].getBoundingClientRect().top
+    const elementVisible = 150
+
+    if (elementTop < windowHeight - elementVisible) {
+      reveals[i].classList.add('active')
+      reveals[i].classList.remove('reveal')
+    } else {
+      reveals[i].classList.remove('active')
+    }
+  }
+}
+
+window.addEventListener('scroll', reveal)

assets/js/critical/color.js

@@ -4,8 +4,6 @@
  * Licensed under the Creative Commons Attribution 3.0 Unported License.
  */
 
-{{ if site.Params.main.enableDarkMode }}
-
 (() => {
   'use strict'
 
@@ -30,17 +28,24 @@
   setTheme(getPreferredTheme())
 
   const showActiveTheme = theme => {
-    const activeSelector = document.querySelector('.theme-icon-active')
-    const activeButton = document.querySelector(`[data-bs-theme-value="${theme}"]`)
-    const activeIcon = activeButton.querySelector('i')
+    const activeSelectors = document.querySelectorAll('.theme-icon-active')
+    const activeButtons = document.querySelectorAll(`[data-bs-theme-value="${theme}"]`)
+    if (activeButtons.length > 0) {
+      const activeIcon = activeButtons[0].querySelector('i')
 
-    document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
-      element.classList.remove('active')
-    })
+      document.querySelectorAll('[data-bs-theme-value]').forEach(element => {
+        element.classList.remove('active')
+      })
 
-    activeSelector.className = activeIcon.className
-    activeSelector.className = activeSelector.className.replace('theme-icon', 'theme-icon-active')
-    activeButton.classList.add('active')
+      for (let i = 0; i < activeSelectors.length; ++i) {
+        activeSelectors[i].className = activeIcon.className
+        activeSelectors[i].className = activeSelectors[i].className.replace('theme-icon', 'theme-icon-active')
+      }
+
+      for (let i = 0; i < activeButtons.length; ++i) {
+        activeButtons[i].classList.add('active')
+      }
+    }
   }
 
   window.matchMedia('(prefers-color-scheme: dark)').addEventListener('change', () => {
@@ -63,5 +68,3 @@
       })
   })
 })()
-
-{{ end }}

assets/js/flexsearch.js

@@ -81,7 +81,7 @@ Source:
     // https://discourse.gohugo.io/t/range-length-or-last-element/3803/2
     // Note: uses .Site.AllPages as .Site.RegularPages only returns content for the current language
     //       pages without a title (such as browserconfig.xml) are excluded
-    {{ $list := where (where .Site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
+    {{ $list := where (where site.AllPages "Kind" "in" "page") "Title" "!=" "" }}
     {{ $len := (len $list) -}}
   
     index.add(

assets/js/navbar.js

@@ -1,5 +1,6 @@
 const navbar = document.querySelector('.navbar')
 const toggler = document.getElementById('main-nav-toggler')
+const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 
 // set the navbar background color to opaque when scrolling past a breakpoint
 window.onscroll = () => {
@@ -14,3 +15,10 @@ window.onscroll = () => {
 toggler.onclick = () => {
   navbar.classList.toggle('navbar-expanded')
 }
+
+// invoke the navbar toggler for each mode switcher to collapse the main menu afterwards
+for (let i = 0; i < modeSelectors.length; ++i) {
+  modeSelectors[i].onclick = () => {
+    toggler.click()
+  }
+}

assets/scss/app.scss

@@ -71,12 +71,14 @@
 @import "components/comments.scss";
 @import "components/navbar.scss";
 @import "components/img.scss";
+@import "components/persona.scss";
 @import "components/popover.scss";
 @import "components/search.scss";
 @import "components/sidebar.scss";
 @import "components/syntax.scss";
 @import "components/toc.scss";
 @import "components/vimeo.scss";
+@import "common/animation.scss";
 @import "common/styles.scss";
 @import "layouts/reboot.scss";
 @import "layouts/type.scss";

assets/scss/common/_animation.scss

@@ -0,0 +1,99 @@
+.rotate-5 {
+    transform: rotate(5deg);
+}
+
+.rotate-n5 {
+    transform: rotate(-5deg);
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .reveal {
+        position: relative;
+        opacity: 0;
+        animation-iteration-count: 1;
+    }
+
+    .reveal.active {
+        opacity: 1;
+    }
+
+    .active.fade-bottom {
+        animation: fade-bottom 1s ease-in;
+    }
+
+    .active.fade-bottom-5 {
+        animation: fade-bottom-5 1s ease-in;
+    }
+    
+    .active.fade-bottom-n5 {
+        animation: fade-bottom-n5 1s ease-in;
+    }
+    
+    .active.fade-left {
+        animation: fade-left 1s ease-in;
+    }
+    
+    .active.fade-right {
+        animation: fade-right 1s ease-in;
+    }
+
+    @keyframes fade-bottom {
+        0% {
+            transform: translateY(50px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes fade-bottom-5 {
+        0% {
+            transform: translateY(50px) rotate(5deg);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0) rotate(5deg);
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-bottom-n5 {
+        0% {
+            transform: translateY(50px) rotate(-5deg);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateY(0) rotate(-5deg);
+            opacity: 1;
+        }
+    }
+    
+    @keyframes fade-left {
+        0% {
+            transform: translateX(-100px);
+            opacity: 0;
+        }
+
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+
+    @keyframes fade-right {
+        0% {
+            transform: translateX(100px);
+            opacity: 0;
+        }
+        
+        100% {
+            transform: translateX(0);
+            opacity: 1;
+        }
+    }
+}

assets/scss/common/_icons.scss

@@ -1,25 +1,25 @@
 // scss-docs-start icons
-$form-check-input-checked-bg-image:             url("icons/form-check-input-checked-bg-image.svg") !default;
-$form-check-radio-checked-bg-image:             url("icons/form-check-radio-checked-bg-image.svg") !default;
-$form-check-input-indeterminate-bg-image:       url("icons/form-check-input-indeterminate-bg-image.svg") !default;
-$form-switch-bg-image:                          url("icons/form-switch-bg-image.svg") !default;
-$form-switch-bg-image-dark:                     url("icons/form-switch-bg-image-dark.svg") !default;
-$form-switch-focus-bg-image:                    url("icons/form-switch-focus-bg-image.svg") !default;
-$form-switch-checked-bg-image:                  url("icons/form-switch-checked-bg-image.svg") !default;
-$form-select-indicator:                         url("icons/form-select-indicator.svg") !default;
-$form-select-indicator-dark:                    url("icons/form-select-indicator-dark.svg") !default;
-$form-feedback-icon-valid:                      url("icons/form-feedback-icon-valid.svg") !default;
-$form-feedback-icon-invalid:                    url("icons/form-feedback-icon-invalid.svg") !default;
-$navbar-light-toggler-icon-bg:                  url("icons/navbar-light-toggler-icon-bg.svg") !default;
-$navbar-dark-toggler-icon-bg:                   url("icons/navbar-dark-toggler-icon-bg.svg") !default;
-$accordion-button-icon:                         url("icons/accordion-button-icon.svg") !default;
-$accordion-button-icon-dark:                    url("icons/accordion-button-icon-dark.svg") !default;
-$accordion-button-active-icon:                  url("icons/accordion-button-active-icon.svg") !default;
-$accordion-button-active-icon-dark:             url("icons/accordion-button-active-icon-dark.svg") !default;
-$carousel-control-prev-icon-bg:                 url("icons/carousel-control-prev-icon-bg.svg") !default;
-$carousel-control-next-icon-bg:                 url("icons/carousel-control-next-icon-bg.svg") !default;
-$btn-close-bg:                                  url("icons/btn-close-bg.svg") !default;
-$btn-toggle:                                    url("icons/btn-toggle.svg") !default;
-$btn-toggle-dark:                               url("icons/btn-toggle-dark.svg") !default;
+$form-check-input-checked-bg-image:             url("/icons/form-check-input-checked-bg-image.svg") !default;
+$form-check-radio-checked-bg-image:             url("/icons/form-check-radio-checked-bg-image.svg") !default;
+$form-check-input-indeterminate-bg-image:       url("/icons/form-check-input-indeterminate-bg-image.svg") !default;
+$form-switch-bg-image:                          url("/icons/form-switch-bg-image.svg") !default;
+$form-switch-bg-image-dark:                     url("/icons/form-switch-bg-image-dark.svg") !default;
+$form-switch-focus-bg-image:                    url("/icons/form-switch-focus-bg-image.svg") !default;
+$form-switch-checked-bg-image:                  url("/icons/form-switch-checked-bg-image.svg") !default;
+$form-select-indicator:                         url("/icons/form-select-indicator.svg") !default;
+$form-select-indicator-dark:                    url("/icons/form-select-indicator-dark.svg") !default;
+$form-feedback-icon-valid:                      url("/icons/form-feedback-icon-valid.svg") !default;
+$form-feedback-icon-invalid:                    url("/icons/form-feedback-icon-invalid.svg") !default;
+$navbar-light-toggler-icon-bg:                  url("/icons/navbar-light-toggler-icon-bg.svg") !default;
+$navbar-dark-toggler-icon-bg:                   url("/icons/navbar-dark-toggler-icon-bg.svg") !default;
+$accordion-button-icon:                         url("/icons/accordion-button-icon.svg") !default;
+$accordion-button-icon-dark:                    url("/icons/accordion-button-icon-dark.svg") !default;
+$accordion-button-active-icon:                  url("/icons/accordion-button-active-icon.svg") !default;
+$accordion-button-active-icon-dark:             url("/icons/accordion-button-active-icon-dark.svg") !default;
+$carousel-control-prev-icon-bg:                 url("/icons/carousel-control-prev-icon-bg.svg") !default;
+$carousel-control-next-icon-bg:                 url("/icons/carousel-control-next-icon-bg.svg") !default;
+$btn-close-bg:                                  url("/icons/btn-close-bg.svg") !default;
+$btn-toggle:                                    url("/icons/btn-toggle.svg") !default;
+$btn-toggle-dark:                               url("/icons/btn-toggle-dark.svg") !default;
 
 // scss-docs-end icons

assets/scss/common/_styles.scss

@@ -18,3 +18,132 @@ a:active {
 .tickmark li::marker {
     content: "✓ ";
 }
+
+.anchor
+{
+    color: transparent;
+}
+
+.heading:hover .anchor 
+{
+    transition: 0.25s ease-in-out;
+    color: $primary;
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        ),
+    )
+);
+
+@media screen and (orientation: portrait) {
+    .min-vh-custom {
+        min-height: 25vh !important
+    }
+}
+
+@media screen and (orientation: landscape) {
+    .min-vh-custom {
+        min-height: 50vh !important
+    }
+}
+
+:root {
+    --nav-height: 90px;
+}
+
+@include media-breakpoint-up(sm) {
+    .ratio-section {
+        min-height: calc(min(100vh, 576px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(md) {
+    .ratio-section {
+        min-height: calc(min(100vh, 768px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(lg) {
+    .ratio-section {
+        min-height: calc(min(100vh, 992px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1200px) - var(--nav-height));
+    }    
+}
+
+@include media-breakpoint-up(xxl) {
+    .ratio-section {
+        min-height: calc(min(100vh, 1400px) - var(--nav-height));
+    }    
+}
+
+$utilities: map-merge(
+    $utilities,
+    (
+        "padding-start-wide": (
+            property: padding-left,
+            responsive: true,
+            class: psw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "padding-top-wide": (
+            property: padding-top,
+            responsive: true,
+            class: ptw,
+            values: (
+                0: 0,
+                1: 1.5 * $spacer,
+                2: 3 * $spacer,
+                3: 6 * $spacer,
+                4: 9 * $spacer,
+                5: 12 * $spacer,
+            )
+        ),
+        "font-size": map-merge(
+            map-get($utilities, "font-size"),
+            ( responsive: true ),
+        )
+    )
+);

assets/scss/components/_navbar.scss

@@ -4,13 +4,17 @@
 
 .navbar {
     transition: 0.5s ease-in-out;
-    background-color: none;
+    background-color: transparent;
 }
 
 .nav-active, .navbar-expanded {
     background-color: var(--bs-body-bg);
 }
 
+.navbar-expanded {
+    box-shadow: $box-shadow-sm;
+}
+
 /* Remove border from toggler */
 .navbar-toggler {
     border: 0 if($enable-important-utilities, !important, null);
@@ -24,6 +28,10 @@
     border: 0 if($enable-important-utilities, !important, null);
 }
 
+.fw-30 {
+    width: 30px !important;
+}
+
 /* Lines of the Toggler */
 .toggler-icon {
     width: 30px;

assets/scss/components/_persona.scss

@@ -0,0 +1,3 @@
+.persona {
+    min-height: 320px !important
+}

assets/scss/components/_sidebar.scss

@@ -13,6 +13,7 @@
     color: rgba(0, 0, 0, 0.65);
     margin-left: 0 !important;
     padding-left: 0.85rem !important;
+    display: inline-block;
 
     &.active,
     &:hover,

assets/scss/components/_toc.scss

@@ -6,9 +6,9 @@
     grid-area: toc;
     right: 0;
     z-index: 2;
-    height: calc(100vh - 7rem);
+    height: calc(100vh - 5rem);
     overflow-y: auto;
-    top: $navbar-offset;
+    top: 5rem;
 }
 
 // scss-docs-end toc

config/_default/params.toml

@@ -3,6 +3,7 @@
     separator = "-"
     description = "Hinode is a clean documentation and blog theme for your Hugo site based on Bootstrap 5."
     enableDarkMode = true
+    modes = ["light", "dark"]
 # toml-docs-end main
 
 # toml-docs-start docs
@@ -16,15 +17,17 @@
     sections = ["blog", "projects"]
     featurePhoto = "/img/sunrise.jpg" # source: https://unsplash.com/photos/ZX6BPboJrYk
     fullCover = false
+    centerHeadline = false
     style = ""
 # toml-docs-end home
 
 # toml-docs-start navigation
 [navigation]
+    anchor = true
     logo = "/img/logo_icon.svg"
     color = "body"
     fixed = true
-    offset = "5em"
+    offset = "3.8em"
     search = true
     breadcrumb = false
     toc = true

content/en/blog/bootstrap-elements.md

@@ -99,7 +99,7 @@ As an example, the following shortcode displays a stacked card with icon that li
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}}
+{{</* card path="about" padding="3" class="w-50" color="tertiary" header="publication" footer="none" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -192,13 +192,34 @@ As an example, the following shortcode displays an image with rounded corners an
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Nav
+
+As an example, the following shortcode displays a tab group with vertically aligned pills.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+  {{</* nav type="pills" vertical="true" */>}}
+    {{</* nav-item header="Nav Item #1" show="true" */>}}
+      This is the first item's nav body. It supports HTML content. The item is shown by adding the value
+      <code>show</code> to the <code>class</code> argument.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #2" */>}}
+      This is the second item's nav body. It too supports HTML content.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #3" */>}}
+      This is the third item's nav body.
+    {{</* /nav-item */>}}
+  {{</* /nav */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Navbar
 
 As an example, the following shortcode displays a light navigation header.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 

content/nl/blog/bootstrap-elements.md

@@ -99,7 +99,7 @@ De volgende shortcode toont een kaart met een icoon dat linkt naar de [over mij]
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="w-50" color="light" header="publication" footer="none" */>}}
+{{</* card path="about" padding="3" class="w-50" color="tertiary" header="publication" footer="none" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
@@ -192,13 +192,34 @@ De volgende shortcode toont een plaatje met afgeronde hoeken en een 21x9 verhoud
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 
+## Nav
+
+De volgende shortcode toont een groep met verticale tabbladen.
+
+<!-- markdownlint-disable MD037 -->
+{{< example lang="hugo" >}}
+  {{</* nav type="pills" vertical="true" */>}}
+    {{</* nav-item header="Nav Item #1" show="true" */>}}
+    Dit is de inhoud van het eerste element met ondersteuning voor HTML. De waarde <code>show</code>
+    voor het argument <code>class</code> geeft aan dat het element uitgeklapt moet worden.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #2" */>}}
+    Dit is de inhoud van het tweede element. Het ondersteunt ook HTML.
+    {{</* /nav-item */>}}
+    {{</* nav-item header="Nav Item #3" */>}}
+    Dit is de inhoud van het derde element.
+    {{</* /nav-item */>}}
+  {{</* /nav */>}}
+{{< /example >}}
+<!-- markdownlint-enable MD037 -->
+
 ## Navbar
 
 De volgende shortcode toont een navigatiemenu.
 
 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* navbar path="about" color="primary" size="sm" search="false" menus="sample" title="Brand" */>}}
+{{</* navbar path="about" color="primary" size="md" search="false" menus="sample" title="Brand" mode="false" */>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->
 

i18n/de.yaml

@@ -68,7 +68,7 @@
 
 # 404 page
 - id: pageNotFound
-  translation: "Ups! Diese Seite existiert nicht. Versuche es über die"
+  translation: "Diese Seite existiert nicht. Versuche es über die"
 - id: pageNotFoundTitle
   translation: "Nicht gefunden"
 - id: pageNotFoundHome

i18n/en.yaml

@@ -68,9 +68,9 @@
 
 # 404 page
 - id: pageNotFound
-  translation: "Oops! This page doesn't exist. Try going back to our"
+  translation: "The page you are looking for does not exist or another error occurred. Try going back to our"
 - id: pageNotFoundTitle
-  translation: "Not found"
+  translation: "Page not found"
 - id: pageNotFoundHome
   translation: "home page"
 

i18n/nl.yaml

@@ -68,7 +68,7 @@
 
 # 404 page
 - id: pageNotFound
-  translation: "Oeps, deze pagina bestaat niet. Ga terug naar het"
+  translation: "Deze pagina bestaat niet of er is een andere fout opgetreden. Ga terug naar het"
 - id: pageNotFoundTitle
   translation: "Niet gevonden"
 - id: pageNotFoundHome

layouts/404.html

@@ -1,8 +1,12 @@
 {{ define "main"}}
-    <main id="main">
-      <div>
-       <h1 id="title">{{ T "pageNotFoundTitle" }}</h1>
-       <p>{{ T "pageNotFound" }} <a href="{{ "/" | relURL }}">{{ T "pageNotFoundHome" }}</a>.</p>
-      </div>
-    </main>
+    <div class="container-xxl flex-fill d-flex align-content-center flex-wrap">
+        <div class="w-100 text-center">
+            <span class="text-secondary fw-bold">
+                <i class="fa-regular fa-face-frown fa-10x"></i>
+                <p class="display-1 mt-3 fw-bold">404</p>
+                <p class="fs-3">{{ T "pageNotFoundTitle" }}</p>
+            </span>
+            <p>{{ T "pageNotFound" }} <a href="{{ "/" | relURL }}">{{ T "pageNotFoundHome" }}</a>.</p>
+        </div>
+    </div>
 {{ end }}

layouts/_default/_markup/render-heading.html

@@ -0,0 +1,5 @@
+{{ if site.Params.navigation.anchor }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}" class="heading">{{ .Text | safeHTML }} <a href="#{{ .Anchor | safeURL }}"><i class="fa-solid fa-link anchor"></i></a></h{{ .Level }}>
+{{ else }}
+<h{{ .Level }} id="{{ .Anchor | safeURL }}">{{ .Text | safeHTML }}</h{{ .Level }}>
+{{ end }}

layouts/_default/baseof.html

@@ -3,12 +3,15 @@
 {{ $.Scratch.Set "version" (site.Param (printf "%s.version" .Section)) }}
 
 <!doctype html>
-<html lang="{{ .Site.Language.Lang }}" class="no-js" data-bs-theme="dark">
+<html lang="{{ .Site.Language.Lang }}" class="no-js">
     <head>
         {{ block "head" . }}{{ end -}}
     </head>
 
     <body>
+        {{- if site.Params.main.enableDarkMode -}}
+            {{- partial "footer/scripts.html" (dict "filename" "js/critical.bundle.js" "match" "js/critical/**.js" "page" .) -}}
+        {{- end -}}
         <div class="d-flex flex-column min-vh-100{{ if and .IsHome .Site.Params.home.style }} {{ .Site.Params.home.style }}{{ end }}">
             <div class="{{ if .Site.Params.navigation.fixed }}mb-4{{ end }}">
                 {{- partial "assets/navbar.html" (dict
@@ -54,6 +57,6 @@
             {{- partial "footer/footer.html" . -}}
         {{ end -}}
 
-        {{- partialCached "footer/scripts.html" . -}}
+        {{- partialCached "footer/scripts.html" (dict "page" .) }}
     </body>
 </html>

layouts/_default/single.html

@@ -1,11 +1,11 @@
 {{- define "partials/header.html" -}}
     {{ if site.Params.navigation.breadcrumb }}{{ partial "breadcrumb.html" . }}{{ end -}}
     {{ if in (slice "docs" "minimal") .Layout }}
-        <h1>{{ .Title }}</h1>
+        {{ with .Title }}<p class="display-4 mt-3">{{ . }}</p>{{ end }}
     {{ else }}
         {{ $lastmodstr := (partial "utilities/date.html" (dict "date" .Lastmod "format" "long")) -}}
         {{ $datestr := (partial "utilities/date.html" (dict "date" .Date "format" "long")) -}}
-        <h1>{{ .Title }}</h1>
+        {{ with .Title }}<p class="display-4 mt-3">{{ . }}</p>{{ end }}
         <small class="text-body-secondary text-uppercase">
             {{ $datestr | i18n "postedOnDate" -}}
             {{ if ne $datestr $lastmodstr -}}&nbsp;({{ $lastmodstr | i18n "lastModified" }}){{ end }} &bull;
@@ -82,7 +82,7 @@
             </div>
         </div>
     
-        <div class="container-fluid">
+        <div class="container-xxl">
             <div class="row row-cols-md-2 row-cols-lg-3">
                 <div class="col col-md-3 col-lg-2 d-none pt-5 d-md-block sidebar-overflow sticky-top">
                     {{ partial "assets/sidebar" (dict "page" . "menu" $menu "version" $version) }}
@@ -100,7 +100,7 @@
             </div>
         </div>
     {{ else }}
-        <div class="container-fluid">
+        <div class="container-xxl">
             <div class="row row-cols-1 row-cols-sm-3">
                 <div class="col col-md-2 d-none d-md-block"></div>
                 <div class="col col-sm-12 col-md-8">

layouts/index.html

@@ -4,6 +4,7 @@
 
 {{- define "main" -}}
     {{- $page := . -}}
+
     {{- range $index, $section := site.Params.home.sections -}}
         {{- $pages := where site.RegularPages "Type" "in" $section -}}
         {{- $sectionURL := "" -}}
@@ -21,4 +22,8 @@
             "sectionURL" $sectionURL)
         -}}
     {{- end -}}
+
+    {{- range $index, $section := site.Params.home.snippets -}}
+        {{- partial "assets/snippet-list.html" (dict "page" $page "section" $section) -}}
+    {{- end -}}
 {{- end -}}

layouts/partials/assets/card-group.html

@@ -88,7 +88,7 @@
 {{- $orientation := .orientation -}}
 
 <div class="container-fluid p-4">
-    {{ with $title }}<h1>{{ . }}</h1>{{ end }}
+    {{ with $title }}<p class="display-4 mt-3{{ if and $.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
     {{ if $paginate }}
         <div class="row {{ $colGrid }}">
             {{ $paginator := $page.Paginate $list }}

layouts/partials/assets/card.html

@@ -8,7 +8,8 @@
     "href"          Required address for the button or hyperlink.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white", "black", or "body". By default, no color is specified.
+                    "warning", "info", "light", "dark", "white", "black", "body", or "tertiary". By default, no color is
+                    specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
@@ -81,7 +82,7 @@
 {{- $color := "" -}}
 {{- with .color }}{{ $color = . }}{{ end -}}
 {{- if $color -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "tertiary" -}}
     {{- if not (in $supportedColors $color) -}}
         {{- errorf "Invalid value for param 'color': %s" $color -}}
     {{- end -}}

layouts/partials/assets/list.html

@@ -0,0 +1,94 @@
+<!-- 
+    Displays a list items with a thumbnail alternating between left and right alignment. The partial supports the
+    following arguments:
+    "page"          Required context of the current page.
+    "list"          Required array of pages.
+    "title"         Optional title of the card group.
+    "type"          Optional type of the tab group, either "tabs", "pills", or "underline".
+    "vertical"      Optional flag to show vertical tabs instead of horizontal tabs (default).
+    "class":        Optional class attribute of the tab group, e.g. “nav-fill”.
+
+    In addition, the following arguments are passed to the individual tabs.
+    "class"         Optional class attribute of the tab element, e.g. “w-50”.
+    "color":        Optional theme color of the tab, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", or "body". By default, no color is specified.
+-->
+
+<!-- Inline partial to render the list item's content -->
+{{- define "partials/list-content.html" -}}
+    {{- $title := .title -}}
+    {{- $content := .content -}}
+    
+    <h2>{{ $title }}</h2>
+    <div class="fs-md-5 fs-6">{{ $content }}</div>
+{{- end -}}
+
+<!-- Inline partial to render the list item's thumbnail -->
+{{- define "partials/list-img.html" -}}
+    {{- $thumbnail := .thumbnail -}}
+    {{- $style := .style -}}
+    
+    {{- partial "image.html" (dict "url" $thumbnail "outerClass" $style "mode" true) -}}
+{{- end -}}
+
+{{- $page := .page -}}
+{{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
+    {{- errorf "Invalid value for param 'page'" -}}
+{{- end -}}
+
+{{ $list := .list }}
+{{- if ne (printf "%T" $list) "resource.Resources" -}}
+    {{- errorf "Invalid value for param 'items'" -}}
+{{- end -}}
+
+{{- $title := .title -}}
+{{- $class := .class -}}
+{{- $color := .color -}}
+
+{{ $vertical := false }}
+{{ $type := "pills" }}
+{{- $id := .Ordinal -}}
+
+<div class="d-none d-md-block p-0">
+    {{- range $index, $item := $list -}}
+        {{- $odd := eq (mod $index 2) 1 -}}
+        <div class="container ratio-section d-flex flex-column">
+            {{ if eq $index 0 }}
+                {{ with $title }}<p class="display-4 pt-5{{ if and $.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+            {{ end }}
+
+            <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
+                <div class="col-6{{ if $odd }} order-last{{ end }}">
+                    {{- $style := "reveal fade-bottom" -}}
+                    {{ if $item.Params.tilted }}
+                        {{- $style = "reveal fade-bottom-n5 rotate-n5 ps-3" -}}
+                        {{- if $odd }}{{ $style = "reveal fade-bottom-5 rotate-5 pe-3" }}{{ end }}
+                    {{ end }}
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $item.Params.Thumbnail "style" $style) }}
+                </div>
+                <div class="col-6{{ if $odd }} order-first{{ end }} psw-lg-5 p-5">
+                    {{ partial "partials/list-content.html" (dict "title" $item.Title "content" $item.Content )}}
+                </div>
+            </div>
+        </div>
+    {{ end -}}
+</div>
+
+<div class="d-md-none">
+    {{- range $index, $item := $list -}}
+        {{- $odd := eq (mod $index 2) 1 -}}
+        <div class="container d-flex flex-column">
+            {{ if eq $index 0 }}
+                {{ with $title }}<p class="display-4 pt-5{{ if and $.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+            {{ end }}
+            <div class="row pt-5 pb-5 align-items-center flex-fill row-cols-2">
+                <div class="col-12 text-center">
+                    {{ partial "partials/list-img.html" (dict "thumbnail" $item.Params.Thumbnail)}}
+                </div>
+                <div class="col-12 p-3">
+                    {{ partial "partials/list-content.html" (dict "title" $item.Title "content" $item.Content )}}
+                </div>
+            </div>
+        </div>
+    {{ end -}}
+</div>

layouts/partials/assets/nav.html

@@ -0,0 +1,62 @@
+<!-- 
+    Displays a tab group of multiple items. Each provided page resource is rendered as a tab pane. The shortcode
+    supports the following arguments:
+    "page"          Required context of the current page.
+    "list"          Required array of pages.
+    "title"         Optional title of the card group.
+    "type"          Optional type of the tab group, either "tabs", "pills", or "underline".
+    "vertical"      Optional flag to show vertical tabs instead of horizontal tabs (default).
+    "class":        Optional class attribute of the tab group, e.g. “nav-fill”.
+
+    In addition, the following arguments are passed to the individual tabs.
+    "class"         Optional class attribute of the tab element, e.g. “w-50”.
+    "color":        Optional theme color of the tab, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", or "body". By default, no color is specified.
+-->
+
+{{- $page := .page -}}
+{{- if ne (printf "%T" $page) "*hugolib.pageState" -}}
+    {{- errorf "Invalid value for param 'page'" -}}
+{{- end -}}
+
+{{ $list := .list }}
+{{- if ne (printf "%T" $list) "resource.Resources" -}}
+    {{- errorf "Invalid value for param 'items'" -}}
+{{- end -}}
+
+{{- $title := .title -}}
+{{- $class := .class -}}
+{{- $color := .color -}}
+
+{{ $vertical := false }}
+{{ $type := "pills" }}
+{{- $id := .Ordinal -}}
+
+{{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
+<div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="nav-{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
+    {{- range $index, $item := $list -}}
+        {{ $show := eq $index 0}}
+        <button class="nav-link text-nowrap{{ if $show }} active{{ end }}" id="nav-{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#nav-{{ $id }}-{{ $index }}" 
+                type="button" role="tab" aria-controls="nav-{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
+            {{ $item.Title }}
+        </button>
+    {{ end -}}
+</div>
+
+<div class="tab-content {{ if eq $type "tabs" }}border border-top-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
+    {{ range $index, $item := $list }}
+        {{ $header := $item.Title }}
+        {{ $body := $item.Content }}
+        {{ $show := eq $index 0}}
+        <div class="tab-pane{{ if $show }} active{{ end }}" id="nav-{{ $id }}-{{ $index }}" role="tabpanel" aria-labelledby="{{ $id }}-btn-{{ $index }}" tabindex="0">
+            {{- partial "assets/persona.html" (dict  
+                "title" $item.Title
+                "class" $class
+                "color" $color
+                "content" $item.Content
+                "thumbnail" $item.Params.Thumbnail
+            ) -}}
+        </div>    
+    {{ end }}
+</div>
+{{ if $vertical }}</div>{{ end }}

layouts/partials/assets/navbar.html

@@ -5,13 +5,49 @@
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
     "fixed"         Optional flag to indicate the navbar should stick to the top, defaults to false.
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
+                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "tertiary". The default color is
+                    none.
+    "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image, defaults to the parameter "logo" set in the "main" section of
                     the site's parameter configuration. 
     "title"         Optional brand title, displayed when the logo is not set. Defaults to the site's title.
 -->
 
+<!-- Inline partial to render the color mode switcher -->
+{{- define "partials/navbar-mode.html" -}}
+    {{- $id := .id -}}
+    {{- $size := .size -}}
+    {{- $collapsed := .collapsed -}}
+
+    <li class="nav-item dropdown {{ if $collapsed }}d-{{ $size }}-none{{ else }}d-none d-{{ $size }}-block{{ end }}">
+        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme">
+            {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }} {{ if $collapsed }} {{ T "colorMode" }} {{ end }}
+            <span class="d-md-none"></span>
+        </a>
+        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
+            <li>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="light" href="#!">
+                    {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
+                    {{ T "colorLight" }}
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="dark" href="#!">
+                    {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
+                    {{ T "colorDark" }}
+                </a>
+            </li>
+            <li>
+                <a class="dropdown-item{{ if $collapsed }} switch-mode-collapsed{{ end }}" data-bs-theme-value="auto" href="#!">
+                    {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
+                    {{ T "colorAuto" }}
+                </a>
+            </li>
+        </ul>
+    </li>
+{{- end -}}
+
 {{- $supportedFlags := slice "true" "false" -}}
 
 {{- $id := 0 -}}
@@ -48,7 +84,7 @@
 {{- $color := "" -}}
 {{- with .color -}}
     {{- $color = . -}}
-    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "tertiary" -}}
     {{- if not (in $supportedColors $color) -}}
         {{- errorf "Invalid value for param 'color': %s" $color -}}
     {{- end -}}
@@ -65,6 +101,15 @@
 {{- end -}}
 
 {{- $enableDarkMode := default true site.Params.main.enableDarkMode -}}
+{{- with .mode -}}
+    {{- $darkModeParam := . -}}
+    {{- if in $supportedFlags $darkModeParam -}}
+        {{- if eq $darkModeParam "true" }}{{ $enableDarkMode = site.Params.main.enableDarkMode }}{{ else }}{{ $enableDarkMode = false }}{{ end -}}
+    {{- else -}}
+        {{- errorf "Invalid value for param 'darkMode': %s" $darkModeParam -}}
+    {{- end -}}
+{{- end -}}
+
 {{- $enableLanguage := or $page.IsTranslated site.IsMultiLingual -}}
 
 {{- $logo := site.Params.navigation.logo -}}
@@ -79,19 +124,21 @@
 {{- $pre := .Pre -}}
 {{- $post := .Post -}}
 
-<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-3">
-	<div class="container-fluid">
+<nav class="navbar navbar-expand-{{ $size }} {{ with $color }}bg-{{ . }}{{ end }} {{ if $fixed }}fixed-top{{ end }} p-4">
+	<div class="container-xxl p-0">
         <!-- Insert sidebar toggler when applicable -->
-        {{- if $page.Scratch.Get "sidebar" -}}
-            <button class="navbar-toggler collapsed ms-n3" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-            </button>
-        {{- else -}}
-            <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-            <button class="navbar-toggler collapsed ms-n3 invisible" type="button">
-                {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
-            </button>
-        {{- end -}}
+        <div class="d-flex">
+            {{- if $page.Scratch.Get "sidebar" -}}
+                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                </button>
+            {{- else -}}
+                <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                <button class="navbar-toggler fw-30 collapsed p-0 mx-auto invisible" type="button">
+                    {{- partial "assets/icon.html" (dict "icon" "fas ellipsis") -}}
+                </button>
+            {{- end -}}
+        </div>
 
         <!-- Insert the brand logo or name -->
         <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}">
@@ -103,12 +150,14 @@
         </a>
 
         <!-- Insert main navigation toggler -->
-		<button id="main-nav-toggler" class="navbar-toggler collapsed me-n3" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
-			aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
-			<span class="toggler-icon top-bar emphasis"></span>
-			<span class="toggler-icon middle-bar emphasis"></span>
-			<span class="toggler-icon bottom-bar emphasis"></span>
-		</button>
+        <div class="d-flex fw-30">
+            <button id="main-nav-toggler" class="navbar-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent-{{ $id }}"
+                aria-controls="navbarSupportedContent-{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                <span class="toggler-icon top-bar emphasis"></span>
+                <span class="toggler-icon middle-bar emphasis"></span>
+                <span class="toggler-icon bottom-bar emphasis"></span>
+            </button>
+        </div>
 
         <div class="navbar-collapse collapse" id="navbarSupportedContent-{{ $id }}">
             <!-- Insert search input -->
@@ -126,14 +175,15 @@
                     {{- if .HasChildren -}}
                         <li class="nav-item dropdown">
                             <a class="nav-link {{ if $active }}active{{ end }} dropdown-toggle" href="{{ .URL }}" role="button" data-bs-toggle="dropdown" aria-expanded="false">
-                                {{ if $active }}<span  class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
+                                {{ if $active }}<span class="active">{{ .Name }}</span>{{ else }}{{ .Name }}{{ end }}
                             </a>
                             <ul class="dropdown-menu dropdown-menu-end">
                                 {{- range .Children -}}
-                                    <li><a class="dropdown-item" href="{{ .URL }}">{{ .Name }}</a></li>
+                                    {{- $child_active := eq $page_url .URL -}}
+                                    <li><a class="dropdown-item {{ if $child_active }}active{{ end }}" href="{{ .URL }}">{{ .Name }}</a></li>
                                 {{- end -}}
                             </ul>
-                          </li>
+                        </li>
                     {{- else -}}
                         <li class="nav-item">
                             {{- $external := ne $url.Host $baseurl.Host -}}
@@ -150,18 +200,22 @@
 
 
                 {{- if or $enableLanguage $enableDarkMode -}}
-                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto">
+                    <li class="nav-item py-2 py-md-1 col-12 col-md-auto d-none d-{{ $size }}-block">
                         <div class="vr d-none d-md-flex h-100 mx-md-2"></div>
                     </li>
+                    <li><hr class="dropdown-divider-bg"></li>
                 {{- end -}}
 
                 <!-- Insert language switcher if applicable -->
                 {{- if $enableLanguage -}}
                     {{- $currentLang := $page.Language.Lang -}}
                     <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                        <a class="nav-link dropdown-toggle d-{{ $size }}-none" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
                             {{- partial "assets/icon.html" (dict "icon" "fas globe") }} {{ T "languageSwitcherLabel" }}
                         </a>
+                        <a class="nav-link dropdown-toggle d-none d-{{ $size }}-block" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false">
+                            {{- partial "assets/icon.html" (dict "icon" "fas globe") }}
+                        </a>
                         <ul class="dropdown-menu dropdown-menu-end ">
                             {{- if $page.IsTranslated -}}
                                 {{- range $page.AllTranslations -}}
@@ -178,32 +232,8 @@
                               
                 <!-- Insert color mode switcher -->
                 {{- if $enableDarkMode -}}
-                    <li class="nav-item dropdown">
-                        <a class="nav-link dropdown-toggle" href="#!" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="navbar-color-theme">
-                            {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon-active") }}
-                            <span class="d-md-none"></span>
-                        </a>
-                        <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="navbar-color-theme">
-                            <li>
-                                <a class="dropdown-item" data-bs-theme-value="light" href="#!">
-                                    {{- partial "assets/icon.html" (dict "icon" "fas sun theme-icon") }}
-                                    {{ T "colorLight" }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" data-bs-theme-value="dark" href="#!">
-                                    {{- partial "assets/icon.html" (dict "icon" "fas moon theme-icon") }}
-                                    {{ T "colorDark" }}
-                                </a>
-                            </li>
-                            <li>
-                                <a class="dropdown-item" data-bs-theme-value="auto" href="#!">
-                                    {{- partial "assets/icon.html" (dict "icon" "fas circle-half-stroke theme-icon" ) }}
-                                    {{ T "colorAuto" }}
-                                </a>
-                            </li>
-                        </ul>
-                    </li>
+                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" true) -}}
+                    {{- partial "partials/navbar-mode.html" (dict "id" $id "size" $size "collapsed" false) -}}
                 {{- end -}}
             </ul>
         </div>

layouts/partials/assets/persona.html

@@ -0,0 +1,94 @@
+<!-- 
+    Displays a custom persona card. Either specify a valid path, or set the arguments title, href, content, and
+    thumbnail individually. The latter arguments override any page attributes.
+    
+    The shortcode supports the following arguments:
+    "path"          Optional path of the page, override with other parameters.
+    "title"         Required title of the card.
+    "href"          Optional address for the button or hyperlink.
+    "class"         Optional class attribute of the card element, e.g. “w-50”.
+    "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", "white", "black", "body", or "tertiary". By default, no color is
+                    specified.
+    "content"       Optional content of the card.
+    "thumbnail"     Optional thumbnail image url, displayed on top or the left of the card.
+-->
+
+<!-- Inline partial to render the card's body -->
+{{- define "partials/persona-body.html" -}}
+    {{- $title := .title -}}
+    {{- $href := .href -}}
+    {{- $color := .color -}}
+    {{- $content := .content -}}
+    
+    <h3>{{ $title }}</h3>
+    {{ with $content }}<p>{{ . }}</p>{{ end -}}
+{{- end -}}
+
+{{- $page := "" }}
+{{- if .path }}
+    {{- $page = site.GetPage .path }}
+    {{- if not $page }}
+        {{- errorf "Cannot find page: %s" .path -}}
+    {{- end }}
+{{- end }}
+
+{{- $title := .title -}}
+{{- $href := .href -}}
+{{- $content := .content -}}
+{{- $thumbnail := .thumbnail -}}
+
+{{- $color := "" -}}
+{{- with .color }}{{ $color = . }}{{ end -}}
+{{- if $color -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "tertiary" -}}
+    {{- if not (in $supportedColors $color) -}}
+        {{- errorf "Invalid value for param 'color': %s" $color -}}
+    {{- end -}}
+{{- end -}}
+
+{{- with $page -}}
+    {{- if not $title }}{{ $title = .Title }}{{ end -}}
+    {{- if not $href }}{{ $href = .Permalink  }}{{ end -}}
+    {{- if not $content }}{{ $content = .Content }}{{ end -}}
+    {{- if not $thumbnail }}{{ $thumbnail = .Params.thumbnail }}{{ end -}}
+{{- end -}}
+
+{{- $class := .class -}}
+
+<div class="d-none d-md-block">
+    <div class="persona position-relative row mt-5 align-middle p-3">
+        <div class="col-2">
+            <div class="position-absolute top-50 start-0 translate-middle-y col-4 ps-3">
+                {{- if $thumbnail -}}
+                    {{- partial "image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5") -}}
+                {{ end }}
+            </div>
+        </div>
+        <div class="col-10 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} rounded-5 fs-md-5 fs-6 pe-5 pb-3">
+            <div class="row">
+                <div class="col-3"></div>
+                <div class="col-9">
+                    {{- partial "persona-body.html" (dict "title" $title "href" $href "color" $color "content" $content) -}}
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+
+<div class="d-md-none">
+    <div class="persona position-relative row mt-5 align-middle p-3 ptw-5">
+        <div class="col-12">
+            <div class="position-absolute top-25 start-50 translate-middle col-6">
+                {{- if $thumbnail -}}
+                    {{- partial "image.html" (dict "url" $thumbnail "ratio" "1x1" "innerClass" "rounded-5") -}}
+                {{ end }}
+            </div>
+        </div>
+        <div class="col-12 {{ with $color }}bg-{{ . }} text-bg-{{ . }}{{ end }} rounded-5 ptw-lg-5 ptw-3 ptw-sm-4 fs-md-5 fs-6 pb-3">
+            <div class="p-5">
+                {{- partial "persona-body.html" (dict "title" $title "href" $href "color" $color "content" $content) -}}
+            </div>
+        </div>
+    </div>
+</div>

layouts/partials/assets/section-list.html

@@ -67,7 +67,7 @@
 {{- end -}}
 {{- if $reverse -}}{{- $list = $list.Reverse -}}{{ end -}}
 
-<div class="container-fluid flex-fill p-0{{ with $background }} bg-{{ . }}{{ end }}">
+<div class="container-xxl flex-fill p-0{{ with $background }} bg-{{ . }}{{ end }}">
     {{- partial "assets/card-group.html" (dict 
         "page" $page
         "list" $list

layouts/partials/assets/snippet-list.html

@@ -0,0 +1,58 @@
+{{- $page := .page }}
+{{- $section := .section }}
+{{- if not $section }}{{ errorf "Missing value for param 'section'" }}{{ end -}}
+{{- $bundle := site.GetPage $section -}}
+
+{{- $title := $bundle.Title -}}
+{{- $sort := "date" -}}
+{{- $order := "desc" -}}
+{{- $style := "" -}}
+{{- $background := "" -}}
+{{- $color := "" -}}
+{{- $layout := "tabs" -}}
+
+{{- with (index site.Params $section) -}}
+    {{- with index . "title" }}{{ $title = . }}{{ end -}}
+    {{- with index . "sort" }}{{ $sort = . }}{{ end -}}
+    {{- if (index . "reverse") }}{{ $order = "desc" }}{{ else }}{{ $order = "asc" }}{{ end -}}
+    {{- with index . "style" }}{{ $style = . }}{{ end -}}
+    {{- with index . "background" }}{{ $background = . }}{{ end -}}
+    {{- with index . "color" }}{{ $color = . }}{{ end -}}
+    {{- with index . "layout" }}{{ $layout = . }}{{ end -}}
+{{- end -}}
+
+{{- $list := $bundle.Resources.Match "*" -}}
+{{- $list = sort $list (printf "Params.%s" $sort) $order -}}
+
+<div class="container-fluid {{ with $background }} bg-{{ . }}{{  end }}">
+    <div class="container-xxl flex-fill p-0">
+        {{ if eq $layout "tabs" }}
+            <div class="p-0">
+                {{ with $title }}<p class="display-4 pt-5{{ if and $.IsHome site.Params.home.centerHeadline }} text-center{{ end }}">{{ . }}</p>{{ end }}
+                <div class="col-sm-12 col-md-10 col-lg-8 col-xl-6 mx-auto pt-5 pb-5">
+                    {{- partial "assets/nav.html" (dict 
+                        "page" $page
+                        "list" $list
+                        "title" $title
+                        "class" $style
+                        "color" $color
+                        "layout" $layout
+                        ) 
+                    -}}
+                </div>
+            </div>
+        {{- else -}}
+            <div class=" p-0">
+                {{- partial "assets/list.html" (dict 
+                    "page" $page
+                    "list" $list
+                    "title" $title
+                    "class" $style
+                    "color" $color
+                    "layout" $layout
+                    ) 
+                -}}
+            </div>
+        {{- end -}}
+    </div>
+</div>

layouts/partials/button.html

@@ -6,7 +6,7 @@
     "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
     "color"         Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black".
+                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "tertiary".
     "outline"       Optional flag indicating the button should be outlined, either "false" (default) or "true".
     "badge"         Optional positioned badge to display on top of the button.
     "aria-label"    Optional assistive label for the badge.
@@ -40,7 +40,7 @@
 
 {{ $color := "primary" -}}
 {{ with .color }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "tertiary" -}}
 {{ if not (in $supportedColors $color) -}}
     {{ errorf "Invalid value for param 'color': %s" $color -}}
 {{ end -}}

layouts/partials/footer/footer.html

@@ -1,7 +1,9 @@
 <footer class="container-fluid text-center p-3">
-    <small class="text-secondary">
-        {{- $copyright := printf "%s © %s %s All rights reserved." (i18n "copyright") (dateFormat "2006" now) .Site.Title }}
-        {{ cond (gt (len .Site.Copyright) 0) .Site.Copyright $copyright }}
-        {{ .Site.Params.footer.license | safeHTML }}
-    </small>
+    <div class="container-xxl text-center">
+        <small class="text-secondary">
+            {{- $copyright := printf "%s © %s %s All rights reserved." (i18n "copyright") (dateFormat "2006" now) .Site.Title }}
+            {{ cond (gt (len .Site.Copyright) 0) .Site.Copyright $copyright }}
+            {{ .Site.Params.footer.license | safeHTML }}
+        </small>
+    </div>
 </footer>

layouts/partials/footer/scripts.html

@@ -1,15 +1,20 @@
-{{ $filename := "js/main.bundle.js" -}}
-{{ if hugo.IsProduction }}{{ $filename = "js/main.bundle.min.js" }}{{ end -}}
+{{ $filename := .filename | default "js/main.bundle.js" -}}
+{{ $match := .match | default "{js/*.js,js/vendor/**.js}" }}
+{{ $page := .page }}
+
 {{ $files := slice -}}
-{{ range $index, $file := resources.Match "js/**.js" -}}
+{{ range $index, $file := resources.Match $match -}}
     {{ $files = $files | append $file -}}
 {{ end -}}
-{{ $bundle := $files | resources.Concat $filename -}}
-{{ $js := $bundle | resources.ExecuteAsTemplate $filename . -}}
 
-{{- if not hugo.IsProduction -}}
-    <script src="{{ $js.RelPermalink }}"></script>
-{{ else -}}
-    {{ $js = $js | minify | fingerprint -}}
-    <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+{{ if gt (len $files) 0 }}
+    {{ $bundle := $files | resources.Concat $filename -}}
+    {{ $js := $bundle | resources.ExecuteAsTemplate $filename $page -}}
+
+    {{- if not hugo.IsProduction -}}
+        <script src="{{ $js.RelPermalink }}"></script>
+    {{ else -}}
+        {{ $js = $js | minify | fingerprint -}}
+        <script src="{{ $js.RelPermalink }}" integrity="{{ $js.Data.Integrity }}" crossorigin="anonymous"></script>
+    {{ end -}}
 {{ end -}}

layouts/partials/head/stylesheet.html

@@ -15,8 +15,8 @@
     "import-fonts"            (printf "%t" (not (hasPrefix (lower .Site.Params.style.themeFontPath) "http")))
 -}}
 
-{{- $options := (dict "transpiler" "libsass" "targetPath" "main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -}}
-{{/*- $options := (dict "transpiler" "dartsass" "targetPath" "main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -*/}}
+{{- $options := (dict "transpiler" "libsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -}}
+{{/*- $options := (dict "transpiler" "dartsass" "targetPath" "css/main.css" "enableSourceMap" (not hugo.IsProduction) "includePaths" (slice "node_modules") "vars" $vars) -*/}}
 {{- if hugo.IsProduction -}}
     {{- $options = merge $options (dict "outputStyle" "compressed") -}}
 {{- else -}}

layouts/partials/home/featured.html

@@ -1,18 +1,20 @@
-<div class="container-fluid flex-fill bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }} p-4">
-    <div class="row row-cols-1 row-cols-sm-3 align-items-center pt-5 pb-5 h-100">
-        <div class="col col-md-2 d-none d-md-block"></div>
-        <div class="col col-sm-6 col-md-4 text-center text-sm-start">
-            <p class="fs-1 fw-bold">{{ .Title }}</p>
-            <p>{{ .Content }}</p>
-            {{ if .Site.Params.feature.link }}
-                <p><a class="btn btn-primary" href="{{ .Site.Params.feature.link | safeURL }}" role="button">{{ .Site.Params.feature.caption | default (T "about") }}</a></p>
-            {{ end }}
+<div class="container-fluid flex-fill bg-primary bg-opacity-{{ .Site.Params.style.themeOpacity | default "25" | safeHTML }}">
+    <div class="container-xxl p-4">
+        <div class="row row-cols-1 row-cols-sm-3 align-items-center pt-5 pb-5 h-100">
+            <div class="col col-md-2 d-none d-md-block"></div>
+            <div class="col col-sm-6 col-md-4 text-center text-sm-start">
+                <p class="display-4">{{ .Title }}</p>
+                <p>{{ .Content }}</p>
+                {{ if .Site.Params.feature.link }}
+                    <p><a class="btn btn-primary" href="{{ .Site.Params.feature.link | safeURL }}" role="button">{{ .Site.Params.feature.caption | default (T "about") }}</a></p>
+                {{ end }}
+            </div>
+            <div class="col col-sm-6 col-md-4">
+                {{ if .Site.Params.home.featurePhoto }}
+                    {{- partial "image.html" (dict "url" .Site.Params.home.featurePhoto "ratio" "4x3" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
+                {{ end }}
+            </div>
+            <div class="col col-md-2 d-none d-md-block"></div>
         </div>
-        <div class="col col-sm-6 col-md-4">
-            {{ if .Site.Params.home.featurePhoto }}
-                {{- partial "image.html" (dict "url" .Site.Params.home.featurePhoto "ratio" "4x3" "outerClass" "img-wrap" "innerClass" "rounded" "title" .Site.Title) -}}
-            {{ end }}
-        </div>
-        <div class="col col-md-2 d-none d-md-block"></div>
     </div>
 </div>

layouts/partials/image.html

@@ -5,6 +5,7 @@
     wrapped in a figure if a caption is provided, else the image is wrapped in a div with a ratio constraint. The
     partial supports the following arguments:
     "url":          Required relative url of the image, e.g. "img/example.jpg"
+    "mode":         Optional flag indicating if the image should support color modes.
     "ratio":        Optional ratio of the image, either "1x1", "4x3", "16x9", or "21x9". If set, the image is
                     resized and cropped to match the ratio. Else the original aspect ratio of the image is kept.
     "outerClass":   Optional class attribute of the outer div element, e.g. "img-wrap".
@@ -13,105 +14,180 @@
     "caption":      Optional figure caption.
 -->
 
+{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" -}}
+{{- $ratio := .ratio -}}
+{{- $url := .url -}}
+{{- $mode := false -}}
+{{- with .mode -}}
+    {{ $mode = . -}}
+{{- end -}}
+{{- $outerClass := .outerClass -}}
+{{- $innerClass := .innerClass -}}
+{{- $title := .title -}}
+{{- $caption := .caption -}}
+{{- if ne (printf "%T" $mode) "bool" -}}
+    {{- errorf "Invalid value for param 'mode'" -}}
+{{- end -}}
+{{- $modes := site.Params.main.modes | default (slice "light" "dark") -}}
 
-{{- $validRatios := slice "1x1" "4x3" "16x9" "21x9" }}
-{{ $ratio := .ratio -}}
-{{ $url := .url -}}
-{{ $outerClass := .outerClass -}}
-{{ $innerClass := .innerClass -}}
-{{ $title := .title -}}
-{{ $caption := .caption -}}
-{{ $inner := .inner -}}
 
-{{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
-{{ with $img -}}
-    {{ $smDim := "" -}}
-    {{ $mdDim := "" -}}
-    {{ $lgDim := "" -}}
-    {{ $xlDim := "" -}}
-    {{ $xxlDim := "" -}}
-    {{ if eq $ratio "4x3" -}}
-        {{ $smDim = "576x432" -}}
-        {{ $mdDim = "768x576" -}}
-        {{ $lgDim = "992x744" -}}
-        {{ $xlDim = "1200x900" -}}
-        {{ $xxlDim = "1400x1050" -}}
-    {{ else if eq $ratio "1x1" -}}
-        {{ $smDim = "576x576" -}}
-        {{ $mdDim = "768x768" -}}
-        {{ $lgDim = "992x992" -}}
-        {{ $xlDim = "1200x1200" -}}
-        {{ $xxlDim = "1400x1400" -}}
-    {{ else if eq $ratio "16x9" -}}
-        {{ $smDim = "576x324" -}}
-        {{ $mdDim = "768x432" -}}
-        {{ $lgDim = "992x558" -}}
-        {{ $xlDim = "1200x675" -}}
-        {{ $xxlDim = "1400x788" -}}
-    {{ else if eq $ratio "21x9" -}}
-        {{ $smDim = "576x247" -}}
-        {{ $mdDim = "768x329" -}}
-        {{ $lgDim = "992x425" -}}
-        {{ $xlDim = "1200x514" -}}
-        {{ $xxlDim = "1400x600" -}}
-    {{ else }}
-        {{ $smDim = printf "576x%d" (int (math.Round (mul (div 576.0 $img.Width) $img.Height))) -}}
-        {{ $mdDim = printf "768x%d" (int (math.Round (mul (div 768.0 $img.Width) $img.Height))) -}}
-        {{ $lgDim = printf "992x%d" (int (math.Round (mul (div 992.0 $img.Width) $img.Height))) -}}
-        {{ $xlDim = printf "1200x%d" (int (math.Round (mul (div 1200.0 $img.Width) $img.Height))) -}}
-        {{ $xxlDim = printf "1400x%d" (int (math.Round (mul (div 1400.0 $img.Width) $img.Height))) -}}
-    {{ end -}}
+<!-- Generate a fallback image of type jpg -->
+{{- define "partials/image-default.html" -}}
+    {{- $img := .img -}}
+    {{- $ratio := .ratio -}}
+    {{- $width := "1400" -}}
+    {{- $dim := "" -}}
+    {{- $fallback := "" -}}
 
-    {{- $sm := "" -}}
-    {{ $md := "" -}}
-    {{ $lg := "" -}}
-    {{ $xl := "" -}}
-    {{ $xxl := "" -}}
-    {{ $fallback := "" -}}
-    {{ if $ratio }}
-        {{- $sm = ($img.Fill (printf "%s webp" $smDim)) -}}
-        {{ $md = ($img.Fill (printf "%s webp" $mdDim)) -}}
-        {{ $lg = ($img.Fill (printf "%s webp" $lgDim)) -}}
-        {{ $xl = ($img.Fill (printf "%s webp" $xlDim)) -}}
-        {{ $xxl = ($img.Fill (printf "%s webp" $xxlDim)) -}}
-        {{ $fallback = ($img.Fill (printf "%s jpg" $xxlDim)) -}}
-    {{ else }}
-        {{- $sm = ($img.Fit (printf "%s webp" $smDim)) -}}
-        {{ $md = ($img.Fit (printf "%s webp" $mdDim)) -}}
-        {{ $lg = ($img.Fit (printf "%s webp" $lgDim)) -}}
-        {{ $xl = ($img.Fit (printf "%s webp" $xlDim)) -}}
-        {{ $xxl = ($img.Fit (printf "%s webp" $xxlDim)) -}}
-        {{ $fallback = ($img.Fit (printf "%s jpg" $xxlDim)) -}}
-    {{ end}}
+    {{- with $img -}}
+        {{- if eq $ratio "4x3" -}}
+            {{- $dim  = "1400x1050" }}
+        {{- else if eq $ratio "1x1" -}}
+            {{- $dim  = "1400x1400" }}
+        {{- else if eq $ratio "16x9" -}}
+            {{- $dim = "1400x788" -}}
+        {{- else if eq $ratio "21x9" -}}
+            {{- $dim = "1400x600" -}}
+        {{- else -}}
+            {{- $dim = printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height))) -}}
+        {{- end -}}
 
-    {{- with $caption -}}
-        <figure class="figure">
+        {{- if $ratio -}}
+            {{- $fallback = ($img.Fill (printf "%s jpg" $dim)) -}}
+        {{- else -}}
+            {{- $fallback = ($img.Fit (printf "%s jpg" $dim)) -}}
+        {{- end -}}
+        {{- $clean := path.Ext $img.RelPermalink -}}
+        {{- $ext := path.Ext $img.RelPermalink -}}
+        {{- $fallback = $fallback | resources.Copy (replace $img.RelPermalink $clean (printf "-%s%s" $dim $ext)) -}}
+    {{- end -}}
+
+    {{- return $fallback -}}
+{{- end -}}
+
+
+<!-- Generate a image set of type webp -->
+{{- define "partials/image-scaled.html " -}}
+    {{- $img := .img -}}
+    {{- $ratio := .ratio -}}
+    {{- $imgset := "" -}}
+
+    {{- $widths := slice "576" "768" "992" "1200" "1400" -}}
+    {{- $dims := slice -}}
+    {{- with $img -}}
+        {{- if eq $ratio "4x3" -}}
+            {{- $dims  = slice "576x432" "768x576" "992x744" "1200x900"  "1400x1050" -}}
+        {{- else if eq $ratio "1x1" -}}
+            {{- $dims  = slice "576x576" "768x768" "992x992" "1200x1200" "1400x1400" -}}
+        {{- else if eq $ratio "16x9" -}}
+            {{- $dims = slice "576x324"  "768x432" "992x558" "1200x675"  "1400x788" -}}
+        {{- else if eq $ratio "21x9" -}}
+            {{- $dims = slice "576x247"  "768x329" "992x425" "1200x514"  "1400x600" -}}
+        {{- else -}}
+            {{- range $width := $widths -}}
+                {{- $dims = $dims | append (printf "%sx%d" $width (int (math.Round (mul (div (float $width) $img.Width) $img.Height)))) -}}
+            {{- end -}}
+        {{- end -}}
+
+        {{- $scaled := "" -}}
+        {{- range $index, $dim := $dims -}}
+            {{- $clean := path.Ext $img.RelPermalink -}}
+            {{- if $ratio -}}
+                {{- $scaled = $img.Fill (printf "%s webp" $dim) -}}
+            {{- else -}}
+                {{- $scaled = $img.Fit (printf "%s webp" $dim) -}}
+            {{- end -}}
+            {{- $scaled = $scaled | resources.Copy (replace $img.RelPermalink $clean (printf "-%s.webp" $dim)) -}}
+            {{- $imgset = printf "%s, %s %sw" $imgset $scaled.RelPermalink (index $widths $index) -}}
+        {{- end -}}
+        {{- $imgset = strings.TrimPrefix ", " $imgset -}}
+    {{- end -}}
+
+    {{- return $imgset -}}
+{{- end -}}
+
+<!-- Define the img with optional caption -->
+{{- define "partials/image-definition.html" -}}
+    {{- $ratio := .ratio -}}
+    {{- $url := .url -}}
+    {{- $outerClass := .outerClass -}}
+    {{- $innerClass := .innerClass -}}
+    {{- $title := .title -}}
+    {{- $caption := .caption -}}
+    {{- $fallbackURL := "" -}}
+    {{- $imgset := "" -}}
+    {{- $mode := .mode -}}
+    {{- $modes := .modes -}}
+
+    {{- if hasSuffix $url "svg" -}}
+        {{- $fallbackURL = $url -}}
+    {{- else -}}
+        {{- $img := partial "utilities/GetImage.html" (dict "url" $url) -}}
+        {{- if $img -}}
+            {{- $fallback := partial "partials/image-default.html" (dict "img" $img "ratio" $ratio) -}}
+            {{- $fallbackURL = $fallback.RelPermalink -}}
+            {{- $imgset = partial "partials/image-scaled.html " (dict "img" $img "ratio" $ratio) -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- range $none := $modes -}}
+        {{- if ne $none $mode -}}
+            {{- $outerClass = printf "%s d-none-%s" $outerClass $none -}}
+        {{- end -}}
+    {{- end -}}
+
+    {{- if $caption -}}
+        <figure class="figure {{ $outerClass }}">
             <img class="figure-img img-fluid {{ $innerClass }}"
-                srcset="
-                    {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
-                    {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
-                    {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
-                    {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
-                    {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
-                sizes="100vw"
-                src="{{ $fallback.RelPermalink }}"
-                alt="{{ $title }}">
-            <figcaption class="figure-caption">{{ . | safeHTML }}</figcaption>
-            {{ $inner }}
+            {{ with $imgset -}}
+            srcset="{{ . }}"
+            sizes="100vw"
+            {{- end }}
+            src="{{ $fallbackURL }}"
+            alt="{{ $title }}">
+            <figcaption class="figure-caption">{{ $caption | safeHTML }}</figcaption>
         </figure>
     {{- else -}}
         <div class="{{ with $ratio }}ratio ratio-{{ . }}{{ end }} {{ $outerClass }}">
             <img class="img-fluid {{ $innerClass }}"
-                srcset="
-                    {{- with $xxl.RelPermalink -}}{{.}} 1400w{{- end -}}
-                    {{- with $xl.RelPermalink -}}, {{.}} 1200w{{- end -}}
-                    {{- with $lg.RelPermalink -}}, {{.}} 992w{{- end -}}
-                    {{- with $md.RelPermalink -}}, {{.}} 768w{{- end -}}
-                    {{- with $sm.RelPermalink -}}, {{.}} 576w{{- end -}}"
+                {{ with $imgset -}}
+                srcset="{{ . }}"
                 sizes="100vw"
-                src="{{ $fallback.RelPermalink }}"
+                {{- end }}
+                src="{{ $fallbackURL }}"
                 alt="{{ $title }}">
-            {{ $inner }}
         </div>
     {{- end -}}
 {{- end -}}
+
+<!-- Initiate the regular or color-mode image -->
+{{- if $mode -}}
+    {{- $ext := path.Ext $url -}}
+    {{- $base := strings.TrimSuffix $ext $url -}}
+    {{- range $suffix := $modes -}}
+        {{- $base = strings.TrimSuffix (printf "-%s" $suffix) $base -}}
+    {{- end -}}
+
+    {{- range $suffix := $modes -}}
+        {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
+        {{- partial "partials/image-definition.html" (dict 
+            "ratio" $ratio
+            "url" $image
+            "outerClass" $outerClass
+            "innerClass" $innerClass
+            "title" $title
+            "caption" $caption
+            "mode" $suffix
+            "modes" $modes)
+        -}}
+    {{- end -}}
+{{- else -}}
+    {{- partial "partials/image-definition.html" (dict 
+        "ratio" $ratio
+        "url" $url
+        "outerClass" $outerClass
+        "innerClass" $innerClass
+        "title" $title
+        "caption" $caption)
+    -}}
+{{- end -}}

layouts/partials/utilities/GetVal.html

@@ -0,0 +1,12 @@
+<!-- 
+    Retrieve the value from a key-value pair. The expected format is 'key="value"', including double quotes for the
+    value. Returns -1 when no valid value is found.
+-->
+
+{{- $input := (split . "=") -}}
+{{- $val := -1 -}}
+{{- if gt (len $input) 1 -}}
+    {{- $val = trim (index $input 1) "\"" -}}
+{{- end -}}
+
+{{- return $val -}}

layouts/shortcodes/alert.html

@@ -1,14 +1,14 @@
 <!-- 
     Displays an alert. The shortcode supports the following arguments:
     "color":        Optional theme color of the alert, either "primary" (default), "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white" or "black".
+                    "warning", "info", "light", "dark", "white" or "black", "body", or "tertiary".
     "dismissible"   Optional flag to indicate the alert is dismissible, defaults to false.
     "icon"          Optional class and name of a Font Awesome icon to include.
 -->
 
 {{ $color := "primary" -}}
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "body" "tertiary" -}}
 {{ if not (in $supportedColors $color) -}}
     {{ errorf "Invalid value for param 'color': %s" .Position -}}
     {{ $color = "primary" -}}

layouts/shortcodes/button.html

@@ -6,7 +6,7 @@
     "state"         Optional state of the button, either "enabled" (default), "disabled", "active", or "inactive".
     "size"          Optional size of the button, either "sm", "md" (default), or "lg".
     "color":        Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black".
+                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "tertiary".
     "outline"       Optional flag indicating the button should be outlined, either "false" (default) or "true".
     "badge"         Optional positioned badge to display on top of the button.
     "aria-label"    Optional label for the badge.
@@ -42,7 +42,7 @@
 
 {{ $color := "primary" -}}
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "tertiary" -}}
 {{ if not (in $supportedColors $color) -}}
     {{ errorf "Invalid value for param 'color': %s" .Position -}}
     {{ $error = true }}

layouts/shortcodes/card.html

@@ -3,7 +3,8 @@
     "path"          Required path of the page.
     "class"         Optional class attribute of the card element, e.g. “w-50”.
     "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white" or "black". By default, no color is specified.
+                    "warning", "info", "light", "dark", "white", "black", "body", or "tertiary". By default, no color is
+                    specified.
     "padding":      Optional padding of the content, either "0", "1", "2", "3", "4", "5", or "auto" (default).
     "header"        Optional header components of the card, displayed in small caps. Supported values are "full"
                     (default), "publication", "tags", and "none".
@@ -26,7 +27,7 @@
 {{ $color := "" -}}
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
 {{ if $color }}
-    {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+    {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "tertiary" -}}
     {{ if not (in $supportedColors $color) -}}
         {{ errorf "Invalid value for param 'color': %s" .Position -}}
         {{ $error = true -}}

layouts/shortcodes/example.html

@@ -33,11 +33,6 @@
     {{- end -}}
     <div class="d-flex align-items-center ps-3 pe-3 py-1 border-top border-bottom syntax-highlight">
         <small class="font-monospace text-body-secondary text-uppercase">{{- $lang -}}</small>
-        <!-- <div class="d-flex ms-auto">
-            <button type="button" class="mt-0 me-0 border-0" title="Copy to clipboard">
-                <i class="fa-regular fa-clipboard"></i>
-            </button>
-        </div> -->
     </div>
     <div class="rounded-bottom syntax-highlight">
         {{- if eq $show_markup true -}}

layouts/shortcodes/image.html

@@ -9,6 +9,7 @@
     "class":        Optional class attribute of the inner img element, e.g. "rounded".
     "title":        Optional alternate text of the image.
     "caption":      Optional figure caption.
+    "mode":         Optional flag indicating if the image should support color modes.
 -->
 
 {{- if isset .Params "src" -}}
@@ -24,8 +25,24 @@
     {{- $class := .Get "class" -}}
     {{ $title := .Get "title" -}}
     {{ $caption := .Get "caption" -}}
+    {{ $supportedFlags := slice "true" "false" -}}
+    {{ $modeParam := "false" -}}
+    {{ $mode := false -}}
+    {{ with .Get "mode" }}{{ $modeParam = . }}{{ end -}}
+    {{ if in $supportedFlags $modeParam -}}
+        {{ if eq $modeParam "true" }}{{ $mode = true }}{{ else }}{{ $mode = false }}{{ end -}}
+    {{ else -}}
+        {{ errorf "Invalid value for param 'mode': %s" $modeParam -}}
+    {{ end -}}
     
-    {{- partial "image.html" (dict "url" $url "ratio" $ratio "innerClass" $class "title" $title "caption" $caption) -}} 
+    {{- partial "image.html" (dict 
+        "url" $url
+        "ratio" $ratio
+        "innerClass" $class
+        "title" $title
+        "caption" $caption
+        "mode" $mode)
+    -}} 
 {{ else -}}
     {{ errorf "Missing value for param 'src': %s" .Position -}}
 {{ end -}}

layouts/shortcodes/nav-item.html

@@ -0,0 +1,54 @@
+<!-- 
+    Defines an individual nav item. The shortcode supports the following arguments:
+    "header"        Required header of the nav item.
+    "class"         Optional class attribute of the inner nav item.
+    "show"          Optional flag to indicate an item should be shown.
+-->
+
+{{- $id := .Ordinal -}}
+{{- $parent := printf "nav-%d" .Parent.Ordinal -}}
+{{- with (.Parent.Get "id") -}}
+    {{- $parent = . -}}
+{{- end -}}
+
+{{- $fade := false -}}
+{{- if eq (.Parent.Get "fade") "true" -}}
+    {{- $fade = true -}}
+{{- end -}}
+
+{{- $header := .Get "header" -}}
+{{- if not $header -}}
+    {{- if .Parent -}}
+        {{- errorf "Missing value for param 'header': %s" .Parent.Position -}}
+    {{- else -}}
+        {{- errorf "Missing value for param 'header': %s" .Position -}}
+    {{- end -}}
+{{- end -}}
+
+{{- $class := .Get "class" -}}
+{{- $body := trim .Inner " \r\n" -}}
+
+{{- $supportedFlags := slice "true" "false" -}}
+{{- $showParam := "false" -}}
+{{- $show := false -}}
+{{- with .Get "show" }}{{ $showParam = . }}{{ end -}}
+{{- if in $supportedFlags $showParam -}}
+    {{- if eq $showParam "true" }}{{ $show = true }}{{ else }}{{ $show = false }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'show': %s" $showParam -}}
+{{- end -}}
+
+{{- $disabledParam := "false" -}}
+{{- $disabled := false -}}
+{{- with .Get "disabled" }}{{ $disabledParam = . }}{{ end -}}
+{{- if in $supportedFlags $disabledParam -}}
+    {{- if eq $disabledParam "true" }}{{ $disabled = true }}{{ else }}{{ $disabled = false }}{{ end -}}
+{{- else -}}
+    {{- errorf "Invalid value for param 'disabled': %s" $disabledParam -}}
+{{- end -}}
+
+<div class="tab-pane{{ if $show }} active {{ if $fade}}show{{ end }}{{ end }} {{ if $fade}}fade{{ end }}" id="{{ $parent }}-{{ $id }}" 
+    role="tabpanel" aria-labelledby="{{ $parent }}-btn-{{ $id }}" tabindex="0" data-header="{{ $header }}" {{ if $show }}data-show-id="{{ $id }}"{{ end }} 
+    data-has-content="{{ gt (len $body) 0 }}" {{ if $disabled }} data-disabled-id="{{ $id }}"{{ end }}>
+    {{ $body | markdownify | safeHTML }}
+</div>

layouts/shortcodes/nav.html

@@ -0,0 +1,77 @@
+<!-- 
+    Displays a tab group of multiple items. Add nav-item inner elements for each tab pane. The shortcode supports the
+    following arguments:
+    "type"          Optional type of the tab group, either "tabs", "pills", or "underline".
+    "vertical"      Optional flag to show vertical tabs instead of horizontal tabs (default).
+    "fade"          Optional flag to make tab panes fade in.
+    "class":        Optional class attribute of the tab group, e.g. “nav-fill”.
+-->
+
+{{- $id := printf "nav-%d" .Ordinal -}}
+{{ with .Get "id" }}
+    {{ $id = . }}
+{{ end }}
+
+{{- $class := .Get "class" -}}
+{{ $type := .Get "type" -}}
+{{ $supportedNavTypes := slice "tabs" "pills" "underline" -}}
+{{ if $type }}
+    {{ if not (in $supportedNavTypes $type) -}}
+        {{ errorf "Invalid value for param 'type': %s" $type -}}
+    {{ end -}}
+{{ end -}}
+
+{{ $supportedFlags := slice "true" "false" -}}
+{{ $verticalParam := "false" -}}
+{{ $vertical := false -}}
+{{ with .Get "vertical" }}{{ $verticalParam = . }}{{ end -}}
+{{ if in $supportedFlags $verticalParam -}}
+    {{ if eq $verticalParam "true" }}{{ $vertical = true }}{{ else }}{{ $vertical = false }}{{ end -}}
+{{ else -}}
+    {{ errorf "Invalid value for param 'vertical': %s" $verticalParam -}}
+{{- end -}}
+
+{{ $fadeParam := "false" -}}
+{{ with .Get "fade" }}{{ $fadeParam = . }}{{ end -}}
+{{ if not (in $supportedFlags $fadeParam) -}}
+    {{ errorf "Invalid value for param 'fade': %s" $fadeParam -}}
+{{- end -}}
+
+{{- if and (eq $type "tabs") $vertical -}}
+    {{- errorf "Tabs do not support vertical layout" -}}
+{{- end -}}
+
+{{- $inner := .Inner -}}
+{{- $items := findRE "data-header=\"(.+?)\"" $inner -}}
+{{- $showVal := findRE "data-show-id=\"(.+?)\"" $inner -}}
+{{- $showID := -1 -}}
+{{- if gt (len $showVal) 0 -}}
+    {{- $showID = int (partial "utilities/GetVal.html" (index $showVal 0)) -}}
+{{- end -}}
+
+{{ $disabled := slice -}}
+{{- $disabledVal := findRE "data-disabled-id=\"(.+?)\"" $inner -}}
+{{- range $item := $disabledVal -}}
+    {{- $disabled = $disabled | append (int (partial "utilities/GetVal.html" $item)) -}}
+{{- end -}}
+
+{{- $hasContent := gt (len (findRE "data-has-content=\"true\"" $inner)) 0 -}}
+
+{{ if $vertical }}<div class="d-flex align-items-start">{{ end }}
+<div class="nav{{ with $type }} nav-{{ . }}{{ end }}{{ with $class }} {{ . }}{{ end }}{{ if $vertical }} flex-column{{ end }}" id="{{ $id }}" role="tablist"{{ if $vertical }} aria-orientation="vertical"{{ end }}>
+    {{- range $index, $item := $items -}}
+        {{- $header := partial "utilities/GetVal.html" $item -}}
+        {{- $itemDisabled := in $disabled $index -}}
+        <button class="nav-link text-nowrap{{ if eq $index $showID }} active{{ end }} {{ if $itemDisabled}} disabled {{end }}" id="{{ $id }}-btn-{{ $index }}" data-bs-toggle="pill" data-bs-target="#{{ $id }}-{{ $index }}" 
+                type="button" role="tab" aria-controls="{{ $id }}-{{ $index }}" aria-selected="{{ if eq $index 0 }}true{{ else }}false{{ end }}">
+            {{ $header }}
+        </button>
+    {{ end -}}
+</div>
+
+{{- if $hasContent -}}
+    <div class="tab-content {{ if eq $type "tabs" }}border border-top-0 p-3{{ else if $vertical }}ms-3{{ else }}mt-3{{ end }}">
+        {{- $inner -}}
+    </div>
+{{- end -}}
+{{ if $vertical }}</div>{{ end }}

layouts/shortcodes/navbar.html

@@ -7,13 +7,17 @@
     "size"          Optional breakpoint of the navbar toggler, either "xs", "sm", "md" (default), "lg", or "xl".
     "style"         Optional style of the navbar, either "light" (default) or "dark".
     "color"         Optional background color of the navbar, either "primary", "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black". The default color is none.
+                    "danger", "warning", "info", "light", "dark", "white", "black", "body", or "tertiary". The default color is
+                    none.
+    "mode"          Optional flag to include a color mode switcher, default is "true" (if dark mode is enabled).
     "search"        Optional flag to include a search input, default is "true".
     "logo"          Optional address of the logo image.
     "title"         Optional brand title, displayed when the logo is not set.
 -->
 
 {{ $error := false }}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "body" "tertiary" -}}
+{{ $supportedFlags := slice "true" "false" -}}
 
 {{ $id := add .Ordinal 1 }}
 
@@ -49,7 +53,6 @@
 {{ $color := "" -}}
 {{ with .Get "color" }}
     {{ $color = . }}
-    {{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" -}}
     {{ if not (in $supportedColors $color) -}}
         {{ errorf "Invalid value for param 'color': %s" $color -}}
         {{ $error = true -}}
@@ -58,12 +61,18 @@
 
 {{ $searchParam := "true" -}}
 {{ with .Get "search" }}{{ $searchParam = . }}{{ end -}}
-{{ $supportedFlags := slice "true" "false" -}}
 {{ if not (in $supportedFlags $searchParam) -}}
     {{ errorf "Invalid value for param 'search': %s" .Position -}}
     {{ $error = true -}}
 {{ end -}}
 
+{{ $modeParam := "true" -}}
+{{ with .Get "mode" }}{{ $modeParam = . }}{{ end -}}
+{{ if not (in $supportedFlags $modeParam) -}}
+    {{ errorf "Invalid value for param 'mode': %s" .Position -}}
+    {{ $error = true -}}
+{{ end -}}
+
 {{ $logo := "" -}}
 {{ with .Get "logo" }}{{ $logo = . }}{{ end -}}
 
@@ -71,5 +80,17 @@
 {{ with .Get "title" }}{{ $title = . }}{{ end -}}
 
 {{ if not $error -}}
-    {{- partial "assets/navbar.html" (dict "id" $id "page" $page "size" $size "style" $style "color" $color "search" $searchParam "menus" $menus "logo" $logo "title" $title) -}}
+    {{- partial "assets/navbar.html" (dict 
+        "id" $id 
+        "page" $page
+        "size" $size
+        "style" $style
+        "color" $color
+        "search" $searchParam
+        "mode" $modeParam
+        "menus" $menus
+        "logo" $logo
+        "title" $title
+        )
+    -}}
 {{ end -}}

layouts/shortcodes/persona.html

@@ -0,0 +1,33 @@
+<!-- 
+    Displays a custom persona card. The shortcode supports the following arguments:
+    "path"          Required path of the page.
+    "class"         Optional class attribute of the card element, e.g. “w-50”.
+    "color":        Optional theme color of the card, either "primary", "secondary", "success", "danger",
+                    "warning", "info", "light", "dark", "white",  "black", or "tertiary". By default, no color is
+                    specified.
+-->
+
+{{- $error := false -}}
+
+{{- $path := .Get "path" -}}
+{{- $page := .Site.GetPage $path -}}
+{{- if not $page -}}
+    {{- errorf "Invalid or missing value for param 'path': %s" .Position -}}
+    {{- $error = true -}}
+{{- end -}}
+
+{{- $class := .Get "class" -}}
+
+{{- $color := "" -}}
+{{- with .Get "color" }}{{ $color = . }}{{ end -}}
+{{- if $color -}}
+    {{- $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "tertiary" -}}
+    {{- if not (in $supportedColors $color) -}}
+        {{- errorf "Invalid value for param 'color': %s" .Position -}}
+        {{- $error = true -}}
+    {{- end -}}
+{{- end -}}
+
+{{- if not $error -}}
+    {{- partial "assets/persona.html" (dict "path" $path "class" $class "color" $color) -}}
+{{- end -}}

layouts/shortcodes/spinner.html

@@ -1,14 +1,14 @@
 <!-- 
     Displays a spinner. The shortcode supports the following arguments:
     "color":        Optional theme color of the alert, either "primary" (default), "secondary", "success", "danger",
-                    "warning", "info", "light", "dark", "white" or "black".
+                    "warning", "info", "light", "dark", "white", "black", "body", or "tertiary".
     "grow"          Optional flag to indicate the spinner is growing instead of rotating, defaults to false.
     "class":        Optional class attribute of the spinner wrapping element, e.g. “text-center”.
 -->
 
 {{ $color := "primary" -}}
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "tertiary" -}}
 {{ if not (in $supportedColors $color) -}}
     {{ errorf "Invalid value for param 'color': %s" .Position -}}
     {{ $color = "primary" -}}

layouts/shortcodes/tooltip.html

@@ -1,7 +1,7 @@
 <!-- 
     Displays a tooltip for a link. The shortcode supports the following arguments:
     "color":        Optional theme color of the element, either "primary" (default), "secondary", "success",
-                    "danger", "warning", "info", "light", "dark", "white" or "black".
+                    "danger", "warning", "info", "light", "dark", "white",  "black", "body", or "tertiary".
     "title"         Required text to display in the tooltip.
     "href"          Required address for the button or hyperlink.
     "placement"     Optional position of the tooltip: "top" (default), "bottom", "left", or "right". 
@@ -18,7 +18,7 @@
 
 {{ $color := "primary" -}}
 {{ with .Get "color" }}{{ $color = . }}{{ end -}}
-{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" -}}
+{{ $supportedColors := slice "primary" "secondary" "success" "danger" "warning" "info" "light" "dark" "white" "black" "body" "tertiary" -}}
 {{ if not (in $supportedColors $color) -}}
     {{ errorf "Invalid value for param 'color': %s" .Position -}}
     {{ $error = true }}

layouts/tags/list.html

@@ -3,7 +3,7 @@
         <div class="row row-cols-1 row-cols-sm-3 align-items-center p-3">
             <div class="col col-md-2 d-none d-md-block"></div>
             <div class="col col-sm-12 col-md-8">
-                <h1>{{ .Name | humanize }}</h1>
+                <p class="display-4">{{ .Name | humanize }}</p>
 
                 {{ if eq .Kind "taxonomy" }}
                     <div class="row mt-5"></div>

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.11.2",
+  "version": "0.12.0-alpha",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "@gethinode/hinode",
-      "version": "0.11.2",
+      "version": "0.12.0-alpha",
       "license": "MIT",
       "devDependencies": {
         "@fortawesome/fontawesome-free": "^6.4.0",
@@ -22,13 +22,13 @@
         "eslint-plugin-promise": "^6.1.1",
         "flexsearch": "^0.7.31",
         "hugo-bin": "^0.102.0",
-        "markdownlint-cli2": "^0.6.0",
+        "markdownlint-cli2": "^0.7.0",
         "postcss-cli": "^10.1.0",
         "purgecss-whitelister": "^2.4.0",
-        "rimraf": "^4.4.1",
+        "rimraf": "^5.0.0",
         "shx": "^0.3.4",
         "stylelint": "^15.4.0",
-        "stylelint-config-standard-scss": "^7.0.1"
+        "stylelint-config-standard-scss": "^8.0.0"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -138,9 +138,9 @@
       }
     },
     "node_modules/@csstools/css-parser-algorithms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.0.tgz",
-      "integrity": "sha512-KP8TicdXpUyeB1NMlbHud/1l39xvLGvqNFWMpG4qC6H1zs9SadGUHe5SO92n/659sDW9aGDvm9AMru0DZkN1Bw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.1.tgz",
+      "integrity": "sha512-viRnRh02AgO4mwIQb2xQNJju0i+Fh9roNgmbR5xEuG7J3TGgxjnE95HnBLgsFJOJOksvcfxOUCgODcft6Y07cA==",
       "dev": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -150,13 +150,13 @@
         "url": "https://opencollective.com/csstools"
       },
       "peerDependencies": {
-        "@csstools/css-tokenizer": "^2.0.0"
+        "@csstools/css-tokenizer": "^2.1.1"
       }
     },
     "node_modules/@csstools/css-tokenizer": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz",
-      "integrity": "sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz",
+      "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==",
       "dev": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -167,9 +167,9 @@
       }
     },
     "node_modules/@csstools/media-query-list-parser": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz",
-      "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.4.tgz",
+      "integrity": "sha512-GyYot6jHgcSDZZ+tLSnrzkR7aJhF2ZW6d+CXH66mjy5WpAQhZD4HDke2OQ36SivGRWlZJpAz7TzbW6OKlEpxAA==",
       "dev": true,
       "engines": {
         "node": "^14 || ^16 || >=18"
@@ -179,8 +179,8 @@
         "url": "https://opencollective.com/csstools"
       },
       "peerDependencies": {
-        "postcss": "^8.4",
-        "postcss-selector-parser": "^6.0.10"
+        "@csstools/css-parser-algorithms": "^2.1.1",
+        "@csstools/css-tokenizer": "^2.1.1"
       }
     },
     "node_modules/@csstools/selector-specificity": {
@@ -247,9 +247,9 @@
       }
     },
     "node_modules/@eslint/js": {
-      "version": "8.37.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.37.0.tgz",
-      "integrity": "sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A==",
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
+      "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
       "dev": true,
       "engines": {
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
@@ -1887,6 +1887,12 @@
         "node": ">=8"
       }
     },
+    "node_modules/dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "node_modules/doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -2094,15 +2100,15 @@
       }
     },
     "node_modules/eslint": {
-      "version": "8.37.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.37.0.tgz",
-      "integrity": "sha512-NU3Ps9nI05GUoVMxcZx1J8CNR6xOvUT4jAUMH5+z8lpp3aEdPVCImKw6PWG4PY+Vfkpr+jvMpxs/qoE7wq0sPw==",
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
+      "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
       "dev": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.2",
-        "@eslint/js": "8.37.0",
+        "@eslint/js": "8.38.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -3229,9 +3235,9 @@
       }
     },
     "node_modules/globby": {
-      "version": "13.1.3",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
-      "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
+      "version": "13.1.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
+      "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
       "dev": true,
       "dependencies": {
         "dir-glob": "^3.0.1",
@@ -3371,9 +3377,9 @@
       }
     },
     "node_modules/html-tags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -4062,26 +4068,27 @@
       }
     },
     "node_modules/markdownlint": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.27.0.tgz",
-      "integrity": "sha512-HtfVr/hzJJmE0C198F99JLaeada+646B5SaG2pVoEakLFI6iRGsvMqrnnrflq8hm1zQgwskEgqSnhDW11JBp0w==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.28.1.tgz",
+      "integrity": "sha512-8At2DbgGKT/RVBinkqIPqLETopPXyQFGWSiTCJSr9Y6wVVyY70cDJ9dw3FXePn4AkytIUclgrsgI6KVeqeHFoA==",
       "dev": true,
       "dependencies": {
-        "markdown-it": "13.0.1"
+        "markdown-it": "13.0.1",
+        "markdownlint-micromark": "0.1.2"
       },
       "engines": {
         "node": ">=14.18.0"
       }
     },
     "node_modules/markdownlint-cli2": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.6.0.tgz",
-      "integrity": "sha512-Bv20r6WGdcHMWi8QvAFZ3CBunf4i4aYmVdTfpAvXODI/1k3f09DZZ0i0LcX9ZMhlVxjoOzbVDz1NWyKc5hwTqg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.7.0.tgz",
+      "integrity": "sha512-67r1t9ep+z0fa6g9TgL3tiPQeWo297ip165Et2u54UquJAkXWnq6e+dXFBjSPft/iLaGJfU0fUHXhXueqNUkGQ==",
       "dev": true,
       "dependencies": {
-        "globby": "13.1.3",
-        "markdownlint": "0.27.0",
-        "markdownlint-cli2-formatter-default": "0.0.3",
+        "globby": "13.1.4",
+        "markdownlint": "0.28.1",
+        "markdownlint-cli2-formatter-default": "0.0.4",
         "micromatch": "4.0.5",
         "strip-json-comments": "5.0.0",
         "yaml": "2.2.1"
@@ -4096,9 +4103,9 @@
       }
     },
     "node_modules/markdownlint-cli2-formatter-default": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.3.tgz",
-      "integrity": "sha512-QEAJitT5eqX1SNboOD+SO/LNBpu4P4je8JlR02ug2cLQAqmIhh8IJnSK7AcaHBHhNADqdGydnPpQOpsNcEEqCw==",
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.4.tgz",
+      "integrity": "sha512-xm2rM0E+sWgjpPn1EesPXx5hIyrN2ddUnUwnbCsD/ONxYtw3PX6LydvdH6dciWAoFDpwzbHM1TO7uHfcMd6IYg==",
       "dev": true,
       "peerDependencies": {
         "markdownlint-cli2": ">=0.0.4"
@@ -4116,6 +4123,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/markdownlint-micromark": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/markdownlint-micromark/-/markdownlint-micromark-0.1.2.tgz",
+      "integrity": "sha512-jRxlQg8KpOfM2IbCL9RXM8ZiYWz2rv6DlZAnGv8ASJQpUh6byTBnEsbuMZ6T2/uIgntyf7SKg/mEaEBo1164fQ==",
+      "dev": true,
+      "engines": {
+        "node": ">=14.18.0"
+      }
+    },
     "node_modules/mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -4276,9 +4292,9 @@
       }
     },
     "node_modules/minipass": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.4.tgz",
-      "integrity": "sha512-lwycX3cBMTvcejsHITUgYj6Gy6A7Nh4Q6h9NP4sTHY1ccJlC7yKzDmiShEHsJ16Jf1nKGDEaiHxiltsJEvk0nQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
       "dev": true,
       "engines": {
         "node": ">=8"
@@ -4646,28 +4662,28 @@
       "dev": true
     },
     "node_modules/path-scurry": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.6.1.tgz",
-      "integrity": "sha512-OW+5s+7cw6253Q4E+8qQ/u1fVvcJQCJo/VFD8pje+dbJCF1n5ZRMV2AEHbGp+5Q7jxQIYJxkHopnj6nzdGeZLA==",
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.6.4.tgz",
+      "integrity": "sha512-Qp/9IHkdNiXJ3/Kon++At2nVpnhRiPq/aSvQN+H3U1WZbvNRK0RIQK/o4HMqPoXjpuGJUEWpHSs6Mnjxqh3TQg==",
       "dev": true,
       "dependencies": {
-        "lru-cache": "^7.14.1",
-        "minipass": "^4.0.2"
+        "lru-cache": "^9.0.0",
+        "minipass": "^5.0.0"
       },
       "engines": {
-        "node": ">=14"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/path-scurry/node_modules/lru-cache": {
-      "version": "7.18.1",
-      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.1.tgz",
-      "integrity": "sha512-8/HcIENyQnfUTCDizRu9rrDyG6XG/21M4X7/YEGZeD76ZJilFPAUVb/2zysFf7VVO1LEjCDFyHp8pMMvozIrvg==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-9.0.0.tgz",
+      "integrity": "sha512-9AEKXzvOZc4BMacFnYiTOlDH/197LNnQIK9wZ6iMB5NXPzuv4bWR/Msv7iUMplkiMQ1qQL+KSv/JF1mZAB5Lrg==",
       "dev": true,
       "engines": {
-        "node": ">=12"
+        "node": ">=16.14"
       }
     },
     "node_modules/path-type": {
@@ -5884,12 +5900,12 @@
       }
     },
     "node_modules/rimraf": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.4.1.tgz",
-      "integrity": "sha512-Gk8NlF062+T9CqNGn6h4tls3k6T1+/nXdOcSZVikNVtlRdYpA7wRJJMoXmuvOnLW844rPjdQ7JgXCYM6PPC/og==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.0.tgz",
+      "integrity": "sha512-Jf9llaP+RvaEVS5nPShYFhtXIrb3LRKP281ib3So0KkeZKo2wIKyq0Re7TOSwanasA423PSr6CCIL4bP6T040g==",
       "dev": true,
       "dependencies": {
-        "glob": "^9.2.0"
+        "glob": "^10.0.0"
       },
       "bin": {
         "rimraf": "dist/cjs/src/bin.js"
@@ -5911,15 +5927,15 @@
       }
     },
     "node_modules/rimraf/node_modules/glob": {
-      "version": "9.2.1",
-      "resolved": "https://registry.npmjs.org/glob/-/glob-9.2.1.tgz",
-      "integrity": "sha512-Pxxgq3W0HyA3XUvSXcFhRSs+43Jsx0ddxcFrbjxNGkL2Ak5BAUBxLqI5G6ADDeCHLfzzXFhe0b1yYcctGmytMA==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.0.0.tgz",
+      "integrity": "sha512-zmp9ZDC6NpDNLujV2W2n+3lH+BafIVZ4/ct+Yj3BMZTH/+bgm/eVjHzeFLwxJrrIGgjjS2eiQLlpurHsNlEAtQ==",
       "dev": true,
       "dependencies": {
         "fs.realpath": "^1.0.0",
-        "minimatch": "^7.4.1",
-        "minipass": "^4.2.4",
-        "path-scurry": "^1.6.1"
+        "minimatch": "^9.0.0",
+        "minipass": "^5.0.0",
+        "path-scurry": "^1.6.4"
       },
       "engines": {
         "node": ">=16 || 14 >=14.17"
@@ -5929,15 +5945,15 @@
       }
     },
     "node_modules/rimraf/node_modules/minimatch": {
-      "version": "7.4.2",
-      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.2.tgz",
-      "integrity": "sha512-xy4q7wou3vUoC9k1xGTXc+awNdGaGVHtFUaey8tiX4H1QRc04DZ/rmDFwNm2EBsuYEhAZ6SgMmYf3InGY6OauA==",
+      "version": "9.0.0",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.0.tgz",
+      "integrity": "sha512-0jJj8AvgKqWN05mrwuqi8QYKx1WmYSUoKSxu5Qhs9prezTz10sxAHGNZe9J9cqIJzta8DWsleh2KaVaLl6Ru2w==",
       "dev": true,
       "dependencies": {
         "brace-expansion": "^2.0.1"
       },
       "engines": {
-        "node": ">=10"
+        "node": ">=16 || 14 >=14.17"
       },
       "funding": {
         "url": "https://github.com/sponsors/isaacs"
@@ -6429,14 +6445,14 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "15.4.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.4.0.tgz",
-      "integrity": "sha512-TlOvpG3MbcFwHmK0q2ykhmpKo7Dq892beJit0NPdpyY9b1tFah/hGhqnAz/bRm2PDhDbJLKvjzkEYYBEz7Dxcg==",
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.5.0.tgz",
+      "integrity": "sha512-jyMO3R1QtE5mUS4v40+Gg+sIQBqe7CF1xPslxycDzNVkIBCUD4O+5F1vLPq16VmunUTv4qG9o2rUKLnU5KkVeQ==",
       "dev": true,
       "dependencies": {
         "@csstools/css-parser-algorithms": "^2.1.0",
         "@csstools/css-tokenizer": "^2.1.0",
-        "@csstools/media-query-list-parser": "^2.0.1",
+        "@csstools/media-query-list-parser": "^2.0.2",
         "@csstools/selector-specificity": "^2.2.0",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
@@ -6450,7 +6466,7 @@
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
-        "html-tags": "^3.2.0",
+        "html-tags": "^3.3.1",
         "ignore": "^5.2.4",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
@@ -6489,27 +6505,27 @@
       }
     },
     "node_modules/stylelint-config-recommended": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz",
-      "integrity": "sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-11.0.0.tgz",
+      "integrity": "sha512-SoGIHNI748OCZn6BxFYT83ytWoYETCINVHV3LKScVAWQQauWdvmdDqJC5YXWjpBbxg2E761Tg5aUGKLFOVhEkA==",
       "dev": true,
       "peerDependencies": {
-        "stylelint": "^15.0.0"
+        "stylelint": "^15.3.0"
       }
     },
     "node_modules/stylelint-config-recommended-scss": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-9.0.1.tgz",
-      "integrity": "sha512-qAmz/TdrqslwiMTuLM3QXeISUkfEDUXGMfRBCHm/xrkCJNnQefv+mzG2mWTsWkqcVk8HAyUkug10dwAcYp2fCQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-10.0.0.tgz",
+      "integrity": "sha512-+YvPgUHi0W5mCJCKdupBCIsWPYNbWuJcRmFtSYujwNg+41ljFknhO9bpY6C+oahv659zW7W1AT7i6DQvJYYr1A==",
       "dev": true,
       "dependencies": {
-        "postcss-scss": "^4.0.2",
-        "stylelint-config-recommended": "^10.0.1",
-        "stylelint-scss": "^4.4.0"
+        "postcss-scss": "^4.0.6",
+        "stylelint-config-recommended": "^11.0.0",
+        "stylelint-scss": "^4.6.0"
       },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^15.0.0"
+        "stylelint": "^15.3.0"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -6518,29 +6534,29 @@
       }
     },
     "node_modules/stylelint-config-standard": {
-      "version": "30.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz",
-      "integrity": "sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==",
+      "version": "32.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-32.0.0.tgz",
+      "integrity": "sha512-UnGJxYDyYFrIE9CjDMZRkrNh2o4lOtO+MVZ9qG5b8yARfsWho0GMx4YvhHfsv8zKKgHeWX2wfeyxmuoqcaYZ4w==",
       "dev": true,
       "dependencies": {
-        "stylelint-config-recommended": "^10.0.1"
+        "stylelint-config-recommended": "^11.0.0"
       },
       "peerDependencies": {
-        "stylelint": "^15.0.0"
+        "stylelint": "^15.4.0"
       }
     },
     "node_modules/stylelint-config-standard-scss": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.1.tgz",
-      "integrity": "sha512-m5sRdtsB1F5fnC1Ozla7ryftU47wVpO+HWd+JQTqeoG0g/oPh5EfbWfcVHbNCEtuoHfALIySiUWS20pz2hX6jA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-8.0.0.tgz",
+      "integrity": "sha512-TDT/gJD/0LUDoUgkjF1uoI/4DfczXHxg7gJVcWT4/JbE6k5hszVuI14reNX+tEwSyMNhcK2BA7izrK+uVAz7XA==",
       "dev": true,
       "dependencies": {
-        "stylelint-config-recommended-scss": "^9.0.0",
-        "stylelint-config-standard": "^30.0.1"
+        "stylelint-config-recommended-scss": "^10.0.0",
+        "stylelint-config-standard": "^32.0.0"
       },
       "peerDependencies": {
         "postcss": "^8.3.3",
-        "stylelint": "^15.0.0"
+        "stylelint": "^15.4.0"
       },
       "peerDependenciesMeta": {
         "postcss": {
@@ -6549,16 +6565,16 @@
       }
     },
     "node_modules/stylelint-scss": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.4.0.tgz",
-      "integrity": "sha512-Qy66a+/30aylFhPmUArHhVsHOun1qrO93LGT15uzLuLjWS7hKDfpFm34mYo1ndR4MCo8W4bEZM1+AlJRJORaaw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.6.0.tgz",
+      "integrity": "sha512-M+E0BQim6G4XEkaceEhfVjP/41C9Klg5/tTPTCQVlgw/jm2tvB+OXJGaU0TDP5rnTCB62aX6w+rT+gqJW/uwjA==",
       "dev": true,
       "dependencies": {
-        "lodash": "^4.17.21",
+        "dlv": "^1.1.3",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
       },
       "peerDependencies": {
         "stylelint": "^14.5.1 || ^15.0.0"
@@ -7202,22 +7218,22 @@
       }
     },
     "@csstools/css-parser-algorithms": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.0.tgz",
-      "integrity": "sha512-KP8TicdXpUyeB1NMlbHud/1l39xvLGvqNFWMpG4qC6H1zs9SadGUHe5SO92n/659sDW9aGDvm9AMru0DZkN1Bw==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-parser-algorithms/-/css-parser-algorithms-2.1.1.tgz",
+      "integrity": "sha512-viRnRh02AgO4mwIQb2xQNJju0i+Fh9roNgmbR5xEuG7J3TGgxjnE95HnBLgsFJOJOksvcfxOUCgODcft6Y07cA==",
       "dev": true,
       "requires": {}
     },
     "@csstools/css-tokenizer": {
-      "version": "2.1.0",
-      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.0.tgz",
-      "integrity": "sha512-dtqFyoJBHUxGi9zPZdpCKP1xk8tq6KPHJ/NY4qWXiYo6IcSGwzk3L8x2XzZbbyOyBs9xQARoGveU2AsgLj6D2A==",
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/@csstools/css-tokenizer/-/css-tokenizer-2.1.1.tgz",
+      "integrity": "sha512-GbrTj2Z8MCTUv+52GE0RbFGM527xuXZ0Xa5g0Z+YN573uveS4G0qi6WNOMyz3yrFM/jaILTTwJ0+umx81EzqfA==",
       "dev": true
     },
     "@csstools/media-query-list-parser": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.1.tgz",
-      "integrity": "sha512-X2/OuzEbjaxhzm97UJ+95GrMeT29d1Ib+Pu+paGLuRWZnWRK9sI9r3ikmKXPWGA1C4y4JEdBEFpp9jEqCvLeRA==",
+      "version": "2.0.4",
+      "resolved": "https://registry.npmjs.org/@csstools/media-query-list-parser/-/media-query-list-parser-2.0.4.tgz",
+      "integrity": "sha512-GyYot6jHgcSDZZ+tLSnrzkR7aJhF2ZW6d+CXH66mjy5WpAQhZD4HDke2OQ36SivGRWlZJpAz7TzbW6OKlEpxAA==",
       "dev": true,
       "requires": {}
     },
@@ -7261,9 +7277,9 @@
       }
     },
     "@eslint/js": {
-      "version": "8.37.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.37.0.tgz",
-      "integrity": "sha512-x5vzdtOOGgFVDCUs81QRB2+liax8rFg3+7hqM+QhBG0/G3F1ZsoYl97UrqgHgQ9KKT7G6c4V+aTUCgu/n22v1A==",
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-8.38.0.tgz",
+      "integrity": "sha512-IoD2MfUnOV58ghIHCiil01PcohxjbYR/qCxsoC+xNgUwh1EY8jOOrYmu3d3a71+tJJ23uscEV4X2HJWMsPJu4g==",
       "dev": true
     },
     "@fortawesome/fontawesome-free": {
@@ -8425,6 +8441,12 @@
         "path-type": "^4.0.0"
       }
     },
+    "dlv": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/dlv/-/dlv-1.1.3.tgz",
+      "integrity": "sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==",
+      "dev": true
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -8580,15 +8602,15 @@
       "dev": true
     },
     "eslint": {
-      "version": "8.37.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.37.0.tgz",
-      "integrity": "sha512-NU3Ps9nI05GUoVMxcZx1J8CNR6xOvUT4jAUMH5+z8lpp3aEdPVCImKw6PWG4PY+Vfkpr+jvMpxs/qoE7wq0sPw==",
+      "version": "8.38.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-8.38.0.tgz",
+      "integrity": "sha512-pIdsD2jwlUGf/U38Jv97t8lq6HpaU/G9NKbYmpWpZGw3LdTNhZLbJePqxOXGB5+JEKfOPU/XLxYxFh03nr1KTg==",
       "dev": true,
       "requires": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.4.0",
         "@eslint/eslintrc": "^2.0.2",
-        "@eslint/js": "8.37.0",
+        "@eslint/js": "8.38.0",
         "@humanwhocodes/config-array": "^0.11.8",
         "@humanwhocodes/module-importer": "^1.0.1",
         "@nodelib/fs.walk": "^1.2.8",
@@ -9430,9 +9452,9 @@
       }
     },
     "globby": {
-      "version": "13.1.3",
-      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.3.tgz",
-      "integrity": "sha512-8krCNHXvlCgHDpegPzleMq07yMYTO2sXKASmZmquEYWEmCx6J5UTRbp5RwMJkTJGtcQ44YpiUYUiN0b9mzy8Bw==",
+      "version": "13.1.4",
+      "resolved": "https://registry.npmjs.org/globby/-/globby-13.1.4.tgz",
+      "integrity": "sha512-iui/IiiW+QrJ1X1hKH5qwlMQyv34wJAYwH1vrf8b9kBA4sNiif3gKsMHa+BrdnOpEudWjpotfa7LrTzB1ERS/g==",
       "dev": true,
       "requires": {
         "dir-glob": "^3.0.1",
@@ -9530,9 +9552,9 @@
       }
     },
     "html-tags": {
-      "version": "3.2.0",
-      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.2.0.tgz",
-      "integrity": "sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==",
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/html-tags/-/html-tags-3.3.1.tgz",
+      "integrity": "sha512-ztqyC3kLto0e9WbNp0aeP+M3kTt+nbaIveGmUxAtZa+8iFgKLUOD4YKM5j+f3QD89bra7UeumolZHKuOXnTmeQ==",
       "dev": true
     },
     "http-cache-semantics": {
@@ -10029,23 +10051,24 @@
       }
     },
     "markdownlint": {
-      "version": "0.27.0",
-      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.27.0.tgz",
-      "integrity": "sha512-HtfVr/hzJJmE0C198F99JLaeada+646B5SaG2pVoEakLFI6iRGsvMqrnnrflq8hm1zQgwskEgqSnhDW11JBp0w==",
+      "version": "0.28.1",
+      "resolved": "https://registry.npmjs.org/markdownlint/-/markdownlint-0.28.1.tgz",
+      "integrity": "sha512-8At2DbgGKT/RVBinkqIPqLETopPXyQFGWSiTCJSr9Y6wVVyY70cDJ9dw3FXePn4AkytIUclgrsgI6KVeqeHFoA==",
       "dev": true,
       "requires": {
-        "markdown-it": "13.0.1"
+        "markdown-it": "13.0.1",
+        "markdownlint-micromark": "0.1.2"
       }
     },
     "markdownlint-cli2": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.6.0.tgz",
-      "integrity": "sha512-Bv20r6WGdcHMWi8QvAFZ3CBunf4i4aYmVdTfpAvXODI/1k3f09DZZ0i0LcX9ZMhlVxjoOzbVDz1NWyKc5hwTqg==",
+      "version": "0.7.0",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2/-/markdownlint-cli2-0.7.0.tgz",
+      "integrity": "sha512-67r1t9ep+z0fa6g9TgL3tiPQeWo297ip165Et2u54UquJAkXWnq6e+dXFBjSPft/iLaGJfU0fUHXhXueqNUkGQ==",
       "dev": true,
       "requires": {
-        "globby": "13.1.3",
-        "markdownlint": "0.27.0",
-        "markdownlint-cli2-formatter-default": "0.0.3",
+        "globby": "13.1.4",
+        "markdownlint": "0.28.1",
+        "markdownlint-cli2-formatter-default": "0.0.4",
         "micromatch": "4.0.5",
         "strip-json-comments": "5.0.0",
         "yaml": "2.2.1"
@@ -10060,12 +10083,18 @@
       }
     },
     "markdownlint-cli2-formatter-default": {
-      "version": "0.0.3",
-      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.3.tgz",
-      "integrity": "sha512-QEAJitT5eqX1SNboOD+SO/LNBpu4P4je8JlR02ug2cLQAqmIhh8IJnSK7AcaHBHhNADqdGydnPpQOpsNcEEqCw==",
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/markdownlint-cli2-formatter-default/-/markdownlint-cli2-formatter-default-0.0.4.tgz",
+      "integrity": "sha512-xm2rM0E+sWgjpPn1EesPXx5hIyrN2ddUnUwnbCsD/ONxYtw3PX6LydvdH6dciWAoFDpwzbHM1TO7uHfcMd6IYg==",
       "dev": true,
       "requires": {}
     },
+    "markdownlint-micromark": {
+      "version": "0.1.2",
+      "resolved": "https://registry.npmjs.org/markdownlint-micromark/-/markdownlint-micromark-0.1.2.tgz",
+      "integrity": "sha512-jRxlQg8KpOfM2IbCL9RXM8ZiYWz2rv6DlZAnGv8ASJQpUh6byTBnEsbuMZ6T2/uIgntyf7SKg/mEaEBo1164fQ==",
+      "dev": true
+    },
     "mathml-tag-names": {
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/mathml-tag-names/-/mathml-tag-names-2.1.3.tgz",
@@ -10185,9 +10214,9 @@
       }
     },
     "minipass": {
-      "version": "4.2.4",
-      "resolved": "https://registry.npmjs.org/minipass/-/minipass-4.2.4.tgz",
-      "integrity": "sha512-lwycX3cBMTvcejsHITUgYj6Gy6A7Nh4Q6h9NP4sTHY1ccJlC7yKzDmiShEHsJ16Jf1nKGDEaiHxiltsJEvk0nQ==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/minipass/-/minipass-5.0.0.tgz",
+      "integrity": "sha512-3FnjYuehv9k6ovOEbyOswadCDPX1piCfhV8ncmYtHOjuPwylVWsghTLo7rabjC3Rx5xD4HDx8Wm1xnMF7S5qFQ==",
       "dev": true
     },
     "ms": {
@@ -10443,19 +10472,19 @@
       "dev": true
     },
     "path-scurry": {
-      "version": "1.6.1",
-      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.6.1.tgz",
-      "integrity": "sha512-OW+5s+7cw6253Q4E+8qQ/u1fVvcJQCJo/VFD8pje+dbJCF1n5ZRMV2AEHbGp+5Q7jxQIYJxkHopnj6nzdGeZLA==",
+      "version": "1.6.4",
+      "resolved": "https://registry.npmjs.org/path-scurry/-/path-scurry-1.6.4.tgz",
+      "integrity": "sha512-Qp/9IHkdNiXJ3/Kon++At2nVpnhRiPq/aSvQN+H3U1WZbvNRK0RIQK/o4HMqPoXjpuGJUEWpHSs6Mnjxqh3TQg==",
       "dev": true,
       "requires": {
-        "lru-cache": "^7.14.1",
-        "minipass": "^4.0.2"
+        "lru-cache": "^9.0.0",
+        "minipass": "^5.0.0"
       },
       "dependencies": {
         "lru-cache": {
-          "version": "7.18.1",
-          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-7.18.1.tgz",
-          "integrity": "sha512-8/HcIENyQnfUTCDizRu9rrDyG6XG/21M4X7/YEGZeD76ZJilFPAUVb/2zysFf7VVO1LEjCDFyHp8pMMvozIrvg==",
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-9.0.0.tgz",
+          "integrity": "sha512-9AEKXzvOZc4BMacFnYiTOlDH/197LNnQIK9wZ6iMB5NXPzuv4bWR/Msv7iUMplkiMQ1qQL+KSv/JF1mZAB5Lrg==",
           "dev": true
         }
       }
@@ -11260,12 +11289,12 @@
       "dev": true
     },
     "rimraf": {
-      "version": "4.4.1",
-      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-4.4.1.tgz",
-      "integrity": "sha512-Gk8NlF062+T9CqNGn6h4tls3k6T1+/nXdOcSZVikNVtlRdYpA7wRJJMoXmuvOnLW844rPjdQ7JgXCYM6PPC/og==",
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/rimraf/-/rimraf-5.0.0.tgz",
+      "integrity": "sha512-Jf9llaP+RvaEVS5nPShYFhtXIrb3LRKP281ib3So0KkeZKo2wIKyq0Re7TOSwanasA423PSr6CCIL4bP6T040g==",
       "dev": true,
       "requires": {
-        "glob": "^9.2.0"
+        "glob": "^10.0.0"
       },
       "dependencies": {
         "brace-expansion": {
@@ -11278,21 +11307,21 @@
           }
         },
         "glob": {
-          "version": "9.2.1",
-          "resolved": "https://registry.npmjs.org/glob/-/glob-9.2.1.tgz",
-          "integrity": "sha512-Pxxgq3W0HyA3XUvSXcFhRSs+43Jsx0ddxcFrbjxNGkL2Ak5BAUBxLqI5G6ADDeCHLfzzXFhe0b1yYcctGmytMA==",
+          "version": "10.0.0",
+          "resolved": "https://registry.npmjs.org/glob/-/glob-10.0.0.tgz",
+          "integrity": "sha512-zmp9ZDC6NpDNLujV2W2n+3lH+BafIVZ4/ct+Yj3BMZTH/+bgm/eVjHzeFLwxJrrIGgjjS2eiQLlpurHsNlEAtQ==",
           "dev": true,
           "requires": {
             "fs.realpath": "^1.0.0",
-            "minimatch": "^7.4.1",
-            "minipass": "^4.2.4",
-            "path-scurry": "^1.6.1"
+            "minimatch": "^9.0.0",
+            "minipass": "^5.0.0",
+            "path-scurry": "^1.6.4"
           }
         },
         "minimatch": {
-          "version": "7.4.2",
-          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.2.tgz",
-          "integrity": "sha512-xy4q7wou3vUoC9k1xGTXc+awNdGaGVHtFUaey8tiX4H1QRc04DZ/rmDFwNm2EBsuYEhAZ6SgMmYf3InGY6OauA==",
+          "version": "9.0.0",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.0.tgz",
+          "integrity": "sha512-0jJj8AvgKqWN05mrwuqi8QYKx1WmYSUoKSxu5Qhs9prezTz10sxAHGNZe9J9cqIJzta8DWsleh2KaVaLl6Ru2w==",
           "dev": true,
           "requires": {
             "brace-expansion": "^2.0.1"
@@ -11648,14 +11677,14 @@
       }
     },
     "stylelint": {
-      "version": "15.4.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.4.0.tgz",
-      "integrity": "sha512-TlOvpG3MbcFwHmK0q2ykhmpKo7Dq892beJit0NPdpyY9b1tFah/hGhqnAz/bRm2PDhDbJLKvjzkEYYBEz7Dxcg==",
+      "version": "15.5.0",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-15.5.0.tgz",
+      "integrity": "sha512-jyMO3R1QtE5mUS4v40+Gg+sIQBqe7CF1xPslxycDzNVkIBCUD4O+5F1vLPq16VmunUTv4qG9o2rUKLnU5KkVeQ==",
       "dev": true,
       "requires": {
         "@csstools/css-parser-algorithms": "^2.1.0",
         "@csstools/css-tokenizer": "^2.1.0",
-        "@csstools/media-query-list-parser": "^2.0.1",
+        "@csstools/media-query-list-parser": "^2.0.2",
         "@csstools/selector-specificity": "^2.2.0",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
@@ -11669,7 +11698,7 @@
         "global-modules": "^2.0.0",
         "globby": "^11.1.0",
         "globjoin": "^0.1.4",
-        "html-tags": "^3.2.0",
+        "html-tags": "^3.3.1",
         "ignore": "^5.2.4",
         "import-lazy": "^4.0.0",
         "imurmurhash": "^0.1.4",
@@ -11732,53 +11761,53 @@
       }
     },
     "stylelint-config-recommended": {
-      "version": "10.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-10.0.1.tgz",
-      "integrity": "sha512-TQ4xQ48tW4QSlODcti7pgSRqBZcUaBzuh0jPpfiMhwJKBPkqzTIAU+IrSWL/7BgXlOM90DjB7YaNgFpx8QWhuA==",
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended/-/stylelint-config-recommended-11.0.0.tgz",
+      "integrity": "sha512-SoGIHNI748OCZn6BxFYT83ytWoYETCINVHV3LKScVAWQQauWdvmdDqJC5YXWjpBbxg2E761Tg5aUGKLFOVhEkA==",
       "dev": true,
       "requires": {}
     },
     "stylelint-config-recommended-scss": {
-      "version": "9.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-9.0.1.tgz",
-      "integrity": "sha512-qAmz/TdrqslwiMTuLM3QXeISUkfEDUXGMfRBCHm/xrkCJNnQefv+mzG2mWTsWkqcVk8HAyUkug10dwAcYp2fCQ==",
+      "version": "10.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-recommended-scss/-/stylelint-config-recommended-scss-10.0.0.tgz",
+      "integrity": "sha512-+YvPgUHi0W5mCJCKdupBCIsWPYNbWuJcRmFtSYujwNg+41ljFknhO9bpY6C+oahv659zW7W1AT7i6DQvJYYr1A==",
       "dev": true,
       "requires": {
-        "postcss-scss": "^4.0.2",
-        "stylelint-config-recommended": "^10.0.1",
-        "stylelint-scss": "^4.4.0"
+        "postcss-scss": "^4.0.6",
+        "stylelint-config-recommended": "^11.0.0",
+        "stylelint-scss": "^4.6.0"
       }
     },
     "stylelint-config-standard": {
-      "version": "30.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-30.0.1.tgz",
-      "integrity": "sha512-NbeHOmpRQhjZh5XB1B/S4MLRWvz4xxAxeDBjzl0tY2xEcayNhLbaRGF0ZQzq+DQZLCcPpOHeS2Ru1ydbkhkmLg==",
+      "version": "32.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard/-/stylelint-config-standard-32.0.0.tgz",
+      "integrity": "sha512-UnGJxYDyYFrIE9CjDMZRkrNh2o4lOtO+MVZ9qG5b8yARfsWho0GMx4YvhHfsv8zKKgHeWX2wfeyxmuoqcaYZ4w==",
       "dev": true,
       "requires": {
-        "stylelint-config-recommended": "^10.0.1"
+        "stylelint-config-recommended": "^11.0.0"
       }
     },
     "stylelint-config-standard-scss": {
-      "version": "7.0.1",
-      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-7.0.1.tgz",
-      "integrity": "sha512-m5sRdtsB1F5fnC1Ozla7ryftU47wVpO+HWd+JQTqeoG0g/oPh5EfbWfcVHbNCEtuoHfALIySiUWS20pz2hX6jA==",
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/stylelint-config-standard-scss/-/stylelint-config-standard-scss-8.0.0.tgz",
+      "integrity": "sha512-TDT/gJD/0LUDoUgkjF1uoI/4DfczXHxg7gJVcWT4/JbE6k5hszVuI14reNX+tEwSyMNhcK2BA7izrK+uVAz7XA==",
       "dev": true,
       "requires": {
-        "stylelint-config-recommended-scss": "^9.0.0",
-        "stylelint-config-standard": "^30.0.1"
+        "stylelint-config-recommended-scss": "^10.0.0",
+        "stylelint-config-standard": "^32.0.0"
       }
     },
     "stylelint-scss": {
-      "version": "4.4.0",
-      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.4.0.tgz",
-      "integrity": "sha512-Qy66a+/30aylFhPmUArHhVsHOun1qrO93LGT15uzLuLjWS7hKDfpFm34mYo1ndR4MCo8W4bEZM1+AlJRJORaaw==",
+      "version": "4.6.0",
+      "resolved": "https://registry.npmjs.org/stylelint-scss/-/stylelint-scss-4.6.0.tgz",
+      "integrity": "sha512-M+E0BQim6G4XEkaceEhfVjP/41C9Klg5/tTPTCQVlgw/jm2tvB+OXJGaU0TDP5rnTCB62aX6w+rT+gqJW/uwjA==",
       "dev": true,
       "requires": {
-        "lodash": "^4.17.21",
+        "dlv": "^1.1.3",
         "postcss-media-query-parser": "^0.2.3",
         "postcss-resolve-nested-selector": "^0.1.1",
-        "postcss-selector-parser": "^6.0.6",
-        "postcss-value-parser": "^4.1.0"
+        "postcss-selector-parser": "^6.0.11",
+        "postcss-value-parser": "^4.2.0"
       }
     },
     "supports-color": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gethinode/hinode",
-  "version": "0.11.2",
+  "version": "0.12.0-alpha",
   "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
   "keywords": [
     "hugo",
@@ -64,13 +64,13 @@
     "eslint-plugin-promise": "^6.1.1",
     "flexsearch": "^0.7.31",
     "hugo-bin": "^0.102.0",
-    "markdownlint-cli2": "^0.6.0",
+    "markdownlint-cli2": "^0.7.0",
     "postcss-cli": "^10.1.0",
     "purgecss-whitelister": "^2.4.0",
-    "rimraf": "^4.4.1",
+    "rimraf": "^5.0.0",
     "shx": "^0.3.4",
     "stylelint": "^15.4.0",
-    "stylelint-config-standard-scss": "^7.0.1"
+    "stylelint-config-standard-scss": "^8.0.0"
   },
   "hugo-bin": {
     "buildTags": "extended"