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

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

Browse source
This commit is contained in:
Julie Blanc 2026-01-30 12:27:44 +01:00
parent b3f985a41b
commit 453b29c246
11 changed files with 184 additions and 54 deletions
Download patch file Download diff file Expand all files Collapse all files

10
assets/css/components/_swiper.scss
View file

@ -9,9 +9,10 @@
--swiper-navigation-size: 32px;
color: var(--color-txt);
background-color: var(--color-bg);
background-color: red;
height: 100%;
width: var(--slide-padding);
top: 0px!important;
height: calc(100% - var(--spacing)*1);
// background-color: red;
svg {
@ -28,13 +29,13 @@
}
.swiper-button-prev {
left: 0px;
left: 0px!important;
top: 0px;
justify-content: flex-start;
}
.swiper-button-next {
right: 0px;
right: 0px!important;
top: 0px;
justify-content: flex-end;
@ -47,7 +48,8 @@
.swiper-pagination {
position: relative;
margin-top: calc(var(--spacing)*1);
margin-top: 0px!important;
margin-top: calc(var(--spacing)*0.5)!important;
.swiper-pagination-bullet {
width: 15px;

2
assets/css/partials/_site-header.scss
View file

@ -37,7 +37,7 @@
#site-title {
flex-grow: 2;
opacity: 0;
// opacity: 0;
svg{
width: 100px;
@media #{$small}{

55
assets/css/style.css
View file

@ -178,7 +178,6 @@ body.is-hidden .btn--back-to-top {
}
#site-header #site-title {
flex-grow: 2;
opacity: 0;
}
#site-header #site-title svg {
width: 100px;
@ -2131,9 +2130,10 @@ button.sort[data-sort-type=up] .arrow {
--swiper-navigation-size: 32px;
color: var(--color-txt);
background-color: var(--color-bg);
background-color: red;
height: 100%;
width: var(--slide-padding);
top: 0px !important;
height: calc(100% - var(--spacing) * 1);
}
.swiper .swiper-button-prev svg,
.swiper .swiper-button-next svg {
@ -2148,12 +2148,12 @@ button.sort[data-sort-type=up] .arrow {
opacity: 0.05;
}
.swiper .swiper-button-prev {
left: 0px;
left: 0px !important;
top: 0px;
justify-content: flex-start;
}
.swiper .swiper-button-next {
right: 0px;
right: 0px !important;
top: 0px;
justify-content: flex-end;
}
@ -2163,7 +2163,8 @@ button.sort[data-sort-type=up] .arrow {
}
.swiper .swiper-pagination {
position: relative;
margin-top: calc(var(--spacing) * 1);
margin-top: 0px !important;
margin-top: calc(var(--spacing) * 0.5) !important;
}
.swiper .swiper-pagination .swiper-pagination-bullet {
width: 15px;
@ -2283,7 +2284,6 @@ button.sort[data-sort-type=up] .arrow {
}
#site-header #site-title {
flex-grow: 2;
opacity: 0;
}
#site-header #site-title svg {
width: 100px;
@ -2677,7 +2677,6 @@ main .page__header .description-medium {
#home__investigations .card--article .time-alone {
display: block;
}
#home__investigations .card--article .description,
#home__investigations .card--article .dl,
#home__investigations .card--article .pin {
display: none;
@ -2782,6 +2781,7 @@ main .page__header .description-medium {
}
[data-template=investigation-summary] main #section__synthese {
max-width: var(--max-w-content);
margin-inline: auto;
}
[data-template=investigation-summary] main #section__synthese p + p {
margin-top: 0.5em;
@ -2893,6 +2893,25 @@ main .page__header .description-medium {
left: 0px;
}
}
.arrow-report {
font-size: 14px;
color: var(--color-txt-light);
width: 20px;
height: 20px;
}
.media-anchor {
width: 100%;
height: 0px;
display: flex;
justify-content: flex-end;
}
.media-anchor .arrow-report {
position: relative;
left: 50px;
top: 8px;
}
@media screen and (min-width: 768px) {
[data-template=report] .report__header {
margin-inline: auto;
@ -2903,7 +2922,7 @@ main .page__header .description-medium {
[data-template=report] .report__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--padding-body);
grid-gap: calc(var(--padding-body) * 2.5);
z-index: calc(var(--z-header) - 100);
}
[data-template=report] .report__content .report__txt {
@ -2920,6 +2939,20 @@ main .page__header .description-medium {
grid-column: 2;
min-height: 100px;
}
[data-template=report] .report__content #arrow__medias {
z-index: calc(var(--z-header) - 100);
position: sticky;
top: calc(var(--header-h) + var(--padding-body));
align-self: start;
grid-row: 1;
grid-column: 2;
transform: rotate(180deg);
transform-origin: center;
}
[data-template=report] .report__content #arrow__medias span {
position: relative;
left: 26px;
}
[data-template=report] #toggle-panel {
position: fixed;
top: var(--header-h);
@ -3049,6 +3082,8 @@ main .page__header .description-medium {
margin-bottom: var(--spacing);
font-weight: normal;
text-transform: uppercase;
text-wrap: balance;
max-width: 42ch;
}
.report__content p {
margin: calc(var(--spacing) * 0.5) 0;
@ -3071,6 +3106,10 @@ main .page__header .description-medium {
font-size: var(--fs-small);
line-height: 1.1;
}
.media .swiper {
width: calc(100% - 60px);
max-width: 600px;
}
#toggle-panel {
width: calc(var(--h-block) * 1);

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

File diff suppressed because one or more lines are too long

3
assets/css/template/_home.scss
View file

@ -144,14 +144,11 @@
}
.card--article {
// align-items: flex-start;
// justify-content: flex-start;
.time-alone {
display: block;
}
.description,
.dl,
.pin {
display: none;

1
assets/css/template/_investigation-summary.scss
View file

@ -80,6 +80,7 @@
#section__synthese {
max-width: var(--max-w-content);
margin-inline: auto;
p+p {
margin-top: 0.5em;

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

@ -49,6 +49,29 @@
}
.arrow-report{
font-size: 14px;
color: var(--color-txt-light);
width: 20px;
height: 20px;
}
.media-anchor{
width: 100%;
height: 0px;
display: flex;
justify-content: flex-end;
.arrow-report{
position: relative;
left: 50px;
top: 8px;
}
}
@media #{$small-up}{
[data-template="report"] {
@ -64,7 +87,7 @@
.report__content {
display: grid;
grid-template-columns: 1fr 1fr;
grid-gap: var(--padding-body);
grid-gap: calc(var(--padding-body)*2.5);
z-index: calc(var(--z-header) - 100);
.report__txt {
@ -83,6 +106,24 @@
grid-column: 2;
// border: var(--border-light);
min-height: 100px;
}
#arrow__medias{
z-index: calc(var(--z-header) - 100);
position: sticky;
top: calc(var(--header-h) + var(--padding-body));
align-self: start;
grid-row: 1;
grid-column: 2;
transform: rotate(180deg);
transform-origin: center;
span{
position: relative;
left: 26px;
}
}
}
@ -255,6 +296,8 @@
margin-bottom: var(--spacing);
font-weight: normal;
text-transform: uppercase;
text-wrap: balance;
max-width: 42ch;
}
p {
@ -286,6 +329,10 @@
line-height: 1.1;
}
.swiper{
width: calc(100% - 60px);
max-width: 600px;
}
}