Antoine/lhoist-stay-safe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refining responsiveness (and firefox caracters not showing)

Browse Source
This commit is contained in:
Antoine M 2024-05-16 17:07:05 +02:00
parent 28e1838c7a
commit a93c6ea147
1 changed files with 12 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

19
src/assets/css/pages/Home.scss
View File

@ -1,7 +1,7 @@
$margin: 20px;
.page-container--home { .page-container--home {
.screen { .screen {
@apply bg-lhoistlight; @apply bg-lhoistlight;
.screen_worker_1, .screen_worker_1,
.screen_worker_2 { .screen_worker_2 {
@apply hidden lg:block fixed w-fit max-h-[50%] 2xl:max-h-[60%]; @apply hidden lg:block fixed w-fit max-h-[50%] 2xl:max-h-[60%];
@ -9,10 +9,11 @@
// max-height: 60%; // max-height: 60%;
// height: 60%; // height: 60%;
bottom: -3rem; bottom: -3rem;
bottom: $margin;
} }
.screen_worker_1 { .screen_worker_1 {
left: -60px; left: -60px;
width: 400px; width: 380px;
height: auto; height: auto;
@screen xl { @screen xl {
left: 3%; left: 3%;
@ -24,7 +25,7 @@
.screen_worker_2 { .screen_worker_2 {
@apply -right-16; @apply -right-16;
right: -100px; right: -100px;
width: 827px; width: 800px;
height: auto; height: auto;
@screen xl { @screen xl {
right: 0; right: 0;
@ -34,7 +35,11 @@
} }
} }
&__content { &__content {
@apply mt-44 xl:mt-0; @apply mt-36;
@media screen and (min-height: 926px) {
@apply mt-0;
}
.cover_worker { .cover_worker {
@apply mx-auto; @apply mx-auto;
transform: translate(0%, -60%); transform: translate(0%, -60%);
@ -46,14 +51,14 @@
@apply text-zuume; @apply text-zuume;
} }
.application_title { .application_title {
@apply text-6xl xl:text-9xl; @apply pb-3 text-8xl sm:text-6xl xl:text-9xl;
} }
.application_subtitle { .application_subtitle {
@apply text-6xl bg-construction py-2 w-fit mx-auto px-3 block md:mb-10 md:inline-block; @apply text-5xl sm:text-6xl bg-construction py-2 w-fit mx-auto px-3 block md:mb-10 md:inline-block;
transform: rotate(-3deg); transform: rotate(-3deg);
} }
.application_draft { .application_draft {
@apply bg-lhoistdark text-5xl text-white px-2 py-3 inline-block relative; @apply bg-lhoistdark text-4xl sm:text-5xl text-white px-2 py-3 inline-block relative;
@apply ml-6; @apply ml-6;
transform: rotate(3deg) translateY(-10px); transform: rotate(3deg) translateY(-10px);
} }