Add $line-height-ratio

2metres · Mar 23, 2015 · f3e9c0c · f3e9c0c
1 parent 31159ce
commit f3e9c0c
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 34 deletions.
diff --git a/README.md b/README.md
@@ -23,6 +23,7 @@ It's as easy as setting a few variables in [typographic.styl](typographic.styl)
 ## Settings
 ```stylus
 $ratio              = $golden
+$line-height-ratio  = $golden
 $body-font          = $helvetica
 $body-font-weight   = 300
 $body-color         = #666
@@ -106,5 +107,6 @@ $palatino      = Palatino, 'Palatino Linotype', 'Palatino LT STD', "Book Antiqua
   - [calc-polyfill](https://github.com/closingtag/calc-polyfill)
   - [vminpoly](https://github.com/saabi/vminpoly)
 
+
 ### Credit
 [Mike Riethmuller](http://twitter.com/MikeRiethmuller) came up with the idea of using `calc` with `vw` to create scaling typography [here](http://madebymike.com.au/writing/precise-control-responsive-typography/).
diff --git a/bower.json b/bower.json
@@ -1,6 +1,6 @@
 {
   "name": "typographic",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "homepage": "https://github.com/corysimmons/typographic",
   "authors": [
     "Cory Simmons <cory@launchboxhq.com>"

diff --git a/package.json b/package.json
@@ -4,7 +4,7 @@
     "name": "Cory Simmons"
   },
   "main": "typographic.js",
-  "version": "2.0.2",
+  "version": "2.0.3",
   "description": "Responsive typography with modular scale, font stacks, and more.",
   "keywords": [
     "stylus",

diff --git a/typographic.scss b/typographic.scss
@@ -1,4 +1,4 @@
-// Typographic v2.0.2 - https://github.com/corysimmons/typographic
+// Typographic v2.0.3 - https://github.com/corysimmons/typographic
 
 
 // Ratios
@@ -59,6 +59,7 @@ $palatino      : Palatino, 'Palatino Linotype', 'Palatino LT STD', "Book Antiqua
 // Settings
 
 $ratio              : $golden;
+$line-height-ratio  : $golden;
 $body-font          : $helvetica;
 $body-font-weight   : 300;
 $body-color         : #666;
@@ -85,7 +86,7 @@ html {
   $min-font: $min-font + $ratio;
   $max-font: $max-font + $ratio;
 
-  line-height: #{$golden}em;
+  line-height: #{$line-height-ratio}em;
 
   font-family: $body-font;
   font-weight: $body-font-weight;
@@ -123,14 +124,14 @@ a, code,
 dl, ol, ul,
 form,
 table {
-  margin-bottom: #{$golden}em;
+  margin-bottom: #{$line-height-ratio}em;
 }
 
 h1, h2, h3, h4, h5, h6 {
   font-family: $header-font;
   font-weight: $header-font-weight;
-  line-height: ($golden / 1.5) + em;
-  margin-bottom: ($golden * .25) + em;
+  line-height: ($line-height-ratio / 1.5) + em;
+  margin-bottom: ($line-height-ratio * .25) + em;
   color: $header-color;
 }
 
@@ -226,7 +227,7 @@ h6 {
 
 blockquote {
   font-style: italic;
-  padding-left: #{$golden}em;
+  padding-left: #{$line-height-ratio}em;
   border-left: 5px solid darken(white, 7%);
   cite {
     display: block;
@@ -235,7 +236,7 @@ blockquote {
 }
 
 pre {
-  padding: ($golden * .25) + em;
+  padding: ($line-height-ratio * .25) + em;
   background: darken(white, 2%);
   border: 1px solid darken(white, 7%);
   code {
@@ -247,7 +248,7 @@ pre {
 
 code {
   font-family: $courier;
-  padding: ($golden * .05) + em ($golden * .15) + em;
+  padding: ($line-height-ratio * .05) + em ($line-height-ratio * .15) + em;
   background: darken(white, 2%);
   border: 1px solid darken(white, 7%);
 }
@@ -267,25 +268,25 @@ dt {
 }
 
 dd {
-  margin-bottom: ($golden * .25) + em;
+  margin-bottom: ($line-height-ratio * .25) + em;
 }
 
 ul {
   padding-left: 1.1em;
   li {
-    margin-bottom: ($golden * .25) + em;
+    margin-bottom: ($line-height-ratio * .25) + em;
   }
 }
 
 ol {
   padding-left: 1.4em;
   li {
-    margin-bottom: ($golden * .25) + em;
+    margin-bottom: ($line-height-ratio * .25) + em;
   }
 }
 
 fieldset {
-  padding: ($golden * .5) + em;
+  padding: ($line-height-ratio * .5) + em;
   border: 1px solid darken(white, 7%);
 }
 
@@ -296,11 +297,11 @@ legend {
 
 label {
   display: block;
-  margin-bottom: ($golden * .5) + em;
+  margin-bottom: ($line-height-ratio * .5) + em;
 }
 
 input[type="text"], textarea {
-  padding: ($golden * .5) + em;
+  padding: ($line-height-ratio * .5) + em;
   border: 1px solid darken(white, 7%);
 }
 
@@ -311,7 +312,7 @@ table {
 }
 
 th {
-  padding: ($golden * .5) + em;
+  padding: ($line-height-ratio * .5) + em;
   text-align: left;
   color: $header-color;
   border: 1px solid darken(white, 7%);
@@ -326,6 +327,6 @@ tr {
 }
 
 td {
-  padding: ($golden * .5) + em;
+  padding: ($line-height-ratio * .5) + em;
   border: 1px solid darken(white, 7%);
 }
diff --git a/typographic.styl b/typographic.styl
@@ -1,9 +1,10 @@
-// Typographic v2.0.2 - https://github.com/corysimmons/typographic
+// Typographic v2.0.3 - https://github.com/corysimmons/typographic
 
 
 // Settings
 
 $ratio              = $golden
+$line-height-ratio  = $golden
 $body-font          = $helvetica
 $body-font-weight   = 300
 $body-color         = #666
@@ -78,7 +79,7 @@ html
   $min-font = $min-font + $ratio
   $max-font = $max-font + $ratio
 
-  line-height: ($golden)em
+  line-height: ($line-height-ratio)em
 
   font-family: $body-font
   font-weight: $body-font-weight
@@ -112,13 +113,13 @@ a, code,
 dl, ol, ul,
 form,
 table
-  margin-bottom: ($golden)em
+  margin-bottom: ($line-height-ratio)em
 
 h1, h2, h3, h4, h5, h6
   font-family: $header-font
   font-weight: $header-font-weight
-  line-height: ($golden / 1.5)em
-  margin-bottom: ($golden * .25)em
+  line-height: ($line-height-ratio / 1.5)em
+  margin-bottom: ($line-height-ratio * .25)em
   color: $header-color
 
 h1
@@ -195,14 +196,14 @@ h6
 
 blockquote
   font-style: italic
-  padding-left: ($golden)em
+  padding-left: ($line-height-ratio)em
   border-left: 5px solid darken(white, 7%)
   cite
     display: block
     font-style: normal
 
 pre
-  padding: ($golden * .25)em
+  padding: ($line-height-ratio * .25)em
   background: darken(white, 2%)
   border: 1px solid darken(white, 7%)
   code
@@ -212,7 +213,7 @@ pre
 
 code
   font-family: $courier
-  padding: ($golden * .05)em ($golden * .15)em
+  padding: ($line-height-ratio * .05)em ($line-height-ratio * .15)em
   background: darken(white, 2%)
   border: 1px solid darken(white, 7%)
 
@@ -228,20 +229,20 @@ dt
   font-weight: bold
 
 dd
-  margin-bottom: ($golden * .25)em
+  margin-bottom: ($line-height-ratio * .25)em
 
 ul
   padding-left: 1.1em
   li
-    margin-bottom: ($golden * .25)em
+    margin-bottom: ($line-height-ratio * .25)em
 
 ol
   padding-left: 1.4em
   li
-    margin-bottom: ($golden * .25)em
+    margin-bottom: ($line-height-ratio * .25)em
 
 fieldset
-  padding: ($golden * .5)em
+  padding: ($line-height-ratio * .5)em
   border: 1px solid darken(white, 7%)
 
 legend
@@ -250,10 +251,10 @@ legend
 
 label
   display: block
-  margin-bottom: ($golden * .5)em
+  margin-bottom: ($line-height-ratio * .5)em
 
 input[type="text"], textarea
-  padding: ($golden * .5)em
+  padding: ($line-height-ratio * .5)em
   border: 1px solid darken(white, 7%)
 
 table
@@ -262,7 +263,7 @@ table
   border-collapse: collapse
 
 th
-  padding: ($golden * .5)em
+  padding: ($line-height-ratio * .5)em
   text-align: left
   color: $header-color
   border: 1px solid darken(white, 7%)
@@ -273,5 +274,5 @@ tr
       background: darken(white, 3%)
 
 td
-  padding: ($golden * .5)em
+  padding: ($line-height-ratio * .5)em
   border: 1px solid darken(white, 7%)