Move footer to top (wait, what?)
This commit is contained in:
parent
8cfdf3065b
commit
49221d965a
24
src/App.css
24
src/App.css
|
@ -94,7 +94,7 @@ body {
|
|||
color: white;
|
||||
}
|
||||
|
||||
@media(prefers-color-scheme: dark) {
|
||||
@media (prefers-color-scheme: dark) {
|
||||
body {
|
||||
background-color: #404040;
|
||||
color: #e0e0e0;
|
||||
|
@ -112,20 +112,21 @@ body {
|
|||
border: 2px solid rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.letter-elsewhere {
|
||||
border: 2px dotted rgba(0, 0, 0, 0.3);
|
||||
color: white;
|
||||
}
|
||||
|
||||
|
||||
.letter-absent {
|
||||
border: 2px solid transparent;
|
||||
background-color: rgb(142, 142, 142);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
a, a:visited {
|
||||
a,
|
||||
a:visited {
|
||||
color: #8080ff;
|
||||
}
|
||||
|
||||
|
@ -133,7 +134,18 @@ a:active {
|
|||
color: #cc77ff;
|
||||
}
|
||||
|
||||
.App-option {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.App-option input {
|
||||
margin-left: 0.5rem;
|
||||
}
|
||||
|
||||
.App-footer {
|
||||
margin-top: 1rem;
|
||||
margin: -1rem 0 2rem 0;
|
||||
font-size: 80%;
|
||||
}
|
||||
|
|
36
src/App.tsx
36
src/App.tsx
|
@ -23,17 +23,26 @@ function App() {
|
|||
return (
|
||||
<>
|
||||
<h1>hello wordl</h1>
|
||||
<input
|
||||
type="range"
|
||||
min="4"
|
||||
max="11"
|
||||
value={wordLength}
|
||||
onChange={(e) => {
|
||||
const length = Number(e.target.value);
|
||||
setTarget(randomTarget(length));
|
||||
setWordLength(length);
|
||||
}}
|
||||
></input>
|
||||
<footer className="App-footer">
|
||||
by <a href="https://twitter.com/chordbug">@chordbug</a>, inspired by{" "}
|
||||
<a href="https://www.powerlanguage.co.uk/wordle/">wordle</a>. report
|
||||
issues <a href="https://github.com/lynn/hello-wordl">here</a>
|
||||
</footer>
|
||||
<div className="App-option">
|
||||
<label htmlFor="wordLength">Letters:</label>
|
||||
<input
|
||||
type="range"
|
||||
min="4"
|
||||
max="11"
|
||||
id="wordLength"
|
||||
value={wordLength}
|
||||
onChange={(e) => {
|
||||
const length = Number(e.target.value);
|
||||
setTarget(randomTarget(length));
|
||||
setWordLength(length);
|
||||
}}
|
||||
></input>
|
||||
</div>
|
||||
<div className="App">
|
||||
<Game
|
||||
key={target}
|
||||
|
@ -45,11 +54,6 @@ function App() {
|
|||
}}
|
||||
/>
|
||||
</div>
|
||||
<footer className="App-footer">
|
||||
By <a href="https://twitter.com/chordbug">@chordbug</a>, inspired by{" "}
|
||||
<a href="https://www.powerlanguage.co.uk/wordle/">Wordle</a>,
|
||||
hosted on <a href="https://github.com/lynn/hello-wordl">GitHub</a>.
|
||||
</footer>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
|
Loading…
Reference in a new issue