jekyll-theme-so-simple 3.1.0 → 3.1.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (126) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +16 -0
  3. data/LICENSE +49 -49
  4. data/README.md +15 -2
  5. data/_data/authors.yml +16 -16
  6. data/_data/navigation.yml +16 -14
  7. data/_data/text.yml +36 -36
  8. data/_includes/disqus-comments.html +19 -19
  9. data/_includes/documents-collection.html +19 -19
  10. data/_includes/entry-date.html +6 -6
  11. data/_includes/entry.html +41 -39
  12. data/_includes/footer-custom.html +3 -3
  13. data/_includes/footer.html +24 -24
  14. data/_includes/google-analytics.html +9 -9
  15. data/_includes/head-custom.html +5 -5
  16. data/_includes/head-feed.html +1 -1
  17. data/_includes/head-seo.html +1 -1
  18. data/_includes/head.html +50 -50
  19. data/_includes/lunr-search-scripts.html +106 -106
  20. data/_includes/masthead.html +13 -13
  21. data/_includes/navigation.html +17 -17
  22. data/_includes/page-author.html +37 -37
  23. data/_includes/page-categories.html +14 -14
  24. data/_includes/page-date.html +4 -4
  25. data/_includes/page-image.html +14 -14
  26. data/_includes/page-pagination.html +19 -19
  27. data/_includes/page-tags.html +14 -14
  28. data/_includes/posts-all.html +3 -3
  29. data/_includes/posts-category.html +3 -3
  30. data/_includes/posts-paginated.html +74 -74
  31. data/_includes/posts-tag.html +3 -3
  32. data/_includes/read-time.html +16 -16
  33. data/_includes/responsive-embed +16 -16
  34. data/_includes/scripts.html +1 -3
  35. data/_includes/skip-links.html +8 -8
  36. data/_includes/social-share.html +6 -6
  37. data/_includes/toc +9 -9
  38. data/_layouts/categories.html +48 -48
  39. data/_layouts/category.html +9 -9
  40. data/_layouts/collection.html +9 -9
  41. data/_layouts/default.html +1 -1
  42. data/_layouts/home.html +17 -17
  43. data/_layouts/page.html +30 -30
  44. data/_layouts/post.html +41 -41
  45. data/_layouts/posts.html +29 -29
  46. data/_layouts/search.html +1 -1
  47. data/_layouts/tag.html +9 -9
  48. data/_layouts/tags.html +48 -48
  49. data/_sass/so-simple.scss +1 -1
  50. data/_sass/so-simple/_author.scss +45 -45
  51. data/_sass/so-simple/_base.scss +112 -112
  52. data/_sass/so-simple/_buttons.scss +92 -92
  53. data/_sass/so-simple/_entries.scss +182 -182
  54. data/_sass/so-simple/_functions.scss +4 -4
  55. data/_sass/so-simple/_global.scss +393 -393
  56. data/_sass/so-simple/_icons.scss +43 -43
  57. data/_sass/so-simple/_mixins.scss +5 -5
  58. data/_sass/so-simple/_notices.scss +93 -93
  59. data/_sass/so-simple/_page.scss +287 -282
  60. data/_sass/so-simple/_reset.scss +523 -523
  61. data/_sass/so-simple/_syntax-highlighting.scss +334 -334
  62. data/_sass/so-simple/_tables.scss +34 -34
  63. data/_sass/so-simple/_utilities.scss +7 -7
  64. data/_sass/so-simple/_variables.scss +132 -132
  65. data/_sass/so-simple/functions/_color.scss +21 -21
  66. data/_sass/so-simple/functions/_em.scss +7 -7
  67. data/_sass/so-simple/functions/_fluid-type.scss +33 -33
  68. data/_sass/so-simple/functions/_yiq.scss +38 -38
  69. data/_sass/so-simple/mixins/_clearfix.scss +32 -32
  70. data/_sass/so-simple/mixins/_float.scss +15 -15
  71. data/_sass/so-simple/mixins/_image.scss +38 -38
  72. data/_sass/so-simple/mixins/_lists.scss +9 -9
  73. data/_sass/so-simple/mixins/_text-truncate.scss +10 -10
  74. data/_sass/so-simple/utilities/_accessibility.scss +43 -43
  75. data/_sass/so-simple/utilities/_align.scss +60 -60
  76. data/_sass/so-simple/utilities/_animations.scss +99 -99
  77. data/_sass/so-simple/utilities/_clearfix.scss +7 -7
  78. data/_sass/so-simple/utilities/_float.scss +7 -7
  79. data/_sass/so-simple/utilities/_responsive-embed.scss +66 -66
  80. data/_sass/so-simple/utilities/_text.scss +48 -48
  81. data/_sass/so-simple/vendor/breakpoint/_breakpoint.scss +114 -114
  82. data/_sass/so-simple/vendor/breakpoint/_context.scss +94 -94
  83. data/_sass/so-simple/vendor/breakpoint/_helpers.scss +151 -151
  84. data/_sass/so-simple/vendor/breakpoint/_legacy-settings.scss +49 -49
  85. data/_sass/so-simple/vendor/breakpoint/_no-query.scss +15 -15
  86. data/_sass/so-simple/vendor/breakpoint/_parsers.scss +215 -215
  87. data/_sass/so-simple/vendor/breakpoint/_respond-to.scss +82 -82
  88. data/_sass/so-simple/vendor/breakpoint/_settings.scss +70 -70
  89. data/_sass/so-simple/vendor/breakpoint/parsers/_double.scss +33 -33
  90. data/_sass/so-simple/vendor/breakpoint/parsers/_query.scss +82 -82
  91. data/_sass/so-simple/vendor/breakpoint/parsers/_resolution.scss +31 -31
  92. data/_sass/so-simple/vendor/breakpoint/parsers/_single.scss +26 -26
  93. data/_sass/so-simple/vendor/breakpoint/parsers/_triple.scss +36 -36
  94. data/_sass/so-simple/vendor/breakpoint/parsers/double/_default-pair.scss +21 -21
  95. data/_sass/so-simple/vendor/breakpoint/parsers/double/_default.scss +22 -22
  96. data/_sass/so-simple/vendor/breakpoint/parsers/double/_double-string.scss +21 -21
  97. data/_sass/so-simple/vendor/breakpoint/parsers/resolution/_resolution.scss +60 -60
  98. data/_sass/so-simple/vendor/breakpoint/parsers/single/_default.scss +13 -13
  99. data/_sass/so-simple/vendor/breakpoint/parsers/triple/_default.scss +18 -18
  100. data/_sass/so-simple/vendor/lity/_lity.scss +221 -221
  101. data/assets/css/main.scss +7 -7
  102. data/assets/js/lunr/lunr.da.min.js +17 -17
  103. data/assets/js/lunr/lunr.de.min.js +17 -17
  104. data/assets/js/lunr/lunr.du.min.js +17 -17
  105. data/assets/js/lunr/lunr.es.min.js +17 -17
  106. data/assets/js/lunr/lunr.fi.min.js +17 -17
  107. data/assets/js/lunr/lunr.fr.min.js +17 -17
  108. data/assets/js/lunr/lunr.hu.min.js +17 -17
  109. data/assets/js/lunr/lunr.it.min.js +17 -17
  110. data/assets/js/lunr/lunr.jp.min.js +1 -1
  111. data/assets/js/lunr/lunr.min.js +6 -6
  112. data/assets/js/lunr/lunr.no.min.js +17 -17
  113. data/assets/js/lunr/lunr.pt.min.js +17 -17
  114. data/assets/js/lunr/lunr.ro.min.js +17 -17
  115. data/assets/js/lunr/lunr.ru.min.js +17 -17
  116. data/assets/js/lunr/lunr.sv.min.js +17 -17
  117. data/assets/js/lunr/lunr.tr.min.js +17 -17
  118. data/assets/js/main.js +17 -15
  119. data/assets/js/main.min.js +2 -2
  120. data/assets/js/plugins/jquery.smooth-scroll.js +358 -358
  121. data/assets/js/plugins/jquery.smooth-scroll.min.js +8 -8
  122. data/assets/js/plugins/lity.js +655 -655
  123. data/assets/js/plugins/lity.min.js +4 -4
  124. data/assets/js/plugins/table-of-contents.js +59 -59
  125. data/assets/js/search-data.json +43 -27
  126. metadata +3 -3
