RESPONSIVE Fix and optimization
This commit is contained in:
parent
59a829616a
commit
d6c012a7c8
|
|
@ -7,7 +7,9 @@
|
||||||
.swiper-pagination {
|
.swiper-pagination {
|
||||||
@apply px-12;
|
@apply px-12;
|
||||||
}
|
}
|
||||||
|
.swiper-wrapper {
|
||||||
|
@apply mb-0;
|
||||||
|
}
|
||||||
&__inner {
|
&__inner {
|
||||||
@apply max-w-screen-2xl mx-auto;
|
@apply max-w-screen-2xl mx-auto;
|
||||||
}
|
}
|
||||||
|
|
@ -25,11 +27,11 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__slider-content {
|
&__slider-content {
|
||||||
@apply py-16 pt-8 md:pt-16 lg:pt-32;
|
@apply py-16 pt-8 md:pt-16 2xl:pt-32;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-revue {
|
.card-revue {
|
||||||
@apply flex flex-col lg:grid lg:grid-cols-2 gap-y-2 md:gap-y-12 2xl:gap-y-16 pb-12 gap-x-12 2xl:gap-x-24 lg:px-12 px-4;
|
@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-12 px-4;
|
||||||
@screen lg {
|
@screen lg {
|
||||||
grid-template-columns: 61.8fr 38.2fr;
|
grid-template-columns: 61.8fr 38.2fr;
|
||||||
}
|
}
|
||||||
|
|
@ -41,8 +43,10 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
&__content {
|
&__content {
|
||||||
|
@apply mx-0;
|
||||||
h4.title {
|
h4.title {
|
||||||
@apply uppercase text-3xl md:text-6xl lg:text-4xl font-normal pb-8;
|
@apply uppercase text-3xl md:text-6xl lg:text-6xl font-normal pb-8;
|
||||||
|
line-height: 1.02;
|
||||||
}
|
}
|
||||||
h5.edito-title {
|
h5.edito-title {
|
||||||
@apply text-2xl font-bold uppercase pb-8;
|
@apply text-2xl font-bold uppercase pb-8;
|
||||||
|
|
@ -54,10 +58,10 @@
|
||||||
|
|
||||||
.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%;
|
|
||||||
width: 104%;
|
width: 104%;
|
||||||
|
height: 300px;
|
||||||
transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg)
|
transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg)
|
||||||
rotateX(1deg) scale(0.98) translateY(-2px);
|
rotateX(1deg) scale(0.98) translateY(-40px);
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
|
|
||||||
&::before {
|
&::before {
|
||||||
|
|
@ -66,18 +70,22 @@
|
||||||
height: calc(100% - 42px);
|
height: calc(100% - 42px);
|
||||||
left: 21px;
|
left: 21px;
|
||||||
top: 21px;
|
top: 21px;
|
||||||
|
|
||||||
z-index: 0;
|
z-index: 0;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&__issue-thumbnail,
|
||||||
|
.card-background {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
|
||||||
&__issue-thumbnail {
|
&__issue-thumbnail {
|
||||||
@apply bg-white border-primary border relative;
|
@apply bg-white border-primary border relative;
|
||||||
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
|
/* transform: perspective(800px) rotateY(10deg) skewX(2deg); */
|
||||||
height: 330px;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
height: 300px;
|
||||||
|
|
||||||
img {
|
img {
|
||||||
width: calc(100% - 42px);
|
width: calc(100% - 42px);
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user