jekyll-theme-portfolio 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (114) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE.md +21 -0
  3. data/README.md +19 -0
  4. data/_includes/footer.html +57 -0
  5. data/_includes/head.html +12 -0
  6. data/_includes/header.html +43 -0
  7. data/_layouts/default.html +20 -0
  8. data/_layouts/home.html +41 -0
  9. data/_layouts/page.html +13 -0
  10. data/_layouts/portfolio.html +66 -0
  11. data/_layouts/post.html +23 -0
  12. data/_sass/_bootstrap_customization.scss +332 -0
  13. data/_sass/_syntax-highlighting.scss +74 -0
  14. data/_sass/_variables.scss +106 -0
  15. data/_sass/bootstrap-4-jekyll/_bootstrap-4-jekyll.scss +8 -0
  16. data/_sass/bootstrap/__DO_NOT_MODIFY +0 -0
  17. data/_sass/bootstrap/_alert.scss +51 -0
  18. data/_sass/bootstrap/_badge.scss +54 -0
  19. data/_sass/bootstrap/_breadcrumb.scss +41 -0
  20. data/_sass/bootstrap/_button-group.scss +163 -0
  21. data/_sass/bootstrap/_buttons.scss +137 -0
  22. data/_sass/bootstrap/_card.scss +289 -0
  23. data/_sass/bootstrap/_carousel.scss +197 -0
  24. data/_sass/bootstrap/_close.scss +41 -0
  25. data/_sass/bootstrap/_code.scss +48 -0
  26. data/_sass/bootstrap/_custom-forms.scss +507 -0
  27. data/_sass/bootstrap/_dropdown.scss +191 -0
  28. data/_sass/bootstrap/_forms.scss +330 -0
  29. data/_sass/bootstrap/_functions.scss +86 -0
  30. data/_sass/bootstrap/_grid.scss +52 -0
  31. data/_sass/bootstrap/_images.scss +42 -0
  32. data/_sass/bootstrap/_input-group.scss +193 -0
  33. data/_sass/bootstrap/_jumbotron.scss +17 -0
  34. data/_sass/bootstrap/_list-group.scss +149 -0
  35. data/_sass/bootstrap/_media.scss +8 -0
  36. data/_sass/bootstrap/_mixins.scss +47 -0
  37. data/_sass/bootstrap/_modal.scss +229 -0
  38. data/_sass/bootstrap/_nav.scss +120 -0
  39. data/_sass/bootstrap/_navbar.scss +294 -0
  40. data/_sass/bootstrap/_pagination.scss +73 -0
  41. data/_sass/bootstrap/_popover.scss +171 -0
  42. data/_sass/bootstrap/_print.scss +141 -0
  43. data/_sass/bootstrap/_progress.scss +43 -0
  44. data/_sass/bootstrap/_reboot.scss +483 -0
  45. data/_sass/bootstrap/_root.scss +19 -0
  46. data/_sass/bootstrap/_spinners.scss +55 -0
  47. data/_sass/bootstrap/_tables.scss +185 -0
  48. data/_sass/bootstrap/_toasts.scss +44 -0
  49. data/_sass/bootstrap/_tooltip.scss +115 -0
  50. data/_sass/bootstrap/_transitions.scss +20 -0
  51. data/_sass/bootstrap/_type.scss +125 -0
  52. data/_sass/bootstrap/_utilities.scss +17 -0
  53. data/_sass/bootstrap/_variables.scss +1123 -0
  54. data/_sass/bootstrap/bootstrap-grid.scss +29 -0
  55. data/_sass/bootstrap/bootstrap-reboot.scss +12 -0
  56. data/_sass/bootstrap/bootstrap.scss +44 -0
  57. data/_sass/bootstrap/mixins/_alert.scss +13 -0
  58. data/_sass/bootstrap/mixins/_background-variant.scss +21 -0
  59. data/_sass/bootstrap/mixins/_badge.scss +17 -0
  60. data/_sass/bootstrap/mixins/_border-radius.scss +63 -0
  61. data/_sass/bootstrap/mixins/_box-shadow.scss +20 -0
  62. data/_sass/bootstrap/mixins/_breakpoints.scss +123 -0
  63. data/_sass/bootstrap/mixins/_buttons.scss +107 -0
  64. data/_sass/bootstrap/mixins/_caret.scss +62 -0
  65. data/_sass/bootstrap/mixins/_clearfix.scss +7 -0
  66. data/_sass/bootstrap/mixins/_deprecate.scss +10 -0
  67. data/_sass/bootstrap/mixins/_float.scss +14 -0
  68. data/_sass/bootstrap/mixins/_forms.scss +192 -0
  69. data/_sass/bootstrap/mixins/_gradients.scss +45 -0
  70. data/_sass/bootstrap/mixins/_grid-framework.scss +66 -0
  71. data/_sass/bootstrap/mixins/_grid.scss +51 -0
  72. data/_sass/bootstrap/mixins/_hover.scss +37 -0
  73. data/_sass/bootstrap/mixins/_image.scss +36 -0
  74. data/_sass/bootstrap/mixins/_list-group.scss +21 -0
  75. data/_sass/bootstrap/mixins/_lists.scss +7 -0
  76. data/_sass/bootstrap/mixins/_nav-divider.scss +10 -0
  77. data/_sass/bootstrap/mixins/_pagination.scss +22 -0
  78. data/_sass/bootstrap/mixins/_reset-text.scss +17 -0
  79. data/_sass/bootstrap/mixins/_resize.scss +6 -0
  80. data/_sass/bootstrap/mixins/_screen-reader.scss +33 -0
  81. data/_sass/bootstrap/mixins/_size.scss +7 -0
  82. data/_sass/bootstrap/mixins/_table-row.scss +39 -0
  83. data/_sass/bootstrap/mixins/_text-emphasis.scss +16 -0
  84. data/_sass/bootstrap/mixins/_text-hide.scss +11 -0
  85. data/_sass/bootstrap/mixins/_text-truncate.scss +8 -0
  86. data/_sass/bootstrap/mixins/_transition.scss +16 -0
  87. data/_sass/bootstrap/mixins/_visibility.scss +8 -0
  88. data/_sass/bootstrap/utilities/_align.scss +8 -0
  89. data/_sass/bootstrap/utilities/_background.scss +19 -0
  90. data/_sass/bootstrap/utilities/_borders.scss +75 -0
  91. data/_sass/bootstrap/utilities/_clearfix.scss +3 -0
  92. data/_sass/bootstrap/utilities/_display.scss +26 -0
  93. data/_sass/bootstrap/utilities/_embed.scss +39 -0
  94. data/_sass/bootstrap/utilities/_flex.scss +51 -0
  95. data/_sass/bootstrap/utilities/_float.scss +11 -0
  96. data/_sass/bootstrap/utilities/_overflow.scss +5 -0
  97. data/_sass/bootstrap/utilities/_position.scss +32 -0
  98. data/_sass/bootstrap/utilities/_screenreaders.scss +11 -0
  99. data/_sass/bootstrap/utilities/_shadows.scss +6 -0
  100. data/_sass/bootstrap/utilities/_sizing.scss +20 -0
  101. data/_sass/bootstrap/utilities/_spacing.scss +73 -0
  102. data/_sass/bootstrap/utilities/_stretched-link.scss +19 -0
  103. data/_sass/bootstrap/utilities/_text.scss +72 -0
  104. data/_sass/bootstrap/utilities/_visibility.scss +13 -0
  105. data/_sass/bootstrap/vendor/_rfs.scss +204 -0
  106. data/assets/images/projects/nativescript.png +0 -0
  107. data/assets/images/projects/puppet.png +0 -0
  108. data/assets/javascript/bootstrap/__DO_NOT_MODIFY +0 -0
  109. data/assets/javascript/bootstrap/bootstrap.bundle.min.js +7 -0
  110. data/assets/javascript/bootstrap/bootstrap.bundle.min.js.map +1 -0
  111. data/assets/javascript/bootstrap/jquery.min.js +2 -0
  112. data/assets/javascript/bootstrap/jquery.min.map +1 -0
  113. data/assets/main.scss +9 -0
  114. metadata +219 -0
