Skip to content

Commit

Permalink
Add $vertical-rhythm switch
Browse files Browse the repository at this point in the history 
Vertical rhythm jacks up header line-height. I haven’t found a good solution for this, so I’m implementing this switch for now.
  • Loading branch information
Cory Simmons committed Mar 28, 2015
1 parent 8def583 commit 307dc3b
Show file tree
Hide file tree
Showing 2 changed files with 118 additions and 76 deletions.
103 changes: 65 additions & 38 deletions scss/typographic.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
// Typographic v2.7.2 - https://github.com/corysimmons/typographic
// Typographic v2.8.0 - https://github.com/corysimmons/typographic


// Ratios
Expand Down Expand Up @@ -70,6 +70,7 @@ $min-font : 12px !default;
$max-font : 20px !default;
$min-width : 600px !default;
$max-width : 1000px !default;
$vertical-rhythm : true !default;


// Helpers
Expand Down Expand Up @@ -283,10 +284,12 @@ $max-width : 1000px !default;
}

h1, h2, h3, h4, h5, h6 {
margin-top: 0;
line-height: 1.1em;
margin-bottom: .15em;
font-family: $header-font;
font-weight: $header-font-weight;
color: $header-color;
margin-bottom: 0;
clear: both;
}

Expand All @@ -295,19 +298,23 @@ $max-width : 1000px !default;
$local-max-font: $max-font * (math-pow($header-ratio, 1.75));

font-size: $local-min-font;
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * $min-font) / ($local-min-font / .25)) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * $min-font) / ($local-min-font / .25)) + em;
}

@media (min-width: $min-width) {
font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
}

@media (min-width: $max-width) {
font-size: $local-max-font;
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * $max-font) / ($local-max-font / .25)) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * $max-font) / ($local-max-font / .25)) + em;
}
}
}

Expand All @@ -316,19 +323,23 @@ $max-width : 1000px !default;
$local-max-font: $max-font * (math-pow($header-ratio, 1.4));

font-size: $local-min-font;
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (3 / _strip-units($local-min-font)))) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (3 / _strip-units($local-min-font)))) + em;
}

@media (min-width: $min-width) {
font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
}

@media (min-width: $max-width) {
font-size: $local-max-font;
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (3 / _strip-units($local-max-font)))) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (3 / _strip-units($local-max-font)))) + em;
}
}
}

Expand All @@ -337,19 +348,23 @@ $max-width : 1000px !default;
$local-max-font: $max-font * (math-pow($header-ratio, 1.05));

font-size: $local-min-font;
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (3 / _strip-units($local-min-font)))) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (3 / _strip-units($local-min-font)))) + em;
}

@media (min-width: $min-width) {
font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
}

@media (min-width: $max-width) {
font-size: $local-max-font;
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (3 / _strip-units($local-max-font)))) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (3 / _strip-units($local-max-font)))) + em;
}
}
}

Expand All @@ -358,19 +373,23 @@ $max-width : 1000px !default;
$local-max-font: $max-font * (math-pow($header-ratio, .7));

font-size: $local-min-font;
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (3 / _strip-units($local-min-font)))) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (3 / _strip-units($local-min-font)))) + em;
}

@media (min-width: $min-width) {
font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
}

@media (min-width: $max-width) {
font-size: $local-max-font;
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (3 / _strip-units($local-max-font)))) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (3 / _strip-units($local-max-font)))) + em;
}
}
}

Expand All @@ -379,19 +398,23 @@ $max-width : 1000px !default;
$local-max-font: $max-font * (math-pow($header-ratio, .35));

font-size: $local-min-font;
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * $min-font) / ($local-min-font / .25)) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * $min-font) / ($local-min-font / .25)) + em;
}

@media (min-width: $min-width) {
font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
}

@media (min-width: $max-width) {
font-size: $local-max-font;
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * $max-font) / ($local-max-font / .25)) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * $max-font) / ($local-max-font / .25)) + em;
}
}
}

Expand All @@ -400,19 +423,23 @@ $max-width : 1000px !default;
$local-max-font: $max-font;

font-size: $local-min-font;
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (2 / _strip-units($local-min-font)))) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (2 / _strip-units($local-min-font)))) + em;
}

@media (min-width: $min-width) {
font-size: calc( #{$local-min-font} + (#{_strip-units($local-max-font)} - #{_strip-units($local-min-font)}) * ((100vw - #{$min-width}) / (#{_strip-units($max-width)} - #{_strip-units($min-width)})) );
}

@media (min-width: $max-width) {
font-size: $local-max-font;
margin-top: (($line-height-ratio * $max-font) / ($local-max-font / 1.25)) + em;
line-height: (($line-height-ratio * $max-font) / ($local-max-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($max-font)) / (_strip-units($local-max-font) / .25) * (1 + (2 / _strip-units($local-max-font)))) + em;
@if ($vertical-rhythm) {
margin-top: (($line-height-ratio * $min-font) / ($local-min-font / 1.25)) + em;
line-height: (($line-height-ratio * $min-font) / ($local-min-font / 1.5)) + em;
margin-bottom: (($line-height-ratio * _strip-units($min-font)) / (_strip-units($local-min-font) / .25) * (1 + (1 / _strip-units($local-min-font)))) + em;
}
}
}

Expand Down
Loading

0 comments on commit 307dc3b

Please sign in to comment.