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

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

Browse source
This commit is contained in:
Julie Blanc 2026-01-27 19:58:53 +01:00
parent 8a4f9d6b64
commit 1ea9f36aa1
9 changed files with 249 additions and 36 deletions
Download patch file Download diff file Expand all files Collapse all files

55
assets/css/components/_swipper.scss Normal file
View file

@ -0,0 +1,55 @@
#home__investigations{
// .col-right{
// position: relative;
// overflow: visible;
// background-color: red;
// }
// .home-investigations-slider{
// position: relative;
// overflow: hidden;
// margin: 0 60px;
// }
// .swiper-button-prev,
// .swiper-button-next{
// --swiper-navigation-size: 32px;
// color: var(--color-txt);
// position: absolute;
// top: 50%;
// transform: translateY(-50%);
// z-index: 10;
// &:after{
// font-size: var(--swiper-navigation-size);
// }
// }
// .swiper-button-prev{
// left: 0;
// }
// .swiper-button-next{
// right: 0;
// }
.swiper-slide{
padding-left: 60px;
padding-right: 60px;
}
.swiper-pagination{
position: relative;
margin-top: calc(var(--spacing)*1);
.swiper-pagination-bullet{
width: 15px;
height: 4px;
border-radius: 2px;
background: var(--color-txt-light);
}
.swiper-pagination-bullet-active{
background: var(--color-txt);
}
}
}

33
assets/css/style.css
View file

@ -1633,6 +1633,24 @@ button.sort[data-sort-type=up] .arrow {
aspect-ratio: inherit;
}
}
#home__investigations .swiper-slide {
padding-left: 60px;
padding-right: 60px;
}
#home__investigations .swiper-pagination {
position: relative;
margin-top: calc(var(--spacing) * 1);
}
#home__investigations .swiper-pagination .swiper-pagination-bullet {
width: 15px;
height: 4px;
border-radius: 2px;
background: var(--color-txt-light);
}
#home__investigations .swiper-pagination .swiper-pagination-bullet-active {
background: var(--color-txt);
}
#site-header {
z-index: var(--z-header);
--gap: 3ch;
@ -1956,7 +1974,9 @@ main .page__header .description-medium {
}
.section--home .section--inner {
display: grid;
grid-template-columns: 50% 50%;
--gap: calc(var(--padding-body)*2);
grid-template-columns: repeat(2, calc((100% - var(--gap)) * 0.5));
grid-gap: var(--gap);
}
.section--home .col-left {
height: 100%;
@ -1968,7 +1988,6 @@ main .page__header .description-medium {
.section--home .col-right {
width: 100%;
height: 100%;
background-color: yellow;
}
.section--home .title-section {
font-size: var(--fs-medium);
@ -1983,14 +2002,8 @@ main .page__header .description-medium {
margin-bottom: calc(var(--spacing) * 1.5);
}
#home__investigations .container-cards {
max-width: var(--max-w-container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: calc(var(--padding-body) * 1.5);
margin-bottom: 10vh;
#home__investigations .card--article .description, #home__investigations .card--article .dl {
font-size: var(--fs-small);
}
#home__description .section--inner {

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

File diff suppressed because one or more lines are too long

2
assets/css/style.scss
View file

@ -30,7 +30,7 @@
@import "components/card-impact";
@import "components/card-folder";
@import "components/card-open-graph";
@import "components/swipper";
@import "partials/site-header";
@import "partials/site-menu";

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

@ -9,7 +9,9 @@
.section--inner{
display: grid;
grid-template-columns: 50% 50%;
--gap: calc(var(--padding-body)*2);
grid-template-columns: repeat(2, calc((100% - var(--gap))*0.5));
grid-gap: var(--gap);
}
@ -24,7 +26,6 @@
.col-right{
width: 100%;
height: 100%;
background-color: yellow;
}
@ -45,16 +46,17 @@
}
#home__investigations{
.container-cards{
max-width: var(--max-w-container);
margin: 0 auto;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
grid-auto-rows: minmax(100px, auto);
grid-gap: calc(var(--padding-body)*1.5);
margin-bottom: 10vh;
.card--article{
.description, .dl{
font-size: var(--fs-small);
}
}
}
#home__description{