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
| File was created | 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"; | ||
| 102 |