Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refining css page

Browse Source
This commit is contained in:
Antoine M 2024-05-08 14:31:27 +02:00
parent 66572382c6
commit 17cdb33986
1 changed files with 36 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

47
src/assets/css/pages/Thematiques.scss
View File

@ -4,7 +4,7 @@
}
h1 {
@apply text-9xl;
@apply text-7xl sm:text-8xl md:text-9xl xl:text-9xl;
}
--swiper-pagination-bullet-horizontal-gap: 8px;
@ -15,37 +15,61 @@
opacity: 0.9;
scale: 1.2;
}
.page-title__span-construction {
@apply xl:text-5xl;
translate: 0 -20%;
@screen xl {
translate: 0 -50%;
}
}
.swiper-pagination-bullet-active {
border: 2px solid white;
scale: 1.5;
opacity: 1;
}
.swiper-pagination {
bottom: -120px !important;
bottom: -100px !important;
@screen md {
bottom: -120px !important;
}
}
.swiper-button-prev,
.swiper-button-next {
@apply bg-construction p-2 rounded-full w-auto;
// translate: 0 -100%;
aspect-ratio: 1/1;
&:after {
@apply w-8 h-8 block bg-contain bg-no-repeat bg-center;
content: "";
background-image: url("../../img/icons/arrow-next.svg");
}
@media screen and (max-width: 1279px) {
top: unset;
bottom: 0;
translate: 0 50%;
}
@screen sm {
bottom: 50% !important;
}
}
.swiper-button-prev {
left: -140px;
@apply lg:left-[-140px];
&:after {
transform: rotate(180deg);
}
}
.swiper-button-next {
right: -140px;
@apply lg:right-[-140px];
}
.swiper-container {
@apply mt-32 pb-24 w-full mx-auto overflow-visible;
max-width: 1200px;
width: calc(100% - 280px);
@apply lg:mt-20 xl:mt-32 pb-48 xl:pb-24 w-full mx-auto overflow-visible;
max-width: 1100px;
bottom: 0;
@screen lg {
width: calc(100% - 280px);
}
.swiper-slide {
@apply h-auto text-center;
@ -60,6 +84,7 @@
width: 100%;
border-width: 28px;
aspect-ratio: 18/9;
min-height: 250px;
img {
@apply h-full w-full object-cover object-center;
@ -67,14 +92,14 @@
}
&__title {
@apply my-0 absolute top-0 left-1/2 bg-construction px-2 py-1;
transform: translateX(-50%) translateY(-50%);
@apply my-0 absolute top-0 left-1/2 bg-construction px-6 py-2;
transform: translateX(-50%) translateY(-30%);
transition: transform 0.3s ease-in-out;
&:hover {
transform: translateX(-50%) scale(1.2);
transform: translateX(-50%) translateY(-50%) scale(1.2);
}
a {
@apply text-slate-900 text-4xl text-zuume no-underline block;
@apply text-slate-900 text-3xl text-zuume no-underline block;
}
}