franpcode/Hangman-game-with-React
1
0
Fork 0
mirror of https://github.com/FranP-code/Hangman-game-with-React.git synced 2025-10-13 00:42:32 +00:00
Code Issues 1 Packages Projects Releases Wiki Activity

responsive design done

Browse Source
This commit is contained in:
Francisco Pessano
2021-10-20 21:35:11 -03:00
parent 4765b26389
commit 3ec90bebaf
9 changed files with 154 additions and 12 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
public/css/index.css
View File

@@ -39,6 +39,29 @@ header h2 {
justify-content: space-between;
}
@media (max-width: 991.98px) {
.game-container {
flex-direction: column;
justify-content: center;
align-items: center;
}
.game-container .column-1 {
order: 10;
}
.game-container .column-1 .hangman img {
width: 30vw;
}
.game-container .column-2 {
order: 0;
margin-bottom: 10vh;
display: flex;
flex-direction: column;
align-items: center;
}
}
/*@media (max-width: 576px) {
}*/
.hangman {
user-select: none;
}
@@ -74,6 +97,19 @@ header h2 {
margin-left: 3vw;
}
@media (max-width: 991.98px) {
.word .letter {
font-size: 10vw;
}
.word .counter {
align-self: flex-end;
}
}
@media (max-width: 576px) {
.word .counter {
font-size: 10vw;
}
}
.current-score {
display: flex;
flex-direction: row-reverse;
@@ -102,8 +138,6 @@ header h2 {
justify-content: space-around;
align-items: center;
box-sizing: border-box;
padding-top: 10vh;
padding-bottom: 10vh;
}
.categories-container .categories button, .categories-container .categories select {
height: 10vh;
@@ -250,7 +284,16 @@ header h2 {
margin-bottom: 0vh !important;
}
@media (max-width: 991.98px) {
.categories-container .categories {
padding: 0;
}
.categories-container .categories button, .categories-container .categories select {
font-size: 4vw !important;
}
}
.defeat, .victory {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
left: 0;
top: 0;
@@ -259,7 +302,7 @@ header h2 {
display: flex;
align-items: center;
justify-content: center;
font-size: 80pt;
font-size: 7vw;
background-color: rgba(0, 0, 0, 0.775);
user-select: none;
}
@@ -276,12 +319,20 @@ header h2 {
color: #58ff6b;
}
@media (max-width: 991.98px) {
.defeat, .victory {
height: 100%;
width: 100%;
}
}
.loading {
position: absolute;
left: 0;
top: 0;
width: 100vw;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background-color: #fff;
display: flex;
align-items: center;
@@ -293,7 +344,7 @@ header h2 {
}
.letters-registered {
margin: 0px 5vw;
padding: 0px 5vw;
display: flex;
align-items: center;
font-family: "Times New Roman", Times, serif;

2
public/css/index.css.map
View File

@@ -1 +1 @@
{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;ACfR;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EAEA;;;AClCR;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;ACnJhB;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AC9BJ;EACI;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;AChBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI;;;ACdR;EACI;EAEA;EACA;EACA;;AAEA;EAII,OAFO;EAGP,QAHO;EAKP;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA","file":"index.css"}
{"version":3,"sourceRoot":"","sources":["../sass/index.scss","../sass/_header.scss","../sass/_game-container.scss","../sass/_hangman.scss","../sass/_word.scss","../sass/_current-score.scss","../sass/_categories.scss","../sass/_defeat-victory.scss","../sass/_loading.scss","../sass/_letters-registered.scss","../sass/_letter-input.scss"],"names":[],"mappings":";AAAA;EACI;EACA;;;ACFJ;EACI;EAEA;EAEA;EACA;EACA;EACA;;AAEA;EDHA;EACA;EAIA;EACA;;ACGA;EDTA;EACA;EAIA;EACA;ECMI;EACA;EAEA;;;ACtBR;EAEI;EACA;EAEA;;AAMA;EACI;EACA;EAEA;;;AAIR;EAEI;IAEI;IACA;IACA;;EAEA;IACI;;EAII;IAEI;;EAKZ;IACI;IACA;IAEA;IACA;IACA;;;AAKZ;;AAAA;AClDA;EAEI;;AAEA;EACI;;;ACLR;EJkBI;EACA;EIhBA;EAEA;EACA;EAEA;EAEA;EACA;;AAEA;EACI;EACA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EAEA;EAEA;;;AAIR;EAIQ;IAEI;;EAGJ;IACI;;;AAKZ;EAIQ;IAEI;;;AC3DZ;EAEI;EAEA;ELGA;EACA;EKAA;EAEA;;AAEA;EACI;;;ACbR;EAEI;;AAEA;EAEI;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EAEA;EACA;EACA;EACA;EAEA;;AAKA;EACI;EACA;EAEA;EACA;EAEA;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;AA0BJ;EArBI,OAFuD;EAIvD,kBAoBc;EAnBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAYZ;EA3BI,OAFuD;EAIvD,kBA0Bc;EAzBd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAkBZ;EAjCI,OAFuD;EAIvD,kBAgCc;EA/Bd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAwBZ;EAvCI,OAyCY;EAvCZ,kBAsCc;EArCd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA+BZ;EA9CI,OAFuD;EAIvD,kBA6Cc;EA5Cd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAqCZ;EApDI,OAsDY;EApDZ,kBAmDc;EAlDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AA4CZ;EA3DI,OAFuD;EAIvD,kBA0Dc;EAzDd;EAEA;EAEA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAmDhB;EACI;EAEA;EACA;;AAEA;EAEI;;AAIR;EACI;;AAIJ;EACI;EACA;;AAEA;EAEI;;AAGJ;EAEI;;;AAMhB;EAIQ;IACI;;EAEA;IAEI;;;AClKhB;EACI;EACA;EACA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EAEA;EAEA;EAEA;;AAEA;EACI;EACA;;;AAIR;EACI;;;AAGJ;EACI;;;AAGJ;EAEI;IAEI;IACA;;;ACvCR;EACI;EACA;EACA;EAEA;EACA;EAEA;EACA;EAEA;EAEA;EACA;EACA;;AAEA;EACI;EACA;;;ACnBR;EACI;EAEA;EAEA;EAEA;EACA;EACA;EAEA;;AAEA;EACI;;;ACdR;EACI;EAEA;EACA;EACA;;AAEA;EAII,OAFO;EAGP,QAHO;EAKP;EACA;EAEA;EACA;EACA;EAEA;EACA;EACA","file":"index.css"}

20
public/sass/_categories.scss
View File

@@ -23,8 +23,8 @@
box-sizing: border-box;
padding-top: 10vh;
padding-bottom: 10vh;
// padding-top: 10vh;
//padding-bottom: 10vh;
button, select {
height: 10vh;
@@ -149,4 +149,20 @@
}
}
}
}
@media (max-width: 991.98px) {
.categories-container {
.categories {
padding: 0;
button, select {
font-size: 4vw !important;
}
}
}
}

12
public/sass/_defeat-victory.scss
View File

@@ -1,4 +1,5 @@
.defeat, .victory {
font-family: Arial, Helvetica, sans-serif;
position: absolute;
left: 0;
top: 0;
@@ -11,7 +12,7 @@
align-items: center;
justify-content: center;
font-size: 80pt;
font-size: 7vw;
background-color: rgba(0, 0, 0, 0.775);
@@ -29,4 +30,13 @@
.victory {
color: rgb(88, 255, 107);
}
@media (max-width: 991.98px) {
.defeat, .victory {
height: 100%;
width: 100%;
}
}

35
public/sass/_game-container.scss
View File

@@ -17,6 +17,41 @@
}
}
@media (max-width: 991.98px) {
.game-container {
flex-direction: column;
justify-content: center;
align-items: center;
.column-1 {
order: 10;
.hangman {
img {
width: 30vw;
}
}
}
.column-2 {
order: 0;
margin-bottom: 10vh;
display: flex;
flex-direction: column;
align-items: center;
}
}
}
/*@media (max-width: 576px) {
}*/
@import 'hangman';
@import 'word';
@import 'current-score';

2
public/sass/_letters-registered.scss
View File

@@ -1,5 +1,5 @@
.letters-registered {
margin: 0px 5vw;
padding: 0px 5vw;
display: flex;

5
public/sass/_loading.scss
View File

@@ -3,9 +3,12 @@
left: 0;
top: 0;
width: 100vw;
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
background-color: #fff;
display: flex;

27
public/sass/_word.scss
View File

@@ -34,4 +34,31 @@
margin-left: 3vw;
}
}
@media (max-width: 991.98px) {
.word {
.letter {
font-size: 10vw;
}
.counter {
align-self: flex-end;
}
}
}
@media (max-width: 576px) {
.word {
.counter {
font-size: 10vw;
}
}
}