From b7527e742fd3ab7c77de6a481cff792adc83700c Mon Sep 17 00:00:00 2001
From: Marcelo Puebla <mpuebla@focasoftware.com>
Date: Fri, 27 Dec 2019 15:55:34 -0300
Subject: [PATCH] agregado scss para manejar responsividad de textos

---
 src/scss/typography.scss | 101 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 101 insertions(+)
 create mode 100644 src/scss/typography.scss

diff --git a/src/scss/typography.scss b/src/scss/typography.scss
new file mode 100644
index 0000000..3ba2633
--- /dev/null
+++ b/src/scss/typography.scss
@@ -0,0 +1,101 @@
+@import "node_modules/bootstrap/scss/functions";
+@import "node_modules/bootstrap/scss/variables";
+@import "node_modules/bootstrap/scss/mixins";
+
+$font-size-base: 1rem;
+$type-scales: (
+  minor-second: 1.067,
+  major-second: 1.125,
+  minor-third: 1.2,
+  major-third: 1.25,
+  perfect-fourth: 1.333,
+  augmented-fourth: 1.414,
+  perfect-fifth: 1.5,
+  golden-ratio: 1.618
+);
+
+$heading-type-scale-base: minor-third;
+$display-type-scale-base: minor-third;
+@function check-type-scale-value($scale) {
+  @if map-has-key($type-scales, $scale) {
+    @return map-get($type-scales, $scale);
+  } @else if type-of($scale) == number and unitless($scale) {
+    @return $scale;
+  } @else {
+    @error "Sorry, `#{$scale}` is not a unitless number value or a pre-defined key in the $type-scales map.";
+  }
+}
+@mixin create-heading-type-scale($scale) {
+  $the-heading-type-scale: check-type-scale-value($scale);
+  $font-size-h6: $font-size-base;
+  $font-size-h5: $font-size-h6 * $the-heading-type-scale;
+  $font-size-h4: $font-size-h5 * $the-heading-type-scale;
+  $font-size-h3: $font-size-h4 * $the-heading-type-scale;
+  $font-size-h2: $font-size-h3 * $the-heading-type-scale;
+  $font-size-h1: $font-size-h2 * $the-heading-type-scale;
+  $font-size-display-base: $font-size-h1 !global;
+
+  h1,
+  .h1 {
+    font-size: $font-size-h1;
+  }
+  h2,
+  .h2 {
+    font-size: $font-size-h2;
+  }
+  h3,
+  .h3 {
+    font-size: $font-size-h3;
+  }
+  h4,
+  .h4 {
+    font-size: $font-size-h4;
+  }
+  h5,
+  .h5 {
+    font-size: $font-size-h5;
+  }
+  h6,
+  .h6 {
+    font-size: $font-size-h6;
+  }
+}
+
+@mixin create-display-type-scale($scale) {
+  $the-display-type-scale: check-type-scale-value($scale);
+  $font-size-display-4: $font-size-display-base + $font-size-base;
+  $font-size-display-3: $font-size-display-4 * $the-display-type-scale;
+  $font-size-display-2: $font-size-display-3 * $the-display-type-scale;
+  $font-size-display-1: $font-size-display-2 * $the-display-type-scale;
+
+  .display-4 {
+    font-size: $font-size-display-4;
+  }
+  .display-3 {
+    font-size: $font-size-display-3;
+  }
+  .display-2 {
+    font-size: $font-size-display-2;
+  }
+  .display-1 {
+    font-size: $font-size-display-1;
+  }
+}
+
+html {
+  font-size: 14px;
+  @media (min-width: 768px) {
+    font-size: 16px;
+  }
+  @media (min-width: 992px) {
+    font-size: 18px;
+  }
+}
+
+@include create-heading-type-scale($heading-type-scale-base);
+@include create-display-type-scale($display-type-scale-base);
+@media (min-width: 768px) {
+  @include create-heading-type-scale(minor-third);
+}
+
+@import "node_modules/bootstrap/scss/bootstrap";
-- 
1.9.1