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

optimizing responsive

Browse Source
This commit is contained in:
Antoine M 2024-03-20 10:39:29 +01:00
parent 415eff029c
commit df6977a820
4 changed files with 18 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/assets/css/components/game/Score.scss
View File

@ -2,9 +2,9 @@
@apply absolute bottom-4 left-4 z-10; @apply absolute bottom-4 left-4 z-10;
.answers-visualiser { .answers-visualiser {
@apply flex flex-col md:flex-row gap-4 p-0 m-0; @apply flex flex-col md:flex-row gap-y-3 gap-x-4 p-0 m-0;
.answer { .answer {
@apply bg-white shrink-0 h-12 md:h-16 list-none relative flex items-center justify-center; @apply bg-white shrink-0 h-10 md:h-16 list-none relative flex items-center justify-center;
aspect-ratio: 1; aspect-ratio: 1;
width: auto; width: auto;
z-index: -2; z-index: -2;

2
src/assets/css/components/layout/Logo.scss
View File

@ -6,7 +6,7 @@
isolation: isolate; isolation: isolate;
img { img {
@apply w-24 h-auto py-6 px-12 z-10; @apply w-16 md:w-24 h-auto py-2 md:py-6 px-2 md:px-12 z-10;
} }
&:after { &:after {
@apply absolute block top-0 left-0 w-full h-full bg-white; @apply absolute block top-0 left-0 w-full h-full bg-white;

8
src/assets/css/components/layout/Page-container.scss
View File

@ -12,15 +12,21 @@
.screen { .screen {
@apply flex flex-col justify-center items-center relative overflow-hidden bg-lhoist; @apply flex flex-col justify-center items-center relative overflow-hidden bg-lhoist;
height: 100vh;
@screen md {
height: calc(99.8dvh - $margin * 2); height: calc(99.8dvh - $margin * 2);
width: calc(100% - $margin * 2); width: calc(100% - $margin * 2);
margin: $margin auto 0 auto; margin: $margin auto 0 auto;
}
&__content { &__content {
@apply text-center pt-12 px-16 w-fit mx-auto h-auto overflow-visible relative; @apply text-center pt-12 px-2 md:px-16 w-fit mx-auto h-auto overflow-visible relative;
background-image: url("../../../img/shapes-background/mask.svg"); background-image: url("../../../img/shapes-background/mask.svg");
background-position: center; background-position: center;
background-size: cover; background-size: cover;
box-sizing: border-box;
max-width: 90%;
// padding-bottom: -100px; // padding-bottom: -100px;
} }
} }

5
src/assets/css/pages/Rating.scss
View File

@ -86,9 +86,12 @@
} }
textarea { textarea {
@apply bg-slate-200 border-none min-w-96 p-4 text-lg my-4; @apply bg-slate-200 border-none p-4 text-lg my-4;
width: 80%;
@screen md {
min-width: 600px; min-width: 600px;
} }
}
.cta--back { .cta--back {
@apply mt-3 mx-auto; @apply mt-3 mx-auto;
} }