Commit b7527e742fd3ab7c77de6a481cff792adc83700c
1 parent
6b010faac4
Exists in
master
and in
2 other branches
agregado scss para manejar responsividad de textos
Showing
1 changed file
with
101 additions
and
0 deletions
Show diff stats
src/scss/typography.scss
| ... | ... | @@ -0,0 +1,101 @@ |
| 1 | +@import "node_modules/bootstrap/scss/functions"; | |
| 2 | +@import "node_modules/bootstrap/scss/variables"; | |
| 3 | +@import "node_modules/bootstrap/scss/mixins"; | |
| 4 | + | |
| 5 | +$font-size-base: 1rem; | |
| 6 | +$type-scales: ( | |
| 7 | + minor-second: 1.067, | |
| 8 | + major-second: 1.125, | |
| 9 | + minor-third: 1.2, | |
| 10 | + major-third: 1.25, | |
| 11 | + perfect-fourth: 1.333, | |
| 12 | + augmented-fourth: 1.414, | |
| 13 | + perfect-fifth: 1.5, | |
| 14 | + golden-ratio: 1.618 | |
| 15 | +); | |
| 16 | + | |
| 17 | +$heading-type-scale-base: minor-third; | |
| 18 | +$display-type-scale-base: minor-third; | |
| 19 | +@function check-type-scale-value($scale) { | |
| 20 | + @if map-has-key($type-scales, $scale) { | |
| 21 | + @return map-get($type-scales, $scale); | |
| 22 | + } @else if type-of($scale) == number and unitless($scale) { | |
| 23 | + @return $scale; | |
| 24 | + } @else { | |
| 25 | + @error "Sorry, `#{$scale}` is not a unitless number value or a pre-defined key in the $type-scales map."; | |
| 26 | + } | |
| 27 | +} | |
| 28 | +@mixin create-heading-type-scale($scale) { | |
| 29 | + $the-heading-type-scale: check-type-scale-value($scale); | |
| 30 | + $font-size-h6: $font-size-base; | |
| 31 | + $font-size-h5: $font-size-h6 * $the-heading-type-scale; | |
| 32 | + $font-size-h4: $font-size-h5 * $the-heading-type-scale; | |
| 33 | + $font-size-h3: $font-size-h4 * $the-heading-type-scale; | |
| 34 | + $font-size-h2: $font-size-h3 * $the-heading-type-scale; | |
| 35 | + $font-size-h1: $font-size-h2 * $the-heading-type-scale; | |
| 36 | + $font-size-display-base: $font-size-h1 !global; | |
| 37 | + | |
| 38 | + h1, | |
| 39 | + .h1 { | |
| 40 | + font-size: $font-size-h1; | |
| 41 | + } | |
| 42 | + h2, | |
| 43 | + .h2 { | |
| 44 | + font-size: $font-size-h2; | |
| 45 | + } | |
| 46 | + h3, | |
| 47 | + .h3 { | |
| 48 | + font-size: $font-size-h3; | |
| 49 | + } | |
| 50 | + h4, | |
| 51 | + .h4 { | |
| 52 | + font-size: $font-size-h4; | |
| 53 | + } | |
| 54 | + h5, | |
| 55 | + .h5 { | |
| 56 | + font-size: $font-size-h5; | |
| 57 | + } | |
| 58 | + h6, | |
| 59 | + .h6 { | |
| 60 | + font-size: $font-size-h6; | |
| 61 | + } | |
| 62 | +} | |
| 63 | + | |
| 64 | +@mixin create-display-type-scale($scale) { | |
| 65 | + $the-display-type-scale: check-type-scale-value($scale); | |
| 66 | + $font-size-display-4: $font-size-display-base + $font-size-base; | |
| 67 | + $font-size-display-3: $font-size-display-4 * $the-display-type-scale; | |
| 68 | + $font-size-display-2: $font-size-display-3 * $the-display-type-scale; | |
| 69 | + $font-size-display-1: $font-size-display-2 * $the-display-type-scale; | |
| 70 | + | |
| 71 | + .display-4 { | |
| 72 | + font-size: $font-size-display-4; | |
| 73 | + } | |
| 74 | + .display-3 { | |
| 75 | + font-size: $font-size-display-3; | |
| 76 | + } | |
| 77 | + .display-2 { | |
| 78 | + font-size: $font-size-display-2; | |
| 79 | + } | |
| 80 | + .display-1 { | |
| 81 | + font-size: $font-size-display-1; | |
| 82 | + } | |
| 83 | +} | |
| 84 | + | |
| 85 | +html { | |
| 86 | + font-size: 14px; | |
| 87 | + @media (min-width: 768px) { | |
| 88 | + font-size: 16px; | |
| 89 | + } | |
| 90 | + @media (min-width: 992px) { | |
| 91 | + font-size: 18px; | |
| 92 | + } | |
| 93 | +} | |
| 94 | + | |
| 95 | +@include create-heading-type-scale($heading-type-scale-base); | |
| 96 | +@include create-display-type-scale($display-type-scale-base); | |
| 97 | +@media (min-width: 768px) { | |
| 98 | + @include create-heading-type-scale(minor-third); | |
| 99 | +} | |
| 100 | + | |
| 101 | +@import "node_modules/bootstrap/scss/bootstrap"; |