From c9366168a729ccd7b1f58580b3ff61608721585b Mon Sep 17 00:00:00 2001 From: Antoine M Date: Wed, 15 Oct 2025 16:24:59 +0200 Subject: [PATCH] RESPONSIVE FIXES --- resources/css/blocks/chapter-section.css | 2 +- resources/css/blocks/dernieres-dynamiques.css | 10 ++--- resources/css/blocks/revues-precedentes.css | 41 ++++++++++++------- resources/css/layout/footer.css | 2 +- resources/css/libs/swiper.css | 4 +- 5 files changed, 36 insertions(+), 23 deletions(-) diff --git a/resources/css/blocks/chapter-section.css b/resources/css/blocks/chapter-section.css index c021ddc..cfcc1ab 100644 --- a/resources/css/blocks/chapter-section.css +++ b/resources/css/blocks/chapter-section.css @@ -1,5 +1,5 @@ .chapter-section { - @apply relative lg:flex items-center justify-between gap-8 2xl:gap-12 !my-16; + @apply relative flex flex-col lg:flex-row items-center justify-between gap-8 2xl:gap-12 !my-16; @apply py-32 xl:py-32 2xl:py-48 px-4 md:px-20; @apply max-w-screen-2xl mx-auto; color: var(--content-box-text-color); diff --git a/resources/css/blocks/dernieres-dynamiques.css b/resources/css/blocks/dernieres-dynamiques.css index 7db48aa..507e3b4 100644 --- a/resources/css/blocks/dernieres-dynamiques.css +++ b/resources/css/blocks/dernieres-dynamiques.css @@ -1,5 +1,5 @@ .block-dernieres-dynamiques { - @apply bg-primary text-white pt-20 px-4 md:px-16; + @apply bg-primary text-white pt-2 md:pt-20 px-4 md:px-16; /* overflow: visible !important; */ overflow: hidden !important; @@ -8,7 +8,7 @@ } &__header { - @apply flex flex-wrap items-end justify-between gap-8 gap-y-2 uppercase text-4xl mb-12; + @apply flex flex-wrap items-end justify-between gap-8 gap-y-2 uppercase text-4xl mb-6 md:mb-12; .block-title { @apply flex grow items-end justify-between gap-8 uppercase text-2xl md:text-4xl lg:text-5xl; @@ -59,12 +59,12 @@ } &__issue-title { - @apply lg:text-5xl text-4xl uppercase pb-12; + @apply lg:text-5xl text-4xl uppercase pb-6 md:pb-12; line-height: 1.2; font-weight: 100 !important; } &__issue-content-wrapper { - @apply grid gap-12 lg:gap-36 pb-24 overflow-hidden lg:overflow-visible; + @apply grid gap-y-6 gap-12 lg:gap-36 pb-24 overflow-hidden lg:overflow-visible; @screen md { grid-template-columns: 61.8fr 38.2fr; } @@ -113,7 +113,7 @@ &__issue-description, &__issue-parution { - @apply mb-12; + @apply mb-0 md:mb-12; h4.title { @apply uppercase nunito text-lg font-bold pb-2 tracking-bigbig; diff --git a/resources/css/blocks/revues-precedentes.css b/resources/css/blocks/revues-precedentes.css index e68953b..ebac087 100644 --- a/resources/css/blocks/revues-precedentes.css +++ b/resources/css/blocks/revues-precedentes.css @@ -1,11 +1,12 @@ .block-revues-precedentes { @apply bg-carhop-blue-50 py-20; .block-revues-precedentes__header { + @apply px-4; } .swiper-actions-wrapper, .swiper-pagination-fraction, .swiper-pagination { - @apply px-20; + @apply px-4 md:px-20; } .swiper-wrapper { @apply mb-16; @@ -31,7 +32,8 @@ } .block-subtitle { - @apply text-5xl font-normal uppercase; + @apply text-4xl md:text-5xl font-normal uppercase text-center; + line-height: 1.2; } } @@ -40,7 +42,7 @@ } .card-revue { - @apply flex flex-col lg:grid lg:grid-cols-2 gap-y-2 md:gap-y-6 2xl:gap-y-16 pb-1 2xl:pb-12 gap-x-12 2xl:gap-x-24 lg:px-20 px-4; + @apply flex flex-col lg:grid lg:grid-cols-2 gap-y-2 md:gap-y-6 2xl:gap-y-16 pb-0 gap-x-12 2xl:gap-x-24 lg:px-20 px-4; @screen lg { grid-template-columns: 65fr 35fr; } @@ -66,8 +68,8 @@ &__content { @apply mx-0; h4.title { - @apply uppercase text-3xl md:text-5xl lg:text-5xl font-normal pb-8; - line-height: 1.02; + @apply uppercase text-3xl md:text-5xl lg:text-5xl font-normal pb-4 md:pb-8; + line-height: 1.2; } h5.edito-title { @apply text-2xl font-bold uppercase pb-8; @@ -78,11 +80,18 @@ @apply relative w-full; .card-background { - @apply absolute border-primary border bg-white top-20 left-8; - width: 104%; - height: 300px; - transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg) - rotateX(1deg) scale(0.98) translateY(-40px); + @apply absolute border-primary border bg-white top-8 md:top-20 left-4 md:left-8; + height: 260px; + width: 100%; + transform: rotate(3deg) scale(0.98); + + @screen lg { + width: 104%; + height: 300px; + transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg) + rotateX(1deg) scale(0.98) translateY(-40px); + } + z-index: 0; &::before { @@ -96,17 +105,21 @@ } } - &__issue-thumbnail, + /* &__issue-thumbnail, .card-background { height: 300px; - } + } */ &__issue-thumbnail { @apply bg-white border-primary border relative; /* transform: perspective(800px) rotateY(10deg) skewX(2deg); */ position: relative; z-index: 10; - height: 300px; + + height: 260px; + @screen lg { + height: 300px; + } img { width: calc(100% - 42px); @@ -120,7 +133,7 @@ } &__post-details { - @apply md:flex gap-8 pt-12; + @apply md:flex gap-8 md:pt-12; .label { @apply uppercase font-bold tracking-bigbig !mb-0 text-primary; } diff --git a/resources/css/layout/footer.css b/resources/css/layout/footer.css index 1b4c165..f3adc46 100644 --- a/resources/css/layout/footer.css +++ b/resources/css/layout/footer.css @@ -1,5 +1,5 @@ footer { - @apply w-full mx-auto px-12 pb-32; + @apply w-full mx-auto px-4 md:px-12 pb-32; .section-title { @apply text-lg nunito uppercase font-bold tracking-widest mb-6; diff --git a/resources/css/libs/swiper.css b/resources/css/libs/swiper.css index c9b3796..b0c530a 100644 --- a/resources/css/libs/swiper.css +++ b/resources/css/libs/swiper.css @@ -9,14 +9,14 @@ } .swiper-pagination { - @apply h-fit flex gap-4 lg:gap-8 2xl:gap-12 !static; + @apply h-fit flex gap-2 md:gap-4 lg:gap-8 2xl:gap-12 !static mb-4; top: unset !important; bottom: 0px !important; z-index: 100 !important; } .swiper-pagination-bullet { - @apply bg-transparent w-full !py-6 relative; + @apply bg-transparent w-full !py-2 md:!py-6 relative; &:after { @apply content-[''] bg-primary w-full absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;