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

arrow go-to
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-25 22:25:08 +01:00
parent f28680f77e
commit 50f4836be1
14 changed files with 371 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

163
assets/css/style.css
View file

@ -231,6 +231,7 @@ body.is-hidden .btn--back-to-top {
}
#site-header #menu-toggle svg {
width: 30px;
fill: var(--color-txt);
}
#site-header #menu-toggle .close {
display: none;
@ -409,6 +410,20 @@ button:disabled {
top: 0px;
}
@keyframes wiggle-left {
0% {
transform: translateX(0);
}
40% {
transform: translateX(-10px);
}
80% {
transform: translateX(0);
}
100% {
transform: translateX(0);
}
}
.btn--back-to-top {
display: flex;
border-color: var(--color-txt);
@ -1238,6 +1253,7 @@ button.sort[data-sort-type=up] .arrow {
margin-bottom: calc(var(--spacing) * 0.5);
padding-bottom: calc(var(--spacing) * 0.5);
border-bottom: var(--border-light);
position: relative;
}
.card--article-small:first-of-type {
padding-top: calc(var(--spacing) * 0.5);
@ -1255,13 +1271,11 @@ button.sort[data-sort-type=up] .arrow {
object-fit: cover;
transition: cubic-bezier(0.175, 0.885, 0.32, 1.275) 0.5s;
}
.card--article-small:hover figure img {
transform: scale(1.05);
}
.card--article-small .content {
display: flex;
flex-direction: column;
padding-top: calc(var(--spacing) * 0.25);
padding-right: calc(var(--padding-inner) * 3);
}
.card--article-small .title {
font-weight: normal;
@ -1287,6 +1301,35 @@ button.sort[data-sort-type=up] .arrow {
.card--article-small:hover .title {
text-decoration: underline;
}
.card--article-small .btn--go-to {
position: absolute;
right: var(--padding-inner);
bottom: calc(var(--padding-inner) - 3px);
}
.card--article-small .btn--go-to svg {
width: 15px;
height: 15px;
fill: var(--color-txt);
}
@media screen and (max-width: 768px) {
.card--article-small .btn--go-to svg {
width: 11px;
height: 11px;
}
}
@media screen and (max-width: 560px) {
.card--article-small .btn--go-to {
right: calc(var(--padding-inner) * 0.5);
bottom: calc(var(--padding-inner) * 0.25);
}
.card--article-small .btn--go-to svg {
width: 11px;
height: 11px;
}
}
.card--article-small:hover .btn--go-to {
animation: wiggle-left 0.8s ease-in-out;
}
@media screen and (max-width: 1080px) {
.card--article-small .title {
font-size: var(--fs-normal);
@ -1401,6 +1444,116 @@ button.sort[data-sort-type=up] .arrow {
margin-bottom: calc(var(--spacing) * 0.5);
}
.card--folder {
position: relative;
border: var(--border-light);
padding: var(--padding-inner);
display: grid;
grid-gap: var(--padding-inner);
grid-template-columns: 2fr 3fr;
position: relative;
position: relative;
}
.card--folder figure {
aspect-ratio: 16/9;
display: flex;
overflow: hidden;
}
.card--folder 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;
}
.card--folder .content {
display: flex;
flex-direction: column;
}
.card--folder .title {
flex-grow: 1;
font-weight: normal;
font-size: var(--fs-medium);
margin-bottom: 0.25em;
text-wrap: balance;
max-width: 42ch;
}
.card--folder .title a {
text-decoration: none;
}
@media screen and (max-width: 768px) {
.card--folder .title {
font-size: var(--fs-normal);
}
}
.card--folder .short {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
.card--folder ul {
display: flex;
list-style: none;
gap: 1ch;
color: var(--color-txt-light);
padding-top: calc(var(--spacing) * 0.5);
}
.card--folder ul li + li::before {
content: "|";
padding-right: 1ch;
}
@media screen and (max-width: 768px) {
.card--folder ul {
font-size: var(--fs-small);
}
}
.card--folder .btn--go-to {
position: absolute;
right: calc(var(--padding-inner) * 1);
bottom: var(--padding-inner);
}
.card--folder .btn--go-to {
position: absolute;
right: var(--padding-inner);
bottom: calc(var(--padding-inner) - 3px);
}
.card--folder .btn--go-to svg {
width: 15px;
height: 15px;
fill: var(--color-txt);
}
@media screen and (max-width: 768px) {
.card--folder .btn--go-to svg {
width: 11px;
height: 11px;
}
}
@media screen and (max-width: 560px) {
.card--folder .btn--go-to {
right: calc(var(--padding-inner) * 0.5);
bottom: calc(var(--padding-inner) * 0.25);
}
.card--folder .btn--go-to svg {
width: 11px;
height: 11px;
}
}
.card--folder:hover .btn--go-to {
animation: wiggle-left 0.8s ease-in-out;
}
.card--folder:hover {
border-color: var(--color-txt);
}
@media screen and (max-width: 560px) {
.card--folder {
padding: calc(var(--padding-inner) * 0.5);
}
.card--folder .short {
display: none;
}
}
.card--open-graph {
display: grid;
grid-gap: var(--padding-inner);
@ -1549,6 +1702,7 @@ button.sort[data-sort-type=up] .arrow {
}
#site-header #menu-toggle svg {
width: 30px;
fill: var(--color-txt);
}
#site-header #menu-toggle .close {
display: none;
@ -1829,6 +1983,9 @@ body main {
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3);
}
[data-template=investigation-summary] main .section__article:target {
padding-top: calc(var(--header-h) + var(--spacing) * 1);
}
[data-template=investigation-summary] main .section__article a:hover {
color: var(--grey-200);
}