-
Notifications
You must be signed in to change notification settings - Fork 0
/
tailwind.config.cjs
127 lines (125 loc) · 2.91 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
/** @type {import('tailwindcss').Config} */
const defaultTheme = require('tailwindcss/defaultTheme');
const heights = {
'screen-1/3': '33vh',
'screen-1/2': '50vh',
'screen-2/3': '67vh',
'screen-3/4': '75vh',
'screen-9/10': '90vh',
}
module.exports = {
content: ['./src/**/*.{astro,html,js,jsx,md,mdx,svelte,ts,tsx,vue}'],
theme: {
screens: {
md: '768px',
lg: '1140px',
xl: '1340px',
'2xl': '1600px',
wide: '1920px',
},
colors: {
transparent: 'transparent',
current: 'currentColor',
white: '#ffffff',
red: '#DE2F39',
peach: {
DEFAULT: '#F8F1F2',
},
black: '#111111',
grey: {
light: '#f9f9f9',
mild: '#E8E8E8',
mid: '#7d7d7d',
dark: '#535353',
darker: '#222222',
}
},
extend: {
keyframes: {
"marquee-left": {
'0%': {'transform': 'translateX(0)'},
'50%':{ 'transform': 'translateX(-50vw)' },
'100%':{ 'transform': 'translateX(0)' },
},
"marquee-right": {
'0%': {'transform': 'translateX(0)'},
'50%':{ 'transform': 'translateX(50vw)' },
'100%':{ 'transform': 'translateX(0)' },
}
},
lineHeight: {
'11': '2.5rem'
},
width: {
'screen-3/4': '75vw',
},
height: {
140: '35rem',
150: '37.5rem',
...heights,
},
maxHeight: {
...heights,
},
borderWidth: {
'1': '1px',
'5': '5px',
'6': '6px',
'10': '10px',
'12': '12px',
},
borderRadius: {
'4xl': '2rem',
},
fontWeight: {
bold: 600,
extrabold: 700,
black: 800,
heavy: 900,
},
fontSize: {
'body': ['clamp(1rem, 2vw, 1.125rem)', { lineHeight: '1.2'}],
'sm': ['clamp(0.825rem, 2vw, 0.9rem)', { lineHeight: '1.2'}],
'xl': ['clamp(1.1rem, 4vw, 1.3rem)', { lineHeight: '1'}],
'2xl': ['clamp(1.3rem, 5vw, 1.5rem)', { lineHeight: '1'}],
'3xl': ['clamp(1.5rem, 5vw, 1.8rem)', { lineHeight: '1'}],
'4xl': ['clamp(1.8rem, 5vw, 2.25rem)', { lineHeight: '1'}],
'5xl': ['clamp(2rem, 5vw, 3rem)', { lineHeight: '0.9'}]
},
fontFamily: {
"roc-grotesk": ['roc-grotesk-wide', ...defaultTheme.fontFamily.sans],
"futura-pt": ['futura-pt', ...defaultTheme.fontFamily.sans],
"trade-gothic": ['trade-gothic-next', ...defaultTheme.fontFamily.sans],
},
maxWidth: {
'screen-1/2': '50vw',
'screen-2/3': '67vw',
'screen-3/4': '75vw',
'screen-9/10': '90vw',
'4/5': '80%',
},
boxShadow: {
'md': '0 4px 10px rgba(109, 109, 109, 0.1)',
'mild': '0px 18px 25px -3px rgba(0, 0, 0, 0.05)',
'card': '0px 2px 25px 9px rgba(0, 0, 0, 0.2)',
'modal': '0px 2px 25px 9px rgba(0, 0, 0, 0.2)',
'btn': '0px 2px 6px rgba(130, 39, 0, 0.16)',
},
spacing: {
'1/6': '16.66%',
'1/2': '50%',
'5/6': '83.33%',
'15': '3.75rem',
'21': '5.25rem',
'22': '5.5rem',
},
letterSpacing: {
xl: '0.2em',
},
transitionProperty: {
'spacing': 'margin, padding'
}
},
},
plugins: [],
}