Move footer to top (wait, what?)

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%;
 }

src/App.tsx

@@ -23,17 +23,26 @@ function App() {
   return (
     <>
       <h1>hello wordl</h1>
-      <input
+      <footer className="App-footer">
-        type="range"
+        by <a href="https://twitter.com/chordbug">@chordbug</a>, inspired by{" "}
-        min="4"
+        <a href="https://www.powerlanguage.co.uk/wordle/">wordle</a>. report
-        max="11"
+        issues <a href="https://github.com/lynn/hello-wordl">here</a>
-        value={wordLength}
+      </footer>
-        onChange={(e) => {
+      <div className="App-option">
-          const length = Number(e.target.value);
+        <label htmlFor="wordLength">Letters:</label>
-          setTarget(randomTarget(length));
+        <input
-          setWordLength(length);
+          type="range"
-        }}
+          min="4"
-      ></input>
+          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>
     </>
   );
 }