@@ -0,0 +1,39 @@
1
+ // Credit: Nicolas Gallagher and SUIT CSS.
2
+
3
+ .embed-responsive {
4
+ position: relative;
5
+ display: block;
6
+ width: 100%;
7
+ padding: 0;
8
+ overflow: hidden;
9
+
10
+ &::before {
11
+ display: block;
12
+ content: "";
13
+ }
14
+
15
+ .embed-responsive-item,
16
+ iframe,
17
+ embed,
18
+ object,
19
+ video {
20
+ position: absolute;
21
+ top: 0;
22
+ bottom: 0;
23
+ left: 0;
24
+ width: 100%;
25
+ height: 100%;
26
+ border: 0;
27
+ }
28
+ }
29
+
30
+ @each $embed-responsive-aspect-ratio in $embed-responsive-aspect-ratios {
31
+ $embed-responsive-aspect-ratio-x: nth($embed-responsive-aspect-ratio, 1);
32
+ $embed-responsive-aspect-ratio-y: nth($embed-responsive-aspect-ratio, 2);
33
+
34
+ .embed-responsive-#{$embed-responsive-aspect-ratio-x}by#{$embed-responsive-aspect-ratio-y} {
35
+ &::before {
36
+ padding-top: percentage($embed-responsive-aspect-ratio-y / $embed-responsive-aspect-ratio-x);
37
+ }
38
+ }
39
+ }
@@ -0,0 +1,51 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ // Flex variation
4
+ //
5
+ // Custom styles for additional flex alignment options.
6
+
7
+ @each $breakpoint in map-keys($grid-breakpoints) {
8
+ @include media-breakpoint-up($breakpoint) {
9
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
10
+
11
+ .flex#{$infix}-row { flex-direction: row !important; }
12
+ .flex#{$infix}-column { flex-direction: column !important; }
13
+ .flex#{$infix}-row-reverse { flex-direction: row-reverse !important; }
14
+ .flex#{$infix}-column-reverse { flex-direction: column-reverse !important; }
15
+
16
+ .flex#{$infix}-wrap { flex-wrap: wrap !important; }
17
+ .flex#{$infix}-nowrap { flex-wrap: nowrap !important; }
18
+ .flex#{$infix}-wrap-reverse { flex-wrap: wrap-reverse !important; }
19
+ .flex#{$infix}-fill { flex: 1 1 auto !important; }
20
+ .flex#{$infix}-grow-0 { flex-grow: 0 !important; }
21
+ .flex#{$infix}-grow-1 { flex-grow: 1 !important; }
22
+ .flex#{$infix}-shrink-0 { flex-shrink: 0 !important; }
23
+ .flex#{$infix}-shrink-1 { flex-shrink: 1 !important; }
24
+
25
+ .justify-content#{$infix}-start { justify-content: flex-start !important; }
26
+ .justify-content#{$infix}-end { justify-content: flex-end !important; }
27
+ .justify-content#{$infix}-center { justify-content: center !important; }
28
+ .justify-content#{$infix}-between { justify-content: space-between !important; }
29
+ .justify-content#{$infix}-around { justify-content: space-around !important; }
30
+
31
+ .align-items#{$infix}-start { align-items: flex-start !important; }
32
+ .align-items#{$infix}-end { align-items: flex-end !important; }
33
+ .align-items#{$infix}-center { align-items: center !important; }
34
+ .align-items#{$infix}-baseline { align-items: baseline !important; }
35
+ .align-items#{$infix}-stretch { align-items: stretch !important; }
36
+
37
+ .align-content#{$infix}-start { align-content: flex-start !important; }
38
+ .align-content#{$infix}-end { align-content: flex-end !important; }
39
+ .align-content#{$infix}-center { align-content: center !important; }
40
+ .align-content#{$infix}-between { align-content: space-between !important; }
41
+ .align-content#{$infix}-around { align-content: space-around !important; }
42
+ .align-content#{$infix}-stretch { align-content: stretch !important; }
43
+
44
+ .align-self#{$infix}-auto { align-self: auto !important; }
45
+ .align-self#{$infix}-start { align-self: flex-start !important; }
46
+ .align-self#{$infix}-end { align-self: flex-end !important; }
47
+ .align-self#{$infix}-center { align-self: center !important; }
48
+ .align-self#{$infix}-baseline { align-self: baseline !important; }
49
+ .align-self#{$infix}-stretch { align-self: stretch !important; }
50
+ }
51
+ }
@@ -0,0 +1,11 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ @each $breakpoint in map-keys($grid-breakpoints) {
4
+ @include media-breakpoint-up($breakpoint) {
5
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
6
+
7
+ .float#{$infix}-left { float: left !important; }
8
+ .float#{$infix}-right { float: right !important; }
9
+ .float#{$infix}-none { float: none !important; }
10
+ }
11
+ }
@@ -0,0 +1,5 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ @each $value in $overflows {
4
+ .overflow-#{$value} { overflow: $value !important; }
5
+ }
@@ -0,0 +1,32 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ // Common values
4
+ @each $position in $positions {
5
+ .position-#{$position} { position: $position !important; }
6
+ }
7
+
8
+ // Shorthand
9
+
10
+ .fixed-top {
11
+ position: fixed;
12
+ top: 0;
13
+ right: 0;
14
+ left: 0;
15
+ z-index: $zindex-fixed;
16
+ }
17
+
18
+ .fixed-bottom {
19
+ position: fixed;
20
+ right: 0;
21
+ bottom: 0;
22
+ left: 0;
23
+ z-index: $zindex-fixed;
24
+ }
25
+
26
+ .sticky-top {
27
+ @supports (position: sticky) {
28
+ position: sticky;
29
+ top: 0;
30
+ z-index: $zindex-sticky;
31
+ }
32
+ }
@@ -0,0 +1,11 @@
1
+ //
2
+ // Screenreaders
3
+ //
4
+
5
+ .sr-only {
6
+ @include sr-only();
7
+ }
8
+
9
+ .sr-only-focusable {
10
+ @include sr-only-focusable();
11
+ }
@@ -0,0 +1,6 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ .shadow-sm { box-shadow: $box-shadow-sm !important; }
4
+ .shadow { box-shadow: $box-shadow !important; }
5
+ .shadow-lg { box-shadow: $box-shadow-lg !important; }
6
+ .shadow-none { box-shadow: none !important; }
@@ -0,0 +1,20 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ // Width and height
4
+
5
+ @each $prop, $abbrev in (width: w, height: h) {
6
+ @each $size, $length in $sizes {
7
+ .#{$abbrev}-#{$size} { #{$prop}: $length !important; }
8
+ }
9
+ }
10
+
11
+ .mw-100 { max-width: 100% !important; }
12
+ .mh-100 { max-height: 100% !important; }
13
+
14
+ // Viewport additional helpers
15
+
16
+ .min-vw-100 { min-width: 100vw !important; }
17
+ .min-vh-100 { min-height: 100vh !important; }
18
+
19
+ .vw-100 { width: 100vw !important; }
20
+ .vh-100 { height: 100vh !important; }
@@ -0,0 +1,73 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ // Margin and Padding
4
+
5
+ @each $breakpoint in map-keys($grid-breakpoints) {
6
+ @include media-breakpoint-up($breakpoint) {
7
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
8
+
9
+ @each $prop, $abbrev in (margin: m, padding: p) {
10
+ @each $size, $length in $spacers {
11
+ .#{$abbrev}#{$infix}-#{$size} { #{$prop}: $length !important; }
12
+ .#{$abbrev}t#{$infix}-#{$size},
13
+ .#{$abbrev}y#{$infix}-#{$size} {
14
+ #{$prop}-top: $length !important;
15
+ }
16
+ .#{$abbrev}r#{$infix}-#{$size},
17
+ .#{$abbrev}x#{$infix}-#{$size} {
18
+ #{$prop}-right: $length !important;
19
+ }
20
+ .#{$abbrev}b#{$infix}-#{$size},
21
+ .#{$abbrev}y#{$infix}-#{$size} {
22
+ #{$prop}-bottom: $length !important;
23
+ }
24
+ .#{$abbrev}l#{$infix}-#{$size},
25
+ .#{$abbrev}x#{$infix}-#{$size} {
26
+ #{$prop}-left: $length !important;
27
+ }
28
+ }
29
+ }
30
+
31
+ // Negative margins (e.g., where `.mb-n1` is negative version of `.mb-1`)
32
+ @each $size, $length in $spacers {
33
+ @if $size != 0 {
34
+ .m#{$infix}-n#{$size} { margin: -$length !important; }
35
+ .mt#{$infix}-n#{$size},
36
+ .my#{$infix}-n#{$size} {
37
+ margin-top: -$length !important;
38
+ }
39
+ .mr#{$infix}-n#{$size},
40
+ .mx#{$infix}-n#{$size} {
41
+ margin-right: -$length !important;
42
+ }
43
+ .mb#{$infix}-n#{$size},
44
+ .my#{$infix}-n#{$size} {
45
+ margin-bottom: -$length !important;
46
+ }
47
+ .ml#{$infix}-n#{$size},
48
+ .mx#{$infix}-n#{$size} {
49
+ margin-left: -$length !important;
50
+ }
51
+ }
52
+ }
53
+
54
+ // Some special margin utils
55
+ .m#{$infix}-auto { margin: auto !important; }
56
+ .mt#{$infix}-auto,
57
+ .my#{$infix}-auto {
58
+ margin-top: auto !important;
59
+ }
60
+ .mr#{$infix}-auto,
61
+ .mx#{$infix}-auto {
62
+ margin-right: auto !important;
63
+ }
64
+ .mb#{$infix}-auto,
65
+ .my#{$infix}-auto {
66
+ margin-bottom: auto !important;
67
+ }
68
+ .ml#{$infix}-auto,
69
+ .mx#{$infix}-auto {
70
+ margin-left: auto !important;
71
+ }
72
+ }
73
+ }
@@ -0,0 +1,19 @@
1
+ //
2
+ // Stretched link
3
+ //
4
+
5
+ .stretched-link {
6
+ &::after {
7
+ position: absolute;
8
+ top: 0;
9
+ right: 0;
10
+ bottom: 0;
11
+ left: 0;
12
+ z-index: 1;
13
+ // Just in case `pointer-events: none` is set on a parent
14
+ pointer-events: auto;
15
+ content: "";
16
+ // IE10 bugfix, see https://stackoverflow.com/questions/16947967/ie10-hover-pseudo-class-doesnt-work-without-background-color
17
+ background-color: rgba(0, 0, 0, 0);
18
+ }
19
+ }
@@ -0,0 +1,72 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ //
4
+ // Text
5
+ //
6
+
7
+ .text-monospace { font-family: $font-family-monospace !important; }
8
+
9
+ // Alignment
10
+
11
+ .text-justify { text-align: justify !important; }
12
+ .text-wrap { white-space: normal !important; }
13
+ .text-nowrap { white-space: nowrap !important; }
14
+ .text-truncate { @include text-truncate; }
15
+
16
+ // Responsive alignment
17
+
18
+ @each $breakpoint in map-keys($grid-breakpoints) {
19
+ @include media-breakpoint-up($breakpoint) {
20
+ $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
21
+
22
+ .text#{$infix}-left { text-align: left !important; }
23
+ .text#{$infix}-right { text-align: right !important; }
24
+ .text#{$infix}-center { text-align: center !important; }
25
+ }
26
+ }
27
+
28
+ // Transformation
29
+
30
+ .text-lowercase { text-transform: lowercase !important; }
31
+ .text-uppercase { text-transform: uppercase !important; }
32
+ .text-capitalize { text-transform: capitalize !important; }
33
+
34
+ // Weight and italics
35
+
36
+ .font-weight-light { font-weight: $font-weight-light !important; }
37
+ .font-weight-lighter { font-weight: $font-weight-lighter !important; }
38
+ .font-weight-normal { font-weight: $font-weight-normal !important; }
39
+ .font-weight-bold { font-weight: $font-weight-bold !important; }
40
+ .font-weight-bolder { font-weight: $font-weight-bolder !important; }
41
+ .font-italic { font-style: italic !important; }
42
+
43
+ // Contextual colors
44
+
45
+ .text-white { color: $white !important; }
46
+
47
+ @each $color, $value in $theme-colors {
48
+ @include text-emphasis-variant(".text-#{$color}", $value);
49
+ }
50
+
51
+ .text-body { color: $body-color !important; }
52
+ .text-muted { color: $text-muted !important; }
53
+
54
+ .text-black-50 { color: rgba($black, .5) !important; }
55
+ .text-white-50 { color: rgba($white, .5) !important; }
56
+
57
+ // Misc
58
+
59
+ .text-hide {
60
+ @include text-hide($ignore-warning: true);
61
+ }
62
+
63
+ .text-decoration-none { text-decoration: none !important; }
64
+
65
+ .text-break {
66
+ word-break: break-word !important; // IE & < Edge 18
67
+ overflow-wrap: break-word !important;
68
+ }
69
+
70
+ // Reset
71
+
72
+ .text-reset { color: inherit !important; }
@@ -0,0 +1,13 @@
1
+ // stylelint-disable declaration-no-important
2
+
3
+ //
4
+ // Visibility utilities
5
+ //
6
+
7
+ .visible {
8
+ visibility: visible !important;
9
+ }
10
+
11
+ .invisible {
12
+ visibility: hidden !important;
13
+ }
@@ -0,0 +1,204 @@
1
+ // stylelint-disable property-blacklist, scss/dollar-variable-default
2
+
3
+ // SCSS RFS mixin
4
+ //
5
+ // Automated font-resizing
6
+ //
7
+ // See https://github.com/twbs/rfs
8
+
9
+ // Configuration
10
+
11
+ // Base font size
12
+ $rfs-base-font-size: 1.25rem !default;
13
+ $rfs-font-size-unit: rem !default;
14
+
15
+ // Breakpoint at where font-size starts decreasing if screen width is smaller
16
+ $rfs-breakpoint: 1200px !default;
17
+ $rfs-breakpoint-unit: px !default;
18
+
19
+ // Resize font-size based on screen height and width
20
+ $rfs-two-dimensional: false !default;
21
+
22
+ // Factor of decrease
23
+ $rfs-factor: 10 !default;
24
+
25
+ @if type-of($rfs-factor) != "number" or $rfs-factor <= 1 {
26
+ @error "`#{$rfs-factor}` is not a valid $rfs-factor, it must be greater than 1.";
27
+ }
28
+
29
+ // Generate enable or disable classes. Possibilities: false, "enable" or "disable"
30
+ $rfs-class: false !default;
31
+
32
+ // 1 rem = $rfs-rem-value px
33
+ $rfs-rem-value: 16 !default;
34
+
35
+ // Safari iframe resize bug: https://github.com/twbs/rfs/issues/14
36
+ $rfs-safari-iframe-resize-bug-fix: false !default;
37
+
38
+ // Disable RFS by setting $enable-responsive-font-sizes to false
39
+ $enable-responsive-font-sizes: true !default;
40
+
41
+ // Cache $rfs-base-font-size unit
42
+ $rfs-base-font-size-unit: unit($rfs-base-font-size);
43
+
44
+ // Remove px-unit from $rfs-base-font-size for calculations
45
+ @if $rfs-base-font-size-unit == "px" {
46
+ $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1);
47
+ }
48
+ @else if $rfs-base-font-size-unit == "rem" {
49
+ $rfs-base-font-size: $rfs-base-font-size / ($rfs-base-font-size * 0 + 1 / $rfs-rem-value);
50
+ }
51
+
52
+ // Cache $rfs-breakpoint unit to prevent multiple calls
53
+ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
54
+
55
+ // Remove unit from $rfs-breakpoint for calculations
56
+ @if $rfs-breakpoint-unit-cache == "px" {
57
+ $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
58
+ }
59
+ @else if $rfs-breakpoint-unit-cache == "rem" or $rfs-breakpoint-unit-cache == "em" {
60
+ $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
61
+ }
62
+
63
+ // Responsive font-size mixin
64
+ @mixin rfs($fs, $important: false) {
65
+ // Cache $fs unit
66
+ $fs-unit: if(type-of($fs) == "number", unit($fs), false);
67
+
68
+ // Add !important suffix if needed
69
+ $rfs-suffix: if($important, " !important", "");
70
+
71
+ // If $fs isn't a number (like inherit) or $fs has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
72
+ @if not $fs-unit or $fs-unit != "" and $fs-unit != "px" and $fs-unit != "rem" or $fs == 0 {
73
+ font-size: #{$fs}#{$rfs-suffix};
74
+ }
75
+ @else {
76
+ // Variables for storing static and fluid rescaling
77
+ $rfs-static: null;
78
+ $rfs-fluid: null;
79
+
80
+ // Remove px-unit from $fs for calculations
81
+ @if $fs-unit == "px" {
82
+ $fs: $fs / ($fs * 0 + 1);
83
+ }
84
+ @else if $fs-unit == "rem" {
85
+ $fs: $fs / ($fs * 0 + 1 / $rfs-rem-value);
86
+ }
87
+
88
+ // Set default font-size
89
+ @if $rfs-font-size-unit == rem {
90
+ $rfs-static: #{$fs / $rfs-rem-value}rem#{$rfs-suffix};
91
+ }
92
+ @else if $rfs-font-size-unit == px {
93
+ $rfs-static: #{$fs}px#{$rfs-suffix};
94
+ }
95
+ @else {
96
+ @error "`#{$rfs-font-size-unit}` is not a valid unit for $rfs-font-size-unit. Use `px` or `rem`.";
97
+ }
98
+
99
+ // Only add media query if font-size is bigger as the minimum font-size
100
+ // If $rfs-factor == 1, no rescaling will take place
101
+ @if $fs > $rfs-base-font-size and $enable-responsive-font-sizes {
102
+ $min-width: null;
103
+ $variable-unit: null;
104
+
105
+ // Calculate minimum font-size for given font-size
106
+ $fs-min: $rfs-base-font-size + ($fs - $rfs-base-font-size) / $rfs-factor;
107
+
108
+ // Calculate difference between given font-size and minimum font-size for given font-size
109
+ $fs-diff: $fs - $fs-min;
110
+
111
+ // Base font-size formatting
112
+ // No need to check if the unit is valid, because we did that before
113
+ $min-width: if($rfs-font-size-unit == rem, #{$fs-min / $rfs-rem-value}rem, #{$fs-min}px);
114
+
115
+ // If two-dimensional, use smallest of screen width and height
116
+ $variable-unit: if($rfs-two-dimensional, vmin, vw);
117
+
118
+ // Calculate the variable width between 0 and $rfs-breakpoint
119
+ $variable-width: #{$fs-diff * 100 / $rfs-breakpoint}#{$variable-unit};
120
+
121
+ // Set the calculated font-size.
122
+ $rfs-fluid: calc(#{$min-width} + #{$variable-width}) #{$rfs-suffix};
123
+ }
124
+
125
+ // Rendering
126
+ @if $rfs-fluid == null {
127
+ // Only render static font-size if no fluid font-size is available
128
+ font-size: $rfs-static;
129
+ }
130
+ @else {
131
+ $mq-value: null;
132
+
133
+ // RFS breakpoint formatting
134
+ @if $rfs-breakpoint-unit == em or $rfs-breakpoint-unit == rem {
135
+ $mq-value: #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit};
136
+ }
137
+ @else if $rfs-breakpoint-unit == px {
138
+ $mq-value: #{$rfs-breakpoint}px;
139
+ }
140
+ @else {
141
+ @error "`#{$rfs-breakpoint-unit}` is not a valid unit for $rfs-breakpoint-unit. Use `px`, `em` or `rem`.";
142
+ }
143
+
144
+ @if $rfs-class == "disable" {
145
+ // Adding an extra class increases specificity,
146
+ // which prevents the media query to override the font size
147
+ &,
148
+ .disable-responsive-font-size &,
149
+ &.disable-responsive-font-size {
150
+ font-size: $rfs-static;
151
+ }
152
+ }
153
+ @else {
154
+ font-size: $rfs-static;
155
+ }
156
+
157
+ @if $rfs-two-dimensional {
158
+ @media (max-width: #{$mq-value}), (max-height: #{$mq-value}) {
159
+ @if $rfs-class == "enable" {
160
+ .enable-responsive-font-size &,
161
+ &.enable-responsive-font-size {
162
+ font-size: $rfs-fluid;
163
+ }
164
+ }
165
+ @else {
166
+ font-size: $rfs-fluid;
167
+ }
168
+
169
+ @if $rfs-safari-iframe-resize-bug-fix {
170
+ // stylelint-disable-next-line length-zero-no-unit
171
+ min-width: 0vw;
172
+ }
173
+ }
174
+ }
175
+ @else {
176
+ @media (max-width: #{$mq-value}) {
177
+ @if $rfs-class == "enable" {
178
+ .enable-responsive-font-size &,
179
+ &.enable-responsive-font-size {
180
+ font-size: $rfs-fluid;
181
+ }
182
+ }
183
+ @else {
184
+ font-size: $rfs-fluid;
185
+ }
186
+
187
+ @if $rfs-safari-iframe-resize-bug-fix {
188
+ // stylelint-disable-next-line length-zero-no-unit
189
+ min-width: 0vw;
190
+ }
191
+ }
192
+ }
193
+ }
194
+ }
195
+ }
196
+
197
+ // The font-size & responsive-font-size mixin uses RFS to rescale font sizes
198
+ @mixin font-size($fs, $important: false) {
199
+ @include rfs($fs, $important);
200
+ }
201
+
202
+ @mixin responsive-font-size($fs, $important: false) {
203
+ @include rfs($fs, $important);
204
+ }