studio-variable/index-main
3
0
Fork 0
Code Issues 1 Pull requests Projects Releases Packages Wiki Activity Actions

hover card with bg
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-28 01:15:51 +01:00
parent a0f0110fa6
commit dbf9097701
7 changed files with 110 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

27
assets/css/base/_body.scss
View file

@ -76,6 +76,31 @@ body, #site-header, #site-footer{
overflow: hidden;
}
@mixin hover-card-line(){
border-bottom: var(--border-light);
&:first-of-type{
border-top: var(--border-light);
}
position: relative;
&::before{
content: '';
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
left: 0;
}
&:hover{
background-color: var(--grey-950);
border-color: var(--color-txt);
&::before{
border-color: var(--color-txt);
}
}
}
body.menu-open,
body.is-hidden{
@ -85,3 +110,5 @@ body.is-hidden{
opacity: 0.1;
}
}

6
assets/css/components/_card-article-small.scss
View file

@ -3,6 +3,7 @@
.card--article-small{
@include grid-content();
margin-bottom: calc(var(--spacing)*0.5);
padding-bottom: calc(var(--spacing)*0.5);
@ -45,11 +46,10 @@
max-width: 32ch;
}
&:hover{
background-color: var(--grey-950);
}
@include btn--go-to();
@include hover-card-line();
@media #{$medium}{

21
assets/css/components/_card-impact.scss
View file

@ -1,12 +1,14 @@
.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);
}
&.has-link{
@include hover-card-line();
}
padding: calc(var(--spacing)*0.5) 0;
container-type: inline-size;
container-name: impact;
@ -75,9 +77,7 @@
}
&.has-link:hover{
background-color: var(--grey-950);
}
@ -127,12 +127,3 @@
}
[data-template="impacts"]{
.card--impact:not([data-impact-type="media"]):hover{
background-color: var(--grey-950);
}
}

54
assets/css/style.css
View file

@ -1251,6 +1251,8 @@ button.sort[data-sort-type=up] .arrow {
padding-bottom: calc(var(--spacing) * 0.5);
border-bottom: var(--border-light);
position: relative;
border-bottom: var(--border-light);
position: relative;
}
.card--article-small:first-of-type {
padding-top: calc(var(--spacing) * 0.5);
@ -1296,9 +1298,6 @@ button.sort[data-sort-type=up] .arrow {
z-index: 1000;
max-width: 32ch;
}
.card--article-small:hover {
background-color: var(--grey-950);
}
.card--article-small .btn--go-to {
position: absolute;
right: var(--padding-inner);
@ -1328,6 +1327,24 @@ button.sort[data-sort-type=up] .arrow {
.card--article-small:hover .btn--go-to {
animation: wiggle-left 0.8s ease-in-out;
}
.card--article-small:first-of-type {
border-top: var(--border-light);
}
.card--article-small::before {
content: "";
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
left: 0;
}
.card--article-small:hover {
background-color: var(--grey-950);
border-color: var(--color-txt);
}
.card--article-small:hover::before {
border-color: var(--color-txt);
}
@media screen and (max-width: 1080px) {
.card--article-small .title {
font-size: var(--fs-normal);
@ -1357,8 +1374,8 @@ button.sort[data-sort-type=up] .arrow {
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
padding: calc(var(--spacing) * 0.5) 0;
border-bottom: var(--border-light);
padding: calc(var(--spacing) * 0.5) 0;
container-type: inline-size;
container-name: impact;
position: relative;
@ -1366,6 +1383,28 @@ button.sort[data-sort-type=up] .arrow {
.card--impact:first-of-type {
border-top: var(--border-light);
}
.card--impact.has-link {
border-bottom: var(--border-light);
position: relative;
}
.card--impact.has-link:first-of-type {
border-top: var(--border-light);
}
.card--impact.has-link::before {
content: "";
width: 100%;
border-top: 1px solid transparent;
position: absolute;
top: -1px;
left: 0;
}
.card--impact.has-link:hover {
background-color: var(--grey-950);
border-color: var(--color-txt);
}
.card--impact.has-link:hover::before {
border-color: var(--color-txt);
}
.card--impact .btn--go-to {
position: absolute;
right: var(--padding-inner);
@ -1441,9 +1480,6 @@ button.sort[data-sort-type=up] .arrow {
.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: 2;
}
@ -1512,10 +1548,6 @@ 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);

2
assets/css/style.css.map
View file

File diff suppressed because one or more lines are too long

42
site/templates/home.php
View file

@ -132,41 +132,53 @@ foreach ($latestInvestigations as $investigation):
<div class="col-right">
<!-- Contenu statique temporaire - sera dynamique quand les pages impacts seront créées -->
<div class="card--impact" data-impact-type="media">
<div class="card--impact" data-impact-type="media">
<p class="tag">Médiatique</p>
<div class="content">
<p>12 articles et reprises</p>
<p>1.5M de vues cumulées</p>
<?php snippet('card-open-graph') ?>
</div>
<details class="open-graph__details">
<summary><p class="summary-inner">Détails <span class="arrow-details"><?= svg('assets/icons/arrow-details.svg') ?></span><p></summary>
<div class="open-graph__inner">
<?php snippet('card-open-graph') ?>
</div>
</details>
<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">
<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>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">
<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>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><!-- col-right -->

6
site/templates/impacts.php
View file

@ -31,7 +31,7 @@
</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">
@ -47,7 +47,7 @@
</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">
@ -71,8 +71,6 @@
</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>