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

sticky subsection media
All checks were successful
Deploy / Deploy to Production (push) Successful in 13s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-06 16:23:44 +01:00
parent ecd379dee4
commit 6e0183e295
4 changed files with 67 additions and 44 deletions
Download patch file Download diff file Expand all files Collapse all files

37
assets/css/style.css
View file

@ -2911,12 +2911,6 @@ main .page__header .description-medium {
}
}
@media screen and (min-width: 768px) {
[data-template=report] .report__header {
margin-inline: auto;
max-width: var(--max-w-content);
margin-top: calc(var(--spacing) * 3.25);
margin-bottom: calc(var(--spacing) * 4);
}
[data-template=report] #toggle-panel {
position: fixed;
top: var(--header-h);
@ -2956,17 +2950,24 @@ main .page__header .description-medium {
}
}
.report__header {
max-width: var(--max-w-cards);
margin-inline: auto;
margin-top: calc(var(--spacing) * 3.25);
margin-bottom: calc(var(--spacing) * 0.5);
display: grid;
-moz-column-gap: var(--padding-inner);
column-gap: var(--padding-inner);
row-gap: calc(var(--spacing) * 1);
grid-template-columns: 65% 35%;
grid-template-rows: auto auto 1fr;
position: relative;
padding: var(--padding-body);
border: 1px solid var(--color-txt);
border-radius: var(--radius-small);
}
.report__header .report__title-group {
grid-row: 1;
grid-column: span 2;
margin-bottom: calc(var(--spacing) * 1);
}
.report__header .report__title-group .title {
text-transform: uppercase;
@ -3019,10 +3020,10 @@ main .page__header .description-medium {
color: var(--color-txt-light);
padding-right: 1ch;
}
.report__header .btn--group {
position: relative;
grid-row: 3;
grid-column: 1/3;
.report__btns {
max-width: var(--max-w-cards);
margin-inline: auto;
display: flex;
justify-content: start;
flex-wrap: wrap;
@ -3030,10 +3031,13 @@ main .page__header .description-medium {
gap: calc(var(--spacing) * 0.25);
}
.report__content {
margin-top: calc(var(--spacing) * 4);
}
.report__content .section-content {
padding-left: calc(var(--padding-body) * 1.5);
padding-right: calc(var(--padding-body) * 1.5);
margin-bottom: calc(var(--spacing) * 4);
margin-bottom: calc(var(--spacing) * 6);
}
.report__content .section-content:target {
padding-top: calc(var(--header-h) + var(--spacing) * 2);
@ -3062,13 +3066,15 @@ main .page__header .description-medium {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--padding-body);
margin-bottom: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 4);
position: relative;
}
.report__content .subsection-txt {
min-height: calc(100vh - var(--header-h));
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing) * 6);
}
.report__content .media {
margin-inline: auto;
@ -3076,7 +3082,8 @@ main .page__header .description-medium {
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: 0px;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
}
.report__content p {
margin: calc(var(--spacing) * 0.5) 0;
@ -3097,6 +3104,8 @@ main .page__header .description-medium {
}
.media .caption {
font-size: var(--fs-small);
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1;
}
.media .swiper {