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 {
|
||||
display: grid;
|
||||
grid-template-columns: 3fr 1fr;
|
||||
|
@ -163,4 +125,3 @@
|
|||
border-bottom: 1px solid rgba(1, 1, 1, 0.2);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
@ -61,38 +61,25 @@
|
|||
<section class="compare-section">
|
||||
<div class="page-container">
|
||||
<h2>Un petit bout de palestine en Normandie...</h2>
|
||||
<div class="compare-items compare-items-dynamic">
|
||||
<div class="compare-item compare-east">
|
||||
<div class="compare-items">
|
||||
<div class="compare-item">
|
||||
<figure>
|
||||
<div class="compare-duet">
|
||||
<div class="compare-hidden">
|
||||
{{ $image := resources.Get "images/crypte_comparaison_01_judee.jpg" }}
|
||||
<img class="" src="{{ $image.RelPermalink }}" />
|
||||
</div>
|
||||
{{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
|
||||
<img class="compare-aubevoye" src="{{ $image.RelPermalink }}" />
|
||||
|
||||
<div class="compare-shown">
|
||||
{{ $image := resources.Get "images/crypte_comparaison_01_aubevoye.jpg" }}
|
||||
<img class="" 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>
|
||||
</figure>
|
||||
</div>
|
||||
<div class="compare-item compare-west">
|
||||
<div class="compare-item">
|
||||
<figure>
|
||||
<div class="compare-duet">
|
||||
<div class="compare-hidden">
|
||||
{{ $image := resources.Get "images/crypte_comparaison_02_judee.jpg" }}
|
||||
<img class="" src="{{ $image.RelPermalink }}" />
|
||||
</div>
|
||||
{{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
|
||||
<img class="compare-aubevoye" src="{{ $image.RelPermalink }}" />
|
||||
|
||||
<div class="compare-shown">
|
||||
{{ $image := resources.Get "images/crypte_comparaison_02_aubevoye.jpg" }}
|
||||
<img class="" 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>
|
||||
</figure>
|
||||
</figure>
|
||||
|
|
Loading…
Reference in a new issue