website/tailwind.config.js at main · ameya-g-git/website · GitHub

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
/** @type {import('tailwindcss').Config} */
export default {
	content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
	theme: {
		extend: {
			boxShadow: {
				footer: "inset 0 -20px 30px 0 rgb(255 248 19 / 0.25)",
			},
			fontFamily: {
				"page-heading": ["Fraternite", "serif"],
				sans: ["PP Neue Montreal", "system-ui", "sans-serif"],
				footer: ["Illusion Serif", "mono"],
			},
			animation: {
				"infinite-scroll": "infinite-scroll 7s linear infinite",
				float: "float 5s ease-in-out var(--delay, 0ms) infinite",
				orbit: "orbit 30s linear var(--delay, 0ms) infinite",
				"orbit-rev": "orbit 30s linear var(--delay, 0ms) infinite reverse",
				"nav-load": "nav-load 1s linear infinite",
				flash: "flash 1s cubic-bezier(0, 0.97, 0.58, 1) 100ms",
			},
			keyframes: {
				"infinite-scroll": {
					from: { transform: "translateX(0)" },
					to: { transform: "translateX(100%)" },
				},
				float: {
					"0%, 100%": { transform: "translateY(0)" },
					"50%": { transform: "translateY(1rem)" },
				},
				orbit: {
					"0%": { transform: "rotate(0deg) translateY(var(--radius)) rotate(0deg)" },
					"100%": {
						transform: "rotate(360deg) translateY(var(--radius)) rotate(-360deg)",
					},
				},
				"nav-load": {
					"0%, 100%": { "border-bottom-width": "4px" },
					"50%": { "border-bottom-width": "0px" },
				},
				flash: {
					from: { filter: "brightness(5) contrast(0.2)" },
					to: { filter: "brightness(1) contrast(1)" },
				},
			},
			colors: {
				yellow: "#FFF813",
				"card-black": "#101010",
				"card-hover": "#252525",
			},
			backgroundImage: {
				"gradient-radial": "radial-gradient(var(--tw-gradient-stops))",
			},
		},
	},
	plugins: [],
};