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

Use drop shadow plugin

Browse source
This commit is contained in:
Hadeed 2024-06-01 09:48:26 +04:00
parent 5ecdcefb4a
commit 01ac608b88
2 changed files with 40 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
src/mainMenu.jsx
View file

@ -9,7 +9,7 @@ export default () => {
return (
<div className="m-5 flex w-full max-w-lg flex-col items-center space-y-10">
<img src={logo} alt="logo" />
<div className="flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6 drop-shadow-[0_8px_0_#10212A]">
<div className="inner-shadow-2-navy-900 flex w-full flex-col items-center justify-center rounded-2xl bg-navy-400 p-6">
<h2 className="mb-6 text-h-xs uppercase text-silver-700">
Pick player 1's mark
</h2>
@ -60,10 +60,10 @@ export default () => {
</p>
</div>
<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">
<button className="inner-shadow-2-yellow-900 flex w-full items-center justify-center rounded-2xl bg-yellow-700 p-4 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-2xl bg-blue-700 p-4 drop-shadow-[0_8px_0_#118C87] hover:bg-blue-400">
<button className="inner-shadow-2-blue-900 flex w-full items-center justify-center rounded-2xl bg-blue-700 p-4 hover:bg-blue-400">
<p className="text-h-s uppercase text-navy-700">
New game (vs player)
</p>

38
tailwind.config.js
View file

@ -1,14 +1,49 @@
/** @type {import('tailwindcss').Config} */
import plugin from "tailwindcss/plugin";
const innerShadowPlugin = plugin(function ({ addUtilities, theme, e }) {
const colors = Object.keys(theme("colors"))
.filter((key) => key.endsWith("-900"))
.reduce((obj, key) => {
obj[key] = theme("colors")[key];
return obj;
}, {});
const spacing = {
1: "0.25rem",
2: "0.5rem",
};
const utilities = Object.keys(colors).flatMap((colorKey) => {
const colorValue = colors[colorKey];
return Object.keys(spacing).map((spacingKey) => {
const spacingValue = spacing[spacingKey];
return {
[`.${e(`inner-shadow-${spacingKey}-${colorKey}`)}`]: {
filter: `drop-shadow(0 ${spacingValue} ${colorValue})`,
},
};
});
});
addUtilities(utilities);
});
export default {
content: ["./index.html", "./src/**/*.jsx"],
theme: {
colors: {
"navy-900": "#10212A",
"navy-700": "#1A2A33",
"navy-400": "#1F3641",
"silver-900": "#6B8997",
"silver-700": "#A8BFC9",
"silver-400": "#DBE8ED",
"blue-900": "#118C87",
"blue-700": "#31C3BD",
"blue-400": "#65E9E4",
"yellow-900": "#CC8B13",
"yellow-700": "#F2B137",
"yellow-400": "#FFC860",
},
@ -53,4 +88,5 @@ export default {
],
},
},
plugins: [innerShadowPlugin],
};