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

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

@ -64,8 +64,6 @@ body, #site-header, #site-footer{
}
@mixin hide-scroll(){
scrollbar-width: none;
-ms-overflow-style: none;
@ -74,6 +72,13 @@ body, #site-header, #site-footer{
}
}
@mixin clamp($lines) {
display: -webkit-box;
-webkit-line-clamp: $lines;
-webkit-box-orient: vertical;
overflow: hidden;
}
body.menu-open,
body.is-hidden{

5
assets/css/base/_responsive.scss
View file

@ -11,3 +11,8 @@ $paysage: "screen and (max-height: 670px) and (min-width: 1080px)";
@media #{$medium}{
}
@media #{$x-small}{
}

45
assets/css/components/_buttons.scss
View file

@ -169,6 +169,51 @@ button:disabled{
}
@mixin btn--go-to(){
position: relative;
.btn--go-to{
position: absolute;
right: var(--padding-inner);
bottom: calc(var(--padding-inner) - 3px);
svg{
width: 15px;
height: 15px;
fill: var(--color-txt);
}
@media #{$small}{
svg{
width: 11px;
height: 11px;
}
}
@media #{$x-small}{
right: calc(var(--padding-inner)*0.5);
bottom: calc(var(--padding-inner)*0.25);
svg{
width: 11px;
height: 11px;
}
}
}
&:hover{
.btn--go-to{
animation: wiggle-left 0.8s ease-in-out;
}
}
}
@keyframes wiggle-left {
0% { transform: translateX(0); }
40% { transform: translateX(-10px); }
80% { transform: translateX(0); }
100% { transform: translateX(0); }
}
.btn--back-to-top{

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

@ -13,13 +13,13 @@
border-top: var(--border-light);
}
@include figure-16-9-hover();
@include figure-16-9();
.content{
display: flex;
flex-direction: column;
padding-top: calc(var(--spacing)*0.25);
padding-right: calc(var(--padding-inner)*3);
}
.title{
@ -48,6 +48,9 @@
.title{ text-decoration: underline;}
}
@include btn--go-to();
@media #{$medium}{
.title{
font-size: var(--fs-normal);

75
assets/css/components/_card-folder.scss Normal file
View file

@ -0,0 +1,75 @@
.card--folder{
position: relative;
border: var(--border-light);
padding: var(--padding-inner);
@include grid-content();
@include figure-16-9();
.content{
display: flex;
flex-direction: column;
}
.title{
flex-grow: 1;
font-weight: normal;
font-size: var(--fs-medium);
margin-bottom: 0.25em;
text-wrap: balance;
max-width: 42ch;
a{ text-decoration: none;}
@media #{$small}{
font-size: var(--fs-normal);
}
}
.short{
@include clamp(2);
}
ul{
display: flex;
list-style: none;
gap: 1ch;
color: var(--color-txt-light);
padding-top: calc(var(--spacing)*0.5);
li + li{
&::before{
content: "|";
padding-right: 1ch;
}
}
@media #{$small}{
font-size: var(--fs-small);
}
}
.btn--go-to{
position: absolute;
right: calc(var(--padding-inner)*1);
bottom: var(--padding-inner);
}
@include btn--go-to();
&:hover{
border-color: var(--color-txt);
}
@media #{$x-small}{
padding: calc(var(--padding-inner)*0.5);
.short{ display: none; }
}
}

1
assets/css/partials/_site-header.scss
View file

@ -91,6 +91,7 @@
cursor: pointer;
svg{
width: 30px;
fill: var(--color-txt);
}
.close{ display: none; }

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

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

File diff suppressed because one or more lines are too long

1
assets/css/style.scss
View file

@ -26,6 +26,7 @@
@import "components/card-article";
@import "components/card-article-small";
@import "components/card-impact";
@import "components/card-folder";
@import "components/card-open-graph";

17
assets/css/template/_investigation-summary.scss
View file

@ -4,9 +4,9 @@
max-width: var(--max-w-cards);
margin-inline: auto;
.panel-left{
width: calc((100vw - var(--max-w-cards) - var(--padding-body)*2)*0.5);
}
.panel-left{
width: calc((100vw - var(--max-w-cards) - var(--padding-body)*2)*0.5);
}
@media screen and (max-width: 1380px){
margin-left: auto;
@ -27,11 +27,6 @@
}
}
// padding-left: calc(var(--panel-w)*0.5);
// max-width: calc(var(--max-w-cards) + calc(var(--panel-w)*0.5));
header {
margin-top: calc(var(--spacing) * 1);
margin-bottom: calc(var(--spacing) * 2);
@ -57,6 +52,10 @@
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 3);
&:target{
padding-top: calc(var(--header-h) + var(--spacing)*1);
}
a:hover {
color: var(--grey-200);
}
@ -96,6 +95,8 @@
}
}
#section__synthese {
max-width: var(--max-w-content);