Corrige l'alignement de la section des kudos

2 files changed, 55 insertions, 48 deletions

diff --git a/src/css/_contenu.scss b/src/css/_contenu.scss
index 046c723..97c3190 100755
--- a/src/css/_contenu.scss
+++ b/src/css/_contenu.scss
@@ -311,6 +311,7 @@ article {
 section.likes {
   display: flex;
   justify-content: center;
+  margin: 3rem 0 1rem 0;
 
   @mixin lightMode {
     .likesBox {
@@ -364,46 +365,50 @@ section.likes {
     }
 
 
-    .icon {
-      fill: transparent;
-      stroke: pink;
-      stroke-width: 20;
-      cursor: pointer;
-      position: relative;
-      svg {
-        overflow: visible;
-        width: 10rem;
-      }
+    .layout {
+      display: flex;
+      align-items: center;
+      .icon {
+        fill: transparent;
+        stroke: pink;
+        stroke-width: 20;
+        cursor: pointer;
+        position: relative;
+        svg {
+          overflow: visible;
+          width: 10rem;
+        }
 
-      path {
-        stroke-dashoffset: 0;
-        stroke-dasharray: 1550;
-        transform-origin: center;
-      }
+        path {
+          stroke-dashoffset: 0;
+          stroke-dasharray: 1550;
+          transform-origin: center;
+        }
 
-      .hear-main {
-        z-index: 2;
-      }
-      .heart-background {
-        position: absolute;
-        left: 0;
-        right: 0;
-        z-index: 1;
-        stroke: none;
-      }
-      .heart-main path.anim {
-        animation: stroke-animation 2s ease-in-out forwards;
-      }
+        .hear-main {
+          z-index: 2;
+        }
+        .heart-background {
+          position: absolute;
+          left: 0;
+          right: 0;
+          z-index: 1;
+          stroke: none;
+        }
+        .heart-main path.anim {
+          animation: stroke-animation 1.5s ease-in-out forwards;
+        }
 
-      .heart-main ~ .heart-background path.anim-click {
-        animation: fade-animation 0.35s ease-in-out forwards;
-      }
-      .nbLikes {
-        font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif;
-        text-align: center;
-        position: relative;
-        top: -10px;
-        height: 0;
+        .heart-main ~ .heart-background path.anim-click {
+          animation: fade-animation 0.35s ease-in-out forwards;
+        }
+        .nbLikes {
+          font-family: Source Sans Pro,Segoe UI,Trebuchet MS,Helvetica,Helvetica Neue,Arial,sans-serif;
+          text-align: center;
+          position: relative;
+          top: -10px;
+          height: 0;
+        }
       }
     }
 
@@ -412,11 +417,11 @@ section.likes {
         fill: transparent;
         transform: scale(1);
       }
-      50% {
+      30% {
         fill: pink;
-        transform: scale(1.1);
+        transform: scale(1.25);
       }
-      70% {
+      50% {
         transform: scale(1);
       }
       100% {
diff --git a/src/templates/likes.tmpl b/src/templates/likes.tmpl
index 925d0c4..c81d936 100644
--- a/src/templates/likes.tmpl
+++ b/src/templates/likes.tmpl
@@ -1,13 +1,15 @@
 <section class="likes" style="display: none">
     <span class="likesBox">
-    <div class="icon">
-      <svg class="heart-main" viewBox="0 0 512 512" title="heart" z-index="1" height="100">
-        <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" class=""></path>
-      </svg>
-      <svg class="heart-background" viewBox="0 0 512 512" title="heart" z-index="1" height="100">
-        <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" class=""></path>
-      </svg>
-      <div class="nbLikes"><div></div></div>
+    <div class="layout">
+      <div class="icon">
+        <svg class="heart-main" viewBox="0 0 512 512" title="heart" z-index="1" height="100">
+          <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" class=""></path>
+        </svg>
+        <svg class="heart-background" viewBox="0 0 512 512" title="heart" z-index="1" height="100">
+          <path d="M462.3 62.6C407.5 15.9 326 24.3 275.7 76.2L256 96.5l-19.7-20.3C186.1 24.3 104.5 15.9 49.7 62.6c-62.8 53.6-66.1 149.8-9.9 207.9l193.5 199.8c12.5 12.9 32.8 12.9 45.3 0l193.5-199.8c56.3-58.1 53-154.3-9.8-207.9z" class=""></path>
+        </svg>
+        <div class="nbLikes"><div></div></div>
+      </div>
     </div>
     <div>
       <span class="likesTitle">{{ like_title }}</span>