diff --git a/assets/sass/landing.scss b/assets/sass/landing.scss index 6c9c72c..6304526 100644 --- a/assets/sass/landing.scss +++ b/assets/sass/landing.scss @@ -106,8 +106,46 @@ } } + @keyframes compare-anim { + 0% { + clip-path: inset(100% 100% 100% 0%); + } + 100% { + clip-path: inset(100% 100% 100% 100%); + } + } + .compare-items-dynamic { + .compare-duet { + overflow: hidden; + position: relative; + + .compare-hidden { + position: absolute; + top: 0; + left: 0; + overflow: hidden; + clip-path: inset(100% 100% 100% 0%); + } + } + + .compare-duet:hover { + .compare-hidden { + animation: compare-anim 2s cubic-bezier(.86,0,.07,1); + animation-fill-mode: forwards; + } + } + } } +@media (max-width: $sm-breakpoint) { + .compare-section { + .compare-items { + grid-template-columns: 1fr; + } + } +} + + .history-summary { display: grid; grid-template-columns: 3fr 1fr; @@ -125,3 +163,4 @@ border-bottom: 1px solid rgba(1, 1, 1, 0.2); } } + diff --git a/layouts/landing-matthieu/list.html b/layouts/landing-matthieu/list.html index 90d0754..1a56637 100644 --- a/layouts/landing-matthieu/list.html +++ b/layouts/landing-matthieu/list.html @@ -61,25 +61,38 @@

Un petit bout de palestine en Normandie...

-
-
+
+
- {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }} - +
+
+ {{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }} + +
- {{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }} - +
+ {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }} + +
+
Comparaison crypte vers l'est
-
+
- {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }} - +
+
+ {{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }} + +
- {{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }} - +
+ {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }} + +
+ +
Comparaison crypte vers l'ouest