Merge pull request #900 from gethinode/develop

Support explicit overlay mode "none" setting
Merge branch 'main' into develop
2025-10-07 18:14:28 +00:00 · 2024-04-28 14:27:48 +02:00 · 2024-04-28 14:12:27 +02:00 · 2024-04-28 14:11:52 +02:00 · 2024-04-28 13:33:37 +02:00 · 2024-04-28 13:27:01 +02:00
32 changed files with 715 additions and 499 deletions
--- a/.github/workflows/auto-merge.yml
+++ b/.github/workflows/auto-merge.yml
@@ -13,7 +13,7 @@ jobs:
    steps:
      - name: Dependabot metadata
        id: metadata
-        uses: dependabot/fetch-metadata@v1
+        uses: dependabot/fetch-metadata@v2
        with:
          github-token: "${{ secrets.GITHUB_TOKEN }}"

--- a/.github/workflows/lint-build.yml
+++ b/.github/workflows/lint-build.yml
@@ -51,6 +51,11 @@ jobs:
    - name: Check out repository
      uses: actions/checkout@v4

+    - name: Install Go
+      uses: actions/setup-go@v5
+      with:
+        go-version: ">1.0.0"
+      
    - name: Set up Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4
      with:
@@ -89,6 +94,9 @@ jobs:
        restore-keys: |
          ${{ runner.os }}-${{ env.CACHE_KEY }}

+    - name: Display environment
+      run: npm run env
+
    - name: Build main site
      run: npm run build:cache

--- a/assets/js/analytics.js
+++ b/assets/js/analytics.js
@@ -1,69 +1,21 @@
 // Adapted from https://github.com/gohugoio/hugo/blob/master/tpl/tplimpl/embedded/templates/google_analytics.html

