enhancing responsiveness

This commit is contained in:
Antoine M 2024-05-14 17:02:39 +02:00
parent 0b4a17be08
commit 5acb6ca59b
7 changed files with 14 additions and 10 deletions

View File

@ -1,6 +1,7 @@
.editor_inner_content { .editor_inner_content {
@apply text-xl; @apply text-xl;
@apply max-w-screen-md mx-auto px-4 md:px-8 pt-32 xl:p-32 pb-0 text-white; @apply w-full max-w-screen-md mx-auto px-4 md:px-8 pt-32 xl:p-32 pb-0 text-white;
box-sizing: border-box;
.page-title { .page-title {
@apply flex flex-col lg:flex-row gap-8 lg:items-end mb-12; @apply flex flex-col lg:flex-row gap-8 lg:items-end mb-12;
&__title { &__title {
@ -33,7 +34,7 @@
@apply mt-4 mb-6; @apply mt-4 mb-6;
} }
h1 { h1 {
@apply text-8xl tracking-wide; @apply text-4xl md:text-8xl tracking-wide;
line-height: 0.8; line-height: 0.8;
} }
h2 { h2 {
@ -42,7 +43,7 @@
ul li { ul li {
list-style: square; list-style: square;
@apply pb-8; @apply pb-1;
&::marker { &::marker {
@apply text-construction; @apply text-construction;
} }

View File

@ -3,7 +3,6 @@
} }
.footer { .footer {
@apply px-10 py-24 xl:p-32 w-screen relative z-10 text-slate-900; @apply px-10 py-24 xl:p-32 w-screen relative z-10 text-slate-900;
margin: 10rem calc(50% - 50vw) -50px calc(50% - 50vw) !important; margin: 10rem calc(50% - 50vw) -50px calc(50% - 50vw) !important;
transform: translateY(30px); transform: translateY(30px);

View File

@ -17,7 +17,8 @@
flex flex
pl-8 pl-8
my-0 my-0
w-80 w-72
md:w-80
items-center; items-center;
transform: skew(-6deg); transform: skew(-6deg);

View File

@ -1,7 +1,10 @@
.marquee { .marquee {
@apply w-screen bg-construction p-4 py-10 text-black text-zuume uppercase text-6xl xl:text-7xl font-bold; @apply w-screen bg-construction p-4 py-10 text-black text-zuume uppercase text-6xl xl:text-7xl font-bold;
margin: 2rem calc(50% - 50vw) !important;
rotate: -2deg; rotate: -2deg;
translate: -20px;
@screen md {
margin: 2rem calc(50% - 50vw) !important;
}
div { div {
@apply flex; @apply flex;

View File

@ -30,7 +30,7 @@
} }
} }
&__content { &__content {
@apply mt-40 xl:mt-0; @apply mt-44 xl:mt-0;
.cover_worker { .cover_worker {
@apply mx-auto; @apply mx-auto;
transform: translate(0%, -60%); transform: translate(0%, -60%);

View File

@ -6,7 +6,7 @@
transition: 0.3s; transition: 0.3s;
.screen__content { .screen__content {
@apply pb-6; @apply pb-6 mt-12;
h1 { h1 {
@apply text-3xl; @apply text-3xl;
} }

View File

@ -1,5 +1,5 @@
.page-container--welcome { .page-container--welcome {
@apply bg-lhoist flex flex-col items-center justify-center text-center; @apply bg-lhoist flex flex-col items-center justify-center text-center pb-24 md:pb-0;
min-height: 100dvh; min-height: 100dvh;
.application-logo { .application-logo {
@ -17,7 +17,7 @@
} }
} }
.interaction-buttons { .interaction-buttons {
@apply flex flex-col md:flex-row items-stretch gap-6; @apply flex flex-col md:flex-row items-stretch gap-y-2 gap-x-6;
.cta--start, .cta--start,
.language-select { .language-select {