mirror of
https://github.com/Rushilwiz/eldrow.git
synced 2025-04-03 20:20:17 -04:00
initial commit
This commit is contained in:
commit
6f56242e38
125
index.css
Normal file
125
index.css
Normal file
|
|
@ -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 */
|
||||
1
index.css.map
Normal file
1
index.css.map
Normal file
|
|
@ -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"}
|
||||
126
index.html
Normal file
126
index.html
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>eldroW</title>
|
||||
<link rel="stylesheet" href="index.css" />
|
||||
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Raleway:ital,wght@0,100..900;1,100..900&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
</head>
|
||||
<body>
|
||||
<header>
|
||||
<h1>Wordle.</h1>
|
||||
<p>wordle but backwards</p>
|
||||
</header>
|
||||
|
||||
<div class="game">
|
||||
<div class="board">
|
||||
<div class="row">
|
||||
<div class="cell absent">Y</div>
|
||||
<div class="cell present">R</div>
|
||||
<div class="cell absent">R</div>
|
||||
<div class="cell">U</div>
|
||||
<div class="cell">C</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell">W</div>
|
||||
<div class="cell">A</div>
|
||||
<div class="cell">T</div>
|
||||
<div class="cell">E</div>
|
||||
<div class="cell">R</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
<div class="cell"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="letters">
|
||||
<div class="row">
|
||||
<div class="letter">P</div>
|
||||
<div class="letter">O</div>
|
||||
<div class="letter">I</div>
|
||||
<div class="letter">U</div>
|
||||
<div class="letter">Y</div>
|
||||
<div class="letter">T</div>
|
||||
<div class="letter">R</div>
|
||||
<div class="letter">E</div>
|
||||
<div class="letter">W</div>
|
||||
<div class="letter">Q</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="letter">L</div>
|
||||
<div class="letter">K</div>
|
||||
<div class="letter">J</div>
|
||||
<div class="letter">H</div>
|
||||
<div class="letter">G</div>
|
||||
<div class="letter">F</div>
|
||||
<div class="letter">D</div>
|
||||
<div class="letter">S</div>
|
||||
<div class="letter">A</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="letter enter">ENTER</div>
|
||||
<div class="letter">M</div>
|
||||
<div class="letter">N</div>
|
||||
<div class="letter">B</div>
|
||||
<div class="letter">V</div>
|
||||
<div class="letter">C</div>
|
||||
<div class="letter">X</div>
|
||||
<div class="letter">Z</div>
|
||||
<div class="letter backspace">
|
||||
<svg
|
||||
height="100%"
|
||||
width="100%"
|
||||
viewBox="0 0 44.18 44.18"
|
||||
xml:space="preserve"
|
||||
>
|
||||
<g>
|
||||
<path
|
||||
d="M10.625,5.09L0,22.09l10.625,17H44.18v-34H10.625z M42.18,37.09H11.734l-9.375-15l9.375-15H42.18V37.09z"
|
||||
/>
|
||||
<polygon
|
||||
points="18.887,30.797 26.18,23.504 33.473,30.797 34.887,29.383 27.594,22.09 34.887,14.797 33.473,13.383 26.18,20.676
|
||||
18.887,13.383 17.473,14.797 24.766,22.09 17.473,29.383 "
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer>
|
||||
<p>created by <a href="crucialnet.org">rushil</a></p>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
127
index.sass
Normal file
127
index.sass
Normal file
|
|
@ -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
|
||||
Loading…
Reference in New Issue
Block a user