sparrow-jekyll-theme 0.1.1 → 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (121) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +20 -20
  3. data/README.md +170 -178
  4. data/_includes/analytics.html +13 -13
  5. data/_includes/breadcrumbs.html +31 -31
  6. data/_includes/comments.html +26 -26
  7. data/_includes/figure +12 -12
  8. data/_includes/paginator.html +8 -69
  9. data/_includes/post-entry.html +15 -15
  10. data/_includes/seo.html +77 -77
  11. data/_includes/social-share.html +42 -42
  12. data/_includes/topnav.html +46 -46
  13. data/_layouts/default.html +46 -46
  14. data/_layouts/home.html +11 -11
  15. data/_layouts/page.html +16 -16
  16. data/_layouts/post.html +38 -38
  17. data/_sass/_base.scss +359 -359
  18. data/_sass/_buttons.scss +61 -61
  19. data/_sass/_footer.scss +53 -53
  20. data/_sass/_navigation.scss +216 -216
  21. data/_sass/_page.scss +60 -60
  22. data/_sass/_post.scss +85 -85
  23. data/_sass/_reset.scss +186 -186
  24. data/_sass/_rrssb.scss +276 -276
  25. data/_sass/_slimmenu.scss +177 -177
  26. data/_sass/_syntax.scss +125 -125
  27. data/_sass/_utilities.scss +67 -67
  28. data/_sass/_variables.scss +73 -73
  29. data/_sass/vendor/breakpoint/_breakpoint.scss +114 -114
  30. data/_sass/vendor/breakpoint/_context.scss +94 -94
  31. data/_sass/vendor/breakpoint/_helpers.scss +151 -151
  32. data/_sass/vendor/breakpoint/_legacy-settings.scss +49 -49
  33. data/_sass/vendor/breakpoint/_no-query.scss +15 -15
  34. data/_sass/vendor/breakpoint/_parsers.scss +215 -215
  35. data/_sass/vendor/breakpoint/_respond-to.scss +82 -82
  36. data/_sass/vendor/breakpoint/_settings.scss +70 -70
  37. data/_sass/vendor/breakpoint/parsers/_double.scss +33 -33
  38. data/_sass/vendor/breakpoint/parsers/_query.scss +82 -82
  39. data/_sass/vendor/breakpoint/parsers/_resolution.scss +31 -31
  40. data/_sass/vendor/breakpoint/parsers/_single.scss +26 -26
  41. data/_sass/vendor/breakpoint/parsers/_triple.scss +36 -36
  42. data/_sass/vendor/breakpoint/parsers/double/_default-pair.scss +21 -21
  43. data/_sass/vendor/breakpoint/parsers/double/_default.scss +22 -22
  44. data/_sass/vendor/breakpoint/parsers/double/_double-string.scss +21 -21
  45. data/_sass/vendor/breakpoint/parsers/resolution/_resolution.scss +60 -60
  46. data/_sass/vendor/breakpoint/parsers/single/_default.scss +13 -13
  47. data/_sass/vendor/breakpoint/parsers/triple/_default.scss +18 -18
  48. data/_sass/vendor/font-awesome/_animated.scss +34 -34
  49. data/_sass/vendor/font-awesome/_bordered-pulled.scss +25 -25
  50. data/_sass/vendor/font-awesome/_core.scss +12 -12
  51. data/_sass/vendor/font-awesome/_fixed-width.scss +6 -6
  52. data/_sass/vendor/font-awesome/_font-awesome.scss +18 -18
  53. data/_sass/vendor/font-awesome/_icons.scss +789 -789
  54. data/_sass/vendor/font-awesome/_larger.scss +13 -13
  55. data/_sass/vendor/font-awesome/_list.scss +19 -19
  56. data/_sass/vendor/font-awesome/_mixins.scss +60 -60
  57. data/_sass/vendor/font-awesome/_path.scss +15 -15
  58. data/_sass/vendor/font-awesome/_rotated-flipped.scss +20 -20
  59. data/_sass/vendor/font-awesome/_screen-reader.scss +5 -5
  60. data/_sass/vendor/font-awesome/_stacked.scss +20 -20
  61. data/_sass/vendor/font-awesome/_variables.scss +800 -800
  62. data/_sass/vendor/susy/_su.scss +4 -4
  63. data/_sass/vendor/susy/_susy.scss +4 -4
  64. data/_sass/vendor/susy/_susyone.scss +4 -4
  65. data/_sass/vendor/susy/susy/_su.scss +7 -7
  66. data/_sass/vendor/susy/susy/language/_susy.scss +24 -24
  67. data/_sass/vendor/susy/susy/language/_susyone.scss +13 -13
  68. data/_sass/vendor/susy/susy/language/susy/_background.scss +385 -385
  69. data/_sass/vendor/susy/susy/language/susy/_bleed.scss +200 -200
  70. data/_sass/vendor/susy/susy/language/susy/_box-sizing.scss +47 -47
  71. data/_sass/vendor/susy/susy/language/susy/_breakpoint-plugin.scss +185 -185
  72. data/_sass/vendor/susy/susy/language/susy/_container.scss +81 -81
  73. data/_sass/vendor/susy/susy/language/susy/_context.scss +36 -36
  74. data/_sass/vendor/susy/susy/language/susy/_gallery.scss +94 -94
  75. data/_sass/vendor/susy/susy/language/susy/_grids.scss +64 -64
  76. data/_sass/vendor/susy/susy/language/susy/_gutters.scss +154 -154
  77. data/_sass/vendor/susy/susy/language/susy/_isolate.scss +77 -77
  78. data/_sass/vendor/susy/susy/language/susy/_margins.scss +94 -94
  79. data/_sass/vendor/susy/susy/language/susy/_padding.scss +74 -74
  80. data/_sass/vendor/susy/susy/language/susy/_rows.scss +138 -138
  81. data/_sass/vendor/susy/susy/language/susy/_settings.scss +216 -216
  82. data/_sass/vendor/susy/susy/language/susy/_span.scss +163 -163
  83. data/_sass/vendor/susy/susy/language/susy/_validation.scss +16 -16
  84. data/_sass/vendor/susy/susy/language/susyone/_background.scss +18 -18
  85. data/_sass/vendor/susy/susy/language/susyone/_functions.scss +377 -377
  86. data/_sass/vendor/susy/susy/language/susyone/_grid.scss +312 -312
  87. data/_sass/vendor/susy/susy/language/susyone/_isolation.scss +51 -51
  88. data/_sass/vendor/susy/susy/language/susyone/_margin.scss +93 -93
  89. data/_sass/vendor/susy/susy/language/susyone/_media.scss +105 -105
  90. data/_sass/vendor/susy/susy/language/susyone/_padding.scss +92 -92
  91. data/_sass/vendor/susy/susy/language/susyone/_settings.scss +60 -60
  92. data/_sass/vendor/susy/susy/output/_float.scss +9 -9
  93. data/_sass/vendor/susy/susy/output/_shared.scss +15 -15
  94. data/_sass/vendor/susy/susy/output/_support.scss +9 -9
  95. data/_sass/vendor/susy/susy/output/float/_container.scss +16 -16
  96. data/_sass/vendor/susy/susy/output/float/_end.scss +40 -40
  97. data/_sass/vendor/susy/susy/output/float/_isolate.scss +22 -22
  98. data/_sass/vendor/susy/susy/output/float/_span.scss +35 -35
  99. data/_sass/vendor/susy/susy/output/shared/_background.scss +26 -26
  100. data/_sass/vendor/susy/susy/output/shared/_container.scss +21 -21
  101. data/_sass/vendor/susy/susy/output/shared/_direction.scss +42 -42
  102. data/_sass/vendor/susy/susy/output/shared/_inspect.scss +25 -25
  103. data/_sass/vendor/susy/susy/output/shared/_margins.scss +23 -23
  104. data/_sass/vendor/susy/susy/output/shared/_output.scss +14 -14
  105. data/_sass/vendor/susy/susy/output/shared/_padding.scss +23 -23
  106. data/_sass/vendor/susy/susy/output/support/_background.scss +58 -58
  107. data/_sass/vendor/susy/susy/output/support/_box-sizing.scss +19 -19
  108. data/_sass/vendor/susy/susy/output/support/_clearfix.scss +18 -18
  109. data/_sass/vendor/susy/susy/output/support/_prefix.scss +19 -19
  110. data/_sass/vendor/susy/susy/output/support/_rem.scss +22 -22
  111. data/_sass/vendor/susy/susy/output/support/_support.scss +85 -85
  112. data/_sass/vendor/susy/susy/su/_grid.scss +103 -103
  113. data/_sass/vendor/susy/susy/su/_settings.scss +73 -73
  114. data/_sass/vendor/susy/susy/su/_utilities.scss +111 -111
  115. data/_sass/vendor/susy/susy/su/_validation.scss +57 -57
  116. data/assets/css/main.scss +43 -43
  117. data/assets/fonts/fontawesome-webfont.svg +2671 -2671
  118. data/assets/js/main.js +35 -35
  119. data/assets/js/plugins/jquery-1.12.4.min.js +4 -4
  120. data/assets/js/slimmenu.js +154 -154
  121. metadata +6 -6
