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) {
.case {
height: calc(58px * 0.8);
width: calc(58px * 0.8);
height: calc(58px / 1.5);
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%;
display: grid;
padding: 0;
overflow: scroll;
grid-column-gap: 0;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr;
justify-items: center;
justify-content: center;
align-items: center;
overflow-x: hidden;
overflow-y: hidden;
}
footer .right .mail-to {
@ -56,7 +57,6 @@ footer .right .socials {
margin-left: 2%;
display: grid;
padding: 0;
overflow: scroll;
grid-column-gap: 0;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr;
@ -81,7 +81,6 @@ footer .right .socials {
margin-left: 2%;
display: grid;
padding: 0;
overflow: scroll;
grid-column-gap: 0;
grid-template-columns: repeat(5, 1fr);
grid-template-rows: 1fr 1fr;
@ -106,7 +105,6 @@ footer .right .socials {
margin-left: 2%;
display: grid;
padding: 0;
overflow: scroll;
grid-column-gap: 0;
grid-template-columns: repeat(7, 1fr);
grid-template-rows: 1fr 1fr;

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

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

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

@ -1,25 +1,38 @@
.line {
display: flex;
flex-direction: row;
width: calc(100% - 1em - 1em);
width: calc(500px - 1em - 1em);
height: 58px;
padding: 1em;
row-gap: 2em;
align-items: center;
justify-content: space-between;
}
.cases {
flex-direction: row;
display: flex;
width: 80%;
width: calc(80% - 1em);
height: 58px;
}
button {
width: calc(20% - 1em);
margin-left: 1em;
height: 58px;
padding: 0;
}
@media (max-width: 720px) {
.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);
}
}