minimal-mistakes-jekyll 4.1.1 → 4.2.0

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 (168) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +18 -0
  3. data/LICENSE.txt +20 -20
  4. data/README.md +1 -2
  5. data/_includes/analytics-providers/custom.html +2 -2
  6. data/_includes/analytics-providers/google-universal.html +8 -8
  7. data/_includes/analytics-providers/google.html +10 -10
  8. data/_includes/analytics.html +11 -11
  9. data/_includes/archive-single.html +37 -37
  10. data/_includes/author-profile-custom-links.html +6 -6
  11. data/_includes/author-profile.html +241 -241
  12. data/_includes/base_path +4 -4
  13. data/_includes/breadcrumbs.html +38 -38
  14. data/_includes/browser-upgrade.html +2 -2
  15. data/_includes/category-list.html +25 -25
  16. data/_includes/comment.html +21 -21
  17. data/_includes/comments-providers/custom.html +2 -2
  18. data/_includes/comments-providers/discourse.html +13 -13
  19. data/_includes/comments-providers/disqus.html +21 -21
  20. data/_includes/comments-providers/facebook.html +7 -7
  21. data/_includes/comments-providers/google-plus.html +1 -1
  22. data/_includes/comments-providers/scripts.html +17 -17
  23. data/_includes/comments-providers/staticman.html +41 -41
  24. data/_includes/comments.html +79 -79
  25. data/_includes/feature_row +49 -49
  26. data/_includes/figure +12 -12
  27. data/_includes/footer.html +21 -21
  28. data/_includes/footer/custom.html +2 -2
  29. data/_includes/gallery +46 -46
  30. data/_includes/group-by-array +46 -46
  31. data/_includes/head.html +18 -18
  32. data/_includes/head/custom.html +4 -4
  33. data/_includes/masthead.html +20 -20
  34. data/_includes/nav_list +46 -46
  35. data/_includes/page__hero.html +52 -52
  36. data/_includes/page__hero_video.html +4 -0
  37. data/_includes/page__taxonomy.html +6 -6
  38. data/_includes/paginator.html +67 -67
  39. data/_includes/post_pagination.html +13 -13
  40. data/_includes/read-time.html +14 -14
  41. data/_includes/scripts.html +4 -4
  42. data/_includes/seo.html +145 -145
  43. data/_includes/sidebar.html +22 -22
  44. data/_includes/social-share.html +13 -13
  45. data/_includes/tag-list.html +25 -25
  46. data/_includes/toc +6 -6
  47. data/_includes/video +11 -0
  48. data/_layouts/archive-taxonomy.html +14 -14
  49. data/_layouts/archive.html +2 -0
  50. data/_layouts/compress.html +10 -10
  51. data/_layouts/default.html +28 -28
  52. data/_layouts/home.html +11 -11
  53. data/_layouts/single.html +76 -74
  54. data/_layouts/splash.html +2 -0
  55. data/_sass/_archive.scss +237 -237
  56. data/_sass/_footer.scss +79 -79
  57. data/_sass/_forms.scss +390 -390
  58. data/_sass/_masthead.scss +52 -52
  59. data/_sass/_mixins.scss +52 -52
  60. data/_sass/_navigation.scss +543 -543
  61. data/_sass/_notices.scss +98 -98
  62. data/_sass/_page.scss +400 -400
  63. data/_sass/_print.scss +17 -17
  64. data/_sass/_reset.scss +186 -186
  65. data/_sass/_sidebar.scss +230 -230
  66. data/_sass/_syntax.scss +145 -145
  67. data/_sass/_tables.scss +37 -37
  68. data/_sass/_utilities.scss +37 -1
  69. data/_sass/_variables.scss +127 -127
  70. data/_sass/vendor/breakpoint/_breakpoint.scss +114 -114
  71. data/_sass/vendor/breakpoint/_context.scss +94 -94
  72. data/_sass/vendor/breakpoint/_helpers.scss +151 -151
  73. data/_sass/vendor/breakpoint/_legacy-settings.scss +49 -49
  74. data/_sass/vendor/breakpoint/_no-query.scss +15 -15
  75. data/_sass/vendor/breakpoint/_parsers.scss +215 -215
  76. data/_sass/vendor/breakpoint/_respond-to.scss +82 -82
  77. data/_sass/vendor/breakpoint/_settings.scss +70 -70
  78. data/_sass/vendor/breakpoint/parsers/_double.scss +33 -33
  79. data/_sass/vendor/breakpoint/parsers/_query.scss +82 -82
  80. data/_sass/vendor/breakpoint/parsers/_resolution.scss +31 -31
  81. data/_sass/vendor/breakpoint/parsers/_single.scss +26 -26
  82. data/_sass/vendor/breakpoint/parsers/_triple.scss +36 -36
  83. data/_sass/vendor/breakpoint/parsers/double/_default-pair.scss +21 -21
  84. data/_sass/vendor/breakpoint/parsers/double/_default.scss +22 -22
  85. data/_sass/vendor/breakpoint/parsers/double/_double-string.scss +21 -21
  86. data/_sass/vendor/breakpoint/parsers/resolution/_resolution.scss +60 -60
  87. data/_sass/vendor/breakpoint/parsers/single/_default.scss +13 -13
  88. data/_sass/vendor/breakpoint/parsers/triple/_default.scss +18 -18
  89. data/_sass/vendor/font-awesome/_animated.scss +34 -34
  90. data/_sass/vendor/font-awesome/_bordered-pulled.scss +25 -25
  91. data/_sass/vendor/font-awesome/_core.scss +12 -12
  92. data/_sass/vendor/font-awesome/_fixed-width.scss +6 -6
  93. data/_sass/vendor/font-awesome/_font-awesome.scss +18 -18
  94. data/_sass/vendor/font-awesome/_icons.scss +789 -789
  95. data/_sass/vendor/font-awesome/_larger.scss +13 -13
  96. data/_sass/vendor/font-awesome/_list.scss +19 -19
  97. data/_sass/vendor/font-awesome/_mixins.scss +60 -60
  98. data/_sass/vendor/font-awesome/_path.scss +15 -15
  99. data/_sass/vendor/font-awesome/_rotated-flipped.scss +20 -20
  100. data/_sass/vendor/font-awesome/_screen-reader.scss +5 -5
  101. data/_sass/vendor/font-awesome/_stacked.scss +20 -20
  102. data/_sass/vendor/font-awesome/_variables.scss +800 -800
  103. data/_sass/vendor/magnific-popup/_settings.scss +45 -45
  104. data/_sass/vendor/susy/_su.scss +4 -4
  105. data/_sass/vendor/susy/_susy.scss +4 -4
  106. data/_sass/vendor/susy/_susyone.scss +4 -4
  107. data/_sass/vendor/susy/susy/_su.scss +7 -7
  108. data/_sass/vendor/susy/susy/language/_susy.scss +24 -24
  109. data/_sass/vendor/susy/susy/language/_susyone.scss +13 -13
  110. data/_sass/vendor/susy/susy/language/susy/_background.scss +385 -385
  111. data/_sass/vendor/susy/susy/language/susy/_bleed.scss +200 -200
  112. data/_sass/vendor/susy/susy/language/susy/_box-sizing.scss +47 -47
  113. data/_sass/vendor/susy/susy/language/susy/_breakpoint-plugin.scss +185 -185
  114. data/_sass/vendor/susy/susy/language/susy/_container.scss +81 -81
  115. data/_sass/vendor/susy/susy/language/susy/_context.scss +36 -36
  116. data/_sass/vendor/susy/susy/language/susy/_gallery.scss +94 -94
  117. data/_sass/vendor/susy/susy/language/susy/_grids.scss +64 -64
  118. data/_sass/vendor/susy/susy/language/susy/_gutters.scss +154 -154
  119. data/_sass/vendor/susy/susy/language/susy/_isolate.scss +77 -77
  120. data/_sass/vendor/susy/susy/language/susy/_margins.scss +94 -94
  121. data/_sass/vendor/susy/susy/language/susy/_padding.scss +74 -74
  122. data/_sass/vendor/susy/susy/language/susy/_rows.scss +138 -138
  123. data/_sass/vendor/susy/susy/language/susy/_settings.scss +216 -216
  124. data/_sass/vendor/susy/susy/language/susy/_span.scss +163 -163
  125. data/_sass/vendor/susy/susy/language/susy/_validation.scss +16 -16
  126. data/_sass/vendor/susy/susy/language/susyone/_background.scss +18 -18
  127. data/_sass/vendor/susy/susy/language/susyone/_functions.scss +377 -377
  128. data/_sass/vendor/susy/susy/language/susyone/_grid.scss +312 -312
  129. data/_sass/vendor/susy/susy/language/susyone/_isolation.scss +51 -51
  130. data/_sass/vendor/susy/susy/language/susyone/_margin.scss +93 -93
  131. data/_sass/vendor/susy/susy/language/susyone/_media.scss +105 -105
  132. data/_sass/vendor/susy/susy/language/susyone/_padding.scss +92 -92
  133. data/_sass/vendor/susy/susy/language/susyone/_settings.scss +60 -60
  134. data/_sass/vendor/susy/susy/output/_float.scss +9 -9
  135. data/_sass/vendor/susy/susy/output/_shared.scss +15 -15
  136. data/_sass/vendor/susy/susy/output/_support.scss +9 -9
  137. data/_sass/vendor/susy/susy/output/float/_container.scss +16 -16
  138. data/_sass/vendor/susy/susy/output/float/_end.scss +40 -40
  139. data/_sass/vendor/susy/susy/output/float/_isolate.scss +22 -22
  140. data/_sass/vendor/susy/susy/output/float/_span.scss +35 -35
  141. data/_sass/vendor/susy/susy/output/shared/_background.scss +26 -26
  142. data/_sass/vendor/susy/susy/output/shared/_container.scss +21 -21
  143. data/_sass/vendor/susy/susy/output/shared/_direction.scss +42 -42
  144. data/_sass/vendor/susy/susy/output/shared/_inspect.scss +25 -25
  145. data/_sass/vendor/susy/susy/output/shared/_margins.scss +23 -23
  146. data/_sass/vendor/susy/susy/output/shared/_output.scss +14 -14
  147. data/_sass/vendor/susy/susy/output/shared/_padding.scss +23 -23
  148. data/_sass/vendor/susy/susy/output/support/_background.scss +58 -58
  149. data/_sass/vendor/susy/susy/output/support/_box-sizing.scss +19 -19
  150. data/_sass/vendor/susy/susy/output/support/_clearfix.scss +18 -18
  151. data/_sass/vendor/susy/susy/output/support/_prefix.scss +19 -19
  152. data/_sass/vendor/susy/susy/output/support/_rem.scss +22 -22
  153. data/_sass/vendor/susy/susy/output/support/_support.scss +85 -85
  154. data/_sass/vendor/susy/susy/su/_grid.scss +103 -103
  155. data/_sass/vendor/susy/susy/su/_settings.scss +73 -73
  156. data/_sass/vendor/susy/susy/su/_utilities.scss +111 -111
  157. data/_sass/vendor/susy/susy/su/_validation.scss +57 -57
  158. data/assets/css/main.scss +78 -78
  159. data/assets/fonts/fontawesome-webfont.svg +2671 -2671
  160. data/assets/js/_main.js +72 -100
  161. data/assets/js/main.min.js +4 -5
  162. data/assets/js/plugins/jquery.fitvids.js +81 -81
  163. data/assets/js/plugins/jquery.greedy-navigation.js +71 -71
  164. data/assets/js/plugins/jquery.magnific-popup.js +2049 -2049
  165. data/assets/js/plugins/jquery.smooth-scroll.min.js +8 -8
  166. data/assets/js/vendor/jquery/jquery-1.12.4.min.js +4 -4
  167. metadata +7 -6
  168. data/assets/js/plugins/stickyfill.min.js +0 -8
