-
Notifications
You must be signed in to change notification settings - Fork 11
/
tailwind.config.js
125 lines (109 loc) · 3.59 KB
/
tailwind.config.js
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
/*
** TailwindCSS Configuration File
**
** Docs: https://tailwindcss.com/docs/configuration
** Default: https://github.com/tailwindlabs/tailwindcss/blob/master/stubs/config.full.js
*/
export default {
theme: {
extend: {
maxWidth: {
// Maximum container width, according to the style guide.
'container': '1600px',
// Overwrite the prose width specified in characters with one specified
// in pixels to make the text have the same width, independent of the
// font size.
// 640px roughly matches the tailwinds default, and the style guide at
// https://zeroheight.com/822235964/p/779fcb-content-blocks.
'prose': '640px',
},
lineHeight: {
'tighter': '1.1',
},
backgroundImage: {
'corner-reducedmark-nasu-purple': "url('/images/corner-reducedmark-nasu-purple.svg')",
'pattern-community': "url('/images/pattern-community.png')",
'pattern-guardianship': "url('/images/pattern-guardianship.png')",
'pattern-innovation': "url('/images/pattern-innovation.png')",
'pattern-resources': "url('/images/pattern-resources.png')",
},
},
// NOTE: All settings below *override* the Tailwind defaults, making them
// unavailable. Use the `extend` key above if the defaults should stay in
// place.
fontFamily: {
sans: [
'Public Sans Variable', 'sans-serif'
// TODO: Look into that.
//,{ fontFeatureSettings: '"ss01"'}
],
mono: ["IBM Plex Mono", "Liberation Mono", "Source Code Pro", 'monospace']
},
// Reduce the selection to the font weights we actually use.
fontWeight: {
normal: '400',
bold: '700',
black: '900',
},
// Font sizes
// https://zeroheight.com/822235964/p/852315-typography and
// https://zeroheight.com/822235964/p/48281f-typography
fontSize: {
'16': '16px', // base
'20': '20px', // TODO: Not part of the typography scheme, but commonly used for "large links", e.g. in the main navbar.
'24': '24px',
'36': '36px',
'54': '54px',
'81': '81px',
// Smaller font sizes for phone views only.
'phone-20': '20px',
'phone-25': '25px',
'phone-31': '31px',
'phone-39': '39px',
},
boxShadow: {
// Elevation
'high': '8.0px 10.0px 0.0px 0px rgba(33, 26, 29, 1.0)',
'mid': '4.0px 4.0px 0.0px 0px rgba(33, 26, 29, 1.0)',
'low': '2.0px 2.0px 0.0px 0px rgba(33, 26, 29, 1.0)',
},
colors: {
inherit: 'inherit',
current: 'currentColor',
transparent: 'transparent',
'white': '#FFFFFF',
'black': '#000000',
'ultraviolet': '#6320EE',
'pink-piano': '#F72585',
'warm-black': '#211A1D',
'dark-pastel-grey': '#211A1D',
'pastel-grey': '#F8F5FA',
'nasu-purple': '#5D16CE',
'shade-of-violet': '#7209B7',
'fuchsia-flourish': '#D61E92',
// The "neon" linear transition is achieved by
// "bg-gradient-to-l from-ultraviolet to-pink-piano"
},
spacing: {
'0': '0',
'10': '10px',
'12': '12px',
'16': '16px',
'20': '20px',
'24': '24px',
'32': '32px',
'48': '48px',
'64': '64px',
'96': '96px',
},
// The style guide uses phone, tablet, and desktop names for breakpoints.
// Numeric values are not given in the style guide, but chosen but chosen
// based on common device dimensions, with values matching Tailwind
// defaults.
screens: {
'phone': '640px', // sm
'tablet': '768px', // md
'desktop': '1280px', // xl
},
},
}