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

investigation → style siders + titles
All checks were successful
Deploy / Deploy to Production (push) Successful in 12s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-02-19 14:35:53 +01:00
parent c4724c8f8d
commit d51835a2c0
10 changed files with 136 additions and 236 deletions
Download patch file Download diff file Expand all files Collapse all files

47
assets/css/components/_investigation-hero.scss
View file

@ -4,7 +4,9 @@
left: 0;
padding-top: calc(var(--spacing)*4);
margin-bottom: calc(var(--spacing)*3);
max-width: var(--max-w-cards);
margin-inline: auto;
figcaption{
color: var(--color-txt-light);
@ -28,49 +30,6 @@
}
}
.swiper-slide{
position: relative;
}
.swiper-button-prev, .swiper-button-next{
--swiper-navigation-sides-offset: 32px;
--swiper-navigation-size: 32px;
@media #{$x-small}{
--swiper-navigation-sides-offset: 15px;
--swiper-navigation-size: 15px;
}
opacity: 0.8;
// Position buttons relative to the image (16/9 aspect ratio)
// Calculate: 50% of image height = 50% * (9/16) of width
// Image is 100vw wide, so center at: (100vw * 9/16) / 2
top: calc(100vw * 9 / 2 - var(--swiper-navigation-size)*0.5);
margin-top: 0;
svg{ color: white; }
}
.swiper-pagination{
position: static;
margin-top: calc(var(--spacing)*0.5);
padding: 0 var(--padding-body);
text-align: center;
.swiper-pagination-bullet{
width: 15px;
height: 4px;
border-radius: 2px;
background: var(--color-txt-light);
// opacity: 0.4;
}
.swiper-pagination-bullet-active{
background: var(--color-txt);
opacity: 0.8;
}
}
.player-container{
width: 100%;