Merge pull request #1463 from gethinode/develop

Fix highlight of example bookshop input
Merge branch 'main' into develop
2025-10-18 07:23:09 +00:00 · 2025-06-17 19:11:18 +02:00 · 2025-06-17 19:00:58 +02:00 · 2025-06-17 19:00:28 +02:00 · 2025-06-17 18:40:21 +02:00 · 2025-06-17 17:30:29 +02:00
41 changed files with 756 additions and 422 deletions
--- a/component-library/bookshop.scss
+++ b/component-library/bookshop.scss
@@ -1,6 +1,7 @@
@import "modules/bookshop/shared/styles/global";
@import "modules/bookshop/components/about/about";
@import "modules/bookshop/components/articles/articles";
+@import "modules/bookshop/components/cards/cards";
@import "modules/bookshop/components/faq/faq";
@import "modules/bookshop/components/hero/hero";
@import "modules/bookshop/components/releases/releases";
--- a/component-library/components/about/about.bookshop.yml
+++ b/component-library/components/about/about.bookshop.yml
@@ -30,6 +30,7 @@ blueprint:
    mode:
  order:
  width:
+  justify:
  link-type:
  links:
    -
--- a/component-library/components/about/about.hugo.html
+++ b/component-library/components/about/about.hugo.html
@@ -26,7 +26,7 @@
        "link-type"    $args.linkType
        "links"        $args.links
        "orientation"  "horizontal"
-        "width"        (or .width 8)
+        "width"        (or $args.width 8)
        )
    }}
 {{- end -}}
--- a/component-library/components/articles/articles.bookshop.yml
+++ b/component-library/components/articles/articles.bookshop.yml
@@ -42,4 +42,6 @@ blueprint:
  header-style:
  footer-style:
  orientation:
-  class:
+  class:
+  width:
+  justify:
--- a/component-library/components/articles/articles.hugo.html
+++ b/component-library/components/articles/articles.hugo.html
@@ -11,7 +11,7 @@
 {{ if or $args.err $args.warnmsg }}
    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
        "partial" "component-library/components/articles/articles.hugo.html" 
-        "warnid"   "warn-invalid-arguments"
+        "warnid"  "warn-invalid-arguments"
        "msg"     "Invalid arguments"
        "details" ($args.errmsg | append $args.warnmsg)
        "file"    page.File
@@ -62,48 +62,46 @@

 <!-- Main code -->
 {{ if not $error }}
-	<div class="container-xxl p-4 px-xxl-0">
-		{{- partial "assets/section-title.html" (dict "heading" $args.heading "class" "py-5") -}}
+	{{- partial "assets/section-title.html" (dict "heading" $args.heading) -}}

-		{{ $partial := "assets/card-group.html" }}
-		{{ $params := dict }}
-		{{- $params = merge $params (dict
-			"page"         page
-			"list"         $pages
-			"max"          $args.max
-			"cols"         $args.cols
-			"icon-rounded" $args.iconRounded
-			"href"         (cond $moreButton $moreLink "")
-			"href-title"   (cond $moreButton $moreTitle "")
-			"href-force"   (gt $result.total (len $result.pages))
-		)}}
+	{{ $partial := "assets/card-group.html" }}
+	{{ $params := dict }}
+	{{- $params = merge $params (dict
+		"page"         page
+		"list"         $pages
+		"max"          $args.max
+		"cols"         $args.cols
+		"icon-rounded" $args.iconRounded
+		"href"         (cond $moreButton $moreLink "")
+		"href-title"   (cond $moreButton $moreTitle "")
+		"href-force"   (gt $result.total (len $result.pages))
+	)}}

-		{{ if $args.scroll }}
-			{{ $partial := "assets/stack.html" }}
-			{{ $params = merge $params (dict 
-				"header-style" "none"
-				"body-style"   "title"
-				"footer-style" "none"
-				"gutter"       1
-				"padding"      3
-				"ratio"        "1x1"
-				"orientation"  "horizontal-sm"
-				"styles"       (cond $args.bento $styles "")
-			) -}}
-		{{ else }}
-			{{ $params = merge $params (dict 
-				"header-style" $args.headerStyle
-				"footer-style" $args.footerStyle
-				"padding"      $args.padding
-				"class"        (or $args.class "border-0")
-				"icon-style"   "fa-2x"
-				"align"        "start"
-				"orientation"  $args.orientation
-				"hook"         "assets/live-card.html"
-				"pagination"   $args.pagination
-				"paginate"     $paginate
-			) -}}
-		{{ end }}
-		{{ partial $partial $params }}
-	</div>
+	{{ if $args.scroll }}
+		{{ $partial := "assets/stack.html" }}
+		{{ $params = merge $params (dict 
+			"header-style" "none"
+			"body-style"   "title"
+			"footer-style" "none"
+			"gutter"       1
+			"padding"      3
+			"ratio"        "1x1"
+			"orientation"  "horizontal-sm"
+			"styles"       (cond $args.bento $styles "")
+		) -}}
+	{{ else }}
+		{{ $params = merge $params (dict 
+			"header-style" $args.headerStyle
+			"footer-style" $args.footerStyle
+			"padding"      $args.padding
+			"class"        (or $args.class "border-0")
+			"icon-style"   "fa-2x"
+			"align"        "start"
+			"orientation"  $args.orientation
+			"hook"         "assets/live-card.html"
+			"pagination"   $args.pagination
+			"paginate"     $paginate
+		) -}}
+	{{ end }}
+	{{ partial $partial $params }}
 {{ end }}
--- a/component-library/components/cards/cards.bookshop.yml
+++ b/component-library/components/cards/cards.bookshop.yml
@@ -0,0 +1,34 @@
+# Metadata about this component, to be used in the CMS
+spec:
+  structures:
+    - content_blocks
+  label: Benefits
+  description: Introduction section
+  icon: check
+  tags: []
+
+# Defines the structure of this component, as well as the default values
+blueprint:
+  heading:
+    preheading:
+    heading:
+    content:
+    align:
+    width:
+  cols:
+  icon-rounded:
+  padding:
+  background:
+    backdrop:
+    color:
+    subtle:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
+  orientation:
+  class:
+  width:
+  justify:
--- a/component-library/components/cards/cards.hugo.html
+++ b/component-library/components/cards/cards.hugo.html
@@ -0,0 +1,72 @@
+{{/* 
+    Copyright © 2025 The Hinode Team / Mark Dumay. All rights reserved.
+    Use of this source code is governed by The MIT License (MIT) that can be found in the LICENSE file.
+    Visit gethinode.com/license for more details.
+*/}}
+
+{{ $error := false }}
+
+{{/* Initialize arguments */}}
+{{ $args := partial "utilities/InitArgs.html" (dict "bookshop" "cards" "args" .)}}
+{{ if or $args.err $args.warnmsg }}
+    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
+        "partial" "component-library/components/cards/cards.hugo.html" 
+        "warnid"  "warn-invalid-arguments"
+        "msg"     "Invalid arguments"
+        "details" ($args.errmsg | append $args.warnmsg)
+        "file"    page.File
+    )}}
+    {{ $error = $args.err }}
+{{ end }}
+
+{{/* Initialize global arguments */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+
+{{/* Initialize local variables */}}
+{{ $list := slice }}
+{{ range $args.elements }}
+	<!-- TODO: check mode -->
+	{{ $list = $list | append (dict 
+		"title"       .title
+		"description" (.content | page.RenderString)
+		"icon"        .icon
+		"thumbnail"   .image
+	) }}
+{{ end}}
+
+{{ if not $error }}
+	{{- partial "assets/section-title.html" (dict "heading" $args.heading) -}}
+
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary d-%s-none %s" $breakpoint.prev $args.class)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   "fa-2x"
+		"align"        "start"
+		"orientation"  ($args.orientation | default "horizontal-sm")
+		"hook"         "assets/live-card.html"
+	) -}}
+
+	{{- partial "assets/card-group.html" (dict 
+		"page"         page
+		"list"         $list
+		"class"        (printf "border-0 card-icon-primary d-none d-%s-block %s" $breakpoint.prev $args.class)
+		"cols"         $args.cols
+		"gutter"       "4"
+		"padding"      $args.padding
+		"header-style" "none"
+		"footer-style" "none"
+		"icon-rounded" $args.iconRounded
+		"icon-style"   "fa-2x"
+		"align"        "start"
+		"orientation"  ($args.orientation | default "stacked")
+		"hook"         "assets/live-card.html"
+	) -}}
+{{ end }}
+
--- a/component-library/components/cards/cards.scss
+++ b/component-library/components/cards/cards.scss
--- a/component-library/components/faq/faq.bookshop.yml
+++ b/component-library/components/faq/faq.bookshop.yml
@@ -17,6 +17,8 @@ blueprint:
    width:
    size:
  contrast:
+  width:
+  justify:
  background:
    backdrop:
    color:
--- a/component-library/components/faq/faq.hugo.html
+++ b/component-library/components/faq/faq.hugo.html
@@ -17,43 +17,37 @@
 {{ end }}

 {{ if not $args.err }}
-	<div class="container-xxl p-4 px-xxl-0">
-		{{ $color := "" }}
-		{{ if $args.contrast }}{{ $color = "white" }}{{ end }}
-		{{- partial "assets/section-title.html" (dict 
-			"heading" $args.heading
-			"color" $color
-			"class" "py-5"
-		) -}}
+	{{ $color := "" }}
+	{{ if $args.contrast }}{{ $color = "white" }}{{ end }}
+	{{- partial "assets/section-title.html" (dict  "heading" $args.heading "color" $color) -}}

-		{{ $class := "" }}
-		{{ $id := printf "faq-%s" (md5 (delimit (slice . now) "-")) }}
+	{{ $class := "" }}
+	{{ $id := printf "faq-%s" (md5 (delimit (slice . now) "-")) }}

