Compare commits

..

No commits in common. "2ee7f2732af8aecb86042a1e7a906b74466fea8f" and "9c655506054926fbbfc356141a9309732175aab5" have entirely different histories.

2 changed files with 11 additions and 63 deletions

View file

@ -106,45 +106,7 @@
} }
} }
@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 { .history-summary {
display: grid; display: grid;
@ -163,4 +125,3 @@
border-bottom: 1px solid rgba(1, 1, 1, 0.2); border-bottom: 1px solid rgba(1, 1, 1, 0.2);
} }
} }

View file

@ -61,38 +61,25 @@
<section class="compare-section"> <section class="compare-section">
<div class="page-container"> <div class="page-container">
<h2>Un petit bout de palestine en Normandie...</h2> <h2>Un petit bout de palestine en Normandie...</h2>
<div class="compare-items compare-items-dynamic"> <div class="compare-items">
<div class="compare-item compare-east"> <div class="compare-item">
<figure> <figure>
<div class="compare-duet">
<div class="compare-hidden">
{{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
<div class="compare-shown">
{{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }} {{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" /> <img class="compare-aubevoye" src="{{ $image.RelPermalink }}" />
</div>
</div> {{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
<img class="compare-judee" src="{{ $image.RelPermalink }}" />
<figcaption>Comparaison crypte vers l'est</figcaption> <figcaption>Comparaison crypte vers l'est</figcaption>
</figure> </figure>
</div> </div>
<div class="compare-item compare-west"> <div class="compare-item">
<figure> <figure>
<div class="compare-duet">
<div class="compare-hidden">
{{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" />
</div>
<div class="compare-shown">
{{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }} {{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
<img class="" src="{{ $image.RelPermalink }}" /> <img class="compare-aubevoye" src="{{ $image.RelPermalink }}" />
</div>
</div> {{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
<img class="compare-judee" src="{{ $image.RelPermalink }}" />
<figcaption>Comparaison crypte vers l'ouest</figcaption> <figcaption>Comparaison crypte vers l'ouest</figcaption>
</figure> </figure>
</figure> </figure>