Merge branch 'main' into develop

Update Hugo module dependencies

assets/js/critical/color.js

@@ -38,10 +38,11 @@
     setLocalStorage('theme', theme, 'functional')
 
     if (theme === 'auto') {
-      document.documentElement.setAttribute('data-bs-theme', (getPreferredTheme()))
-    } else {
-      document.documentElement.setAttribute('data-bs-theme', theme)
+      theme = getPreferredTheme()
     }
+    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,163 @@ const togglers = document.querySelectorAll('.main-nav-toggler')
 const modeSelectors = document.querySelectorAll('.switch-mode-collapsed')
 const colorsBG = ['body', 'secondary', 'tertiary']
 
-function updateNavbar () {
-  let storedTheme
-  if (typeof getLocalStorage === "function") {
-    storedTheme = getLocalStorage('theme', null, 'functional')
+let scrollPosition = 0
+
+function sleep(ms) {
+  return new Promise(resolve => setTimeout(resolve, ms))
+}
+
+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) {
-    navbar.classList.add('nav-active')
-    if (storedTheme) {
-      navbar.setAttribute('data-bs-theme', storedTheme)
+  if (currentSection) {
+    adaptToSection(currentSection)
+  }
+}
+
+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')
-    const defaultTheme = navbar.getAttribute('data-bs-overlay')
+    if (navbar.dataset.bsTheme !== 'dark') {
+      navbar.dataset.bsTheme = 'dark'
+    }
+  }
 
-    const targetTheme = defaultTheme ? defaultTheme : storedTheme
-    if (targetTheme) {
-      navbar.setAttribute('data-bs-theme', defaultTheme)
+  // update semi-transparent background color of navbar
+  const rgb = parseRGB(color)
+  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 +172,49 @@ 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())
+
+  // hook up collapse events
+  document.querySelectorAll('.navbar-collapse').forEach((collapse) => {
+    collapse.addEventListener('show.bs.collapse', function () {
+      scrollPosition = window.pageYOffset
+      document.body.style.top = `-${scrollPosition}px`
+      document.body.classList.add('navbar-open')
+    })
+    collapse.addEventListener('hide.bs.collapse', function () {
+      document.body.classList.remove('navbar-open')
+      document.body.style.top = ''
+      window.scrollTo({ top: scrollPosition, behavior: 'instant' })
+    })
+  })
+
   // 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) => {
-    fixed && updateNavbar()
+  const Observer = new MutationObserver(() => {
+    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')
-  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()
+  if (!navbar.dataset.transparent) {
+    const color = (navbar.getAttribute('data-navbar-color') || 'body')
+    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 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);
@@ -393,6 +398,30 @@
     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;
@@ -406,3 +435,9 @@
 ul.inline-menu {
   padding: 0;
 }
+
+body.navbar-open {
+    overflow: hidden;
+    position: fixed;
+    width: 100%;
+}

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"
-    offsetXS = "5.5rem"
+    offset = "5.7rem"
+    offsetXS = "5.7rem"
     breadcrumb = true
     toc = true
     sidebar = true

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",
@@ -245,6 +248,9 @@
       "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",
@@ -387,7 +393,6 @@
       "mode-item",
       "mode-toggle",
       "ms-1",
-      "ms-3",
       "ms-auto",
       "ms-md-3",
       "mt-1",
@@ -676,11 +681,16 @@
       "docs",
       "documentation",
       "dropdown-nav-0",
-      "dropdown-panel-1bc770c2a4522018a5d28ed335c8c66a",
-      "dropdown-panel-478805c6da766d19cb8529367880b5a0",
-      "dropdown-panel-6057bbdbb0f1e92046ca4cc546207938",
-      "dropdown-panel-7e3455997fcf483934b47b18978b5d36",
-      "dropdown-panel-dfd961725b28810e82ac3e47be3eb004",
+      "dropdown-panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e",
+      "dropdown-panel-256968d78244b40725f5d484ea340a5f",
+      "dropdown-panel-29ba03d101604c5caa618293938833b1",
+      "dropdown-panel-30c508a91fbd512d0bee6f976efc028c",
+      "dropdown-panel-47c670e7ebc8dd6e57f5d70dde479a8b",
+      "dropdown-panel-4c945acd0c9326daa6f433a64262c7a0",
+      "dropdown-panel-552e42166b1b143d516aeccc1fbc7d32",
+      "dropdown-panel-bf5b105df93a1545b2fc424e3ab1c654",
+      "dropdown-panel-e5aba6d799885a8fd4208fade274e3a7",
+      "dropdown-panel-fd6d8a3429e95196931cd8c08072abf3",
       "eerste-artikel",
       "elements-type",
       "entity-relationship-diagram",
@@ -701,16 +711,24 @@
       "fab-whatsapp",
       "fab-x-twitter",
       "faq",
-      "faq-72146768cde859a2886890cd67da8cc3",
-      "faq-72146768cde859a2886890cd67da8cc3-heading-faq-72146768cde859a2886890cd67da8cc3",
-      "faq-72146768cde859a2886890cd67da8cc3-item-0",
-      "faq-72146768cde859a2886890cd67da8cc3-item-1",
-      "faq-72146768cde859a2886890cd67da8cc3-item-2",
+      "faq-726ff0b8b5ec9328cfef51994d523ad1",
+      "faq-726ff0b8b5ec9328cfef51994d523ad1-heading-faq-726ff0b8b5ec9328cfef51994d523ad1",
+      "faq-726ff0b8b5ec9328cfef51994d523ad1-item-0",
+      "faq-726ff0b8b5ec9328cfef51994d523ad1-item-1",
+      "faq-726ff0b8b5ec9328cfef51994d523ad1-item-2",
+      "faq-c610e94909d8dd90e16cbcbc4cc3fe84",
+      "faq-c610e94909d8dd90e16cbcbc4cc3fe84-heading-faq-c610e94909d8dd90e16cbcbc4cc3fe84",
+      "faq-c610e94909d8dd90e16cbcbc4cc3fe84-item-0",
+      "faq-c610e94909d8dd90e16cbcbc4cc3fe84-item-1",
+      "faq-c610e94909d8dd90e16cbcbc4cc3fe84-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",
@@ -801,11 +819,16 @@
       "nav-0-btn-1",
       "nav-0-btn-2",
       "nav-nav-0",
-      "nav-panel-1bc770c2a4522018a5d28ed335c8c66a",
-      "nav-panel-478805c6da766d19cb8529367880b5a0",
-      "nav-panel-6057bbdbb0f1e92046ca4cc546207938",
-      "nav-panel-7e3455997fcf483934b47b18978b5d36",
-      "nav-panel-dfd961725b28810e82ac3e47be3eb004",
+      "nav-panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e",
+      "nav-panel-256968d78244b40725f5d484ea340a5f",
+      "nav-panel-29ba03d101604c5caa618293938833b1",
+      "nav-panel-30c508a91fbd512d0bee6f976efc028c",
+      "nav-panel-47c670e7ebc8dd6e57f5d70dde479a8b",
+      "nav-panel-4c945acd0c9326daa6f433a64262c7a0",
+      "nav-panel-552e42166b1b143d516aeccc1fbc7d32",
+      "nav-panel-bf5b105df93a1545b2fc424e3ab1c654",
+      "nav-panel-e5aba6d799885a8fd4208fade274e3a7",
+      "nav-panel-fd6d8a3429e95196931cd8c08072abf3",
       "navbar",
       "navbar-0-collapse",
       "navbar-mode",
@@ -815,36 +838,66 @@
       "notification",
       "over-mij",
       "overview",
-      "panel-1bc770c2a4522018a5d28ed335c8c66a-0",
-      "panel-1bc770c2a4522018a5d28ed335c8c66a-1",
-      "panel-1bc770c2a4522018a5d28ed335c8c66a-2",
-      "panel-1bc770c2a4522018a5d28ed335c8c66a-btn-0",
-      "panel-1bc770c2a4522018a5d28ed335c8c66a-btn-1",
-      "panel-1bc770c2a4522018a5d28ed335c8c66a-btn-2",
-      "panel-478805c6da766d19cb8529367880b5a0-0",
-      "panel-478805c6da766d19cb8529367880b5a0-1",
-      "panel-478805c6da766d19cb8529367880b5a0-2",
-      "panel-478805c6da766d19cb8529367880b5a0-btn-0",
-      "panel-478805c6da766d19cb8529367880b5a0-btn-1",
-      "panel-478805c6da766d19cb8529367880b5a0-btn-2",
-      "panel-6057bbdbb0f1e92046ca4cc546207938-0",
-      "panel-6057bbdbb0f1e92046ca4cc546207938-1",
-      "panel-6057bbdbb0f1e92046ca4cc546207938-2",
-      "panel-6057bbdbb0f1e92046ca4cc546207938-btn-0",
-      "panel-6057bbdbb0f1e92046ca4cc546207938-btn-1",
-      "panel-6057bbdbb0f1e92046ca4cc546207938-btn-2",
-      "panel-7e3455997fcf483934b47b18978b5d36-0",
-      "panel-7e3455997fcf483934b47b18978b5d36-1",
-      "panel-7e3455997fcf483934b47b18978b5d36-2",
-      "panel-7e3455997fcf483934b47b18978b5d36-btn-0",
-      "panel-7e3455997fcf483934b47b18978b5d36-btn-1",
-      "panel-7e3455997fcf483934b47b18978b5d36-btn-2",
-      "panel-dfd961725b28810e82ac3e47be3eb004-0",
-      "panel-dfd961725b28810e82ac3e47be3eb004-1",
-      "panel-dfd961725b28810e82ac3e47be3eb004-2",
-      "panel-dfd961725b28810e82ac3e47be3eb004-btn-0",
-      "panel-dfd961725b28810e82ac3e47be3eb004-btn-1",
-      "panel-dfd961725b28810e82ac3e47be3eb004-btn-2",
+      "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-0",
+      "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-1",
+      "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-2",
+      "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-btn-0",
+      "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-btn-1",
+      "panel-05f2e5ae7cf8c0ab8a49ba311bdc4d7e-btn-2",
+      "panel-256968d78244b40725f5d484ea340a5f-0",
+      "panel-256968d78244b40725f5d484ea340a5f-1",
+      "panel-256968d78244b40725f5d484ea340a5f-2",
+      "panel-256968d78244b40725f5d484ea340a5f-btn-0",
+      "panel-256968d78244b40725f5d484ea340a5f-btn-1",
+      "panel-256968d78244b40725f5d484ea340a5f-btn-2",
+      "panel-29ba03d101604c5caa618293938833b1-0",
+      "panel-29ba03d101604c5caa618293938833b1-1",
+      "panel-29ba03d101604c5caa618293938833b1-2",
+      "panel-29ba03d101604c5caa618293938833b1-btn-0",
+      "panel-29ba03d101604c5caa618293938833b1-btn-1",
+      "panel-29ba03d101604c5caa618293938833b1-btn-2",
+      "panel-30c508a91fbd512d0bee6f976efc028c-0",
+      "panel-30c508a91fbd512d0bee6f976efc028c-1",
+      "panel-30c508a91fbd512d0bee6f976efc028c-2",
+      "panel-30c508a91fbd512d0bee6f976efc028c-btn-0",
+      "panel-30c508a91fbd512d0bee6f976efc028c-btn-1",
+      "panel-30c508a91fbd512d0bee6f976efc028c-btn-2",
+      "panel-47c670e7ebc8dd6e57f5d70dde479a8b-0",
+      "panel-47c670e7ebc8dd6e57f5d70dde479a8b-1",
+      "panel-47c670e7ebc8dd6e57f5d70dde479a8b-2",
+      "panel-47c670e7ebc8dd6e57f5d70dde479a8b-btn-0",
+      "panel-47c670e7ebc8dd6e57f5d70dde479a8b-btn-1",
+      "panel-47c670e7ebc8dd6e57f5d70dde479a8b-btn-2",
+      "panel-4c945acd0c9326daa6f433a64262c7a0-0",
+      "panel-4c945acd0c9326daa6f433a64262c7a0-1",
+      "panel-4c945acd0c9326daa6f433a64262c7a0-2",
+      "panel-4c945acd0c9326daa6f433a64262c7a0-btn-0",
+      "panel-4c945acd0c9326daa6f433a64262c7a0-btn-1",
+      "panel-4c945acd0c9326daa6f433a64262c7a0-btn-2",
+      "panel-552e42166b1b143d516aeccc1fbc7d32-0",
+      "panel-552e42166b1b143d516aeccc1fbc7d32-1",
+      "panel-552e42166b1b143d516aeccc1fbc7d32-2",
+      "panel-552e42166b1b143d516aeccc1fbc7d32-btn-0",
+      "panel-552e42166b1b143d516aeccc1fbc7d32-btn-1",
+      "panel-552e42166b1b143d516aeccc1fbc7d32-btn-2",
+      "panel-bf5b105df93a1545b2fc424e3ab1c654-0",
+      "panel-bf5b105df93a1545b2fc424e3ab1c654-1",
+      "panel-bf5b105df93a1545b2fc424e3ab1c654-2",
+      "panel-bf5b105df93a1545b2fc424e3ab1c654-btn-0",
+      "panel-bf5b105df93a1545b2fc424e3ab1c654-btn-1",
+      "panel-bf5b105df93a1545b2fc424e3ab1c654-btn-2",
+      "panel-e5aba6d799885a8fd4208fade274e3a7-0",
+      "panel-e5aba6d799885a8fd4208fade274e3a7-1",
+      "panel-e5aba6d799885a8fd4208fade274e3a7-2",
+      "panel-e5aba6d799885a8fd4208fade274e3a7-btn-0",
+      "panel-e5aba6d799885a8fd4208fade274e3a7-btn-1",
+      "panel-e5aba6d799885a8fd4208fade274e3a7-btn-2",
+      "panel-fd6d8a3429e95196931cd8c08072abf3-0",
+      "panel-fd6d8a3429e95196931cd8c08072abf3-1",
+      "panel-fd6d8a3429e95196931cd8c08072abf3-2",
+      "panel-fd6d8a3429e95196931cd8c08072abf3-btn-0",
+      "panel-fd6d8a3429e95196931cd8c08072abf3-btn-1",
+      "panel-fd6d8a3429e95196931cd8c08072abf3-btn-2",
       "panels",
       "persona",
       "pie-chart",

go.mod

@@ -7,7 +7,7 @@ require (
 	github.com/cloudcannon/bookshop/hugo/v3 v3.16.5 // indirect
 	github.com/gethinode/mod-bootstrap v1.3.4 // indirect
 	github.com/gethinode/mod-csp v1.0.8 // indirect
-	github.com/gethinode/mod-flexsearch/v3 v3.0.0 // indirect
+	github.com/gethinode/mod-flexsearch/v3 v3.0.1 // indirect
 	github.com/gethinode/mod-fontawesome/v2 v2.1.2 // indirect
 	github.com/gethinode/mod-google-analytics v1.3.3 // indirect
 	github.com/gethinode/mod-katex v1.1.4 // indirect

go.sum

@@ -8,6 +8,8 @@ github.com/gethinode/mod-csp v1.0.8 h1:36bWS7oW5KoPp0ywJXKmfMdM33c/7EPBLjzut0njT
 github.com/gethinode/mod-csp v1.0.8/go.mod h1:Nb22QMicoUHgZQUKP5TCgVrSI8K3KU7jLuLBShmotjg=
 github.com/gethinode/mod-flexsearch/v3 v3.0.0 h1:xFeo5ovZMIcUttvpOamPAMML5+5Au/hewZz/18C2H6Q=
 github.com/gethinode/mod-flexsearch/v3 v3.0.0/go.mod h1:iYvaBF6Y62pjnCepYAqLxoX1ZdEBoD+9caj4cBC+MxY=
+github.com/gethinode/mod-flexsearch/v3 v3.0.1 h1:dHaSImDDp1xtzpW0vc4zychCGOxOCQb764l/XRp0hZc=
+github.com/gethinode/mod-flexsearch/v3 v3.0.1/go.mod h1:iYvaBF6Y62pjnCepYAqLxoX1ZdEBoD+9caj4cBC+MxY=
 github.com/gethinode/mod-fontawesome/v2 v2.1.2 h1:v1aHhbLLwe/05zRHnx9qGqh6b3toDzcLzuv61rWAoGU=
 github.com/gethinode/mod-fontawesome/v2 v2.1.2/go.mod h1:zukv88wXqquEvTJJ9mWWk8Ia+9INnA41wYqusf2RcHA=
 github.com/gethinode/mod-google-analytics v1.3.3 h1:iX2FtXajykfHWJf7MXCQmpezqXgQUADNTeglU81QKpw=

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/nav.html

@@ -56,8 +56,8 @@
 {{- if reflect.IsSlice $args.navTitles }}{{ $titles = $titles | append $args.navTitles }}{{ end -}}
 
 {{/* Main code */}}
-<div class="col col-{{ $breakpoint.current }}-{{ $args.width }} mx-auto">
-    {{ if $args.vertical }}<div class="d-flex align-items-start">{{ end }}
+<div class="col col-12 col-{{ $breakpoint.current }}-{{ $args.width }} mx-auto">
+    {{ if $args.vertical }}<div class="d-{{ if $args.responsive }}{{ $breakpoint.current }}{{ end }}-flex align-items-start">{{ end }}
     {{ if $args.responsive }}
         {{ partial "inline/nav-dropdown.html" (dict
             "id"     $id
@@ -100,7 +100,7 @@
         {{ end -}}
     </ul>
     </div>
-    <div class="tab-content {{ if in (slice "tabs" "callout") $type }}border p-3 bg-body {{ else if $args.vertical }}ms-3{{ else }}mt-3{{ end }}">
+    <div class="tab-content {{ if in (slice "tabs" "callout") $type }}border p-3 bg-body {{ else if $args.vertical }}ms-{{ $breakpoint.current }}-3{{ else }}mt-3{{ end }}">
         {{- $args.navItems | safeHTML -}}
     </div>
     {{- if $args.vertical }}</div>{{ 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">
@@ -134,7 +135,7 @@
                     <div class="d-flex align-items-center">
                         {{- if $sidebar -}}
                             <button class="navbar-toggler collapsed p-0 mx-auto fw-30" type="button" data-bs-toggle="offcanvas"
-                                data-bs-target="#offcanvass-sidebar" aria-controls="offcanvass-sidebar" aria-label="{{ T "toggleSidebar" }}">
+                                data-bs-target="#offcanvas-sidebar" aria-controls="offcanvas-sidebar" aria-label="{{ T "toggleSidebar" }}">
                                 {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
                             </button>
                         {{- else if eq $align "center" -}}

layouts/_partials/head/seo.html

@@ -58,7 +58,7 @@
     {{ if .IsHome -}}
         <title>{{ .Site.Title }} {{ if .Site.Params.head.tagline }} {{ .Site.Params.main.separator }} {{ .Site.Params.head.tagline }}{{ end }}</title>
     {{ else -}}
-        <title>{{ .Site.Title }} {{ .Site.Params.main.separator }} {{ .Title }}</title>
+        <title>{{ .Title }} {{ .Site.Params.main.separator }} {{ .Site.Title }} </title>
     {{ end -}}
 
     <meta name="description" content="{{ $.Scratch.Get "description" }}">

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" . -}}

layouts/single.html

@@ -5,7 +5,7 @@
     {{- $toc := partial "page/panel-toc" . -}}
 
     {{ with $sidebar }}
-        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvass-sidebar" aria-labelledby="offcanvas-label">
+        <div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvas-sidebar" aria-labelledby="offcanvas-label">
             <div class="offcanvas-header">
                 <h5 class="offcanvas-title" id="offcanvas-label">{{ strings.FirstUpper $.Section }}</h5>
                 <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="{{ T "close" }}"></button>