fixed text shadow plugin

huncholaneauthored 1 year ago

parent f97aaeccommit 670ff69314ad3c1cf57fbaba8e11b9f44edb6dc2Browse files

3 files changed, +23 -11

+14-4twench_landing_page/components/LandingSection/LandingSection.css

		@@ -6,22 +6,32 @@
6	6	overflow-x: hidden;
7	7	}
8	8
9		-.LandingTank {
	9	+.LandingSection .Tank {
10	10	background: url("/images/tank.png") no-repeat center center;
11	11	background-size: auto 100%;
12	12	@apply absolute bottom-0 left-0 w-full;
13	13	@apply md:top-52 xs:top-44 top-40;
14	14	}
15	15
16		-.LandingSoldier {
	16	+.LandingSection .Soldier {
17	17	background: url("/images/soldier.png") no-repeat center center;
18	18	background-size: auto 100%;
19	19	@apply absolute bottom-0 right-0 w-full;
20	20	@apply md:top-60 xs:top-52 top-48;
21	21	}
22	22
23		-.LandingTitle {
24		- @apply text-[150px] text-center w-full absolute md:top-32 leading-none text-shadow-lg;
	23	+.LandingSection .Title {
	24	+ @apply text-[150px] text-center w-full absolute md:top-32 leading-none;
25	25	@apply md:text-[150px] xs:text-[100px] text-[69px];
	26	+ @apply md:text-shadow-lg xs:text-shadow-md text-shadow;
26	27	@apply top-32;
27	28	}
	29	+
	30	+.LandingSection .OpenGameButton {
	31	+ @apply rounded-full absolute leading-none text-black bottom-8 text-shadow-none;
	32	+ @apply py-3 px-8;
	33	+ @apply border-black border-4;
	34	+ @apply bg-white hover:bg-background cursor-pointer;
	35	+ @apply right-[100px] lg:right-[200px];
	36	+ @apply text-[20px] lg:text-[50px];
	37	+}

+4-3twench_landing_page/components/LandingSection/LandingSection.tsx

		@@ -5,9 +5,10 @@ import "./LandingSection.css";
5	5	const LandingSection = () => {
6	6	return (
7	7	<div className="LandingSection">
8		- <div className="LandingTitle">$TWENCH</div>
9		- <div className="LandingTank"></div>
10		- <div className="LandingSoldier"></div>
	8	+ <div className="Title">$TWENCH</div>
	9	+ <div className="Tank"></div>
	10	+ <div className="Soldier"></div>
	11	+ <div className="OpenGameButton">OPEN GAME</div>
11	12	</div>
12	13	);
13	14	};

+5-4twench_landing_page/plugins/text-shadow.ts

		@@ -2,10 +2,10 @@ import { text } from "stream/consumers";
2	2	import plugin from "tailwindcss/plugin";
3	3
4	4	function textShadow(value: string) {
5		- return {
6		- textShadow: `${value} ${value} 0 #000, -${value} -${value} 0 #000, ${value} -${value} 0 #000,
7		- -${value} ${value} 0 #000, ${value} 0 0 #000, -${value} 0 0 #000, 0 ${value} 0 #000, 0 -${value} 0 #000;`,
8		- };
	5	+ if (!value) {
	6	+ return "none";
	7	+ }
	8	+ return `${value} ${value} 0 #000, -${value} -${value} 0 #000, ${value} -${value} 0 #000, -${value} ${value} 0 #000, ${value} 0 0 #000, -${value} 0 0 #000, 0 ${value} 0 #000, 0 -${value} 0 #000`;
9	9	}
10	10
11	11	const textShadowPlugin = plugin(
		@@ -25,6 +25,7 @@ const textShadowPlugin = plugin(
25	25	theme: {
26	26	textShadow: {
27	27	DEFAULT: "1px",
	28	+ none: "0",
28	29	sm: "2px",
29	30	md: "3px",
30	31	lg: "4px",