-		<div id="{{ $id }}" class="accordion accordion-faq {{ if $args.contrast }}accordion-faq-contrast text-white {{ end }}accordion-flush mb-3{{ with $class }} {{ . }}{{ end }} col-12 col-md-6 mx-auto">
-			{{ range $index, $item := $args.items }}
-				<div class="accordion-item">
-					{{- with $item.title -}}
-						<div class="accordion-header m-0" id="{{ $id }}-heading-{{ $id }}">
-							<button class="accordion-button collapsed" 
-								type="button" 
-								data-bs-toggle="collapse"
-								data-bs-target="#{{ $id }}-item-{{ $index }}"
-								aria-expanded="false"
-								aria-controls="{{ $id }}-item-{{ $index }}"
-							>
-							{{ if $args.color }}<div class="text-{{ $args.color }}">{{ . }}</div>{{ else }}{{ . }}{{ end }}
-							</button>
-						</div>
-					{{- end -}}
-					<div id="{{ $id }}-item-{{ $index }}" 
-						class="accordion-collapse collapse"
-						aria-labelledby="{{ $id }}-heading-{{ $index }}"
-						data-bs-parent="#{{ $id }}"
-					>
-						<div class="accordion-body">{{ $item.description | page.RenderString | safeHTML }}</div>
+	<div id="{{ $id }}" class="accordion accordion-faq {{ if $args.contrast }}accordion-faq-contrast text-white {{ end }}accordion-flush mb-3{{ with $class }} {{ . }}{{ end }} col-12 col-md-6 mx-auto">
+		{{ range $index, $item := $args.items }}
+			<div class="accordion-item">
+				{{- with $item.title -}}
+					<div class="accordion-header m-0" id="{{ $id }}-heading-{{ $id }}">
+						<button class="accordion-button collapsed" 
+							type="button" 
+							data-bs-toggle="collapse"
+							data-bs-target="#{{ $id }}-item-{{ $index }}"
+							aria-expanded="false"
+							aria-controls="{{ $id }}-item-{{ $index }}"
+						>
+						{{ if $args.color }}<div class="text-{{ $args.color }}">{{ . }}</div>{{ else }}{{ . }}{{ end }}
+						</button>
 					</div>
+				{{- end -}}
+				<div id="{{ $id }}-item-{{ $index }}" 
+					class="accordion-collapse collapse"
+					aria-labelledby="{{ $id }}-heading-{{ $index }}"
+					data-bs-parent="#{{ $id }}"
+				>
+					<div class="accordion-body">{{ $item.description | page.RenderString | safeHTML }}</div>
 				</div>
-			{{ end }}
-		</div>
+			</div>
+		{{ end }}
 	</div>
 {{ end }}
--- a/component-library/components/hero/hero.bookshop.yml
+++ b/component-library/components/hero/hero.bookshop.yml
@@ -38,3 +38,4 @@ blueprint:
  cover:
  orientation:
  width:
+  justify:
--- a/component-library/components/hero/hero.hugo.html
+++ b/component-library/components/hero/hero.hugo.html
@@ -30,6 +30,7 @@
 		"links"        $args.links
 		"orientation"  $args.orientation
 		"width"        $args.width
+		"justify"      $args.justify
 		)
 	}}
 {{ end }}
--- a/component-library/components/releases/releases.bookshop.yml
+++ b/component-library/components/releases/releases.bookshop.yml
@@ -21,4 +21,6 @@ blueprint:
    backdrop:
    color:
    subtle:
+  width:
+  justify:
  data:
--- a/component-library/components/separator/separator.hugo.html
+++ b/component-library/components/separator/separator.hugo.html
@@ -16,5 +16,5 @@
 {{ end }}

 {{ if not $args.err }}
-    <div class="container-xxl p-0"{{ with $args.theme }} data-bs-theme="{{ . }}"{{ end }}><hr></div>
+    <hr class="w-100">
 {{ end }}
--- a/component-library/components/video-message/video-message.bookshop.yml
+++ b/component-library/components/video-message/video-message.bookshop.yml
@@ -39,6 +39,7 @@ blueprint:
      label:
  border:
  width:
+  justify:

 _structures:
  messages:
--- a/component-library/components/video-message/video-message.hugo.html
+++ b/component-library/components/video-message/video-message.hugo.html
@@ -17,6 +17,7 @@
 {{ end }}

 {{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}

 {{- define "_partials/inline/video.html" -}}
 	{{ $provider := .provider }}
@@ -25,10 +26,14 @@
 	{{ $autoplay := .autoplay }}
 	{{ $queryArgs := .queryArgs }}
 	{{ $border := .border }}
+	{{ $padding := .padding }}

 	{{ if site.Params.env_bookshop_live }}
 		{{/* Define dummy content as we cannot retrieve video data in live mode */}}
-		{{- partial "assets/live-image.html" (dict "src" "/img/placeholder-video.svg" "ratio" "21x9" "wrapper" "text-center mb-4") -}}
+		{{- partial "assets/live-image.html" (dict
+			"src" "/img/placeholder-video.svg"
+			"ratio" "21x9"
+			"wrapper" (printf "text-center mb-%d" $padding.y)) -}}
 	{{ else }}
        <div class="video-container{{ if $border }} video-container-border{{ end}}">
 			{{ partial "assets/video.html" (dict
@@ -73,7 +78,7 @@
 	) -}}
 {{ end }}

-<div class="container-xxl p-4 px-xxl-0">
+{{ if not $args.err }}
 	{{ $list := slice }}

 	{{ range $args.messages }}
@@ -91,13 +96,10 @@
 		) }}
 	{{ end}}

-	{{- partial "assets/section-title.html" (dict 
-		"heading" $args.heading
-		"class"   "py-5"
-	) -}}
+	{{- partial "assets/section-title.html" (dict "heading" $args.heading) -}}

 	{{ if eq $args.orientation "stacked" }}
-		<div class="col-{{ $breakpoint.current }}-{{ $args.width }} mx-auto">
+		<div class="col-{{ $breakpoint.current }}-{{ $args.width }} mx-auto pb-{{ $padding.y }}">
 		{{ with $args.video }}
 			{{- partial "inline/video.html" (dict
 				"provider"   .provider
@@ -106,14 +108,15 @@
 				"autoplay"   .autoplay
 				"query-args" .queryArgs
 				"border"     $.border
+				"padding"    $padding
 			) -}}
 		{{ end }}
 		</div>
-		<div class="mt-4">
+		<div class="mt-{{ $padding.y }} pb-{{ $padding.y }}">
 			{{- partial "inline/messages.html" (dict "list" $list "cols" $args.cols "type" $args.type "iconRounded" $args.iconRounded) -}}
 		</div>
 	{{ else }}
-		<div class="container grid gap-4">
+		<div class="container grid gap-4 pb-{{ $padding.y }}">
 			<div class="row row-cols-1 row-cols-{{ $breakpoint.current }}-2">
 				<div class="col col-{{ $breakpoint.current }}-{{ $args.width }} p-0">
 					{{ with $args.video }}
@@ -124,13 +127,14 @@
 							"autoplay"   .autoplay
 							"query-args" .queryArgs
 							"border"     $.border
+							"padding"    $padding
 						) -}}
 					{{ end }}
 				</div>
-				<div class="col col-{{ $breakpoint.current }}-{{ sub 12 $args.width }} mt-4 mt-{{ $breakpoint.current }}-0">
+				<div class="col col-{{ $breakpoint.current }}-{{ sub 12 $args.width }} mt-{{ $padding.y }} mt-{{ $breakpoint.current }}-0">
 					{{- partial "inline/messages.html" (dict "list" $list "cols" 1 "type" $args.type "iconRounded" $args.iconRounded) -}}
 				</div>
 			</div>
 		</div>
 	{{ end }}
-</div>
+{{ end }}
--- a/component-library/helpers/component.html
+++ b/component-library/helpers/component.html
@@ -15,7 +15,7 @@
 {{- $component_props := index . 1 -}}
 {{- $class := index . 2 | default "p-0" -}}
 {{- $bgclass := index . 3 | default "" -}}
-
+{{- $padding := partial "utilities/GetPadding.html" -}}
 {{- $component_path := partial "_bookshop/helpers/component_key" $component_name -}}
 {{- $flat_component_path := partial "_bookshop/helpers/flat_component_key" $component_name -}}

@@ -32,6 +32,9 @@
    {{- $background := index $component_props "background" -}}
    {{- $backdrop := "" -}}
    {{- $style := index $component_props "wrapper" -}}
+    {{- $width := index $component_props "width" -}}
+    {{- $justify := index $component_props "justify" | default "start" -}}
+    {{- $padding := cond (ne $component_name "separator") (printf "px-%d px-xxl-0 py-%d" $padding.x $padding.y) "" -}}
    {{- $wrapper := $style }}
    {{ with $background }}
        {{ $wrapper = partial "utilities/GetBackgroundStyle.html" (dict "background" . "class" $style) }}
@@ -59,7 +62,16 @@
        {{- if $backdrop -}}
            {{ partial "assets/live-image.html" (dict "src" $backdrop "class" (printf "background-img-fluid %s" $bgclass) "title" (T "backgroundImage")) }}
        {{- end -}}
-        {{ partial $resolved_component $component_props }}
+
+        {{ $col := cond (and $width (lt $width 12)) (printf "col-12 col-md-%d" $width) "" }}
+
+        <div class="container-xxl {{ $padding }} d-flex flex-column align-items-{{ $justify }}">
+            {{ with $col }}
+                <div class="{{ . }}">{{ partial $resolved_component $component_props }}</div>
+            {{ else }}
+                {{ partial $resolved_component $component_props }}
+            {{ end}}
+        </div>
    </section>
    {{ "<!--bookshop-live end-->" | safeHTML }}
 {{- else -}}
--- a/config/_default/params.toml
+++ b/config/_default/params.toml
@@ -10,6 +10,9 @@
    footerBelowFold = false
    loading = "lazy"
    breakpoint = "md"
+    [main.padding]
+        x = 4
+        y = 4
    titleCase = false
    [main.internalLinks]
        validate = true
--- a/data/structures/_arguments.yml
+++ b/data/structures/_arguments.yml
@@ -151,13 +151,6 @@ arguments:
        - full
        - title
        - none
-  # # TODO: rename bodyStyle
-  # bodyStyle:
-  #   type: string
-  #   optional: true
-  #   default: lead text-muted
-  #   comment: >-
-  #     Style of the body text, if any..
  border:
    type: bool
    optional: true
@@ -355,6 +348,12 @@ arguments:
      - template.HTML
    optional: true
    comment: Section content displayed below the title.
+  content-style:
+    type: string
+    optional: true
+    default: lead text-muted
+    comment: >-
+      Style of the section content, if any.
  contrast:
    type: bool
    default: false
@@ -430,6 +429,11 @@ arguments:
    comment: Path to the download file, relative to the site's static folder.

  # e
+  elements:
+    type: elements
+    optional: false
+    comment: >-
+      Elements to include in the card group. Each element is rendered as a card.
  external:
    type: bool
    optional: true
@@ -567,17 +571,16 @@ arguments:
    optional: true
    comment: >-
      Heading of the content block, including a preheading and content element.
-  # # TODO: rename headingStyle
-  # headingStyle:
-  #   type: select
-  #   optional: true
-  #   default: display
-  #   options:
-  #     values:
-  #       - display
-  #       - fs
-  #   comment: >-
-  #     Style of the heading, either display or fs (regular).
+  heading-style:
+    type: select
+    optional: true
+    default: display
+    options:
+      values:
+        - display
+        - fs
+    comment: >-
+      Style of the heading, either display style or regular style (fs).
  # headline: 
  #   type: string
  #   optional: true
