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 {
|
.Settings-setting label {
|
||||||
margin-inline-start: 8px;
|
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>
|
<h1>
|
||||||
<span style={hard ? { color: "#e66" } : {}}>hell</span>o wordl
|
<span style={hard ? { color: "#e66" } : {}}>hell</span>o wordl
|
||||||
</h1>
|
</h1>
|
||||||
<div style={{ position: "absolute", right: 5, top: 5 }}>
|
<div className="top-right">
|
||||||
{page !== "game" ? (
|
{page !== "game" ? (
|
||||||
<a href="#" onClick={() => setPage("game")}>
|
<a
|
||||||
Close
|
className="emoji-link"
|
||||||
|
href="#"
|
||||||
|
onClick={() => setPage("game")}
|
||||||
|
title="Close"
|
||||||
|
aria-label="Close"
|
||||||
|
>
|
||||||
|
❌
|
||||||
</a>
|
</a>
|
||||||
) : (
|
) : (
|
||||||
<>
|
<>
|
||||||
<a href="#" onClick={() => setPage("about")}>
|
<a
|
||||||
Help
|
className="emoji-link"
|
||||||
|
href="#"
|
||||||
|
onClick={() => setPage("about")}
|
||||||
|
title="About"
|
||||||
|
aria-label="About"
|
||||||
|
>
|
||||||
|
❓
|
||||||
</a>
|
</a>
|
||||||
{" • "}
|
<a
|
||||||
<a href="#" onClick={() => setPage("settings")}>
|
className="emoji-link"
|
||||||
Settings
|
href="#"
|
||||||
|
onClick={() => setPage("settings")}
|
||||||
|
title="Settings"
|
||||||
|
aria-label="Settings"
|
||||||
|
>
|
||||||
|
⚙️
|
||||||
</a>
|
</a>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in a new issue