fixed mobile/bug

This commit is contained in:
Rushil Umaretiya 2024-05-28 23:55:11 -04:00
parent 887d8e86ad
commit 0c681d3a99
No known key found for this signature in database
GPG Key ID: 4E8FAF9C926AF959
4 changed files with 52 additions and 5 deletions

View File

@ -87,15 +87,24 @@ header p {
display: flex;
flex-direction: column;
gap: 1rem;
font-size: 1.2rem;
font-weight: 100;
}
@media (max-width: 786px) {
.letters {
gap: 0.5rem;
}
}
.letters .row {
display: flex;
flex-direction: row;
justify-content: center;
gap: 1rem;
}
@media (max-width: 786px) {
.letters .row {
gap: 0.5rem;
}
}
.letters .row .letter {
width: 3rem;
height: 4rem;
@ -109,6 +118,13 @@ header p {
transition: all 0.3s;
transform: scale(-1, 1);
}
@media (max-width: 786px) {
.letters .row .letter {
width: 1.75rem;
height: 3rem;
font-size: 0.8rem;
}
}
.letters .row .letter.correct {
background-color: #6aaa64 !important;
color: #fff;
@ -127,6 +143,11 @@ header p {
.letters .row #backspace {
width: 5rem;
}
@media (max-width: 786px) {
.letters .row #backspace {
width: 3rem;
}
}
.letters .row #backspace svg {
transform: scale(-1, 1);
width: 50%;
@ -134,6 +155,11 @@ header p {
.letters .row #enter {
width: 5rem;
}
@media (max-width: 786px) {
.letters .row #enter {
width: 3.5rem;
}
}
.toast {
background: black !important;

View File

@ -1 +1 @@
{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAWA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACVF;;ADYA;EACE,YAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;ACXF;;ADaA;EACE,sCA5BM;EA6BN,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACVF;ADYE;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;ACVJ;;ADYA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,kCA3CW;ACkCb;;ADWA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACRF;ADUE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;ACRJ;ADUI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;ACRN;ADUM;EACE,YAAA;EACA,uBAAA;ACRR;ADUM;EACE,YAAA;EACA,uBAAA;EACA,oBAAA;ACRR;ADUM;EACE,yBAzEQ;EA0ER,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBA/EQ;EAgFR,WAAA;EACA,YAAA;ACRR;ADUM;EACE,yBAlFO;EAmFP,WAAA;EACA,YAAA;ACRR;;ADUA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;ACPF;ADSE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACPJ;ADSI;EACE,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,uBAAA;ACPN;ADSM;EACE,oCAAA;EACA,WAAA;EACA,YAAA;ACPR;ADSM;EACE,yBApHY;EAqHZ,WAAA;EACA,YAAA;ACPR;ADSM;EACE,yBAvHW;EAwHX,WAAA;EACA,YAAA;ACPR;ADSI;EACE,WAAA;ACPN;ADSM;EACE,uBAAA;EACA,UAAA;ACPR;ADUI;EACE,WAAA;ACRN;;ADUA;EACE,4BAAA;EACA,YAAA;EACA,kCAjJW;EAkJX,gBAAA;EACA,6BAAA;EACA,kCAAA;ACPF;;ADSA;EACE,sCAxJM;EAyJN,eAAA;EACA,gBAAA;EACA,gBAAA;ACNF;ADQE;EACE,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;ACNJ;ADQI;EACE,WAAA;ACNN","file":"index.css"}
{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAgBA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACfF;;ADiBA;EACE,YAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;EAEA,yBAAA;KAAA,sBAAA;UAAA,iBAAA;AChBF;;ADkBA;EACE,sCAjCM;EAkCN,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACfF;ADiBE;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;ACfJ;;ADiBA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,kCAhDW;ACkCb;;ADgBA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACbF;ADeE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;ACbJ;ADeI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,YAAA;ACbN;ADeM;EACE,YAAA;EACA,uBAAA;ACbR;ADeM;EACE,YAAA;EACA,uBAAA;EACA,oBAAA;ACbR;ADeM;EACE,yBA9EQ;EA+ER,WAAA;EACA,YAAA;ACbR;ADeM;EACE,yBApFQ;EAqFR,WAAA;EACA,YAAA;ACbR;ADeM;EACE,yBAvFO;EAwFP,WAAA;EACA,YAAA;ACbR;;ADeA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,gBAAA;ACZF;AD5EE;EAoFF;IAOI,WAAA;ECXF;AACF;ADYE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACVJ;ADvFE;EA6FA;IAOI,WAAA;ECTJ;AACF;ADUI;EACE,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,uBAAA;ACRN;ADzGE;EAsGE;IAcI,cAAA;IACA,YAAA;IACA,iBAAA;ECPN;AACF;ADQM;EACE,oCAAA;EACA,WAAA;EACA,YAAA;ACNR;ADQM;EACE,yBAnIY;EAoIZ,WAAA;EACA,YAAA;ACNR;ADQM;EACE,yBAtIW;EAuIX,WAAA;EACA,YAAA;ACNR;ADQI;EACE,WAAA;ACNN;ADlIE;EAuIE;IAII,WAAA;ECLN;AACF;ADMM;EACE,uBAAA;EACA,UAAA;ACJR;ADOI;EACE,WAAA;ACLN;AD9IE;EAkJE;IAII,aAAA;ECJN;AACF;;ADKA;EACE,4BAAA;EACA,YAAA;EACA,kCAtKW;EAuKX,gBAAA;EACA,6BAAA;EACA,kCAAA;ACFF;;ADIA;EACE,sCA7KM;EA8KN,eAAA;EACA,gBAAA;EACA,gBAAA;ACDF;ADGE;EACE,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;ACDJ;ADGI;EACE,WAAA;ACDN","file":"index.css"}

View File

@ -72,7 +72,7 @@ let handleButtonPress = (button) => {
};
onkeyup = (event) => {
if (!running || runningAnim) {
if (!running || runningAnim || !event.key.match(/[a-z]/i)) {
return;
}

View File

@ -8,7 +8,12 @@ $color-absent: #787c7e
$key-color-present: #c9b458
$key-color-correct: #6aaa64
$key-color-absent: #787c7e
@mixin mobile
@media (max-width: 786px)
@content
*
padding: 0
margin: 0
@ -93,15 +98,20 @@ header
display: flex
flex-direction: column
gap: 1rem
font-size: 1.2rem
font-weight: 100
@include mobile
gap: 0.5rem
.row
display: flex
flex-direction: row
justify-content: center
gap: 1rem
@include mobile
gap: 0.5rem
.letter
width: 3rem
height: 4rem
@ -115,6 +125,11 @@ header
transition: all 0.3s
transform: scale(-1, 1)
@include mobile
width: 1.75rem
height: 3rem
font-size: .8rem
&.correct
background-color: $key-color-correct !important
color: #fff
@ -132,6 +147,9 @@ header
#backspace
width: 5rem
@include mobile
width: 3rem
svg
transform: scale(-1, 1)
@ -141,6 +159,9 @@ header
#enter
width: 5rem
@include mobile
width: 3.5rem
.toast
background: black !important
color: white