1---
2# Only the main Sass file needs front matter (the dashes are enough)
3---
4@charset "utf-8";
5
6@font-face {
7	font-family: 'Lato';
8	src: url("{{ '/static/fonts/LatoLatin-Italic.woff2' }}") format('woff2'),
9		url("{{ '/static/fonts/LatoLatin-Italic.woff' }}") format('woff');
10	font-weight: normal;
11	font-style: italic;
12}
13
14@font-face {
15	font-family: 'Lato';
16	src: url("{{ '/static/fonts/LatoLatin-Black.woff2' }}") format('woff2'),
17		url("{{ '/static/fonts/LatoLatin-Black.woff' }}") format('woff');
18	font-weight: 900;
19	font-style: normal;
20}
21
22@font-face {
23	font-family: 'Lato';
24	src: url("{{ '/static/fonts/LatoLatin-BlackItalic.woff2' }}") format('woff2'),
25		url("{{ '/static/fonts/LatoLatin-BlackItalic.woff' }}") format('woff');
26	font-weight: 900;
27	font-style: italic;
28}
29
30@font-face {
31	font-family: 'Lato';
32	src: url("{{ '/static/fonts/LatoLatin-Light.woff2' }}") format('woff2'),
33		url("{{ '/static/fonts/LatoLatin-Light.woff' }}") format('woff');
34	font-weight: 300;
35	font-style: normal;
36}
37
38@font-face {
39	font-family: 'Lato';
40	src: url("{{ '/static/fonts/LatoLatin-Regular.woff2' }}") format('woff2'),
41		url("{{ '/static/fonts/LatoLatin-Regular.woff' }}") format('woff');
42	font-weight: normal;
43	font-style: normal;
44}
45
46// Our variables
47$base-font-family:  'Lato', Calibri, Arial, sans-serif;
48$header-font-family:  'Lato', 'Helvetica Neue', Arial, sans-serif;
49$base-font-size:    18px;
50$small-font-size:   $base-font-size * 0.875;
51$base-line-height:  1.4em;
52
53$spacing-unit:      12px;
54
55// Two configured colors (see _config.yml)
56$primary-bg:        				{{ site.color.primary }};
57$secondary-bg:      				{{ site.color.secondary }};
58
59// $primary-bg overlays
60{% if site.color.primary-overlay == 'light' %}
61$primary-overlay:       		darken($primary-bg, 70%);
62$primary-overlay-special:		darken($primary-bg, 40%);
63{% else %}
64$primary-overlay:      		 	#fff;
65$primary-overlay-special:		lighten($primary-bg, 30%);
66{% endif %}
67
68// $secondary-bg overlays
69{% if site.color.secondary-overlay == 'light' %}
70$text:              #393939;
71$sidenav: 				  darken($secondary-bg, 20%);
72$sidenav-text: 			$text;
73$sidenav-overlay: 	darken($sidenav, 10%);
74$sidenav-active: 		lighten($sidenav, 10%);
75{% else %}
76$text:              #fff;
77$sidenav: 				  lighten($secondary-bg, 20%);
78$sidenav-text: 			$text;
79$sidenav-overlay: 	lighten($sidenav, 10%);
80$sidenav-active: 		darken($sidenav, 10%);
81{% endif %}
82
83$code-bg: 					#002b36;
84
85$header-height: 34px;
86$header-ptop: 10px;
87$header-pbot: 8px;
88
89// Width of the content area
90$content-width:     900px;
91
92// Table setting variables
93$lightergrey: #F8F8F8;
94$greyish: #E8E8E8;
95$lightgrey: #B0B0B0;
96$green: #2db04b;
97
98// Using media queries with like this:
99// @include media-query($on-palm) {
100//     .wrapper {
101//         padding-right: $spacing-unit / 2;
102//         padding-left: $spacing-unit / 2;
103//     }
104// }
105@mixin media-query($device) {
106    @media screen and (max-width: $device) {
107        @content;
108    }
109}
110
111
112
113// Import partials from `sass_dir` (defaults to `_sass`)
114@import
115        "reset",
116        "base",
117				"header",
118        "search",
119        "syntax-highlighting",
120				"promo",
121				"buttons",
122				"gridBlock",
123				"poweredby",
124				"footer",
125				"react_header_nav",
126				"react_docs_nav",
127				"tables",
128				"blog"
129;
130
131// Anchor links
132// http://ben.balter.com/2014/03/13/pages-anchor-links/
133.header-link {
134  position: absolute;
135  margin-left: 0.2em;
136  opacity: 0;
137
138  -webkit-transition: opacity 0.2s ease-in-out 0.1s;
139  -moz-transition: opacity 0.2s ease-in-out 0.1s;
140  -ms-transition: opacity 0.2s ease-in-out 0.1s;
141}
142
143h2:hover .header-link,
144h3:hover .header-link,
145h4:hover .header-link,
146h5:hover .header-link,
147h6:hover .header-link {
148  opacity: 1;
149}
150