-
Notifications
You must be signed in to change notification settings - Fork 3
/
_variables.scss
115 lines (75 loc) · 2.35 KB
/
_variables.scss
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
/* Variables
---------------------------------------------------------------------------------- */
/* Colors
-------------------------------------------------- */
/* Branding */
$color-text: #222;
$color-background: #fff;
$color-brand-primary: #4590ff;
$color-brand-primary-light: #71c0ff;
$color-brand-primary-dark: #2e77ff;
$color-brand-secondary: #ff4f2f;
$color-brand-secondary-light: #ff744e;
$color-brand-secondary-dark: #e2321e;
$color-accent: #71b524;
$color-accent-light: #9cda21;
$color-accent-dark: #4e8f22;
/* /Branding */
/* Shades */
$color-text-light: lighten($color-text, 25%);
$color-text-lighter: lighten($color-text, 50%);
$color-text-lightest: lighten($color-text, 75%);
/* /Shades */
/* Inverse */
$color-text-inverse: #f8f8f8;
/* /Inverse */
/* /Colors
-------------------------------------------------- */
/* Font family
-------------------------------------------------- */
$font-main: "Custom Font";
$font-fallback: "Helvetica Neue", Helvetica, Arial, sans-serif;
/* /Font family
-------------------------------------------------- */
/* Font size
-------------------------------------------------- */
$font-size-s: .6rem;
$font-size-m: .8rem;
$font-size-n: 1rem;
$font-size-l: 1.2rem;
$font-size-xl: 1.6rem;
$font-size-hero: 2.2rem;
/* /Font size
-------------------------------------------------- */
/* Line height
-------------------------------------------------- */
$line-height-tight: 1.2;
$line-height-normal: 1.5;
$line-height-loose: 1.75;
/* /Line height
-------------------------------------------------- */
/* Grid
-------------------------------------------------- */
$grid-step = .25rem;
$gutter = $grid-step * 4;
/* /Grid
-------------------------------------------------- */
/* Offset
-------------------------------------------------- */
$offset-xxs = $grid-step;
$offset-xs = 2 * $grid-step;
$offset-s = 3 * $grid-step;
$offset-n = 4 * $grid-step;
$offset-l = 6 * $grid-step;
$offset-xl = 8 * $grid-step;
$offset-xxl = 10 * $grid-step;
/* /Offset
-------------------------------------------------- */
/* Border radius
-------------------------------------------------- */
$radius-normal: 3px;
$radius-medium: 8px;
/* /Border radius
-------------------------------------------------- */
/* /Variables
---------------------------------------------------------------------------------- */