cta

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
 

assets/sass/_theme/blocks/call_to_action.sass

@@ -107,7 +107,7 @@
                             &:first-child
                                 margin-top: 0
                         a + a
-                            margin-top: $spacing0
+                            margin-top: $spacing1
                 @include media-breakpoint-down(lg)
                     > div
                         h2, h3, .description

assets/sass/_theme/blocks/testimonials.sass

 .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

assets/sass/_theme/design-system/typography.sass

@@ -102,6 +102,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

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