quentin/MastermindReact
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

responsiveness OK !

Browse Source
This commit is contained in:
quentin 2025-03-05 15:02:00 +01:00
parent 11cfaf0fb7
commit d43c16c0a9
4 changed files with 29 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/objects/Case/case.css
View File

@ -34,7 +34,13 @@
@media (max-width: 720px) { @media (max-width: 720px) {
.case { .case {
height: calc(58px * 0.8); height: calc(58px / 1.5);
width: calc(58px * 0.8); width: calc(58px / 1.5);
} }
.case > .circle {
width: calc(3em / 1.5);
height: calc(3em / 1.5);
}
} }

6
src/objects/Footer/Footer.css
View File

@ -30,13 +30,14 @@ footer .right {
margin-left: 2%; margin-left: 2%;
display: grid; display: grid;
padding: 0; padding: 0;
overflow: scroll;
grid-column-gap: 0; grid-column-gap: 0;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
justify-items: center; justify-items: center;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
overflow-x: hidden;
overflow-y: hidden;
} }
footer .right .mail-to { footer .right .mail-to {
@ -56,7 +57,6 @@ footer .right .socials {
margin-left: 2%; margin-left: 2%;
display: grid; display: grid;
padding: 0; padding: 0;
overflow: scroll;
grid-column-gap: 0; grid-column-gap: 0;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
@ -81,7 +81,6 @@ footer .right .socials {
margin-left: 2%; margin-left: 2%;
display: grid; display: grid;
padding: 0; padding: 0;
overflow: scroll;
grid-column-gap: 0; grid-column-gap: 0;
grid-template-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;
@ -106,7 +105,6 @@ footer .right .socials {
margin-left: 2%; margin-left: 2%;
display: grid; display: grid;
padding: 0; padding: 0;
overflow: scroll;
grid-column-gap: 0; grid-column-gap: 0;
grid-template-columns: repeat(7, 1fr); grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1fr 1fr; grid-template-rows: 1fr 1fr;

4
src/objects/Game/Game.css
View File

@ -30,13 +30,13 @@
@media (max-width: 720px) { @media (max-width: 720px) {
#game { #game {
width: 500px; width: calc(500px / 1.5);
flex-direction: column-reverse; flex-direction: column-reverse;
gap: 2rem; gap: 2rem;
} }
#drop-zone { #drop-zone {
width: calc(500px*0.8); width: calc(500px / 1.5);
height: 500px; height: 500px;
} }

21
src/objects/Line/Line.css
View File

@ -1,25 +1,38 @@
.line { .line {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
width: calc(100% - 1em - 1em); width: calc(500px - 1em - 1em);
height: 58px; height: 58px;
padding: 1em; padding: 1em;
row-gap: 2em;
align-items: center;
justify-content: space-between;
} }
.cases { .cases {
flex-direction: row; flex-direction: row;
display: flex; display: flex;
width: 80%; width: calc(80% - 1em);
height: 58px;
} }
button { button {
width: calc(20% - 1em); width: calc(20% - 1em);
margin-left: 1em; height: 58px;
padding: 0; padding: 0;
} }
@media (max-width: 720px) { @media (max-width: 720px) {
.line { .line {
height: clamp(calc(58px * 0.3), calc(58px * 0.3 + 3px), calc(58px * 0.8)); height: calc(58px / 1.5);
width: calc(500px / 1.5 - 1em - 1em);
}
button {
height: calc(58px / 1.5);
}
.cases {
height: calc(58px / 1.5);
} }
} }