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

first responsive layer

Browse Source
This commit is contained in:
Antoine M 2024-03-20 10:16:29 +01:00
parent d985e8afc4
commit 3190519f65
2 changed files with 40 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
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 gap-4 p-0 m-0; @apply flex flex-col md:flex-row gap-4 p-0 m-0;
.answer { .answer {
@apply bg-white shrink-0 h-16 w-16 list-none relative flex items-center justify-center; @apply bg-white shrink-0 h-12 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;
@ -24,8 +24,6 @@
transform: translate(-50%, -50%); transform: translate(-50%, -50%);
} }
&__behaviour-type-icon { &__behaviour-type-icon {
width: 70%; width: 70%;
height: 70%; height: 70%;

43
src/assets/css/components/ui/Modal.scss
View File

@ -13,9 +13,20 @@ dialog {
overflow-y: scroll; overflow-y: scroll;
overflow-x: hidden; overflow-x: hidden;
max-width: 100vw;
margin: 0;
padding: 0;
width: 100%;
max-height: 100vh;
@screen md {
@apply m-auto;
max-width: 80vw; max-width: 80vw;
max-height: 90dvh; max-height: 90dvh;
} }
}
.game-modal { .game-modal {
&__close-button { &__close-button {
@ -24,16 +35,25 @@ dialog {
@apply w-6 h-6; @apply w-6 h-6;
} }
} }
overflow: visible; overflow: scroll;
} }
.modal-content-container { .modal-content-container {
@apply w-full @apply w-full
p-8 px-24 grid gap-x-8;
@apply pt-28 pb-16; grid
gap-x-8
md:grid-cols-2
p-8
md:px-24
pt-6
md:pt-28
pb-16;
box-sizing: border-box; box-sizing: border-box;
grid-template-columns: 1fr 1fr;
// grid-template-columns: 1fr 1fr;
&__background { &__background {
@apply h-full w-full absolute top-0 left-0 object-fill; @apply h-full w-full absolute top-0 left-0 object-fill;
@ -52,12 +72,21 @@ dialog {
&__content { &__content {
} }
&__cover { &__cover {
@apply px-6 py-12 bg-neutral-50; @apply px-6 py-8 md:py-12 bg-neutral-50;
align-self: center; align-self: center;
box-sizing: border-box; box-sizing: border-box;
order: -1;
@screen md {
order: unset;
}
img,
svg {
@apply max-h-56;
}
img { img {
@apply max-h-96; @apply md:max-h-96
@apply block w-full h-auto object-contain object-center; block w-full h-auto object-contain object-center;
} }
} }
} }