Antoine/carhop__carhop-theme__DEV
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

RESPONSIVE FIXES
All checks were successful
continuous-integration/drone/push Build is passing
Details

Browse Source
This commit is contained in:
Antoine M 2025-10-15 16:24:59 +02:00
parent ebd6ad8c19
commit c9366168a7
5 changed files with 36 additions and 23 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
resources/css/blocks/chapter-section.css
View File

@ -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);

10
resources/css/blocks/dernieres-dynamiques.css
View File

@ -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;

41
resources/css/blocks/revues-precedentes.css
View File

@ -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;
}

2
resources/css/layout/footer.css
View File

@ -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;

4
resources/css/libs/swiper.css
View File

@ -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;