commit 6f56242e3899b9eb0f088ae9612ea48cdbe143e7 Author: Rushil Umaretiya Date: Wed May 22 15:31:47 2024 -0400 initial commit diff --git a/index.css b/index.css new file mode 100644 index 0000000..20213d9 --- /dev/null +++ b/index.css @@ -0,0 +1,125 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + width: 100vw; + height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +} + +header { + font-family: "Playfair Display", serif; + font-size: 1.5rem; + font-weight: 700; + margin-bottom: 1rem; + transform: scale(-1, 1); +} +header p { + font-size: 1.2rem; + font-weight: 400; + margin-bottom: 1rem; +} + +.game { + display: flex; + flex-direction: column; + align-items: center; + gap: 1.5rem; + font-family: "Raleway", sans-serif; +} + +.board { + display: flex; + flex-direction: column; + gap: 0.5rem; +} +.board .row { + display: flex; + flex-direction: row; + gap: 0.5rem; +} +.board .row .cell { + width: 4rem; + height: 4rem; + border: 2px solid #9b9b9b; + display: flex; + justify-content: center; + align-items: center; + font-size: 2rem; + font-weight: 800; + transform: scale(-1, 1); +} +.board .row .cell.correct { + background-color: #6aaa64; + color: #fff; + border: none; +} +.board .row .cell.present { + background-color: #c9b458; + color: #fff; + border: none; +} +.board .row .cell.absent { + background-color: #787c7e; + color: #fff; + border: none; +} + +.letters { + display: flex; + flex-direction: column; + gap: 1rem; + font-size: 1.2rem; + font-weight: 100; +} +.letters .row { + display: flex; + flex-direction: row; + justify-content: center; + gap: 1rem; +} +.letters .row .letter { + width: 3rem; + height: 4rem; + border: 2px solid black; + display: flex; + justify-content: center; + align-items: center; + font-size: 1rem; + font-weight: 800; + cursor: pointer; + transition: all 0.3s; + transform: scale(-1, 1); +} +.letters .row .backspace { + width: 5rem; +} +.letters .row .backspace svg { + transform: scale(-1, 1); + width: 50%; +} +.letters .row .enter { + width: 5rem; +} + +footer { + font-family: "Playfair Display", serif; + font-size: 1rem; + font-weight: 400; + margin-top: 1rem; +} +footer a { + color: #000; + text-decoration: none; + font-weight: 700; + transition: all 0.3s; +} +footer a:hover { + color: #f00; +}/*# sourceMappingURL=index.css.map */ \ No newline at end of file diff --git a/index.css.map b/index.css.map new file mode 100644 index 0000000..0c2d856 --- /dev/null +++ b/index.css.map @@ -0,0 +1 @@ +{"version":3,"sources":["index.sass","index.css"],"names":[],"mappings":"AAOA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;ACNF;;ADQA;EACE,YAAA;EACA,aAAA;EAEA,aAAA;EACA,sBAAA;EACA,uBAAA;EACA,mBAAA;ACNF;;ADQA;EACE,sCAtBM;EAuBN,iBAAA;EACA,gBAAA;EACA,mBAAA;EACA,uBAAA;ACLF;ADOE;EACE,iBAAA;EACA,gBAAA;EACA,mBAAA;ACLJ;;ADOA;EACE,aAAA;EACA,sBAAA;EACA,mBAAA;EACA,WAAA;EACA,kCArCW;ACiCb;;ADMA;EACE,aAAA;EACA,sBAAA;EACA,WAAA;ACHF;ADKE;EACE,aAAA;EACA,mBAAA;EACA,WAAA;ACHJ;ADKI;EACE,WAAA;EACA,YAAA;EACA,yBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,uBAAA;ACHN;ADKM;EACE,yBA1DQ;EA2DR,WAAA;EACA,YAAA;ACHR;ADKM;EACE,yBAhEQ;EAiER,WAAA;EACA,YAAA;ACHR;ADKM;EACE,yBAnEO;EAoEP,WAAA;EACA,YAAA;ACHR;;ADKA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,iBAAA;EACA,gBAAA;ACFF;ADIE;EACE,aAAA;EACA,mBAAA;EACA,uBAAA;EACA,SAAA;ACFJ;ADII;EACE,WAAA;EACA,YAAA;EACA,uBAAA;EACA,aAAA;EACA,uBAAA;EACA,mBAAA;EACA,eAAA;EACA,gBAAA;EACA,eAAA;EACA,oBAAA;EACA,uBAAA;ACFN;ADII;EACE,WAAA;ACFN;ADIM;EACE,uBAAA;EACA,UAAA;ACFR;ADKI;EACE,WAAA;ACHN;;ADKA;EACE,sCAlHM;EAmHN,eAAA;EACA,gBAAA;EACA,gBAAA;ACFF;ADIE;EACE,WAAA;EACA,qBAAA;EACA,gBAAA;EACA,oBAAA;ACFJ;ADII;EACE,WAAA;ACFN","file":"index.css"} \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..4b63e74 --- /dev/null +++ b/index.html @@ -0,0 +1,126 @@ + + + + + + eldroW + + + + + + + +

Wordle.

wordle but backwards

+ +

ENTER

+ +

+ + + + diff --git a/index.sass b/index.sass new file mode 100644 index 0000000..d153dba --- /dev/null +++ b/index.sass @@ -0,0 +1,127 @@ +$serif: 'Playfair Display', serif +$sans-serif: 'Raleway', sans-serif + +$color-present: #c9b458 +$color-correct: #6aaa64 +$color-absent: #787c7e + +* + padding: 0 + margin: 0 + box-sizing: border-box + +body + width: 100vw + height: 100vh + + display: flex + flex-direction: column + justify-content: center + align-items: center + +header + font-family: $serif + font-size: 1.5rem + font-weight: 700 + margin-bottom: 1rem + transform: scale(-1, 1) + + p + font-size: 1.2rem + font-weight: 400 + margin-bottom: 1rem + +.game + display: flex + flex-direction: column + align-items: center + gap: 1.5rem + font-family: $sans-serif + +.board + display: flex + flex-direction: column + gap: .5rem + + .row + display: flex + flex-direction: row + gap: .5rem + + .cell + width: 4rem + height: 4rem + border: 2px solid #9b9b9b + display: flex + justify-content: center + align-items: center + font-size: 2rem + font-weight: 800 + transform: scale(-1, 1) + + &.correct + background-color: $color-correct + color: #fff + border: none + + &.present + background-color: $color-present + color: #fff + border: none + + &.absent + background-color: $color-absent + color: #fff + border: none + +.letters + display: flex + flex-direction: column + gap: 1rem + font-size: 1.2rem + font-weight: 100 + + .row + display: flex + flex-direction: row + justify-content: center + gap: 1rem + + .letter + width: 3rem + height: 4rem + border: 2px solid black + display: flex + justify-content: center + align-items: center + font-size: 1rem + font-weight: 800 + cursor: pointer + transition: all 0.3s + transform: scale(-1, 1) + + .backspace + width: 5rem + + svg + transform: scale(-1, 1) + width: 50% + + + .enter + width: 5rem + +footer + font-family: $serif + font-size: 1rem + font-weight: 400 + margin-top: 1rem + + a + color: #000 + text-decoration: none + font-weight: 700 + transition: all 0.3s + + &:hover + color: #f00 \ No newline at end of file