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

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);