docs/src/less/variables.less


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

// ==========================================================================
// Variables
// ==========================================================================

// Colors
@gray-dark:                 #343f4a;
@gray:                      #55646b;
@gray-light:                #cbd0d3;
@gray-lighter:              #dbe3e8;
@off-white:                 #f2f5f7;

@brand-primary:             #3498db;
@brand-secondary:           #02BD9B;

// Brands
@color-twitter:             #4BAAF4;
@color-youtube:             #cc181e;
@color-vimeo:               #19b7ed;

// Base
@body-background:           @off-white; //linear-gradient(to left top, @brand-secondary, @brand-primary);

// Type
@font-size-base:            16;
@font-size-small:           14;
@font-size-h1:              64;
@font-weight-base:          500;
@font-weight-bold:          700;

// Elements
@link-color:                @brand-primary;
@padding-base:              20px;
@arrow-size:                8px;

// Icons
@icon-size:                 18px;

// Breakpoints
@screen-sm:                 480px;
@screen-md:                 768px;

// Radii
@border-radius-base:        4px;
@border-radius-large:       6px;

// Examples
@example-width-audio:       520px;
@example-width-video:       1200px;