-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.cjs
128 lines (128 loc) · 3.36 KB
/
tailwind.config.cjs
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./src/**/*.{js,ts,jsx,tsx}"],
theme: {
extend: {
backgroundImage: {
intro: "url('/intro-bg.svg')",
arena: "url('/arena-bg.svg')",
radial: "radial-gradient(var(--tw-gradient-stops))",
},
keyframes: {
zoomInDown: {
"0%": {
"animation-timing-function": "cubic-bezier(.55,.055,.675,.19)",
opacity: 0,
transform: "scale3d(.1,.1,.1) translate3d(0,-500px,0)",
},
"60%": {
"animation-timing-function": "cubic-bezier(.175,.885,.32,1)",
opacity: 1,
transform: "scale3d(.475,.475,.475) translate3d(0,60px,0)",
},
},
delayFadeIn: {
"0%": {
opacity: 0,
},
"50%": {
opacity: 0,
},
"100%": {
opacity: 1,
},
},
loadingCard1: {
"15%": {
transform: "translateX(100px) rotate(15deg)",
},
"30%": {
transform: "translateX(-20px) rotate(-5deg)",
},
"50%": {
transform: "translateX(-20px) rotate(-5deg)",
"z-index": 10,
},
"65%": {
transform: "translateX(-10px)",
"z-index": 20,
},
"80%": {
transform: "translateX(-10px)",
},
},
loadingCard2: {
"15%": {
transform: "translateX(0)",
},
"30%": {
transform: "translateX(10px)",
"z-index": 30,
},
"50%": {
transform: "translateX(100px) rotate(15deg)",
},
"65%": {
transform: "translateX(-10px) rotate(-5deg)",
},
"80%": {
transform: "translateX(-10px) rotate(-5deg)",
"z-index": 10,
},
},
loadingCard3: {
"0%": {
transform: "rotate(-5deg)",
"z-index": 0,
},
"15%": {
transform: "translateX(0) rotate(-5deg)",
},
"30%": {
transform: "translateX(10px)",
"z-index": 20,
},
"50%": {
transform: "translateX(10px)",
},
"65%": {
transform: "translateX(20px)",
"z-index": 30,
},
"80%": {
transform: "translateX(120px) rotate(15deg)",
},
"100%": {
transform: "rotate(-5deg)",
},
},
},
animation: {
"intro-logo": "zoomInDown 1.5s linear",
"intro-content": "delayFadeIn 3s ease-in",
"loading-card-1": "loadingCard1 3s ease-in-out infinite",
"loading-card-2": "loadingCard2 3s ease-in-out infinite",
"loading-card-3": "loadingCard3 3s ease-in-out infinite",
},
colors: {
legendary: "#1e1702",
"legendary-light": "#312205",
epic: "#0f000f",
"epic-light": "#1e001e",
"slate-1000": "#090c13",
},
},
fontFamily: {
sans: ["Source Sans Pro", "system-ui", "sans-serif"],
serif: ["Source Serif Pro", "ui-serif", "serif"],
},
},
safelist: [
"grid-cols-1",
"grid-cols-2",
"grid-cols-3",
"grid-cols-4",
"grid-cols-5",
],
plugins: [],
};