@@ -713,7 +716,7 @@ arguments:
    type: select
    optional: true
    default: center
-    comment: Justification of the link title and icon.
+    comment: Justification of the child elements.
    options:
      values:
        - start
--- a/data/structures/_types.yml
+++ b/data/structures/_types.yml
@@ -32,6 +32,12 @@ types:
  items:
    - title:
      description:
+  elements:
+    - title:
+      icon:
+      image:
+      mode:
+      content:
  links:
    - title:
      url:
--- a/data/structures/hero-image.yml
+++ b/data/structures/hero-image.yml
@@ -11,3 +11,4 @@ arguments:
  wrapper:
  class:
  image-overlay:
+  justify:
--- a/data/structures/hero.yml
+++ b/data/structures/hero.yml
@@ -15,6 +15,7 @@ arguments:
  cover:
  orientation:
  width:
+  justify:
  use-section:
  use-title:
  class:
--- a/data/structures/section-title.yml
+++ b/data/structures/section-title.yml
@@ -3,124 +3,13 @@ arguments:
  heading:
  links:
  color:
-    type: select
-    comment: Text color of the section.
    default: body
-    optional: true
-    options:
-      values:
-        - body
-        - primary
-        - secondary
-        - black
-        - white
  class:
-    type: string
-    optional: true
-    comment: Class attribute of the section title.
  size: 
-    type: int
-    optional: true
-    comment: Display size of the title.
-    options:
-      min: 1
-      max: 6
  use-title:
-    type: bool
-    optional: true
-    default: false
-    comment: Sets the title to an HTML header instead of a div.
  justify:
-    type: select
-    comment: Justification of the link titles and icons.
-    optional: true
-    default: center
-    options:
-      values:
-        - start
-        - end
-        - center
-        - between
-        - around
-        - evenly
-  type:
-    type: select
-    optional: true
-    default: button
-    comment: Link type
-    options:
-      values:
-        - button
-        - link
-  section: 
-    type: bool
-    optional: true
-    default: false
-    comment: >-
-      Trigger to use the current section as preheading, applies to single pages
-      only. Any preheading values takes precedence.
+  link-type:
+  use-section: 
  arrangement:
-  headingStyle:
-    type: select
-    optional: true
-    default: display
-    options:
-      values:
-        - display
-        - fs
-    comment: >-
-      Style of the heading, either display or fs (regular).
-  bodyStyle:
-    type: string
-    optional: true
-    default: lead text-muted
-    comment: >-
-      Style of the body text, if any..
-  # class:
-  #   type: string
-  #   optional: true
-  #   comment: Class attribute of the illustration, e.g. "col-6".
-  # image:
-  #   type: string
-  #   optional: true
-  #   comment: Image displayed on top of or adjacent to the headline.
-  # imageOverlay:
-  #   type: bool
-  #   optional: true
-  #   default: false
-  #   comment: Trigger to include an image overlay placeholder.
-  # ratio:
-  #   type: select
-  #   optional: true
-  #   default: 16x9
-  #   comment: >-
-  #     Ratio of the illustration, uses original aspect ratio by default.
-  #   options:
-  #     values:
-  #       - 1x1
-  #       - 3x2
-  #       - 4x3
-  #       - 16x9
-  #       - 21x9
-  # anchor:
-  #   type: select
-  #   optional: true
-  #   comment: 
-  #     Anchor of the thumbnail's crop box, defaults to anchor value set in
-  #     `imaging` section of the site configuration (usually `Smart`).
-  #   options:
-  #     values:
-  #       - TopLeft
-  #       - Top
-  #       - TopRight
-  #       - Left
-  #       - Center
-  #       - Right
-  #       - BottomLeft
-  #       - Bottom
-  #       - BottomRight
-  #       - Smart
-  # icon:
-  #   type: string
-  #   optional: true
-  #   comment: Icon or animation displayed on top of or adjacent to the headline.
+  heading-style:
+  content-style:
--- a/exampleSite/config/_default/params.toml
+++ b/exampleSite/config/_default/params.toml
@@ -8,6 +8,9 @@
    footerBelowFold = false
    loading = "lazy"
    breakpoint = "md"
+    [main.padding]
+        x = 4
+        y = 4
    titleCase = true
    [main.internalLinks]
        validate = true
--- a/exampleSite/content/en/_index.md
+++ b/exampleSite/content/en/_index.md
@@ -8,20 +8,20 @@ content_blocks:
      title: Welcome to Hinode!
      content: |-
        A clean documentation and blog theme for your Hugo site based on Bootstrap 5.
-      align: start
+      width: 6
    background:
      color: primary
      subtle: true
    illustration:
      image: /img/sunrise.jpg
      ratio: 16x9
-      width: 8
-    width: 6
+    width: 8
    links:
      - title: About
        url: about
        icon: fas chevron-right
    orientation: horizontal
+    justify: center

  - _bookshop_name: articles
    heading:
