Skip to content

Instantly share code, notes, and snippets.

@aquelito
Created April 16, 2012 13:01
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 2 You must be signed in to fork a gist
  • Save aquelito/2398651 to your computer and use it in GitHub Desktop.
Save aquelito/2398651 to your computer and use it in GitHub Desktop.
SCSS Compass Font Size - Vertical Rhythm
html {
font: 100%/1.5em "Helvetica Neue", Helvetica, Arial, sans-serif; }
body {
background-image: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(5%, #e1e1e1), color-stop(5%, rgba(225, 225, 225, 0)));
background-image: -webkit-linear-gradient(bottom, #e1e1e1 5%, rgba(225, 225, 225, 0) 5%);
background-image: -moz-linear-gradient(bottom, #e1e1e1 5%, rgba(225, 225, 225, 0) 5%);
background-image: -o-linear-gradient(bottom, #e1e1e1 5%, rgba(225, 225, 225, 0) 5%);
background-image: linear-gradient(bottom, #e1e1e1 5%, rgba(225, 225, 225, 0) 5%);
-webkit-background-size: 100% 24px;
-moz-background-size: 100% 24px;
-o-background-size: 100% 24px;
background-size: 100% 24px;
background-position: left top;
margin: 0; }
h1, .h1 {
font-size: 3em;
line-height: 1.5em;
margin-top: 0em;
margin-bottom: 0.5em; }
h2, .h2 {
font-size: 2.25em;
line-height: 1.33333em;
margin-top: 0em;
margin-bottom: 0.66667em; }
h3, .h3 {
font-size: 1.5em;
line-height: 2em;
margin-top: 0em;
margin-bottom: 1em; }
h4, .h4 {
font-size: 1.3125em;
line-height: 2.28571em;
margin-top: 0em;
margin-bottom: 1.14286em; }
h5, .h5 {
font-size: 1.125em;
line-height: 1.33333em;
margin-top: 0em;
margin-bottom: 1.33333em; }
h6, .h6 {
font-size: 1em;
line-height: 1.5em;
margin-top: 0em;
margin-bottom: 1.5em; }
@import "compass/typography/vertical_rhythm";
$base-font-size: 16px;
$base-line-height: 24px;
$browser-default-font-size: 16px;
$title-font-size: (h1 48px) (h2 36px) (h3 24px) (h4 21px) (h5 18px) (h6 16px);
$font-sans: "Helvetica Neue", Helvetica, Arial, sans-serif;
$font-body: $font-sans;
@mixin establish-baseline($font-size: $base-font-size, $font-family: $font-body) {
$taille: ($font-size / $browser-default-font-size * 100);
$line-height: rhythm(1, $font-size);
html {
font: #{$taille}%/#{$line-height} $font-family;
}
}
body {
@include baseline-grid-background($base-line-height, $color:#e1e1e1);
margin: 0;
}
@include establish-baseline; // html
@each $typo-array in $title-font-size {
$balise: nth($typo-array, 1);
$taille: nth($typo-array, 2);
#{$balise}, .#{$balise} {
@include adjust-font-size-to($taille);
@include margin-leader(0,$taille );
@include margin-trailer(1,$taille );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment