Merge pull request #1607 from gethinode/develop

feat: enable transparent navbar

assets/js/critical/color.js

@@ -38,10 +38,11 @@
     setLocalStorage('theme', theme, 'functional')
 
     if (theme === 'auto') {
-      document.documentElement.setAttribute('data-bs-theme', (getPreferredTheme()))
+      theme = getPreferredTheme()
-    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
     }
+    document.documentElement.setAttribute('data-bs-theme', theme)
+    // store main theme separately, to avoid the navbar mode icon uses a local variable
+    document.documentElement.setAttribute('data-bs-main-theme', theme)
 
     updateSelectors()
   }

assets/js/navbar.js

@@ -4,24 +4,161 @@ const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 const colorsBG = ['body', 'secondary', 'tertiary']
 
-function updateNavbar () {
+function sleep(ms) {
-  let storedTheme
+  return new Promise(resolve => setTimeout(resolve, ms))
-  if (typeof getLocalStorage === "function") {
+}
-    storedTheme = getLocalStorage('theme', null, 'functional')
+
+function getStyle(el, styleProp) {
+    let y
+    
+    if (window.getComputedStyle) {
+      y = document.defaultView.getComputedStyle(el).getPropertyValue(styleProp)
+    } else if (el.currentStyle) {
+      y = el.currentStyle[styleProp]
+    }
+
+    return y
+}
+
+function updateNavbarColor () {
+  const scrollTop = window.pageYOffset
+  const scrollBottom = scrollTop + navbar.offsetHeight
+
+  // find which section is currently under the navbar
+  let currentSection = null
+  const sections = document.querySelectorAll('article,section,footer')
+  let currentIndex = -1
+
+  sections.forEach(section => {
+    const rect = section.getBoundingClientRect()
+    const sectionTop = scrollTop + rect.top
+    const sectionBottom = sectionTop + section.offsetHeight - 1
+
+    // check if navbar overlaps with this section
+    if (scrollTop <= sectionBottom && scrollBottom >= sectionTop) {
+      let index = getStyle(section, 'z-index')
+      if (index === 'auto') {
+        index = 1
+      }
+      if (index > currentIndex) {
+        currentSection = section
+        currentIndex = index
+      }
+    }
+  })
+
+  // use main part as backup (defined in baseof.html template)
+  if (!currentSection) {
+    currentSection = document.querySelector('main')
   }
 
-  if (window.scrollY > 75) {
+  if (currentSection) {
-    navbar.classList.add('nav-active')
+    adaptToSection(currentSection)
-    if (storedTheme) {
+  }
-      navbar.setAttribute('data-bs-theme', storedTheme)
+}
+
+function getBackgroundColor (section) {
+  // get computed background color of the section
+  let color = window.getComputedStyle(section).backgroundColor
+
+  // use body background when section background is undefined or transparent
+  if (color === 'rgba(0, 0, 0, 0)' || color === 'transparent') {
+    color = window.getComputedStyle(document.body).getPropertyValue('background-color')
+  }
+
+  return color
+}
+
+function adaptToSection (section) {
+  // retrieve the section background color, using body color as fallback
+  const color = getBackgroundColor(section)
+
+  // determine if the background is light or dark
+  const isLightBackground = isLightColor(section, color)
+
+  // set appropriate mode class
+  const nav = document.querySelector('.navbar')
+  if (isLightBackground) {
+    if (navbar.dataset.bsTheme !== 'light') {
+      navbar.dataset.bsTheme = 'light'
     }
   } else {
-    navbar.classList.remove('nav-active')
+    if (navbar.dataset.bsTheme !== 'dark') {
-    const defaultTheme = navbar.getAttribute('data-bs-overlay')
+      navbar.dataset.bsTheme = 'dark'
+    }
+  }
 
-    const targetTheme = defaultTheme ? defaultTheme : storedTheme
+  // update semi-transparent background color of navbar
-    if (targetTheme) {
+  const rgb = parseRGB(color)
-      navbar.setAttribute('data-bs-theme', defaultTheme)
+  if (rgb) {
+    navbar.style.backgroundColor = `rgba(${rgb.r},${rgb.g},${rgb.b},.4)`
+  }
+}
+
+function isLightColor (section, color) {
+  if (section.dataset.bsTheme === 'light') {
+    return true
+  }
+
+  if (section.dataset.bsTheme === 'dark') {
+    return false
+  }
+
+  // parse RGB color of the section backgroiund
+  const rgb = parseRGB(color)
+  if (!rgb) return true // Default to light if can't parse
+
+  // calculate relative luminance
+  const luminance = calculateLuminance(rgb.r, rgb.g, rgb.b)
+
+  // return true if light (luminance > 0.5)
+  return luminance > 0.5
+}
+
+function parseRGB (color) {
+  const match = color.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)/)
+  if (match) {
+    return {
+      r: parseInt(match[1]),
+      g: parseInt(match[2]),
+      b: parseInt(match[3])
+    }
+  }
+  return null
+}
+
+function calculateLuminance (r, g, b) {
+  // convert RGB to relative luminance using sRGB formula
+  const [rs, gs, bs] = [r, g, b].map(c => {
+    c = c / 255
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4)
+  })
+
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs
+}
+
+function updateNavbar () {
+  if (navbar.dataset.transparent) {
+    updateNavbarColor()
+  } else {
+    let storedTheme
+    if (typeof getLocalStorage === "function") {
+      storedTheme = getLocalStorage('theme', null, 'functional')
+    }
+
+    if (window.scrollY > 75) {
+      navbar.classList.add('nav-active')
+      if (storedTheme) {
+        navbar.setAttribute('data-bs-theme', storedTheme)
+      }
+    } else {
+      navbar.classList.remove('nav-active')
+      const defaultTheme = navbar.getAttribute('data-bs-overlay')
+
+      const targetTheme = defaultTheme ? defaultTheme : storedTheme
+      if (targetTheme) {
+        navbar.setAttribute('data-bs-theme', defaultTheme)
+      }
     }
   }
 }
@@ -33,28 +170,35 @@ if ((navbar !== null) && (window.performance.getEntriesByType)) {
 }
 
 if (navbar !== null && togglers !== null) {
+  // initialize and update the navbar on load, on resize, and on scroll
+  document.addEventListener('DOMContentLoaded', () => { fixed && updateNavbar() })
+  document.addEventListener('resize', () => fixed && updateNavbar())
+  document.addEventListener('scroll', () => fixed && updateNavbar())
+
   // observe state changes to the site's color mode
   const html = document.querySelector('html')
   const config = {
     attributes: true,
     attributeFilter: ['data-bs-theme']
   }
-  const Observer = new MutationObserver((mutationrecords) => {
+  const Observer = new MutationObserver(() => {
-    fixed && updateNavbar()
+    if (fixed) {
+      // wait for the theme animation to finish
+      sleep(600).then(() => { 
+        updateNavbar() 
+      })
+    }
   })
   Observer.observe(html, config)
 
   // initialize background color
-  const color = (navbar.getAttribute('data-navbar-color') || 'body')
+  if (!navbar.dataset.transparent) {
-  const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
+    const color = (navbar.getAttribute('data-navbar-color') || 'body')
-  navbar.style.setProperty('--bs-navbar-expanded-color', bg)
+    const bg = colorsBG.includes(color) ? `var(--bs-${color}-bg)` : `var(--bs-navbar-color-${color})`
-
+    navbar.style.setProperty('--bs-navbar-expanded-color', bg)
-  // set the navbar background color to opaque when scrolling past a breakpoint
-  window.onscroll = () => {
-    fixed && updateNavbar()
   }
 
-  // set the navbar background color to opaque when expanded
+  // update the navbar background color when expanded
   for (let i = 0; i < togglers.length; ++i) {
     togglers[i].onclick = () => {
       navbar.classList.toggle('navbar-expanded')

assets/scss/components/_navbar.scss

@@ -95,6 +95,11 @@
     }
 }
 
+.navbar[data-transparent="true"] {
+    backdrop-filter: blur(10px);
+    transition: all 0.3s ease;
+}
+
 .nav-active, .navbar-expanded {
     background-color: var(--bs-navbar-expanded-color);
     border-bottom: 1px solid var(--bs-secondary-bg);
@@ -392,3 +397,41 @@
 .form-control.is-search {
     border: 1px solid var(--bs-border-color) !important;
 }
+
+.d-none-main-light, .d-none-inline-main-light {
+  display: none !important;
+}
+
+.d-none-main-dark {
+  display: block !important;
+}
+
+.d-none-inline-main-dark {
+  display: inline !important;
+}
+
+[data-bs-main-theme="dark"] .d-none-main-light {
+  display: block !important;
+}
+
+[data-bs-main-theme="dark"] .d-none-inline-main-light {
+  display: inline !important;
+}
+
+[data-bs-main-theme="dark"] .d-none-main-dark, [data-bs-main-theme="dark"] .d-none-inline-main-dark {
+  display: none !important;
+}
+
+.inline-menu li {
+  display: inline-block;
+  padding: 0.5rem;
+  color: var(--bs-nav-link-color);
+}
+
+.inline-menu li .active, .inline-menu li>a:hover {
+    box-shadow: inset 0 -1px 0 var(--bs-navbar-hover-color);
+}
+
+ul.inline-menu {
+  padding: 0;
+}

config/_default/params.toml

@@ -96,7 +96,7 @@
     overlay = false
     overlayMode = "dark"
     horizontal = false
-    offset = "5.5rem"
+    offset = "5.7rem"
     breadcrumb = true
     toc = true
     sidebar = true

data/structures/navbar.yml

@@ -23,7 +23,6 @@ arguments:
     comment: Name of the menu configuration.
   breakpoint:
     release: v1.0.0
-
   style:
     type: select
     optional: true
@@ -98,6 +97,17 @@ arguments:
       navbar searches for images having a matching color-mode suffix
       such as `-light` or `-dark`.
     release: v1.15.0
+  transparent:
+    type: bool
+    default: false
+    optional: true
+    comment: >-
+      Flag indicating the navbar should be transparent. When set, the navbar
+      uses the current section's background color and applies a semi-
+      transparent blur filter. The site's body color is used as fallback. If
+      set, the color mode of the current section is used too. When no mode is
+      set, the navbar applies a mode with the best contrast.
+    release: v1.19.0
   # deprecated arguments
   size:
     type: select

exampleSite/config/_default/params.toml

@@ -48,9 +48,10 @@
     fixed = true
     overlay = false
     overlayMode = "dark"
+    transparent = false
     horizontal = false
-    offset = "5.5rem"
+    offset = "5.7rem"
-    offsetXS = "5.5rem"
+    offsetXS = "5.7rem"
     breadcrumb = true
     toc = true
     sidebar = true
@@ -61,6 +62,7 @@
     maxNumHeadings = 9
     [navigation.language]
         icon = "fas globe"
+        inline = false
     [navigation.padding]
         x = 4
         y = 4

exampleSite/hugo_stats.json

@@ -29,6 +29,7 @@
       "label",
       "li",
       "link",
+      "main",
       "mark",
       "math",
       "meta",
@@ -212,6 +213,8 @@
       "d-none",
       "d-none-dark",
       "d-none-light",
+      "d-none-main-dark",
+      "d-none-main-light",
       "d-sm-block",
       "d-sm-none",
       "data-table",
@@ -221,7 +224,6 @@
       "disabled",
       "display-1",
       "display-4",
-      "display-4pt-1",
       "display-6",
       "docs",
       "docs-controls",
@@ -246,9 +248,6 @@
       "fa-activity",
       "fa-address-card",
       "fa-angle-left",
-      "fa-angle-right",
-      "fa-angles-left",
-      "fa-angles-right",
       "fa-arrow-left",
       "fa-arrow-right",
       "fa-bootstrap",
@@ -357,6 +356,7 @@
       "justify-content-between",
       "justify-content-center",
       "justify-content-end",
+      "justify-content-md-end",
       "justify-content-md-start",
       "justify-content-start",
       "katex",
@@ -549,6 +549,8 @@
       "text-decoration-none",
       "text-end",
       "text-info",
+      "text-md-center",
+      "text-md-end",
       "text-muted",
       "text-nowrap",
       "text-primary",
@@ -677,16 +679,16 @@
       "docs",
       "documentation",
       "dropdown-nav-0",
-      "dropdown-panel-061524bba81f197181a032e904983272",
+      "dropdown-panel-2b8de01298f17bfa4ef2f41a8b2c6435",
-      "dropdown-panel-0c0ddda05d377af1c0cee87f7c85da67",
+      "dropdown-panel-2e5b2c8f1152552a22527c49478174ee",
-      "dropdown-panel-3c6a067cd80a10d3707200fc8fb84bb3",
+      "dropdown-panel-3a79089ba962a873cbebd26623a0ad40",
-      "dropdown-panel-4b12c0f69625cb352e0aa7d846f960d8",
+      "dropdown-panel-3dd6f56b00612d3de3b125c1c360f592",
-      "dropdown-panel-6906624fe967e8dffbf4c3446a9e2385",
+      "dropdown-panel-a0bd455780b20f1f2bfda0050bfd2392",
-      "dropdown-panel-7351d1dc85bcedcd74309f25472b7548",
+      "dropdown-panel-abfe30d02c0a523c8ec3648215b114b7",
-      "dropdown-panel-7784dd257dba6ab662963774a7bea03d",
+      "dropdown-panel-bbe2b50a448d584df2e182f25830b5af",
-      "dropdown-panel-c62f4eeaa4277d5c14c486d5c8623ae1",
+      "dropdown-panel-cc10046cc5429efe0f01f5384daf9c94",
-      "dropdown-panel-cfcc43cbefc204c3c8c7487ef6347c27",
+      "dropdown-panel-f2d8c9c259691049ab9c2907caab7578",
-      "dropdown-panel-d29649da522407a082335b726b32951c",
+      "dropdown-panel-fc14dc77778d6aa0862cf6dc8cbfbd1d",
       "eerste-artikel",
       "elements-type",
       "entity-relationship-diagram",
@@ -707,24 +709,21 @@
       "fab-whatsapp",
       "fab-x-twitter",
       "faq",
-      "faq-b52462b6a4b2180e01ad67bc52618161",
+      "faq-95cc6eedb4627fb738a7de6f99d7ad1b",
-      "faq-b52462b6a4b2180e01ad67bc52618161-heading-faq-b52462b6a4b2180e01ad67bc52618161",
+      "faq-95cc6eedb4627fb738a7de6f99d7ad1b-heading-faq-95cc6eedb4627fb738a7de6f99d7ad1b",
-      "faq-b52462b6a4b2180e01ad67bc52618161-item-0",
+      "faq-95cc6eedb4627fb738a7de6f99d7ad1b-item-0",
-      "faq-b52462b6a4b2180e01ad67bc52618161-item-1",
+      "faq-95cc6eedb4627fb738a7de6f99d7ad1b-item-1",
-      "faq-b52462b6a4b2180e01ad67bc52618161-item-2",
+      "faq-95cc6eedb4627fb738a7de6f99d7ad1b-item-2",
-      "faq-f38df4740b059c9b2b0e1b696e843ede",
+      "faq-c581a6286bf17cf9854fa7889afec9e6",
-      "faq-f38df4740b059c9b2b0e1b696e843ede-heading-faq-f38df4740b059c9b2b0e1b696e843ede",
+      "faq-c581a6286bf17cf9854fa7889afec9e6-heading-faq-c581a6286bf17cf9854fa7889afec9e6",
-      "faq-f38df4740b059c9b2b0e1b696e843ede-item-0",
+      "faq-c581a6286bf17cf9854fa7889afec9e6-item-0",
-      "faq-f38df4740b059c9b2b0e1b696e843ede-item-1",
+      "faq-c581a6286bf17cf9854fa7889afec9e6-item-1",
-      "faq-f38df4740b059c9b2b0e1b696e843ede-item-2",
+      "faq-c581a6286bf17cf9854fa7889afec9e6-item-2",
       "fas-1",
       "fas-2",
       "fas-3",
       "fas-address-card",
       "fas-angle-left",
-      "fas-angle-right",
-      "fas-angles-left",
-      "fas-angles-right",
       "fas-arrow-left",
       "fas-arrow-right",
       "fas-chevron-right",
@@ -815,16 +814,16 @@
       "nav-0-btn-1",
       "nav-0-btn-2",
       "nav-nav-0",
-      "nav-panel-061524bba81f197181a032e904983272",
+      "nav-panel-2b8de01298f17bfa4ef2f41a8b2c6435",
-      "nav-panel-0c0ddda05d377af1c0cee87f7c85da67",
+      "nav-panel-2e5b2c8f1152552a22527c49478174ee",
-      "nav-panel-3c6a067cd80a10d3707200fc8fb84bb3",
+      "nav-panel-3a79089ba962a873cbebd26623a0ad40",
-      "nav-panel-4b12c0f69625cb352e0aa7d846f960d8",
+      "nav-panel-3dd6f56b00612d3de3b125c1c360f592",
-      "nav-panel-6906624fe967e8dffbf4c3446a9e2385",
+      "nav-panel-a0bd455780b20f1f2bfda0050bfd2392",
-      "nav-panel-7351d1dc85bcedcd74309f25472b7548",
+      "nav-panel-abfe30d02c0a523c8ec3648215b114b7",
-      "nav-panel-7784dd257dba6ab662963774a7bea03d",
+      "nav-panel-bbe2b50a448d584df2e182f25830b5af",
-      "nav-panel-c62f4eeaa4277d5c14c486d5c8623ae1",
+      "nav-panel-cc10046cc5429efe0f01f5384daf9c94",
-      "nav-panel-cfcc43cbefc204c3c8c7487ef6347c27",
+      "nav-panel-f2d8c9c259691049ab9c2907caab7578",
-      "nav-panel-d29649da522407a082335b726b32951c",
+      "nav-panel-fc14dc77778d6aa0862cf6dc8cbfbd1d",
       "navbar",
       "navbar-0-collapse",
       "navbar-mode",
@@ -834,66 +833,66 @@
       "notification",
       "over-mij",
       "overview",
-      "panel-061524bba81f197181a032e904983272-0",
+      "panel-2b8de01298f17bfa4ef2f41a8b2c6435-0",
-      "panel-061524bba81f197181a032e904983272-1",
+      "panel-2b8de01298f17bfa4ef2f41a8b2c6435-1",
-      "panel-061524bba81f197181a032e904983272-2",
+      "panel-2b8de01298f17bfa4ef2f41a8b2c6435-2",
-      "panel-061524bba81f197181a032e904983272-btn-0",
+      "panel-2b8de01298f17bfa4ef2f41a8b2c6435-btn-0",
-      "panel-061524bba81f197181a032e904983272-btn-1",
+      "panel-2b8de01298f17bfa4ef2f41a8b2c6435-btn-1",
-      "panel-061524bba81f197181a032e904983272-btn-2",
+      "panel-2b8de01298f17bfa4ef2f41a8b2c6435-btn-2",
-      "panel-0c0ddda05d377af1c0cee87f7c85da67-0",
+      "panel-2e5b2c8f1152552a22527c49478174ee-0",
-      "panel-0c0ddda05d377af1c0cee87f7c85da67-1",
+      "panel-2e5b2c8f1152552a22527c49478174ee-1",
-      "panel-0c0ddda05d377af1c0cee87f7c85da67-2",
+      "panel-2e5b2c8f1152552a22527c49478174ee-2",
-      "panel-0c0ddda05d377af1c0cee87f7c85da67-btn-0",
+      "panel-2e5b2c8f1152552a22527c49478174ee-btn-0",
-      "panel-0c0ddda05d377af1c0cee87f7c85da67-btn-1",
+      "panel-2e5b2c8f1152552a22527c49478174ee-btn-1",
-      "panel-0c0ddda05d377af1c0cee87f7c85da67-btn-2",
+      "panel-2e5b2c8f1152552a22527c49478174ee-btn-2",
-      "panel-3c6a067cd80a10d3707200fc8fb84bb3-0",
+      "panel-3a79089ba962a873cbebd26623a0ad40-0",
-      "panel-3c6a067cd80a10d3707200fc8fb84bb3-1",
+      "panel-3a79089ba962a873cbebd26623a0ad40-1",
-      "panel-3c6a067cd80a10d3707200fc8fb84bb3-2",
+      "panel-3a79089ba962a873cbebd26623a0ad40-2",
-      "panel-3c6a067cd80a10d3707200fc8fb84bb3-btn-0",
+      "panel-3a79089ba962a873cbebd26623a0ad40-btn-0",
-      "panel-3c6a067cd80a10d3707200fc8fb84bb3-btn-1",
+      "panel-3a79089ba962a873cbebd26623a0ad40-btn-1",
-      "panel-3c6a067cd80a10d3707200fc8fb84bb3-btn-2",
+      "panel-3a79089ba962a873cbebd26623a0ad40-btn-2",
-      "panel-4b12c0f69625cb352e0aa7d846f960d8-0",
+      "panel-3dd6f56b00612d3de3b125c1c360f592-0",
-      "panel-4b12c0f69625cb352e0aa7d846f960d8-1",
+      "panel-3dd6f56b00612d3de3b125c1c360f592-1",
-      "panel-4b12c0f69625cb352e0aa7d846f960d8-2",
+      "panel-3dd6f56b00612d3de3b125c1c360f592-2",
-      "panel-4b12c0f69625cb352e0aa7d846f960d8-btn-0",
+      "panel-3dd6f56b00612d3de3b125c1c360f592-btn-0",
-      "panel-4b12c0f69625cb352e0aa7d846f960d8-btn-1",
+      "panel-3dd6f56b00612d3de3b125c1c360f592-btn-1",
-      "panel-4b12c0f69625cb352e0aa7d846f960d8-btn-2",
+      "panel-3dd6f56b00612d3de3b125c1c360f592-btn-2",
-      "panel-6906624fe967e8dffbf4c3446a9e2385-0",
+      "panel-a0bd455780b20f1f2bfda0050bfd2392-0",
-      "panel-6906624fe967e8dffbf4c3446a9e2385-1",
+      "panel-a0bd455780b20f1f2bfda0050bfd2392-1",
-      "panel-6906624fe967e8dffbf4c3446a9e2385-2",
+      "panel-a0bd455780b20f1f2bfda0050bfd2392-2",
-      "panel-6906624fe967e8dffbf4c3446a9e2385-btn-0",
+      "panel-a0bd455780b20f1f2bfda0050bfd2392-btn-0",
-      "panel-6906624fe967e8dffbf4c3446a9e2385-btn-1",
+      "panel-a0bd455780b20f1f2bfda0050bfd2392-btn-1",
-      "panel-6906624fe967e8dffbf4c3446a9e2385-btn-2",
+      "panel-a0bd455780b20f1f2bfda0050bfd2392-btn-2",
-      "panel-7351d1dc85bcedcd74309f25472b7548-0",
+      "panel-abfe30d02c0a523c8ec3648215b114b7-0",
-      "panel-7351d1dc85bcedcd74309f25472b7548-1",
+      "panel-abfe30d02c0a523c8ec3648215b114b7-1",
-      "panel-7351d1dc85bcedcd74309f25472b7548-2",
+      "panel-abfe30d02c0a523c8ec3648215b114b7-2",
-      "panel-7351d1dc85bcedcd74309f25472b7548-btn-0",
+      "panel-abfe30d02c0a523c8ec3648215b114b7-btn-0",
-      "panel-7351d1dc85bcedcd74309f25472b7548-btn-1",
+      "panel-abfe30d02c0a523c8ec3648215b114b7-btn-1",
-      "panel-7351d1dc85bcedcd74309f25472b7548-btn-2",
+      "panel-abfe30d02c0a523c8ec3648215b114b7-btn-2",
-      "panel-7784dd257dba6ab662963774a7bea03d-0",
+      "panel-bbe2b50a448d584df2e182f25830b5af-0",
-      "panel-7784dd257dba6ab662963774a7bea03d-1",
+      "panel-bbe2b50a448d584df2e182f25830b5af-1",
-      "panel-7784dd257dba6ab662963774a7bea03d-2",
+      "panel-bbe2b50a448d584df2e182f25830b5af-2",
-      "panel-7784dd257dba6ab662963774a7bea03d-btn-0",
+      "panel-bbe2b50a448d584df2e182f25830b5af-btn-0",
-      "panel-7784dd257dba6ab662963774a7bea03d-btn-1",
+      "panel-bbe2b50a448d584df2e182f25830b5af-btn-1",
-      "panel-7784dd257dba6ab662963774a7bea03d-btn-2",
+      "panel-bbe2b50a448d584df2e182f25830b5af-btn-2",
-      "panel-c62f4eeaa4277d5c14c486d5c8623ae1-0",
+      "panel-cc10046cc5429efe0f01f5384daf9c94-0",
-      "panel-c62f4eeaa4277d5c14c486d5c8623ae1-1",
+      "panel-cc10046cc5429efe0f01f5384daf9c94-1",
-      "panel-c62f4eeaa4277d5c14c486d5c8623ae1-2",
+      "panel-cc10046cc5429efe0f01f5384daf9c94-2",
-      "panel-c62f4eeaa4277d5c14c486d5c8623ae1-btn-0",
+      "panel-cc10046cc5429efe0f01f5384daf9c94-btn-0",
-      "panel-c62f4eeaa4277d5c14c486d5c8623ae1-btn-1",
+      "panel-cc10046cc5429efe0f01f5384daf9c94-btn-1",
-      "panel-c62f4eeaa4277d5c14c486d5c8623ae1-btn-2",
+      "panel-cc10046cc5429efe0f01f5384daf9c94-btn-2",
-      "panel-cfcc43cbefc204c3c8c7487ef6347c27-0",
+      "panel-f2d8c9c259691049ab9c2907caab7578-0",
-      "panel-cfcc43cbefc204c3c8c7487ef6347c27-1",
+      "panel-f2d8c9c259691049ab9c2907caab7578-1",
-      "panel-cfcc43cbefc204c3c8c7487ef6347c27-2",
+      "panel-f2d8c9c259691049ab9c2907caab7578-2",
-      "panel-cfcc43cbefc204c3c8c7487ef6347c27-btn-0",
+      "panel-f2d8c9c259691049ab9c2907caab7578-btn-0",
-      "panel-cfcc43cbefc204c3c8c7487ef6347c27-btn-1",
+      "panel-f2d8c9c259691049ab9c2907caab7578-btn-1",
-      "panel-cfcc43cbefc204c3c8c7487ef6347c27-btn-2",
+      "panel-f2d8c9c259691049ab9c2907caab7578-btn-2",
-      "panel-d29649da522407a082335b726b32951c-0",
+      "panel-fc14dc77778d6aa0862cf6dc8cbfbd1d-0",
-      "panel-d29649da522407a082335b726b32951c-1",
+      "panel-fc14dc77778d6aa0862cf6dc8cbfbd1d-1",
-      "panel-d29649da522407a082335b726b32951c-2",
+      "panel-fc14dc77778d6aa0862cf6dc8cbfbd1d-2",
-      "panel-d29649da522407a082335b726b32951c-btn-0",
+      "panel-fc14dc77778d6aa0862cf6dc8cbfbd1d-btn-0",
-      "panel-d29649da522407a082335b726b32951c-btn-1",
+      "panel-fc14dc77778d6aa0862cf6dc8cbfbd1d-btn-1",
-      "panel-d29649da522407a082335b726b32951c-btn-2",
+      "panel-fc14dc77778d6aa0862cf6dc8cbfbd1d-btn-2",
       "panels",
       "persona",
       "pie-chart",

hugo_stats.json

@@ -195,10 +195,10 @@
       "text-body",
       "text-center",
       "text-decoration-none",
+      "text-md-%!s(<nil>)",
       "text-muted",
       "text-secondary",
       "text-sm-start",
-      "text-start",
       "toast",
       "toast-body",
       "toast-container",
@@ -206,7 +206,9 @@
       "toggler-icon",
       "top-bar",
       "vr",
-      "w-100"
+      "w-100",
+      "width-100",
+      "width-md-auto"
     ],
     "ids": [
       "container",

layouts/_partials/assets/card.html

@@ -34,7 +34,7 @@
         <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
             {{ if or $title $links }}
                 <p class="card-title fs-lg-5 fs-6">
-                    {{- with $title }}{{ . }}{{ end }}
+                    {{- with $title }}{{ . | page.RenderString }}{{ end }}
                     {{ with $links }}{{ partial "inline/card-icons.html" (dict "links" .) }}{{ end -}}
                 </p>
             {{ end -}}
@@ -48,7 +48,7 @@
         <div>
             {{ if or $title $links }}
                 <p class="card-title fs-lg-5 fs-6">
-                    {{- with $title }}{{ . }}{{ end }}
+                    {{- with $title }}{{ . | page.RenderString }}{{ end }}
                     {{ with $links }}{{ partial "inline/card-icons.html" (dict "links" .) }}{{ end -}}
                 </p>
             {{ end -}}

layouts/_partials/assets/featured-illustration.html

@@ -44,7 +44,7 @@
         {{ partial "assets/icon.html" (dict "icon" $icon "wrapper" $wrapper) -}}
     {{- end -}}
 {{- else if $image -}}
-    {{- if not (hasSuffix $image "svg") }}{{ $class = printf "%s rounded" $class }}{{ end -}}
+    {{- if not (hasSuffix $image "svg") }}{{ $class = strings.TrimSpace (printf "%s rounded" (or $class "")) }}{{ end -}}
     {{- partial "assets/live-image.html" (dict
         "src"      $image
         "anchor"   $args.anchor

layouts/_partials/assets/helpers/navbar-languages.html

@@ -4,34 +4,39 @@
 {{- $pretty := .pretty -}}
 {{- $icon := .icon | default "fas globe" -}}
 {{- $fs := .fs | default 6 -}}
+{{- $inline := site.Params.navigation.language.inline | default false -}}
+{{- $class := cond $inline "inline-menu" "dropdown-menu dropdown-menu-end" }}
 
 {{- $lang := $page.Language.Lang -}}
 <li class="nav-item dropdown me-auto">
-    <a class="nav-link dropdown-toggle d-{{ $breakpoint }}-none" role="button" data-bs-toggle="dropdown" 
+    {{ if not $inline }}
-        aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
+        <a class="nav-link dropdown-toggle d-{{ $breakpoint }}-none" role="button" data-bs-toggle="dropdown" 
-        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $icon) "spacing" true) }}{{ T "languageSwitcherLabel" }}
+            aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
-    </a>
+            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $icon) "spacing" true) }}{{ T "languageSwitcherLabel" }}
-    <a class="nav-link dropdown-toggle d-none d-{{ $breakpoint }}-block" role="button" data-bs-toggle="dropdown" 
+        </a>
-        aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
+        <a class="nav-link dropdown-toggle d-none d-{{ $breakpoint }}-block" role="button" data-bs-toggle="dropdown" 
-        {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $icon) "spacing" false) }}
+            aria-label="{{ T "languageSwitcherLabel" }}" aria-expanded="false">
-    </a>
+            {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $icon) "spacing" false) }}
-    <ul id="language-selector" class="dropdown-menu dropdown-menu-end navbar-fs-{{ $fs }} navbar-{{ $breakpoint }}-fs" data-translated="{{ $page.IsTranslated }}">
+        </a>
+    {{ end }}
+    <ul id="language-selector" class="{{ $class }} navbar-fs-{{ $fs }} navbar-{{ $breakpoint }}-fs" data-translated="{{ $page.IsTranslated }}">
         {{- if $page.IsTranslated -}}
             {{- range $page.AllTranslations -}}
                 <li>
                     {{- $state := cond (eq .Language.Lang $lang) "active" "" }}
                     <a class="dropdown-item {{ $state }}" hreflang="{{ .Language.Lang }}" href="{{ .RelPermalink }}">
