diff --git a/bower.json b/bower.json index 237498c..daa18be 100644 --- a/bower.json +++ b/bower.json @@ -1,6 +1,6 @@ { "name": "typographic", - "version": "2.0.1", + "version": "2.0.2", "homepage": "https://github.com/corysimmons/typographic", "authors": [ "Cory Simmons " diff --git a/package.json b/package.json index 93db296..3165016 100644 --- a/package.json +++ b/package.json @@ -4,7 +4,7 @@ "name": "Cory Simmons" }, "main": "typographic.js", - "version": "2.0.1", + "version": "2.0.2", "description": "Responsive typography with modular scale, font stacks, and more.", "keywords": [ "stylus", diff --git a/typographic.scss b/typographic.scss index a367872..154501a 100644 --- a/typographic.scss +++ b/typographic.scss @@ -1,4 +1,4 @@ -// Typographic v2.0.1 - https://github.com/corysimmons/typographic +// Typographic v2.0.2 - https://github.com/corysimmons/typographic // Ratios @@ -134,6 +134,96 @@ h1, h2, h3, h4, h5, h6 { color: $header-color; } +h1 { + $min-font: $min-font + $ratio * 12; + $max-font: $max-font + $ratio * 12; + + font-size: $min-font; + + @media (min-width: $min-width) { + font-size: calc( #{$min-font} + (#{_strip-units($max-font)} - #{_strip-units($min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) ); + } + + @media (min-width: $max-width) { + font-size: $max-font; + } +} + +h2 { + $min-font: $min-font + $ratio * 10; + $max-font: $max-font + $ratio * 10; + + font-size: $min-font; + + @media (min-width: $min-width) { + font-size: calc( #{$min-font} + (#{_strip-units($max-font)} - #{_strip-units($min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) ); + } + + @media (min-width: $max-width) { + font-size: $max-font; + } +} + +h3 { + $min-font: $min-font + $ratio * 8; + $max-font: $max-font + $ratio * 8; + + font-size: $min-font; + + @media (min-width: $min-width) { + font-size: calc( #{$min-font} + (#{_strip-units($max-font)} - #{_strip-units($min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) ); + } + + @media (min-width: $max-width) { + font-size: $max-font; + } +} + +h4 { + $min-font: $min-font + $ratio * 6; + $max-font: $max-font + $ratio * 6; + + font-size: $min-font; + + @media (min-width: $min-width) { + font-size: calc( #{$min-font} + (#{_strip-units($max-font)} - #{_strip-units($min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) ); + } + + @media (min-width: $max-width) { + font-size: $max-font; + } +} + +h5 { + $min-font: $min-font + $ratio * 4; + $max-font: $max-font + $ratio * 4; + + font-size: $min-font; + + @media (min-width: $min-width) { + font-size: calc( #{$min-font} + (#{_strip-units($max-font)} - #{_strip-units($min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) ); + } + + @media (min-width: $max-width) { + font-size: $max-font; + } +} + +h6 { + $min-font: $min-font + $ratio * 2; + $max-font: $max-font + $ratio * 2; + + font-size: $min-font; + + @media (min-width: $min-width) { + font-size: calc( #{$min-font} + (#{_strip-units($max-font)} - #{_strip-units($min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) ); + } + + @media (min-width: $max-width) { + font-size: $max-font; + } +} + blockquote { font-style: italic; padding-left: #{$golden}em; diff --git a/typographic.styl b/typographic.styl index 08e5801..7373b83 100644 --- a/typographic.styl +++ b/typographic.styl @@ -1,4 +1,4 @@ -// Typographic v2.0.1 - https://github.com/corysimmons/typographic +// Typographic v2.0.2 - https://github.com/corysimmons/typographic // Settings @@ -121,6 +121,78 @@ h1, h2, h3, h4, h5, h6 margin-bottom: ($golden * .25)em color: $header-color +h1 + $min-font = $min-font + $ratio * 12 + $max-font = $max-font + $ratio * 12 + + font-size: $min-font + + @media (min-width: $min-width) + font-size: s('calc( %s + (%s - %s) * ((100vw - %s) / (%s - %s)) )', $min-font, remove-unit($max-font), remove-unit($min-font), $min-width, remove-unit($max-width), remove-unit($min-width)) + + @media (min-width: $max-width) + font-size: $max-font + +h2 + $min-font = $min-font + $ratio * 10 + $max-font = $max-font + $ratio * 10 + + font-size: $min-font + + @media (min-width: $min-width) + font-size: s('calc( %s + (%s - %s) * ((100vw - %s) / (%s - %s)) )', $min-font, remove-unit($max-font), remove-unit($min-font), $min-width, remove-unit($max-width), remove-unit($min-width)) + + @media (min-width: $max-width) + font-size: $max-font + +h3 + $min-font = $min-font + $ratio * 8 + $max-font = $max-font + $ratio * 8 + + font-size: $min-font + + @media (min-width: $min-width) + font-size: s('calc( %s + (%s - %s) * ((100vw - %s) / (%s - %s)) )', $min-font, remove-unit($max-font), remove-unit($min-font), $min-width, remove-unit($max-width), remove-unit($min-width)) + + @media (min-width: $max-width) + font-size: $max-font + +h4 + $min-font = $min-font + $ratio * 6 + $max-font = $max-font + $ratio * 6 + + font-size: $min-font + + @media (min-width: $min-width) + font-size: s('calc( %s + (%s - %s) * ((100vw - %s) / (%s - %s)) )', $min-font, remove-unit($max-font), remove-unit($min-font), $min-width, remove-unit($max-width), remove-unit($min-width)) + + @media (min-width: $max-width) + font-size: $max-font + +h5 + $min-font = $min-font + $ratio * 4 + $max-font = $max-font + $ratio * 4 + + font-size: $min-font + + @media (min-width: $min-width) + font-size: s('calc( %s + (%s - %s) * ((100vw - %s) / (%s - %s)) )', $min-font, remove-unit($max-font), remove-unit($min-font), $min-width, remove-unit($max-width), remove-unit($min-width)) + + @media (min-width: $max-width) + font-size: $max-font + +h6 + $min-font = $min-font + $ratio * 2 + $max-font = $max-font + $ratio * 2 + + font-size: $min-font + + @media (min-width: $min-width) + font-size: s('calc( %s + (%s - %s) * ((100vw - %s) / (%s - %s)) )', $min-font, remove-unit($max-font), remove-unit($min-font), $min-width, remove-unit($max-width), remove-unit($min-width)) + + @media (min-width: $max-width) + font-size: $max-font + blockquote font-style: italic padding-left: ($golden)em