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

30
assets/css/components/_modal-share.scss
View file

@ -103,13 +103,15 @@
}
}
button{
.copy-link__btn{
background-color: var(--color-txt);
color: var(--color-bg);
border-radius: var(--radius-btn);
padding: 0 1ch;
font-size: var(--fs-small);
padding-top: 2px;
white-space: nowrap;
&:hover{
background-color: var(--color-accent);
@ -120,3 +122,29 @@
}
// SHARE ACTIONS --------------------------------------------------
// ----------------------------------------------------------------
#share-banner__content,
#share-banner__aside,
#share-banner__desktop{
display: none;
}
#share-banner__content ~ .modal--share,
#share-banner__aside ~ .modal--share,
#share-banner__desktop ~ .modal--share{
opacity: 0;
pointer-events: none;
transition: opacity .2s ease-in;
}
#share-banner__content:checked ~ .modal--share,
#share-banner__aside:checked ~ .modal--share,
#share-banner__desktop:checked ~ .modal--share{
opacity: 1;
pointer-events: auto;
}

78
assets/css/style.css
View file

@ -964,18 +964,40 @@ button:disabled {
border-color: var(--color-txt);
outline: none;
}
.modal--share .copy-link button {
.modal--share .copy-link .copy-link__btn {
background-color: var(--color-txt);
color: var(--color-bg);
border-radius: var(--radius-btn);
padding: 0 1ch;
font-size: var(--fs-small);
padding-top: 2px;
white-space: nowrap;
}
.modal--share .copy-link button:hover {
.modal--share .copy-link .copy-link__btn:hover {
background-color: var(--color-accent);
}
#share-banner__content,
#share-banner__aside,
#share-banner__desktop {
display: none;
}
#share-banner__content ~ .modal--share,
#share-banner__aside ~ .modal--share,
#share-banner__desktop ~ .modal--share {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in;
}
#share-banner__content:checked ~ .modal--share,
#share-banner__aside:checked ~ .modal--share,
#share-banner__desktop:checked ~ .modal--share {
opacity: 1;
pointer-events: auto;
}
.page__title {
font-size: var(--fs-big);
font-weight: normal;
@ -1674,21 +1696,6 @@ body main {
text-underline-offset: 3px;
}
#share-banner__desktop {
display: none;
}
#share-banner__desktop ~ .modal--share {
opacity: 0;
pointer-events: none;
transition: opacity 0.2s ease-in;
}
#share-banner__desktop:checked ~ .modal--share {
opacity: 1;
pointer-events: auto;
}
@media screen and (max-width: 768px) {
[data-template=investigation-summary] main header {
padding-top: calc(var(--spacing) * 1);
@ -1843,6 +1850,7 @@ body main {
margin: 0 auto;
max-width: calc(var(--max-w-content) + var(--rapport-w));
}
#rapport .rapport__header {
margin-top: calc(var(--spacing) * 2);
max-width: var(--max-w-content);
@ -1866,6 +1874,7 @@ body main {
font-weight: normal;
}
#rapport .rapport__header .rapport__figure {
display: none;
width: 100%;
aspect-ratio: 2/1;
margin-top: calc(var(--spacing) * 2);
@ -1904,6 +1913,16 @@ body main {
#rapport .rapport__header .btn--group {
display: flex;
gap: calc(var(--spacing) * 0.5);
position: relative;
}
#rapport .rapport__header label {
position: relative;
}
#rapport .rapport__header .modal-share {
max-width: 220px;
position: absolute;
top: 30px;
left: 0px;
}
#rapport .rapport__header .thumbnail {
max-width: 260px;
@ -1946,6 +1965,7 @@ body main {
height: 15px;
fill: var(--color-txt);
}
#rapport .rapport__content {
max-width: var(--max-w-content);
margin-top: calc(var(--spacing) * 3);
@ -2031,9 +2051,29 @@ body main {
#rapport__aside #toc a {
text-decoration: none;
}
#rapport__aside #download-pdf {
margin: 0 auto;
#rapport__aside .btn--group {
margin-top: calc(var(--spacing) * 0.5);
display: flex;
gap: var(--padding-inner);
}
#rapport__aside .btn--group [for=share-banner__aside] {
cursor: pointer;
}
#rapport__aside .btn--group #download-pdf a {
padding-left: 1ch;
padding-right: 1ch;
}
#rapport__aside .modal--share {
position: absolute;
bottom: calc(var(--h-block) * -1.5);
right: calc(-100% + var(--padding-inner));
}
#rapport__aside .modal--share::before {
content: "◀";
font-size: 10px;
position: absolute;
bottom: calc(var(--h-block) * 0.25);
left: -9px;
}
#tab-print, #tab-toc {

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

File diff suppressed because one or more lines are too long

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

1
assets/icons/share.svg Normal file
View file

@ -0,0 +1 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 640"><!--!Font Awesome Free v7.1.0 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2026 Fonticons, Inc.--><path d="M371.8 82.4C359.8 87.4 352 99 352 112L352 192L240 192C142.8 192 64 270.8 64 368C64 481.3 145.5 531.9 164.2 542.1C166.7 543.5 169.5 544 172.3 544C183.2 544 192 535.1 192 524.3C192 516.8 187.7 509.9 182.2 504.8C172.8 496 160 478.4 160 448.1C160 395.1 203 352.1 256 352.1L352 352.1L352 432.1C352 445 359.8 456.7 371.8 461.7C383.8 466.7 397.5 463.9 406.7 454.8L566.7 294.8C579.2 282.3 579.2 262 566.7 249.5L406.7 89.5C397.5 80.3 383.8 77.6 371.8 82.6z"/></svg>
Side by side

After

Width:  |  Height:  |  Size: 679 B