-{{- define "__ga_js_set_doNotTrack" -}}{{/* This is also used in the async version. */}}
-    {{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
-    {{- if not $pc.RespectDoNotTrack -}}
+{{ if and (not hugo.IsServer) (not site.Config.Privacy.GoogleAnalytics.Disable) }}
+  {{ with site.Config.Services.GoogleAnalytics.ID }}
+    {{ if strings.HasPrefix (lower .) "ua-" }}
+      {{ warnf "Google Analytics 4 (GA4) replaced Google Universal Analytics (UA) effective 1 July 2023. See https://support.google.com/analytics/answer/11583528. Create a GA4 property and data stream, then replace the Google Analytics ID in your site configuration with the new value." }}
+    {{ else }}
        var doNotTrack = false;
-    {{- else -}}
-        var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
-        var doNotTrack = (dnt == "1" || dnt == "yes");
-    {{- end -}}
-{{- end -}}
-
-{{- $pc := .Site.Config.Privacy.GoogleAnalytics -}}
-{{- if (and (not hugo.IsServer) (not $pc.Disable)) -}}
-    {{ with .Site.Config.Services.GoogleAnalytics.ID -}}
-        {{ if hasPrefix . "G-"}}
-            {{ template "__ga_js_set_doNotTrack" $ }}
-
-            if (!doNotTrack) {
-                window.dataLayer = window.dataLayer || [];
-
-                function gtag() {
-                    dataLayer.push(arguments);
-                }
-                
-                gtag('js', new Date());
-                gtag('config', '{{ . }}', { 'anonymize_ip': {{- $pc.AnonymizeIP -}} });
-            }
-
-        {{ else if hasPrefix . "UA-" }}
-            {{ template "__ga_js_set_doNotTrack" $ }}
-
-            if (!doNotTrack) {
-                (function(i, s, o, g, r, a, m) {
-                    i['GoogleAnalyticsObject'] = r;
-                    i[r] = i[r] || function() {
-                        (i[r].q = i[r].q || []).push(arguments)
-                    }, i[r].l = 1 * new Date();
-                    a = s.createElement(o),
-                        m = s.getElementsByTagName(o)[0];
-                    a.async = 1;
-                    a.src = g;
-                    m.parentNode.insertBefore(a, m)
-                })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');
-                
-                {{- if $pc.UseSessionStorage }}
-                    if (window.sessionStorage) {
-                        var GA_SESSION_STORAGE_KEY = 'ga:clientId';
-                        ga('create', '{{ . }}', {
-                            'storage': 'none',
-                            'clientId': sessionStorage.getItem(GA_SESSION_STORAGE_KEY)
-                        });
-                    
-                        ga(function(tracker) {
-                            sessionStorage.setItem(GA_SESSION_STORAGE_KEY, tracker.get('clientId'));
-                        });
-                    }
-                {{ else }}
-                    ga('create', '{{ . }}', 'auto');
-                {{ end -}}
-                {{ if $pc.AnonymizeIP }}
-                    ga('set', 'anonymizeIp', true);
-                {{ end }}
-                
-                ga('send', 'pageview');
-            }
-        {{- end }}
-    {{ end -}}
-{{- end }}
+        if ({{ site.Config.Privacy.GoogleAnalytics.RespectDoNotTrack }}) {
+          var dnt = (navigator.doNotTrack || window.doNotTrack || navigator.msDoNotTrack);
+          var doNotTrack = (dnt == "1" || dnt == "yes");
+        }
+        if (!doNotTrack) {
+          window.dataLayer = window.dataLayer || [];
+          function gtag(){dataLayer.push(arguments);}
+          gtag('js', new Date());
+          gtag('config', '{{ . }}');
+        }
+    {{ end }}
+  {{ end }}
+{{ end }}
--- a/assets/scss/app-dart.scss
+++ b/assets/scss/app-dart.scss
@@ -51,8 +51,9 @@
    @include meta.load-css(theme/fonts);
 }

-// Import theme placeholder
+// Import theme placeholders
+@import "theme/base.scss";
@import "theme/theme.scss";

-// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+// Import Bootstrap utilities API (mounted by core Bootstrap module)
@import "modules/bootstrap/utilities/api";
--- a/assets/scss/app.scss
+++ b/assets/scss/app.scss
@@ -44,17 +44,13 @@
@import "helpers/colored-links.scss";
@import "helpers/display.scss";

-// TODO: include fonts with following statement in Dart Sass
-// @if $import-fonts {
-//     @include meta.load-css(theme/fonts);
-// }
-
 {{ if (not (hasPrefix (lower site.Params.style.themeFontPath) "http")) }}
    @import "theme/fonts.scss";
 {{ end }}

-// Import theme placeholder
+// Import theme placeholders
+@import "theme/base.scss";
@import "theme/theme.scss";

-// Import Bootstrap utilities API  (mounted by core Bootstrap module)
+// Import Bootstrap utilities API (mounted by core Bootstrap module)
@import "modules/bootstrap/utilities/api";
--- a/assets/scss/common/_styles.scss
+++ b/assets/scss/common/_styles.scss
@@ -28,7 +28,7 @@ a:active {
 }

 .main-content {
-    margin-top: $overlay-offset;
+    margin-top: var(--navbar-offset);
 }

 $utilities: map-merge(
--- a/assets/scss/common/_variables-dart.scss
+++ b/assets/scss/common/_variables-dart.scss
@@ -20,6 +20,8 @@ strong {

 $navbar-height:                 h.$navbar-height;
 $navbar-offset:                 h.$navbar-offset;
+$navbar-offset-xs:              h.$navbar-offset-xs;
+$navbar-size:                   h.$navbar-size;
 $overlay-offset:                h.$overlay-offset;
 $primary:                       h.$primary;
 $secondary:                     h.$secondary;
--- a/assets/scss/components/_breadcrumb.scss
+++ b/assets/scss/components/_breadcrumb.scss
@@ -1,6 +1,6 @@
 // scss-docs-start breadcrumb
 .breadcrumb {
-    padding-top: 0.3 * $navbar-offset;
+    padding-top: calc(0.3 * var(--navbar-offset));
 }

 // scss-docs-end breadcrumb
--- a/assets/scss/components/_feature.scss
+++ b/assets/scss/components/_feature.scss
@@ -1,3 +1,3 @@
 .feature {
-    margin-top: 0.3 * $navbar-offset;
+    margin-top: calc(0.3 * var(--navbar-offset));
 }
--- a/assets/scss/components/_navbar.scss
+++ b/assets/scss/components/_navbar.scss
@@ -126,8 +126,49 @@

 // stylelint-enable annotation-no-unknown

+.navbar .dropdown-divider-bg {
+    color: var(--#{$prefix}navbar-color);
+}
+
 :root {
    --dropdown-horizontal-bg: var(--#{$prefix}light);
+    --navbar-offset: #{$navbar-offset-xs};
+}
+
+.navbar-title {
+    display: inline-block;
+    white-space: normal;
+    text-align: center !important;
+    vertical-align: middle;
+    padding: 0 $spacer 0 $spacer;
+    width: 100% !important;
+}
+
+.navbar-container {
+    width: 100% !important;
+}
+
+.navbar-brand {
+    margin-right: 0;
+}
+
+@include media-breakpoint-up(#{$navbar-size}) {
+    :root {
+        --navbar-offset: #{$navbar-offset};
+    }
+
+    .navbar-container {
+        width: auto !important;
+    }
+
+    .navbar-title {
+        text-align: initial !important;
+        padding: 0;
+    }
+
+    .navbar-brand {
+        margin-right: var(--bs-navbar-brand-margin-end);
+    }
 }

@if $enable-dark-mode {
--- a/assets/scss/components/_sidebar.scss
+++ b/assets/scss/components/_sidebar.scss
@@ -1,10 +1,10 @@
 // scss-docs-start sidebar
 .sidebar {
-    top: $navbar-offset;
+    top: var(--navbar-offset);
 }

 .sidebar-overflow {
-    top: $navbar-offset;
+    top: var(--navbar-offset);
    max-height: 90vh;
    overflow-y: auto;
 }
--- a/assets/scss/layouts/_type.scss
+++ b/assets/scss/layouts/_type.scss
@@ -3,34 +3,34 @@
 //
 h1 {
    margin-top: $spacer * 2.5;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h2 {
    margin-top: $spacer * 2;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h3 {
    margin-top: $spacer * 1.75;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h4 {
    margin-top: $spacer * 1.5;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h5 {
    margin-top: $spacer * 1.25;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 h6 {
    margin-top: $spacer;
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }

 .display-1, .display-2, .display-3, .display-4, .display-5, .display-6 {
-    scroll-margin-top: $navbar-offset;
+    scroll-margin-top: var(--navbar-offset);
 }
--- a/assets/scss/theme/base.scss
+++ b/assets/scss/theme/base.scss
@@ -0,0 +1,2 @@
+// Placeholder for themes extending the core Hinode theme
+// The file is included last in the build pipeline, but prior to theme.scss
--- a/data/structures/card.yml
+++ b/data/structures/card.yml
@@ -162,7 +162,7 @@ arguments:
    parent: cascade
    optional: true
    default: start
-    release: v0.23.0-alpha2
+    release: v0.23.0
    comment: Icon alignment.
    options:
      values:
@@ -173,7 +173,7 @@ arguments:
    type: string
    parent: cascade
    optional: true
-    release: v0.23.0-alpha2
+    release: v0.23.0
    comment: Icon style.
  orientation:
    type: select
@@ -191,15 +191,21 @@ arguments:
    type: bool
    parent: cascade
    optional: true
-    release: v0.23.0-alpha2
+    release: v0.23.0
    comment: Apply subtle background colors.
  button:
    type: bool
    parent: cascade
    optional: true
-    release: v0.23.0-beta
+    release: v0.23.0
    comment: >-
      Flag indicating the cards should include a button that links to the provided address.
+  buttonLabel:
+    type: string
+    optional: true
+    release: v0.23.2
+    comment: >-
+      Label of the link button, defaults to the card title.
  hook:
    type: string
    optional: true
--- a/data/structures/image.yml
+++ b/data/structures/image.yml
@@ -119,4 +119,4 @@ arguments:
    type: string
    optional: true
    comment: Class attribute of the figure caption, e.g. `px-4`.
-    release: v0.23.0-beta
+    release: v0.23.0
--- a/data/structures/nav.yml
+++ b/data/structures/nav.yml
@@ -18,6 +18,7 @@ arguments:
    type:
      - page.Pages
      - resource.Resources
+      - '[]map[string]interface {}'
    optional: true
    comment: Array of pages to be rendered as nav items.
    group: partial
--- a/data/structures/navbar.yml
+++ b/data/structures/navbar.yml
@@ -118,6 +118,7 @@ arguments:
      values:
        - light
        - dark
+        - none
    group: partial
    release: v0.23.0
  logo:
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -59,6 +59,7 @@
    overlayMode = "dark"
    horizontal = false
    offset = "5.5rem"
+    offsetXS = "5.5rem"
    search = true
    searchModal = false
    breadcrumb = true
--- a/exampleSite/content/fr/blog/bootstrap-elements.md
+++ b/exampleSite/content/fr/blog/bootstrap-elements.md
@@ -125,7 +125,8 @@ En-tête 6 {{</* badge title="Nouveau" */>}}

 <!-- markdownlint-disable MD037 -->
 {{< example lang="hugo" >}}
-{{</* card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary" header="publication" footer="none" /*/>}}
+{{</* card path="about" padding="3" class="col-6 mx-auto" color="body-tertiary"
+  header="publication" footer="none" button=true /*/>}}
 {{< /example >}}
 <!-- markdownlint-enable MD037 -->

--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -226,6 +226,7 @@
      "fs-5",
      "fs-6",
      "fs-md-5",
+      "fw-30",
      "fw-bold",
      "fw-semibold",
      "g-0",
--- a/go.mod
+++ b/go.mod
@@ -5,7 +5,7 @@ go 1.19
 require (
 	github.com/airbnb/lottie-web v5.12.2+incompatible // indirect
 	github.com/gethinode/mod-bootstrap v1.2.5 // indirect
-	github.com/gethinode/mod-flexsearch v1.10.0 // indirect
+	github.com/gethinode/mod-flexsearch v1.11.3 // indirect
 	github.com/gethinode/mod-fontawesome v1.8.1 // indirect
 	github.com/gethinode/mod-katex v1.0.7 // indirect
 	github.com/gethinode/mod-leaflet v1.0.0 // indirect
--- a/go.sum
+++ b/go.sum
@@ -52,6 +52,14 @@ github.com/gethinode/mod-flexsearch v1.9.0 h1:AE+w7QeZTxh36JNTG+CASDLxaqlCZKn+EU
 github.com/gethinode/mod-flexsearch v1.9.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-flexsearch v1.10.0 h1:ymlHu5G2635D/h2axG4jgpGS+Vvtzxg07SZX8pJOJSo=
 github.com/gethinode/mod-flexsearch v1.10.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.10.1 h1:aZ4WjUxfiCV1eiGjIUdP+lRTlOI/flPc6ABUQ99C+Es=
+github.com/gethinode/mod-flexsearch v1.10.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.11.0 h1:CQArPhjQRtIZqAK4ysOiBzAB1hi//L4RTelH+ScjbXU=
+github.com/gethinode/mod-flexsearch v1.11.0/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.11.1 h1:TtaE6Dv0lH4x73SHDaZpQJLjk52lRu/VoLf6+CXFOLs=
+github.com/gethinode/mod-flexsearch v1.11.1/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
+github.com/gethinode/mod-flexsearch v1.11.3 h1:ykxpUg8M4vr1C4QzxJOPGt+1ZmPAD/gOCZoFcZxWoWw=
+github.com/gethinode/mod-flexsearch v1.11.3/go.mod h1:L8hrnpupx27cez2ObMX8gWnhbW6qss4HGH1Ea4UaBRQ=
 github.com/gethinode/mod-fontawesome v1.0.2 h1:ZSK6D20/w4y5GnfYfTBB58uHD0ChIfkpKfRGwioS9rg=
 github.com/gethinode/mod-fontawesome v1.0.2/go.mod h1:Ki1qkWEOiF0hQpCgWeZRw+HkpL6nd1DxKFptU0O2feI=
 github.com/gethinode/mod-fontawesome v1.1.0 h1:rsDzUI+3ZlS/do2ff3ne8/z3KwHeysmuA+WsXlumXXk=
--- a/i18n/fr.yaml
+++ b/i18n/fr.yaml
@@ -29,6 +29,8 @@
  translation: "Aucun articles trouvé"
 - id: emptyTags
  translation: "Aucun tags trouvé"
+- id: readMore
+  translation: "Lire plus"

 # Languages
 - id: lang_de
--- a/i18n/pl.yaml
+++ b/i18n/pl.yaml
@@ -0,0 +1,149 @@
+# Single pages
+- id: postedOnDate
+  translation: "Opublikowano {{ . }}"
+- id: lastModified
+  translation: "Ostatnia modyfikacja {{ . }}"
+- id: read
+  translation: "czytania"
+- id: minutesShort
+  translation: "min"
+- id: words
+  translation: "słów"
+- id: photoFull
+  translation: "Zdjęcie autorstwa %s z %s"
+- id: photoShort
+  translation: "Zdjęcie autorstwa {{ . }}"
+- id: photoOn
+  translation: "z"
+- id: draft
+  translation: "Wersja robocza"
+
+# List pages
+- id: article
+  translation: "Artykuł"
+- id: articles
+  translation: "Artykuły"
+- id: more
+  translation: "Więcej {{ . }}"
+- id: emptyList
+  translation: "Brak artykułów"
+- id: emptyTags
+  translation: "Brak tagów"
+
+# Languages
+- id: lang_de
+  translation: "Niemiecki"
+- id: lang_en
+  translation: "Angielski"
+- id: lang_nl
+  translation: "Niderlandzki"
+- id: lang_fr
+  translation: "Francuski"
+
+# Sharing
+- id: shareLink
+  translation: "Udostępnij przez {{ . }}"
+- id: shareSystem
+  translation: "system"
+- id: copyToClipboard
+  translation: "skopiuj do schowka"
+- id: copiedToClipboard
+  translation: "skopiowany do schowka"
+- id: link
+  translation: "Link"
+- id: code
+  translation: "Kod"
+- id: download
+  translation: "Pobierz artykuł"
+
+# Pagination
+- id: paginationNav
+  translation: "Nawigacja strony"
+- id: paginationPrevious
+  translation: "Poprzednia strona"
+- id: paginationNext
+  translation: "Następna strona"
+- id: paginationFirst
+  translation: "Pierwsza strona"
+- id: paginationLast
+  translation: "Ostatnia strona"
+
+# Navigation
+- id: colorMode
+  translation: "Tryb koloru"
+- id: colorLight
+  translation: "Jasny"
+- id: colorDark
+  translation: "Ciemny"
+- id: colorAuto
+  translation: "Automatyczny"
+- id: toggleMainNav
+  translation: "Przełącz główną nawigację"
+- id: home
+  translation: "Strona główna"
+- id: languageSwitcherLabel
+  translation: "Język"
+- id: close
+  translation: "Zamknij"
+
+# Table of contents
+- id: toc
+  translation: "Na tej stronie"
+- id: seeAlso
+  translation: "Zobacz również"
+- id: sectionMenu
+  translation: "Wybierz temat"
+
+# Sidebar
+- id: toggleSidebar
+  translation: "Przełącz nawigację na pasku bocznym"
+
+# Feature
+- id: addedFeature
+  translation: "Dodano w {{ . }}"
+- id: deprecatedFeature
+  translation: "Stała się przestarzała w {{ . }}"
+
+# Versioning
+- id: latest
+  translation: "najnowsza"
+- id: allVersions
+  translation: "Wszystkie wersje"
+- id: newerVersionAlert
+  translation: "Jest dostępna nowsza wersja {{ . }}!"
+
+# 404 page
+- id: pageNotFound
+  translation: "Strona, której szukasz nie istnieje albo wystąpił inny błąd. Spróbuj wrócić do naszej {{ . }}."
+- id: pageNotFoundTitle
+  translation: "Nie znaleziono strony"
+- id: pageNotFoundHome
+  translation: "strony głównej"
+
+# Footer
+- id: copyright
+  translation: "Copyright"
+- id: rights
+  translation: "Wszelkie prawa zastrzeżone"
+- id: poweredBy
+  translation: "Strona oparta o {{ . }}."
+
+# Comments
+- id: show
+  translation: "Pokaż"
+- id: comments
+  translation: "Komentarze" 
+
+# Arguments
+- id: name
+  translation: "Nazwa"
+- id: type
+  translation: "Typ"
+- id: required 
+  translation: "Wymagany"
+- id: default
+  translation: "Domyślny"
+- id: comment
+  translation: Komentarz
+- id: supportedValues
+  translation: "Obsługiwane wartości"
--- a/layouts/partials/assets/card-group.html
+++ b/layouts/partials/assets/card-group.html
@@ -32,13 +32,14 @@
 {{- $subtle := .subtle }}
 {{- $loading := .loading -}}
 {{- $button := .button -}}
+{{- $buttonLabel := .buttonLabel -}}
 {{- $hook := .hook | default "assets/card.html" }}

 <!-- Override arguments -->
 {{ $isPages := in (slice "page.Pages" "resource.Resources") (printf "%T" $pages) }}
 {{ $paginator := "" }}
 {{ if and $isPages $paginate }}
-    {{ $paginator = $page.Paginate $pages }}
+    {{ $paginator = $page.Paginate $pages .max }}
    {{ $pages = first $paginator.PageSize (after (mul (sub $paginator.PageNumber 1) $paginator.PageSize) $pages) }}
 {{ end }}

@@ -104,6 +105,7 @@
                "style" $style
                "align" $align
                "button" $button
+                "buttonLabel" $buttonLabel
            ) -}}
            {{- $params = merge $params $element }}

@@ -119,7 +121,7 @@
        {{if $cards }}{{- print $cards | safeHTML }}{{ end }}
    </div>

-    {{ if $paginate }}
+    {{ if $paginator }}
        {{- if gt $paginator.TotalPages 1 -}}
            <div class="pt-3">{{ partial "assets/pagination.html" (dict "page" $page "format" "terse") }}</div>
        {{- end -}} 
--- a/layouts/partials/assets/card.html
+++ b/layouts/partials/assets/card.html
@@ -30,6 +30,7 @@
 {{- $title := .title -}}
 {{- $subtle := .subtle -}}
 {{- $button := .button -}}
+{{- $buttonLabel := .buttonLabel -}}
 {{- $colorStyle := "" -}}
 {{ if $color }}
    {{ if $subtle }}
@@ -76,12 +77,16 @@
    {{- if $href -}}
        <a href="{{ $href }}" class="{{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }} stretched-link">
                <p class="card-title fs-5 fw-bold">{{ $title }}</p>
-            {{ with $description }}<div class="card-text {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">{{ . | page.RenderString | safeHTML }}</div>{{ end -}}
+            {{ with $description }}
+                <div class="card-text {{ if $color }}link-bg-{{ $color }}{{ else }}card-body-link{{ end }}">
+                {{ . | safeHTML }}
+                </div>
+            {{ end -}}
        </a>
    {{- else -}}
        <div>
            {{ with $title }}<p class="card-title fs-5 fw-bold">{{ . }}</p>{{ end -}}
-            {{ with $description }}<div class="card-text">{{ . | page.RenderString | safeHTML }}</div>{{ end -}}
+            {{ with $description }}<div class="card-text">{{ . | safeHTML }}</div>{{ end -}}
        </div>
    {{- end -}}
 {{- end -}}
@@ -141,8 +146,8 @@
                    </div>
                    {{ if $page }}<div>{{ partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) }}</div>{{ end }}
                    {{ if $button }}
-                        {{ $label := $title | default (T "readMore") }}
-                        <div>{{ partial "assets/button.html" (dict "title" $label "icon" "fas chevron-right" "href" $href "outline" true "size" "sm" "class" "card-button mb-n4") }}</div>
+                        {{ $label := (or $buttonLabel $title) | default (T "readMore") }}
+                        <div class="d-flex align-items-end">{{ partial "assets/button.html" (dict "title" $label "icon" "fas chevron-right" "href" $href "outline" true "size" "sm" "class" "card-button mb-n4") }}</div>
                    {{ end }}
                </div>
            </div>
@@ -164,10 +169,10 @@
            {{ if $page }}{{- partial "card-caption.html" (dict "page" $page "keywords" $footer "color" $color) -}}{{ end }}
        </div>
        {{ if $button }}
-            {{ $label := $title | default (T "readMore") }}
+            {{ $label := (or $buttonLabel $title) | default (T "readMore") }}
            <div class="row p-{{ $padding }}" >
                <div class="{{ if eq $orientation "horizontal-sm" }}col-4 col-md-2{{ else if eq $orientation "horizontal" }}col-4{{ end }}"></div>
-                <div class="col {{ if eq $orientation "horizontal-sm" }}px-2{{ else if eq $orientation "horizontal"}}px-1 {{ else }}px-2 pt-1{{ end }}">
+                <div class="col d-flex align-items-end {{ if eq $orientation "horizontal-sm" }}px-2{{ else if eq $orientation "horizontal"}}px-1 {{ else }}px-2 pt-1{{ end }}">
                    {{ partial "assets/button.html" (dict "title" $label "href" $href "outline" true "size" "sm" "class" "card-button") }}
                </div>
            </div>
--- a/layouts/partials/assets/navbar.html
+++ b/layouts/partials/assets/navbar.html
@@ -112,6 +112,7 @@
 {{- $fixed := .fixed | default false -}}
 {{- $overlay := .overlay | default false -}}
 {{- $overlayMode := .overlayMode | default "dark" -}}
+{{- if eq $overlayMode "none" }}{{ $overlayMode = "" }}{{ end }}
 {{- $color := .color | default "" -}}
 {{- $search := .search | default site.Params.navigation.search -}}
 {{- $searchModal := and $search site.Params.navigation.searchModal -}}
@@ -183,42 +184,46 @@
        {{ if $overlay }}data-navbar-color="{{ $color }}"{{ end }}
        >
        <div class="container-xxl p-0">
-            <!-- Insert sidebar toggler when applicable -->
-            <div class="d-flex align-items-center">
-                {{- if $page.Scratch.Get "sidebar" -}}
-                    <button class="navbar-toggler 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 fa-fw") -}}
+            <div class="d-flex navbar-container justify-content-center">
+                <!-- Insert sidebar toggler when applicable -->
+                <div class="d-flex align-items-center">
+                    {{- if $page.Scratch.Get "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" }}">
+                            {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
+                        </button>
+                    {{- else -}}
+                        <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
+                        <button class="navbar-toggler collapsed p-0 mx-auto invisible fw-30" type="button">
+                            {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw" "spacing" false) -}}
+                        </button>
+                    {{- end -}}
+                </div>
+        
+                <!-- Insert the brand logo or name -->
+                <div class="{{ if (or $logoLight $logo) }}mx-auto{{ else }}flex-grow-1 flex-{{ $size }}-grow-0{{ end }}">
+                    <a class="navbar-brand" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
+                        {{- if (and $logoLight $logoDark) -}}
+                            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
+                            <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                            <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                        {{- else if $logo -}}
+                            {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
+                            <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
+                        {{- else -}}
+                            <div class="navbar-title fw-bold h-100">{{ $title }}</div>
+                        {{- end -}}
+                    </a>
+                </div>
+        
+                <!-- Insert main navigation toggler -->
+                <div class="d-flex align-items-center">
+                    <button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
+                        aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
+                        <span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
+                        <span class="toggler-icon middle-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
+                        <span class="toggler-icon bottom-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
                    </button>
-                {{- else -}}
-                    <!-- Insert invisible sidebar toggler to center logo correctly on smaller screens -->
-                    <button class="navbar-toggler collapsed p-0 mx-auto invisible" type="button">
-                        {{- partial "assets/icon.html" (dict "icon" "fas ellipsis fa-fw") -}}
-                    </button>
-                {{- end -}}
-            </div>
-    
-            <!-- Insert the brand logo or name -->
-            <a class="navbar-brand mx-auto" href="{{ site.Home.RelPermalink }}" aria-label="{{ T "home" }}">
-                {{- if (and $logoLight $logoDark) -}}
-                    {{ $width := partial "utilities/GetWidth.html" (dict "path" $logoLight "height" 30) }}
-                    <img src="{{if $absoluteURL }}{{ absURL $logoLight }}{{ else }}{{ $logoLight }}{{ end }}" class="d-none-dark" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                    <img src="{{if $absoluteURL }}{{ absURL $logoDark }}{{ else }}{{ $logoDark }}{{ end }}" class="d-none-light" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                {{- else if $logo -}}
-                    {{ $width := partial "utilities/GetWidth.html" (dict "path" $logo "height" 30) }}
-                    <img src="{{if $absoluteURL }}{{ absURL $logo }}{{ else }}{{ $logo }}{{ end }}" alt="{{ $title }} logo" height="30"{{ with $width }} width="{{ . }}"{{ end }}>
-                {{- else -}}
-                    <span class="fw-bold">{{ $title }}</span>
-                {{- end -}}
-            </a>
-    
-            <!-- Insert main navigation toggler -->
-            <div class="d-flex">
-                <button class="navbar-toggler main-nav-toggler collapsed p-0" type="button" data-bs-toggle="collapse" data-bs-target="#{{ $id }}-collapse"
-                    aria-controls="{{ $id }}" aria-expanded="false" aria-label="{{ T "toggleMainNav" }}">
-                    <span class="toggler-icon top-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
-                    <span class="toggler-icon middle-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
-                    <span class="toggler-icon bottom-bar emphasis{{ with $theme }}-{{ . }}{{ end }}"></span>
-                </button>
+                </div>
            </div>
    
            <div class="navbar-collapse collapse" id="{{ $id }}-collapse">
--- a/layouts/partials/assets/section-menu.html
+++ b/layouts/partials/assets/section-menu.html
@@ -30,20 +30,20 @@
            "icon" "fas sort"
            "justify" "between"
            "collapse" "toc-collapse"
-            "order" "last") 
+            "order" "last"
+            "spacing" false
+            ) 
        -}}
    </div>

-    <p>
-        <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
-            <div class="toc toc-panel section-menu text-body p-2 fs-6">
-                    {{- range $items }}
-                        {{ $active := eq $page.RelPermalink .RelPermalink }}
-                        <a class="nav-link{{ if $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a>
-                    {{- end }}
-            </div>
+    <div class="collapse border bg-body-tertiary rounded p-1 navbar-nav-scroll" id="toc-collapse">
+        <div class="toc toc-panel section-menu text-body p-2 fs-6">
+            {{- range $items }}
+                {{ $active := eq $page.RelPermalink .RelPermalink }}
+                <a class="nav-link{{ if $active }} active{{ end }}" href="{{ .RelPermalink }}">{{ .Title }}</a>
+            {{- end }}
        </div>
-    </p>
+    </div>

    <nav class="navbar navbar-expand navbar-services p-0 fs-5 d-none d-md-block">
        <div class="container-fluid p-0 pb-3">
--- a/layouts/partials/head/stylesheet.html
+++ b/layouts/partials/head/stylesheet.html
@@ -27,7 +27,11 @@
 {{ end}}

 {{- $navbarOffset := "0rem" -}}
-{{- if site.Params.navigation.fixed }}{{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}{{ end }}
+{{- $navbarOffsetXS := "0rem" -}}
+{{- if site.Params.navigation.fixed }}
+    {{ $navbarOffset = site.Params.navigation.offset | default "4rem" }}
+    {{ $navbarOffsetXS = site.Params.navigation.offsetXS | default $navbarOffset }}
+{{ end }}
 {{- $overlayOffset := $navbarOffset -}}
 {{- if site.Params.navigation.overlay }}{{ $overlayOffset = "0rem" }}{{ end }}
 {{- $vars := dict 
@@ -43,6 +47,8 @@
    "dark"                    (default "#212529" site.Params.style.dark)
    "navbar-height"           (site.Params.navigation.offset | default "4rem")
    "navbar-offset"           $navbarOffset
+    "navbar-offset-xs"        $navbarOffsetXS
+    "navbar-size"             (site.Params.navigation.size | default "md")
    "overlay-offset"          $overlayOffset
    "enable-dark-mode"        (printf "%t" ((default true site.Params.main.enableDarkMode)))
    "import-fonts"            (printf "%t" (not (hasPrefix (lower site.Params.style.themeFontPath) "http")))
--- a/layouts/shortcodes/image.html
+++ b/layouts/shortcodes/image.html
@@ -19,6 +19,7 @@
 {{- $class := "" -}}
 {{- $title := "" -}}
 {{- $caption := "" -}}
+{{- $figclass := "" -}}
 {{- $mode := false -}}
 {{- $portrait := false -}}
 {{- $loading := "" -}}
@@ -33,6 +34,7 @@
    {{- $loading = .Get "loading" | default "" -}}
    {{ $title = .Get "title" | default "" -}}
    {{ $caption = .Get "caption" | default "" -}}
+    {{ $figclass = .Get "figclass" | default "" -}}
    {{ with .Get "mode" }}{{ $mode = partial "utilities/CastBool.html" . }}{{ end -}}
    {{ with .Get "portrait" }}{{ $portrait = partial "utilities/CastBool.html" . }}{{ end -}}
 {{ else -}}
@@ -53,6 +55,7 @@
        "class" $class
        "title" $title
        "caption" $caption
+        "figclass" $figclass
        "mode" $mode
        "portrait" $portrait
        "loading" $loading
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "0.23.0",
+  "version": "0.23.10",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -67,19 +67,19 @@
  },
  "homepage": "https://gethinode.com",
  "devDependencies": {
-    "@fullhuman/postcss-purgecss": "^5.0.0",
+    "@fullhuman/postcss-purgecss": "^6.0.0",
    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
    "@netlify/plugin-lighthouse": "^6.0.0",
-    "autoprefixer": "^10.4.18",
-    "cssnano": "^6.1.0",
-    "cssnano-preset-advanced": "^6.1.0",
+    "autoprefixer": "^10.4.19",
+    "cssnano": "^7.0.0",
+    "cssnano-preset-advanced": "^7.0.0",
    "eslint": "^8.57.0",
    "eslint-config-standard": "^17.1.0",
    "eslint-plugin-import": "^2.29.1",
    "eslint-plugin-n": "^16.6.2",
    "eslint-plugin-promise": "^6.1.1",
-    "hugo-bin": "^0.121.0",
-    "markdownlint-cli2": "^0.12.1",
+    "hugo-bin": "0.122.4",
+    "markdownlint-cli2": "^0.13.0",
    "netlify-plugin-hugo-cache-resources": "^0.2.1",
    "npm-run-all": "^4.1.5",
    "postcss-cli": "^11.0.0",
@@ -87,8 +87,8 @@
    "replace-in-files-cli": "^2.2.0",
    "rimraf": "^5.0.5",
    "shx": "^0.3.4",
-    "stylelint": "^16.2.1",
-    "stylelint-config-standard-scss": "^13.0.0"
+    "stylelint": "^16.4.0",
+    "stylelint-config-standard-scss": "^13.1.0"
  },
  "optionalDependencies": {
    "@gethinode/netlify-plugin-dartsass": "^0.3.0",