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{ .description{
margin-top: calc(var(--spacing)*1); margin-top: calc(var(--spacing)*0.5);
// font-size: var(--fs-small); // font-size: var(--fs-small);
display: -webkit-box; display: -webkit-box;

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

@ -1,37 +1,35 @@
#home__investigations{ #home__investigations{
// .col-right{
// position: relative;
// overflow: visible;
// background-color: red;
// }
// .home-investigations-slider{ .swiper-button-prev,
// position: relative; .swiper-button-next{
// overflow: hidden; --swiper-navigation-size: 32px;
// margin: 0 60px; color: var(--color-txt);
// } background-color: var(--color-bg);
height: 100%;
width: 60px;
// .swiper-button-prev, svg{
// .swiper-button-next{ width: 14px;
// --swiper-navigation-size: 32px; }
// color: var(--color-txt);
// position: absolute;
// top: 50%;
// transform: translateY(-50%);
// z-index: 10;
// &:after{ &.swiper-button-disabled {
// font-size: var(--swiper-navigation-size); opacity: 1;
// } svg{
// } opacity: 0.05;
}
}
}
// .swiper-button-prev{ .swiper-button-prev{
// left: 0; left: 0px;
// } top: 0px;
}
// .swiper-button-next{ .swiper-button-next{
// right: 0; right: 0px;
// } top: 0px;
}
.swiper-slide{ .swiper-slide{
padding-left: 60px; 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{ .page__type{
height: calc(var(--h-block)*0.75); height: calc(var(--h-block)*0.75);

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

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

43
assets/css/style.css
View file

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

6
site/templates/home.php
View file

@ -21,7 +21,7 @@
<div class="col-left"> <div class="col-left">
<h2 class="title-section">Enquêtes</h2> <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. 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> </p>
<button class="btn--bold-inline"> <button class="btn--bold-inline">
@ -142,7 +142,7 @@ foreach ($latestInvestigations as $investigation):
<div class="col-left"> <div class="col-left">
<h2 class="title-section">Impacts</h2> <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. 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> </p>
<button class="btn--bold-inline"> <button class="btn--bold-inline">
@ -208,7 +208,7 @@ foreach ($latestInvestigations as $investigation):
<div class="col-left"> <div class="col-left">
<h2 class="title-section">Dossiers</h2> <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. 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> </p>
<button class="btn--bold-inline"> <button class="btn--bold-inline">