app/assets/sass/_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

//vars
$page-width: 1000px;

$padding-base: 6px;
$padding-sm: 3px;
$padding-lg: 10px;
$padding-xl: 18px;

$font-size-base: 13px;
$font-size-xs: round($font-size-base * 0.7);
$font-size-sm: round($font-size-base * 0.9);
$font-size-lg: round($font-size-base * 1.3);
$font-size-xl: round($font-size-base * 1.7);

$font-family-sans-serif: 'noto sans';
$font-family-mono: 'source code pro';

$line-height-base: 1.3;

$gray-lightest: #f7f7f7;
$gray-light: darken($gray-lightest, 10%);
$gray: darken(#f7f7f7, 30%);
$gray-dark: darken(#f7f7f7, 50%);
$gray-darkest: darken($gray-lightest, 70%);

$blue: #00B5E2;
$dark-blue: #008CAF;
$light-blue: #65DDFB;

$red: #AF2F11;
$dark-red: #7C210C;
$light-red: #FB8165;

$green: #279404;
$yellow: #F8E400;

$bg-color: $gray-lightest;

$text-color: #4d525a;
$text-color-light: lighten($text-color, 30%);

$line-color: $gray-light;
$line-color-light: lighten($gray-light, 20%);

$link-color: $blue;

$border-radius-base: 3px;
$border-radius-lg: 6px;

$main-color: $blue;
$main-color-dark: $blue;

$highlight-color: $blue;
$highlight-color-dark: $dark-blue;

$alert-color: #FB4418;