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

divide report in subsection
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-06 16:03:17 +01:00
parent 4262be067d
commit ecd379dee4
5 changed files with 396 additions and 579 deletions
Download patch file Download diff file Expand all files Collapse all files

105
assets/css/style.css
View file

@ -2910,66 +2910,12 @@ main .page__header .description-medium {
left: 0px;
}
}
.arrow-report {
font-size: 14px;
color: var(--color-txt-light);
width: 20px;
height: 20px;
}
.media-anchor {
width: 100%;
height: 0px;
display: flex;
justify-content: flex-end;
}
.media-anchor .arrow-report {
position: relative;
left: 50px;
top: 8px;
}
@media screen and (min-width: 768px) {
[data-template=report] .report__header {
margin-inline: auto;
max-width: var(--max-w-cards);
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 4);
}
[data-template=report] .report__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: calc(var(--padding-body) * 2.5);
z-index: calc(var(--z-header) - 100);
}
[data-template=report] .report__content .report__txt {
grid-row: 1;
grid-column: 1;
max-width: var(--max-w-content);
}
[data-template=report] .report__content #report__medias {
z-index: calc(var(--z-header) - 100);
position: sticky;
top: calc(var(--header-h) + var(--padding-body));
align-self: start;
grid-row: 1;
grid-column: 2;
min-height: 100px;
}
[data-template=report] .report__content #arrow__medias {
z-index: calc(var(--z-header) - 100);
position: sticky;
top: calc(var(--header-h) + var(--padding-body));
align-self: start;
grid-row: 1;
grid-column: 2;
transform: rotate(180deg);
transform-origin: center;
}
[data-template=report] .report__content #arrow__medias span {
position: relative;
left: 26px;
top: calc(var(--spacing) * -5);
margin-top: calc(var(--spacing) * 3.25);
margin-bottom: calc(var(--spacing) * 4);
}
[data-template=report] #toggle-panel {
position: fixed;
@ -3000,7 +2946,6 @@ main .page__header .description-medium {
transition: left ease-in-out 0.5s;
}
[data-template=report] #report {
padding-left: calc(var(--padding-body) * 2);
transition: padding-left ease-in-out 0.5s;
}
[data-template=report] .panel-open #report__aside {
@ -3026,16 +2971,16 @@ main .page__header .description-medium {
.report__header .report__title-group .title {
text-transform: uppercase;
font-weight: normal;
font-size: var(--fs-big);
font-size: var(--fs-medium);
line-height: var(--leading-tight);
font-weight: normal;
font-weight: 500;
margin-top: calc(var(--spacing) * 1);
text-wrap: balance;
}
.report__header .report__title-group .subtitle {
font-size: var(--fs-big);
font-size: var(--fs-medium);
line-height: var(--leading-tight);
font-weight: normal;
font-weight: 500;
text-wrap: balance;
}
.report__header figure {
@ -3058,6 +3003,7 @@ main .page__header .description-medium {
grid-row: 2;
grid-column: 1;
align-self: end;
font-size: var(--fs-small);
border-bottom: var(--border-light);
align-items: flex-start;
}
@ -3085,7 +3031,9 @@ main .page__header .description-medium {
}
.report__content .section-content {
padding-bottom: calc(var(--spacing) * 3);
padding-left: calc(var(--padding-body) * 1.5);
padding-right: calc(var(--padding-body) * 1.5);
margin-bottom: calc(var(--spacing) * 4);
}
.report__content .section-content:target {
padding-top: calc(var(--header-h) + var(--spacing) * 2);
@ -3096,12 +3044,39 @@ main .page__header .description-medium {
}
}
.report__content .section-title {
max-width: var(--max-w-content);
margin-inline: auto;
margin-bottom: calc(var(--spacing) * 2);
font-size: var(--fs-medium);
margin-bottom: var(--spacing);
font-weight: normal;
font-weight: 500;
text-transform: uppercase;
text-wrap: balance;
max-width: 42ch;
max-width: var(--max-w-content);
color: var(--color-accent);
}
.report__content .section-txt {
max-width: var(--max-w-content);
margin-inline: auto;
}
.report__content .subsection-w-media {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--padding-body);
margin-bottom: calc(var(--spacing) * 3);
position: relative;
}
.report__content .subsection-txt {
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
}
.report__content .media {
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: 0px;
}
.report__content p {
margin: calc(var(--spacing) * 0.5) 0;