@@ -1,4 +1,4 @@
1
- // Su
2
- // ==
3
-
4
- @import 'susy/su';
1
+ // Su
2
+ // ==
3
+
4
+ @import 'susy/su';
@@ -1,4 +1,4 @@
1
- // Susy
2
- // ====
3
-
4
- @import 'susy/language/susy';
1
+ // Susy
2
+ // ====
3
+
4
+ @import 'susy/language/susy';
@@ -1,4 +1,4 @@
1
- // Susy
2
- // ====
3
-
4
- @import 'susy/language/susyone';
1
+ // Susy
2
+ // ====
3
+
4
+ @import 'susy/language/susyone';
@@ -1,7 +1,7 @@
1
- // Su
2
- // ==
3
-
4
- @import "su/utilities";
5
- @import "su/settings";
6
- @import "su/validation";
7
- @import "su/grid";
1
+ // Su
2
+ // ==
3
+
4
+ @import "su/utilities";
5
+ @import "su/settings";
6
+ @import "su/validation";
7
+ @import "su/grid";
@@ -1,24 +1,24 @@
1
- // Susy Next Syntax
2
- // ================
3
-
4
- $susy-version: 2.1;
5
-
6
- @import "../su";
7
- @import "../output/float";
8
-
9
- @import "susy/settings";
10
- @import "susy/validation";
11
- @import "susy/grids";
12
- @import "susy/box-sizing";
13
- @import "susy/context";
14
- @import "susy/background";
15
- @import "susy/container";
16
- @import "susy/span";
17
- @import "susy/gutters";
18
- @import "susy/isolate";
19
- @import "susy/gallery";
20
- @import "susy/rows";
21
- @import "susy/margins";
22
- @import "susy/padding";
23
- @import "susy/bleed";
24
- @import "susy/breakpoint-plugin";
1
+ // Susy Next Syntax
2
+ // ================
3
+
4
+ $susy-version: 2.1;
5
+
6
+ @import "../su";
7
+ @import "../output/float";
8
+
9
+ @import "susy/settings";
10
+ @import "susy/validation";
11
+ @import "susy/grids";
12
+ @import "susy/box-sizing";
13
+ @import "susy/context";
14
+ @import "susy/background";
15
+ @import "susy/container";
16
+ @import "susy/span";
17
+ @import "susy/gutters";
18
+ @import "susy/isolate";
19
+ @import "susy/gallery";
20
+ @import "susy/rows";
21
+ @import "susy/margins";
22
+ @import "susy/padding";
23
+ @import "susy/bleed";
24
+ @import "susy/breakpoint-plugin";
@@ -1,13 +1,13 @@
1
- // ---------------------------------------------------------------------------
2
- // Partials
3
-
4
- $susy-version: 1.5;
5
-
6
- @import "susyone/settings";
7
- @import "susyone/functions";
8
- @import "susyone/grid";
9
- @import "susyone/isolation";
10
- @import "susyone/padding";
11
- @import "susyone/margin";
12
- @import "susyone/media";
13
- @import "susyone/background";
1
+ // ---------------------------------------------------------------------------
2
+ // Partials
3
+
4
+ $susy-version: 1.5;
5
+
6
+ @import "susyone/settings";
7
+ @import "susyone/functions";
8
+ @import "susyone/grid";
9
+ @import "susyone/isolation";
10
+ @import "susyone/padding";
11
+ @import "susyone/margin";
12
+ @import "susyone/media";
13
+ @import "susyone/background";
@@ -1,385 +1,385 @@
1
- // Background Grid Syntax
2
- // ======================
3
-
4
- $susy-overlay-grid-head-exists: false;
5
-
6
-
7
- // Show Grid/s
8
- // -----------
9
- // Show grid on any element using either background or overlay.
10
- // - [$grid] : <settings>
11
- @mixin show-grid(
12
- $grid: $susy
13
- ) {
14
- $inspect: $grid;
15
- $_output: debug-get(output, $grid);
16
-
17
- @include susy-inspect(show-grid, $inspect);
18
- @if $_output == overlay and susy-get(debug image, $grid) != hide {
19
- @include overlay-grid($grid);
20
- } @else {
21
- @include background-grid($grid);
22
- }
23
- }
24
-
25
- @mixin show-grids(
26
- $grid: $susy
27
- ) {
28
- @include show-grid($grid);
29
- }
30
-
31
- // Background Grid
32
- // ---------------
33
- // Show a grid background on any element.
34
- // - [$grid] : <settings>
35
- @mixin background-grid(
36
- $grid: $susy
37
- ) {
38
- $inspect : $grid;
39
- $_output : get-background($grid);
40
-
41
- @if length($_output) > 0 {
42
- $_flow: susy-get(flow, $grid);
43
-
44
- $_image: ();
45
- @each $name, $layer in map-get($_output, image) {
46
- $_direction: if($name == baseline, to bottom, to to($_flow));
47
- $_image: append($_image, linear-gradient($_direction, $layer), comma);
48
- }
49
- $_output: map-merge($_output, (image: $_image));
50
-
51
- @include background-grid-output($_output...);
52
- @include susy-inspect(background-grid, $inspect);
53
- }
54
- }
55
-
56
-
57
- // Overlay Grid
58
- // ------------
59
- // Generate an icon to trigger grid-overlays on any given elements.
60
- // $grids... : <selector> [<settings>] [, <selector>]*
61
- @mixin overlay-grid (
62
- $grid: $susy
63
- ) {
64
- @if not($susy-overlay-grid-head-exists) {
65
- @at-root head { @include overlay-head($grid); }
66
- @at-root head:before { @include overlay-trigger; }
67
- @at-root head:hover { @include overlay-trigger-hover; }
68
- $susy-overlay-grid-head-exists: true !global;
69
- }
70
-
71
- head:hover ~ &,
72
- head:hover ~ body & {
73
- position: relative;
74
- &:before {
75
- @include grid-overlay-base;
76
- @include background-grid($grid);
77
- }
78
- }
79
- }
80
-
81
-
82
- // [Private] Overlay Trigger
83
- // -------------------------
84
- @mixin overlay-trigger {
85
- content: "|||";
86
- display: block;
87
- padding: 5px 10px;
88
- font: {
89
- family: sans-serif;
90
- size: 16px;
91
- weight: bold;
92
- }
93
- }
94
-
95
-
96
- // [Private] Overlay Trigger Hover
97
- // -------------------------------
98
- @mixin overlay-trigger-hover {
99
- background: rgba(white, .5);
100
- color: red;
101
- }
102
-
103
-
104
- // [Private] Overlay Head
105
- // ----------------------
106
- // <head> styles to create grid overlay toggle
107
- @mixin overlay-head (
108
- $grid: $susy
109
- ) {
110
- $_toggle: debug-get(toggle, $grid);
111
- $_horz: null;
112
- $_vert: null;
113
-
114
- @each $side in $_toggle {
115
- $_horz: if($side == left or $side == right, $side, $_horz);
116
- $_vert: if($side == top or $side == bottom, $side, $_vert);
117
- }
118
-
119
- display: block;
120
- position: fixed;
121
- #{$_horz}: 10px;
122
- #{$_vert}: 10px;
123
- z-index: 999;
124
- color: #333;
125
- background: rgba(white, .25);
126
- }
127
-
128
-
129
- // [Private] Grid Overlay Base
130
- // ---------------------------
131
- // Base styles for generating a grid overlay
132
- @mixin grid-overlay-base() {
133
- position: absolute;
134
- top: 0;
135
- left: 0;
136
- bottom: 0;
137
- right: 0;
138
- content: " ";
139
- z-index: 998;
140
- }
141
-
142
-
143
- // Get Symmetrical Background
144
- // --------------------------
145
- // - $grid: <map>
146
- @function get-background-sym(
147
- $grid
148
- ) {
149
- $grid : parse-grid($grid);
150
- $_gutters : susy-get(gutters, $grid);
151
- $_column-width : susy-get(column-width, $grid);
152
- $_math : susy-get(math, $grid);
153
-
154
- $_color : debug-get(color);
155
- $_trans : transparent;
156
- $_light : lighten($_color, 15%);
157
-
158
- $_end : 1 + $_gutters;
159
- $_after : percentage(1/$_end);
160
- $_stops : ();
161
- $_size : span(1 $grid wide);
162
-
163
- @if is-inside($grid) {
164
- $_stops: $_color, $_light;
165
- } @else if is-split($grid) {
166
- $_split: $_gutters/2;
167
- $_before: percentage($_split/$_end);
168
- $_after: percentage((1 + $_split)/$_end);
169
- $_stops: $_trans $_before, $_color $_before, $_light $_after, $_trans $_after;
170
- } @else {
171
- $_stops: $_color, $_light $_after, $_trans $_after;
172
- }
173
-
174
- @if $_math == static {
175
- $_size: valid-column-math($_math, $_column-width) * $_end;
176
- }
177
-
178
- $_output: (
179
- image: (columns: $_stops),
180
- size: $_size,
181
- );
182
-
183
- @return $_output;
184
- }
185
-
186
-
187
- // Get Asymmetrical Inside
188
- // -----------------------
189
- // - $grid: <settings>
190
- @function get-asym-inside(
191
- $grid
192
- ) {
193
- $grid : parse-grid($grid);
194
- $_columns : susy-get(columns, $grid);
195
-
196
- $_color : debug-get(color);
197
- $_light : lighten($_color, 15%);
198
- $_stops : ();
199
-
200
- @for $location from 1 through susy-count($_columns) {
201
- $this-stop: ();
202
-
203
- @if $location == 1 {
204
- $this-stop: append($this-stop, $_color, comma);
205
- } @else {
206
- $start: parse-span(1 at $location $grid);
207
- $start: get-isolation($start);
208
- $this-stop: append($this-stop, $_color $start, comma);
209
- }
210
-
211
- @if $location == susy-count($_columns) {
212
- $this-stop: append($this-stop, $_light, comma);
213
- } @else {
214
- $_end: parse-span(1 at ($location + 1) $grid);
215
- $_end: get-isolation($_end);
216
- $this-stop: append($this-stop, $_light $_end, comma);
217
- }
218
-
219
- $_stops: join($_stops, $this-stop, comma);
220
- }
221
-
222
- @return $_stops;
223
- }
224
-
225
-
226
- // Get Asymmetrical Split
227
- // ----------------------
228
- // - $grid: <settings>
229
- @function get-asym-split(
230
- $grid
231
- ) {
232
- $grid : parse-grid($grid);
233
- $_columns : susy-get(columns, $grid);
234
-
235
- $_color : debug-get(color);
236
- $_light : lighten($_color, 15%);
237
- $_stops : ();
238
-
239
- @for $location from 1 through susy-count($_columns) {
240
- $this-stop: ();
241
-
242
- $start: parse-span(1 at $location $grid);
243
- $start: get-isolation($start);
244
- $this-stop: append($this-stop, transparent $start, comma);
245
- $this-stop: append($this-stop, $_color $start, comma);
246
-
247
- $_end: $start + span(1 at $location $grid);
248
- $this-stop: append($this-stop, $_light $_end, comma);
249
- $this-stop: append($this-stop, transparent $_end, comma);
250
-
251
- $_stops: join($_stops, $this-stop, comma);
252
- }
253
-
254
- @return $_stops;
255
- }
256
-
257
-
258
- // Get Asymmetrical Outside
259
- // ------------------------
260
- // - $grid: <settings>
261
- @function get-asym-outside(
262
- $grid
263
- ) {
264
- $grid : parse-grid($grid);
265
- $_columns : susy-get(columns, $grid);
266
-
267
- $_color : debug-get(color);
268
- $_light : lighten($_color, 15%);
269
- $_trans : transparent;
270
- $_stops : ();
271
-
272
- @for $location from 1 through susy-count($_columns) {
273
- $this-stop: ();
274
-
275
- @if $location == 1 {
276
- $this-stop: append($this-stop, $_color, comma);
277
- } @else {
278
- $start: parse-span(1 at $location $grid);
279
- $start: get-isolation($start);
280
- $this-stop: append($this-stop, $_color $start, comma);
281
- }
282
-
283
- @if $location == susy-count($_columns) {
284
- $this-stop: append($this-stop, $_light, comma);
285
- } @else {
286
- $gutter: get-span-width(first $location $grid);
287
-
288
- $_end: parse-span(1 at ($location + 1) $grid);
289
- $_end: get-isolation($_end);
290
-
291
- $gutter: $_light $gutter, $_trans $gutter, $_trans $_end;
292
- $this-stop: join($this-stop, $gutter, comma);
293
- }
294
-
295
- $_stops: join($_stops, $this-stop, comma);
296
- }
297
-
298
- @return $_stops;
299
- }
300
-
301
-
302
- // Get Asymmetrical Background
303
- // ---------------------------
304
- // - $grid: <settings>
305
- @function get-background-asym(
306
- $grid
307
- ) {
308
- $_stops: ();
309
-
310
- @if is-inside($grid) {
311
- $_stops: get-asym-inside($grid);
312
- } @else if is-split($grid) {
313
- $_stops: get-asym-split($grid);
314
- } @else {
315
- $_stops: get-asym-outside($grid);
316
- }
317
-
318
- @return (image: (columns: $_stops));
319
- }
320
-
321
-
322
- // Get Background
323
- // --------------
324
- // - $grid: <settings>
325
- @function get-background(
326
- $grid
327
- ) {
328
- $grid : parse-grid($grid);
329
- $_show : susy-get(debug image, $grid);
330
- $_return : ();
331
-
332
- @if $_show and $_show != 'hide' {
333
- $_columns: susy-get(columns, $grid);
334
-
335
- @if $_show != 'show-baseline' {
336
- $_sym: is-symmetrical($_columns);
337
- $_return: if($_sym, get-background-sym($grid), get-background-asym($grid));
338
- $_return: map-merge($_return, (clip: content-box));
339
- }
340
-
341
- @if $_show != 'show-columns'
342
- and global-variable-exists(base-line-height)
343
- and type-of($base-line-height) == 'number'
344
- and not unitless($base-line-height) {
345
- $_color: variable-exists('grid-background-baseline-color');
346
- $_color: if($_color, $grid-background-baseline-color, #000);
347
-
348
- $_image: map-get($_return, image);
349
- $_size: map-get($_return, size);
350
- $_baseline: (baseline: ($_color 1px, transparent 1px));
351
- $_baseline-size: 100% $base-line-height;
352
-
353
- $_return: map-merge($_return, (
354
- image: if($_image, map-merge($_image, $_baseline), $_baseline),
355
- size: if($_size, ($_size, $_baseline-size), $_baseline-size),
356
- ));
357
-
358
- @if $_show == 'show' {
359
- $_clip: map-get($_return, clip);
360
- $_return: map-merge($_return, (clip: join($_clip, border-box, comma)));
361
- }
362
- } @else if $_show == 'show-baseline' {
363
- @warn 'Please provide a $base-line-height with the desired height and units';
364
- }
365
- }
366
-
367
- @if map-get($_return, image) {
368
- $_return: map-merge($_return, (flow: susy-get(flow, $grid)));
369
- }
370
-
371
- @return $_return;
372
- }
373
-
374
-
375
- // Get Debug
376
- // ---------
377
- // Return the value of a debug setting
378
- // - $key: <setting>
379
- @function debug-get(
380
- $key,
381
- $grid: $susy
382
- ) {
383
- $key: join(debug, $key, space);
384
- @return susy-get($key, $grid);
385
- }
1
+ // Background Grid Syntax
2
+ // ======================
3
+
4
+ $susy-overlay-grid-head-exists: false;
5
+
6
+
7
+ // Show Grid/s
8
+ // -----------
9
+ // Show grid on any element using either background or overlay.
10
+ // - [$grid] : <settings>
11
+ @mixin show-grid(
12
+ $grid: $susy
13
+ ) {
14
+ $inspect: $grid;
15
+ $_output: debug-get(output, $grid);
16
+
17
+ @include susy-inspect(show-grid, $inspect);
18
+ @if $_output == overlay and susy-get(debug image, $grid) != hide {
19
+ @include overlay-grid($grid);
20
+ } @else {
21
+ @include background-grid($grid);
22
+ }
23
+ }
24
+
25
+ @mixin show-grids(
26
+ $grid: $susy
27
+ ) {
28
+ @include show-grid($grid);
29
+ }
30
+
31
+ // Background Grid
32
+ // ---------------
33
+ // Show a grid background on any element.
34
+ // - [$grid] : <settings>
35
+ @mixin background-grid(
36
+ $grid: $susy
37
+ ) {
38
+ $inspect : $grid;
39
+ $_output : get-background($grid);
40
+
41
+ @if length($_output) > 0 {
42
+ $_flow: susy-get(flow, $grid);
43
+
44
+ $_image: ();
45
+ @each $name, $layer in map-get($_output, image) {
46
+ $_direction: if($name == baseline, to bottom, to to($_flow));
47
+ $_image: append($_image, linear-gradient($_direction, $layer), comma);
48
+ }
49
+ $_output: map-merge($_output, (image: $_image));
50
+
51
+ @include background-grid-output($_output...);
52
+ @include susy-inspect(background-grid, $inspect);
53
+ }
54
+ }
55
+
56
+
57
+ // Overlay Grid
58
+ // ------------
59
+ // Generate an icon to trigger grid-overlays on any given elements.
60
+ // $grids... : <selector> [<settings>] [, <selector>]*
61
+ @mixin overlay-grid (
62
+ $grid: $susy
63
+ ) {
64
+ @if not($susy-overlay-grid-head-exists) {
65
+ @at-root head { @include overlay-head($grid); }
66
+ @at-root head:before { @include overlay-trigger; }
67
+ @at-root head:hover { @include overlay-trigger-hover; }
68
+ $susy-overlay-grid-head-exists: true !global;
69
+ }
70
+
71
+ head:hover ~ &,
72
+ head:hover ~ body & {
73
+ position: relative;
74
+ &:before {
75
+ @include grid-overlay-base;
76
+ @include background-grid($grid);
77
+ }
78
+ }
79
+ }
80
+
81
+
82
+ // [Private] Overlay Trigger
83
+ // -------------------------
84
+ @mixin overlay-trigger {
85
+ content: "|||";
86
+ display: block;
87
+ padding: 5px 10px;
88
+ font: {
89
+ family: sans-serif;
90
+ size: 16px;
91
+ weight: bold;
92
+ }
93
+ }
94
+
95
+
96
+ // [Private] Overlay Trigger Hover
97
+ // -------------------------------
98
+ @mixin overlay-trigger-hover {
99
+ background: rgba(white, .5);
100
+ color: red;
101
+ }
102
+
103
+
104
+ // [Private] Overlay Head
105
+ // ----------------------
106
+ // <head> styles to create grid overlay toggle
107
+ @mixin overlay-head (
108
+ $grid: $susy
109
+ ) {
110
+ $_toggle: debug-get(toggle, $grid);
111
+ $_horz: null;
112
+ $_vert: null;
113
+
114
+ @each $side in $_toggle {
115
+ $_horz: if($side == left or $side == right, $side, $_horz);
116
+ $_vert: if($side == top or $side == bottom, $side, $_vert);
117
+ }
118
+
119
+ display: block;
120
+ position: fixed;
121
+ #{$_horz}: 10px;
122
+ #{$_vert}: 10px;
123
+ z-index: 999;
124
+ color: #333;
125
+ background: rgba(white, .25);
126
+ }
127
+
128
+
129
+ // [Private] Grid Overlay Base
130
+ // ---------------------------
131
+ // Base styles for generating a grid overlay
132
+ @mixin grid-overlay-base() {
133
+ position: absolute;
134
+ top: 0;
135
+ left: 0;
136
+ bottom: 0;
137
+ right: 0;
138
+ content: " ";
139
+ z-index: 998;
140
+ }
141
+
142
+
143
+ // Get Symmetrical Background
144
+ // --------------------------
145
+ // - $grid: <map>
146
+ @function get-background-sym(
147
+ $grid
148
+ ) {
149
+ $grid : parse-grid($grid);
150
+ $_gutters : susy-get(gutters, $grid);
151
+ $_column-width : susy-get(column-width, $grid);
152
+ $_math : susy-get(math, $grid);
153
+
154
+ $_color : debug-get(color);
155
+ $_trans : transparent;
156
+ $_light : lighten($_color, 15%);
157
+
158
+ $_end : 1 + $_gutters;
159
+ $_after : percentage(1/$_end);
160
+ $_stops : ();
161
+ $_size : span(1 $grid wide);
162
+
163
+ @if is-inside($grid) {
164
+ $_stops: $_color, $_light;
165
+ } @else if is-split($grid) {
166
+ $_split: $_gutters/2;
167
+ $_before: percentage($_split/$_end);
168
+ $_after: percentage((1 + $_split)/$_end);
169
+ $_stops: $_trans $_before, $_color $_before, $_light $_after, $_trans $_after;
170
+ } @else {
171
+ $_stops: $_color, $_light $_after, $_trans $_after;
172
+ }
173
+
174
+ @if $_math == static {
175
+ $_size: valid-column-math($_math, $_column-width) * $_end;
176
+ }
177
+
178
+ $_output: (
179
+ image: (columns: $_stops),
180
+ size: $_size,
181
+ );
182
+
183
+ @return $_output;
184
+ }
185
+
186
+
187
+ // Get Asymmetrical Inside
188
+ // -----------------------
189
+ // - $grid: <settings>
190
+ @function get-asym-inside(
191
+ $grid
192
+ ) {
193
+ $grid : parse-grid($grid);
194
+ $_columns : susy-get(columns, $grid);
195
+
196
+ $_color : debug-get(color);
197
+ $_light : lighten($_color, 15%);
198
+ $_stops : ();
199
+
200
+ @for $location from 1 through susy-count($_columns) {
201
+ $this-stop: ();
202
+
203
+ @if $location == 1 {
204
+ $this-stop: append($this-stop, $_color, comma);
205
+ } @else {
206
+ $start: parse-span(1 at $location $grid);
207
+ $start: get-isolation($start);
208
+ $this-stop: append($this-stop, $_color $start, comma);
209
+ }
210
+
211
+ @if $location == susy-count($_columns) {
212
+ $this-stop: append($this-stop, $_light, comma);
213
+ } @else {
214
+ $_end: parse-span(1 at ($location + 1) $grid);
215
+ $_end: get-isolation($_end);
216
+ $this-stop: append($this-stop, $_light $_end, comma);
217
+ }
218
+
219
+ $_stops: join($_stops, $this-stop, comma);
220
+ }
221
+
222
+ @return $_stops;
223
+ }
224
+
225
+
226
+ // Get Asymmetrical Split
227
+ // ----------------------
228
+ // - $grid: <settings>
229
+ @function get-asym-split(
230
+ $grid
231
+ ) {
232
+ $grid : parse-grid($grid);
233
+ $_columns : susy-get(columns, $grid);
234
+
235
+ $_color : debug-get(color);
236
+ $_light : lighten($_color, 15%);
237
+ $_stops : ();
238
+
239
+ @for $location from 1 through susy-count($_columns) {
240
+ $this-stop: ();
241
+
242
+ $start: parse-span(1 at $location $grid);
243
+ $start: get-isolation($start);
244
+ $this-stop: append($this-stop, transparent $start, comma);
245
+ $this-stop: append($this-stop, $_color $start, comma);
246
+
247
+ $_end: $start + span(1 at $location $grid);
248
+ $this-stop: append($this-stop, $_light $_end, comma);
249
+ $this-stop: append($this-stop, transparent $_end, comma);
250
+
251
+ $_stops: join($_stops, $this-stop, comma);
252
+ }
253
+
254
+ @return $_stops;
255
+ }
256
+
257
+
258
+ // Get Asymmetrical Outside
259
+ // ------------------------
260
+ // - $grid: <settings>
261
+ @function get-asym-outside(
262
+ $grid
263
+ ) {
264
+ $grid : parse-grid($grid);
265
+ $_columns : susy-get(columns, $grid);
266
+
267
+ $_color : debug-get(color);
268
+ $_light : lighten($_color, 15%);
269
+ $_trans : transparent;
270
+ $_stops : ();
271
+
272
+ @for $location from 1 through susy-count($_columns) {
273
+ $this-stop: ();
274
+
275
+ @if $location == 1 {
276
+ $this-stop: append($this-stop, $_color, comma);
277
+ } @else {
278
+ $start: parse-span(1 at $location $grid);
279
+ $start: get-isolation($start);
280
+ $this-stop: append($this-stop, $_color $start, comma);
281
+ }
282
+
283
+ @if $location == susy-count($_columns) {
284
+ $this-stop: append($this-stop, $_light, comma);
285
+ } @else {
286
+ $gutter: get-span-width(first $location $grid);
287
+
288
+ $_end: parse-span(1 at ($location + 1) $grid);
289
+ $_end: get-isolation($_end);
290
+
291
+ $gutter: $_light $gutter, $_trans $gutter, $_trans $_end;
292
+ $this-stop: join($this-stop, $gutter, comma);
293
+ }
294
+
295
+ $_stops: join($_stops, $this-stop, comma);
296
+ }
297
+
298
+ @return $_stops;
299
+ }
300
+
301
+
302
+ // Get Asymmetrical Background
303
+ // ---------------------------
304
+ // - $grid: <settings>
305
+ @function get-background-asym(
306
+ $grid
307
+ ) {
308
+ $_stops: ();
309
+
310
+ @if is-inside($grid) {
311
+ $_stops: get-asym-inside($grid);
312
+ } @else if is-split($grid) {
313
+ $_stops: get-asym-split($grid);
314
+ } @else {
315
+ $_stops: get-asym-outside($grid);
316
+ }
317
+
318
+ @return (image: (columns: $_stops));
319
+ }
320
+
321
+
322
+ // Get Background
323
+ // --------------
324
+ // - $grid: <settings>
325
+ @function get-background(
326
+ $grid
327
+ ) {
328
+ $grid : parse-grid($grid);
329
+ $_show : susy-get(debug image, $grid);
330
+ $_return : ();
331
+
332
+ @if $_show and $_show != 'hide' {
333
+ $_columns: susy-get(columns, $grid);
334
+
335
+ @if $_show != 'show-baseline' {
336
+ $_sym: is-symmetrical($_columns);
337
+ $_return: if($_sym, get-background-sym($grid), get-background-asym($grid));
338
+ $_return: map-merge($_return, (clip: content-box));
339
+ }
340
+
341
+ @if $_show != 'show-columns'
342
+ and global-variable-exists(base-line-height)
343
+ and type-of($base-line-height) == 'number'
344
+ and not unitless($base-line-height) {
345
+ $_color: variable-exists('grid-background-baseline-color');
346
+ $_color: if($_color, $grid-background-baseline-color, #000);
347
+
348
+ $_image: map-get($_return, image);
349
+ $_size: map-get($_return, size);
350
+ $_baseline: (baseline: ($_color 1px, transparent 1px));
351
+ $_baseline-size: 100% $base-line-height;
352
+
353
+ $_return: map-merge($_return, (
354
+ image: if($_image, map-merge($_image, $_baseline), $_baseline),
355
+ size: if($_size, ($_size, $_baseline-size), $_baseline-size),
356
+ ));
357
+
358
+ @if $_show == 'show' {
359
+ $_clip: map-get($_return, clip);
360
+ $_return: map-merge($_return, (clip: join($_clip, border-box, comma)));
361
+ }
362
+ } @else if $_show == 'show-baseline' {
363
+ @warn 'Please provide a $base-line-height with the desired height and units';
364
+ }
365
+ }
366
+
367
+ @if map-get($_return, image) {
368
+ $_return: map-merge($_return, (flow: susy-get(flow, $grid)));
369
+ }
370
+
371
+ @return $_return;
372
+ }
373
+
374
+
375
+ // Get Debug
376
+ // ---------
377
+ // Return the value of a debug setting
378
+ // - $key: <setting>
379
+ @function debug-get(
380
+ $key,
381
+ $grid: $susy
382
+ ) {
383
+ $key: join(debug, $key, space);
384
+ @return susy-get($key, $grid);
385
+ }