minimal-mistakes-jekyll 4.6.0 → 4.7.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (144) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +26 -0
  3. data/LICENSE.txt +59 -21
  4. data/README.md +217 -160
  5. data/_data/navigation.yml +11 -11
  6. data/_data/ui-text.yml +931 -888
  7. data/_includes/analytics-providers/custom.html +2 -2
  8. data/_includes/analytics-providers/google-universal.html +9 -9
  9. data/_includes/analytics-providers/google.html +10 -10
  10. data/_includes/analytics.html +11 -11
  11. data/_includes/archive-single.html +37 -37
  12. data/_includes/author-profile-custom-links.html +6 -6
  13. data/_includes/author-profile.html +249 -249
  14. data/_includes/base_path +4 -4
  15. data/_includes/breadcrumbs.html +39 -39
  16. data/_includes/browser-upgrade.html +2 -2
  17. data/_includes/category-list.html +25 -25
  18. data/_includes/comment.html +22 -22
  19. data/_includes/comments-providers/custom.html +2 -2
  20. data/_includes/comments-providers/discourse.html +13 -13
  21. data/_includes/comments-providers/facebook.html +7 -7
  22. data/_includes/comments-providers/google-plus.html +1 -1
  23. data/_includes/comments-providers/scripts.html +17 -15
  24. data/_includes/comments-providers/staticman.html +41 -41
  25. data/_includes/comments-providers/staticman_v2.html +42 -0
  26. data/_includes/comments.html +168 -96
  27. data/_includes/feature_row +49 -49
  28. data/_includes/figure +12 -12
  29. data/_includes/footer.html +25 -25
  30. data/_includes/footer/custom.html +2 -2
  31. data/_includes/gallery +46 -46
  32. data/_includes/group-by-array +46 -46
  33. data/_includes/head.html +42 -42
  34. data/_includes/head/custom.html +4 -4
  35. data/_includes/masthead.html +23 -20
  36. data/_includes/nav_list +46 -46
  37. data/_includes/page__hero_video.html +4 -4
  38. data/_includes/page__taxonomy.html +6 -6
  39. data/_includes/paginator.html +69 -69
  40. data/_includes/post_pagination.html +13 -13
  41. data/_includes/read-time.html +14 -14
  42. data/_includes/scripts.html +15 -15
  43. data/_includes/seo.html +162 -147
  44. data/_includes/sidebar.html +22 -22
  45. data/_includes/social-share.html +13 -13
  46. data/_includes/tag-list.html +25 -25
  47. data/_includes/toc +6 -6
  48. data/_includes/toc.html +75 -0
  49. data/_includes/video +11 -11
  50. data/_layouts/archive-taxonomy.html +14 -14
  51. data/_layouts/archive.html +25 -25
  52. data/_layouts/compress.html +10 -10
  53. data/_layouts/default.html +1 -1
  54. data/_layouts/home.html +11 -11
  55. data/_layouts/single.html +92 -84
  56. data/_layouts/splash.html +21 -21
  57. data/_sass/minimal-mistakes.scss +1 -1
  58. data/_sass/minimal-mistakes/_animations.scss +20 -20
  59. data/_sass/minimal-mistakes/_archive.scss +317 -317
  60. data/_sass/minimal-mistakes/_base.scss +315 -315
  61. data/_sass/minimal-mistakes/_buttons.scss +97 -97
  62. data/_sass/minimal-mistakes/_footer.scss +82 -82
  63. data/_sass/minimal-mistakes/_forms.scss +399 -389
  64. data/_sass/minimal-mistakes/_masthead.scss +82 -82
  65. data/_sass/minimal-mistakes/_mixins.scss +91 -91
  66. data/_sass/minimal-mistakes/_navigation.scss +552 -552
  67. data/_sass/minimal-mistakes/_notices.scss +99 -99
  68. data/_sass/minimal-mistakes/_page.scss +430 -430
  69. data/_sass/minimal-mistakes/_reset.scss +186 -186
  70. data/_sass/minimal-mistakes/_sidebar.scss +262 -262
  71. data/_sass/minimal-mistakes/_syntax.scss +286 -146
  72. data/_sass/minimal-mistakes/_tables.scss +36 -36
  73. data/_sass/minimal-mistakes/_utilities.scss +519 -519
  74. data/_sass/minimal-mistakes/_variables.scss +137 -137
  75. data/_sass/minimal-mistakes/skins/_air.scss +22 -22
  76. data/_sass/minimal-mistakes/skins/_aqua.scss +30 -0
  77. data/_sass/minimal-mistakes/skins/_contrast.scss +33 -33
  78. data/_sass/minimal-mistakes/skins/_dark.scss +23 -23
  79. data/_sass/minimal-mistakes/skins/_default.scss +5 -5
  80. data/_sass/minimal-mistakes/skins/_dirt.scss +14 -14
  81. data/_sass/minimal-mistakes/skins/_mint.scss +22 -22
  82. data/_sass/minimal-mistakes/skins/_neon.scss +35 -0
  83. data/_sass/minimal-mistakes/skins/_plum.scss +42 -0
  84. data/_sass/minimal-mistakes/skins/_sunrise.scss +25 -25
  85. data/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss +114 -114
  86. data/_sass/minimal-mistakes/vendor/breakpoint/_context.scss +94 -94
  87. data/_sass/minimal-mistakes/vendor/breakpoint/_helpers.scss +151 -151
  88. data/_sass/minimal-mistakes/vendor/breakpoint/_legacy-settings.scss +49 -49
  89. data/_sass/minimal-mistakes/vendor/breakpoint/_no-query.scss +15 -15
  90. data/_sass/minimal-mistakes/vendor/breakpoint/_parsers.scss +215 -215
  91. data/_sass/minimal-mistakes/vendor/breakpoint/_respond-to.scss +82 -82
  92. data/_sass/minimal-mistakes/vendor/breakpoint/_settings.scss +70 -70
  93. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_double.scss +33 -33
  94. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_query.scss +82 -82
  95. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_resolution.scss +31 -31
  96. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_single.scss +26 -26
  97. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_triple.scss +36 -36
  98. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_default-pair.scss +21 -21
  99. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_default.scss +22 -22
  100. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_double-string.scss +21 -21
  101. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/resolution/_resolution.scss +60 -60
  102. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/single/_default.scss +13 -13
  103. data/_sass/minimal-mistakes/vendor/breakpoint/parsers/triple/_default.scss +18 -18
  104. data/_sass/minimal-mistakes/vendor/font-awesome/_animated.scss +34 -34
  105. data/_sass/minimal-mistakes/vendor/font-awesome/_bordered-pulled.scss +25 -25
  106. data/_sass/minimal-mistakes/vendor/font-awesome/_core.scss +12 -12
  107. data/_sass/minimal-mistakes/vendor/font-awesome/_fixed-width.scss +6 -6
  108. data/_sass/minimal-mistakes/vendor/font-awesome/_font-awesome.scss +18 -18
  109. data/_sass/minimal-mistakes/vendor/font-awesome/_icons.scss +789 -789
  110. data/_sass/minimal-mistakes/vendor/font-awesome/_larger.scss +13 -13
  111. data/_sass/minimal-mistakes/vendor/font-awesome/_list.scss +19 -19
  112. data/_sass/minimal-mistakes/vendor/font-awesome/_mixins.scss +60 -60
  113. data/_sass/minimal-mistakes/vendor/font-awesome/_path.scss +15 -15
  114. data/_sass/minimal-mistakes/vendor/font-awesome/_rotated-flipped.scss +20 -20
  115. data/_sass/minimal-mistakes/vendor/font-awesome/_screen-reader.scss +5 -5
  116. data/_sass/minimal-mistakes/vendor/font-awesome/_stacked.scss +20 -20
  117. data/_sass/minimal-mistakes/vendor/font-awesome/_variables.scss +800 -800
  118. data/_sass/minimal-mistakes/vendor/magnific-popup/_magnific-popup.scss +649 -649
  119. data/_sass/minimal-mistakes/vendor/magnific-popup/_settings.scss +45 -45
  120. data/_sass/minimal-mistakes/vendor/susy/_susy-prefix.scss +13 -13
  121. data/_sass/minimal-mistakes/vendor/susy/_susy.scss +5 -5
  122. data/_sass/minimal-mistakes/vendor/susy/plugins/_svg-grid.scss +5 -5
  123. data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_prefix.scss +7 -7
  124. data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-api.scss +114 -114
  125. data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-grid-math.scss +67 -67
  126. data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-settings.scss +14 -14
  127. data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-unprefix.scss +18 -18
  128. data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-utilities.scss +133 -133
  129. data/_sass/minimal-mistakes/vendor/susy/susy/_api.scss +318 -318
  130. data/_sass/minimal-mistakes/vendor/susy/susy/_normalize.scss +261 -261
  131. data/_sass/minimal-mistakes/vendor/susy/susy/_parse.scss +163 -163
  132. data/_sass/minimal-mistakes/vendor/susy/susy/_settings.scss +329 -329
  133. data/_sass/minimal-mistakes/vendor/susy/susy/_su-math.scss +441 -441
  134. data/_sass/minimal-mistakes/vendor/susy/susy/_su-validate.scss +213 -213
  135. data/_sass/minimal-mistakes/vendor/susy/susy/_syntax-helpers.scss +191 -191
  136. data/_sass/minimal-mistakes/vendor/susy/susy/_unprefix.scss +56 -56
  137. data/_sass/minimal-mistakes/vendor/susy/susy/_utilities.scss +167 -167
  138. data/assets/css/main.scss +7 -7
  139. data/assets/fonts/fontawesome-webfont.svg +2671 -2671
  140. data/assets/js/_main.js +72 -72
  141. data/assets/js/main.min.js +1 -1
  142. data/assets/js/plugins/jquery.fitvids.js +81 -81
  143. data/assets/js/plugins/jquery.greedy-navigation.js +77 -77
  144. metadata +8 -3