-                        {{- .Language.LanguageName -}}
+                        {{- cond $inline (upper .Language.Lang) .Language.LanguageName -}}
                     </a>
                 </li>
             {{- end -}}
         {{- else -}}
             {{- range site.Languages -}}
-                {{ $dest := partial "utilities/URLJoin.html" (dict "base" $baseURL "path" .Lang) }}
+                <li>
-                {{ if and $pretty (not (hasSuffix $dest "/")) }}
+                    {{- $state := cond (eq .Lang $lang) "active" "disabled" }}
-                    {{ $dest = printf "%s/" $dest }}
+                    <a class="dropdown-item {{ $state }}" href="{{ cond (eq $state "active") $page.RelPermalink "#!" }}" hreflang="{{ .Lang }}">
-                {{ end }}
+                    {{- cond $inline (upper .Lang) (default .Lang .LanguageName) -}}
-                <li><a class="dropdown-item" href="{{ $dest }}" hreflang="{{ .Lang }}">{{ default .Lang .LanguageName }}</a></li>
+                    </a>
+                </li>
             {{- end -}}
         {{- end -}}
     </ul>

layouts/_partials/assets/helpers/navbar-mode.html

@@ -9,11 +9,11 @@
     <input type="checkbox" class="checkbox navbar-mode-selector" id="{{ $id }}-checkbox" aria-label="{{ T "colorMode" }}" />
     <label class="label" for="{{ $id }}-checkbox">
         {{ if $toggle }}
