diff --git a/src/App.jsx b/src/App.jsx index 7beac9c..4b0af6e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -103,11 +103,12 @@ export const App = () => { setIndex((index) => ++index) event.target.value = "" - setAnswerTimeout( - setTimeout(() => { - setCorrectAnswer(true) - }, 15000) - ) + if (index === numbers?.length) + setAnswerTimeout( + setTimeout(() => { + setCorrectAnswer(true) + }, 15000) + ) } }} /> diff --git a/src/components/Nav.jsx b/src/components/Nav.jsx index 8b8057b..fc173e9 100644 --- a/src/components/Nav.jsx +++ b/src/components/Nav.jsx @@ -7,41 +7,46 @@ export const Nav = ({ mode, setMode, modeNumbers, setModeNumbers }) => { diff --git a/src/styles/Nav.module.css b/src/styles/Nav.module.css index 78dad5c..dabf2cc 100644 --- a/src/styles/Nav.module.css +++ b/src/styles/Nav.module.css @@ -20,37 +20,55 @@ justify-content: space-between; } -.nav ul li { +.nav li { display: flex; gap: 10px; } -.nav ul li * { +.nav div { + display: flex; +} + +.nav li * { font-size: 1.25em; } -.nav ul li span { +.nav span { display: flex; flex-direction: row; align-items: flex-end; } -.nav ul li button { +.nav button { border: none; background: transparent; cursor: pointer; } -.nav ul li .modeButton:not(.active) { +.nav .modeButton:not(.active) { text-decoration: underline; } +.active { + font-weight: bold; +} + +#modeNumbers { + gap: 5px; +} + @media (prefers-color-scheme: dark) { .nav ul { background-color: #161f27; } } -.active { - font-weight: bold; +@media (max-width: 600px) { + #header { + display: none; + } + + .nav ul { + justify-content: center; + } }