--- a/exampleSite/content/en/blocks/articles.md
+++ b/exampleSite/content/en/blocks/articles.md
@@ -0,0 +1,44 @@
+---
+_schema: default
+title: Articles
+description: Use the articles content block to show a group of article cards.
+icon: fas grip
+---
+
+## Overview
+
+The `articles` content block renders a group of article cards.
+
+<!-- markdownlint-disable MD037 -->
+{{< example-bookshop lang="bookshop" >}}
+
+```yml
+- _bookshop_name: articles
+  heading:
+    title: Blog
+    align: start
+  input:
+    section: blog
+    reverse: false
+    sort: title
+  hide-empty: false
+  header-style: none
+  more:
+    title: More Blogs
+  padding: 0
+  max: 3
+  background:
+    color: primary
+    subtle: true
+  class: border-0 card-zoom card-body-margin
+  justify: center
+```
+
+{{< /example-bookshop >}}
+<!-- markdownlint-enable MD037 -->
+
+## Arguments
+
+The content block supports the following arguments:
+
+{{< args bookshop-articles >}}
--- a/exampleSite/content/en/blocks/cards.md
+++ b/exampleSite/content/en/blocks/cards.md
@@ -0,0 +1,44 @@
+---
+_schema: default
+title: Cards
+description: Use the cards content block to show a card group of messages.
+icon: fa address-card
+---
+
+## Overview
+
+The `cards` content block renders a group of content cards.
+
+<!-- markdownlint-disable MD037 -->
+{{< example-bookshop lang="bookshop" >}}
+
+```yml
+- _bookshop_name: cards
+  heading:
+    preheading: Preheading
+    title: Heading
+    content: Cards content. It supports multiple lines.
+    align: start
+  background:
+    color: primary
+    subtle: true
+  orientation: stacked
+  icon-rounded: true
+  class: text-center
+  elements:
+    - title: First Card
+      icon: fas 1
+    - title: Second Card
+      icon: fas 2
+    - title: Third Card
+      icon: fas 3
+```
+
+{{< /example-bookshop >}}
+<!-- markdownlint-enable MD037 -->
+
+## Arguments
+
+The content block supports the following arguments:
+
+{{< args bookshop-cards >}}
--- a/exampleSite/hugo_stats.json
+++ b/exampleSite/hugo_stats.json
@@ -69,6 +69,7 @@
    ],
    "classes": [
      "%!s(<nil>)",
+      "%!s(MISSING)",
      "about",
      "accordion",
      "accordion-body",
@@ -137,6 +138,7 @@
      "card-container-wrapper",
      "card-emphasize",
      "card-icon",
+      "card-icon-primary",
      "card-icon-secondary",
      "card-img-bg",
      "card-img-top",
@@ -144,6 +146,7 @@
      "card-text",
      "card-title",
      "card-zoom",
+      "cards",
      "carousel",
      "carousel-caption",
      "carousel-control-next",
@@ -169,7 +172,7 @@
      "col-lg-2",
      "col-lg-4",
      "col-lg-8",
-      "col-md-",
+      "col-md-10",
      "col-md-12",
      "col-md-2",
      "col-md-3",
@@ -181,9 +184,6 @@
      "col-sm-12",
      "col-sm-3",
      "col-sm-6",
-      "col-sm-9",
-      "col-xl-10",
-      "col-xl-2",
      "collapse",
      "collapsed",
      "container",
@@ -224,38 +224,52 @@
      "fa-3",
      "fa-4x",
      "fa-activity",
+      "fa-address-card",
      "fa-angle-left",
      "fa-arrow-left",
      "fa-arrow-right",
+      "fa-book-open",
      "fa-bootstrap",
+      "fa-check",
      "fa-chevron-right",
+      "fa-circle",
      "fa-circle-check",
      "fa-circle-play",
      "fa-circle-question",
      "fa-code",
+      "fa-display",
      "fa-divide",
      "fa-docker",
      "fa-ellipsis",
      "fa-face-frown",
      "fa-facebook",
      "fa-fluid",
+      "fa-font-awesome",
      "fa-fw",
      "fa-github",
      "fa-globe",
+      "fa-grip",
      "fa-h",
      "fa-heart",
      "fa-house",
      "fa-info",
+      "fa-inverse",
      "fa-link",
      "fa-linkedin",
      "fa-magnifying-glass",
+      "fa-markdown",
      "fa-medium",
      "fa-moon",
+      "fa-robot",
      "fa-rocket",
      "fa-rotate-90",
      "fa-share-nodes",
+      "fa-sitemap",
      "fa-sort",
      "fa-square-check",
+      "fa-stack",
+      "fa-stack-1x",
+      "fa-stack-2x",
      "fa-sun",
      "fa-timeline",
      "fa-up-right-from-square",
@@ -319,6 +333,7 @@
      "justify-content-between",
      "justify-content-center",
      "justify-content-end",
+      "justify-content-md-start",
      "justify-content-start",
      "katex",
      "label",
@@ -332,6 +347,7 @@
      "link-warning",
      "lottie-animation",
      "m-0",
+      "m-auto",
      "m-md-n4",
      "m-n1",
      "main-content",
@@ -399,6 +415,7 @@
      "pb-3",
      "pb-4",
      "pb-5",
+      "pe-0",
      "pe-1",
      "pe-3",
      "pe-5",
@@ -415,7 +432,6 @@
      "pt-4",
      "pt-5",
      "pt-md-0",
-      "pt-md-3",
      "ptw-3",
      "ptw-5",
      "ptw-lg-5",
@@ -427,9 +443,7 @@
      "py-2",
      "py-3",
      "py-4",
-      "py-5",
      "py-md-1",
-      "py-md-5",
      "ratio",
      "ratio-16x9",
      "releases",
@@ -566,6 +580,7 @@
      "body-file-collapse-1",
      "bouton",
      "breadcrumb",
+      "build-a-static-website-fast-and-flexible",
      "button",
      "button-group",
      "c4-diagram",
@@ -588,40 +603,160 @@
      "cookies-etc",
      "custom-activity",
      "data-tables",
+      "developer-friendly-and-secure",
      "docs",
      "documentation",
+      "elements-type",
      "entity-relationship-diagram",
      "example",
      "exemple",
+      "fa-address-card",
      "fa-face-frown",
+      "fa-font-awesome",
      "fa-square-check",
      "fab-bootstrap",
      "fab-docker",
      "fab-facebook",
      "fab-github",
      "fab-linkedin",
+      "fab-markdown",
      "fab-medium",
      "fab-whatsapp",
      "fab-x-twitter",
-      "faq-d60f86697e8e822c14f81bde047a063e",
-      "faq-d60f86697e8e822c14f81bde047a063e-heading-faq-d60f86697e8e822c14f81bde047a063e",
-      "faq-d60f86697e8e822c14f81bde047a063e-item-0",
-      "faq-d60f86697e8e822c14f81bde047a063e-item-1",
-      "faq-d60f86697e8e822c14f81bde047a063e-item-2",
+      "faq-0d9a663ea13795e571a591d17c829742",
+      "faq-0d9a663ea13795e571a591d17c829742-heading-faq-0d9a663ea13795e571a591d17c829742",
+      "faq-0d9a663ea13795e571a591d17c829742-item-0",
+      "faq-0d9a663ea13795e571a591d17c829742-item-1",
+      "faq-0d9a663ea13795e571a591d17c829742-item-2",
+      "faq-1a91b395d4e278d5ad50026e5543d315",
+      "faq-1a91b395d4e278d5ad50026e5543d315-heading-faq-1a91b395d4e278d5ad50026e5543d315",
+      "faq-1a91b395d4e278d5ad50026e5543d315-item-0",
+      "faq-1a91b395d4e278d5ad50026e5543d315-item-1",
+      "faq-1a91b395d4e278d5ad50026e5543d315-item-2",
+      "faq-260a338c938b84539f6f323923f8e613",
+      "faq-260a338c938b84539f6f323923f8e613-heading-faq-260a338c938b84539f6f323923f8e613",
+      "faq-260a338c938b84539f6f323923f8e613-item-0",
+      "faq-260a338c938b84539f6f323923f8e613-item-1",
+      "faq-260a338c938b84539f6f323923f8e613-item-2",
+      "faq-27223f6d2ae1171f2cf24b1a28156a35",
+      "faq-27223f6d2ae1171f2cf24b1a28156a35-heading-faq-27223f6d2ae1171f2cf24b1a28156a35",
+      "faq-27223f6d2ae1171f2cf24b1a28156a35-item-0",
+      "faq-27223f6d2ae1171f2cf24b1a28156a35-item-1",
+      "faq-27223f6d2ae1171f2cf24b1a28156a35-item-2",
+      "faq-2d786b12873224179f3ed158e5a7d744",
+      "faq-2d786b12873224179f3ed158e5a7d744-heading-faq-2d786b12873224179f3ed158e5a7d744",
+      "faq-2d786b12873224179f3ed158e5a7d744-item-0",
+      "faq-2d786b12873224179f3ed158e5a7d744-item-1",
+      "faq-2d786b12873224179f3ed158e5a7d744-item-2",
+      "faq-3c297f2bc52c8df8d94d5eef851ab26d",
+      "faq-3c297f2bc52c8df8d94d5eef851ab26d-heading-faq-3c297f2bc52c8df8d94d5eef851ab26d",
+      "faq-3c297f2bc52c8df8d94d5eef851ab26d-item-0",
+      "faq-3c297f2bc52c8df8d94d5eef851ab26d-item-1",
+      "faq-3c297f2bc52c8df8d94d5eef851ab26d-item-2",
+      "faq-7021d3f3246f1cad44eb45aab9c051af",
+      "faq-7021d3f3246f1cad44eb45aab9c051af-heading-faq-7021d3f3246f1cad44eb45aab9c051af",
+      "faq-7021d3f3246f1cad44eb45aab9c051af-item-0",
+      "faq-7021d3f3246f1cad44eb45aab9c051af-item-1",
+      "faq-7021d3f3246f1cad44eb45aab9c051af-item-2",
+      "faq-79c40a4b7e8130c6d59d7d5ec68a806c",
+      "faq-79c40a4b7e8130c6d59d7d5ec68a806c-heading-faq-79c40a4b7e8130c6d59d7d5ec68a806c",
+      "faq-79c40a4b7e8130c6d59d7d5ec68a806c-item-0",
+      "faq-79c40a4b7e8130c6d59d7d5ec68a806c-item-1",
+      "faq-79c40a4b7e8130c6d59d7d5ec68a806c-item-2",
+      "faq-7a94a6ed05dee266e8fca51d4b03c44a",
+      "faq-7a94a6ed05dee266e8fca51d4b03c44a-heading-faq-7a94a6ed05dee266e8fca51d4b03c44a",
+      "faq-7a94a6ed05dee266e8fca51d4b03c44a-item-0",
+      "faq-7a94a6ed05dee266e8fca51d4b03c44a-item-1",
+      "faq-7a94a6ed05dee266e8fca51d4b03c44a-item-2",
+      "faq-87875e6a383425f97b473c2f294dc32b",
+      "faq-87875e6a383425f97b473c2f294dc32b-heading-faq-87875e6a383425f97b473c2f294dc32b",
+      "faq-87875e6a383425f97b473c2f294dc32b-item-0",
+      "faq-87875e6a383425f97b473c2f294dc32b-item-1",
+      "faq-87875e6a383425f97b473c2f294dc32b-item-2",
+      "faq-8cbeda0cbf69e9b1f730419797381724",
+      "faq-8cbeda0cbf69e9b1f730419797381724-heading-faq-8cbeda0cbf69e9b1f730419797381724",
+      "faq-8cbeda0cbf69e9b1f730419797381724-item-0",
+      "faq-8cbeda0cbf69e9b1f730419797381724-item-1",
+      "faq-8cbeda0cbf69e9b1f730419797381724-item-2",
+      "faq-a283ecb983d43eca6d74b09b4cfe0113",
+      "faq-a283ecb983d43eca6d74b09b4cfe0113-heading-faq-a283ecb983d43eca6d74b09b4cfe0113",
+      "faq-a283ecb983d43eca6d74b09b4cfe0113-item-0",
+      "faq-a283ecb983d43eca6d74b09b4cfe0113-item-1",
+      "faq-a283ecb983d43eca6d74b09b4cfe0113-item-2",
+      "faq-bf296c068826c3f70cda629523eaeee2",
+      "faq-bf296c068826c3f70cda629523eaeee2-heading-faq-bf296c068826c3f70cda629523eaeee2",
+      "faq-bf296c068826c3f70cda629523eaeee2-item-0",
+      "faq-bf296c068826c3f70cda629523eaeee2-item-1",
+      "faq-bf296c068826c3f70cda629523eaeee2-item-2",
+      "faq-ca8ce46ac820ed775e7a69120344616d",
+      "faq-ca8ce46ac820ed775e7a69120344616d-heading-faq-ca8ce46ac820ed775e7a69120344616d",
+      "faq-ca8ce46ac820ed775e7a69120344616d-item-0",
+      "faq-ca8ce46ac820ed775e7a69120344616d-item-1",
+      "faq-ca8ce46ac820ed775e7a69120344616d-item-2",
+      "faq-cbbd7ca0faf0b753868403f958cf8744",
+      "faq-cbbd7ca0faf0b753868403f958cf8744-heading-faq-cbbd7ca0faf0b753868403f958cf8744",
+      "faq-cbbd7ca0faf0b753868403f958cf8744-item-0",
+      "faq-cbbd7ca0faf0b753868403f958cf8744-item-1",
+      "faq-cbbd7ca0faf0b753868403f958cf8744-item-2",
+      "faq-cfb71a1e6c505922609807a314e54eed",
+      "faq-cfb71a1e6c505922609807a314e54eed-heading-faq-cfb71a1e6c505922609807a314e54eed",
+      "faq-cfb71a1e6c505922609807a314e54eed-item-0",
+      "faq-cfb71a1e6c505922609807a314e54eed-item-1",
+      "faq-cfb71a1e6c505922609807a314e54eed-item-2",
+      "faq-dce7a0223de22fc974afefb5fb73500c",
+      "faq-dce7a0223de22fc974afefb5fb73500c-heading-faq-dce7a0223de22fc974afefb5fb73500c",
+      "faq-dce7a0223de22fc974afefb5fb73500c-item-0",
+      "faq-dce7a0223de22fc974afefb5fb73500c-item-1",
+      "faq-dce7a0223de22fc974afefb5fb73500c-item-2",
+      "faq-de87d81175f84d4b473aedbb904dca29",
+      "faq-de87d81175f84d4b473aedbb904dca29-heading-faq-de87d81175f84d4b473aedbb904dca29",
+      "faq-de87d81175f84d4b473aedbb904dca29-item-0",
+      "faq-de87d81175f84d4b473aedbb904dca29-item-1",
+      "faq-de87d81175f84d4b473aedbb904dca29-item-2",
+      "faq-de9ce1500782d5d44b4de7a31ac22036",
+      "faq-de9ce1500782d5d44b4de7a31ac22036-heading-faq-de9ce1500782d5d44b4de7a31ac22036",
+      "faq-de9ce1500782d5d44b4de7a31ac22036-item-0",
+      "faq-de9ce1500782d5d44b4de7a31ac22036-item-1",
+      "faq-de9ce1500782d5d44b4de7a31ac22036-item-2",
+      "faq-e40f4cdf1d5fd2b6aa8c07326e2ba943",
+      "faq-e40f4cdf1d5fd2b6aa8c07326e2ba943-heading-faq-e40f4cdf1d5fd2b6aa8c07326e2ba943",
+      "faq-e40f4cdf1d5fd2b6aa8c07326e2ba943-item-0",
+      "faq-e40f4cdf1d5fd2b6aa8c07326e2ba943-item-1",
+      "faq-e40f4cdf1d5fd2b6aa8c07326e2ba943-item-2",
+      "faq-ec1d24cb71b18507b09f080761d59750",
+      "faq-ec1d24cb71b18507b09f080761d59750-heading-faq-ec1d24cb71b18507b09f080761d59750",
+      "faq-ec1d24cb71b18507b09f080761d59750-item-0",
+      "faq-ec1d24cb71b18507b09f080761d59750-item-1",
+      "faq-ec1d24cb71b18507b09f080761d59750-item-2",
+      "faq-f760b3a9afdbc65e4a1dea126792034b",
+      "faq-f760b3a9afdbc65e4a1dea126792034b-heading-faq-f760b3a9afdbc65e4a1dea126792034b",
+      "faq-f760b3a9afdbc65e4a1dea126792034b-item-0",
+      "faq-f760b3a9afdbc65e4a1dea126792034b-item-1",
+      "faq-f760b3a9afdbc65e4a1dea126792034b-item-2",
+      "faq-f965312ce85935dd57bb6ac2a5ae85fb",
+      "faq-f965312ce85935dd57bb6ac2a5ae85fb-heading-faq-f965312ce85935dd57bb6ac2a5ae85fb",
+      "faq-f965312ce85935dd57bb6ac2a5ae85fb-item-0",
+      "faq-f965312ce85935dd57bb6ac2a5ae85fb-item-1",
+      "faq-f965312ce85935dd57bb6ac2a5ae85fb-item-2",
      "fas-1",
      "fas-2",
      "fas-3",
      "fas-angle-left",
      "fas-arrow-left",
      "fas-arrow-right",
+      "fas-book-open",
+      "fas-check",
      "fas-chevron-right",
+      "fas-circle",
      "fas-circle-check",
      "fas-circle-play",
      "fas-circle-question",
      "fas-code",
+      "fas-display",
      "fas-divide",
      "fas-ellipsis",
      "fas-globe",
+      "fas-grip",
      "fas-h",
      "fas-heart",
      "fas-house",
@@ -629,8 +764,10 @@
      "fas-link",
      "fas-magnifying-glass",
      "fas-moon",
+      "fas-robot",
      "fas-rocket",
      "fas-share-nodes",
+      "fas-sitemap",
      "fas-sort",
      "fas-sun",
      "fas-timeline",
@@ -638,6 +775,7 @@
      "fichier",
      "fil-dariane",
      "file",
+      "flexible--ready-to-use",
      "flowchart",
      "footer-docs-collapse-15",
      "footer-file-collapse-1",
@@ -660,6 +798,7 @@
      "imgix",
      "indicateur-de-chargement",
      "infobulle",
+      "input-type",
      "ins",
      "invite-de-commandes",
      "items-type",
@@ -678,6 +817,7 @@
      "mermaid-diagrams",
      "messages-type",
      "mindmap",
+      "more-type",
      "nav",
      "nav-0-0",
      "nav-0-1",
@@ -698,6 +838,7 @@
      "overview",
      "persona",
      "pie-chart",
+      "powered-by-open-source",
      "projecten",
      "projects",
      "projets",
--- a/layouts/_partials/assets/card-group.html
+++ b/layouts/_partials/assets/card-group.html
@@ -30,6 +30,8 @@
 {{- end -}}

 {{/* Initialize global variables */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
 {{- $pretty := site.Params.main.internalLinks.pretty | default false -}}

 {{/* Initialize local variables */}}
@@ -136,8 +138,7 @@

 {{/* Main code */}}
 {{- if and (not $error) (or (gt (len $elements) 0) $args.cards) -}}
-<div class="{{- $args.wrapper -}}">
-    <div class="container-fluid {{ if $args.scroll }}card-container-wrapper{{ end }} p-0">
+    <div class="container-fluid {{ if $args.scroll }}card-container-wrapper{{ end }} p-0 {{ $args.wrapper }}">
        <div class="row g-{{ $args.gutter -}}
        {{- if $args.scroll }} d-flex flex-row flex-nowrap card-container scrollbar-horizontal pb-4 w-100 {{ end -}}
        {{- if $args.bento }}{{ with $args.valign }} align-items-{{ . }}{{ end }}{{ else }} {{ $colGrid }}{{ end }}">
@@ -187,7 +188,7 @@

    {{- if $paginator -}}
        {{- if gt $paginator.TotalPages 1 -}}
-            <div class="pt-3">{{- partial "assets/pagination.html" (dict "page" $args.page "format" "terse") -}}</div>
+            <div class="pt-{{ $padding.y }}">{{- partial "assets/pagination.html" (dict "page" $args.page "format" "terse") -}}</div>
        {{- end -}} 
    {{- else -}}
        {{- if or (and (gt $count $max) $args.hrefTitle) (and $args.hrefForce  $args.hrefTitle) -}}
@@ -195,8 +196,11 @@
            {{- if and $pretty (not (hasSuffix $href "/" )) (not (strings.Contains $href "#")) -}}
                {{- $href = printf "%s/" $href -}}
            {{- end -}}
-            <a class="btn btn-outline-primary mt-4" href="{{ $href | safeURL }}" role="button">{{ $args.hrefTitle }}</a>
+            <div class="mt-{{ $padding.y }} w-100">
+                <a class="btn btn-outline-primary" href="{{ $href | safeURL }}" role="button">
+                    {{ $args.hrefTitle }}
+                </a>
+            </div>
        {{- end -}}
    {{- end -}}
-</div>
 {{- end -}}
--- a/layouts/_partials/assets/card.html
+++ b/layouts/_partials/assets/card.html
@@ -62,7 +62,10 @@
    </small></p>
 {{- end -}}

-{{/* Initialize arguments */}}
+{{/* Initialize global variables */}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
+{{/* Initialize local arguments */}}
 {{ $args := partial "utilities/InitArgs.html" (dict "structure" "card" "args" . "group" "partial") }}
 {{ if or $args.err $args.warnmsg }}
    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
@@ -148,19 +151,19 @@
    {{ if $thumbnail }}
        {{ if eq $args.orientation "horizontal-sm" }}
            {{ $stack = "fa-1x" }}
-            {{ $col1 = "col-4 col-md-2" }}
+            {{ $col1 = "col-4 col-md-2 pe-0" }}
            {{ $col2 = "col-8 col-md-10" }}
        {{ else }}
-            {{ $col1 = "col-4" }}
+            {{ $col1 = "col-4 pe-0" }}
            {{ $col2 = "col-8" }}
        {{ end }}
    {{ else if $icon }}
        {{ if eq $args.orientation "horizontal-sm" }}
            {{ $stack = "fa-1x" }}
-            {{ $col1 = "col-2 col-sm-3 col-md-4 col-xl-2" }}
-            {{ $col2 = "col-10 col-sm-9 col-md-8 col-xl-10" }}
+            {{ $col1 = "col-4 col-md-2 pe-0" }}
+            {{ $col2 = "col-8 col-md-10" }}
        {{ else }}
-            {{ $col1 = "col-4" }}
+            {{ $col1 = "col-4 pe-0" }}
            {{ $col2 = "col-8" }}
        {{ end }}

@@ -168,7 +171,7 @@

    {{/* Render horizontal card */}}
    <div class="card {{ $colorStyle }}{{ $args.class }}">
-        <div class="row g-0 row-cols-2 h-100{{ if $args.button }} pb-5{{ end }}">
+        <div class="row g-0 row-cols-2 h-100{{ if $args.button }} pb-{{ $padding.y }}{{ end }}">
            {{- if $thumbnail -}}
                <div class="{{ $col1 }}">
                    {{ $fullHeight := "card-img-h100" }}
--- a/layouts/_partials/assets/hero-image.html
+++ b/layouts/_partials/assets/hero-image.html
@@ -16,8 +16,8 @@
    )}}
 {{ end }}

-{{ if not $args.err }}
-    <div class="hero-image-container">
+{{ 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 }}">
        {{ partial "assets/featured-illustration.html" (dict 
            "page"    $args.page
            "icon"    $args.icon
--- a/layouts/_partials/assets/hero.html
+++ b/layouts/_partials/assets/hero.html
@@ -22,22 +22,21 @@
 {{/* Initialize global variables */}}
 {{ $arrangement := site.Params.modules.bookshop.title.arrangement }}
 {{ if eq $args.order "first" }}{{ $arrangement = "above" }}{{ end }}
+{{- $padding := partial "utilities/GetPadding.html" -}}

 {{/* Initialize local variables */}}
 {{ $align := $args.align }}
-{{ if and (not $align) (eq $args.orientation "stacked") }}{{ $align = "center" }}{{ end }}
-{{ $class := $args.class }}
+{{ $class := $args.class | default "" }}
 {{ $scale := $args.illustration.width }}

 {{ if $scale }}
-    {{ $class = trim (printf "%s col-%d " $class $scale) " " }}
+    {{ $class = trim (printf "%s col-%d text-center text-md-%s" $class $scale $align) " " }}
 {{ else }}
-    {{ $class = trim (printf "%s col-8 col-md-12" $class) " " }}
    {{ $scale = 12 }}
 {{ end }}

 {{ $iconWrapper := "col-6" }}
-{{ if $args.center }}{{ $iconWrapper = "col-6 mx-auto text-center" }}{{ end }}
+{{ $heading := cond (eq $args.orientation "horizontal") (merge $args.heading (dict "width" 12)) $args.heading }}

 {{ $sizes := "100vw" }}
 {{ if or (lt $args.width 12) (lt $scale 12) }}
@@ -58,79 +57,76 @@
 {{ end }}

 {{ if not $error }}
-    <div class="container-xxl {{ $args.padding }} d-flex flex-column">
-        {{ if and $args.breadcrumb (not page.IsHome) }}
-            <div class="d-flex flex-column align-items-{{ $align}} mb-4 pe-3">
-                {{ if site.Params.env_bookshop_live }}
-                    <i class="text-white">Breadcrumb preview not supported</i>
-                {{ else }}
-                    {{ partial "assets/breadcrumb.html" (dict "page" page) }}
-                {{ end }}            
-            </div>
-        {{ end }}
+    {{ if and $args.breadcrumb (not page.IsHome) }}
+        <div class="d-flex flex-column align-items-{{ $align}} mb-{{ $padding.y }} pe-3">
+            {{ if site.Params.env_bookshop_live }}
+                <i class="text-white">Breadcrumb preview not supported</i>
+            {{ else }}
+                {{ partial "assets/breadcrumb.html" (dict "page" page) }}
+            {{ end }}            
+        </div>
+    {{ end }}

-        {{ $imageWrapper := printf "mx-auto mx-md-0 %s" $class }}
-        {{ if eq $args.orientation "stacked" }}
-            {{ $imageWrapper = printf "pt-5 %s" $class }}
-            {{ if $args.center }}{{ $imageWrapper = printf "%s mx-auto" $imageWrapper }}{{ end }}
-            {{ if $args.icon }}{{ $imageWrapper = $iconWrapper }}{{ end }}
-        {{ end }}
-
-        {{ $sectionClass := cond (eq $args.orientation "stacked") "pt-5" "py-md-5" }}
+    {{ $imageWrapper := printf "mx-md-0 text-%s %s" $align $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 }}
+    {{ end }}

-        {{ $illustration := partial $args.hook (dict
-            "page"         $args.page
-            "image"        $args.illustration.image
-            "icon"         $args.illustration.icon
-            "anchor"       $args.illustration.anchor
-            "mode"         $args.illustration.mode
-            "ratio"        $args.illustration.ratio
-            "sizes"        $sizes
-            "title"        (T "heroImage")
-            "wrapper"      $imageWrapper
-            "class"        "hero-image"
-            "image-overlay" $args.imageOverlay
-        ) }}
+    {{ if $args.icon }}{{ $imageWrapper = $iconWrapper }}{{ end }}

-        {{ $title := partial "assets/section-title.html" (dict
-            "heading"             $args.heading
-            "use-title"           $args.useTitle
-            "size"                $args.size
-            "links"               $args.links
-            "type"                (or $args.linkType $args.type)
-            "class"               (printf "hero-title %s" $sectionClass)
-            "arrangement"         $arrangement
-        ) }}
+    {{ $illustration := partial $args.hook (dict
+        "page"          $args.page
+        "image"         $args.illustration.image
+        "icon"          $args.illustration.icon
+        "anchor"        $args.illustration.anchor
+        "mode"          $args.illustration.mode
+        "ratio"         $args.illustration.ratio
+        "sizes"         $sizes
+        "title"         (T "heroImage")
+        "wrapper"       $imageWrapper
+        "class"         "hero-image"
+        "image-overlay" $args.imageOverlay
+        "justify"       $imageJustify
+    ) }}

-        {{ if eq $args.orientation "stacked" }}
-            {{/* Render stacked component */}}
-            <div class="row flex-fill">
-                <div class="col col-12 col-md-{{ $args.width }}{{ if $args.center }} m-auto{{ end }}">
-                    {{ $illustration | safeHTML }}
-                    {{ $title | safeHTML }}
-                </div>
+    {{ $title := partial "assets/section-title.html" (dict
+        "heading"     $heading
+        "use-title"   $args.useTitle
+        "size"        $args.size
+        "links"       $args.links
+        "link-type"   (or $args.linkType $args.type)
+        "class"       "hero-title"
+        "arrangement" $arrangement
+    ) }}
+
+    {{ if eq $args.orientation "stacked" }}
+        {{/* Render stacked component */}}
+
+        {{ $illustration | safeHTML }}
+        {{ $title | safeHTML }}
+    {{ else }}
+        {{/* Render horizontal component */}}
+        <div class="row row-cols-1 {{ if eq $args.orientation "stacked" }}row-cols-md-2 {{ end }} w-100">
+            {{ $order1 := "order-1 order-md-0" }}
+            {{ $order2 := "order-0 order-md-1" }}
+            {{ if eq $args.order "first" }}
+                {{ $order1 = "order-1" }}
+                {{ $order2 = "order-0" }}
+            {{ end }}
+
+            {{ $imgWidth := sub 12 (or $args.heading.width 12) }}
+            {{ if lt $imgWidth 1 }}{{ $imgWidth = 1 }}{{ end }}
+
+            <div class="col col-12 col-md-{{sub 12 $imgWidth }} {{ $order1 }} my-md-auto pt-{{ $padding.y }} pt-md-0 hero-content">
+                {{ $title | safeHTML }}
            </div>
-        {{ else }}
-            {{/* Render horizontal component */}}
-            <div class="row row-cols-1 row-cols-md-2 flex-fill">
-                {{ $order1 := "order-1 order-md-0 " }}
-                {{ $order2 := "order-0 order-md-1" }}
-                {{ if eq $args.order "first" }}
-                    {{ $order1 = "order-1" }}
-                    {{ $order2 = "order-0" }}
-                {{ end }}
-
-                <div class="col col-12 col-md-{{ $args.width }} {{ $order1 }} my-md-auto pt-5 pt-md-0 hero-content">
-                    {{ $title | safeHTML }}
-                </div>
-                <div class="col col-10 col-md-{{ sub 12 $args.width }}
-                    {{ $order2 }}{{ if $args.center }} text-center{{ end }} my-md-auto align-self-end">
-                    <div>
-                        {{ $illustration | safeHTML }}
-                    </div>
-                </div>
+            <div class="col col-8 col-md-{{ $imgWidth }} {{ $order2 }} m-auto my-md-auto align-self-end">
+                {{ $illustration | safeHTML }}
            </div>
-        {{ end }}
-    </div>
+        </div>
+    {{ end }}
 {{ end }}
--- a/layouts/_partials/assets/image.html
+++ b/layouts/_partials/assets/image.html
@@ -62,7 +62,10 @@

        {{- range $suffix := $modes -}}
            {{- $image := printf "%s-%s%s" $base $suffix $ext -}}
-            {{- $params = merge $params (dict "src" $image) -}}
+            {{- $params = merge $params (dict
+                    "src"   $image
+                    "class" (printf "%s d-none-%s" $args.class (cond (eq $suffix "dark") "light" "dark"))
+            ) -}}
            {{- partial "assets/helpers/image-definition.html" $params -}}
        {{- end -}}
    {{ else }}
--- a/layouts/_partials/assets/links.html
+++ b/layouts/_partials/assets/links.html
@@ -21,6 +21,7 @@

 {{/* Initialize global arguments */}}
 {{- $breakpoint := page.Scratch.Get "breakpoint" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}

 {{- define "_partials/links-content.html" -}}
    {{ $links := .links }}    
@@ -93,7 +94,7 @@
    {{ end }}
 {{ end }}

-<div class="hstack d-none d-{{ $breakpoint.current }}-block {{ if gt (len $args.links) 1 }} gap-5{{ end }} justify-content-{{ $args.align }} pt-5 pt-md-3">
+<div class="hstack d-none d-{{ $breakpoint.current }}-block {{ if gt (len $args.links) 1 }} gap-5{{ end }} justify-content-{{ $args.align }} pt-{{ $padding.y }}">
    {{ partial "links-content.html" (dict "links" $args.links "justify" $args.justify "type" $args.linkType "li" false) }}
 </div>

--- a/layouts/_partials/assets/navbar.html
+++ b/layouts/_partials/assets/navbar.html
@@ -79,6 +79,9 @@
    )}}
 {{ end }}

+{{/* Initialize global variables */}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
 {{/* Initialize local arguments */}}
 {{- $absoluteURL := site.Params.main.canonifyAssetsURLs | default false -}}
 {{- $pretty := site.Params.main.internalLinks.pretty | default false }}
@@ -171,7 +174,7 @@
 {{/* Main code */}}
 <div class="container-fluid {{ if $args.fixed }}fixed-top{{ else if $overlay }}navbar-overlay{{ end }} p-0{{ with $class }} {{ . }}{{ end }}">
    {{- partial "assets/page-alert.html" (dict "page" $page) -}}
-    <nav class="navbar p-4
+    <nav class="navbar px-{{ $padding.x }} py-{{ $padding.y }}
        {{- if not $overlay }}{{ with $color }} bg-{{ . }}{{ end }}{{ end -}}
        {{ if $args.fixed }} navbar-fixed-top{{ end }} navbar-expand-{{ $args.breakpoint -}}
        {{ if $contrast }} navbar-contrast{{ end }}"
--- a/layouts/_partials/assets/section-title.html
+++ b/layouts/_partials/assets/section-title.html
@@ -14,62 +14,98 @@
    )}}
 {{ end }}

