Compare commits
No commits in common. "2ee7f2732af8aecb86042a1e7a906b74466fea8f" and "9c655506054926fbbfc356141a9309732175aab5" have entirely different histories.
2ee7f2732a
...
9c65550605
2 changed files with 11 additions and 63 deletions
|
@ -106,46 +106,8 @@
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@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;
|
||||||
grid-template-columns: 3fr 1fr;
|
grid-template-columns: 3fr 1fr;
|
||||||
|
@ -163,4 +125,3 @@
|
||||||
border-bottom: 1px solid rgba(1, 1, 1, 0.2);
|
border-bottom: 1px solid rgba(1, 1, 1, 0.2);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue