diff options
| author | eug-vs <eugene@eug-vs.xyz> | 2022-05-04 13:03:11 +0300 |
|---|---|---|
| committer | eug-vs <eugene@eug-vs.xyz> | 2022-05-04 13:03:11 +0300 |
| commit | 34cd013fd6d35e6e45bde65d6fe21622340b652f (patch) | |
| tree | 9e6ec9a899acecd8dca05233a8ad94229183e0bc | |
| parent | 997999bf618ea4c4fc8c4f6a27534afa97f3731a (diff) | |
| download | chrono-cube-ui-34cd013fd6d35e6e45bde65d6fe21622340b652f.tar.gz | |
feat: use code tag in helper text
| -rw-r--r-- | src/components/Timer.tsx | 16 | ||||
| -rw-r--r-- | src/style.css | 10 |
2 files changed, 24 insertions, 2 deletions
diff --git a/src/components/Timer.tsx b/src/components/Timer.tsx index e90c3ce..c3bc555 100644 --- a/src/components/Timer.tsx +++ b/src/components/Timer.tsx @@ -9,8 +9,20 @@ enum Mode { }; const helperText = { - [Mode.idle]: 'Hold SPACE to start countdown', - [Mode.countdown]: 'Release SPACE to begin', + [Mode.idle]: ( + <> + <span>Hold </span> + <code>SPACE</code> + <span> to start countdown</span> + </> + ), + [Mode.countdown]: ( + <> + <span>Release </span> + <code>SPACE</code> + <span> to begin</span> + </> + ), [Mode.running]: 'Go fast!', [Mode.over]: 'You are too late!', }; diff --git a/src/style.css b/src/style.css index 04b2382..54b39b3 100644 --- a/src/style.css +++ b/src/style.css @@ -2,6 +2,7 @@ html { font-family: "Open Sans", sans-serif; color: #ebdbb2; background-color: #282828; + font-size: 16px; } p { margin: 1em 0; @@ -16,3 +17,12 @@ a:hover { h1, h2, h3, h4, h5, h6 { font-weight: normal; } +code { + font-family: monospace; + font-size: 90%; + margin: 0; + padding: 2px; + background: #1d2021; + border-radius: 4px; + border: 1px solid rgba(255, 255, 255, 0.12); +} |