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

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

@ -55,23 +55,8 @@
[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 {
}
@ -137,19 +122,35 @@
// 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;
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__title-group {
grid-row: 1;
grid-column: span 2;
margin-bottom: calc(var(--spacing)*1);
.title {
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;
justify-content: start;
flex-wrap: wrap;
align-items: start;
gap: calc(var(--spacing)*0.25);
}
}
@ -223,13 +227,13 @@
.report__content {
margin-top: calc(var(--spacing) * 4);
.section-content {
// min-height: calc(100vh - var(--header-h));
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);
&:target{
padding-top: calc(var(--header-h) + var(--spacing)*2);
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
@ -258,21 +262,24 @@
max-width: var(--max-w-content);
margin-inline: auto;
}
.subsection-w-media{
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;
}
.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);
}
.media{
@ -281,7 +288,8 @@
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: 0px;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
}
@ -312,6 +320,8 @@
.caption{
font-size: var(--fs-small);
color: var(--color-txt-light);
font-weight: 500;
line-height: 1.1;
}