@@ -1,163 +1,163 @@
1
- /// Shorthand Syntax Parser
2
- /// =======================
3
- /// The syntax parser converts [shorthand syntax][short]
4
- /// into a map of settings that can be compared/merged with
5
- /// other config maps and global setting.
6
- ///
7
- /// [short]: b-api.html
8
- ///
9
- /// @group x-parser
10
-
11
-
12
-
13
- // Parse
14
- // -----
15
- /// The `parse` function provides all the syntax-sugar in Susy,
16
- /// converting user shorthand
17
- /// into a usable map of keys and values
18
- /// that can be normalized and passed to Su.
19
- ///
20
- /// @group x-parser
21
- /// @see $susy
22
- ///
23
- /// @param {list} $shorthand -
24
- /// Shorthand expression to define the width of the span,
25
- /// optionally containing:
26
- /// - a count, length, or column-list span;
27
- /// - `at $n`, `first`, or `last` location on asymmetrical grids;
28
- /// - `narrow`, `wide`, or `wider` for optionally spreading
29
- /// across adjacent gutters;
30
- /// - `of $n <spread>` for available grid columns
31
- /// and spread of the container
32
- /// (span counts like `of 6` are only valid
33
- /// in the context of symmetrical grids);
34
- /// - and `set-gutters $n` to override global gutter settings
35
- /// @param {bool} $context-only [false] -
36
- /// Allow the parser to ignore span and span-spread values,
37
- /// only parsing context and container-spread.
38
- /// This makes it possible to accept spanless values,
39
- /// like the `gutters()` syntax.
40
- /// When parsing context-only,
41
- /// the `of` indicator is optional.
42
- ///
43
- /// @return {map} -
44
- /// Map of span and grid settings
45
- /// parsed from shorthand input –
46
- /// including all the properties available globally –
47
- /// `columns`, `gutters`, `spread`, `container-spread` –
48
- /// along with the span-specific properties
49
- /// `span`, and `location`.
50
- ///
51
- /// @throw
52
- /// when a shorthand value is not recognized
53
- @function susy-parse(
54
- $shorthand,
55
- $context-only: false
56
- ) {
57
- $parse-error: 'Unknown shorthand property:';
58
- $options: (
59
- 'first': 'location',
60
- 'last': 'location',
61
- 'alpha': 'location',
62
- 'omega': 'location',
63
- 'narrow': 'spread',
64
- 'wide': 'spread',
65
- 'wider': 'spread',
66
- );
67
-
68
- $return: ();
69
- $span: null;
70
- $columns: null;
71
-
72
- $of: null;
73
- $next: false;
74
-
75
- // Allow context-only shorthand, without span
76
- @if ($context-only) and (not index($shorthand, 'of')) {
77
- @if su-valid-columns($shorthand, 'fail-silent') {
78
- $shorthand: 'of' $shorthand;
79
- } @else {
80
- $shorthand: join('of', $shorthand);
81
- }
82
- }
83
-
84
- // loop through the shorthand list
85
- @for $i from 1 through length($shorthand) {
86
- $item: nth($shorthand, $i);
87
- $type: type-of($item);
88
- $error: false;
89
- $details: '[#{$type}] `#{$item}`';
90
-
91
- // if we know what's supposed to be coming next…
92
- @if $next {
93
-
94
- // Add to the return map
95
- $return: map-merge($return, ($next: $item));
96
-
97
- // Reset next to `false`
98
- $next: false;
99
-
100
- } @else { // If we don't know what's supposed to be coming…
101
-
102
- // Keywords…
103
- @if ($type == 'string') {
104
- // Check the map for keywords…
105
- @if map-has-key($options, $item) {
106
- $setting: map-get($options, $item);
107
-
108
- // Spread could be on the span or the container…
109
- @if ($setting == 'spread') and ($of) {
110
- $return: map-merge($return, ('container-spread': $item));
111
- } @else {
112
- $return: map-merge($return, ($setting: $item));
113
- }
114
-
115
- } @else if ($item == 'all') {
116
- // `All` is a span shortcut
117
- $span: 'all';
118
- } @else if ($item == 'at') {
119
- // Some keywords setup what's next…
120
- $next: 'location';
121
- } @else if ($item == 'set-gutters') {
122
- $next: 'gutters';
123
- } @else if ($item == 'of') {
124
- $of: true;
125
- } @else {
126
- $error: true;
127
- }
128
-
129
- } @else if ($type == 'number') or ($type == 'list') { // Numbers & lists…
130
-
131
- @if not ($span or $of) {
132
- // We don't have a span, and we're not expecting context…
133
- $span: $item;
134
- } @else if ($of) and (not $columns) {
135
- // We are expecting context…
136
- $columns: $item;
137
- } @else {
138
- $error: true;
139
- }
140
-
141
- } @else {
142
- $error: true;
143
- }
144
- }
145
-
146
- @if $error {
147
- @return _susy-error('#{$parse-error} #{$details}', 'susy-parse');
148
- }
149
- }
150
-
151
- // If we have span, merge it in
152
- @if $span {
153
- $return: map-merge($return, ('span': $span));
154
- }
155
-
156
- // If we have columns, merge them in
157
- @if $columns {
158
- $return: map-merge($return, ('columns': $columns));
159
- }
160
-
161
- // Return the map of settings…
162
- @return $return;
163
- }
1
+ /// Shorthand Syntax Parser
2
+ /// =======================
3
+ /// The syntax parser converts [shorthand syntax][short]
4
+ /// into a map of settings that can be compared/merged with
5
+ /// other config maps and global setting.
6
+ ///
7
+ /// [short]: b-api.html
8
+ ///
9
+ /// @group x-parser
10
+
11
+
12
+
13
+ // Parse
14
+ // -----
15
+ /// The `parse` function provides all the syntax-sugar in Susy,
16
+ /// converting user shorthand
17
+ /// into a usable map of keys and values
18
+ /// that can be normalized and passed to Su.
19
+ ///
20
+ /// @group x-parser
21
+ /// @see $susy
22
+ ///
23
+ /// @param {list} $shorthand -
24
+ /// Shorthand expression to define the width of the span,
25
+ /// optionally containing:
26
+ /// - a count, length, or column-list span;
27
+ /// - `at $n`, `first`, or `last` location on asymmetrical grids;
28
+ /// - `narrow`, `wide`, or `wider` for optionally spreading
29
+ /// across adjacent gutters;
30
+ /// - `of $n <spread>` for available grid columns
31
+ /// and spread of the container
32
+ /// (span counts like `of 6` are only valid
33
+ /// in the context of symmetrical grids);
34
+ /// - and `set-gutters $n` to override global gutter settings
35
+ /// @param {bool} $context-only [false] -
36
+ /// Allow the parser to ignore span and span-spread values,
37
+ /// only parsing context and container-spread.
38
+ /// This makes it possible to accept spanless values,
39
+ /// like the `gutters()` syntax.
40
+ /// When parsing context-only,
41
+ /// the `of` indicator is optional.
42
+ ///
43
+ /// @return {map} -
44
+ /// Map of span and grid settings
45
+ /// parsed from shorthand input –
46
+ /// including all the properties available globally –
47
+ /// `columns`, `gutters`, `spread`, `container-spread` –
48
+ /// along with the span-specific properties
49
+ /// `span`, and `location`.
50
+ ///
51
+ /// @throw
52
+ /// when a shorthand value is not recognized
53
+ @function susy-parse(
54
+ $shorthand,
55
+ $context-only: false
56
+ ) {
57
+ $parse-error: 'Unknown shorthand property:';
58
+ $options: (
59
+ 'first': 'location',
60
+ 'last': 'location',
61
+ 'alpha': 'location',
62
+ 'omega': 'location',
63
+ 'narrow': 'spread',
64
+ 'wide': 'spread',
65
+ 'wider': 'spread',
66
+ );
67
+
68
+ $return: ();
69
+ $span: null;
70
+ $columns: null;
71
+
72
+ $of: null;
73
+ $next: false;
74
+
75
+ // Allow context-only shorthand, without span
76
+ @if ($context-only) and (not index($shorthand, 'of')) {
77
+ @if su-valid-columns($shorthand, 'fail-silent') {
78
+ $shorthand: 'of' $shorthand;
79
+ } @else {
80
+ $shorthand: join('of', $shorthand);
81
+ }
82
+ }
83
+
84
+ // loop through the shorthand list
85
+ @for $i from 1 through length($shorthand) {
86
+ $item: nth($shorthand, $i);
87
+ $type: type-of($item);
88
+ $error: false;
89
+ $details: '[#{$type}] `#{$item}`';
90
+
91
+ // if we know what's supposed to be coming next…
92
+ @if $next {
93
+
94
+ // Add to the return map
95
+ $return: map-merge($return, ($next: $item));
96
+
97
+ // Reset next to `false`
98
+ $next: false;
99
+
100
+ } @else { // If we don't know what's supposed to be coming…
101
+
102
+ // Keywords…
103
+ @if ($type == 'string') {
104
+ // Check the map for keywords…
105
+ @if map-has-key($options, $item) {
106
+ $setting: map-get($options, $item);
107
+
108
+ // Spread could be on the span or the container…
109
+ @if ($setting == 'spread') and ($of) {
110
+ $return: map-merge($return, ('container-spread': $item));
111
+ } @else {
112
+ $return: map-merge($return, ($setting: $item));
113
+ }
114
+
115
+ } @else if ($item == 'all') {
116
+ // `All` is a span shortcut
117
+ $span: 'all';
118
+ } @else if ($item == 'at') {
119
+ // Some keywords setup what's next…
120
+ $next: 'location';
121
+ } @else if ($item == 'set-gutters') {
122
+ $next: 'gutters';
123
+ } @else if ($item == 'of') {
124
+ $of: true;
125
+ } @else {
126
+ $error: true;
127
+ }
128
+
129
+ } @else if ($type == 'number') or ($type == 'list') { // Numbers & lists…
130
+
131
+ @if not ($span or $of) {
132
+ // We don't have a span, and we're not expecting context…
133
+ $span: $item;
134
+ } @else if ($of) and (not $columns) {
135
+ // We are expecting context…
136
+ $columns: $item;
137
+ } @else {
138
+ $error: true;
139
+ }
140
+
141
+ } @else {
142
+ $error: true;
143
+ }
144
+ }
145
+
146
+ @if $error {
147
+ @return _susy-error('#{$parse-error} #{$details}', 'susy-parse');
148
+ }
149
+ }
150
+
151
+ // If we have span, merge it in
152
+ @if $span {
153
+ $return: map-merge($return, ('span': $span));
154
+ }
155
+
156
+ // If we have columns, merge them in
157
+ @if $columns {
158
+ $return: map-merge($return, ('columns': $columns));
159
+ }
160
+
161
+ // Return the map of settings…
162
+ @return $return;
163
+ }
@@ -1,329 +1,329 @@
1
- /// Susy3 Configuration
2
- /// ===================
3
- /// Susy3 has 4 core settings, in a single settings map.
4
- /// You'll notice a few differences from Susy2:
5
- ///
6
- /// **Columns** no longer accept a single number, like `12`,
7
- /// but use a syntax more similar to the new
8
- /// CSS [grid-template-columns][columns] –
9
- /// a list of relative sizes for each column on the grid.
10
- /// Unitless numbers in Susy act very similar to `fr` units in CSS,
11
- /// and the `susy-repeat()` function (similar to the css `repeat()`)
12
- /// helps quickly establish equal-width columns.
13
- ///
14
- /// [columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
15
- ///
16
- /// - `susy-repeat(12)` will create 12 fluid, equal-width columns
17
- /// - `susy-repeat(6, 120px)` will create 6 equal `120px`-wide columns
18
- /// - `120px susy-repeat(4) 120px` will create 6 columns,
19
- /// the first and last are `120px`,
20
- /// while the middle 4 are equal fractions of the remainder.
21
- /// Susy will output `calc()` values in order to achieve this.
22
- ///
23
- /// **Gutters** haven't changed –
24
- /// a single fraction or explicit width –
25
- /// but the `calc()` output feature
26
- /// means you can now use any combination of units and fractions
27
- /// to create static-gutters on a fluid grid, etc.
28
- ///
29
- /// **Spread** existed in the Susy2 API as a span option,
30
- /// and was otherwise handled behind the scenes.
31
- /// Now we're giving you full control over all spread issues.
32
- /// You can find a more [detailed explanation of spread on the blog][spread].
33
- ///
34
- /// [spread]: http://oddbird.net/2017/06/13/susy-spread/
35
- ///
36
- /// You can access your global settings at any time
37
- /// with the `susy-settings()` function,
38
- /// or grab a single setting from the global scope
39
- /// with `susy-get('columns')`, `susy-get('gutters')` etc.
40
- ///
41
- /// @group a-config
42
- /// @link http://oddbird.net/2017/06/13/susy-spread/
43
- /// Article: Understanding Spread in Susy3
44
- ///
45
- /// @see $susy
46
- /// @see susy-settings
47
- /// @see susy-get
48
-
49
-
50
-
51
- // Susy
52
- // ----
53
- /// The grid is defined in a single map variable,
54
- /// with four initial properties:
55
- /// `columns`, `gutters`, `spread` and `container-spread`.
56
- /// Anything you put in the root `$susy` variable map
57
- /// will be treated as a global project default.
58
- /// You can create similar configuration maps
59
- /// under different variable names,
60
- /// to override the defaults as-needed.
61
- ///
62
- /// @group a-config
63
- /// @type Map
64
- ///
65
- /// @see $_susy-defaults
66
- /// @see {function} susy-repeat
67
- /// @link
68
- /// https://codepen.io/mirisuzanne/pen/EgmJJp?editors=1100
69
- /// Spread examples on CodePen
70
- ///
71
- /// @prop {list} columns -
72
- /// Columns are described by a list of numbers,
73
- /// representing the relative width of each column.
74
- /// The syntax is a simplified version of CSS native
75
- /// `grid-template-columns`,
76
- /// expecting a list of grid-column widths.
77
- /// Unitless numbers create fractional fluid columns
78
- /// (similar to the CSS-native `fr` unit),
79
- /// while length values (united numbers)
80
- /// are used to define static columns.
81
- /// You can mix-and match units and fractions,
82
- /// to create a mixed grid.
83
- /// Susy will generate `calc()` values when necessary,
84
- /// to make all your units work together.
85
- ///
86
- /// Use the `susy-repeat($count, $value)` function
87
- /// to more easily repetative columns,
88
- /// similar to the CSS-native `repeat()`.
89
- ///
90
- /// - `susy-repeat(8)`:
91
- /// an 8-column, symmetrical, fluid grid.
92
- /// <br />Identical to `(1 1 1 1 1 1 1 1)`.
93
- /// - `susy-repeat(6, 8em)`:
94
- /// a 6-column, symmetrical, em-based grid.
95
- /// <br />Identical to `(8em 8em 8em 8em 8em 8em)`.
96
- /// - `(300px susy-repeat(4) 300px)`:
97
- /// a 6-column, asymmetrical, mixed fluid/static grid
98
- /// using `calc()` output.
99
- /// <br />Identical to `(300px 1 1 1 1 300px)`.
100
- ///
101
- /// **NOTE** that `12` is no longer a valid 12-column grid definition,
102
- /// and you must list all the columns individually
103
- /// (or by using the `susy-repeat()` function).
104
- ///
105
- /// @prop {number} gutters -
106
- /// Gutters are defined as a single width,
107
- /// or fluid ratio, similar to the native-CSS
108
- /// `grid-column-gap` syntax.
109
- /// Similar to columns,
110
- /// gutters can use any valid CSS length unit,
111
- /// or unitless numbers to define a relative fraction.
112
- ///
113
- /// - `0.5`:
114
- /// a fluid gutter, half the size of a single-fraction column.
115
- /// - `1em`:
116
- /// a static gutter, `1em` wide.
117
- ///
118
- /// Mix static gutters with fluid columns, or vice versa,
119
- /// and Susy will generate the required `calc()` to make it work.
120
- ///
121
- /// @prop {string} spread [narrow] -
122
- /// Spread of an element across adjacent gutters:
123
- /// either `narrow` (none), `wide` (one), or `wider` (two)
124
- ///
125
- /// - Both spread settings default to `narrow`,
126
- /// the most common use-case.
127
- /// A `narrow` spread only has gutters *between* columns
128
- /// (one less gutter than columns).
129
- /// This is how all css-native grids work,
130
- /// and most margin-based grid systems.
131
- /// - A `wide` spread includes the same number of gutters as columns,
132
- /// spanning across a single side-gutter.
133
- /// This is how most padding-based grid systems often work,
134
- /// and is also useful for pushing and pulling elements into place.
135
- /// - The rare `wider` spread includes gutters
136
- /// on both sides of the column-span
137
- /// (one more gutters than columns).
138
- ///
139
- /// @prop {string} container-spread [narrow] -
140
- /// Spread of a container around adjacent gutters:
141
- /// either `narrow` (none), `wide` (one), or `wider` (two).
142
- /// See `spread` property for details.
143
- ///
144
- /// @since 3.0.0-beta.1 -
145
- /// `columns` setting no longer accepts numbers
146
- /// (e.g. `12`) for symmetrical fluid grids,
147
- /// or the initial `12 x 120px` syntax for
148
- /// symmetrical fixed-unit grids.
149
- /// Use `susy-repeat(12)` or `susy-repeat(12, 120px)` instead.
150
- ///
151
- /// @example scss - default values
152
- /// // 4 symmetrical, fluid columns
153
- /// // gutters are 1/4 the size of a column
154
- /// // elements span 1 less gutter than columns
155
- /// // containers span 1 less gutter as well
156
- /// $susy: (
157
- /// 'columns': susy-repeat(4),
158
- /// 'gutters': 0.25,
159
- /// 'spread': 'narrow',
160
- /// 'container-spread': 'narrow',
161
- /// );
162
- ///
163
- /// @example scss - inside-static gutters
164
- /// // 6 symmetrical, fluid columns…
165
- /// // gutters are static, triggering calc()…
166
- /// // elements span equal columns & gutters…
167
- /// // containers span equal columns & gutters…
168
- /// $susy: (
169
- /// 'columns': susy-repeat(6),
170
- /// 'gutters': 0.5em,
171
- /// 'spread': 'wide',
172
- /// 'container-spread': 'wide',
173
- /// );
174
- $susy: () !default;
175
-
176
-
177
-
178
- // Susy Repeat
179
- // -----------
180
- /// Similar to the `repeat(<count>, <value>)` function
181
- /// that is available in native CSS Grid templates,
182
- /// the `susy-repeat()` function helps generate repetative layouts
183
- /// by repeating any value a given number of times.
184
- /// Where Susy previously allowed `8` as a column definition
185
- /// for 8 equal columns, you should now use `susy-repeat(8)`.
186
- ///
187
- /// @group a-config
188
- ///
189
- /// @param {integer} $count -
190
- /// The number of repetitions, e.g. `12` for a 12-column grid.
191
- /// @param {*} $value [1] -
192
- /// The value to be repeated.
193
- /// Technically any value can be repeated here,
194
- /// but the function exists to repeat column-width descriptions:
195
- /// e.g. the default `1` for single-fraction fluid columns,
196
- /// `5em` for a static column,
197
- /// or even `5em 120px` if you are alternating column widths.
198
- ///
199
- /// @return {list} -
200
- /// List of repeated values
201
- ///
202
- /// @example scss
203
- /// // 12 column grid, with 5em columns
204
- /// $susy: (
205
- /// columns: susy-repeat(12, 5em),
206
- /// );
207
- ///
208
- /// @example scss
209
- /// // asymmetrical 5-column grid
210
- /// $susy: (
211
- /// columns: 20px susy-repeat(3, 100px) 20px,
212
- /// );
213
- ///
214
- /// /* result: #{susy-get('columns')} */
215
- @function susy-repeat(
216
- $count,
217
- $value: 1
218
- ) {
219
- $return: ();
220
-
221
- @for $i from 1 through $count {
222
- $return: join($return, $value);
223
- }
224
-
225
- @return $return;
226
- }
227
-
228
-
229
-
230
- // Susy Defaults
231
- // -------------
232
- /// Configuration map of Susy factory defaults.
233
- /// Do not override this map directly –
234
- /// use `$susy` for user and project setting overrides.
235
- ///
236
- /// @access private
237
- /// @type Map
238
- ///
239
- /// @see $susy
240
- ///
241
- /// @prop {number | list} columns [susy-repeat(4)]
242
- /// @prop {number} gutters [0.25]
243
- /// @prop {string} spread ['narrow']
244
- /// @prop {string} container-spread ['narrow']
245
- $_susy-defaults: (
246
- 'columns': susy-repeat(4),
247
- 'gutters': 0.25,
248
- 'spread': 'narrow',
249
- 'container-spread': 'narrow',
250
- );
251
-
252
-
253
-
254
- // Susy Settings
255
- // -------------
256
- /// Return a combined map of Susy settings,
257
- /// based on the factory defaults (`$_susy-defaults`),
258
- /// user-defined project configuration (`$susy`),
259
- /// and any local overrides required –
260
- /// such as a configuration map passed into a function.
261
- ///
262
- /// @group a-config
263
- ///
264
- /// @param {maps} $overrides… -
265
- /// Optional map override of global configuration settings.
266
- /// See `$susy` above for properties.
267
- ///
268
- /// @return {map} -
269
- /// Combined map of Susy configuration settings,
270
- /// in order of specificity:
271
- /// any `$overrides...`,
272
- /// then `$susy` project settings,
273
- /// and finally the `$_susy-defaults`
274
- ///
275
- /// @example scss - global settings
276
- /// @each $key, $value in susy-settings() {
277
- /// /* #{$key}: #{$value} */
278
- /// }
279
- ///
280
- /// @example scss - local settings
281
- /// $local: ('columns': 1 2 3 5 8);
282
- ///
283
- /// @each $key, $value in susy-settings($local) {
284
- /// /* #{$key}: #{$value} */
285
- /// }
286
- @function susy-settings(
287
- $overrides...
288
- ) {
289
- $settings: map-merge($_susy-defaults, $susy);
290
-
291
- @each $config in $overrides {
292
- $settings: map-merge($settings, $config);
293
- }
294
-
295
- @return $settings;
296
- }
297
-
298
-
299
-
300
- // Susy Get
301
- // --------
302
- /// Return the current global value of any Susy setting
303
- ///
304
- /// @group a-config
305
- ///
306
- /// @param {string} $key -
307
- /// Setting to retrieve from the configuration.
308
- ///
309
- /// @return {*} -
310
- /// Value mapped to `$key` in the configuration maps,
311
- /// in order of specificity:
312
- /// `$susy`, then `$_susy-defaults`
313
- ///
314
- /// @example scss -
315
- /// /* columns: #{susy-get('columns')} */
316
- /// /* gutters: #{susy-get('gutters')} */
317
- @function susy-get(
318
- $key
319
- ) {
320
- $settings: susy-settings();
321
-
322
- @if not map-has-key($settings, $key) {
323
- @return _susy-error(
324
- 'There is no Susy setting called `#{$key}`',
325
- 'susy-get');
326
- }
327
-
328
- @return map-get($settings, $key);
329
- }
1
+ /// Susy3 Configuration
2
+ /// ===================
3
+ /// Susy3 has 4 core settings, in a single settings map.
4
+ /// You'll notice a few differences from Susy2:
5
+ ///
6
+ /// **Columns** no longer accept a single number, like `12`,
7
+ /// but use a syntax more similar to the new
8
+ /// CSS [grid-template-columns][columns] –
9
+ /// a list of relative sizes for each column on the grid.
10
+ /// Unitless numbers in Susy act very similar to `fr` units in CSS,
11
+ /// and the `susy-repeat()` function (similar to the css `repeat()`)
12
+ /// helps quickly establish equal-width columns.
13
+ ///
14
+ /// [columns]: https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
15
+ ///
16
+ /// - `susy-repeat(12)` will create 12 fluid, equal-width columns
17
+ /// - `susy-repeat(6, 120px)` will create 6 equal `120px`-wide columns
18
+ /// - `120px susy-repeat(4) 120px` will create 6 columns,
19
+ /// the first and last are `120px`,
20
+ /// while the middle 4 are equal fractions of the remainder.
21
+ /// Susy will output `calc()` values in order to achieve this.
22
+ ///
23
+ /// **Gutters** haven't changed –
24
+ /// a single fraction or explicit width –
25
+ /// but the `calc()` output feature
26
+ /// means you can now use any combination of units and fractions
27
+ /// to create static-gutters on a fluid grid, etc.
28
+ ///
29
+ /// **Spread** existed in the Susy2 API as a span option,
30
+ /// and was otherwise handled behind the scenes.
31
+ /// Now we're giving you full control over all spread issues.
32
+ /// You can find a more [detailed explanation of spread on the blog][spread].
33
+ ///
34
+ /// [spread]: http://oddbird.net/2017/06/13/susy-spread/
35
+ ///
36
+ /// You can access your global settings at any time
37
+ /// with the `susy-settings()` function,
38
+ /// or grab a single setting from the global scope
39
+ /// with `susy-get('columns')`, `susy-get('gutters')` etc.
40
+ ///
41
+ /// @group a-config
42
+ /// @link http://oddbird.net/2017/06/13/susy-spread/
43
+ /// Article: Understanding Spread in Susy3
44
+ ///
45
+ /// @see $susy
46
+ /// @see susy-settings
47
+ /// @see susy-get
48
+
49
+
50
+
51
+ // Susy
52
+ // ----
53
+ /// The grid is defined in a single map variable,
54
+ /// with four initial properties:
55
+ /// `columns`, `gutters`, `spread` and `container-spread`.
56
+ /// Anything you put in the root `$susy` variable map
57
+ /// will be treated as a global project default.
58
+ /// You can create similar configuration maps
59
+ /// under different variable names,
60
+ /// to override the defaults as-needed.
61
+ ///
62
+ /// @group a-config
63
+ /// @type Map
64
+ ///
65
+ /// @see $_susy-defaults
66
+ /// @see {function} susy-repeat
67
+ /// @link
68
+ /// https://codepen.io/mirisuzanne/pen/EgmJJp?editors=1100
69
+ /// Spread examples on CodePen
70
+ ///
71
+ /// @prop {list} columns -
72
+ /// Columns are described by a list of numbers,
73
+ /// representing the relative width of each column.
74
+ /// The syntax is a simplified version of CSS native
75
+ /// `grid-template-columns`,
76
+ /// expecting a list of grid-column widths.
77
+ /// Unitless numbers create fractional fluid columns
78
+ /// (similar to the CSS-native `fr` unit),
79
+ /// while length values (united numbers)
80
+ /// are used to define static columns.
81
+ /// You can mix-and match units and fractions,
82
+ /// to create a mixed grid.
83
+ /// Susy will generate `calc()` values when necessary,
84
+ /// to make all your units work together.
85
+ ///
86
+ /// Use the `susy-repeat($count, $value)` function
87
+ /// to more easily repetative columns,
88
+ /// similar to the CSS-native `repeat()`.
89
+ ///
90
+ /// - `susy-repeat(8)`:
91
+ /// an 8-column, symmetrical, fluid grid.
92
+ /// <br />Identical to `(1 1 1 1 1 1 1 1)`.
93
+ /// - `susy-repeat(6, 8em)`:
94
+ /// a 6-column, symmetrical, em-based grid.
95
+ /// <br />Identical to `(8em 8em 8em 8em 8em 8em)`.
96
+ /// - `(300px susy-repeat(4) 300px)`:
97
+ /// a 6-column, asymmetrical, mixed fluid/static grid
98
+ /// using `calc()` output.
99
+ /// <br />Identical to `(300px 1 1 1 1 300px)`.
100
+ ///
101
+ /// **NOTE** that `12` is no longer a valid 12-column grid definition,
102
+ /// and you must list all the columns individually
103
+ /// (or by using the `susy-repeat()` function).
104
+ ///
105
+ /// @prop {number} gutters -
106
+ /// Gutters are defined as a single width,
107
+ /// or fluid ratio, similar to the native-CSS
108
+ /// `grid-column-gap` syntax.
109
+ /// Similar to columns,
110
+ /// gutters can use any valid CSS length unit,
111
+ /// or unitless numbers to define a relative fraction.
112
+ ///
113
+ /// - `0.5`:
114
+ /// a fluid gutter, half the size of a single-fraction column.
115
+ /// - `1em`:
116
+ /// a static gutter, `1em` wide.
117
+ ///
118
+ /// Mix static gutters with fluid columns, or vice versa,
119
+ /// and Susy will generate the required `calc()` to make it work.
120
+ ///
121
+ /// @prop {string} spread [narrow] -
122
+ /// Spread of an element across adjacent gutters:
123
+ /// either `narrow` (none), `wide` (one), or `wider` (two)
124
+ ///
125
+ /// - Both spread settings default to `narrow`,
126
+ /// the most common use-case.
127
+ /// A `narrow` spread only has gutters *between* columns
128
+ /// (one less gutter than columns).
129
+ /// This is how all css-native grids work,
130
+ /// and most margin-based grid systems.
131
+ /// - A `wide` spread includes the same number of gutters as columns,
132
+ /// spanning across a single side-gutter.
133
+ /// This is how most padding-based grid systems often work,
134
+ /// and is also useful for pushing and pulling elements into place.
135
+ /// - The rare `wider` spread includes gutters
136
+ /// on both sides of the column-span
137
+ /// (one more gutters than columns).
138
+ ///
139
+ /// @prop {string} container-spread [narrow] -
140
+ /// Spread of a container around adjacent gutters:
141
+ /// either `narrow` (none), `wide` (one), or `wider` (two).
142
+ /// See `spread` property for details.
143
+ ///
144
+ /// @since 3.0.0-beta.1 -
145
+ /// `columns` setting no longer accepts numbers
146
+ /// (e.g. `12`) for symmetrical fluid grids,
147
+ /// or the initial `12 x 120px` syntax for
148
+ /// symmetrical fixed-unit grids.
149
+ /// Use `susy-repeat(12)` or `susy-repeat(12, 120px)` instead.
150
+ ///
151
+ /// @example scss - default values
152
+ /// // 4 symmetrical, fluid columns
153
+ /// // gutters are 1/4 the size of a column
154
+ /// // elements span 1 less gutter than columns
155
+ /// // containers span 1 less gutter as well
156
+ /// $susy: (
157
+ /// 'columns': susy-repeat(4),
158
+ /// 'gutters': 0.25,
159
+ /// 'spread': 'narrow',
160
+ /// 'container-spread': 'narrow',
161
+ /// );
162
+ ///
163
+ /// @example scss - inside-static gutters
164
+ /// // 6 symmetrical, fluid columns…
165
+ /// // gutters are static, triggering calc()…
166
+ /// // elements span equal columns & gutters…
167
+ /// // containers span equal columns & gutters…
168
+ /// $susy: (
169
+ /// 'columns': susy-repeat(6),
170
+ /// 'gutters': 0.5em,
171
+ /// 'spread': 'wide',
172
+ /// 'container-spread': 'wide',
173
+ /// );
174
+ $susy: () !default;
175
+
176
+
177
+
178
+ // Susy Repeat
179
+ // -----------
180
+ /// Similar to the `repeat(<count>, <value>)` function
181
+ /// that is available in native CSS Grid templates,
182
+ /// the `susy-repeat()` function helps generate repetative layouts
183
+ /// by repeating any value a given number of times.
184
+ /// Where Susy previously allowed `8` as a column definition
185
+ /// for 8 equal columns, you should now use `susy-repeat(8)`.
186
+ ///
187
+ /// @group a-config
188
+ ///
189
+ /// @param {integer} $count -
190
+ /// The number of repetitions, e.g. `12` for a 12-column grid.
191
+ /// @param {*} $value [1] -
192
+ /// The value to be repeated.
193
+ /// Technically any value can be repeated here,
194
+ /// but the function exists to repeat column-width descriptions:
195
+ /// e.g. the default `1` for single-fraction fluid columns,
196
+ /// `5em` for a static column,
197
+ /// or even `5em 120px` if you are alternating column widths.
198
+ ///
199
+ /// @return {list} -
200
+ /// List of repeated values
201
+ ///
202
+ /// @example scss
203
+ /// // 12 column grid, with 5em columns
204
+ /// $susy: (
205
+ /// columns: susy-repeat(12, 5em),
206
+ /// );
207
+ ///
208
+ /// @example scss
209
+ /// // asymmetrical 5-column grid
210
+ /// $susy: (
211
+ /// columns: 20px susy-repeat(3, 100px) 20px,
212
+ /// );
213
+ ///
214
+ /// /* result: #{susy-get('columns')} */
215
+ @function susy-repeat(
216
+ $count,
217
+ $value: 1
218
+ ) {
219
+ $return: ();
220
+
221
+ @for $i from 1 through $count {
222
+ $return: join($return, $value);
223
+ }
224
+
225
+ @return $return;
226
+ }
227
+
228
+
229
+
230
+ // Susy Defaults
231
+ // -------------
232
+ /// Configuration map of Susy factory defaults.
233
+ /// Do not override this map directly –
234
+ /// use `$susy` for user and project setting overrides.
235
+ ///
236
+ /// @access private
237
+ /// @type Map
238
+ ///
239
+ /// @see $susy
240
+ ///
241
+ /// @prop {number | list} columns [susy-repeat(4)]
242
+ /// @prop {number} gutters [0.25]
243
+ /// @prop {string} spread ['narrow']
244
+ /// @prop {string} container-spread ['narrow']
245
+ $_susy-defaults: (
246
+ 'columns': susy-repeat(4),
247
+ 'gutters': 0.25,
248
+ 'spread': 'narrow',
249
+ 'container-spread': 'narrow',
250
+ );
251
+
252
+
253
+
254
+ // Susy Settings
255
+ // -------------
256
+ /// Return a combined map of Susy settings,
257
+ /// based on the factory defaults (`$_susy-defaults`),
258
+ /// user-defined project configuration (`$susy`),
259
+ /// and any local overrides required –
260
+ /// such as a configuration map passed into a function.
261
+ ///
262
+ /// @group a-config
263
+ ///
264
+ /// @param {maps} $overrides… -
265
+ /// Optional map override of global configuration settings.
266
+ /// See `$susy` above for properties.
267
+ ///
268
+ /// @return {map} -
269
+ /// Combined map of Susy configuration settings,
270
+ /// in order of specificity:
271
+ /// any `$overrides...`,
272
+ /// then `$susy` project settings,
273
+ /// and finally the `$_susy-defaults`
274
+ ///
275
+ /// @example scss - global settings
276
+ /// @each $key, $value in susy-settings() {
277
+ /// /* #{$key}: #{$value} */
278
+ /// }
279
+ ///
280
+ /// @example scss - local settings
281
+ /// $local: ('columns': 1 2 3 5 8);
282
+ ///
283
+ /// @each $key, $value in susy-settings($local) {
284
+ /// /* #{$key}: #{$value} */
285
+ /// }
286
+ @function susy-settings(
287
+ $overrides...
288
+ ) {
289
+ $settings: map-merge($_susy-defaults, $susy);
290
+
291
+ @each $config in $overrides {
292
+ $settings: map-merge($settings, $config);
293
+ }
294
+
295
+ @return $settings;
296
+ }
297
+
298
+
299
+
300
+ // Susy Get
301
+ // --------
302
+ /// Return the current global value of any Susy setting
303
+ ///
304
+ /// @group a-config
305
+ ///
306
+ /// @param {string} $key -
307
+ /// Setting to retrieve from the configuration.
308
+ ///
309
+ /// @return {*} -
310
+ /// Value mapped to `$key` in the configuration maps,
311
+ /// in order of specificity:
312
+ /// `$susy`, then `$_susy-defaults`
313
+ ///
314
+ /// @example scss -
315
+ /// /* columns: #{susy-get('columns')} */
316
+ /// /* gutters: #{susy-get('gutters')} */
317
+ @function susy-get(
318
+ $key
319
+ ) {
320
+ $settings: susy-settings();
321
+
322
+ @if not map-has-key($settings, $key) {
323
+ @return _susy-error(
324
+ 'There is no Susy setting called `#{$key}`',
325
+ 'susy-get');
326
+ }
327
+
328
+ @return map-get($settings, $key);
329
+ }