Why Gemfury? Push, build, and install  RubyGems npm packages Python packages Maven artifacts PHP packages Go Modules Debian packages RPM packages NuGet packages

Repository URL to install this package:

Details    
getfitter-elements / app / assets / stylesheets / _typography.scss
Size: Mime:
/*
 * Typography
 */

$base-font-family: "Avenir Next", "Helvetica Neue", Helvetica, Arial, sans-serif;
$base-font-size: 1em; // 16px
$base-line-height: 1.5;
$base-spacing: 1.4em;

$header-font-family: $base-font-family;
$header-line-height: 1.25;

$h1-font-size: $base-font-size * 3; // 48px
$h2-font-size: $base-font-size * 2.25; // 36px
$h3-font-size: $base-font-size * 1.5; // 24px
$h4-font-size: $base-font-size * 1.2; // 19px
$small-font-size: $base-font-size * 0.9; // 14px
$tiny-font-size: $base-font-size * 0.75; // 12px

body {
  font: normal 100% $base-font-family;
  background-color: $page-color;
  color: $base-font-color;

  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4  {
  font-family: $header-font-family;
  line-height: $header-line-height;
  margin: 0;
  text-rendering: optimizeLegibility; // Fix the character spacing for headings

  &.subtitle {
    font-weight: 400;
    color: $dark-gray;
    margin: 9;
  }
}

h1 { font-size: $h1-font-size; }
h2 { font-size: $h2-font-size; }
h3 { font-size: $h3-font-size; }
h4 { font-size: $h4-font-size; }

p {
  margin: 0 0 ($base-spacing / 2);

  &.lede {
    font-size: $base-font-size * 1.2; // 19px
  }
}

a {
  color: $link-color;

  &:hover {
    color: $link-hover-color;
  }

  &:active, &:focus {
    color: $link-active-color;
    outline: none;
  }
}

ul, ol {
  padding: 0;
  margin: 0;
  list-style: none;
}

.list-bullet, .list-number {
  padding-left: 20px;
  margin-bottom: 20px;
  margin-top: 5px;
}

.list-bullet { list-style-type: disc; }
.list-number { list-style-type: decimal; }

hr {
  border-bottom: $base-border;
  border-left: none;
  border-right: none;
  border-top: none;
  margin: ($base-spacing * 1.5) 0;
}

img,
picture {
  margin: 0;
  max-width: 100%;
}

blockquote {
  border-left: 2px solid $base-border-color;
  color: lighten($base-font-color, 15);
  margin: $base-spacing 0;
  padding-left: $base-spacing / 2;
}

cite {
  color: lighten($base-font-color, 25);
  font-style: italic;

  &:before {
    content: "\2014 \00A0";
  }
}