+{{/* Initialize global arguments */}}
+{{- $breakpoint := partial "utilities/GetBreakpoint.html" -}}
+{{- $padding := partial "utilities/GetPadding.html" -}}
+
 {{/* Initialize local arguments */}}
-{{- $size := (or .size site.Params.modules.bookshop.title.size) | default 4 -}}
-{{- $arrangement := (or .arrangement site.Params.modules.bookshop.title.arrangement) | default "above" -}}
-{{- $headingStyle := (or .headingStyle site.Params.modules.bookshop.title.headingStyle) | default "display" -}}
-{{- $bodyStyle := (or .bodyStyle site.Params.modules.bookshop.title.bodyStyle) | default "lead text-muted" -}}
+{{- $size := (or $args.size site.Params.modules.bookshop.title.size) | default 4 -}}
+{{- $arrangement := (or $args.arrangement site.Params.modules.bookshop.title.arrangement) | default "above" -}}
+{{- $headingStyle := (or $args.headingStyle site.Params.modules.bookshop.title.headingStyle) | default "display" -}}
+{{- $contentStyle := (or $args.contentStyle site.Params.modules.bookshop.title.contentStyle) | default "lead text-muted" -}}
 {{- $preheading := $args.heading.preheading }}
 {{- $title := $args.heading.title }}
