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 {
.screen {
@apply bg-lhoistlight;
.screen_worker_1,
.screen_worker_2 {
@apply hidden lg:block fixed w-fit max-h-[50%] 2xl:max-h-[60%];
@ -9,10 +9,11 @@
// max-height: 60%;
// height: 60%;
bottom: -3rem;
bottom: $margin;
}
.screen_worker_1 {
left: -60px;
width: 400px;
width: 380px;
height: auto;
@screen xl {
left: 3%;
@ -24,7 +25,7 @@
.screen_worker_2 {
@apply -right-16;
right: -100px;
width: 827px;
width: 800px;
height: auto;
@screen xl {
right: 0;
@ -34,7 +35,11 @@
}
}
&__content {
@apply mt-44 xl:mt-0;
@apply mt-36;
@media screen and (min-height: 926px) {
@apply mt-0;
}
.cover_worker {
@apply mx-auto;
transform: translate(0%, -60%);
@ -46,14 +51,14 @@
@apply text-zuume;
}
.application_title {
@apply text-6xl xl:text-9xl;
@apply pb-3 text-8xl sm:text-6xl xl:text-9xl;
}
.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);
}
.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;
transform: rotate(3deg) translateY(-10px);
}