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

carrousel arrows outside
All checks were successful
Deploy / Deploy to Production (push) Successful in 5m16s
Details

Browse source
This commit is contained in:
Julie Blanc 2026-01-27 21:28:14 +01:00
parent 1ea9f36aa1
commit 951de348b8
8 changed files with 77 additions and 68 deletions
Download patch file Download diff file Expand all files Collapse all files

2
assets/css/components/_card-article.scss
View file

@ -44,7 +44,7 @@
}
.description{
margin-top: calc(var(--spacing)*1);
margin-top: calc(var(--spacing)*0.5);
// font-size: var(--fs-small);
display: -webkit-box;

54
assets/css/components/_swipper.scss
View file

@ -1,37 +1,35 @@
#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;
.swiper-button-prev,
.swiper-button-next{
--swiper-navigation-size: 32px;
color: var(--color-txt);
background-color: var(--color-bg);
height: 100%;
width: 60px;
// &:after{
// font-size: var(--swiper-navigation-size);
// }
// }
svg{
width: 14px;
}
// .swiper-button-prev{
// left: 0;
// }
&.swiper-button-disabled {
opacity: 1;
svg{
opacity: 0.05;
}
}
}
// .swiper-button-next{
// right: 0;
// }
.swiper-button-prev{
left: 0px;
top: 0px;
}
.swiper-button-next{
right: 0px;
top: 0px;
}
.swiper-slide{
padding-left: 60px;

24
assets/css/partials/_page-header.scss
View file

@ -1,27 +1,3 @@
// .page__header{
// max-width: var(--max-w-cards);
// margin: calc(var(--spacing)*1.5) auto;
// .page__title{
// font-size: var(--fs-big);
// font-weight: normal;
// text-transform: uppercase;
// }
// .page__description{
// margin-top: calc(var(--spacing)*1);
// p{
// font-size: var(--fs-medium);
// max-width: 54ch;
// }
// }
// }
.page__type{
height: calc(var(--h-block)*0.75);

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

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

43
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;
@ -1177,7 +1176,7 @@ button.sort[data-sort-type=up] .arrow {
text-decoration: none;
}
.card--article .description {
margin-top: calc(var(--spacing) * 1);
margin-top: calc(var(--spacing) * 0.5);
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
@ -1633,6 +1632,34 @@ button.sort[data-sort-type=up] .arrow {
aspect-ratio: inherit;
}
}
#home__investigations .swiper-button-prev,
#home__investigations .swiper-button-next {
--swiper-navigation-size: 32px;
color: var(--color-txt);
background-color: var(--color-bg);
height: 100%;
width: 60px;
}
#home__investigations .swiper-button-prev svg,
#home__investigations .swiper-button-next svg {
width: 14px;
}
#home__investigations .swiper-button-prev.swiper-button-disabled,
#home__investigations .swiper-button-next.swiper-button-disabled {
opacity: 1;
}
#home__investigations .swiper-button-prev.swiper-button-disabled svg,
#home__investigations .swiper-button-next.swiper-button-disabled svg {
opacity: 0.05;
}
#home__investigations .swiper-button-prev {
left: 0px;
top: 0px;
}
#home__investigations .swiper-button-next {
right: 0px;
top: 0px;
}
#home__investigations .swiper-slide {
padding-left: 60px;
padding-right: 60px;
@ -1681,7 +1708,6 @@ button.sort[data-sort-type=up] .arrow {
}
#site-header #site-title {
flex-grow: 2;
opacity: 0;
}
#site-header #site-title svg {
width: 100px;
@ -1982,7 +2008,6 @@ main .page__header .description-medium {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
.section--home .col-right {
@ -1996,12 +2021,20 @@ main .page__header .description-medium {
font-size: var(--fs-big);
margin-bottom: calc(var(--spacing) * 1);
}
.section--home .description {
.section--home .description-section {
font-size: var(--fs-medium);
line-height: 1.1;
margin-bottom: calc(var(--spacing) * 1.5);
}
#home__investigations .home-investigations-slider {
max-width: 500px;
height: auto;
}
#home__investigations .card--article {
align-items: flex-start;
justify-content: flex-start;
}
#home__investigations .card--article .description, #home__investigations .card--article .dl {
font-size: var(--fs-small);
}

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

File diff suppressed because one or more lines are too long

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

@ -1,6 +1,3 @@
.section--home{
margin: calc(var(--spacing)*3);
min-height: calc(100vh - var(--header-h)*2);
@ -19,7 +16,6 @@
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
}
@ -38,7 +34,7 @@
margin-bottom: calc(var(--spacing)*1);
}
.description{
.description-section{
font-size: var(--fs-medium);
line-height: 1.1;
margin-bottom: calc(var(--spacing)*1.5);
@ -50,7 +46,14 @@
#home__investigations{
.home-investigations-slider{
max-width: 500px;
height: auto;
}
.card--article{
align-items: flex-start;
justify-content: flex-start;
.description, .dl{
font-size: var(--fs-small);
}

6
site/templates/home.php
View file

@ -21,7 +21,7 @@
<div class="col-left">
<h2 class="title-section">Enquêtes</h2>
<p class="description">
<p class="description-section">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
</p>
<button class="btn--bold-inline">
@ -142,7 +142,7 @@ foreach ($latestInvestigations as $investigation):
<div class="col-left">
<h2 class="title-section">Impacts</h2>
<p class="description">
<p class="description-section">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
</p>
<button class="btn--bold-inline">
@ -208,7 +208,7 @@ foreach ($latestInvestigations as $investigation):
<div class="col-left">
<h2 class="title-section">Dossiers</h2>
<p class="description">
<p class="description-section">
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Earum quasi cupiditate iste odio adipisci quae, doloribus quas facilis eaque id labore nam, illum animi. Eaque iusto beatae error consequatur totam.
</p>
<button class="btn--bold-inline">