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

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 {