+{{- $width := $args.heading.width | default 12 -}}

-{{ if and (not $preheading) $args.section }}
-    {{ $preheading = page.CurrentSection.Name }}
-{{ end }}
+{{ if and (not $preheading) $args.useSection }}{{ $preheading = page.CurrentSection.Name }}{{ end }}

 {{ if site.Params.main.titleCase }}
    {{ $preheading = title $preheading }}
    {{ $title = title $title }}
 {{ end }}

-{{- $breakpoint := page.Scratch.Get "breakpoint" -}}
-
 {{ define "_partials/assets/section-title-header.html" }}
    {{ $headingStyle := .headingStyle }}
+
    {{ if (index . "use-title") }}
        {{ $title := .title | page.RenderString }}
        {{ $label := trim (replaceRE "\r\n?|\n" " " ($title | plainify)) " " }}
        <h1 id="{{ anchorize .title }}" {{ if ne $title $label }}aria-label="{{ $label }}"{{ end -}}        
-            class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">{{ .title | page.RenderString | safeHTML }}</h1>
+            class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">
+                {{ .title | page.RenderString | safeHTML }}
+        </h1>
    {{ else }}
-        <div id="{{ anchorize .title }}" class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">{{ .title | page.RenderString | safeHTML }}</div>
+        <div id="{{ anchorize .title }}" class="{{ $headingStyle }}-{{ .size }}{{ with .color }} text-{{ . }}{{ end }} pt-1">
+            {{ .title | page.RenderString | safeHTML }}
+        </div>
    {{ end }}
 {{ end }}

