diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index f100df545a0624b3059670ed96dce049ddb5539a..030967901dbd19a46277f4530b8639fe42d8ae2c 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -249,6 +249,12 @@ $block-call-to-action-color: $color-background !default
$block-call-to-action-button-background: $color-background !default
$block-call-to-action-button-color: $color-text !default
+// Block chapter
+$block-chapter-layout-accent-background: $color-accent !default
+$block-chapter-layout-accent-color: white !default
+$block-chapter-layout-alt-background: $color-background-alt !default
+$block-chapter-layout-alt-color: black !default
+
// Block definitions
$block-definition-border-color: $color-border !default
$block-definition-border-color-hovered: $color-accent !default
diff --git a/assets/sass/_theme/blocks/base.sass b/assets/sass/_theme/blocks/base.sass
index 55086550fbb39c9065af9cdbf9c4a680e1f1bc1c..0ad079301f75432a4e5f6a8c8e48d7e2140951b9 100644
--- a/assets/sass/_theme/blocks/base.sass
+++ b/assets/sass/_theme/blocks/base.sass
@@ -1,12 +1,11 @@
.blocks
.block
- margin-top: $spacing4
- &:first-of-type
- margin-top: 0
+ padding-top: $spacing2
+ padding-bottom: $spacing2
// &-with-title
// margin-top: $spacing4
&:last-of-type
- padding-bottom: $spacing4
+ padding-bottom: $spacing2
.block
// Mobile & full-width
diff --git a/assets/sass/_theme/blocks/chapter.sass b/assets/sass/_theme/blocks/chapter.sass
index d64c33776a094a77f97828fe54d3de03c14992b3..371aecf781a1500179aa2c6c440862998adf42ec 100644
--- a/assets/sass/_theme/blocks/chapter.sass
+++ b/assets/sass/_theme/blocks/chapter.sass
@@ -10,22 +10,45 @@
figcaption
@include small
margin-top: 0.5rem
- .block-content
+ .chapter
flex-direction: column
display: flex
- .chapter
+ .text
order: 2
figure
margin-bottom: $spacing1
+ &--alt_background
+ background: $block-chapter-layout-alt-background
+ .block-content
+ color: $block-chapter-layout-alt-color
+ a
+ @include link($block-chapter-layout-accent-color)
+ &--accent_background
+ background: $block-chapter-layout-accent-background
+ .block-content
+ color: $block-chapter-layout-accent-color
+ a
+ @include link($block-chapter-layout-accent-color)
+
@include media-breakpoint-up(desktop)
@include in-page-with-sidebar
- picture
- margin-top: $spacing1
+ &--alt_background, &--accent_background
+ background: none
+ .chapter .text
+ padding: $grid-gutter col(1, 8)
+ figcaption
+ padding: 0 col(1, 8)
+ &--alt_background
+ .chapter
+ background: $block-chapter-layout-alt-background
+ &--accent_background
+ .chapter
+ background: $block-chapter-layout-accent-background
@include in-page-without-sidebar
- .block-content
+ .chapter
flex-direction: row
align-items: center
- .chapter
+ .text
order: 0
width: col(7)
figure
@@ -34,4 +57,4 @@
margin-bottom: 0
@include in-page-with-or-without-sidebar
h2, h3
- @include h2
\ No newline at end of file
+ @include h2
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 90b4a1bbdeef7107df4ab0b8e3ca75f6fb0d0c0e..d7b8823d115ed986ef0cc55c743c4af130534ba8 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -171,6 +171,10 @@ small, .small
.rich-text
@include rich-text
+figcaption
+ a
+ color: inherit
+
@mixin inherit-text
font-family: inherit
font-weight: inherit
diff --git a/layouts/partials/blocks/templates/chapter.html b/layouts/partials/blocks/templates/chapter.html
index 61014c58a94364bf5d65dc0aa27fe8d06a475621..b8075a6f16055b4401f3b5e98036e9ded106051d 100644
--- a/layouts/partials/blocks/templates/chapter.html
+++ b/layouts/partials/blocks/templates/chapter.html
@@ -1,40 +1,45 @@
{{- $context := .context -}}
{{- $position := .block.position -}}
{{- $title := .block.title -}}
+{{- $layout := .block.data.layout | default "no_background" -}}
{{- $class := "block block-chapter" -}}
{{- with .block.data -}}
{{ if .image }}
{{- $class = printf "%s block-chapter--with-image" $class -}}
{{ end }}
+ {{- $layout_class := printf "block-chapter--%s" $layout -}}
+ {{- $class = printf "%s %s" $class $layout_class -}}
+
<section class="{{ $class }}{{ if $title }} block-with-title{{ end }}" id="block-{{ $position }}">
<div class="container">
<div class="block-content">
-
+
<div class="chapter">
- {{ if $title -}}
- <div class="top">
- {{ partial "blocks/title" (dict
- "title" $title
- "context" $context
- ) }}
+ <div class="text">
+ {{ if $title -}}
+ <div class="top">
+ {{ partial "blocks/title" (dict
+ "title" $title
+ "context" $context
+ ) }}
+ </div>
+ {{ end -}}
+ {{ if (partial "GetTextFromHTML" .text) -}}
+ <div class="rich-text">
+ {{ partial "PrepareHTML" .text }}
</div>
- {{ end -}}
- {{ if (partial "GetTextFromHTML" .text) -}}
- <div class="rich-text">
- {{ partial "PrepareHTML" .text }}
+ {{ end -}}
+ {{ if (partial "GetTextFromHTML" .notes) }}
+ <div class="notes">
+ {{ partial "PrepareHTML" .notes }}
+ </div>
+ {{ end -}}
</div>
- {{ end -}}
- {{ if (partial "GetTextFromHTML" .notes) }}
- <div class="notes">
- {{ partial "PrepareHTML" .notes }}
- </div>
- {{ end -}}
- </div>
- {{ with .image }}
+ {{ if .image }}
<figure>
{{ partial "commons/image.html"
(dict
- "image" .
+ "image" .image
"mobile" "350x350"
"tablet" "450x450"
"desktop" "1280x1280"
@@ -44,6 +49,7 @@
{{ end }}
</figure>
{{ end -}}
+ </div>
</div>
</div>
</section>