Browse Source

Cleanup and document stylesheets

- Partially addresses #129
master
Michael Rose 4 years ago
parent
commit
e987aeb88e

+ 13
- 0
.editorconfig View File

@@ -0,0 +1,13 @@
1
+# editorconfig.org
2
+root = true
3
+
4
+[*]
5
+indent_style = space
6
+indent_size = 2
7
+end_of_line = lf
8
+charset = utf-8
9
+trim_trailing_whitespace = true
10
+insert_final_newline = true
11
+
12
+[*.md]
13
+trim_trailing_whitespace = false

_sass/_elements.scss → _sass/_animations.scss View File

@@ -1,131 +1,33 @@
1
-hr { 
2
-    display: block; 
3
-    margin: 1em 0; 
4
-    padding: 0;
5
-    height: 1px; 
6
-    border: 0; 
7
-    border-top: 1px solid #ccc;
8
-    border-bottom: 1px solid #fff; 
9
-}
10
-
11
-// Figures and images
12
-// --------------------------------------------------
13
-figure {
14
-  margin: 0;
15
-  padding-top: 10px;
16
-  padding-bottom: 10px;
17
-  @include clearfix;
18
-  img {
19
-    margin-bottom: 10px;
20
-  }
21
-  a { 
22
-    img {
23
-      @include transform(translateY(0));
24
-      -webkit-transition-duration: 0.25s;
25
-      -moz-transition-duration: 0.25s;
26
-      -o-transition-duration: 0.25s;
27
-      opacity: 0.7;
28
-      &:hover {
29
-        @include transform(translateY(-5px));
30
-        @include box-shadow(0 0 10px rgba($black, .20));
31
-        opacity: 1;
32
-      }
33
-    }
34
-  }
35
-  &.half {
36
-    @include media($large) {
37
-      img {
38
-        width: 47.5%;
39
-        float: left;
40
-        margin-right: 2.5%;
41
-        margin-bottom: 2.5%;
42
-      }
43
-      figcaption {
44
-        clear: left;
45
-      }
46
-    }
47
-  }
48
-  &.third {
49
-    @include media($large) {
50
-      img {
51
-        width: 30.8%;
52
-        float: left;
53
-        margin-right: 2.5%;
54
-        margin-bottom: 2.5%;
55
-      }
56
-      figcaption {
57
-        clear: left;
58
-      }
59
-    }
60
-  }
61
-}
62
-svg:not(:root) {
63
-  overflow: hidden; 
64
-}
65
-
1
+/* ==========================================================================
2
+   Animations
3
+   ========================================================================== */
66 4
 
67
-// Tables
68
-// --------------------------------------------------
69
-table { 
70
-  width: 100%;
71
-}
72
-
73
-// Buttons
74
-// --------------------------------------------------
75
-.btn {
76
-  display: inline-block;
77
-  margin-bottom: 20px;
78
-  padding: 8px 20px;
79
-  @include font-size(14);
80
-  background-color: $black;
81
-  color: $white;
82
-  border: 2px solid $black !important;
83
-  border-radius: $border-radius;
84
-  &:visited {
85
-    color: $white;
86
-  }
87
-  &:hover {
88
-    background-color: $white;
89
-    color: $black;
90
-  }
91
-}
92
-
93
-.close-btn {
94
-  position: absolute;
95
-  top: 0;
96
-  right: 0;
97
-  z-index: 1;
98
-  background-color: transparent;
99
-  border: 0 solid transparent;
100
-  color: $white;
101
-}
5
+/* add .animated class to elements you wish to animate
6
+ * along with the type of animation (eg: <div class="animated fadeIn"></div>)
7
+ */
102 8
 
103
-// Well
104
-// --------------------------------------------------
105
-.well {
106
-  padding: 20px;
107
-  border: 1px solid $comp-color;
108
-  @include rounded(4px);
109
-}
110
-
111
-// Animations
112
-// --------------------------------------------------
113 9
 .animated{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;-o-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;-o-animation-duration:1s;animation-duration:1s;}.animated.hinge{-webkit-animation-duration:2s;-moz-animation-duration:2s;-ms-animation-duration:2s;-o-animation-duration:2s;animation-duration:2s;}@-webkit-keyframes fadeIn {
114 10
   0% {opacity: 0;}  100% {opacity: 1;}
115 11
 }
116 12
 
13
+/*
14
+   Fade-in animation .fadeIn
15
+   ========================================================================== */
16
+
17
+@-webkit-keyframes fadeIn {
18
+  0% {opacity: 0;}
19
+  100% {opacity: 1;}
20
+}
117 21
 @-moz-keyframes fadeIn {
118
-  0% {opacity: 0;}  
22
+  0% {opacity: 0;}
119 23
   100% {opacity: 1;}
120 24
 }
121
-
122 25
 @-o-keyframes fadeIn {
123
-  0% {opacity: 0;}  
26
+  0% {opacity: 0;}
124 27
   100% {opacity: 1;}
125 28
 }
126
-
127 29
 @keyframes fadeIn {
128
-  0% {opacity: 0;}  
30
+  0% {opacity: 0;}
129 31
   100% {opacity: 1;}
130 32
 }
131 33
 
@@ -135,48 +37,46 @@ table {
135 37
   -o-animation-name: fadeIn;
136 38
   animation-name: fadeIn;
137 39
 }
40
+
41
+/*
42
+   Fade-in down animation .fadeInDown
43
+   ========================================================================== */
44
+
138 45
 @-webkit-keyframes fadeInDown {
139 46
   0% {
140 47
     opacity: 0;
141 48
     -webkit-transform: translateY(-20px);
142 49
   }
143
-  
144 50
   100% {
145 51
     opacity: 1;
146 52
     -webkit-transform: translateY(0);
147 53
   }
148 54
 }
149
-
150 55
 @-moz-keyframes fadeInDown {
151 56
   0% {
152 57
     opacity: 0;
153 58
     -moz-transform: translateY(-20px);
154 59
   }
155
-  
156 60
   100% {
157 61
     opacity: 1;
158 62
     -moz-transform: translateY(0);
159 63
   }
160 64
 }
161
-
162 65
 @-o-keyframes fadeInDown {
163 66
   0% {
164 67
     opacity: 0;
165 68
     -o-transform: translateY(-20px);
166 69
   }
167
-  
168 70
   100% {
169 71
     opacity: 1;
170 72
     -o-transform: translateY(0);
171 73
   }
172 74
 }