@@ -1,46 +1,46 @@
1
- ////////////////////////
2
- // Settings //
3
- ////////////////////////
4
-
5
- // overlay
6
- $mfp-overlay-color: #000; // Color of overlay screen
7
- $mfp-overlay-opacity: 0.8; // Opacity of overlay screen
8
- $mfp-shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
9
-
10
- // spacing
11
- $mfp-popup-padding-left: 8px; // Padding from left and from right side
12
- $mfp-popup-padding-left-mobile: 6px; // Same as above, but is applied when width of window is less than 800px
13
-
14
- $mfp-z-index-base: 1040; // Base z-index of popup
15
-
16
- // controls
17
- $mfp-include-arrows: true; // Include styles for nav arrows
18
- $mfp-controls-opacity: 1; // Opacity of controls
19
- $mfp-controls-color: #fff; // Color of controls
20
- $mfp-controls-border-color: #fff; // Border color of controls
21
- $mfp-inner-close-icon-color: #fff; // Color of close button when inside
22
- $mfp-controls-text-color: #ccc; // Color of preloader and "1 of X" indicator
23
- $mfp-controls-text-color-hover: #fff; // Hover color of preloader and "1 of X" indicator
24
- $mfp-IE7support: true; // Very basic IE7 support
25
-
26
- // Iframe-type options
27
- $mfp-include-iframe-type: true; // Enable Iframe-type popups
28
- $mfp-iframe-padding-top: 40px; // Iframe padding top
29
- $mfp-iframe-background: #000; // Background color of iframes
30
- $mfp-iframe-max-width: 900px; // Maximum width of iframes
31
- $mfp-iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
32
-
33
- // Image-type options
34
- $mfp-include-image-type: true; // Enable Image-type popups
35
- $mfp-image-background: #444 !default;
36
- $mfp-image-padding-top: 40px; // Image padding top
37
- $mfp-image-padding-bottom: 40px; // Image padding bottom
38
- $mfp-include-mobile-layout-for-image: true; // Removes paddings from top and bottom
39
-
40
- // Image caption options
41
- $mfp-caption-title-color: #f3f3f3; // Caption title color
42
- $mfp-caption-subtitle-color: #bdbdbd; // Caption subtitle color
43
- .mfp-counter { font-family: $serif; } // Caption font family
44
-
45
- // A11y
1
+ ////////////////////////
2
+ // Settings //
3
+ ////////////////////////
4
+
5
+ // overlay
6
+ $mfp-overlay-color: #000; // Color of overlay screen
7
+ $mfp-overlay-opacity: 0.8; // Opacity of overlay screen
8
+ $mfp-shadow: 0 0 8px rgba(0, 0, 0, 0.6); // Shadow on image or iframe
9
+
10
+ // spacing
11
+ $mfp-popup-padding-left: 8px; // Padding from left and from right side
12
+ $mfp-popup-padding-left-mobile: 6px; // Same as above, but is applied when width of window is less than 800px
13
+
14
+ $mfp-z-index-base: 1040; // Base z-index of popup
15
+
16
+ // controls
17
+ $mfp-include-arrows: true; // Include styles for nav arrows
18
+ $mfp-controls-opacity: 1; // Opacity of controls
19
+ $mfp-controls-color: #fff; // Color of controls
20
+ $mfp-controls-border-color: #fff; // Border color of controls
21
+ $mfp-inner-close-icon-color: #fff; // Color of close button when inside
22
+ $mfp-controls-text-color: #ccc; // Color of preloader and "1 of X" indicator
23
+ $mfp-controls-text-color-hover: #fff; // Hover color of preloader and "1 of X" indicator
24
+ $mfp-IE7support: true; // Very basic IE7 support
25
+
26
+ // Iframe-type options
27
+ $mfp-include-iframe-type: true; // Enable Iframe-type popups
28
+ $mfp-iframe-padding-top: 40px; // Iframe padding top
29
+ $mfp-iframe-background: #000; // Background color of iframes
30
+ $mfp-iframe-max-width: 900px; // Maximum width of iframes
31
+ $mfp-iframe-ratio: 9/16; // Ratio of iframe (9/16 = widescreen, 3/4 = standard, etc.)
32
+
33
+ // Image-type options
34
+ $mfp-include-image-type: true; // Enable Image-type popups
35
+ $mfp-image-background: #444 !default;
36
+ $mfp-image-padding-top: 40px; // Image padding top
37
+ $mfp-image-padding-bottom: 40px; // Image padding bottom
38
+ $mfp-include-mobile-layout-for-image: true; // Removes paddings from top and bottom
39
+
40
+ // Image caption options
41
+ $mfp-caption-title-color: #f3f3f3; // Caption title color
42
+ $mfp-caption-subtitle-color: #bdbdbd; // Caption subtitle color
43
+ .mfp-counter { font-family: $serif; } // Caption font family
44
+
45
+ // A11y
46
46
  $mfp-use-visuallyhidden: false;
@@ -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
+ }