fem-projects/tic-tac-toe
Archived
1
Fork 0
Code Activity

Make responsive

Browse source
This commit is contained in:
Hadeed 2024-06-01 09:14:51 +04:00
parent 71f6a1edcd
commit 5ecdcefb4a
2 changed files with 51 additions and 50 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

29
src/mainMenu.jsx
View file

@ -7,24 +7,25 @@ export default () => {
const [playerSymbol, setPlayerSymbol] = useState("cross");
return (
<div className="flex w-[460px] flex-col items-center space-y-[40px]">
<div className="m-5 flex w-full max-w-lg flex-col items-center space-y-10">
<img src={logo} alt="logo" />
<div className="bg-navy-400 flex w-full flex-col items-center justify-center space-y-[24px] rounded-[15px] p-[24px] drop-shadow-[0_8px_0_#10212A]">
<h2 className="text-silver-700 text-h-xs uppercase">
<div className="flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6 drop-shadow-[0_8px_0_#10212A]">
<h2 className="mb-6 text-h-xs uppercase text-silver-700">
Pick player 1's mark
</h2>
<div className="flex w-full flex-col items-center justify-center space-y-[17px]">
<RadioGroup.Root
className="bg-navy-700 flex h-[72px] w-full items-center justify-between rounded-[10px] p-[8px]"
className="mb-4 flex h-20 w-full items-center justify-between rounded-xl bg-navy-700 p-2"
defaultValue="cross"
value={playerSymbol}
onValueChange={setPlayerSymbol}
loop={false}
>
<RadioGroup.Item
className="data-[state='checked']:bg-silver-700 hover:bg-silver-700/5 flex h-full w-1/2 items-center justify-center rounded-[10px]"
className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
value="cross"
>
<svg
className="m-auto"
width="32"
height="32"
viewBox="0 0 64 64"
@ -37,10 +38,11 @@ export default () => {
</svg>
</RadioGroup.Item>
<RadioGroup.Item
className="data-[state='checked']:bg-silver-700 hover:bg-silver-700/5 flex h-full w-1/2 items-center justify-center rounded-[10px]"
className="h-full w-1/2 rounded-xl hover:bg-silver-700/5 data-[state='checked']:bg-silver-700"
value="oval"
>
<svg
className="m-auto"
width="32"
height="32"
viewBox="0 0 64 64"
@ -53,17 +55,16 @@ export default () => {
</svg>
</RadioGroup.Item>
</RadioGroup.Root>
<p className="text-silver-700 text-base uppercase">
<p className="text-base uppercase text-silver-700">
Remember : X goes first
</p>
</div>
</div>
<div className="flex w-full flex-col items-center justify-between space-y-[20px]">
<button className="flex w-full items-center justify-center rounded-[15px] bg-yellow-700 p-[17px] drop-shadow-[0_8px_0_#CC8B13] hover:bg-yellow-400">
<p className="text-h-s text-navy-700 uppercase">New game (vs cpu)</p>
<div className="w-full space-y-5">
<button className="flex w-full items-center justify-center rounded-2xl bg-yellow-700 p-4 drop-shadow-[0_8px_0_#CC8B13] hover:bg-yellow-400">
<p className="text-h-s uppercase text-navy-700">New game (vs cpu)</p>
</button>
<button className="flex w-full items-center justify-center rounded-[15px] bg-blue-700 p-[17px] drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400">
<p className="text-h-s text-navy-700 uppercase">
<button className="flex w-full items-center justify-center rounded-2xl bg-blue-700 p-4 drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400">
<p className="text-h-s uppercase text-navy-700">
New game (vs player)
</p>
</button>

2
tailwind.config.js
View file

@ -13,7 +13,7 @@ export default {
"yellow-400": "#FFC860",
},
fontFamily: {
sans: ["Outfit"],
sans: ["Outfit", "sans-serif"],
},
fontSize: {
base: [