torystories.stream/tailwind.config.js at master · Zweihander-Main/torystories.stream · 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
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
const colors = require('tailwindcss/colors');
const defaultTheme = require('tailwindcss/defaultTheme');

const playerHeight = '6rem';
const playerHeightSmall = '4rem';
const mobileEpInfoTabsHeight = '2.5rem';

module.exports = {
	content: [
		'./src/components/**/*.{js,jsx,ts,tsx}',
		'./src/contexts/**/*.{js,jsx,ts,tsx}',
		'./src/hooks/**/*.{js,jsx,ts,tsx}',
		'./src/pages/**/*.{js,jsx,ts,tsx}',
		'./src/styles/**/*.{js,jsx,ts,tsx}',
		'./src/templates/**/*.{js,jsx,ts,tsx}',
		'./src/utils/**/*.{js,jsx,ts,tsx}',
	],
	theme: {
		colors: {
			black: '#0a0a0a',
			white: colors.white,
			brightBlue: '#0D78C1',
			dullBlue: '#5B85AA',
			brightPurple: '#8755AF',
			dullBrightPurple: '#755C8A',
			deepPurple: '#372248',
			dullPurple: '#414770',
			darkPurple: '#1D152C',
		},
		fontFamily: {
			display: ['Cormorant SC', ...defaultTheme.fontFamily.serif],
			body: ['Nunito Sans', ...defaultTheme.fontFamily.sans],
		},
		extend: {
			brightness: {
				35: '.35',
			},
			fontSize: {
				hero: ['15vmax', '11vmax'],
				heroSmall: ['22vmin', '17vmin'],
				subHero: ['3.5vmax', '3.2vmax'],
				subHeroSmall: ['7vmin', '6.4vmin'],
				episodeNum: ['15vw'],
			},
			inset: {
				playerMobileMenu: playerHeightSmall,
			},
			letterSpacing: {
				display: '-0.035em',
			},
			textIndent: {
				hero: '-0.5em',
				footer: '-2em',
			},
			height: {
				player: playerHeight,
				playerSmall: playerHeightSmall,
				screenMinusPlayer: `calc(100vh - ${playerHeight})`,
				screenMinusPlayerAndTabs: `calc(100vh - ${playerHeightSmall} - ${mobileEpInfoTabsHeight})`,
				screenMinusPlayerSmall: `calc(100vh - ${playerHeightSmall})`,
				screenMinusPlayerAndTabsSmall: `calc(100vh - ${playerHeightSmall} - ${mobileEpInfoTabsHeight})`,
			},
			width: {
				playerTextMobile: 'calc(100vw - 22rem)',
				playerTextMobileSmall: 'calc(100vw - 8rem)',
			},
			flex: {
				playerTrack: '1 1 66rem',
			},
			gridTemplateColumns: {
				episodesEven: '1fr 5fr 25rem',
				episodesEvenMed: '1fr 5fr 15rem',
				episodesEvenSmall: '1fr 5fr',
				episodesOdd: '25rem 5fr 1fr',
				episodesOddMed: '15rem 5fr 1fr',
				episodesOddSmall: '5fr 1fr',
				episodesTiny: '1fr',
			},
			gridTemplateRows: {
				mobileEpInfoTabs: `${mobileEpInfoTabsHeight} 1fr`,
			},
			boxShadow: {
				navButton: '0 0 8px 10px rgba(10,10,10,0.4)',
				innerButton: 'inset 0 2px 12px 0 rgba(10,10,10,0.8)',
			},
			padding: {
				hero: '4vmax',
				heroSmall: '4vmin',
			},
			backgroundImage: (theme) => ({
				'georgian-pattern':
					"radial-gradient(70% 60% at 50% 50%, rgba(10, 10, 10, 0) 39%, #0A0A0A 100%), url('/images/georgian-pattern.svg')",
				player: 'linear-gradient(180deg, #0D78C1 -300px, #0a0a0a)',
			}),
		},
	},
	plugins: [
		require('tailwind-scrollbar'),
		require('tailwindcss-textshadow'),
		require('tailwindcss-text-indent')(),
	],
};