jekyll-theme-basically-basic 1.0.0 → 1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (165) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +14 -19
  3. data/LICENSE.md +20 -20
  4. data/README.md +32 -2
  5. data/_includes/author +30 -30
  6. data/_includes/contact-list.html +26 -26
  7. data/_includes/cv/awards.html +23 -23
  8. data/_includes/cv/education.html +36 -36
  9. data/_includes/cv/interests.html +19 -19
  10. data/_includes/cv/intro.html +18 -18
  11. data/_includes/cv/languages.html +19 -19
  12. data/_includes/cv/publications.html +29 -29
  13. data/_includes/cv/references.html +23 -23
  14. data/_includes/cv/skills.html +19 -19
  15. data/_includes/cv/volunteer.html +46 -46
  16. data/_includes/cv/work.html +46 -46
  17. data/_includes/disqus_comments.html +16 -16
  18. data/_includes/entry.html +29 -29
  19. data/_includes/footer.html +9 -9
  20. data/_includes/google-analytics.html +8 -8
  21. data/_includes/icon-bitbucket.html +4 -4
  22. data/_includes/icon-codepen.html +4 -4
  23. data/_includes/icon-dribbble.html +4 -4
  24. data/_includes/icon-facebook.html +4 -4
  25. data/_includes/icon-flickr.html +4 -4
  26. data/_includes/icon-github.html +4 -4
  27. data/_includes/icon-gitlab.html +4 -4
  28. data/_includes/icon-googleplus.html +4 -4
  29. data/_includes/icon-instagram.html +4 -4
  30. data/_includes/icon-lastfm.html +4 -4
  31. data/_includes/icon-linkedin.html +4 -4
  32. data/_includes/icon-pinterest.html +4 -4
  33. data/_includes/icon-soundcloud.html +4 -4
  34. data/_includes/icon-stackoverflow.html +4 -4
  35. data/_includes/icon-tumblr.html +4 -4
  36. data/_includes/icon-twitter.html +4 -4
  37. data/_includes/icon-xing.html +4 -4
  38. data/_includes/icon-youtube.html +4 -4
  39. data/_includes/navigation.html +24 -24
  40. data/_includes/page-intro.html +42 -42
  41. data/_includes/posts-all.html +2 -2
  42. data/_includes/posts-paginated.html +15 -15
  43. data/_includes/read-time.html +13 -13
  44. data/_includes/scripts.html +4 -4
  45. data/_includes/skip-links.html +7 -7
  46. data/_layouts/about.html +21 -21
  47. data/_layouts/cv.html +28 -28
  48. data/_layouts/default.html +38 -38
  49. data/_layouts/home.html +30 -30
  50. data/_layouts/page.html +17 -17
  51. data/_layouts/post.html +20 -20
  52. data/_sass/basically-basic.scss +41 -37
  53. data/_sass/basically-basic/_base.scss +110 -110
  54. data/_sass/basically-basic/_buttons.scss +39 -39
  55. data/_sass/basically-basic/_contact-lists.scss +11 -11
  56. data/_sass/basically-basic/_entries.scss +155 -155
  57. data/_sass/basically-basic/_footer.scss +13 -13
  58. data/_sass/basically-basic/_global.scss +36 -36
  59. data/_sass/basically-basic/_icons.scss +43 -43
  60. data/_sass/basically-basic/_intro.scss +65 -65
  61. data/_sass/basically-basic/_layout.scss +178 -178
  62. data/_sass/basically-basic/_mixins.scss +7 -7
  63. data/_sass/basically-basic/_navicons.scss +144 -144
  64. data/_sass/basically-basic/_navigation.scss +51 -51
  65. data/_sass/basically-basic/_print.scss +226 -0
  66. data/_sass/basically-basic/_reset.scss +522 -522
  67. data/_sass/basically-basic/_responsive-embed.scss +70 -0
  68. data/_sass/basically-basic/_sidebar.scss +177 -177
  69. data/_sass/basically-basic/_syntax-highlighting.scss +127 -127
  70. data/_sass/basically-basic/_tables.scss +42 -42
  71. data/_sass/basically-basic/_variables.scss +84 -84
  72. data/_sass/basically-basic/mixins/_clearfix.scss +11 -11
  73. data/_sass/basically-basic/mixins/_color.scss +21 -21
  74. data/_sass/basically-basic/mixins/_float.scss +15 -15
  75. data/_sass/basically-basic/mixins/_fluid-type.scss +33 -33
  76. data/_sass/basically-basic/mixins/_image.scss +38 -38
  77. data/_sass/basically-basic/mixins/_lists.scss +9 -9
  78. data/_sass/basically-basic/mixins/_text-truncate.scss +10 -10
  79. data/_sass/basically-basic/themes/_default.scss +5 -5
  80. data/_sass/basically-basic/themes/_night.scss +12 -12
  81. data/_sass/basically-basic/themes/_plum.scss +12 -12
  82. data/_sass/basically-basic/themes/_sea.scss +12 -12
  83. data/_sass/basically-basic/themes/_soft.scss +12 -12
  84. data/_sass/basically-basic/themes/_steel.scss +12 -12
  85. data/_sass/basically-basic/utilities/_accessibility.scss +54 -54
  86. data/_sass/basically-basic/utilities/_align.scss +64 -64
  87. data/_sass/basically-basic/utilities/_clearfix.scss +7 -7
  88. data/_sass/basically-basic/utilities/_float.scss +7 -7
  89. data/_sass/basically-basic/utilities/_text.scss +28 -28
  90. data/_sass/basically-basic/vendor/_breakpoint.scss +114 -114
  91. data/_sass/basically-basic/vendor/_su.scss +4 -4
  92. data/_sass/basically-basic/vendor/_susy.scss +4 -4
  93. data/_sass/basically-basic/vendor/_susyone.scss +4 -4
  94. data/_sass/basically-basic/vendor/breakpoint/_context.scss +94 -94
  95. data/_sass/basically-basic/vendor/breakpoint/_helpers.scss +151 -151
  96. data/_sass/basically-basic/vendor/breakpoint/_legacy-settings.scss +49 -49
  97. data/_sass/basically-basic/vendor/breakpoint/_no-query.scss +15 -15
  98. data/_sass/basically-basic/vendor/breakpoint/_parsers.scss +215 -215
  99. data/_sass/basically-basic/vendor/breakpoint/_respond-to.scss +82 -82
  100. data/_sass/basically-basic/vendor/breakpoint/_settings.scss +70 -70
  101. data/_sass/basically-basic/vendor/breakpoint/parsers/_double.scss +33 -33
  102. data/_sass/basically-basic/vendor/breakpoint/parsers/_query.scss +82 -82
  103. data/_sass/basically-basic/vendor/breakpoint/parsers/_resolution.scss +31 -31
  104. data/_sass/basically-basic/vendor/breakpoint/parsers/_single.scss +26 -26
  105. data/_sass/basically-basic/vendor/breakpoint/parsers/_triple.scss +36 -36
  106. data/_sass/basically-basic/vendor/breakpoint/parsers/double/_default-pair.scss +21 -21
  107. data/_sass/basically-basic/vendor/breakpoint/parsers/double/_default.scss +22 -22
  108. data/_sass/basically-basic/vendor/breakpoint/parsers/double/_double-string.scss +21 -21
  109. data/_sass/basically-basic/vendor/breakpoint/parsers/resolution/_resolution.scss +60 -60
  110. data/_sass/basically-basic/vendor/breakpoint/parsers/single/_default.scss +13 -13
  111. data/_sass/basically-basic/vendor/breakpoint/parsers/triple/_default.scss +18 -18
  112. data/_sass/basically-basic/vendor/susy/_su.scss +7 -7
  113. data/_sass/basically-basic/vendor/susy/language/_susy.scss +24 -24
  114. data/_sass/basically-basic/vendor/susy/language/_susyone.scss +13 -13
  115. data/_sass/basically-basic/vendor/susy/language/susy/_background.scss +385 -385
  116. data/_sass/basically-basic/vendor/susy/language/susy/_bleed.scss +200 -200
  117. data/_sass/basically-basic/vendor/susy/language/susy/_box-sizing.scss +47 -47
  118. data/_sass/basically-basic/vendor/susy/language/susy/_breakpoint-plugin.scss +185 -185
  119. data/_sass/basically-basic/vendor/susy/language/susy/_container.scss +81 -81
  120. data/_sass/basically-basic/vendor/susy/language/susy/_context.scss +36 -36
  121. data/_sass/basically-basic/vendor/susy/language/susy/_gallery.scss +94 -94
  122. data/_sass/basically-basic/vendor/susy/language/susy/_grids.scss +64 -64
  123. data/_sass/basically-basic/vendor/susy/language/susy/_gutters.scss +154 -154
  124. data/_sass/basically-basic/vendor/susy/language/susy/_isolate.scss +77 -77
  125. data/_sass/basically-basic/vendor/susy/language/susy/_margins.scss +94 -94
  126. data/_sass/basically-basic/vendor/susy/language/susy/_padding.scss +74 -74
  127. data/_sass/basically-basic/vendor/susy/language/susy/_rows.scss +138 -138
  128. data/_sass/basically-basic/vendor/susy/language/susy/_settings.scss +216 -216
  129. data/_sass/basically-basic/vendor/susy/language/susy/_span.scss +163 -163
  130. data/_sass/basically-basic/vendor/susy/language/susy/_validation.scss +16 -16
  131. data/_sass/basically-basic/vendor/susy/language/susyone/_background.scss +18 -18
  132. data/_sass/basically-basic/vendor/susy/language/susyone/_functions.scss +377 -377
  133. data/_sass/basically-basic/vendor/susy/language/susyone/_grid.scss +312 -312
  134. data/_sass/basically-basic/vendor/susy/language/susyone/_isolation.scss +51 -51
  135. data/_sass/basically-basic/vendor/susy/language/susyone/_margin.scss +93 -93
  136. data/_sass/basically-basic/vendor/susy/language/susyone/_media.scss +105 -105
  137. data/_sass/basically-basic/vendor/susy/language/susyone/_padding.scss +92 -92
  138. data/_sass/basically-basic/vendor/susy/language/susyone/_settings.scss +60 -60
  139. data/_sass/basically-basic/vendor/susy/output/_float.scss +9 -9
  140. data/_sass/basically-basic/vendor/susy/output/_shared.scss +15 -15
  141. data/_sass/basically-basic/vendor/susy/output/_support.scss +9 -9
  142. data/_sass/basically-basic/vendor/susy/output/float/_container.scss +16 -16
  143. data/_sass/basically-basic/vendor/susy/output/float/_end.scss +40 -40
  144. data/_sass/basically-basic/vendor/susy/output/float/_isolate.scss +22 -22
  145. data/_sass/basically-basic/vendor/susy/output/float/_span.scss +35 -35
  146. data/_sass/basically-basic/vendor/susy/output/shared/_background.scss +26 -26
  147. data/_sass/basically-basic/vendor/susy/output/shared/_container.scss +21 -21
  148. data/_sass/basically-basic/vendor/susy/output/shared/_direction.scss +42 -42
  149. data/_sass/basically-basic/vendor/susy/output/shared/_inspect.scss +25 -25
  150. data/_sass/basically-basic/vendor/susy/output/shared/_margins.scss +23 -23
  151. data/_sass/basically-basic/vendor/susy/output/shared/_output.scss +14 -14
  152. data/_sass/basically-basic/vendor/susy/output/shared/_padding.scss +23 -23
  153. data/_sass/basically-basic/vendor/susy/output/support/_background.scss +58 -58
  154. data/_sass/basically-basic/vendor/susy/output/support/_box-sizing.scss +19 -19
  155. data/_sass/basically-basic/vendor/susy/output/support/_clearfix.scss +18 -18
  156. data/_sass/basically-basic/vendor/susy/output/support/_prefix.scss +19 -19
  157. data/_sass/basically-basic/vendor/susy/output/support/_rem.scss +22 -22
  158. data/_sass/basically-basic/vendor/susy/output/support/_support.scss +85 -85
  159. data/_sass/basically-basic/vendor/susy/su/_grid.scss +103 -103
  160. data/_sass/basically-basic/vendor/susy/su/_settings.scss +73 -73
  161. data/_sass/basically-basic/vendor/susy/su/_utilities.scss +111 -111
  162. data/_sass/basically-basic/vendor/susy/su/_validation.scss +57 -57
  163. data/assets/javascripts/main.js +57 -57
  164. data/assets/stylesheets/main.scss +9 -9
  165. metadata +4 -2
