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