garth-jekyll-theme 0.1.9 → 0.2.0
Sign up to get free protection for your applications and to get access to all the features.
- 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
|
-
}
|