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

horizontal scroll
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 17:07:18 +01:00
parent 65ffae5071
commit debbefb623
5 changed files with 188 additions and 32 deletions
Download patch file Download diff file Expand all files Collapse all files

50
assets/css/style.css
View file

@ -3070,14 +3070,7 @@ main .page__header .description-medium {
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 {
.report__content .subsection-w-media .media {
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
@ -3086,6 +3079,47 @@ main .page__header .description-medium {
top: calc(var(--header-h) + var(--spacing));
align-self: start;
}
.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 .subsection-w-hscroll {
position: relative;
margin-bottom: calc(var(--spacing) * 4);
}
.report__content .subsection-w-hscroll .horizontal-scroll {
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
align-items: center;
}
.report__content .subsection-w-hscroll .horizontal-scroll-wrapper {
display: flex;
flex-wrap: nowrap;
will-change: transform;
}
.report__content .subsection-w-hscroll .horizontal-scroll-slide {
flex-shrink: 0;
width: 90vw;
max-width: 700px;
padding: 0 calc(var(--spacing) * 1);
}
.report__content .subsection-w-hscroll .horizontal-scroll-slide figure, .report__content .subsection-w-hscroll .horizontal-scroll-slide img {
width: 100%;
}
.report__content .subsection-w-hscroll .horizontal-scroll-pagination {
position: fixed;
bottom: calc(var(--spacing) * 2);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
.report__content p {
margin: calc(var(--spacing) * 0.5) 0;
}

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

File diff suppressed because one or more lines are too long

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

@ -271,6 +271,18 @@
gap: var(--padding-body);
margin-bottom: calc(var(--spacing)*4);
position: relative;
.media{
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
}
}
@ -282,14 +294,45 @@
padding-bottom: calc(var(--spacing)*6);
}
.media{
margin-inline: auto;
max-width: var(--max-w-content);
padding-left: var(--padding-inner);
padding-right: var(--padding-inner);
position: sticky;
top: calc(var(--header-h) + var(--spacing));
align-self: start;
.subsection-w-hscroll{
position: relative;
margin-bottom: calc(var(--spacing)*4);
.horizontal-scroll{
height: 100vh;
width: 100vw;
overflow: hidden;
display: flex;
align-items: center;
}
.horizontal-scroll-wrapper{
display: flex;
flex-wrap: nowrap;
will-change: transform;
}
.horizontal-scroll-slide{
flex-shrink: 0;
width: 90vw;
max-width: 700px;
padding: 0 calc(var(--spacing) * 1);
figure, img{
width: 100%;
}
}
.horizontal-scroll-pagination{
position: fixed;
bottom: calc(var(--spacing) * 2);
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 8px;
z-index: 10;
}
}