Compare commits

..

No commits in common. "0f47ea2c9312b90cd4a43c9516c8525b992a75d5" and "79dc04ed50533808edf7f72f0cc6db5b225d2ffc" have entirely different histories.

6 changed files with 21 additions and 16 deletions

View File

@ -1,5 +1,5 @@
.chapter-section { .chapter-section {
@apply relative lg:flex items-center justify-between gap-8 2xl:gap-12 !my-0; @apply relative 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: 330px; height: 94%;
width: 104%; width: 104%;
transform: perspective(800px) rotateY(10deg) skewX(1deg) rotateZ(4deg) rotateX(1deg) transform: perspective(800px) rotateY(10deg)
scale(0.98) translateY(-2px); skewX(1deg) rotateZ(4deg) rotateX(1deg) scale(0.98)
translateY(-2px);
z-index: 0; z-index: 0;
&::before { &::before {
@ -136,8 +136,9 @@
/* opacity: 0.5; */ /* opacity: 0.5; */
top: 100px; top: 100px;
height: calc(100% - 150px); height: calc(100% - 150px);
transform: translateY(100px) translateX(-50%) perspective(800px) skewX(1deg) transform: translateY(100px) translateX(-50%)
rotateZ(-2deg) rotateY(-4deg) scaleX(1.98); perspective(800px) skewX(1deg) rotateZ(-2deg)
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;
@ -147,7 +148,9 @@
} }
} }
:is(p, span, h1, h2, h3, h4, h5, h6):not(.article-card *) { :is(p, span, h1, h2, h3, h4, h5, h6):not(
.article-card *
) {
@apply text-white; @apply text-white;
} }
} }

View File

@ -54,8 +54,9 @@
@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) skewX(1deg) rotateZ(4deg) transform: perspective(800px) rotateY(10deg)
rotateX(1deg) scale(0.98) translateY(-2px); skewX(1deg) rotateZ(4deg) rotateX(1deg)
scale(0.98) translateY(-2px);
z-index: 0; z-index: 0;
&::before { &::before {
@ -89,7 +90,7 @@
} }
&__post-details { &__post-details {
@apply md:flex gap-8 pt-12; @apply 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,11 +5,12 @@
&: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) rotateX(1deg) translateX(-50%); transform: perspective(800px) rotateY(3deg)
rotateX(1deg) translateX(-50%);
} }
&__inner { &__inner {
@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; @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;
} }
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 lg:grid grid-cols-1 lg:grid-cols-2; @apply 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 flex-col lg:flex-row flex-wrap gap-x-4 justify-between pt-12; @apply w-full flex gap-x-4 justify-between pt-12;
li { li {
@apply text-primary; @apply text-primary;
} }