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

add share buttons rapport
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-13 11:23:30 +01:00
parent a2d918ed82
commit 3e9f68e248
7 changed files with 263 additions and 153 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -96,23 +96,6 @@
// SHARE ACTIONS --------------------------------------------------
// ----------------------------------------------------------------
#share-banner__desktop{ display: none; }
#share-banner__desktop ~ .modal--share{
opacity: 0;
pointer-events: none;
transition: opacity .2s ease-in;
}
#share-banner__desktop:checked ~ .modal--share{
opacity: 1;
pointer-events: auto;
}

254
assets/css/template/_rapport.scss
View file

@ -2,143 +2,152 @@
--rapport-w: 280px;
}
#rapport{
margin-bottom: 20vh;
padding-left: var(--rapport-w);
padding-bottom: 10vh;
margin: 0 auto;
max-width: calc(var(--max-w-content) + var(--rapport-w));
}
.rapport__header{
// display: grid;
// grid-template-columns: 1fr 140px;
// column-gap: calc(var(--spacing)*1.5);
// row-gap: calc(var(--spacing)*2);
margin-top: calc(var(--spacing)*2);
max-width: var(--max-w-content);
padding-bottom: calc(var(--spacing)*0.5);
#rapport .rapport__header{
margin-top: calc(var(--spacing)*2);
max-width: var(--max-w-content);
padding-bottom: calc(var(--spacing)*0.5);
.rapport__title-group{
grid-column: span 2;
.rapport__title-group{
grid-column: span 2;
.title{
text-transform: uppercase;
font-weight: normal;
font-size: var(--fs-big);
line-height: var(--leading-tight);
font-weight: normal;
margin-top: calc(var(--spacing)*1);
}
.subtitle{
font-size: var(--fs-big);
line-height: var(--leading-tight);
margin-top: calc(var(--spacing)*0.5);
font-weight: normal;
}
.title{
text-transform: uppercase;
font-weight: normal;
font-size: var(--fs-big);
line-height: var(--leading-tight);
font-weight: normal;
margin-top: calc(var(--spacing)*1);
}
.subtitle{
font-size: var(--fs-big);
line-height: var(--leading-tight);
margin-top: calc(var(--spacing)*0.5);
font-weight: normal;
}
.rapport__figure{
}
.rapport__figure{
display: none;
width: 100%;
aspect-ratio: 2/1;
margin-top: calc(var(--spacing)*2);
img{
width: 100%;
aspect-ratio: 2/1;
margin-top: calc(var(--spacing)*2);
height: 100%;
object-fit: cover;
}
}
.rapport__dl{
align-self: start;
font-size: var(--fs-small);
border-bottom: var(--border-light);
flex-grow: 2;
align-items: flex-start;
margin-top: calc(var(--spacing)*0.5);
.dl__group{
@include grid-content();
border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0;
}
dt{
color: var(--color-txt-light);
padding-right: 1ch;
}
}
.thumbnail--group{
display: flex;
gap: calc(var(--spacing)*0.5);
margin-top: calc(var(--spacing)*1);
}
.btn--group{
display: flex;
gap: calc(var(--spacing)*0.5);
position: relative;
}
label{
position: relative;
}
.modal-share{
max-width: 220px;
position: absolute;
top: 30px;
left: 0px;
}
.thumbnail{
max-width: 260px;
display: grid;
display: none;
grid-template-columns: 2fr 3fr;
column-gap: calc(var(--padding-inner)*1);
padding: calc(var(--padding-inner)*0.5);
border: var(--border-light);
figure{
display: flex;
aspect-ratio: 4/3;
grid-column: 1;
grid-row: 1/3;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.rapport__dl{
align-self: start;
font-size: var(--fs-small);
border-bottom: var(--border-light);
flex-grow: 2;
align-items: flex-start;
margin-top: calc(var(--spacing)*0.5);
.dl__group{
@include grid-content();
border-top: var(--border-light);
padding: calc(var(--spacing)*0.5) 0;
}
dt{
color: var(--color-txt-light);
padding-right: 1ch;
.thumbnail__title{
padding-top: calc(var(--padding-inner)*0.5);
a{
text-decoration: none;
}
}
.thumbnail--group{
button{
align-self: end;
display: flex;
gap: calc(var(--spacing)*0.5);
margin-top: calc(var(--spacing)*1);
align-items: end;
justify-content: end;
padding-right: calc(var(--padding-inner)*0.5);
padding-bottom: calc(var(--padding-inner)*0.5);
}
.btn--group{
display: flex;
gap: calc(var(--spacing)*0.5);
button svg{
width: 15px;
height: 15px;
fill: var(--color-txt);
}
.thumbnail{
max-width: 260px;
display: grid;
display: none;
grid-template-columns: 2fr 3fr;
column-gap: calc(var(--padding-inner)*1);
padding: calc(var(--padding-inner)*0.5);
border: var(--border-light);
figure{
display: flex;
aspect-ratio: 4/3;
grid-column: 1;
grid-row: 1/3;
img{
width: 100%;
height: 100%;
object-fit: cover;
}
}
.thumbnail__title{
padding-top: calc(var(--padding-inner)*0.5);
a{
text-decoration: none;
}
}
button{
align-self: end;
display: flex;
align-items: end;
justify-content: end;
padding-right: calc(var(--padding-inner)*0.5);
padding-bottom: calc(var(--padding-inner)*0.5);
}
button svg{
width: 15px;
height: 15px;
fill: var(--color-txt);
}
}
}
}
#rapport{
.rapport__content{
max-width: var(--max-w-content);
margin-top: calc(var(--spacing)*3);
@ -264,10 +273,39 @@
}
#download-pdf{
margin: 0 auto;
.btn--group{
margin-top: calc(var(--spacing)*0.5);
display: flex;
gap: var(--padding-inner);
[for="share-banner__aside"]{
cursor: pointer;
}
#download-pdf{
a{
padding-left: 1ch;
padding-right: 1ch;
}
}
}
.modal--share{
position: absolute;
bottom: calc(var(--h-block) * -1.5);
right: calc(-100% + var(--padding-inner));
&::before{
content: "◀";
font-size: 10px;
position: absolute;
bottom: calc(var(--h-block) * 0.25);
left: -9px;
}
}
}