173
-
174 75
 @keyframes fadeInDown {
175 76
   0% {
176 77
     opacity: 0;
177 78
     transform: translateY(-20px);
178 79
   }
179
-  
180 80
   100% {
181 81
     opacity: 1;
182 82
     transform: translateY(0);
@@ -189,48 +89,46 @@ table {
189 89
   -o-animation-name: fadeInDown;
190 90
   animation-name: fadeInDown;
191 91
 }
92
+
93
+/*
94
+   Fade-in down big animation .fadeInDownBig
95
+   ========================================================================== */
96
+
192 97
 @-webkit-keyframes fadeInDownBig {
193 98
   0% {
194 99
     opacity: 0;
195 100
     -webkit-transform: translateY(-2000px);
196 101
   }
197
-  
198 102
   100% {
199 103
     opacity: 1;
200 104
     -webkit-transform: translateY(0);
201 105
   }
202 106
 }
203
-
204 107
 @-moz-keyframes fadeInDownBig {
205 108
   0% {
206 109
     opacity: 0;
207 110
     -moz-transform: translateY(-2000px);
208 111
   }
209
-  
210 112
   100% {
211 113
     opacity: 1;
212 114
     -moz-transform: translateY(0);
213 115
   }
214 116
 }
215
-
216 117
 @-o-keyframes fadeInDownBig {
217 118
   0% {
218 119
     opacity: 0;
219 120
     -o-transform: translateY(-2000px);
220 121
   }
221
-  
222 122
   100% {
223 123
     opacity: 1;
224 124
     -o-transform: translateY(0);
225 125
   }
226 126
 }
227
-
228 127
 @keyframes fadeInDownBig {
229 128
   0% {
230 129
     opacity: 0;
231 130
     transform: translateY(-2000px);
232 131
   }
233
-  
234 132
   100% {
235 133
     opacity: 1;
236 134
     transform: translateY(0);
@@ -243,81 +141,71 @@ table {
243 141
   -o-animation-name: fadeInDownBig;
244 142
   animation-name: fadeInDownBig;
245 143
 }
144
+
145
+/*
146
+   Bounce-in animation .bounceIn
147
+   ========================================================================== */
148
+
246 149
 @-webkit-keyframes bounceIn {
247 150
   0% {
248 151
     opacity: 0;
249 152
     -webkit-transform: scale(.3);
250 153
   }
251
-  
252 154
   50% {
253 155
     opacity: 1;
254 156
     -webkit-transform: scale(1.05);
255 157
   }
256
-  
257 158
   70% {
258 159
     -webkit-transform: scale(.9);
259 160
   }
260
-  
261 161
   100% {
262 162
     -webkit-transform: scale(1);
263 163
   }
264 164
 }
265
-
266 165
 @-moz-keyframes bounceIn {
267 166
   0% {
268 167
     opacity: 0;
269 168
     -moz-transform: scale(.3);
270 169
   }
271
-  
272 170
   50% {
273 171
     opacity: 1;
274 172
     -moz-transform: scale(1.05);
275 173
   }
276
-  
277 174
   70% {
278 175
     -moz-transform: scale(.9);
279 176
   }
280
-  
281 177
   100% {
282 178
     -moz-transform: scale(1);
283 179
   }
284 180
 }
285
-
286 181
 @-o-keyframes bounceIn {
287 182
   0% {
288 183
     opacity: 0;
289 184
     -o-transform: scale(.3);
290 185
   }
291
-  
292 186
   50% {
293 187
     opacity: 1;
294 188
     -o-transform: scale(1.05);
295 189
   }
296
-  
297 190
   70% {
298 191
     -o-transform: scale(.9);
299 192
   }
300
-  
301 193
   100% {
302 194
     -o-transform: scale(1);
303 195
   }
304 196
 }
305
-
306 197
 @keyframes bounceIn {
307 198
   0% {
308 199
     opacity: 0;
309 200
     transform: scale(.3);
310 201
   }
311
-  
312 202
   50% {
313 203
     opacity: 1;
314 204
     transform: scale(1.05);
315 205
   }
316
-  
317 206
   70% {
318 207
     transform: scale(.9);
319 208
   }
320
-  
321 209
   100% {
322 210
     transform: scale(1);
323 211
   }
@@ -329,81 +217,71 @@ table {
329 217
   -o-animation-name: bounceIn;
330 218
   animation-name: bounceIn;
331 219
 }
220
+
221
+/*
222
+   Bounce-in down animation .bounceInDown
223
+   ========================================================================== */
224
+
332 225
 @-webkit-keyframes bounceInDown {
333 226
   0% {
334 227
     opacity: 0;
335 228
     -webkit-transform: translateY(-2000px);
336 229
   }
337
-  
338 230
   60% {
339 231
     opacity: 1;
340 232
     -webkit-transform: translateY(30px);
341 233
   }
342
-  
343 234
   80% {
344 235
     -webkit-transform: translateY(-10px);
345 236
   }
346
-  
347 237
   100% {
348 238
     -webkit-transform: translateY(0);
349 239
   }
350 240
 }
351
-
352 241
 @-moz-keyframes bounceInDown {
353 242
   0% {
354 243
     opacity: 0;
355 244
     -moz-transform: translateY(-2000px);
356 245
   }
357
-  
358 246
   60% {
359 247
     opacity: 1;
360 248
     -moz-transform: translateY(30px);
361 249
   }
362
-  
363 250
   80% {
364 251
     -moz-transform: translateY(-10px);
365 252
   }
366
-  
367 253
   100% {
368 254
     -moz-transform: translateY(0);
369 255
   }
370 256
 }
371
-
372 257
 @-o-keyframes bounceInDown {
373 258
   0% {
374 259
     opacity: 0;
375 260
     -o-transform: translateY(-2000px);
376 261
   }
377
-  
378 262
   60% {
379 263
     opacity: 1;
380 264
     -o-transform: translateY(30px);
381 265
   }
382
-  
383 266
   80% {
384 267
     -o-transform: translateY(-10px);
385 268
   }
386
-  
387 269
   100% {
388 270
     -o-transform: translateY(0);
389 271
   }
390 272
 }
391
-
392 273
 @keyframes bounceInDown {
393 274
   0% {
394 275
     opacity: 0;
395 276
     transform: translateY(-2000px);
396 277
   }
397
-  
398 278
   60% {
399 279
     opacity: 1;
400 280
     transform: translateY(30px);
401 281
   }
402
-  
403 282
   80% {
404 283
     transform: translateY(-10px);
405 284
   }
406
-  
407 285
   100% {
408 286
     transform: translateY(0);
409 287
   }
@@ -416,10 +294,14 @@ table {
416 294
   animation-name: bounceInDown;
417 295
 }
418 296
 
297
+/*
298
+   Drop animation .drop
299
+   ========================================================================== */
300
+
419 301
 @-webkit-keyframes drop {
420 302
   0% {
421 303
     -webkit-transform: translateY(-500px);
422
-  } 
304
+  }
423 305
   100% {
424 306
     -webkit-transform: translateY(0);
425 307
   }
@@ -427,7 +309,7 @@ table {
427 309
 @-moz-keyframes drop {
428 310
   0% {
429 311
     -moz-transform: translateY(-500px);
430
-  } 
312
+  }
431 313
   100% {
432 314
     -moz-transform: translateY(0);
433 315
   }
@@ -435,7 +317,7 @@ table {
435 317
 @-o-keyframes drop {
436 318
   0% {
437 319
     -o-transform: translateY(-500px);
438
-  } 
320
+  }
439 321
   100% {
440 322
     -o-transform: translateY(0);
441 323
   }
@@ -443,7 +325,7 @@ table {
443 325
 @keyframes drop {
444 326
   0% {
445 327
     transform: translateY(-500px);
446
-  } 
328
+  }
447 329
   100% {
448 330
     transform: translateY(0);
449 331
   }
@@ -453,4 +335,4 @@ table {
453 335
   -moz-animation-name: drop;
454 336
   -o-animation-name: drop;
455 337
   animation-name: drop;
456
-}
338
+}

+ 77
- 0
_sass/_archives.scss View File

@@ -0,0 +1,77 @@
1
+/* ==========================================================================
2
+   Archive pages
3
+   ========================================================================== */
4
+
5
+
6
+
7
+
8
+/*
9
+   Post archive
10
+   ========================================================================== */
11
+
12
+.post-list {
13
+  margin: 0;
14
+  padding: 0;
15
+  list-style-type: none;
16
+  li {
17
+    padding: 8px 0;
18
+    border-bottom: 1px solid lighten($black,80);
19
+    border-bottom: 1px solid rgba($black,.10);
20
+    @include font-size(18,no);
21
+    @include clearfix;
22
+    > a {
23
+      border-bottom-width: 0; /* remove underlines from items in post indexes */
24
+    }
25
+  }
26
+  a > span {
27
+    float: right;
28
+  }
29
+  .entry-date {
30
+    @include font-size(14,no);
31
+    text-transform: uppercase;
32
+    display: none;
33
+    @include media($medium) {
34
+      display: inline;
35
+    }
36
+  }
37
+  /* post excerpt */
38
+  .excerpt {
39
+    display: block;
40
+    float: none;
41
+    @include font-size(14, no, 16);
42
+    @include media($medium) {
43
+      width: 70%;
44
+    }
45
+    @include media($large) {
46
+      width: 60%;
47
+    }
48
+  }
49
+}
50
+
51
+/*
52
+   Tag archive
53
+   ========================================================================== */
54
+
55
+.tag-box {
56
+  list-style: none;
57
+  margin: 0;
58
+  padding: 4px 0;
59
+  overflow: hidden;
60
+  @include clearfix;
61
+  &.inline li {
62
+    float: left;
63
+    @include font-size(14);
64
+    line-height: 2.5;
65
+  }
66
+  a {
67
+    padding: 4px 6px;
68
+    margin: 2px;
69
+    background-color: lighten($black, 90);
70
+    @include rounded(4px);
71
+    text-decoration: none;
72
+    span {
73
+      vertical-align: super;
74
+      @include font-size(10);
75
+    }
76
+  }
77
+}

+ 221
- 0
_sass/_base.scss View File

@@ -0,0 +1,221 @@
1
+/* ==========================================================================
2
+   Base elements
3
+   ========================================================================== */
4
+
5
+/*
6
+   Selections
7
+   ========================================================================== */
8
+
9
+::-moz-selection {
10
+	background-color: lighten($base-color, 65%);
11
+	color: $base-color;
12
+	text-shadow: none;
13
+}
14
+::selection {
15
+	background-color: lighten($base-color, 65%);
16
+	color: $base-color;
17
+	text-shadow: none;
18
+}
19
+
20
+
21
+/*
22
+   Body
23
+   ========================================================================== */
24
+
25
+body {
26
+  margin: 0;
27
+  padding: 0;
28
+  width: 100%;
29
+  font-family: $base-font;
30
+  color: $text-color;
31
+  background-color: $body-color;
32
+  border-top: 5px solid $black;
33
+}
34
+
35
+/*
36
+   Typography
37
+   ========================================================================== */
38
+
39
+body {
40
+	font-family: $base-font;
41
+	color: $text-color;
42
+	@include font-size(16);
43
+}
44
+
45
+p {
46
+	@include font-size(18,yes,28);
47
+}
48
+
49
+li {
50
+	@include font-size(16,12,24);
51
+}
52
+
53
+/* headings */
54
+
55
+h1, h2, h3, h4, h5, h6 {
56
+	font-family: $heading-font;
57
+	text-rendering: optimizeLegibility; // Fix the character spacing for headings
58
+}
59
+h1 {
60
+	@include font-size(36);
61
+}
62
+h2 {
63
+	@include font-size(32);
64
+}
65
+h3 {
66
+	@include font-size(28);
67
+}
68
+h4 {
69
+	@include font-size(24);
70
+}
71
+h5 {
72
+	@include font-size(20);
73
+}
74
+h6 {
75
+	@include font-size(18);
76
+}
77
+
78
+/* underlined text */
79
+
80
+u,
81
+ins {
82
+	text-decoration: none;
83
+	border-bottom: 1px solid $text-color;
84
+}
85
+
86
+/*
87
+   Links
88
+   ========================================================================== */
89
+
90
+a {
91
+	text-decoration: none;
92
+	color: $link-color;
93
+	&:visited {
94
+		color: lighten($link-color, 20);
95
+	}
96
+	&:hover {
97
+		color: darken($link-color, 20);
98
+	}
99
+	&:focus {
100
+		outline: thin dotted;
101
+		color: darken($link-color, 20);
102
+	}
103
+	&:hover,
104
+	&:active {
105
+		outline: 0;
106
+	}
107
+}
108
+
109
+/*
110
+   Horizontal rules
111
+   ========================================================================== */
112
+
113
+hr {
114
+    display: block;
115
+    margin: 1em 0;
116
+    padding: 0;
117
+    height: 1px;
118
+    border: 0;
119
+    border-top: 1px solid #ccc;
120
+    border-bottom: 1px solid #fff;
121
+}
122
+
123
+/*
124
+   Figures and Images
125
+   ========================================================================== */
126
+
127
+figure {
128
+  margin: 0;
129
+  padding-top: 10px;
130
+  padding-bottom: 10px;
131
+  @include clearfix;
132
+  img {
133
+    margin-bottom: 10px;
134
+  }
135
+  a {
136
+    img {
137
+      @include transform(translateY(0));
138
+      -webkit-transition-duration: 0.25s;
139
+      -moz-transition-duration: 0.25s;
140
+      -o-transition-duration: 0.25s;
141
+      opacity: 0.7;
142
+      &:hover {
143
+        @include transform(translateY(-5px));
144
+        @include box-shadow(0 0 10px rgba($black, .20));
145
+        opacity: 1;
146
+      }
147
+    }
148
+  }
149
+}
150
+
151
+svg:not(:root) {
152
+  overflow: hidden;
153
+}
154
+
155
+// Figure captions
156
+
157
+figcaption {
158
+	padding-top: 10px;
159
+	@include font-size(14);
160
+	line-height: 1.3;
161
+	color: lighten($text-color, 10);
162
+}
163
+
164
+
165
+
166
+// Tables
167
+// --------------------------------------------------
168
+table {
169
+  width: 100%;
170
+}
171
+
172
+
173
+// Blockquotes
174
+// --------------------------------------------------
175
+
176
+blockquote {
177
+	font-family: $alt-font;
178
+	font-style: italic;
179
+	@include font-size(16);
180
+	padding-left: 20px;
181
+	border-left: 8px solid $black;
182
+}
183
+
184
+
185
+
186
+
187
+
188
+// Code
189
+// --------------------------------------------------
190
+
191
+tt, code, kbd, samp, pre {
192
+	font-family: $code-font;
193
+}
194
+p,
195
+li {
196
+	code {
197
+		@include font-size(14);
198
+		font-family: $code-font;
199
+		white-space: nowrap;
200
+		margin: 0 2px;
201
+		padding: 0 5px;
202
+		border: 1px solid lighten($black, 90);
203
+		background-color: lighten($black, 95);
204
+		@include rounded(3px);
205
+	}
206
+}
207
+pre {
208
+	@include font-size(14);
209
+	overflow-x: auto;
210
+}
211
+
212
+
213
+
214
+
215
+
216
+// Global Transition
217
+// ---------------------------------------------------
218
+
219
+b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight {
220
+	@include transition(all .2s ease);
221
+}

+ 39
- 0
_sass/_buttons.scss View File

@@ -0,0 +1,39 @@
1
+/* ==========================================================================
2
+   Buttons
3
+   ========================================================================== */
4
+
5
+/*
6
+   Default button
7
+   ========================================================================== */
8
+
9
+.btn {
10
+  display: inline-block;
11
+  margin-bottom: 20px;
12
+  padding: 8px 20px;
13
+  @include font-size(14);
14
+  background-color: $black;
15
+  color: $white;
16
+  border: 2px solid $black !important;
17
+  border-radius: $border-radius;
18
+  &:visited {
19
+    color: $white;
20
+  }
21
+  &:hover {
22
+    background-color: $white;
23
+    color: $black;
24
+  }
25
+}
26
+
27
+/*
28
+   Close button
29
+   ========================================================================== */
30
+
31
+.close-btn {
32
+  position: absolute;
33
+  top: 0;
34
+  right: 0;
35
+  z-index: 1;
36
+  background-color: transparent;
37
+  border: 0 solid transparent;
38
+  color: $white;
39
+}

+ 0
- 133
_sass/_coderay.scss View File

@@ -1,133 +0,0 @@
1
-.CodeRay {
2
-  background-color: #efefef;
3
-  font-family: $code-font;
4
-  @include font-size(12);
5
-  color: #333332;
6
-  margin-bottom: 1.5em;
7
-  @include rounded(4px);
8
-  pre {
9
-    margin: 0px;
10
-    padding: 1em;
11
-  }
12
-}
13
-
14
-div.CodeRay { }
15
-span.CodeRay { white-space: pre; border: 0px; padding: 2px }
16
-
17
-table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
18
-table.CodeRay td {
19
-  padding: 1em 0.5em;
20
-  vertical-align: top;
21
-}
22
-
23
-.CodeRay .line-numbers, .CodeRay .no {
24
-  background-color: #ECECEC;
25
-  color: #AAA;
26
-  text-align: right;
27
-}
28
-
29
-.CodeRay .line-numbers a {
30
-  color: #AAA;
31
-}
32
-
33
-.CodeRay .line-numbers tt { font-weight: bold }
34
-.CodeRay .line-numbers .highlighted { color: red }
35
-.CodeRay .line { display: block; float: left; width: 100%; }
36
-.CodeRay span.line-numbers { padding: 0 24px 0 4px }
37
-.CodeRay .code { width: 100% }
38
-
39
-ol.CodeRay { font-size: 10pt }
40
-ol.CodeRay li { white-space: pre }
41
-
42
-.CodeRay .code pre { overflow: auto }
43
-.CodeRay .debug { color:white ! important; background:blue ! important; }
44
-
45
-.CodeRay .annotation { color:#007 }
46
-.CodeRay .attribute-name { color:#f08 }
47
-.CodeRay .attribute-value { color:#700 }
48
-.CodeRay .binary { color:#509; font-weight:bold }
49
-.CodeRay .comment  { color:#998; font-style: italic;}
50
-.CodeRay .char { color:#04D }
51
-.CodeRay .char .content { color:#04D }
52
-.CodeRay .char .delimiter { color:#039 }
53
-.CodeRay .class { color:#458; font-weight:bold }
54
-.CodeRay .complex { color:#A08; font-weight:bold }
55
-.CodeRay .constant { color:teal; }
56
-.CodeRay .color { color:#0A0 }
57
-.CodeRay .class-variable { color:#369 }
58
-.CodeRay .decorator { color:#B0B; }
59
-.CodeRay .definition { color:#099; font-weight:bold }
60
-.CodeRay .directive { color:#088; font-weight:bold }
61
-.CodeRay .delimiter { color:black }
62
-.CodeRay .doc { color:#970 }
63
-.CodeRay .doctype { color:#34b }
64
-.CodeRay .doc-string { color:#D42; font-weight:bold }
65
-.CodeRay .escape  { color:#666; font-weight:bold }
66
-.CodeRay .entity { color:#800; font-weight:bold }
67
-.CodeRay .error { color:#F00; background-color:#FAA }
68
-.CodeRay .exception { color:#C00; font-weight:bold }
69
-.CodeRay .filename { color:#099; }
70
-.CodeRay .function { color:#900; font-weight:bold }
71
-.CodeRay .global-variable { color:teal; font-weight:bold }
72
-.CodeRay .hex { color:#058; font-weight:bold }
73
-.CodeRay .integer  { color:#099; }
74
-.CodeRay .include { color:#B44; font-weight:bold }
75
-.CodeRay .inline { color: black }
76
-.CodeRay .inline .inline { background: #ccc }
77
-.CodeRay .inline .inline .inline { background: #bbb }
78
-.CodeRay .inline .inline-delimiter { color: #D14; }
79
-.CodeRay .inline-delimiter { color: #D14; }
80
-.CodeRay .important { color:#f00; }
81
-.CodeRay .interpreted { color:#B2B; font-weight:bold }
82
-.CodeRay .instance-variable { color:teal }
83
-.CodeRay .label { color:#970; font-weight:bold }
84
-.CodeRay .local-variable { color:#963 }
85
-.CodeRay .octal { color:#40E; font-weight:bold }
86
-.CodeRay .operator { }
87
-.CodeRay .predefined-constant {  font-weight:bold }
88
-.CodeRay .predefined { color:#369; font-weight:bold }
89
-.CodeRay .preprocessor { color:#579; }
90
-.CodeRay .pseudo-class { color:#00C; font-weight:bold }
91
-.CodeRay .predefined-type { color:#074; font-weight:bold }
92
-.CodeRay .reserved, .keyword  { color:#000; font-weight:bold }
93
-
94
-.CodeRay .key { color: #808; }
95
-.CodeRay .key .delimiter { color: #606; }
96
-.CodeRay .key .char { color: #80f; }
97
-.CodeRay .value { color: #088; }
98
-
99
-.CodeRay .regexp { background-color:#fff0ff }
100
-.CodeRay .regexp .content { color:#808 }
101
-.CodeRay .regexp .delimiter { color:#404 }
102
-.CodeRay .regexp .modifier { color:#C2C }
103
-.CodeRay .regexp .function  { color:#404; font-weight: bold }
104
-
105
-.CodeRay .string { color: #D20; }
106
-.CodeRay .string .string { }
107
-.CodeRay .string .string .string { background-color:#ffd0d0 }
108
-.CodeRay .string .content { color: #D14; }
109
-.CodeRay .string .char { color: #D14; }
110
-.CodeRay .string .delimiter { color: #D14; }
111
-
112
-.CodeRay .shell { color:#D14 }
113
-.CodeRay .shell .content { }
114
-.CodeRay .shell .delimiter { color:#D14 }
115
-
116
-.CodeRay .symbol { color:#990073 }
117
-.CodeRay .symbol .content { color:#A60 }
118
-.CodeRay .symbol .delimiter { color:#630 }
119
-
120
-.CodeRay .tag { color:#070 }
121
-.CodeRay .tag-special { color:#D70; font-weight:bold }
122
-.CodeRay .type { color:#339; font-weight:bold }
123
-.CodeRay .variable  { color:#036 }
124
-
125
-.CodeRay .insert { background: #afa; }
126
-.CodeRay .delete { background: #faa; }
127
-.CodeRay .change { color: #aaf; background: #007; }
128
-.CodeRay .head { color: #f8f; background: #505 }
129
-
130
-.CodeRay .insert .insert { color: #080; font-weight:bold }
131
-.CodeRay .delete .delete { color: #800; font-weight:bold }
132
-.CodeRay .change .change { color: #66f; }
133
-.CodeRay .head .head { color: #f4f; }

+ 30
- 0
_sass/_footer.scss View File

@@ -0,0 +1,30 @@
1
+/* ==========================================================================
2
+   Site footer
3
+   ========================================================================== */
4
+
5
+.footer-wrapper {
6
+  @include clearfix;
7
+  margin: 2em auto;
8
+  text-align: center;
9
+  font-family: $alt-font;
10
+  @include font-size(14);
11
+  font-style: italic;
12
+  color: lighten($text-color,20);
13
+  a {
14
+    color: lighten($text-color,20);
15
+  }
16
+}
17
+
18
+/*
19
+   Social media icons
20
+   ========================================================================== */
21
+
22
+.social-icons {
23
+  margin: 1em 0 2em;
24
+  a {
25
+    padding: 4px 8px;
26
+    &:hover {
27
+      color: $black;
28
+    }
29
+  }
30
+}

+ 8
- 0
_sass/_footnotes.scss View File

@@ -0,0 +1,8 @@
1
+/* ==========================================================================
2
+   Footnotes (class generated by Kramdown)
3
+   ========================================================================== */
4
+
5
+.footnotes {
6
+  @include font-size(14);
7
+  font-family: $base-font;
8
+}

+ 116
- 0
_sass/_helpers.scss View File

@@ -0,0 +1,116 @@
1
+/* ==========================================================================
2
+   Helpers and Utility Classes
3
+   ========================================================================== */
4
+
5
+.wrap {
6
+  margin: 0 auto;
7
+}
8
+
9
+/*
10
+   Typography
11
+   ========================================================================== */
12
+
13
+/* capitalize all letters */
14
+
15
+.all-caps {
16
+  text-transform: uppercase;
17
+}
18
+
19
+/* center text */
20
+
21
+.center {
22
+  text-align: center;
23
+}
24
+
25
+/* remove bullets from list items */
26
+
27
+/**
28
+ *  <ul class="unstyled-list">
29
+ *    <li>Item 1</li>
30
+ *    <li>Item 2</li>
31
+ *  </ul>
32
+ */
33
+
34
+.unstyled-list {
35
+  list-style: none;
36
+  margin-left: 0;
37
+  padding-left: 0;
38
+  li {
39
+    list-style-type: none;
40
+  }
41
+}
42
+
43
+/*
44
+   Image alignment
45
+   ========================================================================== */
46
+
47
+/* float left */
48
+
49
+.pull-left {
50
+  float: left;
51
+  padding-right: $gutter;
52
+}
53
+
54
+/* float right */
55
+
56
+.pull-right {
57
+  float: right;
58
+  padding-left: $gutter;
59
+}
60
+
61
+/*
62
+   Image layout in <figure>
63
+   ========================================================================== */
64
+
65
+figure {
66
+
67
+  /* 2 images in a row. should be of equal height/width to maintain layout */
68
+
69
+  &.half {
70
+    @include media($large) {
71
+      img {
72
+        width: 47.5%;
73
+        float: left;
74
+        margin-right: 2.5%;
75
+        margin-bottom: 2.5%;
76
+      }
77
+      figcaption {
78
+        clear: left;
79
+      }
80
+    }
81
+  }
82
+
83
+  /* 3 images in a row. should be of equal height/width to maintain layout */
84
+
85
+  &.third {
86
+    @include media($large) {
87
+      img {
88
+        width: 30.8%;
89
+        float: left;
90
+        margin-right: 2.5%;
91
+        margin-bottom: 2.5%;
92
+      }
93
+      figcaption {
94
+        clear: left;
95
+      }
96
+    }
97
+  }
98
+}
99
+
100
+/*
101
+   No scrollbars
102
+   ========================================================================== */
103
+
104
+.no-scroll {
105
+  overflow: hidden;
106
+}
107
+
108
+/*
109
+   Link arrow (used in link post titles)
110
+   ========================================================================== */
111
+
112
+.link-arrow {
113
+  font-weight: 100;
114
+  text-decoration: underline;
115
+  font-style: normal;
116
+}

+ 0
- 529
_sass/_layout.scss View File

@@ -1,529 +0,0 @@
1
-body {
2
-	margin: 0;
3
-	padding: 0;
4
-	width: 100%;
5
-	background-color: $body-color;
6
-	border-top: 5px solid $black;
7
-}
8
-
9
-
10
-// Top Navigation
11
-// --------------------------------------------------
12
-
13
-.navigation-wrapper {
14
-	text-align: center;
15
-	@include clearfix;
16
-	ul {
17
-		display: inline-block;
18
-		width: 100%;
19
-		vertical-align: top;
20
-		margin: 0 0 50px;
21
-		padding: 4px 20px;
22
-		background-color: $black;
23
-		@include media($medium) {
24
-			width: auto;
25
-			@include rounded(0 0 10px 10px);
26
-		}
27
-		@include clearfix;
28
-	}
29
-	li {
30
-		display: block;
31
-		float: left;
32
-		list-style: none;
33
-		text-align: center;
34
-		@include font-size(24,no);
35
-		text-transform: uppercase;
36
-		color: $white;
37
-		@include media($medium) {
38
-			@include font-size(14,no);
39
-		}
40
-		a:hover {
41
-			@include box-shadow($shadow: inset 0 0 1px $white);
42
-		}
43
-	}
44
-	a {
45
-		display: block;
46
-		margin-bottom: 10px;
47
-		padding: 12px 20px;
48
-		@include media($medium) {
49
-			margin-bottom: 0;
50
-			padding: 6px 10px;
51
-		}
52
-		color: $white;
53
-		@include rounded(4px);
54
-		&:hover {
55
-			background-color: lighten($black, 10);
56
-		}
57
-	}
58
-}
59
-// Responsive nav toggle stuff
60
-#site-nav {
61
-	display: none;
62
-	z-index: 5;
63
-	@include media($medium) {
64
-		-webkit-animation-duration: 1s;
65
-		-moz-animation-duration: 1s;
66
-		-o-animation-duration: 1s;
67
-		animation-duration: 1s;
68
-	}
69
-	&.closed {
70
-		@include media($medium) {
71
-			display: block;
72
-		}
73
-	}
74
-	&.opened {
75
-		display: block;
76
-		max-height: 100%;
77
-		li {
78
-			float: none;
79
-			@include media($medium) {
80
-				float: left;
81
-			}
82
-		}
83
-	}
84
-}
85
-.no-js #site-nav {
86
-	display: block;
87
-}	
88
-#nav-toggle { 
89
-	z-index: 20;
90
-	display: block;
91
-	vertical-align: top;
92
-	margin: 0;
93
-	padding: 6px 20px;
94
-	background-color: $black;
95
-	height: 44px;
96
-	@include rounded(0);
97
-	@include media($medium) {
98
-		display: none;
99
-	}
100
-}
101
-// menu overlay
102
-.menu-screen {
103
-	@include position(fixed, 0px 0px 0px 0px);
104
-	@include transition;
105
-	background: $black;
106
-	opacity: 0;
107
-	visibility: hidden;
108
-	z-index: 10;
109
-	&.is-visible {
110
-		opacity: 1;
111
-		visibility: visible;
112
-		&:hover {
113
-			cursor: pointer;
114
-		}
115
-	}
116
-}
117
-
118
-
119
-// Masthead
120
-// --------------------------------------------------
121
-
122
-.masthead {
123
-	margin-top: 40px;
124
-	@include clearfix;
125
-	@include media($medium) {
126
-		margin-top: 0;
127
-	}
128
-	.wrap {
129
-		text-align: center;
130
-		max-width: em(440);
131
-		padding-right: 20px;
132
-		padding-left: 20px;
133
-		@include media($medium) {
134
-			max-width: em(728);
135
-			padding-right: 60px;
136
-			padding-left: 60px;
137
-		}
138
-		@include media($large) {
139
-			max-width: em(960);
140
-		}
141
-	}
142
-}
143
-.site-logo {
144
-	img {
145
-		width: 100px;
146
-		height: 100px;
147
-		@include animation-duration(1s);
148
-	    @include animation-delay(.05s);
149
-	    border: 4px solid $white;
150
-	    @include rounded(100px);
151
-		@include media($medium) {
152
-			width: 150px;
153
-			height: 150px;
154
-			@include rounded(150px);
155
-		}
156
-		@include media($large) {
157
-			width: 200px;
158
-			height: 200px;
159
-			@include rounded(200px);
160
-		}
161
-	}
162
-}
163
-.site-title {
164
-	margin-bottom: 0;
165
-	@include animation-duration(1s);
166
-    @include animation-delay(.75s);
167
-	a { 
168
-		color: $black; 
169
-	}
170
-}
171
-.site-description {
172
-	margin-top: 0;
173
-	font-family: $alt-font;
174
-	@include font-size(16);
175
-	font-weight: 400;
176
-	font-style: italic;
177
-	@include animation-duration(1s);
178
-    @include animation-delay(1s);
179
-	@include media($medium) {
180
-		@include font-size(20);
181
-	}
182
-}
183
-
184
-
185
-// Main
186
-// --------------------------------------------------
187
-
188
-#main {
189
-	@include clearfix;
190
-}
191
-.entry,
192
-.hentry {
193
-	@include clearfix;
194
-	border-bottom: 1px solid lighten($black,80);
195
-	border-bottom: 1px solid rgba($black,.10);
196
-}
197
-.entry-feature-image {
198
-	margin: 20px 0 0;
199
-	width: 100%;
200
-	@include media($medium) {
201
-		margin-top: -75px;
202
-	}
203
-	@include media($large) {
204
-		margin-top: -145px;
205
-	}
206
-}
207
-.entry-header {
208
-	@include fill-parent;
209
-}
210
-.entry-tags {
211
-	display: block;
212
-	margin-top: 2em;
213
-	text-transform: uppercase;
214
-	@include font-size(16);
215
-	font-weight: 600;
216
-	a { 
217
-		color: $text-color; 
218
-	}
219
-}
220
-span + .entry-title {
221
-	margin-top: 0;
222
-}
223
-.entry-title {
224
-	font-family: $alt-font;
225
-	font-style: italic;
226
-	@include font-size(36,yes,36);
227
-	font-weight: 400;
228
-	line-height: 1;
229
-	letter-spacing: -3px;
230
-	a {
231
-		color: $black;
232
-		text-decoration: underline;
233
-	}
234
-	@include media($medium) {
235
-		@include font-size(52,yes,54);
236
-	}
237
-	@include media($large) {
238
-		@include font-size(68,yes,72);
239
-	}
240
-}
241
-.entry-wrapper {
242
-	@include outer-container;
243
-	margin-top: 0;
244
-	margin-bottom: 3em;
245
-	padding-right: $gutter;
246
-	padding-left: $gutter;
247
-}
248
-.entry-meta {
249
-	@include span-columns(12);
250
-	text-transform: uppercase;
251
-	@include font-size(14);
252
-	a { 
253
-		color: $text-color; 
254
-	}
255
-	@include media($large) {
256
-		@include span-columns(2.5);
257
-	}
258
-	& > span {
259
-		padding: 0 20px 10px 0;
260
-		display: inline-block;
261
-		@include media($large) {
262
-			display: block;
263
-			padding: 8px 0;
264
-			border-bottom: 1px solid lighten($black,80);
265
-			border-bottom: 1px solid rgba($black,.10);
266
-		}
267
-	}
268
-}
269
-.bio-photo {
270
-	display: none;
271
-	@include media($large) {
272
-		display: block;
273
-		width: 150px;
274
-		height: 150px;
275
-		margin-bottom: 10px;
276
-		@include rounded(150px);
277
-		@include clearfix;
278
-	}
279
-}
280
-.entry-content {
281
-	@include span-columns(12);
282
-	p:first-child {
283
-		margin-top: 0;
284
-	}
285
-	@include media($large) {
286
-		@include span-columns(9.5);
287
-	}
288
-	p > a,
289
-	li > a {
290
-		border-bottom: 1px dotted lighten($link-color, 50);
291
-		&:hover {
292
-			border-bottom-style: solid;
293
-		}
294
-	}
295
-}
296
-.post-list {
297
-	li > a {
298
-		border-bottom-width: 0;
299
-	}
300
-}
301
-// Disqus Comments
302
-#disqus_thread {
303
-	margin-top: 2em;
304
-}
305
-// Pagination
306
-.pagination {
307
-	margin-top: 2em;
308
-	text-align: center;
309
-}
310
-// Page layout
311
-#home,
312
-#page {
313
-	.entry-wrapper {
314
-		max-width: em(760);
315
-	}
316
-	.entry-title {
317
-		text-align: center;
318
-		max-width: 100%;
319
-	}
320
-	.entry-content {
321
-		@include span-columns(12);
322
-	}
323
-}
324
-// Post index layout
325
-.post-list {
326
-	margin: 0;
327
-	padding: 0;
328
-	list-style-type: none;
329
-	li {
330
-		padding: 8px 0;
331
-		border-bottom: 1px solid lighten($black,80);
332
-		border-bottom: 1px solid rgba($black,.10);
333
-		@include font-size(18,no);
334
-		@include clearfix;
335
-	}
336
-	a > span {
337
-		float: right;
338
-	}
339
-	.entry-date {
340
-		@include font-size(14,no);
341
-		text-transform: uppercase;
342
-		display: none;
343
-		@include media($medium) {
344
-			display: inline;
345
-		}
346
-	}
347
-	/* post excerpt */
348
-	.excerpt {
349
-		display: block;
350
-		float: none;
351
-		@include font-size(14, no, 16);
352
-		@include media($medium) {
353
-			width: 70%;
354
-		}
355
-		@include media($large) {
356
-			width: 60%;
357
-		}
358
-	}
359
-}
360
-// Tag index
361
-.tag-box {
362
-	list-style: none;
363
-	margin: 0;
364
-	padding: 4px 0;
365
-	overflow: hidden;
366
-	@include clearfix;
367
-	&.inline li {
368
-		float: left;
369
-		@include font-size(14);
370
-		line-height: 2.5;
371
-	}
372
-	a { 
373
-		padding: 4px 6px;
374
-		margin: 2px;
375
-		background-color: lighten($black, 90);
376
-		@include rounded(4px);
377
-		text-decoration: none;
378
-		span { 
379
-			vertical-align: super;
380
-			@include font-size(10);
381
-		}
382
-	}
383
-}
384
-// Table of Contents
385
-#markdown-toc {
386
-	font-family: $alt-font;
387
-	margin-top: $gutter;
388
-	margin-bottom: $gutter;
389
-	padding-left: 0;
390
-	border: 1px solid $border-color;
391
-	border-radius: $border-radius;
392
-  ul {
393
-  	list-style-type: none;
394
-  	padding-left: 0;
395
-  }
396
-  li {
397
-    @include font-size(16,no,18);
398
-    border-bottom: 1px solid $border-color;
399
-    list-style-type: none;
400
-  }
401
-  h6 {
402
-    margin: 0;
403
-    padding: (.25 * $gutter) (.5 * $gutter);
404
-    background: $table-stripe-color;
405
-  }
406
-  a {
407
-    display: block;
408
-    padding: (.25 * $gutter) (.5 * $gutter);
409
-    border-left: 2px solid transparent;
410
-    border-bottom: 0 solid transparent;
411
-    &:hover,
412
-    &:focus {
413
-      background: lighten($border-color,5);
414
-    }
415
-  }
416
-}
417
-
418
-// Tables
419
-.table {
420
-	border-collapse: collapse;
421
-	margin: ((0px + $doc-line-height) / 2) 0;
422
-	margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
423
-	width: 100%;
424
-	tbody {
425
-		tr:hover > td, tr:hover > th {
426
-			background-color: $table-hover-color;
427
-		}
428
-	}
429
-	thead {
430
-		tr:first-child td {
431
-			border-bottom: 2px solid $table-border-color;
432
-		}
433
-	}
434
-	th {
435
-		padding: (0px + $doc-line-height) / 2;
436
-		padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
437
-		font-family: $alt-font;
438
-		font-weight: bold;
439
-		text-align: left;
440
-		background-color: $table-header-color;
441
-		border-bottom: 1px solid darken($border-color, 15%);
442
-	}
443
-	td {
444
-		border-bottom: 1px solid $border-color;
445
-		padding: (0px + $doc-line-height) / 2;
446
-		padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
447
-		@include font-size(18);
448
-	}
449
-	tr, td, th {
450
-		vertical-align: middle;
451
-	}
452
-}
453
-
454
-// Footer
455
-// --------------------------------------------------
456
-
457
-.footer-wrapper {
458
-	@include clearfix;
459
-	margin: 2em auto;
460
-	text-align: center;
461
-	font-family: $alt-font;
462
-	@include font-size(14);
463
-	font-style: italic;
464
-	color: lighten($text-color,20);
465
-	a {
466
-		color: lighten($text-color,20);
467
-	}
468
-}
469
-
470
-
471
-// Search Overlay
472
-// --------------------------------------------------
473
-
474
-.search-wrapper {
475
-	@include outer-container;
476
-	margin-top: 0;
477
-	padding-right: $gutter;
478
-	padding-left: $gutter;
479
-	height: 1px;
480
-}
481
-
482
-
483
-// Social Icons
484
-// --------------------------------------------------
485
-
486
-.social-icons {
487
-	margin: 1em 0 2em;
488
-	a {
489
-		padding: 4px 8px;
490
-		&:hover { 
491
-			color: $black; 
492
-		}
493
-	}
494
-}
495
-
496
-
497
-// Browser Upgrade
498
-// --------------------------------------------------
499
-
500
-.upgrade {
501
-	padding: 10px;
502
-	text-align: center;
503
-}
504
-
505
-
506
-// Google Search Form
507
-// --------------------------------------------------
508
-
509
-#goog-fixurl {
510
-	ul {
511
-		list-style: none;
512
-		margin-left: 0;
513
-		padding-left: 0;
514
-		li {
515
-			list-style-type: none;
516
-		}
517
-	}
518
-}
519
-#goog-wm-qt {
520
-	width: auto;
521
-	margin-right: 10px;
522
-	padding: 8px 10px;
523
-	@include font-size(14);
524
-	border-width: 2px;
525
-	border-radius: $border-radius;
526
-}
527
-#goog-wm-sb {
528
-	@extend .btn;
529
-}

+ 80
- 0
_sass/_masthead.scss View File

@@ -0,0 +1,80 @@
1
+/* ==========================================================================
2
+   Masthead
3
+   ========================================================================== */
4
+
5
+.masthead {
6
+  margin-top: 40px;
7
+  @include clearfix;
8
+  @include media($medium) {
9
+    margin-top: 0;
10
+  }
11
+  .wrap {
12
+    text-align: center;
13
+    max-width: em(440);
14
+    padding-right: 20px;
15
+    padding-left: 20px;
16
+    @include media($medium) {
17
+      max-width: em(728);
18
+      padding-right: 60px;
19
+      padding-left: 60px;
20
+    }
21
+    @include media($large) {
22
+      max-width: em(960);
23
+    }
24
+  }
25
+}
26
+
27
+/*
28
+   Site logo
29
+   ========================================================================== */
30
+
31
+.site-logo {
32
+  img {
33
+    width: 100px;
34
+    height: 100px;
35
+    @include animation-duration(1s);
36
+      @include animation-delay(.05s);
37
+      border: 4px solid $white;
38
+      @include rounded(100px); /* crops in a circle */
39
+    @include media($medium) {
40
+      width: 150px;
41
+      height: 150px;
42
+      @include rounded(150px); /* crops in a circle */
43
+    }
44
+    @include media($large) {
45
+      width: 200px;
46
+      height: 200px;
47
+      @include rounded(200px); /* crops in a circle */
48
+    }
49
+  }
50
+}
51
+
52
+/*
53
+   Site title/name
54
+   ========================================================================== */
55
+
56
+.site-title {
57
+  margin-bottom: 0;
58
+  @include animation-duration(1s);
59
+    @include animation-delay(.75s);
60
+  a {
61
+    color: $black;
62
+  }
63
+}
64
+
65
+/*
66
+   Site description text
67
+   ========================================================================== */
68
+
69
+.site-description {
70
+  margin-top: 0;
71
+  font-family: $alt-font;
72
+  @include font-size(16);
73
+  font-weight: 400;
74
+  font-style: italic;
75
+  @include animation-duration(1s);
76
+    @include animation-delay(1s);
77
+  @include media($medium) {
78
+    @include font-size(20);
79
+  }
80
+}

+ 99
- 0
_sass/_navigation.scss View File

@@ -0,0 +1,99 @@
1
+/* ==========================================================================
2
+   Top navigation
3
+   ========================================================================== */
4
+
5
+.navigation-wrapper {
6
+  text-align: center;
7
+  @include clearfix;
8
+  ul {
9
+    display: inline-block;
10
+    width: 100%;
11
+    vertical-align: top;
12
+    margin: 0 0 50px;
13
+    padding: 4px 20px;
14
+    background-color: $black;
15
+    @include media($medium) {
16
+      width: auto;
17
+      @include rounded(0 0 10px 10px);
18
+    }
19
+    @include clearfix;
20
+  }
21
+  li {
22
+    display: block;
23
+    float: left;
24
+    list-style: none;
25
+    text-align: center;
26
+    @include font-size(24,no);
27
+    text-transform: uppercase;
28
+    color: $white;
29
+    @include media($medium) {
30
+      @include font-size(14,no);
31
+    }
32
+    a:hover {
33
+      @include box-shadow($shadow: inset 0 0 1px $white);
34
+    }
35
+  }
36
+  a {
37
+    display: block;
38
+    margin-bottom: 10px;
39
+    padding: 12px 20px;
40
+    @include media($medium) {
41
+      margin-bottom: 0;
42
+      padding: 6px 10px;
43
+    }
44
+    color: $white;
45
+    @include rounded(4px);
46
+    &:hover {
47
+      background-color: lighten($black, 10);
48
+    }
49
+  }
50
+}
51
+
52
+/*
53
+   Responsive navigation toggle
54
+   ========================================================================== */
55
+
56
+#site-nav {
57
+  display: none;
58
+  z-index: 5;
59
+  @include media($medium) {
60
+    -webkit-animation-duration: 1s;
61
+    -moz-animation-duration: 1s;
62
+    -o-animation-duration: 1s;
63
+    animation-duration: 1s;
64
+  }
65
+  &.closed {
66
+    @include media($medium) {
67
+      display: block;
68
+    }
69
+  }
70
+  &.opened {
71
+    display: block;
72
+    max-height: 100%;
73
+    li {
74
+      float: none;
75
+      @include media($medium) {
76
+        float: left;
77
+      }
78
+    }
79
+  }
80
+}
81
+
82
+/* display when JavaScript is disabled */
83
+.no-js #site-nav {
84
+  display: block;
85
+}
86
+
87
+#nav-toggle {
88
+  z-index: 20;
89
+  display: block;
90
+  vertical-align: top;
91
+  margin: 0;
92
+  padding: 6px 20px;
93
+  background-color: $black;
94
+  height: 44px;
95
+  @include rounded(0);
96
+  @include media($medium) {
97
+    display: none;
98
+  }
99
+}

+ 26
- 0
_sass/_notices.scss View File

@@ -0,0 +1,26 @@
1
+/* ==========================================================================
2
+   Notices
3
+   ========================================================================== */
4
+
5
+/*
6
+   Default notice
7
+   ========================================================================== */
8
+
9
+.notice {
10
+  margin-top: 1.5em;
11
+  padding: .5em 1em;
12
+  text-indent: 0;
13
+  @include font-size(16);
14
+  background-color: lighten($black, 95);
15
+  border: 1px solid lighten($black, 90);
16
+  @include rounded(4px);
17
+}
18
+
19
+/*
20
+   Browser upgrade notice
21
+   ========================================================================== */
22
+
23
+.upgrade {
24
+  padding: 10px;
25
+  text-align: center;
26
+}

+ 295
- 0
_sass/_page.scss View File

@@ -0,0 +1,295 @@
1
+/* ==========================================================================
2
+   Page/post layout and styling
3
+   ========================================================================== */
4
+
5
+/*
6
+   Main content
7
+   ========================================================================== */
8
+
9
+#main {
10
+	@include clearfix;
11
+}
12
+
13
+.entry,
14
+.hentry {
15
+	@include clearfix;
16
+	border-bottom: 1px solid lighten($black,80);
17
+	border-bottom: 1px solid rgba($black,.10);
18
+}
19
+
20
+/* feature image */
21
+
22
+.entry-feature-image {
23
+	margin: 20px 0 0;
24
+	width: 100%;
25
+	@include media($medium) {
26
+		margin-top: -75px; /* move up to be overlapped by site logo */
27
+	}
28
+	@include media($large) {
29
+		margin-top: -145px; /* move up further to be overlapped by site logo */
30
+	}
31
+}
32
+
33
+/* page header */
34
+
35
+.entry-header {
36
+	@include fill-parent;
37
+}
38
+
39
+/* tag listing in page header */
40
+
41
+.entry-tags {
42
+	display: block;
43
+	margin-top: 2em;
44
+	text-transform: uppercase;
45
+	@include font-size(16);
46
+	font-weight: 600;
47
+	a {
48
+		color: $text-color;
49
+	}
50
+}
51
+
52
+/* page title */
53
+
54
+span + .entry-title {
55
+	margin-top: 0;
56
+}
57
+
58
+.entry-title {
59
+	font-family: $alt-font;
60
+	font-style: italic;
61
+	@include font-size(36,yes,36);
62
+	font-weight: 400;
63
+	line-height: 1;
64
+	letter-spacing: -3px;
65
+	a {
66
+		color: $black;
67
+		text-decoration: underline;
68
+	}
69
+	@include media($medium) {
70
+		@include font-size(52,yes,54);
71
+	}
72
+	@include media($large) {
73
+		@include font-size(68,yes,72);
74
+	}
75
+}
76
+
77
+/* page/post wrapper */
78
+
79
+.entry-wrapper {
80
+	@include outer-container;
81
+	margin-top: 0;
82
+	margin-bottom: 3em;
83
+	padding-right: $gutter;
84
+	padding-left: $gutter;
85
+}
86
+
87
+/* page/post meta content (date, author, etc) */
88
+
89
+.entry-meta {
90
+	@include span-columns(12);
91
+	text-transform: uppercase;
92
+	@include font-size(14);
93
+	a {
94
+		color: $text-color;
95
+	}
96
+	@include media($large) {
97
+		@include span-columns(2.5);
98
+	}
99
+	& > span {
100
+		padding: 0 20px 10px 0;
101
+		display: inline-block;
102
+		@include media($large) {
103
+			display: block;
104
+			padding: 8px 0;
105
+			border-bottom: 1px solid lighten($black,80);
106
+			border-bottom: 1px solid rgba($black,.10);
107
+		}
108
+	}
109
+}
110
+
111
+/* author avatar (circular) */
112
+
113
+.bio-photo {
114
+	display: none;
115
+	@include media($large) {
116
+		display: block;
117
+		width: 150px;
118
+		height: 150px;
119
+		margin-bottom: 10px;
120
+		@include rounded(150px);
121
+		@include clearfix;
122
+	}
123
+}
124
+
125
+
126
+/* feature image credit */
127
+
128
+.image-credit {
129
+  margin: 0 auto;
130
+  max-width: 440px;
131
+  padding-top: 5px;
132
+  padding-right: 20px;
133
+  padding-left: 20px;
134
+  text-align: right;
135
+  @include font-size(12, no);
136
+  line-height: 1.3;
137
+  color: lighten($text-color, 30);
138
+  @include clearfix();
139
+  @include media($medium) {
140
+    max-width: 760px;
141
+    padding-right: 60px;
142
+    padding-left: 60px;
143
+    @include font-size(14, no);
144
+  }
145
+  @include media($large) {
146
+    max-width: 960px;
147
+  }
148
+  a {
149
+    color: lighten($text-color, 30);
150
+  }
151
+}
152
+
153
+/* main content block */
154
+
155
+.entry-content {
156
+	@include span-columns(12);
157
+	p:first-child {
158
+		margin-top: 0;
159
+	}
160
+	@include media($large) {
161
+		@include span-columns(9.5);
162
+	}
163
+	/* nice link underlines */
164
+  p > a,
165
+	li > a {
166
+		border-bottom: 1px dotted lighten($link-color, 50);
167
+		&:hover {
168
+			border-bottom-style: solid;
169
+		}
170
+	}
171
+}
172
+
173
+/*
174
+   Disqus
175
+   ========================================================================== */
176
+
177
+#disqus_thread {
178
+	margin-top: 2em;
179
+}
180
+
181
+/*
182
+   Pagination
183
+   ========================================================================== */
184
+
185
+.pagination {
186
+	margin-top: 2em;
187
+	text-align: center;
188
+}
189
+
190
+/*
191
+   Overrides
192
+   ========================================================================== */
193
+
194
+/* adjust width for lack of meta/author column */
195
+
196
+#home,
197
+#page {
198
+	.entry-wrapper {
199
+		max-width: em(760);
200
+	}
201
+	.entry-title {
202
+		text-align: center;
203
+		max-width: 100%;
204
+	}
205
+	.entry-content {
206
+		@include span-columns(12);
207
+	}
208
+}
209
+
210
+/*
211
+   Kramdown generated table of contents
212
+   ========================================================================== */
213
+
214
+#markdown-toc {
215
+	font-family: $alt-font;
216
+	margin-top: $gutter;
217
+	margin-bottom: $gutter;
218
+	padding-left: 0;
219
+	border: 1px solid $border-color;
220
+	border-radius: $border-radius;
221
+  ul {
222
+  	list-style-type: none;
223
+  	padding-left: 0;
224
+  }
225
+  li {
226
+    @include font-size(16,no,18);
227
+    border-bottom: 1px solid $border-color;
228
+    list-style-type: none;
229
+  }
230
+  h6 {
231
+    margin: 0;
232
+    padding: (.25 * $gutter) (.5 * $gutter);
233
+    background: $table-stripe-color;
234
+  }
235
+  a {
236
+    display: block;
237
+    padding: (.25 * $gutter) (.5 * $gutter);
238
+    border-left: 2px solid transparent;
239
+    border-bottom: 0 solid transparent;
240
+    &:hover,
241
+    &:focus {
242
+      background: lighten($border-color,5);
243
+    }
244
+  }
245
+}
246
+
247
+/*
248
+   Tables
249
+   ========================================================================== */
250
+
251
+/** For nicer looking tables apply the .table class
252
+ *  Example:
253
+ *  <table class="table">
254
+ *    <tr>
255
+ *      <td>cell1</td>
256
+ *      <td>cell2</td>
257
+ *      <td>cell3</td>
258
+ *    </tr>
259
+ *  </table>
260
+*/
261
+
262
+.table {
263
+	border-collapse: collapse;
264
+	margin: ((0px + $doc-line-height) / 2) 0;
265
+	margin: ((0rem + ($doc-line-height / $doc-font-size)) / 2) 0;
266
+	width: 100%;
267
+	tbody {
268
+		tr:hover > td, tr:hover > th {
269
+			background-color: $table-hover-color;
270
+		}
271
+	}
272
+	thead {
273
+		tr:first-child td {
274
+			border-bottom: 2px solid $table-border-color;
275
+		}
276
+	}
277
+	th {
278
+		padding: (0px + $doc-line-height) / 2;
279
+		padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
280
+		font-family: $alt-font;
281
+		font-weight: bold;
282
+		text-align: left;
283
+		background-color: $table-header-color;
284
+		border-bottom: 1px solid darken($border-color, 15%);
285
+	}
286
+	td {
287
+		border-bottom: 1px solid $border-color;
288
+		padding: (0px + $doc-line-height) / 2;
289
+		padding: (0rem + ($doc-line-height / $doc-font-size)) / 2;
290
+		@include font-size(18);
291
+	}
292
+	tr, td, th {
293
+		vertical-align: middle;
294
+	}
295
+}

+ 40
- 0
_sass/_search.scss View File

@@ -0,0 +1,40 @@
1
+/* ==========================================================================
2
+   Search
3
+   ========================================================================== */
4
+
5
+.search-wrapper {
6
+  @include outer-container;
7
+  margin-top: 0;
8
+  padding-right: $gutter;
9
+  padding-left: $gutter;
10
+  height: 1px;
11
+}
12
+
13
+/* 
14
+   Google search form
15
+   ========================================================================== */
16
+
17
+#goog-fixurl {
18
+  ul {
19
+    list-style: none;
20
+    margin-left: 0;
21
+    padding-left: 0;
22
+    li {
23
+      list-style-type: none;
24
+    }
25
+  }
26
+}
27
+
28
+#goog-wm-qt {
29
+  width: auto;
30
+  margin-right: 10px;
31
+  padding: 8px 10px;
32
+  @include font-size(14);
33
+  border-width: 2px;
34
+  border-radius: $border-radius;
35
+}
36
+
37
+/* button */
38
+#goog-wm-sb {
39
+  @extend .btn;
40
+}

+ 0
- 239
_sass/_site.scss View File

@@ -1,239 +0,0 @@
1
-// Selection
2
-// --------------------------------------------------
3
-
4
-::-moz-selection { 
5
-	background-color: lighten($base-color, 65%); 
6
-	color: $base-color; 
7
-	text-shadow: none; 
8
-}  	
9
-::selection { 
10
-	background-color: lighten($base-color, 65%); 
11
-	color: $base-color; 
12
-	text-shadow: none; 
13
-}
14
-
15
-
16
-// Body
17
-// --------------------------------------------------
18
-
19
-body {
20
-	font-family: $base-font;
21
-	color: $text-color;
22
-}
23
-
24
-
25
-// TYPOGRAPHY
26
-// --------------------------------------------------
27
-
28
-body {
29
-	font-family: $base-font;
30
-	color: $text-color;
31
-	@include font-size(16);
32
-}
33
-
34
-p {
35
-	@include font-size(18,yes,28);
36
-}
37
-
38
-li {
39
-	@include font-size(16,12,24);
40
-}
41
-
42
-// Headings
43
-h1, h2, h3, h4, h5, h6 {
44
-	font-family: $heading-font;
45
-	text-rendering: optimizeLegibility; // Fix the character spacing for headings
46
-}
47
-h1 {
48
-	@include font-size(36);
49
-}
50
-h2 {
51
-	@include font-size(32);
52
-}
53
-h3 {
54
-	@include font-size(28);
55
-}
56
-h4 {
57
-	@include font-size(24);
58
-}
59
-h5 {
60
-	@include font-size(20);
61
-}
62
-h6 {
63
-	@include font-size(18);
64
-}
65
-
66
-u,
67
-ins {
68
-	text-decoration: none;
69
-	border-bottom: 1px solid $text-color;
70
-}
71
-
72
-
73
-// Links
74
-// --------------------------------------------------
75
-
76
-a { 
77
-	text-decoration: none;
78
-	color: $link-color; 
79
-	&:visited { 
80
-		color: lighten($link-color, 20); 
81
-	}
82
-	&:hover { 
83
-		color: darken($link-color, 20); 
84
-	}
85
-	&:focus { 
86
-		outline: thin dotted; 
87
-		color: darken($link-color, 20);
88
-	}
89
-	&:hover, 
90
-	&:active { 
91
-		outline: 0; 
92
-	}
93
-}
94
-
95
-.link-arrow {
96
-	font-weight: 100;
97
-	text-decoration: underline;
98
-	font-style: normal;
99
-}
100
-
101
-
102
-// Figures
103
-// --------------------------------------------------
104
-
105
-figcaption {
106
-	padding-top: 10px;
107
-	@include font-size(14);
108
-	line-height: 1.3;
109
-	color: lighten($text-color, 10);
110
-}
111
-
112
-
113
-// Feature Image Caption
114
-// --------------------------------------------------
115
-
116
-.image-credit {
117
-	margin: 0 auto;
118
-	max-width: 440px;
119
-	padding-top: 5px;
120
-	padding-right: 20px;
121
-	padding-left: 20px;
122
-	text-align: right;
123
-	@include font-size(14,no);
124
-	line-height: 1.3;
125
-	color: lighten($text-color, 30);
126
-	@include clearfix();
127
-	@include media($medium) {
128
-		max-width: 760px;
129
-		padding-right: 60px;
130
-		padding-left: 60px;
131
-	}
132
-	@include media($large) {
133
-		max-width: 960px;
134
-	}
135
-	a {
136
-		color: lighten($text-color, 30);
137
-	}
138
-}
139
-
140
-
141
-// Note text
142
-// --------------------------------------------------
143
-
144
-.notice {
145
-	margin-top: 1.5em;
146
-	padding: .5em 1em;
147
-	text-indent: 0;
148
-	@include font-size(16);
149
-	background-color: lighten($black, 95);
150
-	border: 1px solid lighten($black, 90);
151
-	@include rounded(4px);
152
-}
153
-
154
-
155
-// Blockquotes
156
-// --------------------------------------------------
157
-
158
-blockquote {
159
-	font-family: $alt-font;
160
-	font-style: italic;
161
-	@include font-size(16);
162
-	padding-left: 20px;
163
-	border-left: 8px solid $black;
164
-}
165
-
166
-
167
-// Footnotes
168
-// --------------------------------------------------
169
-
170
-.footnotes {
171
-	@include font-size(14);
172
-	font-family: $base-font;
173
-}
174
-
175
-
176
-// Code
177
-// --------------------------------------------------
178
-
179
-tt, code, kbd, samp, pre {
180
-	font-family: $code-font;
181
-}
182
-p,
183
-li { 
184
-	code {
185
-		@include font-size(14);
186
-		font-family: $code-font;
187
-		white-space: nowrap;
188
-		margin: 0 2px;
189
-		padding: 0 5px;
190
-		border: 1px solid lighten($black, 90);
191
-		background-color: lighten($black, 95);
192
-		@include rounded(3px);
193
-	}
194
-}
195
-pre {
196
-	@include font-size(14);
197
-	overflow-x: auto;
198
-}
199
-
200
-
201
-// Utility Classes
202
-// --------------------------------------------------
203
-
204
-.wrap {
205
-	margin: 0 auto;
206
-}
207
-.all-caps {
208
-	text-transform: uppercase;
209
-}
210
-.pull-left {
211
-	float: left;
212
-	padding-right: $gutter;
213
-}
214
-.pull-right {
215
-	float: right;
216
-	padding-left: $gutter;
217
-}
218
-.unstyled-list {
219
-	list-style: none;
220
-	margin-left: 0;
221
-	padding-left: 0;
222
-	li {
223
-		list-style-type: none;
224
-	}
225
-}
226
-.no-scroll {
227
-	overflow: hidden;
228
-}
229
-.center{
230
-	text-align: center;
231
-}
232
-
233
-
234
-// Global Transition
235
-// ---------------------------------------------------
236
-
237
-b, i, strong, em, blockquote, p, q, span, figure, img, h1, h2, header, input, a, .highlight {
238
-	@include transition(all .2s ease);
239
-}

+ 151
- 1
_sass/_syntax.scss View File

@@ -1,3 +1,11 @@
1
+/* ==========================================================================
2
+   Syntax highlighting and formatting
3
+   ========================================================================== */
4
+
5
+/* 
6
+   Pygments.rb and Rouge
7
+   ========================================================================== */
8
+
1 9
 .highlight {
2 10
 	background-color: #efefef;
3 11
 	font-family: $code-font;
@@ -71,4 +79,146 @@
71 79
 	.vg { color: #008080 } /* Name.Variable.Global */
72 80
 	.vi { color: #008080 } /* Name.Variable.Instance */
73 81
 	.il { color: #009999 } /* Literal.Number.Integer.Long */
74
-}
82
+}
83
+
84
+/* 
85
+   Coderay
86
+   ========================================================================== */
87
+
88
+.CodeRay {
89
+  background-color: #efefef;
90
+  font-family: $code-font;
91
+  @include font-size(12);
92
+  color: #333332;
93
+  margin-bottom: 1.5em;
94
+  @include rounded(4px);
95
+  pre {
96
+    margin: 0px;
97
+    padding: 1em;
98
+  }
99
+}
100
+
101
+div.CodeRay { }
102
+span.CodeRay { white-space: pre; border: 0px; padding: 2px }
103
+
104
+table.CodeRay { border-collapse: collapse; width: 100%; padding: 2px }
105
+table.CodeRay td {
106
+  padding: 1em 0.5em;
107
+  vertical-align: top;
108
+}
109
+
110
+ol.CodeRay { font-size: 10pt }
111
+ol.CodeRay li { white-space: pre }
112
+
113
+.CodeRay {
114
+
115
+	.line-numbers, 
116
+	.no {
117
+	  background-color: #ececec;
118
+	  color: #aaa;
119
+	  text-align: right;
120
+	}
121
+
122
+	.line-numbers a {
123
+	  color: #aaa;
124
+	}
125
+
126
+	.line-numbers tt { font-weight: bold }
127
+	.line-numbers .highlighted { color: red }
128
+	.line { display: block; float: left; width: 100%; }
129
+	span.line-numbers { padding: 0 24px 0 4px }
130
+	.code { width: 100% }
131
+
132
+	.code pre { overflow: auto }
133
+  .debug { color: white !important; background: blue !important; }
134
+	.annotation { color: #007 }
135
+	.attribute-name { color: #f08 }
136
+	.attribute-value { color: #700 }
137
+	.binary { color: #509; font-weight: bold }
138
+	.comment  { color: #998; font-style: italic;}
139
+	.char { color: #04d }
140
+	.char .content { color: #04d }
141
+	.char .delimiter { color: #039 }
142
+	.class { color: #458; font-weight: bold }
143
+	.complex { color: #a08; font-weight: bold }
144
+	.constant { color: teal; }
145
+	.color { color: #0a0 }
146
+	.class-variable { color: #369 }
147
+	.decorator { color: #b0b; }
148
+	.definition { color: #099; font-weight: bold }
149
+	.directive { color: #088; font-weight: bold }
150
+	.delimiter { color: black }
151
+	.doc { color: #970 }
152
+	.doctype { color: #34b }
153
+	.doc-string { color: #d42; font-weight: bold }
154
+	.escape  { color: #666; font-weight: bold }
155
+	.entity { color: #800; font-weight: bold }
156
+	.error { color: #f00; background-color: #faa }
157
+	.exception { color: #c00; font-weight: bold }
158
+	.filename { color: #099; }
159
+	.function { color: #900; font-weight: bold }
160
+	.global-variable { color: teal; font-weight: bold }
161
+	.hex { color: #058; font-weight: bold }
162
+	.integer  { color: #099; }
163
+	.include { color: #b44; font-weight: bold }
164
+	.inline { color: black }
165
+	.inline .inline { background: #ccc }
166
+	.inline .inline .inline { background: #bbb }
167
+	.inline .inline-delimiter { color: #d14; }
168
+	.inline-delimiter { color: #d14; }
169
+	.important { color: #f00; }
170
+	.interpreted { color: #b2b; font-weight: bold }
171
+	.instance-variable { color: teal }
172
+	.label { color: #970; font-weight: bold }
173
+	.local-variable { color: #963 }
174
+	.octal { color: #40e; font-weight: bold }
175
+	.operator { }
176
+	.predefined-constant { font-weight: bold }
177
+	.predefined { color: #369; font-weight: bold }
178
+	.preprocessor { color: #579; }
179
+	.pseudo-class { color: #00c; font-weight: bold }
180
+	.predefined-type { color: #074; font-weight: bold }
181
+	.reserved, 
182
+	.keyword { color: #000; font-weight: bold }
183
+
184
+	.key { color: #808; }
185
+	.key .delimiter { color: #606; }
186
+	.key .char { color: #80f; }
187
+	.value { color: #088; }
188
+
189
+	.regexp { background-color: #fff0ff }
190
+	.regexp .content { color: #808 }
191
+	.regexp .delimiter { color: #404 }
192
+	.regexp .modifier { color: #c2c }
193
+	.regexp .function  { color: #404; font-weight: bold }
194
+
195
+	.string { color: #d20; }
196
+	.string .string { }
197
+	.string .string .string { background-color: #ffd0d0 }
198
+	.string .content { color: #d14; }
199
+	.string .char { color: #d14; }
200
+	.string .delimiter { color: #d14; }
201
+
202
+	.shell { color: #d14 }
203
+	.shell .content { }
204
+	.shell .delimiter { color: #d14 }
205
+
206
+	.symbol { color: #990073 }
207
+	.symbol .content { color: #a60 }
208
+	.symbol .delimiter { color: #630 }
209
+
210
+	.tag { color: #070 }
211
+	.tag-special { color: #d70; font-weight: bold }
212
+	.type { color: #339; font-weight: bold }
213
+	.variable { color: #036 }
214
+
215
+	.insert { background: #afa; }
216
+	.delete { background: #faa; }
217
+	.change { color: #aaf; background: #007; }
218
+	.head { color: #f8f; background: #505 }
219
+
220
+	.insert .insert { color: #080; font-weight: bold }
221
+	.delete .delete { color: #800; font-weight: bold }
222
+	.change .change { color: #66f; }
223
+	.head .head { color: #f4f; }
224
+}

+ 11
- 0
_sass/_wells.scss View File

@@ -0,0 +1,11 @@
1
+/* ==========================================================================
2
+   Wells
3
+   ========================================================================== */
4
+
5
+/* Used to call out text in a subtle manner */
6
+
7
+.well {
8
+  padding: 20px;
9
+  border: 1px solid $comp-color;
10
+  @include rounded(4px);
11
+}

+ 37
- 10
assets/css/main.scss View File

@@ -11,18 +11,45 @@ sitemap: false
11 11
  *
12 12
 */
13 13
 
14
-// Partials
15 14
 @import "variables";
16
-@import "vendor/bourbon/bourbon";
17
-@import "grid-settings";
18
-@import "vendor/neat/neat";
15
+
16
+/*
17
+   Vendor
18
+   ========================================================================== */
19
+
20
+@import "vendor/bourbon/bourbon"; /* Bourbon mixins (bourbon.io) */
21
+@import "grid-settings"; /* Bourbon Neat settings */
22
+@import "vendor/neat/neat"; /* Bourbon Neat grid mixins (neat.bourbon.io) */
23
+@import "vendor/font-awesome/font-awesome"; /* Font Awesome icons */
24
+@import "vendor/magnific-popup/magnific-popup"; /* Magnific Popup lightb