jekyll-theme-basically-basic 1.0.0 → 1.0.1

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 (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
+ }