+{{ $header := "" }}
+{{ if $title }}
+    {{ $header = partial "assets/section-title-header.html" (dict
+        "use-title"    $args.useTitle
+        "title"        $title
+        "headingStyle" $headingStyle
+        "color"        $args.color
+        "size"         $size
+    ) }}
+{{ end }}
+
+{{ $links := "" }}
+{{ if $args.links }}
+    {{ $links = partial "assets/links.html" (dict
+        "page"      $args.page
+        "links"     $args.links
+        "align"     $args.heading.align
+        "justify"   $args.justify
+        "link-type" $args.linkType
+    ) }}
+{{ end }}
+
+{{ $imgArgs := dict
+    "page"    page
+    "icon"    $args.icon
+    "image"   $args.image
+    "anchor"  $args.anchor
+    "mode"    true
+    "sizes"   "20vw"
+    "title"   (T "heroImage")
+    "mode"    $args.mode
+}}
+
 <!-- Main code -->
-<div class="text-{{ $args.heading.align }}{{ with $args.class }} {{ . }}{{ end }} col col-12 col-md-{{ $args.heading.width }}">
+<div class="text-{{ $args.heading.align }}{{ with $args.class }} {{ . }}{{ end }}{{ if lt $width 12 }} col-12 col-{{ $breakpoint.current }}-{{ $width }}{{ end }} py-{{ $padding.y }}">
    {{ if and $preheading (eq $arrangement "first") }}
        <div class="container-fluid">
            <div class="row">
                <div class="col-12 col-{{ $breakpoint.prev }}-12 col-{{ $breakpoint.next }}-2 p-0">
-                    {{ with $preheading }}<p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">{{ . | page.RenderString | safeHTML }}</p>{{ end }}
+                    {{ with $preheading }}
+                        <p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">
+                            {{ . | page.RenderString | safeHTML }}
+                        </p>
+                    {{ end }}
                </div>
                <div class="col-12 col-{{ $breakpoint.prev }}-8 col-{{ $breakpoint.current }}-9 col-{{ $breakpoint.next }}-8 p-0">
-                    {{ with $title }}{{ partial "assets/section-title-header.html" (dict "use-title" $args.useTitle "title" . "headingStyle" $headingStyle "color" $args.color "size" $size) }}{{ end }}
-                    {{ with $args.heading.content }}<div class="{{ $bodyStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
-                    {{ if .links }}{{ partial "assets/links.html" (dict "page" $args.page "links" $args.links "align" $args.heading.align "justify" $args.justify "link-type" $args.type) }}{{ end }}
+                    {{ $header }}
+                    {{ with $args.heading.content }}
+                        <div class="{{ $contentStyle }} pt-{{ $padding.y }}">{{ . | page.RenderString | safeHTML }}</div>
+                    {{ end }}
+                    {{ $links }}
                </div>
                <div class="col-12 col-{{ $breakpoint.prev }}-4 col-{{ $breakpoint.current }}-3 col-{{ $breakpoint.next }}-2 p-0 ps-{{ $breakpoint.prev }}-4">
-                    {{ partial "assets/featured-illustration.html" (dict 
-                        "page"    page
-                        "icon"    $args.icon
-                        "image"   $args.image
-                        "anchor"  $args.anchor
-                        "mode"    true
-                        "sizes"   "20vw"
-                        "wrapper" (printf "col-4 col-%s-12 mx-auto pt-4 pt-%s-0" $breakpoint.prev $breakpoint.prev)
-                        "title"   (T "heroImage")
-                        "mode"    $args.mode
-                    ) }}
+                    {{ $wrapper := (printf "col-4 col-%s-12 mx-auto pt-%d pt-%s-0" $breakpoint.prev $padding.y $breakpoint.prev) }}
+                    {{ partial "assets/featured-illustration.html" (merge $imgArgs (dict "wrapper" $wrapper)) }}
                </div>
            </div>
        </div>
@@ -79,31 +115,29 @@
        <div class="container-fluid">
            <div class="row p-0">
                <div class="col-12 col-{{ $breakpoint.current }}-10 p-0">
-                    {{ with $preheading }}<p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">{{ . | page.RenderString | safeHTML }}</p>{{ end }}
-                    {{ with $title }}{{ partial "assets/section-title-header.html" (dict "use-title" $args.useTitle "title" . "headingStyle" $headingStyle "color" $args.color "size" $size) }}{{ end }}
-                    {{ with $args.heading.content }}<div class="{{ $bodyStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
-                    {{ if .links }}{{ partial "assets/links.html" (dict "page" $args.page "links" $args.links "align" $args.heading.align "justify" $args.justify "link-type" $args.type) }}{{ end }}
+                    {{ with $preheading }}
+                        <p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">
+                            {{ . | page.RenderString | safeHTML }}
+                        </p>
+                    {{ end }}
+                    {{ $header }}
+                    {{ with $args.heading.content }}<div class="{{ $contentStyle }} pt-{{ $padding.y }}">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
+                    {{ $links }}
                </div>
                <div class="col-12 col-{{ $breakpoint.current }}-2 p-0 pt-2 text-center">
-                    {{ partial "assets/featured-illustration.html" (dict 
-                        "page"    page
-                        "icon"    $args.icon
-                        "image"   $args.image
-                        "anchor"  $args.anchor
-                        "mode"    true
-                        "ratio"   $args.ratio
-                        "sizes"   "20vw"
-                        "wrapper" "mx-auto"
-                        "title"   (T "heroImage")
-                        "mode"    $args.mode
-                    ) }}
+                    {{ $wrapper := (printf "col-4 col-%s-12 mx-auto pt-%d pt-%s-0" $breakpoint.prev $padding.y $breakpoint.prev) }}
+                    {{ partial "assets/featured-illustration.html" (merge $imgArgs (dict "ratio" $args.ratio "wrapper" "mx-auto")) }}
                </div>
            </div>
        </div>
    {{ else }}
-        {{ with $preheading }}<p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">{{ . | page.RenderString | safeHTML }}</p>{{ end }}
-        {{ with $title }}{{ partial "assets/section-title-header.html" (dict "use-title" $args.useTitle "title" . "headingStyle" $headingStyle "color" $args.color "size" $size) }}{{ end }}
-        {{ with $args.heading.content }}<div class="{{ $bodyStyle }} pt-4">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
-        {{ if $args.links }}{{ partial "assets/links.html" (dict "page" $args.page "links" $args.links "align" $args.heading.align "justify" $args.justify "link-type" $args.type) }}{{ end }}
+        {{ with $preheading }}
+            <p class="preheading {{ if ne $args.color "body" }}text-{{ $args.color }}{{ else }}text-primary{{ end }}">
+                {{ . | page.RenderString | safeHTML }}
+            </p>
+        {{ end }}
+        {{ $header }}
+        {{ with $args.heading.content }}<div class="{{ $contentStyle }} pt-{{ $padding.y }}">{{ . | page.RenderString | safeHTML }}</div>{{ end }}
+        {{ $links }}
    {{ end }}
 </div>
--- a/layouts/_partials/assets/timeline.html
+++ b/layouts/_partials/assets/timeline.html
@@ -13,7 +13,6 @@
 {{ if or $args.err $args.warnmsg }}
    {{ partial (cond $args.err "utilities/LogErr.html" "utilities/LogWarn.html") (dict 
        "partial" "assets/timeline.html" 
-        "warnid"  "warn-invalid-arguments"
        "msg"     "Invalid arguments"
        "details" ($args.errmsg | append $args.warnmsg)
        "file"    page.File
@@ -28,7 +27,12 @@
 {{- $page := $args.page -}}
 {{- $data := partial "utilities/GetI18nData.html" (dict "page" $page "data" $args.data) }}
 {{ if not $data -}}
-    {{ errorf "Invalid timeline data '%s': %s" $page.File -}}
+    {{ partial "utilities/LogErr.html" (dict 
+        "partial" "assets/timeline.html" 
+        "msg"     "Invalid arguments"
+        "details" (slice (printf "Invalid timeline data '%s'" $args.data))
+        "file"    page.File
+    )}}
    {{ $error = true }}
 {{ end -}}
 {{ $background := partial "utilities/GetBackgroundStyle.html" (dict "background" $args.background) }}
@@ -80,7 +84,10 @@
                    {{ $datestr := (partial "utilities/date.html" (dict "date" $date "format" "long")) -}}
                    <p class="mb-0"><small class="text-body-secondary text-uppercase">{{ $datestr -}}</small></p>
                {{ end }}
-                <p class="mt-3 mb-0">{{ $content | $page.RenderString }}</p>
+                <p class="mt-3 mb-0">
+                    <!-- TODO: $page.RenderString causes an out of bounds error -->
+                    {{ $content | markdownify }}
+                </p>
            </div>
        </div>
    </div>    
@@ -95,8 +102,7 @@
            "use-title"   $args.useTitle
            "size"        $args.size
            "links"       $args.links
-            "type"        (or $args.linkType $args.type)
-            "class"       "pb-4"
+            "link-type"   (or $args.linkType $args.type)
            "arrangement" $arrangement
        ) }}
    {{ end }}
--- a/layouts/_partials/utilities/GetPadding.html
+++ b/layouts/_partials/utilities/GetPadding.html
@@ -0,0 +1,20 @@
+{{- /* Define main padding size */ -}}
+{{- $defaultY := 5 -}}
+{{- $defaultX := 5 -}}
+{{- $permitted := slice 0 1 2 3 4 5 }}
+{{- $paddingX := $defaultX -}}
+{{- if isset site.Params.main.padding "x" }}{{ $paddingX = site.Params.main.padding.x }}{{ end -}}
+{{- $paddingY := $defaultY -}}
+{{- if isset site.Params.main.padding "y" }}{{ $paddingY = site.Params.main.padding.y }}{{ end -}}
+
+{{- if not (in $permitted $paddingX) -}}
+    {{- warnf "layout [_default/baseof.html] - Invalid value for param 'padding.x': %d" $paddingX -}}
+    {{- $paddingX = $defaultX -}}
+{{- end -}}
+
+{{- if not (in $permitted $paddingY) -}}
+    {{- warnf "layout [_default/baseof.html] - Invalid value for param 'padding.y': %d" $paddingY -}}
+    {{- $paddingY = $defaultY -}}
+{{- end -}}
+
+{{- return (dict "x" $paddingX "y" $paddingY) -}}
--- a/layouts/_shortcodes/example-bookshop.html
+++ b/layouts/_shortcodes/example-bookshop.html
@@ -44,9 +44,9 @@
 {{- if eq $lang "bookshop" }}
    {{ $type = "bookshop" }}
    {{ $frontmatter := slice "yml" "yaml" "toml" "json" }}
-    {{ $inputRE := findRESubmatch `\x60\x60\x60(?:yml|yaml|json|toml)(\r\n|\r|\n)([\s\S]*?)\x60\x60\x60` $content 1}}
+    {{ $inputRE := findRESubmatch `\x60\x60\x60(?:yml|yaml|json|toml)(\r\n|\r|\n)([\s\S]*?)\x60\x60\x60` $content 1 }}
    {{ if and $inputRE (eq (len (index $inputRE 0)) 3) }}
