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

$padding-1: 1px;
$padding-4: .25rem;
$padding-8: .5rem;
$padding-16: 1rem;

$font-size-base: 16px;
$font-size-12: .75rem;
$font-size-14: .875rem;
$font-size-16: 1rem;

// Grayscale
$white:    #fff;
$gray-100: #f8f9fa;
$gray-200: #e9ecef;
$gray-300: #dee2e6;
$gray-400: #ced4da;
$gray-500: #adb5bd;
$gray-600: #868e96;
$gray-700: #495057;
$gray-800: #343a40;
$gray-900: #212529;
$black:    #000;

$color-link: #1177EE;
$color-visited-link: #7823c9;

$body-background: white;
$body-font-color: $gray-800;
$body-font-weight: 300;
$body-min-width: 25rem;

$nav-background: $body-background; //$gray-100;
$nav-link-color: $gray-800;

$header-height: 3.5rem;
$nav-menu-width: 16rem;
$toc-menu-width: 14rem;

$content-max-width: 64rem;
$content-min-width: $body-min-width;


// Mixins
@mixin shadow {
  box-shadow: 0 0 $padding-8 rgba(0,0,0,0.1);
}

@mixin ul {
  ul {
    list-style: none;
    padding-left: $padding-16;

    li {
      line-height: $padding-16;

      a {
        display: block;
      }

      img {
        height: $padding-16;
      }
    }
  }
}