Compare commits

..

6 Commits

Author SHA1 Message Date
Antoine M
0f47ea2c93 RESPONSIVE FIX flex content
All checks were successful
continuous-integration/drone/push Build is passing
2025-09-03 12:23:58 +02:00
Antoine M
0712df55f9 RESPONSIVE FIX flex content 2025-09-03 12:23:42 +02:00
Antoine M
63e6133b50 RESPONSIVE FIX flex content 2025-09-03 12:23:35 +02:00
Antoine M
8ad64920b8 RESPONSIVE FIX flex content 2025-09-03 12:23:27 +02:00
Antoine M
00d1384c3f RESPONSIVE FIX card background height 2025-09-03 12:23:02 +02:00
Antoine M
e752b6d0a5 RESPONSIVE FIX flex content 2025-09-03 12:22:45 +02:00
6 changed files with 16 additions and 21 deletions

View File

@ -1,5 +1,5 @@
.chapter-section { .chapter-section {
@apply relative flex items-center justify-between gap-8 2xl:gap-12 !my-0; @apply relative lg:flex items-center justify-between gap-8 2xl:gap-12 !my-0;
@apply py-32 xl:py-32 2xl:py-48 px-32; @apply py-32 xl:py-32 2xl:py-48 px-32;
@apply max-w-screen-2xl mx-auto; @apply max-w-screen-2xl mx-auto;
@ -91,7 +91,7 @@
&__background { &__background {
@apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-full; @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 h-full;
z-index: 1; z-index: -1;
width: calc(100% - 30px); width: calc(100% - 30px);
&--right { &--right {

View File

@ -73,11 +73,11 @@
@apply relative; @apply relative;
.card-background { .card-background {
@apply absolute border-primary border bg-white top-20 left-8; @apply absolute border-primary border bg-white top-20 left-8;
height: 94%; height: 330px;
width: 104%; width: 104%;
transform: perspective(800px) rotateY(10deg) transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg) rotateX(1deg)
skewX(1deg) rotateZ(4deg) rotateX(1deg) scale(0.98) scale(0.98) translateY(-2px);
translateY(-2px);
z-index: 0; z-index: 0;
&::before { &::before {
@ -136,9 +136,8 @@
/* opacity: 0.5; */ /* opacity: 0.5; */
top: 100px; top: 100px;
height: calc(100% - 150px); height: calc(100% - 150px);
transform: translateY(100px) translateX(-50%) transform: translateY(100px) translateX(-50%) perspective(800px) skewX(1deg)
perspective(800px) skewX(1deg) rotateZ(-2deg) rotateZ(-2deg) rotateY(-4deg) scaleX(1.98);
rotateY(-4deg) scaleX(1.98);
} }
&__title { &__title {
@apply text-base font-extrabold uppercase pb-8 tracking-widest nunito; @apply text-base font-extrabold uppercase pb-8 tracking-widest nunito;
@ -148,9 +147,7 @@
} }
} }
:is(p, span, h1, h2, h3, h4, h5, h6):not( :is(p, span, h1, h2, h3, h4, h5, h6):not(.article-card *) {
.article-card *
) {
@apply text-white; @apply text-white;
} }
} }

View File

@ -54,9 +54,8 @@
@apply absolute border-primary border bg-white top-20 left-8; @apply absolute border-primary border bg-white top-20 left-8;
height: 94%; height: 94%;
width: 104%; width: 104%;
transform: perspective(800px) rotateY(10deg) transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg)
skewX(1deg) rotateZ(4deg) rotateX(1deg) rotateX(1deg) scale(0.98) translateY(-2px);
scale(0.98) translateY(-2px);
z-index: 0; z-index: 0;
&::before { &::before {
@ -90,7 +89,7 @@
} }
&__post-details { &__post-details {
@apply flex gap-8 pt-12; @apply md:flex gap-8 pt-12;
.label { .label {
@apply uppercase font-bold tracking-widest !mb-0; @apply uppercase font-bold tracking-widest !mb-0;

View File

@ -5,12 +5,11 @@
&:after { &:after {
@apply content-[""] absolute inset-0 bg-primary z-0 w-full h-full; @apply content-[""] absolute inset-0 bg-primary z-0 w-full h-full;
left: 50%; left: 50%;
transform: perspective(800px) rotateY(3deg) transform: perspective(800px) rotateY(3deg) rotateX(1deg) translateX(-50%);
rotateX(1deg) translateX(-50%);
} }
&__inner { &__inner {
@apply max-w-screen-3xl mx-auto grid grid-cols-1 md:grid-cols-2 gap-y-12 2xl:gap-x-32 py-24 xl:py-32 2xl:py-40 items-center relative z-10; @apply max-w-screen-3xl mx-auto grid grid-cols-1 lg:grid-cols-2 gap-y-12 2xl:gap-x-32 py-24 xl:py-32 2xl:py-40 items-center relative z-10;
} }
h1, h1,
h2, h2,

View File

@ -2,7 +2,7 @@
@apply bg-primary text-white py-16 items-center; @apply bg-primary text-white py-16 items-center;
&__inner { &__inner {
@apply grid grid-cols-1 lg:grid-cols-2; @apply lg:grid grid-cols-1 lg:grid-cols-2;
grid-template-columns: 61.8fr 38.2fr; grid-template-columns: 61.8fr 38.2fr;
} }

View File

@ -101,7 +101,7 @@ footer {
} }
} }
ul { ul {
@apply w-full flex gap-x-4 justify-between pt-12; @apply w-full flex flex-col lg:flex-row flex-wrap gap-x-4 justify-between pt-12;
li { li {
@apply text-primary; @apply text-primary;
} }