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

1
assets/css/components/_card-impact-small.scss
View file

@ -8,6 +8,7 @@
@include grid-content();
padding: var(--padding-inner) 0;
padding-bottom: calc(var(--spacing)*0.75);
&.has-link {
@include hover-card-line();

8
assets/css/components/_details-summary.scss
View file

@ -1,8 +0,0 @@
// @mixin details-summary(){
// }

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%;

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

@ -1,49 +1,11 @@
.swiper {
--slide-padding: 30px;
.swiper-button-prev,
.swiper-button-next {
--swiper-navigation-size: 32px;
.swiper-button-next{
color: var(--color-txt);
background-color: var(--color-bg);
height: 100%;
width: var(--slide-padding);
top: 0px!important;
height: calc(100% - var(--spacing)*1);
// background-color: red;
svg {
width: 14px;
svg {
width: 20px;
}
&.swiper-button-disabled {
opacity: 1;
svg {
opacity: 0.05;
}
}
}
.swiper-button-prev {
left: 0px!important;
top: 0px;
justify-content: flex-start;
}
.swiper-button-next {
right: 0px!important;
top: 0px;
justify-content: flex-end;
}
.swiper-slide {
padding-left: var(--slide-padding);
padding-right: var(--slide-padding);
}
.swiper-pagination {
@ -63,15 +25,28 @@
}
}
@media #{$x-small} {
.swiper-button-prev,
.swiper-button-next {
display: none;
}
.swiper-slide {
padding: 0px;
}
.swiper-wrapper {
height: max-content;
align-items: center;
}
.swiper-slide {
height: auto;
display: flex;
align-items: center;
justify-content: center;
}
// @media #{$x-small} {
// .swiper-button-prev,
// .swiper-button-next {
// display: none;
// }
// .swiper-slide {
// padding: 0px;
// }
// }
}