garth-jekyll-theme 0.1.9 → 0.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/_includes/footer.html +1 -1
- data/_includes/header.html +22 -6
- data/_includes/pagination.html +16 -12
- data/_includes/posts.html +2 -2
- data/_layouts/default.html +5 -0
- data/_layouts/front.html +3 -5
- data/_layouts/page.html +3 -5
- data/_layouts/post.html +4 -6
- data/_sass/_sassline-base.scss +7 -0
- data/_sass/sassline-base/_layouts.scss +282 -0
- data/_sass/sassline-base/_mixins.scss +420 -0
- data/_sass/sassline-base/_modular-scale.scss +66 -0
- data/_sass/sassline-base/_reset.scss +13 -0
- data/_sass/sassline-base/_typography.scss +363 -0
- data/_sass/sassline-base/_variables.scss +96 -0
- data/_sass/sassline.scss +1 -0
- data/_sass/style.scss +12 -0
- data/_sass/theme.scss +74 -20
- metadata +11 -79
- data/_includes/favicons.html +0 -18
- data/_includes/nav.html +0 -14
- data/_includes/scripts.js +0 -14
- data/_sass/base/_base.scss +0 -14
- data/_sass/base/_buttons.scss +0 -35
- data/_sass/base/_forms.scss +0 -83
- data/_sass/base/_layout.scss +0 -9
- data/_sass/base/_lists.scss +0 -19
- data/_sass/base/_media.scss +0 -9
- data/_sass/base/_tables.scss +0 -24
- data/_sass/base/_typography.scss +0 -42
- data/_sass/base/_variables.scss +0 -46
- data/_sass/bourbon/_bourbon.scss +0 -52
- data/_sass/bourbon/bourbon/helpers/_buttons-list.scss +0 -14
- data/_sass/bourbon/bourbon/helpers/_scales.scss +0 -27
- data/_sass/bourbon/bourbon/helpers/_text-inputs-list.scss +0 -26
- data/_sass/bourbon/bourbon/library/_border-color.scss +0 -25
- data/_sass/bourbon/bourbon/library/_border-radius.scss +0 -85
- data/_sass/bourbon/bourbon/library/_border-style.scss +0 -24
- data/_sass/bourbon/bourbon/library/_border-width.scss +0 -24
- data/_sass/bourbon/bourbon/library/_buttons.scss +0 -84
- data/_sass/bourbon/bourbon/library/_clearfix.scss +0 -25
- data/_sass/bourbon/bourbon/library/_contrast-switch.scss +0 -60
- data/_sass/bourbon/bourbon/library/_ellipsis.scss +0 -37
- data/_sass/bourbon/bourbon/library/_font-face.scss +0 -65
- data/_sass/bourbon/bourbon/library/_font-stacks.scss +0 -87
- data/_sass/bourbon/bourbon/library/_hide-text.scss +0 -24
- data/_sass/bourbon/bourbon/library/_hide-visually.scss +0 -65
- data/_sass/bourbon/bourbon/library/_margin.scss +0 -34
- data/_sass/bourbon/bourbon/library/_modular-scale.scss +0 -113
- data/_sass/bourbon/bourbon/library/_padding.scss +0 -34
- data/_sass/bourbon/bourbon/library/_position.scss +0 -54
- data/_sass/bourbon/bourbon/library/_prefixer.scss +0 -38
- data/_sass/bourbon/bourbon/library/_shade.scss +0 -33
- data/_sass/bourbon/bourbon/library/_size.scss +0 -49
- data/_sass/bourbon/bourbon/library/_strip-unit.scss +0 -17
- data/_sass/bourbon/bourbon/library/_text-inputs.scss +0 -163
- data/_sass/bourbon/bourbon/library/_timing-functions.scss +0 -38
- data/_sass/bourbon/bourbon/library/_tint.scss +0 -33
- data/_sass/bourbon/bourbon/library/_triangle.scss +0 -82
- data/_sass/bourbon/bourbon/library/_value-prefixer.scss +0 -38
- data/_sass/bourbon/bourbon/library/_word-wrap.scss +0 -29
- data/_sass/bourbon/bourbon/settings/_settings.scss +0 -51
- data/_sass/bourbon/bourbon/utilities/_assign-inputs.scss +0 -29
- data/_sass/bourbon/bourbon/utilities/_collapse-directionals.scss +0 -51
- data/_sass/bourbon/bourbon/utilities/_directional-values.scss +0 -58
- data/_sass/bourbon/bourbon/utilities/_font-source-declaration.scss +0 -52
- data/_sass/bourbon/bourbon/utilities/_retrieve-bourbon-setting.scss +0 -16
- data/_sass/bourbon/bourbon/utilities/_unpack.scss +0 -29
- data/_sass/bourbon/bourbon/validators/_contains-falsy.scss +0 -20
- data/_sass/bourbon/bourbon/validators/_contains.scss +0 -27
- data/_sass/bourbon/bourbon/validators/_is-color.scss +0 -13
- data/_sass/bourbon/bourbon/validators/_is-length.scss +0 -15
- data/_sass/bourbon/bourbon/validators/_is-light.scss +0 -23
- data/_sass/bourbon/bourbon/validators/_is-number.scss +0 -15
- data/_sass/bourbon/bourbon/validators/_is-size.scss +0 -18
- data/_sass/neat/_neat-helpers.scss +0 -8
- data/_sass/neat/_neat.scss +0 -23
- data/_sass/neat/functions/_new-breakpoint.scss +0 -49
- data/_sass/neat/functions/_private.scss +0 -114
- data/_sass/neat/grid/_box-sizing.scss +0 -15
- data/_sass/neat/grid/_direction-context.scss +0 -33
- data/_sass/neat/grid/_display-context.scss +0 -28
- data/_sass/neat/grid/_fill-parent.scss +0 -22
- data/_sass/neat/grid/_media.scss +0 -92
- data/_sass/neat/grid/_omega.scss +0 -87
- data/_sass/neat/grid/_outer-container.scss +0 -38
- data/_sass/neat/grid/_pad.scss +0 -25
- data/_sass/neat/grid/_private.scss +0 -35
- data/_sass/neat/grid/_row.scss +0 -52
- data/_sass/neat/grid/_shift.scss +0 -50
- data/_sass/neat/grid/_span-columns.scss +0 -94
- data/_sass/neat/grid/_to-deprecate.scss +0 -97
- data/_sass/neat/grid/_visual-grid.scss +0 -42
- data/_sass/neat/settings/_disable-warnings.scss +0 -13
- data/_sass/neat/settings/_grid.scss +0 -51
- data/_sass/neat/settings/_visual-grid.scss +0 -27
@@ -1,25 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// Provides an easy way to include a clearfix for containing floats.
|
4
|
-
///
|
5
|
-
/// @link http://goo.gl/yP5hiZ
|
6
|
-
///
|
7
|
-
/// @example scss
|
8
|
-
/// .element {
|
9
|
-
/// @include clearfix;
|
10
|
-
/// }
|
11
|
-
///
|
12
|
-
/// @example css
|
13
|
-
/// .element::after {
|
14
|
-
/// clear: both;
|
15
|
-
/// content: "";
|
16
|
-
/// display: block;
|
17
|
-
/// }
|
18
|
-
|
19
|
-
@mixin clearfix {
|
20
|
-
&::after {
|
21
|
-
clear: both;
|
22
|
-
content: "";
|
23
|
-
display: block;
|
24
|
-
}
|
25
|
-
}
|
@@ -1,60 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// Switches between two colors based on the lightness of a another color. Great
|
4
|
-
/// for building button styles.
|
5
|
-
///
|
6
|
-
/// @argument {color} $base-color
|
7
|
-
/// The color to evaluate lightness against.
|
8
|
-
///
|
9
|
-
/// @argument {color} $dark-color [#000]
|
10
|
-
/// The color to be output when `$base-color` is light.
|
11
|
-
///
|
12
|
-
/// @argument {color} $light-color [#fff]
|
13
|
-
/// The color to be output when `$base-color` is dark.
|
14
|
-
///
|
15
|
-
/// @return {color}
|
16
|
-
///
|
17
|
-
/// @example scss
|
18
|
-
/// .first-element {
|
19
|
-
/// color: contrast-switch(#bae6e6);
|
20
|
-
/// }
|
21
|
-
///
|
22
|
-
/// .second-element {
|
23
|
-
/// $button-color: #2d72d9;
|
24
|
-
/// background-color: $button-color;
|
25
|
-
/// color: contrast-switch($button-color, #222, #eee);
|
26
|
-
/// }
|
27
|
-
///
|
28
|
-
/// @example css
|
29
|
-
/// .first-element {
|
30
|
-
/// color: #000;
|
31
|
-
/// }
|
32
|
-
///
|
33
|
-
/// .second-element {
|
34
|
-
/// background-color: #2d72d9;
|
35
|
-
/// color: #eee;
|
36
|
-
/// }
|
37
|
-
///
|
38
|
-
/// @require {function} _is-light
|
39
|
-
///
|
40
|
-
/// @since 5.0.0
|
41
|
-
|
42
|
-
@function contrast-switch(
|
43
|
-
$base-color,
|
44
|
-
$dark-color: _retrieve-bourbon-setting("contrast-switch-dark-color"),
|
45
|
-
$light-color: _retrieve-bourbon-setting("contrast-switch-light-color")
|
46
|
-
) {
|
47
|
-
|
48
|
-
@if not _is-color($base-color) {
|
49
|
-
@error "`#{$base-color}` is not a valid color for the `$base-color` " +
|
50
|
-
"argument in the `contrast-switch` function.";
|
51
|
-
} @else if not _is-color($dark-color) {
|
52
|
-
@error "`#{$dark-color}` is not a valid color for the `$dark-color` " +
|
53
|
-
"argument in the `contrast-switch` function.";
|
54
|
-
} @else if not _is-color($light-color) {
|
55
|
-
@error "`#{$light-color}` is not a valid color for the `$light-color` " +
|
56
|
-
"argument in the `contrast-switch` function.";
|
57
|
-
} @else {
|
58
|
-
@return if(_is-light($base-color), $dark-color, $light-color);
|
59
|
-
}
|
60
|
-
}
|
@@ -1,37 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// Truncates text and adds an ellipsis to represent overflow.
|
4
|
-
///
|
5
|
-
/// @argument {number} $width [100%]
|
6
|
-
/// The `max-width` for the string to respect before being truncated.
|
7
|
-
///
|
8
|
-
/// @argument {string} $display [inline-block]
|
9
|
-
/// Sets the display-value of the element.
|
10
|
-
///
|
11
|
-
/// @example scss
|
12
|
-
/// .element {
|
13
|
-
/// @include ellipsis;
|
14
|
-
/// }
|
15
|
-
///
|
16
|
-
/// @example css
|
17
|
-
/// .element {
|
18
|
-
/// display: inline-block;
|
19
|
-
/// max-width: 100%;
|
20
|
-
/// overflow: hidden;
|
21
|
-
/// text-overflow: ellipsis;
|
22
|
-
/// white-space: nowrap;
|
23
|
-
/// word-wrap: normal;
|
24
|
-
/// }
|
25
|
-
|
26
|
-
@mixin ellipsis(
|
27
|
-
$width: 100%,
|
28
|
-
$display: inline-block
|
29
|
-
) {
|
30
|
-
|
31
|
-
display: $display;
|
32
|
-
max-width: $width;
|
33
|
-
overflow: hidden;
|
34
|
-
text-overflow: ellipsis;
|
35
|
-
white-space: nowrap;
|
36
|
-
word-wrap: normal;
|
37
|
-
}
|
@@ -1,65 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// Generates an `@font-face` declaration. You can choose the specific file
|
4
|
-
/// formats you need to output; the mixin supports `eot`, `ttf`, `svg`, `woff2`
|
5
|
-
/// and `woff`. The mixin also supports usage with the Rails Asset Pipeline,
|
6
|
-
/// which you can enable per use, or globally in the `$bourbon()` settings.
|
7
|
-
///
|
8
|
-
/// @argument {string} $font-family
|
9
|
-
///
|
10
|
-
/// @argument {string} $file-path
|
11
|
-
///
|
12
|
-
/// @argument {string} $asset-pipeline [false]
|
13
|
-
/// Set to `true` if you’re using the Rails Asset Pipeline (place the fonts
|
14
|
-
/// in `app/assets/fonts/`).
|
15
|
-
///
|
16
|
-
/// @argument {string | list} $file-formats [("ttf", "woff2", "woff")]
|
17
|
-
/// Pass a list of file formats to support,
|
18
|
-
/// for example ("eot", "ttf", "svg", "woff2", "woff").
|
19
|
-
///
|
20
|
-
/// @content
|
21
|
-
/// Any additional CSS properties that are included in the `@include`
|
22
|
-
/// directive will be output within the `@font-face` declaration, e.g. you can
|
23
|
-
/// pass in `font-weight`, `font-style` and/or `unicode-range`.
|
24
|
-
///
|
25
|
-
/// @example scss
|
26
|
-
/// @include font-face(
|
27
|
-
/// "source-sans-pro",
|
28
|
-
/// "fonts/source-sans-pro-regular",
|
29
|
-
/// ("woff2", "woff")
|
30
|
-
/// ) {
|
31
|
-
/// font-style: normal;
|
32
|
-
/// font-weight: 400;
|
33
|
-
/// }
|
34
|
-
///
|
35
|
-
/// @example css
|
36
|
-
/// @font-face {
|
37
|
-
/// font-family: "source-sans-pro";
|
38
|
-
/// src: url("fonts/source-sans-pro-regular.woff2") format("woff2"),
|
39
|
-
/// url("fonts/source-sans-pro-regular.woff") format("woff");
|
40
|
-
/// font-style: normal;
|
41
|
-
/// font-weight: 400;
|
42
|
-
/// }
|
43
|
-
///
|
44
|
-
/// @require {function} _font-source-declaration
|
45
|
-
///
|
46
|
-
/// @require {function} _retrieve-bourbon-setting
|
47
|
-
|
48
|
-
@mixin font-face(
|
49
|
-
$font-family,
|
50
|
-
$file-path,
|
51
|
-
$file-formats: _retrieve-bourbon-setting("global-font-file-formats"),
|
52
|
-
$asset-pipeline: _retrieve-bourbon-setting("rails-asset-pipeline")
|
53
|
-
) {
|
54
|
-
|
55
|
-
@font-face {
|
56
|
-
font-family: $font-family;
|
57
|
-
src: _font-source-declaration(
|
58
|
-
$font-family,
|
59
|
-
$file-path,
|
60
|
-
$asset-pipeline,
|
61
|
-
$file-formats
|
62
|
-
);
|
63
|
-
@content;
|
64
|
-
}
|
65
|
-
}
|
@@ -1,87 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
////
|
4
|
-
/// @type list
|
5
|
-
///
|
6
|
-
/// @link goo.gl/Cxb26i
|
7
|
-
////
|
8
|
-
|
9
|
-
$font-stack-helvetica: (
|
10
|
-
"Helvetica Neue",
|
11
|
-
"Helvetica",
|
12
|
-
"Arial",
|
13
|
-
sans-serif,
|
14
|
-
);
|
15
|
-
|
16
|
-
$font-stack-lucida-grande: (
|
17
|
-
"Lucida Grande",
|
18
|
-
"Lucida Sans Unicode",
|
19
|
-
"Geneva",
|
20
|
-
"Verdana",
|
21
|
-
sans-serif,
|
22
|
-
);
|
23
|
-
|
24
|
-
$font-stack-verdana: (
|
25
|
-
"Verdana",
|
26
|
-
"Geneva",
|
27
|
-
sans-serif,
|
28
|
-
);
|
29
|
-
|
30
|
-
$font-stack-system: (
|
31
|
-
-apple-system,
|
32
|
-
BlinkMacSystemFont,
|
33
|
-
"Segoe UI",
|
34
|
-
"Roboto",
|
35
|
-
"Oxygen",
|
36
|
-
"Ubuntu",
|
37
|
-
"Cantarell",
|
38
|
-
"Fira Sans",
|
39
|
-
"Droid Sans",
|
40
|
-
"Helvetica Neue",
|
41
|
-
sans-serif,
|
42
|
-
);
|
43
|
-
|
44
|
-
$font-stack-garamond: (
|
45
|
-
"Garamond",
|
46
|
-
"Baskerville",
|
47
|
-
"Baskerville Old Face",
|
48
|
-
"Hoefler Text",
|
49
|
-
"Times New Roman",
|
50
|
-
serif,
|
51
|
-
);
|
52
|
-
|
53
|
-
$font-stack-georgia: (
|
54
|
-
"Georgia",
|
55
|
-
"Times",
|
56
|
-
"Times New Roman",
|
57
|
-
serif,
|
58
|
-
);
|
59
|
-
|
60
|
-
$font-stack-hoefler-text: (
|
61
|
-
"Hoefler Text",
|
62
|
-
"Baskerville Old Face",
|
63
|
-
"Garamond",
|
64
|
-
"Times New Roman",
|
65
|
-
serif,
|
66
|
-
);
|
67
|
-
|
68
|
-
$font-stack-consolas: (
|
69
|
-
"Consolas",
|
70
|
-
"monaco",
|
71
|
-
monospace,
|
72
|
-
);
|
73
|
-
|
74
|
-
$font-stack-courier-new: (
|
75
|
-
"Courier New",
|
76
|
-
"Courier",
|
77
|
-
"Lucida Sans Typewriter",
|
78
|
-
"Lucida Typewriter",
|
79
|
-
monospace,
|
80
|
-
);
|
81
|
-
|
82
|
-
$font-stack-monaco: (
|
83
|
-
"monaco",
|
84
|
-
"Consolas",
|
85
|
-
"Lucida Console",
|
86
|
-
monospace,
|
87
|
-
);
|
@@ -1,24 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// Hides the text in an element, commonly used to show an image instead. Some
|
4
|
-
/// elements will need block-level styles applied.
|
5
|
-
///
|
6
|
-
/// @link http://goo.gl/EvLRIu
|
7
|
-
///
|
8
|
-
/// @example scss
|
9
|
-
/// .element {
|
10
|
-
/// @include hide-text;
|
11
|
-
/// }
|
12
|
-
///
|
13
|
-
/// @example css
|
14
|
-
/// .element {
|
15
|
-
/// overflow: hidden;
|
16
|
-
/// text-indent: 101%;
|
17
|
-
/// white-space: nowrap;
|
18
|
-
/// }
|
19
|
-
|
20
|
-
@mixin hide-text {
|
21
|
-
overflow: hidden;
|
22
|
-
text-indent: 101%;
|
23
|
-
white-space: nowrap;
|
24
|
-
}
|
@@ -1,65 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// Hides an element visually while still allowing the content to be accessible
|
4
|
-
/// to assistive technology, e.g. screen readers. Passing `unhide` will reverse
|
5
|
-
/// the affects of the hiding, which is handy for showing the element on focus,
|
6
|
-
/// for example.
|
7
|
-
///
|
8
|
-
/// @link http://goo.gl/Vf1TGn
|
9
|
-
///
|
10
|
-
/// @argument {string} $toggle [hide]
|
11
|
-
/// Accepts `hide` or `unhide`. `unhide` reverses the affects of `hide`.
|
12
|
-
///
|
13
|
-
/// @example scss
|
14
|
-
/// .element {
|
15
|
-
/// @include hide-visually;
|
16
|
-
///
|
17
|
-
/// &:active,
|
18
|
-
/// &:focus {
|
19
|
-
/// @include hide-visually(unhide);
|
20
|
-
/// }
|
21
|
-
/// }
|
22
|
-
///
|
23
|
-
/// @example css
|
24
|
-
/// .element {
|
25
|
-
/// border: 0;
|
26
|
-
/// clip: rect(1px, 1px, 1px, 1px);
|
27
|
-
/// clip-path: circle(1% at 1% 1%);
|
28
|
-
/// height: 1px;
|
29
|
-
/// overflow: hidden;
|
30
|
-
/// padding: 0;
|
31
|
-
/// position: absolute;
|
32
|
-
/// width: 1px;
|
33
|
-
/// }
|
34
|
-
///
|
35
|
-
/// .hide-visually:active,
|
36
|
-
/// .hide-visually:focus {
|
37
|
-
/// clip: auto;
|
38
|
-
/// clip-path: none;
|
39
|
-
/// height: auto;
|
40
|
-
/// overflow: visible;
|
41
|
-
/// position: static;
|
42
|
-
/// width: auto;
|
43
|
-
/// }
|
44
|
-
///
|
45
|
-
/// @since 5.0.0
|
46
|
-
|
47
|
-
@mixin hide-visually($toggle: hide) {
|
48
|
-
@if $toggle == "hide" {
|
49
|
-
border: 0;
|
50
|
-
clip: rect(1px, 1px, 1px, 1px);
|
51
|
-
clip-path: circle(1% at 1% 1%);
|
52
|
-
height: 1px;
|
53
|
-
overflow: hidden;
|
54
|
-
padding: 0;
|
55
|
-
position: absolute;
|
56
|
-
width: 1px;
|
57
|
-
} @else if $toggle == "unhide" {
|
58
|
-
clip: auto;
|
59
|
-
clip-path: none;
|
60
|
-
height: auto;
|
61
|
-
overflow: visible;
|
62
|
-
position: static;
|
63
|
-
width: auto;
|
64
|
-
}
|
65
|
-
}
|
@@ -1,34 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// Provides a quick method for targeting `margin` on specific sides of a
|
4
|
-
/// box. Use a `null` value to “skip” a side.
|
5
|
-
///
|
6
|
-
/// @argument {arglist} $values
|
7
|
-
/// List of margin values, defined as CSS shorthand.
|
8
|
-
///
|
9
|
-
/// @example scss
|
10
|
-
/// .element-one {
|
11
|
-
/// @include margin(null auto);
|
12
|
-
/// }
|
13
|
-
///
|
14
|
-
/// .element-two {
|
15
|
-
/// @include margin(10px 3em 20vh null);
|
16
|
-
/// }
|
17
|
-
///
|
18
|
-
/// @example css
|
19
|
-
/// .element-one {
|
20
|
-
/// margin-left: auto;
|
21
|
-
/// margin-right: auto;
|
22
|
-
/// }
|
23
|
-
///
|
24
|
-
/// .element-two {
|
25
|
-
/// margin-bottom: 20vh;
|
26
|
-
/// margin-right: 3em;
|
27
|
-
/// margin-top: 10px;
|
28
|
-
/// }
|
29
|
-
///
|
30
|
-
/// @require {mixin} _directional-property
|
31
|
-
|
32
|
-
@mixin margin($values...) {
|
33
|
-
@include _directional-property(margin, false, $values...);
|
34
|
-
}
|
@@ -1,113 +0,0 @@
|
|
1
|
-
@charset "UTF-8";
|
2
|
-
|
3
|
-
/// Increments up or down a defined scale and returns an adjusted value. This
|
4
|
-
/// helps establish consistent measurements and spacial relationships throughout
|
5
|
-
/// your project. We provide a list of commonly used scales as
|
6
|
-
/// [pre-defined variables][scales].
|
7
|
-
///
|
8
|
-
/// [scales]: https://github.com/thoughtbot/bourbon/blob/master/core/bourbon/settings/_scales.scss
|
9
|
-
///
|
10
|
-
/// @argument {number (unitless)} $increment
|
11
|
-
/// How many steps to increment up or down the scale.
|
12
|
-
///
|
13
|
-
/// @argument {number (with unit) | list} $value [1em]
|
14
|
-
/// The base value the scale starts at.
|
15
|
-
///
|
16
|
-
/// @argument {number (unitless)} $ratio [1.25]
|
17
|
-
/// The ratio the scale is built on.
|
18
|
-
///
|
19
|
-
/// @return {number (with unit)}
|
20
|
-
///
|
21
|
-
/// @example scss
|
22
|
-
/// .first-element {
|
23
|
-
/// font-size: modular-scale(2);
|
24
|
-
/// }
|
25
|
-
///
|
26
|
-
/// .second-element {
|
27
|
-
/// margin-right: modular-scale(3, 2em);
|
28
|
-
/// }
|
29
|
-
///
|
30
|
-
/// .third-element {
|
31
|
-
/// font-size: modular-scale(3, 1em 1.6em, $major-seventh);
|
32
|
-
/// }
|
33
|
-
///
|
34
|
-
/// // Globally change the base ratio
|
35
|
-
/// $bourbon: (
|
36
|
-
/// "modular-scale-ratio": 1.2,
|
37
|
-
/// );
|
38
|
-
///
|
39
|
-
/// .fourth-element {
|
40
|
-
/// font-size: modular-scale(3);
|
41
|
-
/// }
|
42
|
-
///
|
43
|
-
/// @example css
|
44
|
-
/// .first-element {
|
45
|
-
/// font-size: 1.5625em;
|
46
|
-
/// }
|
47
|
-
///
|
48
|
-
/// .second-element {
|
49
|
-
/// margin-right: 3.90625em;
|
50
|
-
/// }
|
51
|
-
///
|
52
|
-
/// .third-element {
|
53
|
-
/// font-size: 3em;
|
54
|
-
/// }
|
55
|
-
///
|
56
|
-
/// .fourth-element {
|
57
|
-
/// font-size: 1.728em;
|
58
|
-
/// }
|
59
|
-
///
|
60
|
-
/// @require {function} _retrieve-bourbon-setting
|
61
|
-
|
62
|
-
@function modular-scale(
|
63
|
-
$increment,
|
64
|
-
$value: _retrieve-bourbon-setting("modular-scale-base"),
|
65
|
-
$ratio: _retrieve-bourbon-setting("modular-scale-ratio")
|
66
|
-
) {
|
67
|
-
|
68
|
-
$v1: nth($value, 1);
|
69
|
-
$v2: nth($value, length($value));
|
70
|
-
$value: $v1;
|
71
|
-
|
72
|
-
// scale $v2 to just above $v1
|
73
|
-
@while $v2 > $v1 {
|
74
|
-
$v2: ($v2 / $ratio); // will be off-by-1
|
75
|
-
}
|
76
|
-
@while $v2 < $v1 {
|
77
|
-
$v2: ($v2 * $ratio); // will fix off-by-1
|
78
|
-
}
|
79
|
-
|
80
|
-
// check AFTER scaling $v2 to prevent double-counting corner-case
|
81
|
-
$double-stranded: $v2 > $v1;
|
82
|
-
|
83
|
-
@if $increment > 0 {
|
84
|
-
@for $i from 1 through $increment {
|
85
|
-
@if $double-stranded and ($v1 * $ratio) > $v2 {
|
86
|
-
$value: $v2;
|
87
|
-
$v2: ($v2 * $ratio);
|
88
|
-
} @else {
|
89
|
-
$v1: ($v1 * $ratio);
|
90
|
-
$value: $v1;
|
91
|
-
}
|
92
|
-
}
|
93
|
-
}
|
94
|
-
|
95
|
-
@if $increment < 0 {
|
96
|
-
// adjust $v2 to just below $v1
|
97
|
-
@if $double-stranded {
|
98
|
-
$v2: ($v2 / $ratio);
|
99
|
-
}
|
100
|
-
|
101
|
-
@for $i from $increment through -1 {
|
102
|
-
@if $double-stranded and ($v1 / $ratio) < $v2 {
|
103
|
-
$value: $v2;
|
104
|
-
$v2: ($v2 / $ratio);
|
105
|
-
} @else {
|
106
|
-
$v1: ($v1 / $ratio);
|
107
|
-
$value: $v1;
|
108
|
-
}
|
109
|
-
}
|
110
|
-
}
|
111
|
-
|
112
|
-
@return $value;
|
113
|
-
}
|