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

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

File diff suppressed because one or more lines are too long

62
assets/css/template/_report.scss
View file

@ -55,26 +55,11 @@
[data-template="report"] { [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);
}
.report__content {
}
#toggle-panel { #toggle-panel {
position: fixed; position: fixed;
top: var(--header-h); top: var(--header-h);
@ -137,19 +122,35 @@
// HEADER ------------------------------------------------------------------------- // HEADER -------------------------------------------------------------------------
.report__header { .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; display: grid;
column-gap: var(--padding-inner); column-gap: var(--padding-inner);
row-gap: calc(var(--spacing)*1);
grid-template-columns: 65% 35%; grid-template-columns: 65% 35%;
grid-template-rows: auto auto 1fr; grid-template-rows: auto auto 1fr;
position: relative; position: relative;
padding: var(--padding-body);
border: 1px solid var(--color-txt);
border-radius: var(--radius-small);
.report__title-group { .report__title-group {
grid-row: 1; grid-row: 1;
grid-column: span 2; grid-column: span 2;
margin-bottom: calc(var(--spacing)*1);
.title { .title {
text-transform: uppercase; text-transform: uppercase;
@ -199,18 +200,21 @@
} }
.btn--group {
position: relative; }
grid-row: 3;
grid-column: 1/3;
.report__btns{
max-width: var(--max-w-cards);
margin-inline: auto;
display: flex; display: flex;
justify-content: start; justify-content: start;
flex-wrap: wrap; flex-wrap: wrap;
align-items: start; align-items: start;
gap: calc(var(--spacing)*0.25); gap: calc(var(--spacing)*0.25);
}
} }
@ -223,13 +227,13 @@
.report__content { .report__content {
margin-top: calc(var(--spacing) * 4);
.section-content { .section-content {
// min-height: calc(100vh - var(--header-h)); // min-height: calc(100vh - var(--header-h));
padding-left: calc(var(--padding-body)*1.5); padding-left: calc(var(--padding-body)*1.5);
padding-right: 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);
&:target{ &:target{
padding-top: calc(var(--header-h) + var(--spacing)*2); padding-top: calc(var(--header-h) + var(--spacing)*2);
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); } @media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
@ -258,21 +262,24 @@
max-width: var(--max-w-content); max-width: var(--max-w-content);
margin-inline: auto; margin-inline: auto;
} }
.subsection-w-media{ .subsection-w-media{
display: grid; display: grid;
grid-template-columns: 1fr 1fr; grid-template-columns: 1fr 1fr;
gap: var(--padding-body); gap: var(--padding-body);
margin-bottom: calc(var(--spacing)*3); margin-bottom: calc(var(--spacing)*4);
position: relative; position: relative;
} }
.subsection-txt { .subsection-txt {
min-height: calc(100vh - var(--header-h));
max-width: var(--max-w-content); max-width: var(--max-w-content);
padding-left: var(--padding-inner); padding-left: var(--padding-inner);
padding-right: var(--padding-inner); padding-right: var(--padding-inner);
padding-bottom: calc(var(--spacing)*6);
} }
.media{ .media{
@ -281,7 +288,8 @@
padding-left: var(--padding-inner); padding-left: var(--padding-inner);
padding-right: var(--padding-inner); padding-right: var(--padding-inner);
position: sticky; position: sticky;
top: 0px; top: calc(var(--header-h) + var(--spacing));
align-self: start;
} }
@ -312,6 +320,8 @@
.caption{ .caption{
font-size: var(--fs-small); font-size: var(--fs-small);
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1; line-height: 1.1;
} }

8
site/templates/report.php
View file

@ -78,6 +78,8 @@
</aside> </aside>
<article id="report"> <article id="report">
<header class="report__header"> <header class="report__header">
<div class="report__title-group"> <div class="report__title-group">
<p class="page__type">Rapport</p> <p class="page__type">Rapport</p>
@ -98,7 +100,10 @@
</div> </div>
</dl> </dl>
<div class="btn--group">
</header>
<div class="report__btns btn--group">
<button class="btn--bold"> <button class="btn--bold">
<a href="#"> <a href="#">
<span class="icon"><?= svg('assets/icons/pdf.svg') ?></span> <span class="icon"><?= svg('assets/icons/pdf.svg') ?></span>
@ -123,7 +128,6 @@
</div> </div>
</div> </div>
</div> </div>
</header>
<div class="report__content"> <div class="report__content">