creek-jekyll-theme 0.1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +7 -0
- data/LICENSE.txt +21 -0
- data/README.md +81 -0
- data/_config.yml +306 -0
- data/_data/README.md +3 -0
- data/_data/navigation/docs.yml +56 -0
- data/_data/navigation/main.yml +12 -0
- data/_data/navigation.yml +68 -0
- data/_data/ui-text.yml +2024 -0
- data/_includes/analytics-providers/custom.html +3 -0
- data/_includes/analytics-providers/google-gtag.html +9 -0
- data/_includes/analytics-providers/google-universal.html +7 -0
- data/_includes/analytics-providers/google.html +14 -0
- data/_includes/analytics.html +14 -0
- data/_includes/archive-single.html +30 -0
- data/_includes/author-profile-custom-links.html +7 -0
- data/_includes/author-profile.html +246 -0
- data/_includes/breadcrumbs.html +40 -0
- data/_includes/browser-upgrade.html +2 -0
- data/_includes/category-list.html +19 -0
- data/_includes/comment.html +22 -0
- data/_includes/comments-providers/custom.html +3 -0
- data/_includes/comments-providers/custom_scripts.html +3 -0
- data/_includes/comments-providers/discourse.html +13 -0
- data/_includes/comments-providers/disqus.html +15 -0
- data/_includes/comments-providers/facebook.html +8 -0
- data/_includes/comments-providers/giscus.html +24 -0
- data/_includes/comments-providers/scripts.html +20 -0
- data/_includes/comments-providers/staticman.html +40 -0
- data/_includes/comments-providers/staticman_v2.html +40 -0
- data/_includes/comments-providers/utterances.html +21 -0
- data/_includes/comments.html +180 -0
- data/_includes/documents-collection.html +15 -0
- data/_includes/feature_row +41 -0
- data/_includes/figure +9 -0
- data/_includes/footer/custom.html +3 -0
- data/_includes/footer.html +21 -0
- data/_includes/gallery +35 -0
- data/_includes/group-by-array +47 -0
- data/_includes/head/custom.html +15 -0
- data/_includes/head.html +25 -0
- data/_includes/masthead.html +35 -0
- data/_includes/nav_list +26 -0
- data/_includes/page__date.html +6 -0
- data/_includes/page__hero.html +55 -0
- data/_includes/page__hero_video.html +2 -0
- data/_includes/page__meta.html +31 -0
- data/_includes/page__taxonomy.html +7 -0
- data/_includes/paginator.html +69 -0
- data/_includes/post_pagination.html +14 -0
- data/_includes/posts-category.html +5 -0
- data/_includes/posts-tag.html +5 -0
- data/_includes/scripts.html +28 -0
- data/_includes/search/algolia-search-scripts.html +62 -0
- data/_includes/search/google-search-scripts.html +30 -0
- data/_includes/search/lunr-search-scripts.html +10 -0
- data/_includes/search/search_form.html +26 -0
- data/_includes/seo.html +158 -0
- data/_includes/sidebar.html +19 -0
- data/_includes/skip-links.html +7 -0
- data/_includes/social-share.html +11 -0
- data/_includes/tag-list.html +19 -0
- data/_includes/toc +7 -0
- data/_includes/toc.html +182 -0
- data/_includes/video +24 -0
- data/_layouts/archive-taxonomy.html +29 -0
- data/_layouts/archive.html +26 -0
- data/_layouts/categories.html +43 -0
- data/_layouts/category.html +10 -0
- data/_layouts/collection.html +10 -0
- data/_layouts/compress.html +10 -0
- data/_layouts/default.html +41 -0
- data/_layouts/home.html +22 -0
- data/_layouts/posts.html +30 -0
- data/_layouts/search.html +42 -0
- data/_layouts/single.html +95 -0
- data/_layouts/splash.html +22 -0
- data/_layouts/tag.html +10 -0
- data/_layouts/tags.html +43 -0
- data/_pages/404.html +26 -0
- data/_sass/minimal-mistakes/_animations.scss +21 -0
- data/_sass/minimal-mistakes/_archive.scss +463 -0
- data/_sass/minimal-mistakes/_base.scss +339 -0
- data/_sass/minimal-mistakes/_buttons.scss +97 -0
- data/_sass/minimal-mistakes/_footer.scss +85 -0
- data/_sass/minimal-mistakes/_forms.scss +359 -0
- data/_sass/minimal-mistakes/_masthead.scss +93 -0
- data/_sass/minimal-mistakes/_mixins.scss +92 -0
- data/_sass/minimal-mistakes/_navigation.scss +573 -0
- data/_sass/minimal-mistakes/_notices.scss +109 -0
- data/_sass/minimal-mistakes/_page.scss +578 -0
- data/_sass/minimal-mistakes/_print.scss +252 -0
- data/_sass/minimal-mistakes/_reset.scss +187 -0
- data/_sass/minimal-mistakes/_search.scss +132 -0
- data/_sass/minimal-mistakes/_sidebar.scss +353 -0
- data/_sass/minimal-mistakes/_syntax.scss +324 -0
- data/_sass/minimal-mistakes/_tables.scss +39 -0
- data/_sass/minimal-mistakes/_utilities.scss +593 -0
- data/_sass/minimal-mistakes/_variables.scss +173 -0
- data/_sass/minimal-mistakes/skins/_air.scss +23 -0
- data/_sass/minimal-mistakes/skins/_aqua.scss +34 -0
- data/_sass/minimal-mistakes/skins/_contrast.scss +52 -0
- data/_sass/minimal-mistakes/skins/_dark.scss +30 -0
- data/_sass/minimal-mistakes/skins/_default.scss +5 -0
- data/_sass/minimal-mistakes/skins/_dirt.scss +33 -0
- data/_sass/minimal-mistakes/skins/_mint.scss +24 -0
- data/_sass/minimal-mistakes/skins/_neon.scss +63 -0
- data/_sass/minimal-mistakes/skins/_plum.scss +70 -0
- data/_sass/minimal-mistakes/skins/_sunrise.scss +49 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/_breakpoint.scss +114 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/_context.scss +95 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/_helpers.scss +151 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/_legacy-settings.scss +50 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/_no-query.scss +15 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/_parsers.scss +215 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/_respond-to.scss +82 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/_settings.scss +71 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_double.scss +33 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_query.scss +82 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_resolution.scss +31 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_single.scss +26 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/_triple.scss +36 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_default-pair.scss +21 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_default.scss +22 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/double/_double-string.scss +22 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/resolution/_resolution.scss +60 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/single/_default.scss +13 -0
- data/_sass/minimal-mistakes/vendor/breakpoint/parsers/triple/_default.scss +18 -0
- data/_sass/minimal-mistakes/vendor/magnific-popup/_magnific-popup.scss +649 -0
- data/_sass/minimal-mistakes/vendor/magnific-popup/_settings.scss +46 -0
- data/_sass/minimal-mistakes/vendor/susy/_su.scss +4 -0
- data/_sass/minimal-mistakes/vendor/susy/_susy-prefix.scss +13 -0
- data/_sass/minimal-mistakes/vendor/susy/_susy.scss +5 -0
- data/_sass/minimal-mistakes/vendor/susy/plugins/_svg-grid.scss +5 -0
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_prefix.scss +7 -0
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-api.scss +114 -0
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-grid-math.scss +67 -0
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-settings.scss +14 -0
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-unprefix.scss +18 -0
- data/_sass/minimal-mistakes/vendor/susy/plugins/svg-grid/_svg-utilities.scss +133 -0
- data/_sass/minimal-mistakes/vendor/susy/susy/_api.scss +318 -0
- data/_sass/minimal-mistakes/vendor/susy/susy/_normalize.scss +261 -0
- data/_sass/minimal-mistakes/vendor/susy/susy/_parse.scss +163 -0
- data/_sass/minimal-mistakes/vendor/susy/susy/_settings.scss +329 -0
- data/_sass/minimal-mistakes/vendor/susy/susy/_su-math.scss +441 -0
- data/_sass/minimal-mistakes/vendor/susy/susy/_su-validate.scss +213 -0
- data/_sass/minimal-mistakes/vendor/susy/susy/_syntax-helpers.scss +191 -0
- data/_sass/minimal-mistakes/vendor/susy/susy/_unprefix.scss +56 -0
- data/_sass/minimal-mistakes/vendor/susy/susy/_utilities.scss +167 -0
- data/_sass/minimal-mistakes.scss +40 -0
- data/assets/css/main.scss +9 -0
- data/assets/images/android-chrome-192x192.png +0 -0
- data/assets/images/android-chrome-512x512.png +0 -0
- data/assets/images/apple-touch-icon.png +0 -0
- data/assets/images/browserconfig.xml +9 -0
- data/assets/images/creek-logo.png +0 -0
- data/assets/images/favicon-16x16.png +0 -0
- data/assets/images/favicon-32x32.png +0 -0
- data/assets/images/favicon.ico +0 -0
- data/assets/images/mstile-150x150.png +0 -0
- data/assets/images/safari-pinned-tab.svg +48 -0
- data/assets/images/site-under-construction.png +0 -0
- data/assets/images/site.webmanifest +19 -0
- data/assets/js/_main.js +136 -0
- data/assets/js/lunr/lunr-en.js +73 -0
- data/assets/js/lunr/lunr-gr.js +526 -0
- data/assets/js/lunr/lunr-store.js +84 -0
- data/assets/js/lunr/lunr.js +3475 -0
- data/assets/js/lunr/lunr.min.js +6 -0
- data/assets/js/main.min.js +6 -0
- data/assets/js/plugins/gumshoe.js +484 -0
- data/assets/js/plugins/jquery.ba-throttle-debounce.js +252 -0
- data/assets/js/plugins/jquery.fitvids.js +82 -0
- data/assets/js/plugins/jquery.greedy-navigation.js +127 -0
- data/assets/js/plugins/jquery.magnific-popup.js +1860 -0
- data/assets/js/plugins/smooth-scroll.js +650 -0
- data/assets/js/vendor/jquery/jquery-3.6.0.js +10881 -0
- metadata +233 -0
@@ -0,0 +1,114 @@
|
|
1
|
+
/// Plugin: SVG Grid Image
|
2
|
+
/// ======================
|
3
|
+
/// @group plugin_svg-grid
|
4
|
+
/// @see susy-svg-grid
|
5
|
+
|
6
|
+
|
7
|
+
|
8
|
+
/// ## Overview
|
9
|
+
/// If you want to generate svg-backgrounds
|
10
|
+
/// for help visualizing and debugging your grids,
|
11
|
+
/// import the SVG Grid Plugin.
|
12
|
+
///
|
13
|
+
/// The plugin adds `svg-grid-colors` setting
|
14
|
+
/// to your global defaults,
|
15
|
+
/// which you can override in `$susy`.
|
16
|
+
/// It also provides you with a new function,
|
17
|
+
/// `susy-svg-grid()`,
|
18
|
+
/// which will return inline svg for use in
|
19
|
+
/// backgrounds or generated content.
|
20
|
+
///
|
21
|
+
/// This function come with an unprefixed alias by default,
|
22
|
+
/// using the `svg-grid` import.
|
23
|
+
/// If you only only want prefixed versions of the API,
|
24
|
+
/// import the `svg-grid/prefix` partial instead.
|
25
|
+
///
|
26
|
+
/// @group plugin_svg-grid
|
27
|
+
///
|
28
|
+
/// @example scss - importing the plugin
|
29
|
+
/// // The full path to import Susy will depend on your setup…
|
30
|
+
///
|
31
|
+
/// // unprefixed
|
32
|
+
/// @import 'plugins/svg-grid';
|
33
|
+
///
|
34
|
+
/// // prefixed
|
35
|
+
/// @import 'plugins/svg-grid/prefix';
|
36
|
+
///
|
37
|
+
/// @example scss - generating background grids
|
38
|
+
/// .grid {
|
39
|
+
/// background: susy-svg-grid() no-repeat scroll;
|
40
|
+
/// }
|
41
|
+
|
42
|
+
|
43
|
+
|
44
|
+
// SVG Grid
|
45
|
+
// --------
|
46
|
+
/// Return inline svg-data in to display the grid.
|
47
|
+
///
|
48
|
+
/// @group plugin_svg-grid
|
49
|
+
///
|
50
|
+
/// @param {Map | List} $grid [$susy] -
|
51
|
+
/// Map or shorthand defining the current grid
|
52
|
+
/// @param {Color | List | null} $colors [null] -
|
53
|
+
/// Column color, or list of colors for column-gradient,
|
54
|
+
/// used to override the global `svg-grid-colors` setting
|
55
|
+
/// @param {Length | null} $offset [null] -
|
56
|
+
/// Manually override the default grid-image offset,
|
57
|
+
/// to account for grid edges
|
58
|
+
///
|
59
|
+
/// @return {String} -
|
60
|
+
/// CSS inline-data SVG string, in `url(<svg>)` format,
|
61
|
+
/// for use in image or content properties
|
62
|
+
/// @example scss
|
63
|
+
/// .grid {
|
64
|
+
/// background: susy-svg-grid() no-repeat scroll;
|
65
|
+
/// }
|
66
|
+
@function susy-svg-grid(
|
67
|
+
$grid: $susy,
|
68
|
+
$colors: null,
|
69
|
+
$offset: null
|
70
|
+
) {
|
71
|
+
// Grid parsing & normalizing
|
72
|
+
$grid: susy-compile($grid, $context-only: true);
|
73
|
+
|
74
|
+
// Color and gradient handling
|
75
|
+
$gradient: '';
|
76
|
+
|
77
|
+
@if (not $colors) {
|
78
|
+
$colors: susy-get('svg-grid-colors');
|
79
|
+
}
|
80
|
+
|
81
|
+
@if length($colors) > 1 {
|
82
|
+
$gradient: _susy-svg-gradient($colors);
|
83
|
+
$colors: 'url(%23susy-svg-gradient)';
|
84
|
+
} @else {
|
85
|
+
$colors: _susy-svg-color($colors);
|
86
|
+
}
|
87
|
+
|
88
|
+
// Get a default image-width
|
89
|
+
$span: (
|
90
|
+
'span': map-get($grid, 'columns'),
|
91
|
+
'spread': map-get($grid, 'container-spread'),
|
92
|
+
);
|
93
|
+
$span: map-merge($grid, $span);
|
94
|
+
$image-width: su-call('su-span', $span);
|
95
|
+
$image-width: if((type-of($image-width) == 'number'), $image-width, 100%);
|
96
|
+
|
97
|
+
// SVG construction
|
98
|
+
$columns: map-get($grid, 'columns');
|
99
|
+
$offset: $offset or _susy-svg-offset($grid);
|
100
|
+
|
101
|
+
$attrs: 'fill="#{$colors}" width="#{$image-width}"';
|
102
|
+
$svg: 'data:image/svg+xml,';
|
103
|
+
$svg: $svg + '%3Csvg xmlns="http://www.w3.org/2000/svg" #{$attrs} %3E';
|
104
|
+
$svg: $svg + $gradient;
|
105
|
+
|
106
|
+
@for $column from 1 through length($columns) {
|
107
|
+
$width: susy-span(1 narrow at $column, $grid);
|
108
|
+
$x: _susy-svg-column-position($column, $grid);
|
109
|
+
|
110
|
+
$svg: $svg + _susy-svg-rect($x, $width, $offset);
|
111
|
+
}
|
112
|
+
|
113
|
+
@return url('#{$svg}%3C/svg%3E');
|
114
|
+
}
|
@@ -0,0 +1,67 @@
|
|
1
|
+
// SVG Grid Math
|
2
|
+
// =============
|
3
|
+
|
4
|
+
|
5
|
+
|
6
|
+
// SVG Column Position
|
7
|
+
// -------------------
|
8
|
+
/// Determine the proper horizontal position
|
9
|
+
/// for a column rectangle
|
10
|
+
///
|
11
|
+
/// @access private
|
12
|
+
///
|
13
|
+
/// @param {Integer} $column -
|
14
|
+
/// 1-indexed column location on the grid
|
15
|
+
/// @param {Map} $grid -
|
16
|
+
/// Normalized settings map representing the current grid
|
17
|
+
///
|
18
|
+
/// @return {Length} -
|
19
|
+
/// Horizontal position of svg column rectangle,
|
20
|
+
/// as distance from the grid edge
|
21
|
+
@function _susy-svg-column-position(
|
22
|
+
$column,
|
23
|
+
$grid
|
24
|
+
) {
|
25
|
+
$x: $column - 1;
|
26
|
+
|
27
|
+
@if ($x > 0) {
|
28
|
+
$x: susy-span(first $x wide, $grid);
|
29
|
+
}
|
30
|
+
|
31
|
+
@return $x;
|
32
|
+
}
|
33
|
+
|
34
|
+
|
35
|
+
|
36
|
+
// SVG Offset
|
37
|
+
// ----------
|
38
|
+
/// Determine if a grid image needs to be offset,
|
39
|
+
/// to account for edge gutters.
|
40
|
+
///
|
41
|
+
/// @access private
|
42
|
+
///
|
43
|
+
/// @param {Map} $grid -
|
44
|
+
/// Normalized settings map representing the current grid
|
45
|
+
///
|
46
|
+
/// @return {Length | null} -
|
47
|
+
/// Expected distance from container edge to first column,
|
48
|
+
/// based on spread values and gutter-widths
|
49
|
+
@function _susy-svg-offset(
|
50
|
+
$grid
|
51
|
+
) {
|
52
|
+
$columns: su-valid-columns(map-get($grid, 'columns'));
|
53
|
+
$gutters: su-valid-gutters(map-get($grid, 'gutters'));
|
54
|
+
$container: su-valid-spread(map-get($grid, 'container-spread')) + 1;
|
55
|
+
|
56
|
+
@if ($container == 0) {
|
57
|
+
@return null;
|
58
|
+
}
|
59
|
+
|
60
|
+
$gutter: su-call('su-gutter', $grid);
|
61
|
+
|
62
|
+
@if (type-of($gutter) == 'string') {
|
63
|
+
@return 'calc(#{$container} * #{$gutter} / 2)';
|
64
|
+
}
|
65
|
+
|
66
|
+
@return $container * $gutter / 2;
|
67
|
+
}
|
@@ -0,0 +1,14 @@
|
|
1
|
+
// SVG Settings
|
2
|
+
// ============
|
3
|
+
|
4
|
+
|
5
|
+
// Susy SVG Defaults
|
6
|
+
// =================
|
7
|
+
/// This plugin adds the `svg-grid-colors` property
|
8
|
+
/// and default value to `$_susy-defaults` —
|
9
|
+
/// you can override that value in `$susy`
|
10
|
+
/// or any other grid settings map.
|
11
|
+
/// @group plugin_svg-grid
|
12
|
+
$_susy-defaults: map-merge((
|
13
|
+
'svg-grid-colors': hsla(120, 50%, 50%, 0.5) hsla(120, 50%, 75%, 0.5),
|
14
|
+
), $_susy-defaults);
|
@@ -0,0 +1,18 @@
|
|
1
|
+
// Unprefix Susy SVG Grid
|
2
|
+
// ======================
|
3
|
+
|
4
|
+
|
5
|
+
|
6
|
+
// SVG Grid
|
7
|
+
// --------
|
8
|
+
/// Un-prefixed alias for `susy-svg-grid`
|
9
|
+
///
|
10
|
+
/// @group plugin_svg-grid
|
11
|
+
/// @alias susy-svg-grid
|
12
|
+
@function svg-grid(
|
13
|
+
$grid: $susy,
|
14
|
+
$colors: susy-get('svg-grid-colors'),
|
15
|
+
$offset: null
|
16
|
+
) {
|
17
|
+
@return susy-svg-grid($grid, $colors, $offset);
|
18
|
+
}
|
@@ -0,0 +1,133 @@
|
|
1
|
+
// SVG Utilities
|
2
|
+
// =============
|
3
|
+
|
4
|
+
|
5
|
+
|
6
|
+
// SVG Validate Units
|
7
|
+
// ------------------
|
8
|
+
/// Make sure a length is supported in svg
|
9
|
+
///
|
10
|
+
/// @access private
|
11
|
+
///
|
12
|
+
/// @param {Length} $length -
|
13
|
+
/// The length to validate
|
14
|
+
/// @param {String} $name [null] -
|
15
|
+
/// Optional name of length origin,
|
16
|
+
/// for error reporting
|
17
|
+
///
|
18
|
+
/// @return {Length} -
|
19
|
+
/// An svg-validated length, or comparable valid length
|
20
|
+
@function _susy-svg-validate-units(
|
21
|
+
$length,
|
22
|
+
$name: null
|
23
|
+
) {
|
24
|
+
$_svg-units: ('em', 'ex', 'px', 'pt', 'pc', 'cm', 'mm', 'in', '%');
|
25
|
+
$string: type-of($length) == 'string';
|
26
|
+
|
27
|
+
@if ($length == 0) or ($string) or index($_svg-units, unit($length)) {
|
28
|
+
@return $length;
|
29
|
+
}
|
30
|
+
|
31
|
+
@return _susy-error(
|
32
|
+
'`#{unit($length)}` #{$name} units are not supported in SVG',
|
33
|
+
'_susy-svg-validate-units');
|
34
|
+
}
|
35
|
+
|
36
|
+
|
37
|
+
|
38
|
+
// SVG Rect
|
39
|
+
// --------
|
40
|
+
/// Build a single svg rectangle
|
41
|
+
///
|
42
|
+
/// @access private
|
43
|
+
///
|
44
|
+
/// @param {Length} $x -
|
45
|
+
/// Horizontal position for the rectangle
|
46
|
+
/// @param {Length} $width -
|
47
|
+
/// Width of the rectangle
|
48
|
+
/// @param {Length} $offset [null] -
|
49
|
+
/// Offset the rectangle, to account for edge gutters
|
50
|
+
///
|
51
|
+
/// @return {String} -
|
52
|
+
/// Escaped string representing one svg rectangle
|
53
|
+
@function _susy-svg-rect(
|
54
|
+
$x,
|
55
|
+
$width,
|
56
|
+
$offset: null
|
57
|
+
) {
|
58
|
+
$x: _susy-svg-validate-units($x);
|
59
|
+
$width: _susy-svg-validate-units($width);
|
60
|
+
$offset: if($offset == 0, null, $offset);
|
61
|
+
|
62
|
+
@if (type-of($offset) == 'number') and (type-of($x) == 'number') {
|
63
|
+
@if comparable($x, $offset) {
|
64
|
+
$x: $x + $offset;
|
65
|
+
} @else {
|
66
|
+
$x: 'calc(#{$x} + #{$offset})';
|
67
|
+
}
|
68
|
+
} @else if $offset and ($x != 0) {
|
69
|
+
$x: 'calc(#{$x} + #{$offset})';
|
70
|
+
} @else if $offset {
|
71
|
+
$x: $offset;
|
72
|
+
}
|
73
|
+
|
74
|
+
@return '%3Crect x="#{$x}" width="#{$width}" height="100%"/%3E';
|
75
|
+
}
|
76
|
+
|
77
|
+
|
78
|
+
|
79
|
+
// SVG Color
|
80
|
+
// ---------
|
81
|
+
/// Stringify colors, and escape hex symbol
|
82
|
+
///
|
83
|
+
/// @access private
|
84
|
+
///
|
85
|
+
/// @param {Color} $color -
|
86
|
+
/// Color to stringify and escape
|
87
|
+
///
|
88
|
+
/// @return {String} -
|
89
|
+
/// Escaped string value of color
|
90
|
+
@function _susy-svg-color(
|
91
|
+
$color
|
92
|
+
) {
|
93
|
+
$color: inspect($color); // convert to string
|
94
|
+
|
95
|
+
@if (str-index($color, '#') == 1) {
|
96
|
+
$color: '%23' + str-slice($color, 2);
|
97
|
+
}
|
98
|
+
|
99
|
+
@return $color;
|
100
|
+
}
|
101
|
+
|
102
|
+
|
103
|
+
|
104
|
+
// SVG Gradient
|
105
|
+
// ------------
|
106
|
+
/// Create a multi-color svg gradient
|
107
|
+
///
|
108
|
+
/// @access private
|
109
|
+
///
|
110
|
+
/// @param {List} $colors -
|
111
|
+
/// List of colors to be equally spaced from `0%` to `100%`
|
112
|
+
/// in each column rectangle
|
113
|
+
///
|
114
|
+
/// @return {String} -
|
115
|
+
/// Escaped string representing one svg gradient
|
116
|
+
/// (`id="susy-svg-gradient"`)
|
117
|
+
@function _susy-svg-gradient(
|
118
|
+
$colors
|
119
|
+
) {
|
120
|
+
$gradient: '%3Cdefs%3E%3ClinearGradient spreadMethod="pad"';
|
121
|
+
$gradient: '#{$gradient} id="susy-svg-gradient"';
|
122
|
+
$gradient: '#{$gradient} x1="0%" y1="0%" x2="100%" y2="0%"%3E';
|
123
|
+
|
124
|
+
@for $i from 1 through length($colors) {
|
125
|
+
$color: _susy-svg-color(nth($colors, $i));
|
126
|
+
$offset: percentage(($i - 1) / (length($colors) - 1));
|
127
|
+
$stop: '%3Cstop offset="#{$offset}" style="stop-color:#{$color};" /%3E';
|
128
|
+
|
129
|
+
$gradient: $gradient + $stop;
|
130
|
+
}
|
131
|
+
|
132
|
+
@return $gradient + '%3C/linearGradient%3E%3C/defs%3E';
|
133
|
+
}
|
@@ -0,0 +1,318 @@
|
|
1
|
+
/// Susy3 API Functions
|
2
|
+
/// ===================
|
3
|
+
/// These three functions form the core of Susy's
|
4
|
+
/// layout-building grid API.
|
5
|
+
///
|
6
|
+
/// - Use `span()` and `gutter()` to return any grid-width,
|
7
|
+
/// and apply the results wherever you need them:
|
8
|
+
/// CSS `width`, `margin`, `padding`, `flex-basis`, `transform`, etc.
|
9
|
+
/// - For asymmetrical-fluid grids,
|
10
|
+
/// `slice()` can help manage your nesting context.
|
11
|
+
///
|
12
|
+
/// All three functions come with an unprefixed alias by default,
|
13
|
+
/// using the `susy` import.
|
14
|
+
/// Import the `susy-prefix` partial instead,
|
15
|
+
/// if you only only want prefixed versions of the API.
|
16
|
+
///
|
17
|
+
/// This is a thin syntax-sugar shell around
|
18
|
+
/// the "Su" core-math functions: `su-span`, `su-gutter`, and `su-slice`.
|
19
|
+
/// If you prefer the more constrained syntax of the math engine,
|
20
|
+
/// you are welcome to use those functions instead.
|
21
|
+
///
|
22
|
+
/// @group b-api
|
23
|
+
/// @see susy-span
|
24
|
+
/// @see susy-gutter
|
25
|
+
/// @see susy-slice
|
26
|
+
/// @see su-span
|
27
|
+
/// @see su-gutter
|
28
|
+
/// @see su-slice
|
29
|
+
|
30
|
+
|
31
|
+
|
32
|
+
/// ## Shorthand
|
33
|
+
///
|
34
|
+
/// All functions draw on the same shorthand syntax in two parts,
|
35
|
+
/// seperated by the word `of`.
|
36
|
+
///
|
37
|
+
/// ### Span Syntax: `<width>` [`<location>` `<spread>`]
|
38
|
+
/// The first part describes the
|
39
|
+
/// **span** width, location, and spread in any order.
|
40
|
+
/// Only the width is required:
|
41
|
+
///
|
42
|
+
/// - `span(2)` will return the width of 2 columns.
|
43
|
+
/// - `span(3 wide)` will return 3-columns, with an additional gutter.
|
44
|
+
/// - location is only needed with asymmetrical grids,
|
45
|
+
/// where `span(3 at 2)` will return the width of
|
46
|
+
/// specific columns on the grid.
|
47
|
+
/// Since these are functions, they will not handle placement for you.
|
48
|
+
///
|
49
|
+
/// ### Context Syntax: `[of <columns> <container-spread> <gutters>]`
|
50
|
+
/// The second half of Susy's shorthand
|
51
|
+
/// describes the grid-**context** –
|
52
|
+
/// available columns, container-spread, and optional gutter override –
|
53
|
+
/// in any order.
|
54
|
+
/// All of these settings have globally-defined defaults:
|
55
|
+
///
|
56
|
+
/// - `span(2 of 6)` will set the context to
|
57
|
+
/// a slice of 6 columns from the global grid.
|
58
|
+
/// More details below.
|
59
|
+
/// - `span(2 of 12 wide)` changes the container-spread
|
60
|
+
/// as well as the column-context.
|
61
|
+
/// - `span(2 of 12 set-gutters 0.5em)`
|
62
|
+
/// will override the global gutters setting
|
63
|
+
/// for this one calculation.
|
64
|
+
///
|
65
|
+
/// A single unitless number for `columns`
|
66
|
+
/// will be treated as a slice of the parent grid.
|
67
|
+
/// On a grid with `columns: susy-repeat(12, 120px)`,
|
68
|
+
/// the shorthand `of 4` will use the parent `120px` column-width.
|
69
|
+
/// You can also be more explicit,
|
70
|
+
/// and say `of susy-repeat(4, 100px)`.
|
71
|
+
/// If you are using asymmetrical grids,
|
72
|
+
/// like `columns: (1 1 2 3 5 8)`,
|
73
|
+
/// Susy can't slice it for you without knowing which columns you want.
|
74
|
+
/// The `slice` function accepts exactly the same syntax as `span`,
|
75
|
+
/// but returns a list of columns rather than a width.
|
76
|
+
/// Use it in your context like `of slice(first 3)`.
|
77
|
+
///
|
78
|
+
/// @group b-api
|
79
|
+
|
80
|
+
|
81
|
+
|
82
|
+
// Susy Span
|
83
|
+
// ---------
|
84
|
+
/// This is the primary function in Susy —
|
85
|
+
/// used to return the width of a span across one or more columns,
|
86
|
+
/// and any relevant gutters along the way.
|
87
|
+
/// With the default settings,
|
88
|
+
/// `span(3)` will return the width of 3 columns,
|
89
|
+
/// and the 2 intermediate gutters.
|
90
|
+
/// This can be used to set the `width` property of grid elements,
|
91
|
+
/// or `margin` and `padding`
|
92
|
+
/// to push, pull, and pad your elements.
|
93
|
+
///
|
94
|
+
/// - This is a thin syntax-sugar shell around
|
95
|
+
/// the core-math `su-span()` function.
|
96
|
+
/// - The un-prefixed alias `span()` is available by default.
|
97
|
+
///
|
98
|
+
/// @group b-api
|
99
|
+
/// @see su-span
|
100
|
+
/// @see $susy
|
101
|
+
///
|
102
|
+
/// @param {list} $span -
|
103
|
+
/// Shorthand expression to define the width of the span,
|
104
|
+
/// optionally containing:
|
105
|
+
/// - a count, length, or column-list span.
|
106
|
+
/// - `at $n`, `first`, or `last` location on asymmetrical grids,
|
107
|
+
/// where `at 1 == first`,
|
108
|
+
/// and `last` will calculate the proper location
|
109
|
+
/// based on columns and span.
|
110
|
+
/// - `narrow`, `wide`, or `wider` for optionally spreading
|
111
|
+
/// across adjacent gutters.
|
112
|
+
/// - `of $n <spread>` for available grid columns
|
113
|
+
/// and spread of the container.
|
114
|
+
/// Span counts like `of 6` are valid
|
115
|
+
/// in the context of symmetrical grids,
|
116
|
+
/// where Susy can safely infer a slice of the parent columns.
|
117
|
+
/// - and `set-gutters $n` to override global gutter settings.
|
118
|
+
///
|
119
|
+
/// @param {map} $config [()] -
|
120
|
+
/// Optional map of Susy grid configuration settings.
|
121
|
+
/// See `$susy` documentation for details.
|
122
|
+
///
|
123
|
+
/// @return {length} -
|
124
|
+
/// Calculated length value, using the units given,
|
125
|
+
/// or converting to `%` for fraction-based grids,
|
126
|
+
/// or a full `calc` function when units/fractions
|
127
|
+
/// are not comparable outside the browser.
|
128
|
+
///
|
129
|
+
/// @example scss - span half the grid
|
130
|
+
/// .foo {
|
131
|
+
/// // the result is a bit under 50% to account for gutters
|
132
|
+
/// width: susy-span(6 of 12);
|
133
|
+
/// }
|
134
|
+
///
|
135
|
+
/// @example scss - span a specific segment of asymmetrical grid
|
136
|
+
/// .foo {
|
137
|
+
/// width: susy-span(3 at 3 of (1 2 3 5 8));
|
138
|
+
/// }
|
139
|
+
@function susy-span(
|
140
|
+
$span,
|
141
|
+
$config: ()
|
142
|
+
) {
|
143
|
+
$output: susy-compile($span, $config);
|
144
|
+
|
145
|
+
@if map-get($output, 'span') {
|
146
|
+
@return su-call('su-span', $output);
|
147
|
+
}
|
148
|
+
|
149
|
+
$actual: '[#{type-of($span)}] `#{inspect($span)}`';
|
150
|
+
@return _susy-error(
|
151
|
+
'Unable to determine span value from #{$actual}.',
|
152
|
+
'susy-span');
|
153
|
+
}
|
154
|
+
|
155
|
+
|
156
|
+
|
157
|
+
// Susy Gutter
|
158
|
+
// -----------
|
159
|
+
/// The gutter function returns
|
160
|
+
/// the width of a single gutter on your grid,
|
161
|
+
/// to be applied where you see fit –
|
162
|
+
/// on `margins`, `padding`, `transform`, or element `width`.
|
163
|
+
///
|
164
|
+
/// - This is a thin syntax-sugar shell around
|
165
|
+
/// the core-math `su-gutter()` function.
|
166
|
+
/// - The un-prefixed alias `gutter()` is available by default.
|
167
|
+
///
|
168
|
+
/// @group b-api
|
169
|
+
/// @see su-gutter
|
170
|
+
/// @see $susy
|
171
|
+
///
|
172
|
+
/// @param {list | number} $context [null] -
|
173
|
+
/// Optional context for nested gutters,
|
174
|
+
/// including shorthand for
|
175
|
+
/// `columns`, `gutters`, and `container-spread`
|
176
|
+
/// (additional shorthand will be ignored)
|
177
|
+
///
|
178
|
+
/// @param {map} $config [()] -
|
179
|
+
/// Optional map of Susy grid configuration settings.
|
180
|
+
/// See `$susy` documentation for details.
|
181
|
+
///
|
182
|
+
/// @return {length} -
|
183
|
+
/// Width of a gutter as `%` of current context,
|
184
|
+
/// or in the units defined by `column-width` when available
|
185
|
+
///
|
186
|
+
/// @example scss - add gutters before or after an element
|
187
|
+
/// .floats {
|
188
|
+
/// float: left;
|
189
|
+
/// width: span(3 of 6);
|
190
|
+
/// margin-left: gutter(of 6);
|
191
|
+
/// }
|
192
|
+
///
|
193
|
+
/// @example scss - add gutters to padding
|
194
|
+
/// .flexbox {
|
195
|
+
/// flex: 1 1 span(3 wide of 6 wide);
|
196
|
+
/// padding: gutter(of 6) / 2;
|
197
|
+
/// }
|
198
|
+
///
|
199
|
+
@function susy-gutter(
|
200
|
+
$context: susy-get('columns'),
|
201
|
+
$config: ()
|
202
|
+
) {
|
203
|
+
$context: susy-compile($context, $config, 'context-only');
|
204
|
+
|
205
|
+
@return su-call('su-gutter', $context);
|
206
|
+
}
|
207
|
+
|
208
|
+
|
209
|
+
|
210
|
+
// Susy Slice
|
211
|
+
// ----------
|
212
|
+
/// Working with asymmetrical grids (un-equal column widths)
|
213
|
+
/// can be challenging –
|
214
|
+
/// expecially when they involve fluid/fractional elements.
|
215
|
+
/// Describing a context `of (15em 6em 6em 6em 15em)` is a lot
|
216
|
+
/// to put inside the span or gutter function shorthand.
|
217
|
+
/// This slice function returns a sub-slice of asymmetrical columns to use
|
218
|
+
/// for a nested context.
|
219
|
+
/// `slice(3 at 2)` will give you a subset of the global grid,
|
220
|
+
/// spanning 3 columns, starting with the second.
|
221
|
+
///
|
222
|
+
/// - This is a thin syntax-sugar shell around
|
223
|
+
/// the core-math `su-slice()` function.
|
224
|
+
/// - The un-prefixed alias `slice()` is available by default.
|
225
|
+
///
|
226
|
+
/// @group b-api
|
227
|
+
/// @see su-slice
|
228
|
+
/// @see $susy
|
229
|
+
///
|
230
|
+
/// @param {list} $span -
|
231
|
+
/// Shorthand expression to define the subset span, optionally containing:
|
232
|
+
/// - `at $n`, `first`, or `last` location on asymmetrical grids;
|
233
|
+
/// - `of $n <spread>` for available grid columns
|
234
|
+
/// and spread of the container
|
235
|
+
/// - Span-counts like `of 6` are only valid
|
236
|
+
/// in the context of symmetrical grids
|
237
|
+
/// - Valid spreads include `narrow`, `wide`, or `wider`
|
238
|
+
///
|
239
|
+
/// @param {map} $config [()] -
|
240
|
+
/// Optional map of Susy grid configuration settings.
|
241
|
+
/// See `$susy` documentation for details.
|
242
|
+
///
|
243
|
+
/// @return {list} -
|
244
|
+
/// Subset list of columns for use for a nested context
|
245
|
+
///
|
246
|
+
/// @example scss - Return a nested segment of asymmetrical grid
|
247
|
+
/// $context: susy-slice(3 at 3 of (1 2 3 5 8));
|
248
|
+
/// /* $context: #{$context}; */
|
249
|
+
@function susy-slice(
|
250
|
+
$span,
|
251
|
+
$config: ()
|
252
|
+
) {
|
253
|
+
$span: susy-compile($span, $config);
|
254
|
+
|
255
|
+
@return su-call('su-slice', $span);
|
256
|
+
}
|
257
|
+
|
258
|
+
|
259
|
+
|
260
|
+
/// ## Building Grids
|
261
|
+
/// The web has come a long way
|
262
|
+
/// since the days of double-margin-hacks
|
263
|
+
/// and inconsistent subpixel rounding.
|
264
|
+
/// In addition to floats and tables,
|
265
|
+
/// we can now use much more powerful tools,
|
266
|
+
/// like flexbox and CSS grid,
|
267
|
+
/// to build more interesting and responsive layouts.
|
268
|
+
///
|
269
|
+
/// With Susy3, we hope you'll start moving in that direction.
|
270
|
+
/// You can still build classic 12-column Grid Systems,
|
271
|
+
/// and we'll help you get there,
|
272
|
+
/// but Susy3 is primarily designed for a grid-math-on-demand
|
273
|
+
/// approach to layout:
|
274
|
+
/// applying our functions only where you really need grid math.
|
275
|
+
/// Read the [intro article by OddBird][welcome] for more details.
|
276
|
+
///
|
277
|
+
/// [welcome]: http://oddbird.net/2017/06/28/susy3/
|
278
|
+
///
|
279
|
+
/// @group b-api
|
280
|
+
/// @link http://oddbird.net/2017/06/28/susy3/ Article: Welcome to Susy3
|
281
|
+
///
|
282
|
+
/// @example scss - floats
|
283
|
+
/// .float {
|
284
|
+
/// width: span(3);
|
285
|
+
/// margin-right: gutter();
|
286
|
+
/// }
|
287
|
+
///
|
288
|
+
/// @example scss - flexbox
|
289
|
+
/// .flexbox {
|
290
|
+
/// flex: 1 1 span(3);
|
291
|
+
/// // half a gutter on either side…
|
292
|
+
/// padding: 0 gutter() / 2;
|
293
|
+
/// }
|
294
|
+
///
|
295
|
+
/// @example scss - pushing and pulling
|
296
|
+
/// .push-3 {
|
297
|
+
/// margin-left: span(3 wide);
|
298
|
+
/// }
|
299
|
+
///
|
300
|
+
/// .pull-3 {
|
301
|
+
/// margin-left: 0 - span(3 wide);
|
302
|
+
/// }
|
303
|
+
///
|
304
|
+
/// @example scss - building an attribute system
|
305
|
+
/// // markup example: <div data-span="last 3"></div>
|
306
|
+
/// [data-span] {
|
307
|
+
/// float: left;
|
308
|
+
///
|
309
|
+
/// &:not([data-span*='last']) {
|
310
|
+
/// margin-right: gutter();
|
311
|
+
/// }
|
312
|
+
/// }
|
313
|
+
///
|
314
|
+
/// @for $span from 1 through length(susy-get('columns')) {
|
315
|
+
/// [data-span*='#{$span}'] {
|
316
|
+
/// width: span($span);
|
317
|
+
/// }
|
318
|
+
/// }
|