From abfd55d14e8a47391b88f80e85ccdb68714649f1 Mon Sep 17 00:00:00 2001
From: Matthieu Bessat <mail@matthieubessat.fr>
Date: Mon, 19 Jun 2023 00:20:33 +0200
Subject: [PATCH] fix(landing/compare): leave hover animation

---
 assets/sass/landing.scss           | 11 +++++++----
 layouts/landing-matthieu/list.html |  4 ++--
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/assets/sass/landing.scss b/assets/sass/landing.scss
index 6304526..54d90dc 100644
--- a/assets/sass/landing.scss
+++ b/assets/sass/landing.scss
@@ -108,14 +108,13 @@
 
     @keyframes compare-anim {
         0% {
-            clip-path: inset(100% 100% 100% 0%);
         }
         100% {
-            clip-path: inset(100% 100% 100% 100%);
         }
     }
     .compare-items-dynamic {
         .compare-duet {
+            border-radius: 4px;
             overflow: hidden;
             position: relative;
 
@@ -126,12 +125,16 @@
                 overflow: hidden;
                 clip-path: inset(100% 100% 100% 0%);
             }
+            .compare-hidden {
+                clip-path: inset(100% 100% 100% 0%);
+                transition: clip-path 2s cubic-bezier(.86,0,.07,1);
+                animation-fill-mode: forwards;
+            }
         }
 
         .compare-duet:hover {
             .compare-hidden {
-                animation: compare-anim 2s cubic-bezier(.86,0,.07,1);
-                animation-fill-mode: forwards;
+                clip-path: inset(100% 100% 100% 100%);
             }
         }
     }
diff --git a/layouts/landing-matthieu/list.html b/layouts/landing-matthieu/list.html
index 1a56637..02ec4b7 100644
--- a/layouts/landing-matthieu/list.html
+++ b/layouts/landing-matthieu/list.html
@@ -76,7 +76,7 @@
                                 </div>
                             </div>
 
-                            <figcaption>Comparaison crypte vers l'est</figcaption>
+                            <figcaption>Comparaison de la crypte vers l'est</figcaption>
                         </figure>
                     </div>
                     <div class="compare-item compare-west">
@@ -93,7 +93,7 @@
                                 </div>
 
                             </div>
-                            <figcaption>Comparaison crypte vers l'ouest</figcaption>
+                            <figcaption>Comparaison de la crypte vers l'ouest</figcaption>
                         </figure>
                         </figure>
                     </div>