Gestion de la taille des icônes png dans les blocs key_figures et features (#474)

Co-authored-by: Alexis BENOIT <alex@noesya.coop>

assets/sass/_theme/blocks/features.sass

@@ -17,7 +17,14 @@
                 @include meta
                 margin-top: $spacing-2
                 text-align: right
-
+            picture.is-png
+                display: block
+                padding-top: $spacing-3
+                img
+                    margin: initial
+                    max-width: $block-features-icon-max-width
+                @include media-breakpoint-down(desktop)
+                    margin-bottom: $spacing-2
     @include in-page-with-sidebar
         li
             flex-direction: row
@@ -25,6 +32,9 @@
                 width: columns(2)
                 flex-shrink: 0
                 margin-right: var(--grid-gutter)
+                picture.is-png
+                    img
+                        margin: auto
 
     @include in-page-without-sidebar
         .top

assets/sass/_theme/blocks/key_figures.sass

@@ -31,6 +31,9 @@
                 display: block
                 margin-bottom: $spacing-2
                 max-width: $block-key_figures-image-max-width
+            picture.is-png 
+                img
+                    max-width: $block-key_figures-icon-max-width
             @include media-breakpoint-up(desktop)
                 font-size: $block-key_figures-font-size-desktop
                 strong

assets/sass/_theme/configuration/blocks.sass

@@ -79,6 +79,7 @@ $block-key_figures-number-font-family: $heading-font-family !default
 $block-key_figures-unit-font-weight: normal !default
 $block-key_figures-number-font-weight: bold !default
 $block-key_figures-image-max-width: $spacing-6 !default
+$block-key_figures-icon-max-width: pxToRem(60) !default
 
 $block-key_figures-font-size: pxToRem(16) !default
 $block-key_figures-number-font-size: pxToRem(32) !default
@@ -110,4 +111,7 @@ $block-video-background: var(--color-background-alt) !default
 $block-links-card-background: var(--color-background-alt) !default
 $block-links-card-color: var(--color-text) !default
 $block-links-card-hover-background: var(--color-accent) !default
-$block-links-card-hover-color: var(--color-background) !default
\ No newline at end of file
+$block-links-card-hover-color: var(--color-background) !default
+
+// Bloc fonctionnalités
+$block-features-icon-max-width: pxToRem(80) !default
\ No newline at end of file

layouts/partials/blocks/templates/key_figures.html

@@ -20,7 +20,6 @@
           {{ end }}
           <ul class="{{ $list_class }}">
             {{- range .figures }}
-              
               <li>
                 <dl>
                   <dt>

layouts/partials/commons/image.html

@@ -24,10 +24,18 @@
     {{- if .crop -}}
       {{- $crop = true -}}
     {{- end -}}
+    {{ $image_class := "" }}
+    {{ $is_png := strings.HasSuffix $image.name "png" }}
     {{ $is_svg := strings.HasSuffix $image.name "svg" }}
-    <picture {{ if $is_svg }}class="is-svg"{{ end }}>
+    {{ if $is_png }}
+      {{ $image_class = "is-png" }}
+    {{ else if $is_svg }}
+      {{ $image_class = "is-svg" }}
+    {{ end }}
 
-      {{- if strings.HasSuffix $image.name "svg" -}}
+    <picture {{ with $image_class -}} class="{{ . }}" {{- end }}>
+
+      {{- if $is_svg -}}
 
         <img src="{{ partial "GetImageUrl" (dict "url" $url) }}"
             alt="{{ chomp (plainify $alt) }}"