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;
.answers-visualiser {
@apply flex gap-4 p-0 m-0;
@apply flex flex-col md:flex-row gap-4 p-0 m-0;
.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;
width: auto;
z-index: -2;
@ -24,8 +24,6 @@
transform: translate(-50%, -50%);
}
&__behaviour-type-icon {
width: 70%;
height: 70%;

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

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