-        {{ $lang = trim (index (split $content "\n") 1) "\x60" }}
+        {{ $lang = (trim (index (split $content "\n") 2) "\x60") | default "yml" }}
        {{ $content = index (index $inputRE 0) 2 }}
        {{ $data = index (unmarshal $content) 0 }}
        {{ $component_name := (index $data "_bookshop_name") }}
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
  "name": "@gethinode/hinode",
-  "version": "1.0.0-alpha6",
+  "version": "1.0.0-alpha9",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "@gethinode/hinode",
-      "version": "1.0.0-alpha6",
+      "version": "1.0.0-alpha9",
      "license": "MIT",
      "dependencies": {
        "@fullhuman/postcss-purgecss": "^7.0.2",
@@ -19,7 +19,7 @@
      "devDependencies": {
        "@gethinode/netlify-plugin-dartsass": "^0.3.0",
        "cpy-cli": "^5.0.0",
-        "eslint": "^9.28.0",
+        "eslint": "^9.29.0",
        "markdownlint-cli2": "^0.18.1",
        "neostandard": "^0.12.1",
        "netlify-plugin-hugo-cache-resources": "^0.2.1",
@@ -329,9 +329,9 @@
      }
    },
    "node_modules/@eslint/config-array": {
-      "version": "0.20.0",
-      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.0.tgz",
-      "integrity": "sha512-fxlS1kkIjx8+vy2SjuCB94q3htSNrufYTXubwiBFeaQHbH6Ipi43gFJq2zCMt6PHhImH3Xmr0NksKDvchWlpQQ==",
+      "version": "0.20.1",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.20.1.tgz",
+      "integrity": "sha512-OL0RJzC/CBzli0DrrR31qzj6d6i6Mm3HByuhflhl4LOBiWxN+3i6/t/ZQQNii4tjksXi8r2CRW1wMpWA2ULUEw==",
      "dev": true,
      "license": "Apache-2.0",
      "dependencies": {
@@ -391,9 +391,9 @@
      }
    },
    "node_modules/@eslint/js": {
-      "version": "9.28.0",
-      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.28.0.tgz",
-      "integrity": "sha512-fnqSjGWd/CoIp4EXIxWVK/sHA6DOHN4+8Ix2cX5ycOY7LG0UY8nHCU5pIp2eaE1Mc7Qd8kHspYNzYXT2ojPLzg==",
+      "version": "9.29.0",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.29.0.tgz",
+      "integrity": "sha512-3PIF4cBw/y+1u2EazflInpV+lYsSG0aByVIQzAgb1m1MhHFSbqTyNqtBKHgWf/9Ykud+DhILS9EGkmekVhbKoQ==",
      "dev": true,
      "license": "MIT",
      "engines": {
@@ -1187,10 +1187,11 @@
      }
    },
    "node_modules/acorn": {
-      "version": "8.14.0",
-      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.14.0.tgz",
-      "integrity": "sha512-cl669nCJTZBsL97OF4kUQm5g5hC2uihk0NxY3WENAC0TYdILVkAyHymAntgxGkl7K+t0cXIrH5siy5S4XkFycA==",
+      "version": "8.15.0",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
+      "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
      "dev": true,
+      "license": "MIT",
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -2874,19 +2875,19 @@
      }
    },
    "node_modules/eslint": {
-      "version": "9.28.0",
-      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.28.0.tgz",
-      "integrity": "sha512-ocgh41VhRlf9+fVpe7QKzwLj9c92fDiqOj8Y3Sd4/ZmVA4Btx4PlUYPq4pp9JDyupkf1upbEXecxL2mwNV7jPQ==",
+      "version": "9.29.0",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.29.0.tgz",
+      "integrity": "sha512-GsGizj2Y1rCWDu6XoEekL3RLilp0voSePurjZIkxL3wlm5o5EC9VpgaP7lrCvjnkuLvzFBQWB3vWB3K5KQTveQ==",
      "dev": true,
      "license": "MIT",
      "dependencies": {
        "@eslint-community/eslint-utils": "^4.2.0",
        "@eslint-community/regexpp": "^4.12.1",
-        "@eslint/config-array": "^0.20.0",
+        "@eslint/config-array": "^0.20.1",
        "@eslint/config-helpers": "^0.2.1",
        "@eslint/core": "^0.14.0",
        "@eslint/eslintrc": "^3.3.1",
-        "@eslint/js": "9.28.0",
+        "@eslint/js": "9.29.0",
        "@eslint/plugin-kit": "^0.3.1",
        "@humanfs/node": "^0.16.6",
        "@humanwhocodes/module-importer": "^1.0.1",
@@ -2898,9 +2899,9 @@
        "cross-spawn": "^7.0.6",
        "debug": "^4.3.2",
        "escape-string-regexp": "^4.0.0",
-        "eslint-scope": "^8.3.0",
-        "eslint-visitor-keys": "^4.2.0",
-        "espree": "^10.3.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
        "esquery": "^1.5.0",
        "esutils": "^2.0.2",
        "fast-deep-equal": "^3.1.3",
@@ -3230,9 +3231,9 @@
      }
    },
    "node_modules/eslint-scope": {
-      "version": "8.3.0",
-      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.3.0.tgz",
-      "integrity": "sha512-pUNxi75F8MJ/GdeKtVLSbYg4ZI34J6C0C7sbL4YOp2exGwen7ZsuBqKzUhXd0qMQ362yET3z+uPwKeg/0C2XCQ==",
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
      "dev": true,
      "license": "BSD-2-Clause",
      "dependencies": {
@@ -3259,10 +3260,11 @@
      }
    },
    "node_modules/eslint/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
      "dev": true,
+      "license": "Apache-2.0",
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      },
@@ -3271,14 +3273,15 @@
      }
    },
    "node_modules/espree": {
-      "version": "10.3.0",
-      "resolved": "https://registry.npmjs.org/espree/-/espree-10.3.0.tgz",
-      "integrity": "sha512-0QYC8b24HWY8zjRnDTL6RiHfDbAWn63qb4LMj1Z4b076A4une81+z03Kg7l7mn/48PUTqoLptSXez8oknU8Clg==",
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
      "dev": true,
+      "license": "BSD-2-Clause",
      "dependencies": {
-        "acorn": "^8.14.0",
+        "acorn": "^8.15.0",
        "acorn-jsx": "^5.3.2",
-        "eslint-visitor-keys": "^4.2.0"
+        "eslint-visitor-keys": "^4.2.1"
      },
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
@@ -3288,10 +3291,11 @@
      }
    },
    "node_modules/espree/node_modules/eslint-visitor-keys": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz",
-      "integrity": "sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw==",
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
      "dev": true,
+      "license": "Apache-2.0",
      "engines": {
        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
      },
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
  "name": "@gethinode/hinode",
-  "version": "1.0.0-alpha6",
+  "version": "1.0.0-alpha9",
  "description": "Hinode is a clean documentation and blog theme for Hugo, an open-source static site generator",
  "keywords": [
    "hugo",
@@ -79,7 +79,7 @@
  "devDependencies": {
    "@gethinode/netlify-plugin-dartsass": "^0.3.0",
    "cpy-cli": "^5.0.0",
-    "eslint": "^9.28.0",
+    "eslint": "^9.29.0",
    "markdownlint-cli2": "^0.18.1",
    "neostandard": "^0.12.1",
    "netlify-plugin-hugo-cache-resources": "^0.2.1",
Author	SHA1	Message	Date
Mark Dumay	805350c7b7	Merge pull request #1463 from gethinode/develop Fix highlight of example bookshop input	2025-06-17 19:11:18 +02:00
Mark Dumay	9900dce30d	Merge branch 'main' into develop	2025-06-17 19:00:58 +02:00
Mark Dumay	d40927f97a	Fix highlight of example bookshop input	2025-06-17 19:00:28 +02:00
Mark Dumay	8c5e032514	Merge pull request #1462 from gethinode/develop Make padding globally configurable	2025-06-17 18:40:21 +02:00
Mark Dumay	47a410f333	Merge branch 'main' into develop	2025-06-17 17:30:29 +02:00
Mark Dumay	fe0d3553fb	Make padding globally configurable	2025-06-17 17:29:56 +02:00
Mark Dumay	05af8f72a3	Merge pull request #1461 from gethinode/develop Refactor bookshop components	2025-06-17 06:28:15 +02:00
Mark Dumay	977c82b10d	Fix separator padding and width	2025-06-17 06:17:31 +02:00
Mark Dumay	be92798dec	Merge branch 'main' into develop	2025-06-17 05:54:59 +02:00
Mark Dumay	db9b96797a	Bump package release	2025-06-17 05:54:11 +02:00
Mark Dumay	d41d58cf5d	Refactor bookshop components	2025-06-17 05:53:33 +02:00
github-actions[bot]	d3fe893287	Merge pull request #1460 from gethinode/dependabot/npm_and_yarn/eslint-9.29.0 Bump eslint from 9.28.0 to 9.29.0	2025-06-16 14:13:36 +00:00
dependabot[bot]	e64a08c339	Bump eslint from 9.28.0 to 9.29.0 Bumps [eslint](https://github.com/eslint/eslint) from 9.28.0 to 9.29.0. - [Release notes](https://github.com/eslint/eslint/releases) - [Changelog](https://github.com/eslint/eslint/blob/main/CHANGELOG.md) - [Commits](https://github.com/eslint/eslint/compare/v9.28.0...v9.29.0) --- updated-dependencies: - dependency-name: eslint dependency-version: 9.29.0 dependency-type: direct:development update-type: version-update:semver-minor ... Signed-off-by: dependabot[bot] <support@github.com>	2025-06-16 14:05:37 +00:00
Mark Dumay	900fce4169	Merge pull request #1459 from gethinode/develop Refine content blocks	2025-06-11 16:59:46 +02:00
Mark Dumay	c82f9a41d4	Merge branch 'main' into develop	2025-06-11 16:51:36 +02:00
Mark Dumay	ea83db2eeb	Fix image mode rendering	2025-06-11 16:48:35 +02:00
Mark Dumay	d37c2f6517	Add cards content block	2025-06-11 16:40:16 +02:00
Mark Dumay	68a4859638	Add articles example	2025-06-11 16:39:41 +02:00
Mark Dumay	81494cb1ed	Bump package release	2025-06-11 05:49:02 +02:00
Mark Dumay	8307e2ab57	FIx timeline bug using workaround	2025-06-11 05:48:08 +02:00