@@ -1,18 +1,18 @@
1
- @function breakpoint-parse-triple-default($feature, $first, $second) {
2
-
3
- // Sort into min and max
4
- $min: min($first, $second);
5
- $max: max($first, $second);
6
-
7
- // Set Context
8
- $context-setter: private-breakpoint-set-context(min-#{$feature}, $min);
9
- $context-setter: private-breakpoint-set-context(max-#{$feature}, $max);
10
-
11
- // Make them EMs if need be
12
- @if (breakpoint-get('to ems') == true) {
13
- $min: breakpoint-to-base-em($min);
14
- $max: breakpoint-to-base-em($max);
15
- }
16
-
17
- @return '(min-#{$feature}: #{$min}) and (max-#{$feature}: #{$max})';
18
- }
1
+ @function breakpoint-parse-triple-default($feature, $first, $second) {
2
+
3
+ // Sort into min and max
4
+ $min: min($first, $second);
5
+ $max: max($first, $second);
6
+
7
+ // Set Context
8
+ $context-setter: private-breakpoint-set-context(min-#{$feature}, $min);
9
+ $context-setter: private-breakpoint-set-context(max-#{$feature}, $max);
10
+
11
+ // Make them EMs if need be
12
+ @if (breakpoint-get('to ems') == true) {
13
+ $min: breakpoint-to-base-em($min);
14
+ $max: breakpoint-to-base-em($max);
15
+ }
16
+
17
+ @return '(min-#{$feature}: #{$min}) and (max-#{$feature}: #{$max})';
18
+ }
@@ -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
+ }