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

script report
All checks were successful
Deploy / Deploy to Production (push) Successful in 11s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-29 12:18:16 +01:00
parent dbf9097701
commit 9ead1c51f4
7 changed files with 384 additions and 125 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/partials/_main-layout.scss
View file

@ -2,7 +2,7 @@ body{
min-height: 100dvh;
min-height: 100vh;
width: 100vw;
overflow-x: hidden;
// overflow-x: hidden;
display: flex;
flex-direction: column;

30
assets/css/style.css
View file

@ -2056,7 +2056,6 @@ body {
min-height: 100dvh;
min-height: 100vh;
width: 100vw;
overflow-x: hidden;
display: flex;
flex-direction: column;
}
@ -2464,9 +2463,9 @@ main .page__header .description-medium {
@media screen and (min-width: 768px) {
[data-template=report] .report__header {
margin-inline: auto;
margin-top: calc(var(--spacing) * 1);
max-width: var(--max-w-cards);
margin-bottom: calc(var(--spacing) * 2.5);
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 4);
}
[data-template=report] .report__content {
display: grid;
@ -2474,10 +2473,19 @@ main .page__header .description-medium {
grid-gap: var(--padding-body);
}
[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 {
background-color: yellow;
[data-template=report] .report__content #report__medias {
position: sticky;
top: calc(var(--header-h) + var(--padding-body));
align-self: start;
background-color: red;
grid-row: 1;
grid-column: 2;
border: var(--border-light);
min-height: 100px;
}
[data-template=report] #toggle-panel {
position: fixed;
@ -2566,7 +2574,6 @@ 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;
}
@ -2595,6 +2602,7 @@ main .page__header .description-medium {
.report__content .section-content {
margin-bottom: calc(var(--spacing) * 3);
border-bottom: 1px solid red;
}
.report__content .section-content:target {
padding-top: calc(var(--header-h) + var(--spacing) * 2);
@ -2627,7 +2635,7 @@ main .page__header .description-medium {
}
#report__aside {
--border-aside: var(--border-light);
--border-aside: 1px solid var(--color-txt);
}
#report__aside .panel__header {
display: flex;
@ -2656,10 +2664,10 @@ main .page__header .description-medium {
}
#report__aside .panel__header .close svg {
width: 10px;
fill: var(--grey-600);
fill: var(--color-txt);
}
#report__aside .panel__header:hover .close svg {
fill: var(--color-txt);
fill: var(--grey-200);
}
#report__aside .panel__content {
padding: var(--padding-body);
@ -2714,10 +2722,6 @@ main .page__header .description-medium {
#report {
--fig-outside: calc(var(--spacing)*2);
}
#report .container-figure {
width: 100%;
display: none;
}
#report .fig-simple {
height: calc(100vh - var(--header-h) - var(--spacing) * 2);
}

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

File diff suppressed because one or more lines are too long

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

@ -56,10 +56,9 @@
.report__header {
margin-inline: auto;
margin-top: calc(var(--spacing)*1);
max-width: var(--max-w-cards);
margin-bottom: calc(var(--spacing)*2.5);
margin-top: calc(var(--spacing) * 3);
margin-bottom: calc(var(--spacing) * 4);
}
.report__content {
@ -69,11 +68,21 @@
.report__txt {
grid-row: 1;
grid-column: 1;
max-width: var(--max-w-content);
}
.report__medias {
background-color: yellow;
#report__medias {
position: sticky;
top: calc(var(--header-h) + var(--padding-body));
align-self: start;
background-color: red;
grid-row: 1;
grid-column: 2;
border: var(--border-light);
min-height: 100px;
}
}
@ -91,7 +100,7 @@
position: fixed;
top: var(--header-h);
left: var(--padding-body);
width: var(--panel-w);
width: var(--panel-w);
height: calc(100vh - var(--header-h));
z-index: calc(var(--z-header) + 200);
background-color: var(--color-bg);
@ -187,7 +196,7 @@
grid-row: 2;
grid-column: 1;
align-self: end;
font-size: var(--fs-small);
// font-size: var(--fs-small);
border-bottom: var(--border-light);
align-items: flex-start;
@ -232,6 +241,7 @@
.section-content {
margin-bottom: calc(var(--spacing)*3);
border-bottom: 1px solid red;
&:target{
padding-top: calc(var(--header-h) + var(--spacing)*2);
@media #{$small}{ padding-top: calc(var(--header-h) + var(--spacing)*0.5); }
@ -271,7 +281,7 @@
}
#report__aside {
--border-aside: var(--border-light);
--border-aside: 1px solid var(--color-txt);
.panel__header {
display: flex;
@ -303,7 +313,7 @@
svg {
width: 10px;
fill: var(--grey-600);
fill: var(--color-txt);
}
@ -313,7 +323,7 @@
&:hover {
.close svg {
fill: var(--color-txt);
fill: var(--grey-200);
}
}
@ -396,10 +406,10 @@
#report {
--fig-outside: calc(var(--spacing)*2);
.container-figure {
width: 100%;
display: none;
}
// .container-figure {
// width: 100%;
// display: none;
// }
.fig-simple {
height: calc(100vh - var(--header-h) - var(--spacing)*2);