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;
.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 {
@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;
width: auto;
z-index: -2;

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

@ -6,7 +6,7 @@
isolation: isolate;
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 {
@apply absolute block top-0 left-0 w-full h-full bg-white;

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

@ -12,15 +12,21 @@
.screen {
@apply flex flex-col justify-center items-center relative overflow-hidden bg-lhoist;
height: calc(99.8dvh - $margin * 2);
width: calc(100% - $margin * 2);
margin: $margin auto 0 auto;
height: 100vh;
@screen md {
height: calc(99.8dvh - $margin * 2);
width: calc(100% - $margin * 2);
margin: $margin auto 0 auto;
}
&__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-position: center;
background-size: cover;
box-sizing: border-box;
max-width: 90%;
// padding-bottom: -100px;
}
}

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

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