@@ -1,34 +1,34 @@
1
- /* ==========================================================================
2
- Tables
3
- ========================================================================== */
4
-
5
- table {
6
- @include fluid-type($min-vw, $max-vw, 12px, 18px);
7
- width: 100%;
8
- border-collapse: collapse;
9
- /* For Firefox to horizontally scroll wider tables */
10
- // scss-lint:disable DuplicateProperty
11
- word-break: normal;
12
- word-break: keep-all;
13
- }
14
-
15
- th,
16
- td {
17
- border-bottom: 1px solid $border-color;
18
- }
19
-
20
- th {
21
- padding: 0.5em;
22
- font-weight: bold;
23
- text-align: left;
24
- }
25
-
26
- td {
27
- padding: 0.5em;
28
- }
29
-
30
- tr,
31
- td,
32
- th {
33
- vertical-align: middle;
34
- }
1
+ /* ==========================================================================
2
+ Tables
3
+ ========================================================================== */
4
+
5
+ table {
6
+ @include fluid-type($min-vw, $max-vw, 12px, 18px);
7
+ width: 100%;
8
+ border-collapse: collapse;
9
+ /* For Firefox to horizontally scroll wider tables */
10
+ // scss-lint:disable DuplicateProperty
11
+ word-break: normal;
12
+ word-break: keep-all;
13
+ }
14
+
15
+ th,
16
+ td {
17
+ border-bottom: 1px solid $border-color;
18
+ }
19
+
20
+ th {
21
+ padding: 0.5em;
22
+ font-weight: bold;
23
+ text-align: left;
24
+ }
25
+
26
+ td {
27
+ padding: 0.5em;
28
+ }
29
+
30
+ tr,
31
+ td,
32
+ th {
33
+ vertical-align: middle;
34
+ }
@@ -1,7 +1,7 @@
1
- @import "utilities/accessibility";
2
- @import "utilities/animations";
3
- @import "utilities/align";
4
- @import "utilities/clearfix";
5
- @import "utilities/float";
6
- @import "utilities/text";
7
- @import "utilities/responsive-embed";
1
+ @import "utilities/accessibility";
2
+ @import "utilities/animations";
3
+ @import "utilities/align";
4
+ @import "utilities/clearfix";
5
+ @import "utilities/float";
6
+ @import "utilities/text";
7
+ @import "utilities/responsive-embed";
@@ -1,132 +1,132 @@
1
- /* ==========================================================================
2
- Variables
3
- ========================================================================== */
4
-
5
- /* Breakpoint widths */
6
- $small: 320px !default;
7
- $medium: 768px !default;
8
- $large: 1024px !default;
9
- $xlarge: 1280px !default;
10
-
11
- /* Fluid type */
12
- $base-font-size: 16px !default;
13
- $min-vw: $small !default;
14
- $max-vw: $xlarge !default;
15
- $min-font-size: 14px !default;
16
- $max-font-size: 18px !default;
17
-
18
- /* Calculate Modular Scale */
19
- $modular-scale-1: 1.067 !default; /* small */
20
- $modular-scale-2: 1.2 !default; /* large */
21
- /* Heading 1 */
22
- $h1-min: $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
23
- $h1-max: $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
24
- /* Heading 2 */
25
- $h2-min: $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
26
- $h2-max: $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
27
- /* Heading 3 */
28
- $h3-min: $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
29
- $h3-max: $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
30
- /* Heading 4 */
31
- $h4-min: $modular-scale-1 * $base-font-size !default;
32
- $h4-max: $modular-scale-2 * $base-font-size !default;
33
- /* Heading 5 */
34
- $h5-min: $base-font-size !default;
35
- $h5-max: $base-font-size !default;
36
- /* Heading 6 */
37
- $h6-min: ($base-font-size / $modular-scale-1) !default;
38
- $h6-max: ($base-font-size / $modular-scale-2) !default;
39
-
40
- /* Font Families */
41
- $serif-font-family: "Lora", serif !default;
42
- $sans-serif-font-family: "Source Sans Pro", sans-serif !default;
43
- $monospace-font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospace !default;
44
-
45
- $base-font-family: $sans-serif-font-family !default;
46
- $headline-font-family: $sans-serif-font-family !default;
47
- $title-font-family: $serif-font-family !default;
48
- $description-font-family: $serif-font-family !default;
49
- $meta-font-family: $serif-font-family !default;
50
-
51
- $page-title-weight: bold !default;
52
- $entry-title-weight: bold !default;
53
-
54
- /* Colors */
55
- $base-color: #000 !default;
56
- $text-color: #000 !default;
57
- $accent-color: #34374C !default;
58
- $nav-color: #fff !default;
59
- $background-color: #fff !default;
60
- $nav-background-color: #000 !default;
61
- $code-background-color: tint($base-color, 95%) !default;
62
- $border-color: tint($base-color, 80%) !default;
63
-
64
- $primary-color: #000 !default;
65
- $success-color: #62c462 !default;
66
- $warning-color: #f89406 !default;
67
- $danger-color: #ee5f5b !default;
68
- $info-color: #52adc8 !default;
69
-
70
- /* YIQ color contrast */
71
- $yiq-contrasted-dark-default: #000 !default;
72
- $yiq-contrasted-light-default: #fff !default;
73
- $yiq-contrasted-threshold: 175 !default;
74
- $yiq-debug: false !default;
75
-
76
- /* Brands */
77
- $behance-color: #1769ff !default;
78
- $bitbucket-color: #205081 !default;
79
- $dribbble-color: #ea4c89 !default;
80
- $facebook-color: #3b5998 !default;
81
- $flickr-color: #ff0084 !default;
82
- $foursquare-color: #0072b1 !default;
83
- $github-color: #171516 !default;
84
- $google-plus-color: #dd4b39 !default;
85
- $instagram-color: #517fa4 !default;
86
- $lastfm-color: #d51007 !default;
87
- $linkedin-color: #007bb6 !default;
88
- $pinterest-color: #cb2027 !default;
89
- $reddit-color: #ff4500 !default;
90
- $rss-color: #fa9b39 !default;
91
- $soundcloud-color: #ff3300 !default;
92
- $stackoverflow-color: #fe7a15 !default;
93
- $tumblr-color: #32506d !default;
94
- $twitter-color: #55acee !default;
95
- $vimeo-color: #1ab7ea !default;
96
- $vine-color: #00bf8f !default;
97
- $youtube-color: #bb0000 !default;
98
- $xing-color: #006567 !default;
99
-
100
- /* Syntax highlighting (base16) colors */
101
- $base00: #fafafa !default;
102
- $base01: #073642 !default;
103
- $base02: #586e75 !default;
104
- $base03: #657b83 !default;
105
- $base04: #839496 !default;
106
- $base05: #586e75 !default;
107
- $base06: #eee8d5 !default;
108
- $base07: #fdf6e3 !default;
109
- $base08: #dc322f !default;
110
- $base09: #cb4b16 !default;
111
- $base0a: #b58900 !default;
112
- $base0b: #859900 !default;
113
- $base0c: #2aa198 !default;
114
- $base0d: #268bd2 !default;
115
- $base0e: #6c71c4 !default;
116
- $base0f: #d33682 !default;
117
-
118
- /* Max-width of the main content */
119
- $main-max-width: $medium !default;
120
-
121
- /* Max-width of the main content + sidebar */
122
- $main-sidebar-max-width: $large !default;
123
-
124
- /* Site logo */
125
- $site-logo-width: 75px !default;
126
- $site-logo-height: 75px !default;
127
-
128
- /* Border radius */
129
- $border-radius: 0.25rem !default;
130
-
131
- /* Global transition */
132
- $global-transition: all 0.4s ease !default;
1
+ /* ==========================================================================
2
+ Variables
3
+ ========================================================================== */
4
+
5
+ /* Breakpoint widths */
6
+ $small: 320px !default;
7
+ $medium: 768px !default;
8
+ $large: 1024px !default;
9
+ $xlarge: 1280px !default;
10
+
11
+ /* Fluid type */
12
+ $base-font-size: 16px !default;
13
+ $min-vw: $small !default;
14
+ $max-vw: $xlarge !default;
15
+ $min-font-size: 14px !default;
16
+ $max-font-size: 18px !default;
17
+
18
+ /* Calculate Modular Scale */
19
+ $modular-scale-1: 1.067 !default; /* small */
20
+ $modular-scale-2: 1.2 !default; /* large */
21
+ /* Heading 1 */
22
+ $h1-min: $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
23
+ $h1-max: $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
24
+ /* Heading 2 */
25
+ $h2-min: $modular-scale-1 * $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
26
+ $h2-max: $modular-scale-2 * $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
27
+ /* Heading 3 */
28
+ $h3-min: $modular-scale-1 * $modular-scale-1 * $base-font-size !default;
29
+ $h3-max: $modular-scale-2 * $modular-scale-2 * $base-font-size !default;
30
+ /* Heading 4 */
31
+ $h4-min: $modular-scale-1 * $base-font-size !default;
32
+ $h4-max: $modular-scale-2 * $base-font-size !default;
33
+ /* Heading 5 */
34
+ $h5-min: $base-font-size !default;
35
+ $h5-max: $base-font-size !default;
36
+ /* Heading 6 */
37
+ $h6-min: ($base-font-size / $modular-scale-1) !default;
38
+ $h6-max: ($base-font-size / $modular-scale-2) !default;
39
+
40
+ /* Font Families */
41
+ $serif-font-family: "Lora", serif !default;
42
+ $sans-serif-font-family: "Source Sans Pro", sans-serif !default;
43
+ $monospace-font-family: Menlo, Consolas, Monaco, "Courier New", Courier, monospace !default;
44
+
45
+ $base-font-family: $sans-serif-font-family !default;
46
+ $headline-font-family: $sans-serif-font-family !default;
47
+ $title-font-family: $serif-font-family !default;
48
+ $description-font-family: $serif-font-family !default;
49
+ $meta-font-family: $serif-font-family !default;
50
+
51
+ $page-title-weight: bold !default;
52
+ $entry-title-weight: bold !default;
53
+
54
+ /* Colors */
55
+ $base-color: #000 !default;
56
+ $text-color: #000 !default;
57
+ $accent-color: #34374C !default;
58
+ $nav-color: #fff !default;
59
+ $background-color: #fff !default;
60
+ $nav-background-color: #000 !default;
61
+ $code-background-color: tint($base-color, 95%) !default;
62
+ $border-color: tint($base-color, 80%) !default;
63
+
64
+ $primary-color: #000 !default;
65
+ $success-color: #62c462 !default;
66
+ $warning-color: #f89406 !default;
67
+ $danger-color: #ee5f5b !default;
68
+ $info-color: #52adc8 !default;
69
+
70
+ /* YIQ color contrast */
71
+ $yiq-contrasted-dark-default: #000 !default;
72
+ $yiq-contrasted-light-default: #fff !default;
73
+ $yiq-contrasted-threshold: 175 !default;
74
+ $yiq-debug: false !default;
75
+
76
+ /* Brands */
77
+ $behance-color: #1769ff !default;
78
+ $bitbucket-color: #205081 !default;
79
+ $dribbble-color: #ea4c89 !default;
80
+ $facebook-color: #3b5998 !default;
81
+ $flickr-color: #ff0084 !default;
82
+ $foursquare-color: #0072b1 !default;
83
+ $github-color: #171516 !default;
84
+ $google-plus-color: #dd4b39 !default;
85
+ $instagram-color: #517fa4 !default;
86
+ $lastfm-color: #d51007 !default;
87
+ $linkedin-color: #007bb6 !default;
88
+ $pinterest-color: #cb2027 !default;
89
+ $reddit-color: #ff4500 !default;
90
+ $rss-color: #fa9b39 !default;
91
+ $soundcloud-color: #ff3300 !default;
92
+ $stackoverflow-color: #fe7a15 !default;
93
+ $tumblr-color: #32506d !default;
94
+ $twitter-color: #55acee !default;
95
+ $vimeo-color: #1ab7ea !default;
96
+ $vine-color: #00bf8f !default;
97
+ $youtube-color: #bb0000 !default;
98
+ $xing-color: #006567 !default;
99
+
100
+ /* Syntax highlighting (base16) colors */
101
+ $base00: #fafafa !default;
102
+ $base01: #073642 !default;
103
+ $base02: #586e75 !default;
104
+ $base03: #657b83 !default;
105
+ $base04: #839496 !default;
106
+ $base05: #586e75 !default;
107
+ $base06: #eee8d5 !default;
108
+ $base07: #fdf6e3 !default;
109
+ $base08: #dc322f !default;
110
+ $base09: #cb4b16 !default;
111
+ $base0a: #b58900 !default;
112
+ $base0b: #859900 !default;
113
+ $base0c: #2aa198 !default;
114
+ $base0d: #268bd2 !default;
115
+ $base0e: #6c71c4 !default;
116
+ $base0f: #d33682 !default;
117
+
118
+ /* Max-width of the main content */
119
+ $main-max-width: $medium !default;
120
+
121
+ /* Max-width of the main content + sidebar */
122
+ $main-sidebar-max-width: $large !default;
123
+
124
+ /* Site logo */
125
+ $site-logo-width: 75px !default;
126
+ $site-logo-height: 75px !default;
127
+
128
+ /* Border radius */
129
+ $border-radius: 0.25rem !default;
130
+
131
+ /* Global transition */
132
+ $global-transition: all 0.4s ease !default;
@@ -1,21 +1,21 @@
1
- /* ==========================================================================
2
- Color Functions
3
- ========================================================================== */
4
-
5
- /// Slightly lighten a color
6
- /// @access public
7
- /// @param {Color} $color - color to tint
8
- /// @param {Number} $percentage - percentage of `$color` in returned color
9
- /// @return {Color}
10
- @function tint($color, $percentage) {
11
- @return mix(#fff, $color, $percentage);
12
- }
13
-
14
- /// Slightly darken a color
15
- /// @access public
16
- /// @param {Color} $color - color to shade
17
- /// @param {Number} $percentage - percentage of `$color` in returned color
18
- /// @return {Color}
19
- @function shade($color, $percentage) {
20
- @return mix(#000, $color, $percentage);
21
- }
1
+ /* ==========================================================================
2
+ Color Functions
3
+ ========================================================================== */
4
+
5
+ /// Slightly lighten a color
6
+ /// @access public
7
+ /// @param {Color} $color - color to tint
8
+ /// @param {Number} $percentage - percentage of `$color` in returned color
9
+ /// @return {Color}
10
+ @function tint($color, $percentage) {
11
+ @return mix(#fff, $color, $percentage);
12
+ }
13
+
14
+ /// Slightly darken a color
15
+ /// @access public
16
+ /// @param {Color} $color - color to shade
17
+ /// @param {Number} $percentage - percentage of `$color` in returned color
18
+ /// @return {Color}
19
+ @function shade($color, $percentage) {
20
+ @return mix(#000, $color, $percentage);
21
+ }
@@ -1,7 +1,7 @@
1
- /*
2
- EM conversion
3
- ========================================================================== */
4
-
5
- @function em($target, $context: $doc-font-size) {
6
- @return ($target / $context) * 1em;
7
- }
1
+ /*
2
+ EM conversion
3
+ ========================================================================== */
4
+
5
+ @function em($target, $context: $doc-font-size) {
6
+ @return ($target / $context) * 1em;
7
+ }
@@ -1,33 +1,33 @@
1
- /* ==========================================================================
2
- Fluid Type
3
- as seen on https://madebymike.com.au/writing/fluid-type-calc-examples/
4
- ========================================================================== */
5
-
6
- @function strip-unit($value) {
7
- @return $value / ($value * 0 + 1);
8
- }
9
-
10
- @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
11
- // scss-lint:disable UnnecessaryParentReference
12
- $u1: unit($min-vw);
13
- $u2: unit($max-vw);
14
- $u3: unit($min-font-size);
15
- $u4: unit($max-font-size);
16
-
17
- @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
18
- & {
19
-
20
- font-size: $min-font-size;
21
-
22
- @media screen and (min-width: $min-vw) {
23
- font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
24
- }
25
-
26
- @media screen and (min-width: $max-vw) {
27
- font-size: $max-font-size;
28
- }
29
- }
30
- } @else {
31
- @error "Detected mixed units. Please use the same units for all parameters. " + $u1 +", " + $u2 + ", " + $u3 +", "+ $u4;
32
- }
33
- }
1
+ /* ==========================================================================
2
+ Fluid Type
3
+ as seen on https://madebymike.com.au/writing/fluid-type-calc-examples/
4
+ ========================================================================== */
5
+
6
+ @function strip-unit($value) {
7
+ @return $value / ($value * 0 + 1);
8
+ }
9
+
10
+ @mixin fluid-type($min-vw, $max-vw, $min-font-size, $max-font-size) {
11
+ // scss-lint:disable UnnecessaryParentReference
12
+ $u1: unit($min-vw);
13
+ $u2: unit($max-vw);
14
+ $u3: unit($min-font-size);
15
+ $u4: unit($max-font-size);
16
+
17
+ @if $u1 == $u2 and $u1 == $u3 and $u1 == $u4 {
18
+ & {
19
+
20
+ font-size: $min-font-size;
21
+
22
+ @media screen and (min-width: $min-vw) {
23
+ font-size: calc(#{$min-font-size} + #{strip-unit($max-font-size - $min-font-size)} * ((100vw - #{$min-vw}) / #{strip-unit($max-vw - $min-vw)}));
24
+ }
25
+
26
+ @media screen and (min-width: $max-vw) {
27
+ font-size: $max-font-size;
28
+ }
29
+ }
30
+ } @else {
31
+ @error "Detected mixed units. Please use the same units for all parameters. " + $u1 +", " + $u2 + ", " + $u3 +", "+ $u4;
32
+ }
33
+ }