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.
- checksums.yaml +4 -4
- data/CHANGELOG.md +18 -0
- data/LICENSE.txt +20 -20
- data/README.md +1 -2
- data/_includes/analytics-providers/custom.html +2 -2
- data/_includes/analytics-providers/google-universal.html +8 -8
- data/_includes/analytics-providers/google.html +10 -10
- data/_includes/analytics.html +11 -11
- data/_includes/archive-single.html +37 -37
- data/_includes/author-profile-custom-links.html +6 -6
- data/_includes/author-profile.html +241 -241
- data/_includes/base_path +4 -4
- data/_includes/breadcrumbs.html +38 -38
- data/_includes/browser-upgrade.html +2 -2
- data/_includes/category-list.html +25 -25
- data/_includes/comment.html +21 -21
- data/_includes/comments-providers/custom.html +2 -2
- data/_includes/comments-providers/discourse.html +13 -13
- data/_includes/comments-providers/disqus.html +21 -21
- data/_includes/comments-providers/facebook.html +7 -7
- data/_includes/comments-providers/google-plus.html +1 -1
- data/_includes/comments-providers/scripts.html +17 -17
- data/_includes/comments-providers/staticman.html +41 -41
- data/_includes/comments.html +79 -79
- data/_includes/feature_row +49 -49
- data/_includes/figure +12 -12
- data/_includes/footer.html +21 -21
- data/_includes/footer/custom.html +2 -2
- data/_includes/gallery +46 -46
- data/_includes/group-by-array +46 -46
- data/_includes/head.html +18 -18
- data/_includes/head/custom.html +4 -4
- data/_includes/masthead.html +20 -20
- data/_includes/nav_list +46 -46
- data/_includes/page__hero.html +52 -52
- data/_includes/page__hero_video.html +4 -0
- data/_includes/page__taxonomy.html +6 -6
- data/_includes/paginator.html +67 -67
- data/_includes/post_pagination.html +13 -13
- data/_includes/read-time.html +14 -14
- data/_includes/scripts.html +4 -4
- data/_includes/seo.html +145 -145
- data/_includes/sidebar.html +22 -22
- data/_includes/social-share.html +13 -13
- data/_includes/tag-list.html +25 -25
- data/_includes/toc +6 -6
- data/_includes/video +11 -0
- data/_layouts/archive-taxonomy.html +14 -14
- data/_layouts/archive.html +2 -0
- data/_layouts/compress.html +10 -10
- data/_layouts/default.html +28 -28
- data/_layouts/home.html +11 -11
- data/_layouts/single.html +76 -74
- data/_layouts/splash.html +2 -0
- data/_sass/_archive.scss +237 -237
- data/_sass/_footer.scss +79 -79
- data/_sass/_forms.scss +390 -390
- data/_sass/_masthead.scss +52 -52
- data/_sass/_mixins.scss +52 -52
- data/_sass/_navigation.scss +543 -543
- data/_sass/_notices.scss +98 -98
- data/_sass/_page.scss +400 -400
- data/_sass/_print.scss +17 -17
- data/_sass/_reset.scss +186 -186
- data/_sass/_sidebar.scss +230 -230
- data/_sass/_syntax.scss +145 -145
- data/_sass/_tables.scss +37 -37
- data/_sass/_utilities.scss +37 -1
- data/_sass/_variables.scss +127 -127
- data/_sass/vendor/breakpoint/_breakpoint.scss +114 -114
- data/_sass/vendor/breakpoint/_context.scss +94 -94
- data/_sass/vendor/breakpoint/_helpers.scss +151 -151
- data/_sass/vendor/breakpoint/_legacy-settings.scss +49 -49
- data/_sass/vendor/breakpoint/_no-query.scss +15 -15
- data/_sass/vendor/breakpoint/_parsers.scss +215 -215
- data/_sass/vendor/breakpoint/_respond-to.scss +82 -82
- data/_sass/vendor/breakpoint/_settings.scss +70 -70
- data/_sass/vendor/breakpoint/parsers/_double.scss +33 -33
- data/_sass/vendor/breakpoint/parsers/_query.scss +82 -82
- data/_sass/vendor/breakpoint/parsers/_resolution.scss +31 -31
- data/_sass/vendor/breakpoint/parsers/_single.scss +26 -26
- data/_sass/vendor/breakpoint/parsers/_triple.scss +36 -36
- data/_sass/vendor/breakpoint/parsers/double/_default-pair.scss +21 -21
- data/_sass/vendor/breakpoint/parsers/double/_default.scss +22 -22
- data/_sass/vendor/breakpoint/parsers/double/_double-string.scss +21 -21
- data/_sass/vendor/breakpoint/parsers/resolution/_resolution.scss +60 -60
- data/_sass/vendor/breakpoint/parsers/single/_default.scss +13 -13
- data/_sass/vendor/breakpoint/parsers/triple/_default.scss +18 -18
- data/_sass/vendor/font-awesome/_animated.scss +34 -34
- data/_sass/vendor/font-awesome/_bordered-pulled.scss +25 -25
- data/_sass/vendor/font-awesome/_core.scss +12 -12
- data/_sass/vendor/font-awesome/_fixed-width.scss +6 -6
- data/_sass/vendor/font-awesome/_font-awesome.scss +18 -18
- data/_sass/vendor/font-awesome/_icons.scss +789 -789
- data/_sass/vendor/font-awesome/_larger.scss +13 -13
- data/_sass/vendor/font-awesome/_list.scss +19 -19
- data/_sass/vendor/font-awesome/_mixins.scss +60 -60
- data/_sass/vendor/font-awesome/_path.scss +15 -15
- data/_sass/vendor/font-awesome/_rotated-flipped.scss +20 -20
- data/_sass/vendor/font-awesome/_screen-reader.scss +5 -5
- data/_sass/vendor/font-awesome/_stacked.scss +20 -20
- data/_sass/vendor/font-awesome/_variables.scss +800 -800
- data/_sass/vendor/magnific-popup/_settings.scss +45 -45
- data/_sass/vendor/susy/_su.scss +4 -4
- data/_sass/vendor/susy/_susy.scss +4 -4
- data/_sass/vendor/susy/_susyone.scss +4 -4
- data/_sass/vendor/susy/susy/_su.scss +7 -7
- data/_sass/vendor/susy/susy/language/_susy.scss +24 -24
- data/_sass/vendor/susy/susy/language/_susyone.scss +13 -13
- data/_sass/vendor/susy/susy/language/susy/_background.scss +385 -385
- data/_sass/vendor/susy/susy/language/susy/_bleed.scss +200 -200
- data/_sass/vendor/susy/susy/language/susy/_box-sizing.scss +47 -47
- data/_sass/vendor/susy/susy/language/susy/_breakpoint-plugin.scss +185 -185
- data/_sass/vendor/susy/susy/language/susy/_container.scss +81 -81
- data/_sass/vendor/susy/susy/language/susy/_context.scss +36 -36
- data/_sass/vendor/susy/susy/language/susy/_gallery.scss +94 -94
- data/_sass/vendor/susy/susy/language/susy/_grids.scss +64 -64
- data/_sass/vendor/susy/susy/language/susy/_gutters.scss +154 -154
- data/_sass/vendor/susy/susy/language/susy/_isolate.scss +77 -77
- data/_sass/vendor/susy/susy/language/susy/_margins.scss +94 -94
- data/_sass/vendor/susy/susy/language/susy/_padding.scss +74 -74
- data/_sass/vendor/susy/susy/language/susy/_rows.scss +138 -138
- data/_sass/vendor/susy/susy/language/susy/_settings.scss +216 -216
- data/_sass/vendor/susy/susy/language/susy/_span.scss +163 -163
- data/_sass/vendor/susy/susy/language/susy/_validation.scss +16 -16
- data/_sass/vendor/susy/susy/language/susyone/_background.scss +18 -18
- data/_sass/vendor/susy/susy/language/susyone/_functions.scss +377 -377
- data/_sass/vendor/susy/susy/language/susyone/_grid.scss +312 -312
- data/_sass/vendor/susy/susy/language/susyone/_isolation.scss +51 -51
- data/_sass/vendor/susy/susy/language/susyone/_margin.scss +93 -93
- data/_sass/vendor/susy/susy/language/susyone/_media.scss +105 -105
- data/_sass/vendor/susy/susy/language/susyone/_padding.scss +92 -92
- data/_sass/vendor/susy/susy/language/susyone/_settings.scss +60 -60
- data/_sass/vendor/susy/susy/output/_float.scss +9 -9
- data/_sass/vendor/susy/susy/output/_shared.scss +15 -15
- data/_sass/vendor/susy/susy/output/_support.scss +9 -9
- data/_sass/vendor/susy/susy/output/float/_container.scss +16 -16
- data/_sass/vendor/susy/susy/output/float/_end.scss +40 -40
- data/_sass/vendor/susy/susy/output/float/_isolate.scss +22 -22
- data/_sass/vendor/susy/susy/output/float/_span.scss +35 -35
- data/_sass/vendor/susy/susy/output/shared/_background.scss +26 -26
- data/_sass/vendor/susy/susy/output/shared/_container.scss +21 -21
- data/_sass/vendor/susy/susy/output/shared/_direction.scss +42 -42
- data/_sass/vendor/susy/susy/output/shared/_inspect.scss +25 -25
- data/_sass/vendor/susy/susy/output/shared/_margins.scss +23 -23
- data/_sass/vendor/susy/susy/output/shared/_output.scss +14 -14
- data/_sass/vendor/susy/susy/output/shared/_padding.scss +23 -23
- data/_sass/vendor/susy/susy/output/support/_background.scss +58 -58
- data/_sass/vendor/susy/susy/output/support/_box-sizing.scss +19 -19
- data/_sass/vendor/susy/susy/output/support/_clearfix.scss +18 -18
- data/_sass/vendor/susy/susy/output/support/_prefix.scss +19 -19
- data/_sass/vendor/susy/susy/output/support/_rem.scss +22 -22
- data/_sass/vendor/susy/susy/output/support/_support.scss +85 -85
- data/_sass/vendor/susy/susy/su/_grid.scss +103 -103
- data/_sass/vendor/susy/susy/su/_settings.scss +73 -73
- data/_sass/vendor/susy/susy/su/_utilities.scss +111 -111
- data/_sass/vendor/susy/susy/su/_validation.scss +57 -57
- data/assets/css/main.scss +78 -78
- data/assets/fonts/fontawesome-webfont.svg +2671 -2671
- data/assets/js/_main.js +72 -100
- data/assets/js/main.min.js +4 -5
- data/assets/js/plugins/jquery.fitvids.js +81 -81
- data/assets/js/plugins/jquery.greedy-navigation.js +71 -71
- data/assets/js/plugins/jquery.magnific-popup.js +2049 -2049
- data/assets/js/plugins/jquery.smooth-scroll.min.js +8 -8
- data/assets/js/vendor/jquery/jquery-1.12.4.min.js +4 -4
- metadata +7 -6
- data/assets/js/plugins/stickyfill.min.js +0 -8
@@ -1,163 +1,163 @@
|
|
1
|
-
// Span Syntax
|
2
|
-
// ===========
|
3
|
-
|
4
|
-
// Span [mixin]
|
5
|
-
// ------------
|
6
|
-
// Set a spanning element using shorthand syntax.
|
7
|
-
// - $span : <span>
|
8
|
-
@mixin span(
|
9
|
-
$span
|
10
|
-
) {
|
11
|
-
$inspect: $span;
|
12
|
-
$span: parse-span($span);
|
13
|
-
$output: span-math($span);
|
14
|
-
$nesting: susy-get(span, $span);
|
15
|
-
$clear: susy-get(clear, $span);
|
16
|
-
|
17
|
-
$box: susy-get(box-sizing, $span);
|
18
|
-
$content-box: if(susy-get(global-box-sizing) != 'border-box', true, false);
|
19
|
-
$box: $box or if(is-inside($span) and $content-box, border-box, null);
|
20
|
-
|
21
|
-
@if $clear == break {
|
22
|
-
@include break;
|
23
|
-
} @else if $clear == nobreak {
|
24
|
-
@include nobreak;
|
25
|
-
}
|
26
|
-
|
27
|
-
@include susy-inspect(span, $inspect);
|
28
|
-
@include output((box-sizing: $box));
|
29
|
-
@include float-span-output($output...);
|
30
|
-
|
31
|
-
@if valid-columns($nesting, silent) {
|
32
|
-
@include nested($span) { @content; }
|
33
|
-
} @else {
|
34
|
-
@content;
|
35
|
-
}
|
36
|
-
}
|
37
|
-
|
38
|
-
// Span [function]
|
39
|
-
// ---------------
|
40
|
-
// Return the width of a span.
|
41
|
-
// - $span : <span>
|
42
|
-
@function span(
|
43
|
-
$span
|
44
|
-
) {
|
45
|
-
@return get-span-width($span);
|
46
|
-
}
|
47
|
-
|
48
|
-
// Span Math
|
49
|
-
// ---------
|
50
|
-
// Get all the span results.
|
51
|
-
// - $span: <map>
|
52
|
-
@function span-math(
|
53
|
-
$span
|
54
|
-
) {
|
55
|
-
$nest : if(susy-get(role, $span) == nest, true, false);
|
56
|
-
$split-nest : if(is-split($span) and $nest, true, false);
|
57
|
-
$edge : get-edge($span);
|
58
|
-
$location : get-location($span);
|
59
|
-
|
60
|
-
$float : from;
|
61
|
-
$padding-before : null;
|
62
|
-
$padding-after : null;
|
63
|
-
$margin-before : null;
|
64
|
-
$margin-after : null;
|
65
|
-
|
66
|
-
// calculate widths
|
67
|
-
$spread: index(map-values($span), spread);
|
68
|
-
$span: if($split-nest and not($spread), map-merge($span, (spread: wide)), $span);
|
69
|
-
$width: get-span-width($span);
|
70
|
-
$gutters: get-gutters($span);
|
71
|
-
|
72
|
-
// apply gutters
|
73
|
-
@if is-inside($span) {
|
74
|
-
@if not(susy-get(role, $span)) {
|
75
|
-
$padding-before: map-get($gutters, before);
|
76
|
-
$padding-after: map-get($gutters, after);
|
77
|
-
}
|
78
|
-
} @else {
|
79
|
-
@if not($split-nest) {
|
80
|
-
$margin-before: map-get($gutters, before);
|
81
|
-
$margin-after: map-get($gutters, after);
|
82
|
-
}
|
83
|
-
}
|
84
|
-
|
85
|
-
// special margin handling
|
86
|
-
@if susy-get(output, $span) == isolate and $location {
|
87
|
-
$margin-before: get-isolation($span);
|
88
|
-
$margin-after: -100%;
|
89
|
-
} @else if $edge {
|
90
|
-
$is-split: is-split($span);
|
91
|
-
$pos: susy-get(gutter-position, $span);
|
92
|
-
|
93
|
-
@if $edge == last {
|
94
|
-
$float: susy-get(last-flow, $span);
|
95
|
-
}
|
96
|
-
|
97
|
-
@if not($is-split) {
|
98
|
-
@if $edge == full or ($edge == first and $pos == before) {
|
99
|
-
$margin-before: 0;
|
100
|
-
}
|
101
|
-
@if $edge == full or ($edge == last and $pos == after) {
|
102
|
-
$margin-after: 0;
|
103
|
-
}
|
104
|
-
}
|
105
|
-
|
106
|
-
}
|
107
|
-
|
108
|
-
@return (
|
109
|
-
width : $width,
|
110
|
-
float : $float,
|
111
|
-
margin-before : $margin-before,
|
112
|
-
margin-after : $margin-after,
|
113
|
-
padding-before : $padding-before,
|
114
|
-
padding-after : $padding-after,
|
115
|
-
flow : susy-get(flow, $span),
|
116
|
-
);
|
117
|
-
}
|
118
|
-
|
119
|
-
// Get Span Width
|
120
|
-
// --------------
|
121
|
-
// Return span width.
|
122
|
-
// - $span: <map>
|
123
|
-
@function get-span-width(
|
124
|
-
$span
|
125
|
-
) {
|
126
|
-
$span : parse-span($span);
|
127
|
-
|
128
|
-
$n : susy-get(span, $span);
|
129
|
-
$location : get-location($span);
|
130
|
-
$columns : susy-get(columns, $span);
|
131
|
-
$gutters : susy-get(gutters, $span);
|
132
|
-
$spread : susy-get(spread, $span);
|
133
|
-
|
134
|
-
$context : null;
|
135
|
-
$span-sum : null;
|
136
|
-
$width : null;
|
137
|
-
|
138
|
-
@if $n == 'full' {
|
139
|
-
$pos: susy-get(gutter-position, $span);
|
140
|
-
$role: susy-get(role, $span);
|
141
|
-
$n: if($pos == split and $role != nest, susy-count($columns), 100%);
|
142
|
-
}
|
143
|
-
|
144
|
-
@if type-of($n) != number {
|
145
|
-
@warn "(#{type-of($n)}) #{$n} is not a valid span.";
|
146
|
-
} @else if unitless($n) {
|
147
|
-
$context: susy-sum($columns, $gutters, if(is-split($span), wide, narrow));
|
148
|
-
$spread: if(is-inside($span), $spread or wide, $spread);
|
149
|
-
$span-sum: susy($n, $location, $columns, $gutters, $spread);
|
150
|
-
|
151
|
-
$_math: susy-get(math, $span);
|
152
|
-
$_column-width: susy-get(column-width, $span);
|
153
|
-
@if $_math == static {
|
154
|
-
$width: $span-sum * valid-column-math($_math, $_column-width);
|
155
|
-
} @else {
|
156
|
-
$width: percentage($span-sum / $context);
|
157
|
-
}
|
158
|
-
} @else {
|
159
|
-
$width: $n;
|
160
|
-
}
|
161
|
-
|
162
|
-
@return $width;
|
163
|
-
}
|
1
|
+
// Span Syntax
|
2
|
+
// ===========
|
3
|
+
|
4
|
+
// Span [mixin]
|
5
|
+
// ------------
|
6
|
+
// Set a spanning element using shorthand syntax.
|
7
|
+
// - $span : <span>
|
8
|
+
@mixin span(
|
9
|
+
$span
|
10
|
+
) {
|
11
|
+
$inspect: $span;
|
12
|
+
$span: parse-span($span);
|
13
|
+
$output: span-math($span);
|
14
|
+
$nesting: susy-get(span, $span);
|
15
|
+
$clear: susy-get(clear, $span);
|
16
|
+
|
17
|
+
$box: susy-get(box-sizing, $span);
|
18
|
+
$content-box: if(susy-get(global-box-sizing) != 'border-box', true, false);
|
19
|
+
$box: $box or if(is-inside($span) and $content-box, border-box, null);
|
20
|
+
|
21
|
+
@if $clear == break {
|
22
|
+
@include break;
|
23
|
+
} @else if $clear == nobreak {
|
24
|
+
@include nobreak;
|
25
|
+
}
|
26
|
+
|
27
|
+
@include susy-inspect(span, $inspect);
|
28
|
+
@include output((box-sizing: $box));
|
29
|
+
@include float-span-output($output...);
|
30
|
+
|
31
|
+
@if valid-columns($nesting, silent) {
|
32
|
+
@include nested($span) { @content; }
|
33
|
+
} @else {
|
34
|
+
@content;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
|
38
|
+
// Span [function]
|
39
|
+
// ---------------
|
40
|
+
// Return the width of a span.
|
41
|
+
// - $span : <span>
|
42
|
+
@function span(
|
43
|
+
$span
|
44
|
+
) {
|
45
|
+
@return get-span-width($span);
|
46
|
+
}
|
47
|
+
|
48
|
+
// Span Math
|
49
|
+
// ---------
|
50
|
+
// Get all the span results.
|
51
|
+
// - $span: <map>
|
52
|
+
@function span-math(
|
53
|
+
$span
|
54
|
+
) {
|
55
|
+
$nest : if(susy-get(role, $span) == nest, true, false);
|
56
|
+
$split-nest : if(is-split($span) and $nest, true, false);
|
57
|
+
$edge : get-edge($span);
|
58
|
+
$location : get-location($span);
|
59
|
+
|
60
|
+
$float : from;
|
61
|
+
$padding-before : null;
|
62
|
+
$padding-after : null;
|
63
|
+
$margin-before : null;
|
64
|
+
$margin-after : null;
|
65
|
+
|
66
|
+
// calculate widths
|
67
|
+
$spread: index(map-values($span), spread);
|
68
|
+
$span: if($split-nest and not($spread), map-merge($span, (spread: wide)), $span);
|
69
|
+
$width: get-span-width($span);
|
70
|
+
$gutters: get-gutters($span);
|
71
|
+
|
72
|
+
// apply gutters
|
73
|
+
@if is-inside($span) {
|
74
|
+
@if not(susy-get(role, $span)) {
|
75
|
+
$padding-before: map-get($gutters, before);
|
76
|
+
$padding-after: map-get($gutters, after);
|
77
|
+
}
|
78
|
+
} @else {
|
79
|
+
@if not($split-nest) {
|
80
|
+
$margin-before: map-get($gutters, before);
|
81
|
+
$margin-after: map-get($gutters, after);
|
82
|
+
}
|
83
|
+
}
|
84
|
+
|
85
|
+
// special margin handling
|
86
|
+
@if susy-get(output, $span) == isolate and $location {
|
87
|
+
$margin-before: get-isolation($span);
|
88
|
+
$margin-after: -100%;
|
89
|
+
} @else if $edge {
|
90
|
+
$is-split: is-split($span);
|
91
|
+
$pos: susy-get(gutter-position, $span);
|
92
|
+
|
93
|
+
@if $edge == last {
|
94
|
+
$float: susy-get(last-flow, $span);
|
95
|
+
}
|
96
|
+
|
97
|
+
@if not($is-split) {
|
98
|
+
@if $edge == full or ($edge == first and $pos == before) {
|
99
|
+
$margin-before: 0;
|
100
|
+
}
|
101
|
+
@if $edge == full or ($edge == last and $pos == after) {
|
102
|
+
$margin-after: 0;
|
103
|
+
}
|
104
|
+
}
|
105
|
+
|
106
|
+
}
|
107
|
+
|
108
|
+
@return (
|
109
|
+
width : $width,
|
110
|
+
float : $float,
|
111
|
+
margin-before : $margin-before,
|
112
|
+
margin-after : $margin-after,
|
113
|
+
padding-before : $padding-before,
|
114
|
+
padding-after : $padding-after,
|
115
|
+
flow : susy-get(flow, $span),
|
116
|
+
);
|
117
|
+
}
|
118
|
+
|
119
|
+
// Get Span Width
|
120
|
+
// --------------
|
121
|
+
// Return span width.
|
122
|
+
// - $span: <map>
|
123
|
+
@function get-span-width(
|
124
|
+
$span
|
125
|
+
) {
|
126
|
+
$span : parse-span($span);
|
127
|
+
|
128
|
+
$n : susy-get(span, $span);
|
129
|
+
$location : get-location($span);
|
130
|
+
$columns : susy-get(columns, $span);
|
131
|
+
$gutters : susy-get(gutters, $span);
|
132
|
+
$spread : susy-get(spread, $span);
|
133
|
+
|
134
|
+
$context : null;
|
135
|
+
$span-sum : null;
|
136
|
+
$width : null;
|
137
|
+
|
138
|
+
@if $n == 'full' {
|
139
|
+
$pos: susy-get(gutter-position, $span);
|
140
|
+
$role: susy-get(role, $span);
|
141
|
+
$n: if($pos == split and $role != nest, susy-count($columns), 100%);
|
142
|
+
}
|
143
|
+
|
144
|
+
@if type-of($n) != number {
|
145
|
+
@warn "(#{type-of($n)}) #{$n} is not a valid span.";
|
146
|
+
} @else if unitless($n) {
|
147
|
+
$context: susy-sum($columns, $gutters, if(is-split($span), wide, narrow));
|
148
|
+
$spread: if(is-inside($span), $spread or wide, $spread);
|
149
|
+
$span-sum: susy($n, $location, $columns, $gutters, $spread);
|
150
|
+
|
151
|
+
$_math: susy-get(math, $span);
|
152
|
+
$_column-width: susy-get(column-width, $span);
|
153
|
+
@if $_math == static {
|
154
|
+
$width: $span-sum * valid-column-math($_math, $_column-width);
|
155
|
+
} @else {
|
156
|
+
$width: percentage($span-sum / $context);
|
157
|
+
}
|
158
|
+
} @else {
|
159
|
+
$width: $n;
|
160
|
+
}
|
161
|
+
|
162
|
+
@return $width;
|
163
|
+
}
|
@@ -1,16 +1,16 @@
|
|
1
|
-
// Validation
|
2
|
-
// ==========
|
3
|
-
|
4
|
-
|
5
|
-
// Validate Column Math
|
6
|
-
// --------------------
|
7
|
-
@function valid-column-math(
|
8
|
-
$math,
|
9
|
-
$column-width
|
10
|
-
) {
|
11
|
-
@if $math == static and not($column-width) {
|
12
|
-
@error 'Static math requires a valid column-width setting.';
|
13
|
-
}
|
14
|
-
|
15
|
-
@return $column-width;
|
16
|
-
}
|
1
|
+
// Validation
|
2
|
+
// ==========
|
3
|
+
|
4
|
+
|
5
|
+
// Validate Column Math
|
6
|
+
// --------------------
|
7
|
+
@function valid-column-math(
|
8
|
+
$math,
|
9
|
+
$column-width
|
10
|
+
) {
|
11
|
+
@if $math == static and not($column-width) {
|
12
|
+
@error 'Static math requires a valid column-width setting.';
|
13
|
+
}
|
14
|
+
|
15
|
+
@return $column-width;
|
16
|
+
}
|
@@ -1,18 +1,18 @@
|
|
1
|
-
// ---------------------------------------------------------------------------
|
2
|
-
// Imports
|
3
|
-
|
4
|
-
@import "compass/layout/grid-background";
|
5
|
-
@import "compass/css3/background-origin";
|
6
|
-
@import "compass/css3/background-clip";
|
7
|
-
|
8
|
-
// ---------------------------------------------------------------------------
|
9
|
-
// Susy Grid Background
|
10
|
-
//
|
11
|
-
// A wrapper for the compass "column-grid-background" mixin
|
12
|
-
// Uses all your settings to create a grid background for a container element.
|
13
|
-
// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
|
14
|
-
@mixin susy-grid-background(){
|
15
|
-
@include column-grid-background($total-columns, column(), gutter(), 0);
|
16
|
-
@include background-origin(content-box);
|
17
|
-
@include background-clip(content-box);
|
18
|
-
}
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Imports
|
3
|
+
|
4
|
+
@import "compass/layout/grid-background";
|
5
|
+
@import "compass/css3/background-origin";
|
6
|
+
@import "compass/css3/background-clip";
|
7
|
+
|
8
|
+
// ---------------------------------------------------------------------------
|
9
|
+
// Susy Grid Background
|
10
|
+
//
|
11
|
+
// A wrapper for the compass "column-grid-background" mixin
|
12
|
+
// Uses all your settings to create a grid background for a container element.
|
13
|
+
// Note: Sub-pixel rounding can lead to several pixels of variation between browsers.
|
14
|
+
@mixin susy-grid-background(){
|
15
|
+
@include column-grid-background($total-columns, column(), gutter(), 0);
|
16
|
+
@include background-origin(content-box);
|
17
|
+
@include background-clip(content-box);
|
18
|
+
}
|
@@ -1,377 +1,377 @@
|
|
1
|
-
// ---------------------------------------------------------------------------
|
2
|
-
// Imports
|
3
|
-
|
4
|
-
// We need access to some basic font settings for handling media-queries.
|
5
|
-
@import "compass/typography/vertical_rhythm";
|
6
|
-
|
7
|
-
// For now, we also need this...
|
8
|
-
$browser-default-font-size-px : 16px;
|
9
|
-
$browser-default-font-size-percent : 100%;
|
10
|
-
$browser-default-font-size-pt : 12pt;
|
11
|
-
|
12
|
-
$rem-with-px-fallback : true !default;
|
13
|
-
|
14
|
-
// ---------------------------------------------------------------------------
|
15
|
-
// Sass list Functions
|
16
|
-
|
17
|
-
// Return a list with specific items removed
|
18
|
-
//
|
19
|
-
// filter($list, $target)
|
20
|
-
// - $list : The list to filter.
|
21
|
-
// - $target : An item to be removed from the list.
|
22
|
-
@function filter($list, $target) {
|
23
|
-
$clean: compact();
|
24
|
-
@if index($list, $target) {
|
25
|
-
@each $item in $list {
|
26
|
-
$clean: if($item == $target, $clean, append($clean, $item));
|
27
|
-
}
|
28
|
-
} @else { $clean: $list; }
|
29
|
-
@return $clean;
|
30
|
-
}
|
31
|
-
|
32
|
-
// ---------------------------------------------------------------------------
|
33
|
-
// Don't use static output when it will break things
|
34
|
-
|
35
|
-
// Switch element-level output to fluid, when container-width is wrong for static
|
36
|
-
//
|
37
|
-
// fix-static-misalignment([$style, $width])
|
38
|
-
// - $style: $container-style.
|
39
|
-
// - $width: $container-width.
|
40
|
-
@function fix-static-misalignment(
|
41
|
-
$style: $container-style,
|
42
|
-
$width: $container-width
|
43
|
-
) {
|
44
|
-
@if $container-width and $container-width != container-outer-width($width: false) {
|
45
|
-
$style: fluid;
|
46
|
-
}
|
47
|
-
@return $style;
|
48
|
-
}
|
49
|
-
|
50
|
-
// ---------------------------------------------------------------------------
|
51
|
-
// Grid Functions
|
52
|
-
|
53
|
-
// Returns the full width of a grid based on your grid settings.
|
54
|
-
//
|
55
|
-
// $columns : The number of columns to get width for.
|
56
|
-
@function columns-width(
|
57
|
-
$columns : $total-columns
|
58
|
-
) {
|
59
|
-
@if round($columns) != $columns {
|
60
|
-
@warn "Susy works best with integer column-spans." +
|
61
|
-
"For partial-columns, you may need to finesse the math by hand using functions directly.";
|
62
|
-
}
|
63
|
-
@return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
|
64
|
-
}
|
65
|
-
|
66
|
-
// Return the grid width after adding or subtracting grid padding
|
67
|
-
//
|
68
|
-
// $width : the width of the grid without padding;
|
69
|
-
// $operation : ( add | subtract ) if padding should be added or subtracted;
|
70
|
-
@function handle-grid-padding(
|
71
|
-
$width,
|
72
|
-
$operation : subtract
|
73
|
-
) {
|
74
|
-
$pad: $grid-padding*2;
|
75
|
-
|
76
|
-
@if comparable($width, $grid-padding) {
|
77
|
-
$width: if($operation == subtract, $width - $pad, $width + $pad);
|
78
|
-
} @else {
|
79
|
-
@warn "$grid-padding must be set in units comparable to the container width.";
|
80
|
-
}
|
81
|
-
|
82
|
-
@return $width;
|
83
|
-
}
|
84
|
-
|
85
|
-
// Return the full outer width of a Container element.
|
86
|
-
//
|
87
|
-
// $columns : The number of columns in the Grid Layout.
|
88
|
-
@function container-outer-width(
|
89
|
-
$columns : $total-columns,
|
90
|
-
$width : $container-width
|
91
|
-
) {
|
92
|
-
$outerwidth: if($width, $width, columns-width($columns));
|
93
|
-
|
94
|
-
@if $width {
|
95
|
-
@if not($border-box-sizing) { $outerwidth: handle-grid-padding($outerwidth, subtract); }
|
96
|
-
} @else {
|
97
|
-
@if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); }
|
98
|
-
}
|
99
|
-
|
100
|
-
@return $outerwidth;
|
101
|
-
}
|
102
|
-
|
103
|
-
// Return the percentage width of a single column in a given 'context'.
|
104
|
-
//
|
105
|
-
// $context : The grid context in columns, if nested.
|
106
|
-
// $style : The container style to use.
|
107
|
-
@function column(
|
108
|
-
$context : $total-columns,
|
109
|
-
$style : fix-static-misalignment()
|
110
|
-
) {
|
111
|
-
@return if($style == static, $column-width, relative-width($column-width, $context));
|
112
|
-
}
|
113
|
-
|
114
|
-
// Return the percentage width of multiple 'columns' in a given 'context'.
|
115
|
-
//
|
116
|
-
// $columns : The number of columns to get relative width for.
|
117
|
-
// $context : The grid context in columns, if nested.
|
118
|
-
// $style : The container style to use.
|
119
|
-
@function columns(
|
120
|
-
$columns,
|
121
|
-
$context : $total-columns,
|
122
|
-
$style : fix-static-misalignment()
|
123
|
-
) {
|
124
|
-
@return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context));
|
125
|
-
}
|
126
|
-
|
127
|
-
// Return the percentage width of a single gutter in a given 'context'.
|
128
|
-
//
|
129
|
-
// $context : The grid context in columns, if nested.
|
130
|
-
// $style : The container style to use.
|
131
|
-
@function gutter(
|
132
|
-
$context : $total-columns,
|
133
|
-
$style : fix-static-misalignment()
|
134
|
-
) {
|
135
|
-
@return if($style == static, $gutter-width, relative-width($gutter-width, $context));
|
136
|
-
}
|
137
|
-
|
138
|
-
// Return the percentage width of a given value in a given 'context'.
|
139
|
-
//
|
140
|
-
// $width : Any given width value.
|
141
|
-
// $context : The grid context in columns, if nested.
|
142
|
-
@function relative-width(
|
143
|
-
$width,
|
144
|
-
$context : $total-columns
|
145
|
-
) {
|
146
|
-
@return percentage($width / columns-width($context));
|
147
|
-
}
|
148
|
-
|
149
|
-
// Return the total space occupied by multiple columns and associated gutters.
|
150
|
-
// Useful for adding padding or margins (prefix, suffix, push, pull, etc.)
|
151
|
-
//
|
152
|
-
// $columns : The number of columns to get relative space for.
|
153
|
-
// $context : The grid context in columns, if nested.
|
154
|
-
// $style : The container style to use.
|
155
|
-
@function space(
|
156
|
-
$columns,
|
157
|
-
$context : $total-columns,
|
158
|
-
$style : fix-static-misalignment()
|
159
|
-
) {
|
160
|
-
@return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0);
|
161
|
-
}
|
162
|
-
|
163
|
-
// Accept a list including column-count and (optional) position.
|
164
|
-
// Return either the column count or the position alone.
|
165
|
-
//
|
166
|
-
// $columns : the list to split and interprate.
|
167
|
-
// $request : The value to return, either 'columns' or 'position'.
|
168
|
-
@function split-columns-value(
|
169
|
-
$columns,
|
170
|
-
$request : columns
|
171
|
-
) {
|
172
|
-
$pos : false;
|
173
|
-
$cols : false;
|
174
|
-
|
175
|
-
@each $var in $columns {
|
176
|
-
@if (type-of($var) == 'string') {
|
177
|
-
$pos: $var;
|
178
|
-
} @else {
|
179
|
-
@if (type-of($var) == 'number') and (unitless($var)) {
|
180
|
-
$cols: $var;
|
181
|
-
} @else {
|
182
|
-
@warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.';
|
183
|
-
}
|
184
|
-
}
|
185
|
-
}
|
186
|
-
|
187
|
-
@if $request == 'columns' {
|
188
|
-
@return $cols;
|
189
|
-
} @else {
|
190
|
-
@if $request == 'position' {
|
191
|
-
@return $pos;
|
192
|
-
} @else {
|
193
|
-
@warn '"#{$request}" is not a valid value for $request';
|
194
|
-
}
|
195
|
-
}
|
196
|
-
}
|
197
|
-
|
198
|
-
// Accept nth-selector variables, and format them as a valid CSS3 selector.
|
199
|
-
//
|
200
|
-
// $n : [first | only | last | <equation>]
|
201
|
-
// $selector : [child | last-child | of-type | last-of-type ]
|
202
|
-
@function format-nth(
|
203
|
-
$n : last,
|
204
|
-
$selector : child
|
205
|
-
) {
|
206
|
-
@if ($n == 'last') or ($n =='first') or ($n =='only') {
|
207
|
-
$selector: '#{$n}-#{$selector}';
|
208
|
-
} @else {
|
209
|
-
$selector: 'nth-#{$selector}(#{$n})';
|
210
|
-
}
|
211
|
-
@return $selector;
|
212
|
-
}
|
213
|
-
|
214
|
-
// ---------------------------------------------------------------------------
|
215
|
-
// Media Functions
|
216
|
-
|
217
|
-
// Return an em value adjusted to match the browser default font size.
|
218
|
-
// Note: This only works if actual sizes are set relative to browser defaults.
|
219
|
-
//
|
220
|
-
// $ems : The initial value to be converted.
|
221
|
-
// $font-size : The current font-size in.
|
222
|
-
@function base-ems(
|
223
|
-
$ems,
|
224
|
-
$font-size: $base-font-size
|
225
|
-
){
|
226
|
-
$font-size : if(unit($ems) == 'rem', $base-font-size, $font-size);
|
227
|
-
$unit : unit($font-size);
|
228
|
-
$mult : $ems / ($ems * 0 + 1);
|
229
|
-
|
230
|
-
@if $unit == 'px' {
|
231
|
-
@return $font-size / $browser-default-font-size-px * $mult * 1em;
|
232
|
-
}
|
233
|
-
@else if $unit == '%' {
|
234
|
-
@return $font-size / $browser-default-font-size-percent * $mult * 1em;
|
235
|
-
}
|
236
|
-
@else if $unit == 'em' {
|
237
|
-
@return $font-size / 1em * $mult * 1em;
|
238
|
-
}
|
239
|
-
@else if $unit == 'pt' {
|
240
|
-
@return $font-size / $browser-default-font-size-pt * $mult * 1em;
|
241
|
-
}
|
242
|
-
@else {
|
243
|
-
@warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.';
|
244
|
-
}
|
245
|
-
}
|
246
|
-
|
247
|
-
// This name will be deprecated...
|
248
|
-
@function absolute-ems(
|
249
|
-
$ems,
|
250
|
-
$font-size: $base-font-size
|
251
|
-
){
|
252
|
-
@return base-ems( $ems, $font-size);
|
253
|
-
}
|
254
|
-
|
255
|
-
// Return a length, after any em-values have been sent through absolute-ems().
|
256
|
-
//
|
257
|
-
// $length : The length value to be checked and adjusted if necessary.
|
258
|
-
// $font-size : The current font-size in px.
|
259
|
-
@function fix-ems(
|
260
|
-
$length,
|
261
|
-
$font-size: $base-font-size
|
262
|
-
){
|
263
|
-
@if $length {
|
264
|
-
@if (unit($length) == 'em') or (unit($length) == 'rem') {
|
265
|
-
$length: absolute-ems($length,$font-size);
|
266
|
-
}
|
267
|
-
}
|
268
|
-
@return $length;
|
269
|
-
}
|
270
|
-
|
271
|
-
// Sort a list of arguments into "$min $layout $max $ie" order, and return the list.
|
272
|
-
//
|
273
|
-
// $media-layout : a list of values [$min $layout $max $ie] including...
|
274
|
-
// : - one unitless number (columns in a layout)
|
275
|
-
// : - two optional lengths (min and max-width media-query breakpoints).
|
276
|
-
// : - one optional boolean or string to trigger fallback support for IE.
|
277
|
-
// $font-size : [optional] The base font-size of your layout, if you are using ems.
|
278
|
-
// : - defaults to $base-font-size
|
279
|
-
@function medialayout(
|
280
|
-
$media-layout,
|
281
|
-
$font-size: $base-font-size
|
282
|
-
) {
|
283
|
-
$media : false;
|
284
|
-
$min : false;
|
285
|
-
$layout : false;
|
286
|
-
$max : false;
|
287
|
-
$ie : false;
|
288
|
-
$has-layout : false;
|
289
|
-
|
290
|
-
@each $val in $media-layout {
|
291
|
-
@if (type-of($val) == "number") {
|
292
|
-
@if unitless($val) {
|
293
|
-
$layout : $val;
|
294
|
-
$has-layout : true;
|
295
|
-
} @else {
|
296
|
-
@if ($has-layout) and not($media) {
|
297
|
-
$max: $val;
|
298
|
-
} @else {
|
299
|
-
@if $media {
|
300
|
-
$media: join($media,$val);
|
301
|
-
} @else {
|
302
|
-
$media: $val;
|
303
|
-
}
|
304
|
-
}
|
305
|
-
}
|
306
|
-
} @else {
|
307
|
-
$ie: $val;
|
308
|
-
}
|
309
|
-
}
|
310
|
-
@if (length($media) > 0) {
|
311
|
-
@if (length($media) == 1) {
|
312
|
-
$min: nth($media,1);
|
313
|
-
} @else {
|
314
|
-
$min: nth($media,1);
|
315
|
-
$max: nth($media,2);
|
316
|
-
@if comparable($min, $max) {
|
317
|
-
@if ($min > $max) {
|
318
|
-
$max: nth($media,1);
|
319
|
-
$min: nth($media,2);
|
320
|
-
}
|
321
|
-
} @else {
|
322
|
-
@warn "Can't compare incompatible units." +
|
323
|
-
"Using #{$min} for min-width, and #{$max} for max-width";
|
324
|
-
}
|
325
|
-
@if (length($media) > 2) {
|
326
|
-
@warn "You can only send two lengths: a min-width and an (optional) max-width." +
|
327
|
-
"You sent #{length($media)}: #{$media}";
|
328
|
-
}
|
329
|
-
}
|
330
|
-
}
|
331
|
-
|
332
|
-
// media-queries must be set in ems relative to the browser default
|
333
|
-
// rather than the font-size set in CSS.
|
334
|
-
$min: fix-ems($min,$font-size);
|
335
|
-
$max: fix-ems($max,$font-size);
|
336
|
-
|
337
|
-
@return $min $layout $max $ie;
|
338
|
-
}
|
339
|
-
|
340
|
-
// Return the nearest layout (column-count) above a given breakpoint.
|
341
|
-
//
|
342
|
-
// $min : The min-width media-query breakpoint above which to establish a new layout.
|
343
|
-
@function get-layout(
|
344
|
-
$min
|
345
|
-
) {
|
346
|
-
$min : fix-ems($min);
|
347
|
-
$return : false;
|
348
|
-
|
349
|
-
@if comparable($min, $column-width) {
|
350
|
-
$return : ceil(($min + $gutter-width) / ($column-width + $gutter-width));
|
351
|
-
} @else {
|
352
|
-
@warn "Can't determine a layout, becuse #{$min} and #{$column-width} are not comparable.";
|
353
|
-
}
|
354
|
-
|
355
|
-
@return $return;
|
356
|
-
}
|
357
|
-
|
358
|
-
// Check to see if a given $media-layout list is simply the default.
|
359
|
-
//
|
360
|
-
// $media-layout : a list of values including -
|
361
|
-
// : One unitless number (columns in a layout)
|
362
|
-
// : Two optional lengths (min and max-width media-query breakpoints).
|
363
|
-
// : One optional boolean or string to trigger fallback support for IE.
|
364
|
-
@function is-default-layout(
|
365
|
-
$media-layout
|
366
|
-
) {
|
367
|
-
$media-layout : medialayout($media-layout);
|
368
|
-
$min : nth($media-layout,1);
|
369
|
-
$layout-cols : nth($media-layout,2);
|
370
|
-
$max : nth($media-layout,3);
|
371
|
-
|
372
|
-
@if $min or $max {
|
373
|
-
@return false;
|
374
|
-
} @else {
|
375
|
-
@return if($layout-cols == $total-columns,true,false);
|
376
|
-
}
|
377
|
-
}
|
1
|
+
// ---------------------------------------------------------------------------
|
2
|
+
// Imports
|
3
|
+
|
4
|
+
// We need access to some basic font settings for handling media-queries.
|
5
|
+
@import "compass/typography/vertical_rhythm";
|
6
|
+
|
7
|
+
// For now, we also need this...
|
8
|
+
$browser-default-font-size-px : 16px;
|
9
|
+
$browser-default-font-size-percent : 100%;
|
10
|
+
$browser-default-font-size-pt : 12pt;
|
11
|
+
|
12
|
+
$rem-with-px-fallback : true !default;
|
13
|
+
|
14
|
+
// ---------------------------------------------------------------------------
|
15
|
+
// Sass list Functions
|
16
|
+
|
17
|
+
// Return a list with specific items removed
|
18
|
+
//
|
19
|
+
// filter($list, $target)
|
20
|
+
// - $list : The list to filter.
|
21
|
+
// - $target : An item to be removed from the list.
|
22
|
+
@function filter($list, $target) {
|
23
|
+
$clean: compact();
|
24
|
+
@if index($list, $target) {
|
25
|
+
@each $item in $list {
|
26
|
+
$clean: if($item == $target, $clean, append($clean, $item));
|
27
|
+
}
|
28
|
+
} @else { $clean: $list; }
|
29
|
+
@return $clean;
|
30
|
+
}
|
31
|
+
|
32
|
+
// ---------------------------------------------------------------------------
|
33
|
+
// Don't use static output when it will break things
|
34
|
+
|
35
|
+
// Switch element-level output to fluid, when container-width is wrong for static
|
36
|
+
//
|
37
|
+
// fix-static-misalignment([$style, $width])
|
38
|
+
// - $style: $container-style.
|
39
|
+
// - $width: $container-width.
|
40
|
+
@function fix-static-misalignment(
|
41
|
+
$style: $container-style,
|
42
|
+
$width: $container-width
|
43
|
+
) {
|
44
|
+
@if $container-width and $container-width != container-outer-width($width: false) {
|
45
|
+
$style: fluid;
|
46
|
+
}
|
47
|
+
@return $style;
|
48
|
+
}
|
49
|
+
|
50
|
+
// ---------------------------------------------------------------------------
|
51
|
+
// Grid Functions
|
52
|
+
|
53
|
+
// Returns the full width of a grid based on your grid settings.
|
54
|
+
//
|
55
|
+
// $columns : The number of columns to get width for.
|
56
|
+
@function columns-width(
|
57
|
+
$columns : $total-columns
|
58
|
+
) {
|
59
|
+
@if round($columns) != $columns {
|
60
|
+
@warn "Susy works best with integer column-spans." +
|
61
|
+
"For partial-columns, you may need to finesse the math by hand using functions directly.";
|
62
|
+
}
|
63
|
+
@return ($columns * $column-width) + (if($columns >= 1, ceil($columns - 1), 0) * $gutter-width);
|
64
|
+
}
|
65
|
+
|
66
|
+
// Return the grid width after adding or subtracting grid padding
|
67
|
+
//
|
68
|
+
// $width : the width of the grid without padding;
|
69
|
+
// $operation : ( add | subtract ) if padding should be added or subtracted;
|
70
|
+
@function handle-grid-padding(
|
71
|
+
$width,
|
72
|
+
$operation : subtract
|
73
|
+
) {
|
74
|
+
$pad: $grid-padding*2;
|
75
|
+
|
76
|
+
@if comparable($width, $grid-padding) {
|
77
|
+
$width: if($operation == subtract, $width - $pad, $width + $pad);
|
78
|
+
} @else {
|
79
|
+
@warn "$grid-padding must be set in units comparable to the container width.";
|
80
|
+
}
|
81
|
+
|
82
|
+
@return $width;
|
83
|
+
}
|
84
|
+
|
85
|
+
// Return the full outer width of a Container element.
|
86
|
+
//
|
87
|
+
// $columns : The number of columns in the Grid Layout.
|
88
|
+
@function container-outer-width(
|
89
|
+
$columns : $total-columns,
|
90
|
+
$width : $container-width
|
91
|
+
) {
|
92
|
+
$outerwidth: if($width, $width, columns-width($columns));
|
93
|
+
|
94
|
+
@if $width {
|
95
|
+
@if not($border-box-sizing) { $outerwidth: handle-grid-padding($outerwidth, subtract); }
|
96
|
+
} @else {
|
97
|
+
@if $border-box-sizing { $outerwidth: handle-grid-padding($outerwidth, add); }
|
98
|
+
}
|
99
|
+
|
100
|
+
@return $outerwidth;
|
101
|
+
}
|
102
|
+
|
103
|
+
// Return the percentage width of a single column in a given 'context'.
|
104
|
+
//
|
105
|
+
// $context : The grid context in columns, if nested.
|
106
|
+
// $style : The container style to use.
|
107
|
+
@function column(
|
108
|
+
$context : $total-columns,
|
109
|
+
$style : fix-static-misalignment()
|
110
|
+
) {
|
111
|
+
@return if($style == static, $column-width, relative-width($column-width, $context));
|
112
|
+
}
|
113
|
+
|
114
|
+
// Return the percentage width of multiple 'columns' in a given 'context'.
|
115
|
+
//
|
116
|
+
// $columns : The number of columns to get relative width for.
|
117
|
+
// $context : The grid context in columns, if nested.
|
118
|
+
// $style : The container style to use.
|
119
|
+
@function columns(
|
120
|
+
$columns,
|
121
|
+
$context : $total-columns,
|
122
|
+
$style : fix-static-misalignment()
|
123
|
+
) {
|
124
|
+
@return if($style == static, columns-width($columns), relative-width(columns-width($columns), $context));
|
125
|
+
}
|
126
|
+
|
127
|
+
// Return the percentage width of a single gutter in a given 'context'.
|
128
|
+
//
|
129
|
+
// $context : The grid context in columns, if nested.
|
130
|
+
// $style : The container style to use.
|
131
|
+
@function gutter(
|
132
|
+
$context : $total-columns,
|
133
|
+
$style : fix-static-misalignment()
|
134
|
+
) {
|
135
|
+
@return if($style == static, $gutter-width, relative-width($gutter-width, $context));
|
136
|
+
}
|
137
|
+
|
138
|
+
// Return the percentage width of a given value in a given 'context'.
|
139
|
+
//
|
140
|
+
// $width : Any given width value.
|
141
|
+
// $context : The grid context in columns, if nested.
|
142
|
+
@function relative-width(
|
143
|
+
$width,
|
144
|
+
$context : $total-columns
|
145
|
+
) {
|
146
|
+
@return percentage($width / columns-width($context));
|
147
|
+
}
|
148
|
+
|
149
|
+
// Return the total space occupied by multiple columns and associated gutters.
|
150
|
+
// Useful for adding padding or margins (prefix, suffix, push, pull, etc.)
|
151
|
+
//
|
152
|
+
// $columns : The number of columns to get relative space for.
|
153
|
+
// $context : The grid context in columns, if nested.
|
154
|
+
// $style : The container style to use.
|
155
|
+
@function space(
|
156
|
+
$columns,
|
157
|
+
$context : $total-columns,
|
158
|
+
$style : fix-static-misalignment()
|
159
|
+
) {
|
160
|
+
@return columns($columns, $context, $style) + if($columns >= 1, gutter($context, $style), 0);
|
161
|
+
}
|
162
|
+
|
163
|
+
// Accept a list including column-count and (optional) position.
|
164
|
+
// Return either the column count or the position alone.
|
165
|
+
//
|
166
|
+
// $columns : the list to split and interprate.
|
167
|
+
// $request : The value to return, either 'columns' or 'position'.
|
168
|
+
@function split-columns-value(
|
169
|
+
$columns,
|
170
|
+
$request : columns
|
171
|
+
) {
|
172
|
+
$pos : false;
|
173
|
+
$cols : false;
|
174
|
+
|
175
|
+
@each $var in $columns {
|
176
|
+
@if (type-of($var) == 'string') {
|
177
|
+
$pos: $var;
|
178
|
+
} @else {
|
179
|
+
@if (type-of($var) == 'number') and (unitless($var)) {
|
180
|
+
$cols: $var;
|
181
|
+
} @else {
|
182
|
+
@warn '"#{$var}" is not a valid part of "$columns: #{$columns}" in the columns() mixin.';
|
183
|
+
}
|
184
|
+
}
|
185
|
+
}
|
186
|
+
|
187
|
+
@if $request == 'columns' {
|
188
|
+
@return $cols;
|
189
|
+
} @else {
|
190
|
+
@if $request == 'position' {
|
191
|
+
@return $pos;
|
192
|
+
} @else {
|
193
|
+
@warn '"#{$request}" is not a valid value for $request';
|
194
|
+
}
|
195
|
+
}
|
196
|
+
}
|
197
|
+
|
198
|
+
// Accept nth-selector variables, and format them as a valid CSS3 selector.
|
199
|
+
//
|
200
|
+
// $n : [first | only | last | <equation>]
|
201
|
+
// $selector : [child | last-child | of-type | last-of-type ]
|
202
|
+
@function format-nth(
|
203
|
+
$n : last,
|
204
|
+
$selector : child
|
205
|
+
) {
|
206
|
+
@if ($n == 'last') or ($n =='first') or ($n =='only') {
|
207
|
+
$selector: '#{$n}-#{$selector}';
|
208
|
+
} @else {
|
209
|
+
$selector: 'nth-#{$selector}(#{$n})';
|
210
|
+
}
|
211
|
+
@return $selector;
|
212
|
+
}
|
213
|
+
|
214
|
+
// ---------------------------------------------------------------------------
|
215
|
+
// Media Functions
|
216
|
+
|
217
|
+
// Return an em value adjusted to match the browser default font size.
|
218
|
+
// Note: This only works if actual sizes are set relative to browser defaults.
|
219
|
+
//
|
220
|
+
// $ems : The initial value to be converted.
|
221
|
+
// $font-size : The current font-size in.
|
222
|
+
@function base-ems(
|
223
|
+
$ems,
|
224
|
+
$font-size: $base-font-size
|
225
|
+
){
|
226
|
+
$font-size : if(unit($ems) == 'rem', $base-font-size, $font-size);
|
227
|
+
$unit : unit($font-size);
|
228
|
+
$mult : $ems / ($ems * 0 + 1);
|
229
|
+
|
230
|
+
@if $unit == 'px' {
|
231
|
+
@return $font-size / $browser-default-font-size-px * $mult * 1em;
|
232
|
+
}
|
233
|
+
@else if $unit == '%' {
|
234
|
+
@return $font-size / $browser-default-font-size-percent * $mult * 1em;
|
235
|
+
}
|
236
|
+
@else if $unit == 'em' {
|
237
|
+
@return $font-size / 1em * $mult * 1em;
|
238
|
+
}
|
239
|
+
@else if $unit == 'pt' {
|
240
|
+
@return $font-size / $browser-default-font-size-pt * $mult * 1em;
|
241
|
+
}
|
242
|
+
@else {
|
243
|
+
@warn 'Variable $base-font-size does not have a valid font unit. Valid units for fonts in CSS are px, pt, em, and %.';
|
244
|
+
}
|
245
|
+
}
|
246
|
+
|
247
|
+
// This name will be deprecated...
|
248
|
+
@function absolute-ems(
|
249
|
+
$ems,
|
250
|
+
$font-size: $base-font-size
|
251
|
+
){
|
252
|
+
@return base-ems( $ems, $font-size);
|
253
|
+
}
|
254
|
+
|
255
|
+
// Return a length, after any em-values have been sent through absolute-ems().
|
256
|
+
//
|
257
|
+
// $length : The length value to be checked and adjusted if necessary.
|
258
|
+
// $font-size : The current font-size in px.
|
259
|
+
@function fix-ems(
|
260
|
+
$length,
|
261
|
+
$font-size: $base-font-size
|
262
|
+
){
|
263
|
+
@if $length {
|
264
|
+
@if (unit($length) == 'em') or (unit($length) == 'rem') {
|
265
|
+
$length: absolute-ems($length,$font-size);
|
266
|
+
}
|
267
|
+
}
|
268
|
+
@return $length;
|
269
|
+
}
|
270
|
+
|
271
|
+
// Sort a list of arguments into "$min $layout $max $ie" order, and return the list.
|
272
|
+
//
|
273
|
+
// $media-layout : a list of values [$min $layout $max $ie] including...
|
274
|
+
// : - one unitless number (columns in a layout)
|
275
|
+
// : - two optional lengths (min and max-width media-query breakpoints).
|
276
|
+
// : - one optional boolean or string to trigger fallback support for IE.
|
277
|
+
// $font-size : [optional] The base font-size of your layout, if you are using ems.
|
278
|
+
// : - defaults to $base-font-size
|
279
|
+
@function medialayout(
|
280
|
+
$media-layout,
|
281
|
+
$font-size: $base-font-size
|
282
|
+
) {
|
283
|
+
$media : false;
|
284
|
+
$min : false;
|
285
|
+
$layout : false;
|
286
|
+
$max : false;
|
287
|
+
$ie : false;
|
288
|
+
$has-layout : false;
|
289
|
+
|
290
|
+
@each $val in $media-layout {
|
291
|
+
@if (type-of($val) == "number") {
|
292
|
+
@if unitless($val) {
|
293
|
+
$layout : $val;
|
294
|
+
$has-layout : true;
|
295
|
+
} @else {
|
296
|
+
@if ($has-layout) and not($media) {
|
297
|
+
$max: $val;
|
298
|
+
} @else {
|
299
|
+
@if $media {
|
300
|
+
$media: join($media,$val);
|
301
|
+
} @else {
|
302
|
+
$media: $val;
|
303
|
+
}
|
304
|
+
}
|
305
|
+
}
|
306
|
+
} @else {
|
307
|
+
$ie: $val;
|
308
|
+
}
|
309
|
+
}
|
310
|
+
@if (length($media) > 0) {
|
311
|
+
@if (length($media) == 1) {
|
312
|
+
$min: nth($media,1);
|
313
|
+
} @else {
|
314
|
+
$min: nth($media,1);
|
315
|
+
$max: nth($media,2);
|
316
|
+
@if comparable($min, $max) {
|
317
|
+
@if ($min > $max) {
|
318
|
+
$max: nth($media,1);
|
319
|
+
$min: nth($media,2);
|
320
|
+
}
|
321
|
+
} @else {
|
322
|
+
@warn "Can't compare incompatible units." +
|
323
|
+
"Using #{$min} for min-width, and #{$max} for max-width";
|
324
|
+
}
|
325
|
+
@if (length($media) > 2) {
|
326
|
+
@warn "You can only send two lengths: a min-width and an (optional) max-width." +
|
327
|
+
"You sent #{length($media)}: #{$media}";
|
328
|
+
}
|
329
|
+
}
|
330
|
+
}
|
331
|
+
|
332
|
+
// media-queries must be set in ems relative to the browser default
|
333
|
+
// rather than the font-size set in CSS.
|
334
|
+
$min: fix-ems($min,$font-size);
|
335
|
+
$max: fix-ems($max,$font-size);
|
336
|
+
|
337
|
+
@return $min $layout $max $ie;
|
338
|
+
}
|
339
|
+
|
340
|
+
// Return the nearest layout (column-count) above a given breakpoint.
|
341
|
+
//
|
342
|
+
// $min : The min-width media-query breakpoint above which to establish a new layout.
|
343
|
+
@function get-layout(
|
344
|
+
$min
|
345
|
+
) {
|
346
|
+
$min : fix-ems($min);
|
347
|
+
$return : false;
|
348
|
+
|
349
|
+
@if comparable($min, $column-width) {
|
350
|
+
$return : ceil(($min + $gutter-width) / ($column-width + $gutter-width));
|
351
|
+
} @else {
|
352
|
+
@warn "Can't determine a layout, becuse #{$min} and #{$column-width} are not comparable.";
|
353
|
+
}
|
354
|
+
|
355
|
+
@return $return;
|
356
|
+
}
|
357
|
+
|
358
|
+
// Check to see if a given $media-layout list is simply the default.
|
359
|
+
//
|
360
|
+
// $media-layout : a list of values including -
|
361
|
+
// : One unitless number (columns in a layout)
|
362
|
+
// : Two optional lengths (min and max-width media-query breakpoints).
|
363
|
+
// : One optional boolean or string to trigger fallback support for IE.
|
364
|
+
@function is-default-layout(
|
365
|
+
$media-layout
|
366
|
+
) {
|
367
|
+
$media-layout : medialayout($media-layout);
|
368
|
+
$min : nth($media-layout,1);
|
369
|
+
$layout-cols : nth($media-layout,2);
|
370
|
+
$max : nth($media-layout,3);
|
371
|
+
|
372
|
+
@if $min or $max {
|
373
|
+
@return false;
|
374
|
+
} @else {
|
375
|
+
@return if($layout-cols == $total-columns,true,false);
|
376
|
+
}
|
377
|
+
}
|