diff --git a/assets/sass/_theme/_configuration.sass b/assets/sass/_theme/_configuration.sass
index 8421380c6a3beafc78df616a5c63b93803bd721e..e5f4550a0e74ae3a32f16aef18217f525d6b3df8 100644
--- a/assets/sass/_theme/_configuration.sass
+++ b/assets/sass/_theme/_configuration.sass
@@ -109,6 +109,7 @@ $quote-size-short: px2rem(60) !default
$quote-size-long: px2rem(40) !default
$quote-line-height: 120% !default
$quote-weight: normal !default
+$quote-style: italic !default
// Buttons
$btn-font-size-md: px2rem(18) !default // TODO
@@ -261,8 +262,10 @@ $block-testimonials-xl-font-size: $quote-size-short !default
$block-testimonials-xl-line-height: $quote-line-height !default
$block-testimonials-xl-font-size-long-text: $quote-size-long !default
$block-testimonials-xl-line-height-long-text: $quote-line-height !default
+$block-testimonials-color: $color-accent !default
$block-testimonials-font-size: $quote-size-md !default
$block-testimonials-line-height: $quote-line-height !default
+$block-testimonials-style: $quote-style !default
$block-testimonials-pagination-background: $color-border !default
$block-testimonials-pagination-progress-background: $color-text !default
diff --git a/assets/sass/_theme/blocks/call_to_action.sass b/assets/sass/_theme/blocks/call_to_action.sass
index 438e9546963be61183bec933996ccee6de5b87ab..c5695a2b0a5d640f642985aac41f8dce37f31406 100644
--- a/assets/sass/_theme/blocks/call_to_action.sass
+++ b/assets/sass/_theme/blocks/call_to_action.sass
@@ -5,7 +5,7 @@
margin-bottom: $spacing0
.call_to_action
color: $block-call-to-action-color
- .description
+ .description
p
@extend .h2
.actions
@@ -66,9 +66,9 @@
&--with-image
picture
order: 1
- padding-left: $grid-gutter
- padding-right: $grid-gutter
+ margin-left: $grid-gutter
position: relative
+ width: 33.3333%
img
margin-bottom: calc(-#{$grid-gutter} + -#{$spacing1})
> div
@@ -104,8 +104,10 @@
margin-top: 0
a
margin-right: 0
+ &:first-child
+ margin-top: 0
a + a
- margin-top: $spacing0
+ margin-top: $spacing1
@include media-breakpoint-down(lg)
> div
h2, h3, .description
diff --git a/assets/sass/_theme/blocks/testimonials.sass b/assets/sass/_theme/blocks/testimonials.sass
index 9dbd81fe1ff7ba8ebe3b91af5e037f4ee3064bcf..a8a45beaed0fd51cc41830ddf9ee781aa2b89817 100644
--- a/assets/sass/_theme/blocks/testimonials.sass
+++ b/assets/sass/_theme/blocks/testimonials.sass
@@ -1,10 +1,11 @@
.block-testimonials
blockquote
@extend .blockquote
- padding-top: calc(#{$block-testimonials-font-size} * 2)
p
font-size: $block-testimonials-font-size
line-height: $block-testimonials-line-height
+ font-style: $block-testimonials-style
+ color: $block-testimonials-color
@include media-breakpoint-up(md)
font-size: px2rem(30) // TODO : on peut peut-être la sortir avec du RFS ?
@include media-breakpoint-up(xl)
@@ -15,33 +16,27 @@
@include media-breakpoint-up(xl)
font-size: $block-testimonials-xl-font-size-long-text
line-height: $block-testimonials-xl-line-height-long-text
- &::before
- content: "“"
- font-size: calc(#{$block-testimonials-font-size} * 3)
- line-height: 1
- position: absolute
- transform: translateY(-50%)
+ // &::before
+ // content: "“"
+ // font-size: calc(#{$block-testimonials-font-size} * 3)
+ // line-height: 1
+ // position: absolute
+ // transform: translateY(-50%)
// TODO : ajuster en fonction de la typo
figure
- font-size: px2rem(16)
margin-bottom: 0
-
figcaption
align-items: center
display: flex
- .avatar
- flex-shrink: 0
- margin-right: $grid-gutter
-
+ margin-top: $spacing1
.avatar
- max-width: 96px
- @include media-breakpoint-up(lg)
- max-width: 136px
- @include media-breakpoint-up(xl)
- max-width: 166px
+ flex-shrink: 0
+ width: calc(#{col(1, 8)} + #{$grid-gutter} / 2)
+ margin-right: calc(#{$grid-gutter} / 2)
+ margin-bottom: 0
@include media-breakpoint-up(xxl)
- max-width: 192px
+ width: calc(#{col(1, 7)} + #{$grid-gutter} / 2)
.splide
display: flex
@@ -89,10 +84,25 @@
i
background-color: $block-testimonials-pagination-progress-background
width: 0
- @include in-page-without-sidebar
- .testimonials
- @include media-breakpoint-up(md)
- padding-right: offset(4)
+ @include media-breakpoint-up(md)
+ @include in-page-without-sidebar
+ figure
+ padding-right: offset(1)
+ &.with-picture
+ position: relative
+ padding-left: offset(2)
+ figcaption
+ display: block
+ margin-top: $spacing0
+ .avatar
+ position: absolute
+ left: 0
+ top: 0
+ width: col(2)
+
+
+
+
// TODO : en discuter en créa
// figure
diff --git a/assets/sass/_theme/design-system/typography.sass b/assets/sass/_theme/design-system/typography.sass
index 71220f34c3b0bd89d154274fb8f48c72821c7250..05c68291375cae8647c214b5ce58aaa25cd7ecd1 100644
--- a/assets/sass/_theme/design-system/typography.sass
+++ b/assets/sass/_theme/design-system/typography.sass
@@ -108,6 +108,14 @@ p
line-height: $meta-line-height
@include media-breakpoint-up(md)
font-size: $meta-size-md
+
+.signature
+ font-family: $signature-font-family
+ font-size: $signature-size
+ font-weight: $signature-weight
+ line-height: $signature-line-height
+ @include media-breakpoint-up(md)
+ font-size: $signature-size-md
small, .small
font-family: $small-font-family
diff --git a/layouts/partials/blocks/templates/testimonials.html b/layouts/partials/blocks/templates/testimonials.html
index a1c82e541977af08ce1855a3fab5e32534bd7734..9c0b57e9581dc3fc64272e423e56140375f5f52a 100644
--- a/layouts/partials/blocks/templates/testimonials.html
+++ b/layouts/partials/blocks/templates/testimonials.html
@@ -20,7 +20,6 @@
{{ end -}}
<div class="testimonials">
-
{{- if $is_carousel }}
<div class="splide" data-splide='{"arrows":false,"autoplay":true,"pauseOnHover":false,"pauseOnFocus":false,"type":"loop","autoHeight":true}'>
<div class="splide__slider">
@@ -30,7 +29,7 @@
{{ range .testimonials }}
{{ $is_long := gt (len .text) 150 }}
- <figure{{ if $is_carousel }} class="splide__slide"{{ end }}>
+ <figure class="{{ if $is_carousel }}splide__slide{{ end }} {{ if .photo }}with-picture{{ end }}">
<blockquote {{- if $is_long }} class="is-long" {{- end }}>
<p>{{- partial "PrepareHTML" .text -}}</p>
</blockquote>
@@ -49,12 +48,17 @@
</div>
{{- end }}
{{ if or .author .job -}}
- <span>
+ <p>
{{- if .author -}}
- <b>{{ partial "PrepareHTML" .author }}</b><br>
+ <span class="signature">{{ partial "PrepareHTML" .author }}</span>
+ {{- end }}
+ {{- if and .author .job -}}
+ <br>
+ {{- end -}}
+ {{- if .job -}}
+ <span class="meta">{{- partial "PrepareHTML" .job -}}</span>
{{- end }}
- {{- partial "PrepareHTML" .job -}}
- </span>
+ </p>
{{- end }}
</figcaption>
{{ end }}