hover card with bg
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
All checks were successful
Deploy / Deploy to Production (push) Successful in 14s
This commit is contained in:
Julie Blanc
parent
80a606243e
commit
a0f0110fa6
14 changed files with 289 additions and 78 deletions
|
|
@ -46,7 +46,7 @@
|
|||
}
|
||||
|
||||
&:hover{
|
||||
.title{ text-decoration: underline;}
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
|
||||
@include btn--go-to();
|
||||
|
|
|
|||
|
|
@ -1,15 +1,24 @@
|
|||
.card--impact{
|
||||
@include grid-content();
|
||||
// grid-row-gap: 0;
|
||||
padding: calc(var(--spacing)*0.5) 0;
|
||||
border-bottom: var(--border-light);
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
|
||||
container-type: inline-size;
|
||||
container-name: impact;
|
||||
|
||||
&:first-of-type{
|
||||
border-top: var(--border-light);
|
||||
@include btn--go-to();
|
||||
.btn--go-to{
|
||||
top: calc(var(--padding-inner)*1);
|
||||
bottom: auto;
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.content{
|
||||
grid-column: 2;
|
||||
}
|
||||
|
|
@ -26,45 +35,81 @@
|
|||
|
||||
}
|
||||
|
||||
&:not([data-impact-type="media"]){
|
||||
.content{
|
||||
.see-more{
|
||||
color: var(--color-txt-light);
|
||||
padding-right: calc(var(--padding-inner)*2.5);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
.investigations{
|
||||
z-index: 10;
|
||||
grid-column: 2;
|
||||
list-style: none;
|
||||
font-size: var(--fs-small);
|
||||
|
||||
|
||||
a{
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
&::after{
|
||||
content: ' +'
|
||||
color: var(--color-txt-light);
|
||||
|
||||
}
|
||||
.icon{
|
||||
position: relative;
|
||||
top: 2px;
|
||||
svg{
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
}
|
||||
li:hover{
|
||||
a{
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.icon svg{ fill: var(--color-txt); }
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
&.has-link:hover{
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
.open-graph__details{
|
||||
grid-column: span 2;
|
||||
grid-column: 2;
|
||||
@include details-summary();
|
||||
summary{
|
||||
color: var(--color-txt-light);
|
||||
.arrow-details svg{ fill: var(--color-txt-light);}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
.open-graph__details{
|
||||
@media #{$x-small}{
|
||||
summary{
|
||||
@include grid-content();
|
||||
grid-row-gap: 0;
|
||||
.summary-inner{
|
||||
grid-column: 2;
|
||||
|
||||
}
|
||||
}
|
||||
grid-column: 1/3;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.open-graph__inner{
|
||||
margin-top: calc(var(--spacing)*0.5);
|
||||
margin-bottom: calc(var(--spacing)*1);
|
||||
@media #{$small-up}{
|
||||
margin-bottom: calc(var(--spacing)*2);
|
||||
}
|
||||
// margin-bottom: calc(var(--spacing)*1);
|
||||
|
||||
.card--open-graph{
|
||||
margin-bottom: calc(var(--spacing)*0.5);
|
||||
}
|
||||
|
|
@ -80,3 +125,14 @@
|
|||
font-size: 14px!important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
[data-template="impacts"]{
|
||||
|
||||
.card--impact:not([data-impact-type="media"]):hover{
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,5 @@
|
|||
.card--open-graph{
|
||||
|
||||
|
||||
|
||||
@include grid-content();
|
||||
|
||||
border: var(--border-light);
|
||||
|
|
@ -11,9 +9,17 @@
|
|||
figure{
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
img{
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
@include figure-16-9();
|
||||
}
|
||||
|
||||
// @include figure-16-9();
|
||||
|
||||
|
||||
@media #{$x-small}{
|
||||
|
|
@ -61,7 +67,7 @@
|
|||
|
||||
&:hover{
|
||||
border-color: var(--color-txt);
|
||||
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -31,6 +31,13 @@
|
|||
|
||||
}
|
||||
|
||||
summary:hover{
|
||||
color: var(--color-txt);
|
||||
.arrow-details svg{
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
}
|
||||
|
||||
&[open]{
|
||||
.arrow-details svg{
|
||||
transform: rotate(90deg);
|
||||
|
|
|
|||
|
|
@ -16,8 +16,17 @@ body{
|
|||
|
||||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
|
||||
.page__header,
|
||||
.page__content{
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
|
@ -22,9 +22,9 @@
|
|||
|
||||
}
|
||||
|
||||
|
||||
|
||||
main .page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
|
||||
|
|
|
|||
|
|
@ -1296,8 +1296,8 @@ button.sort[data-sort-type=up] .arrow {
|
|||
z-index: 1000;
|
||||
max-width: 32ch;
|
||||
}
|
||||
.card--article-small:hover .title {
|
||||
text-decoration: underline;
|
||||
.card--article-small:hover {
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
.card--article-small .btn--go-to {
|
||||
position: absolute;
|
||||
|
|
@ -1361,10 +1361,44 @@ button.sort[data-sort-type=up] .arrow {
|
|||
border-bottom: var(--border-light);
|
||||
container-type: inline-size;
|
||||
container-name: impact;
|
||||
position: relative;
|
||||
}
|
||||
.card--impact:first-of-type {
|
||||
border-top: var(--border-light);
|
||||
}
|
||||
.card--impact .btn--go-to {
|
||||
position: absolute;
|
||||
right: var(--padding-inner);
|
||||
bottom: calc(var(--padding-inner) - 3px);
|
||||
}
|
||||
.card--impact .btn--go-to svg {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
@media screen and (max-width: 768px) {
|
||||
.card--impact .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact .btn--go-to {
|
||||
right: calc(var(--padding-inner) * 0.5);
|
||||
bottom: calc(var(--padding-inner) * 0.25);
|
||||
}
|
||||
.card--impact .btn--go-to svg {
|
||||
width: 11px;
|
||||
height: 11px;
|
||||
}
|
||||
}
|
||||
.card--impact:hover .btn--go-to {
|
||||
animation: wiggle-left 0.8s ease-in-out;
|
||||
}
|
||||
.card--impact .btn--go-to {
|
||||
top: calc(var(--padding-inner) * 1);
|
||||
bottom: auto;
|
||||
}
|
||||
.card--impact .content {
|
||||
grid-column: 2;
|
||||
}
|
||||
|
|
@ -1379,16 +1413,39 @@ button.sort[data-sort-type=up] .arrow {
|
|||
position: relative;
|
||||
top: -5px;
|
||||
}
|
||||
.card--impact .content .see-more {
|
||||
color: var(--color-txt-light);
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
.card--impact:not([data-impact-type=media]) .content {
|
||||
padding-right: calc(var(--padding-inner) * 2.5);
|
||||
}
|
||||
.card--impact .content .see-more::after {
|
||||
content: " +";
|
||||
.card--impact .investigations {
|
||||
z-index: 10;
|
||||
grid-column: 2;
|
||||
list-style: none;
|
||||
font-size: var(--fs-small);
|
||||
}
|
||||
.card--impact .investigations a {
|
||||
text-decoration: none;
|
||||
color: var(--color-txt-light);
|
||||
}
|
||||
.card--impact .investigations .icon {
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
.card--impact .investigations .icon svg {
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
.card--impact .investigations li:hover a {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.card--impact .investigations li:hover .icon svg {
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--impact.has-link:hover {
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
.card--impact .open-graph__details {
|
||||
grid-column: span 2;
|
||||
grid-column: 2;
|
||||
}
|
||||
.card--impact .open-graph__details summary,
|
||||
.card--impact .open-graph__details .summary-inner {
|
||||
|
|
@ -1413,6 +1470,12 @@ button.sort[data-sort-type=up] .arrow {
|
|||
width: 100%;
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--impact .open-graph__details summary:hover {
|
||||
color: var(--color-txt);
|
||||
}
|
||||
.card--impact .open-graph__details summary:hover .arrow-details svg {
|
||||
fill: var(--color-txt);
|
||||
}
|
||||
.card--impact .open-graph__details[open] .arrow-details svg {
|
||||
transform: rotate(90deg);
|
||||
}
|
||||
|
|
@ -1422,23 +1485,23 @@ button.sort[data-sort-type=up] .arrow {
|
|||
.card--impact .open-graph__details summary .arrow-details svg {
|
||||
fill: var(--color-txt-light);
|
||||
}
|
||||
.card--impact .open-graph__details summary {
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--impact .open-graph__details {
|
||||
grid-column: 1/3;
|
||||
}
|
||||
.card--impact .open-graph__details summary {
|
||||
display: grid;
|
||||
grid-gap: var(--padding-inner);
|
||||
grid-template-columns: 2fr 3fr;
|
||||
position: relative;
|
||||
}
|
||||
.card--impact .open-graph__details summary .summary-inner {
|
||||
grid-row-gap: 0;
|
||||
}
|
||||
.card--impact .open-graph__details summary .summary-inner {
|
||||
grid-column: 2;
|
||||
}
|
||||
}
|
||||
.card--impact .open-graph__inner {
|
||||
margin-top: calc(var(--spacing) * 0.5);
|
||||
margin-bottom: calc(var(--spacing) * 1);
|
||||
}
|
||||
@media screen and (min-width: 768px) {
|
||||
.card--impact .open-graph__inner {
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
}
|
||||
.card--impact .open-graph__inner .card--open-graph {
|
||||
margin-bottom: calc(var(--spacing) * 0.5);
|
||||
|
|
@ -1449,6 +1512,10 @@ button.sort[data-sort-type=up] .arrow {
|
|||
font-size: 14px !important;
|
||||
}
|
||||
}
|
||||
[data-template=impacts] .card--impact:not([data-impact-type=media]):hover {
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
|
||||
.card--folder {
|
||||
position: relative;
|
||||
max-width: var(--max-w-cards);
|
||||
|
|
@ -1597,18 +1664,14 @@ button.sort[data-sort-type=up] .arrow {
|
|||
.card--open-graph figure {
|
||||
grid-column: 1;
|
||||
grid-row: 1;
|
||||
}
|
||||
.card--open-graph figure {
|
||||
aspect-ratio: 16/9;
|
||||
display: flex;
|
||||
overflow: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.card--open-graph figure img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
|
||||
}
|
||||
@media screen and (max-width: 560px) {
|
||||
.card--open-graph figure {
|
||||
|
|
@ -1650,6 +1713,7 @@ button.sort[data-sort-type=up] .arrow {
|
|||
}
|
||||
.card--open-graph:hover {
|
||||
border-color: var(--color-txt);
|
||||
background-color: var(--grey-950);
|
||||
}
|
||||
|
||||
.open-graph__inner {
|
||||
|
|
@ -1972,6 +2036,11 @@ body main {
|
|||
min-height: 100dvh;
|
||||
min-height: 100vh;
|
||||
}
|
||||
body main .page__header,
|
||||
body main .page__content {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.page__type {
|
||||
height: calc(var(--h-block) * 0.75);
|
||||
|
|
@ -1992,8 +2061,6 @@ body main {
|
|||
}
|
||||
|
||||
main .page__header {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
margin-top: calc(var(--spacing) * 3);
|
||||
margin-bottom: calc(var(--spacing) * 2);
|
||||
}
|
||||
|
|
@ -2188,10 +2255,6 @@ main .page__header .description-medium {
|
|||
[data-template=investigation-summary] main {
|
||||
position: relative;
|
||||
}
|
||||
[data-template=investigation-summary] main #hero, [data-template=investigation-summary] main .section__article {
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
[data-template=investigation-summary] main .panel-left {
|
||||
width: calc((100vw - var(--max-w-cards) - var(--padding-body) * 4) * 0.5);
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -43,3 +43,4 @@
|
|||
@import "template/investigation-summary";
|
||||
@import "template/report";
|
||||
@import "template/folder";
|
||||
@import "template/impacts";
|
||||
|
|
|
|||
0
assets/css/template/_impacts.scss
Normal file
0
assets/css/template/_impacts.scss
Normal file
|
|
@ -2,10 +2,7 @@
|
|||
position: relative;
|
||||
|
||||
|
||||
#hero, .section__article{
|
||||
max-width: var(--max-w-cards);
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.panel-left{
|
||||
|
|
@ -16,7 +13,6 @@
|
|||
margin-left: auto;
|
||||
margin-right: calc(var(--padding-body)*3);
|
||||
.panel-left{
|
||||
|
||||
width: calc(100vw - var(--max-w-cards) - var(--padding-body)*6);
|
||||
}
|
||||
}
|
||||
|
|
@ -27,7 +23,6 @@
|
|||
margin-right: 0px;
|
||||
width: calc(100% - var(--panel-w)*0.5 - var(--padding-body));
|
||||
.panel-left{
|
||||
|
||||
width: calc(var(--panel-w)*0.5);
|
||||
}
|
||||
}
|
||||
|
|
|
|||
1
assets/icons/article.svg
Normal file
1
assets/icons/article.svg
Normal file
|
|
@ -0,0 +1 @@
|
|||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M11.362 2c4.156 0 2.638 6 2.638 6s6-1.65 6 2.457v11.543h-16v-20h7.362zm.827-2h-10.189v24h20v-14.386c0-2.391-6.648-9.614-9.811-9.614zm4.811 13h-10v-1h10v1zm0 2h-10v1h10v-1zm0 3h-10v1h10v-1z"/></svg>
|
||||
|
After Width: | Height: | Size: 289 B |
|
|
@ -13,5 +13,69 @@
|
|||
</header>
|
||||
|
||||
|
||||
<div class="page__content">
|
||||
|
||||
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
|
||||
<div class="card--impact" data-impact-type="media">
|
||||
<p class="tag">Médiatique</p>
|
||||
<div class="content">
|
||||
<?php snippet('card-open-graph') ?>
|
||||
|
||||
</div>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
<li><a href="/enquetes/l-homicide-de-nahel-merzouk"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L’homicide de Nahel Merzouk</a></li>
|
||||
|
||||
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="card--impact" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<ul class="investigations">
|
||||
<li><a href="/enquetes/l-execution-de-nidal-et-khaled-amirah-a-naplouse"><span class="icon"><?= svg('assets/icons/article.svg') ?></span> L'exécution de Nidal et Khaled 'Amirah à Naplouse</a></li>
|
||||
</ul>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="public">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.
|
||||
</p>
|
||||
|
||||
</div>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</main>
|
||||
<?php snippet('footer') ?>
|
||||
|
|
@ -67,6 +67,10 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
<?php endif ?>
|
||||
</header>
|
||||
|
||||
|
||||
<div class="page__content">
|
||||
|
||||
|
||||
<?php if ($page->heroType()->value() == 'image'): ?>
|
||||
<?php if ($heroImage = $page->heroImages()->toFile()): ?>
|
||||
<!-- HERO IMAGE SIMPLE -->
|
||||
|
|
@ -243,30 +247,33 @@ $report = $page->children()->filterBy('intendedTemplate', 'report')->first();
|
|||
</details>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="judiciaire">
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah".
|
||||
</p>
|
||||
</div>
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="judiciaire">
|
||||
<div class="card--impact has-link" data-impact-type="judiciaire">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p >La justice israélienne déclare ouvrir une enquête sur "les circonstances de la mort de Nidal et Khaled Amirah"
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button class="btn--go-to"><a href="#" target="_blank"><?= svg('assets/icons/arrow-left.svg') ?></a></button>
|
||||
<a class="link-block" href="#" target="_blank"></a>
|
||||
</div>
|
||||
|
||||
<div class="card--impact" data-impact-type="public">
|
||||
<p class="tag">Judiciaire</p>
|
||||
<p class="date">12 Dec 2025</p>
|
||||
<div class="content">
|
||||
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025. <a class="see-more" href="#">Voir plus</a>
|
||||
<p>Index présente une série d'enquêtes récentes au Festival du Réel 2025.</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -372,6 +379,8 @@ if ($folder):
|
|||
<?php endforeach ?>
|
||||
|
||||
</aside>
|
||||
|
||||
</div>
|
||||
<?php endif ?>
|
||||
|
||||
</main>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue