Emoji links, cause phones are narrow and stuff
This commit is contained in:
parent
33709ce9b5
commit
e66fc036b9
15
src/App.css
15
src/App.css
|
@ -198,3 +198,18 @@ a:active {
|
|||
.Settings-setting label {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
||||
.top-right {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
right: 5px;
|
||||
}
|
||||
|
||||
.emoji-link {
|
||||
font-size: 150%;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.top-right a + a {
|
||||
margin-inline-start: 8px;
|
||||
}
|
||||
|
|
33
src/App.tsx
33
src/App.tsx
|
@ -46,19 +46,36 @@ function App() {
|
|||
<h1>
|
||||
<span style={hard ? { color: "#e66" } : {}}>hell</span>o wordl
|
||||
</h1>
|
||||
<div style={{ position: "absolute", right: 5, top: 5 }}>
|
||||
<div className="top-right">
|
||||
{page !== "game" ? (
|
||||
<a href="#" onClick={() => setPage("game")}>
|
||||
Close
|
||||
<a
|
||||
className="emoji-link"
|
||||
href="#"
|
||||
onClick={() => setPage("game")}
|
||||
title="Close"
|
||||
aria-label="Close"
|
||||
>
|
||||
❌
|
||||
</a>
|
||||
) : (
|
||||
<>
|
||||
<a href="#" onClick={() => setPage("about")}>
|
||||
Help
|
||||
<a
|
||||
className="emoji-link"
|
||||
href="#"
|
||||
onClick={() => setPage("about")}
|
||||
title="About"
|
||||
aria-label="About"
|
||||
>
|
||||
❓
|
||||
</a>
|
||||
{" • "}
|
||||
<a href="#" onClick={() => setPage("settings")}>
|
||||
Settings
|
||||
<a
|
||||
className="emoji-link"
|
||||
href="#"
|
||||
onClick={() => setPage("settings")}
|
||||
title="Settings"
|
||||
aria-label="Settings"
|
||||
>
|
||||
⚙️
|
||||
</a>
|
||||
</>
|
||||
)}
|
||||
|
|
Loading…
Reference in a new issue