-            <div class="mode-item d-none-dark">
+            <div class="mode-item d-none-main-dark">
                 {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $iconLight) "spacing" false) }}
                 <span class="d-{{ $breakpoint }}-none">{{ T "colorMode" }}</span>
             </div>
-            <div class="mode-item d-none-light">
+            <div class="mode-item d-none-main-light">
                 {{- partial "assets/icon.html" (dict "icon" (printf "%s fa-fw" $iconDark) "spacing" false) }}
                 <span class="d-{{ $breakpoint }}-none">{{ T "colorMode" }}</span>
             </div>

layouts/_partials/assets/hero-image.html

@@ -17,7 +17,7 @@
 {{ end }}
 
 {{ if and (not $args.err) (or $args.image $args.icon) }}
-    <div class="hero-image-container {{ with $args.justify }}d-flex justify-content-center justify-content-md-{{ . }}{{ end }}">
+    <div class="hero-image-container {{ if $args.image }}d-flex justify-content-center {{ with $args.justify }} justify-content-md-{{ . }}{{ end }}{{ end }}">
         {{ partial "assets/featured-illustration.html" (dict 
             "page"    $args.page
             "icon"    $args.icon

layouts/_partials/assets/hero.html

@@ -28,9 +28,10 @@
 {{ $align := $args.align }}
 {{ $class := $args.class | default "" }}
 {{ $scale := $args.illustration.width }}
+{{ $justify := $args.illustration.justify }}
 
-{{ if $scale }}
+{{ if and $args.illustration.image $scale }}
-    {{ $class = trim (printf "%s col-%d text-center text-md-%s" $class $scale $align) " " }}
+    {{ $class = trim (printf "%s col-%d text-center text-md-%s" $class $scale (or $justify "center")) " " }}
 {{ else }}
     {{ $scale = 12 }}
 {{ end }}
@@ -67,13 +68,13 @@
         </div>
     {{ end }}
 
-    {{ $imageWrapper := printf "mx-md-0 text-%s %s" $align $class }}
+    {{ $imageWrapper := printf "mx-md-0 text-center text-md-%s %s" (or $justify "center") $class }}
     {{ $imageJustify := "" }}
     {{ if eq $args.orientation "stacked" }}
         {{ $imageWrapper = printf "pt-%d text-center %s" $padding.y $class }}
         {{ if $args.icon }}{{ $imageWrapper = $iconWrapper }}{{ end }}
     {{ else }}
-        {{ $imageJustify = $align }}
+        {{ $imageJustify = $justify }}
     {{ end }}
     {{ with $args.illustration.justify }}{{ $imageJustify = . }}{{ end }}
 
@@ -95,7 +96,7 @@
     {{ end }}
 
     {{ $illustration := "" }}
-    {{ if or $args.illustration.image  $args.illustration.icon }}
+    {{ if or $args.illustration.image $args.illustration.icon }}
         {{ $illustration = partial $args.hook (dict
             "page"          $args.page
             "image"         $args.illustration.image
@@ -106,7 +107,7 @@
             "sizes"         $sizes
             "title"         (T "heroImage")
             "wrapper"       $imageWrapper
-            "class"         (printf "hero-image %s" $args.illustration.class)
+            "class"         (strings.TrimSpace (printf "hero-image %s" (or $args.illustration.class "")))
             "image-overlay" $args.imageOverlay
             "justify"       $imageJustify
         ) }}

layouts/_partials/assets/image.html

@@ -66,7 +66,7 @@
             {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
             {{- $params = merge $params (dict
                     "src"   $image
-                    "class" (printf "%s d-none-%s" $args.class (cond (eq $suffix "dark") "light" "dark"))
+                    "wrapper" (printf "%s d-none-%s" $args.wrapper (cond (eq $suffix "dark") "light" "dark"))
             ) -}}
             {{- partial "assets/helpers/image-definition.html" $params -}}
         {{- end -}}

layouts/_partials/assets/navbar.html

@@ -124,7 +124,8 @@
         data-bs-theme="{{ $overlayMode }}"
         {{ if $args.fixed }}data-bs-overlay="{{ $overlayMode }}"{{ end }}
         {{ if $color }}data-navbar-color="{{ $color }}"{{ end }}
-        {{ end }}        
+        {{ end }}
+        {{ with $args.transparent }}data-transparent="{{ . }}"{{ end }}
         >
         <div class="container-xxl p-0">
             <div class="d-flex navbar-container">

layouts/baseof.html

@@ -46,14 +46,15 @@
             "fixed"       site.Params.navigation.fixed
             "overlay"     site.Params.navigation.overlay
             "overlayMode" site.Params.navigation.overlayMode
+            "transparent" site.Params.navigation.transparent
             "color"       site.Params.navigation.color
             "style"       (default "light" site.Params.navigation.style)
             "breakpoint"  (default "md" site.Params.navigation.size))
         -}}
 
-        <div id="container" class="main">
+        <main id="container" class="main">
             {{ block "main" . }}{{ end -}}
-        </div>
+        </main>
 
         {{- partial "footer/social.html" . -}}
         {{- partial "footer/footer.html" . -}}

package-lock.json

@@ -13,11 +13,11 @@
         "autoprefixer": "^10.4.21",
         "cssnano": "^7.1.1",
         "cssnano-preset-advanced": "^7.0.9",
-        "hugo-bin": "0.147.0",
+        "hugo-bin": "0.148.0",
         "purgecss-whitelister": "^2.4.0"
       },
       "devDependencies": {
-        "@commitlint/cli": "^20.0.0",
+        "@commitlint/cli": "^20.1.0",
         "@commitlint/config-conventional": "^20.0.0",
         "@gethinode/netlify-plugin-dartsass": "^0.3.0",
         "@semantic-release/exec": "^7.1.0",
@@ -36,7 +36,7 @@
         "rimraf": "^6.0.1",
         "semantic-release": "^24.2.9",
         "shx": "^0.4.0",
-        "stylelint": "^16.24.0",
+        "stylelint": "^16.25.0",
         "stylelint-config-standard-scss": "^16.0.0"
       },
       "optionalDependencies": {
@@ -91,15 +91,15 @@
       }
     },
     "node_modules/@commitlint/cli": {
-      "version": "20.0.0",
+      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-20.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@commitlint/cli/-/cli-20.1.0.tgz",
-      "integrity": "sha512-I3D7Yldq8ZhOB3qEaTvXWIgib6tSZhbCpRObfFQ/aYI0J9AH8NMwT07Ak+bpE3n6Yn7EtbqEhQUkJZ/jZ5kCeQ==",
+      "integrity": "sha512-pW5ujjrOovhq5RcYv5xCpb4GkZxkO2+GtOdBW2/qrr0Ll9tl3PX0aBBobGQl3mdZUbOBgwAexEQLeH6uxL0VYg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@commitlint/format": "^20.0.0",
         "@commitlint/lint": "^20.0.0",
-        "@commitlint/load": "^20.0.0",
+        "@commitlint/load": "^20.1.0",
         "@commitlint/read": "^20.0.0",
         "@commitlint/types": "^20.0.0",
         "tinyexec": "^1.0.0",
@@ -250,15 +250,15 @@
       }
     },
     "node_modules/@commitlint/load": {
-      "version": "20.0.0",
+      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-20.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@commitlint/load/-/load-20.1.0.tgz",
-      "integrity": "sha512-WiNKO9fDPlLY90Rruw2HqHKcghrmj5+kMDJ4GcTlX1weL8K07Q6b27C179DxnsrjGCRAKVwFKyzxV4x+xDY28Q==",
+      "integrity": "sha512-qo9ER0XiAimATQR5QhvvzePfeDfApi/AFlC1G+YN+ZAY8/Ua6IRrDrxRvQAr+YXUKAxUsTDSp9KXeXLBPsNRWg==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
         "@commitlint/config-validator": "^20.0.0",
         "@commitlint/execute-rule": "^20.0.0",
-        "@commitlint/resolve-extends": "^20.0.0",
+        "@commitlint/resolve-extends": "^20.1.0",
         "@commitlint/types": "^20.0.0",
         "chalk": "^5.3.0",
         "cosmiconfig": "^9.0.0",
@@ -327,9 +327,9 @@
       }
     },
     "node_modules/@commitlint/resolve-extends": {
-      "version": "20.0.0",
+      "version": "20.1.0",
-      "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-20.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@commitlint/resolve-extends/-/resolve-extends-20.1.0.tgz",
-      "integrity": "sha512-BA4vva1hY8y0/Hl80YDhe9TJZpRFMsUYzVxvwTLPTEBotbGx/gS49JlVvtF1tOCKODQp7pS7CbxCpiceBgp3Dg==",
+      "integrity": "sha512-cxKXQrqHjZT3o+XPdqDCwOWVFQiae++uwd9dUBC7f2MdV58ons3uUvASdW7m55eat5sRiQ6xUHyMWMRm6atZWw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -590,13 +590,14 @@
       }
     },
     "node_modules/@dual-bundle/import-meta-resolve": {
-      "version": "4.1.0",
+      "version": "4.2.1",
-      "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.1.0.tgz",
+      "resolved": "https://registry.npmjs.org/@dual-bundle/import-meta-resolve/-/import-meta-resolve-4.2.1.tgz",
-      "integrity": "sha512-+nxncfwHM5SgAtrVzgpzJOI1ol0PkumhVo469KCf9lUi21IGcY90G98VuHm9VRrUypmAzawAHO9bs6hqeADaVg==",
+      "integrity": "sha512-id+7YRUgoUX6CgV0DtuhirQWodeeA7Lf4i2x71JS/vtA5pRb/hIGWlw+G6MeXvsM+MXrz0VAydTGElX1rAfgPg==",
       "dev": true,
+      "license": "MIT",
       "funding": {
         "type": "github",
-        "url": "https://github.com/sponsors/wooorm"
+        "url": "https://github.com/sponsors/JounQin"
       }
     },
     "node_modules/@emnapi/core": {
@@ -4704,9 +4705,9 @@
       }
     },
     "node_modules/debug": {
-      "version": "4.4.1",
+      "version": "4.4.3",
-      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.3.tgz",
-      "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
+      "integrity": "sha512-RGwwWnwQvkVfavKVt22FGLw+xYSdzARwm0ru6DhTVA3umU5hZc28V3kO4stgYryrTlLpuvgI9GiijltAjNbcqA==",
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -7238,9 +7239,9 @@
       }
     },
     "node_modules/hugo-bin": {
-      "version": "0.147.0",
+      "version": "0.148.0",
-      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.147.0.tgz",
+      "resolved": "https://registry.npmjs.org/hugo-bin/-/hugo-bin-0.148.0.tgz",
-      "integrity": "sha512-8ZO/uEVbYUQzTaPGmB0Www53GeKq6A2oyQs1+0wyV9BR5jWQt7HPpl5U4sCioRTsTF73UQVQMTzIPdg9Iaw4Vw==",
+      "integrity": "sha512-7+Nm86bXld2l4hMKtLLBRfYczkt9EtlsvUqvJNWEBsAd4lUuEmB4QvBH/MhyQqZ0+ROdl9aeuzpNXOlfzp28HA==",
       "funding": [
         {
           "type": "github",
@@ -16177,9 +16178,9 @@
       }
     },
     "node_modules/stylelint": {
-      "version": "16.24.0",
+      "version": "16.25.0",
-      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.24.0.tgz",
+      "resolved": "https://registry.npmjs.org/stylelint/-/stylelint-16.25.0.tgz",
-      "integrity": "sha512-7ksgz3zJaSbTUGr/ujMXvLVKdDhLbGl3R/3arNudH7z88+XZZGNLMTepsY28WlnvEFcuOmUe7fg40Q3lfhOfSQ==",
+      "integrity": "sha512-Li0avYWV4nfv1zPbdnxLYBGq4z8DVZxbRgx4Kn6V+Uftz1rMoF1qiEI3oL4kgWqyYgCgs7gT5maHNZ82Gk03vQ==",
       "dev": true,
       "funding": [
         {
@@ -16197,13 +16198,13 @@
         "@csstools/css-tokenizer": "^3.0.4",
         "@csstools/media-query-list-parser": "^4.0.3",
         "@csstools/selector-specificity": "^5.0.0",
-        "@dual-bundle/import-meta-resolve": "^4.1.0",
+        "@dual-bundle/import-meta-resolve": "^4.2.1",
         "balanced-match": "^2.0.0",
         "colord": "^2.9.3",
         "cosmiconfig": "^9.0.0",
         "css-functions-list": "^3.2.3",
         "css-tree": "^3.1.0",
-        "debug": "^4.4.1",
+        "debug": "^4.4.3",
         "fast-glob": "^3.3.3",
         "fastest-levenshtein": "^1.0.16",
         "file-entry-cache": "^10.1.4",

package.json

@@ -75,11 +75,11 @@
     "autoprefixer": "^10.4.21",
     "cssnano": "^7.1.1",
     "cssnano-preset-advanced": "^7.0.9",
-    "hugo-bin": "0.147.0",
+    "hugo-bin": "0.148.0",
     "purgecss-whitelister": "^2.4.0"
   },
   "devDependencies": {
-    "@commitlint/cli": "^20.0.0",
+    "@commitlint/cli": "^20.1.0",
     "@commitlint/config-conventional": "^20.0.0",
     "@gethinode/netlify-plugin-dartsass": "^0.3.0",
     "@semantic-release/exec": "^7.1.0",
@@ -98,7 +98,7 @@
     "rimraf": "^6.0.1",
     "semantic-release": "^24.2.9",
     "shx": "^0.4.0",
-    "stylelint": "^16.24.0",
+    "stylelint": "^16.25.0",
     "stylelint-config-standard-scss": "^16.0.0"
   },
   "optionalDependencies": {