_ Git - blog/blob - _sass/_type.scss

   1 // Typography
   2 //
   3 // Headings, body text, lists, and other misc typographic elements.
   4
   5 // Headings
   6 h1, h2, h3, h4, h5, h6 {
   7   margin-bottom: .5rem;
   8   font-weight: bold;
   9   line-height: 1.25;
  10   color: #313131;
  11   text-rendering: optimizeLegibility;
  12 }
  13 h1 {
  14   font-size: 2rem;
  15 }
  16 h2 {
  17   margin-top: 1rem;
  18   font-size: 1.5rem;
  19 }
  20 h3 {
  21   margin-top: 1.5rem;
  22   font-size: 1.25rem;
  23 }
  24 h4, h5, h6 {
  25   margin-top: 1rem;
  26   font-size: 1rem;
  27 }
  28
  29 // Body text
  30 p {
  31   margin-top: 0;
  32   margin-bottom: 1rem;
  33 }
  34
  35 strong {
  36   color: #303030;
  37 }
  38
  39 // Lists
  40 ul, ol, dl {
  41   margin-top: 0;
  42   margin-bottom: 1rem;
  43 }
  44
  45 dt {
  46   font-weight: bold;
  47 }
  48 dd {
  49   margin-bottom: .5rem;
  50 }
  51
  52 // Misc
  53 hr {
  54   position: relative;
  55   margin: 1.5rem 0;
  56   border: 0;
  57   border-top: 1px solid #eee;
  58   border-bottom: 1px solid #fff;
  59 }
  60
  61 abbr {
  62   font-size: 85%;
  63   font-weight: bold;
  64   color: #555;
  65   text-transform: uppercase;
  66 }
  67 abbr[title] {
  68   cursor: help;
  69   border-bottom: 1px dotted #e5e5e5;
  70 }
  71
  72 /* Quotes */
  73 blockquote {
  74   padding: .5rem 1rem;
  75   margin: .8rem 0;
  76   color: #7a7a7a;
  77   border-left: .25rem solid #e5e5e5;
  78
  79   @media (min-width: 30em) {
  80     padding-right: 5rem;
  81     padding-left: 1.25rem;
  82   }
  83 }
  84
  85 blockquote p:last-child {
  86   margin-bottom: 0;
  87 }
  88
  89
  90 // Custom type
  91 //
  92 // Extend paragraphs with `.lead` for larger introductory text.
  93
  94 .lead {
  95   font-size: 1.25rem;
  96   font-weight: 300;
  97 }