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

   1 // Typography
   2 //
   3 // Headings, body text, lists, and other misc typographic elements.
   4
   5 h1, h2, h3, h4, h5, h6 {
   6   margin-bottom: .5rem;
   7   font-weight: bold;
   8   line-height: 1.25;
   9   color: #313131;
  10   text-rendering: optimizeLegibility;
  11 }
  12
  13 h1 {
  14   font-size: 2rem;
  15 }
  16
  17 h2 {
  18   margin-top: 1rem;
  19   font-size: 1.5rem;
  20 }
  21
  22 h3 {
  23   margin-top: 1.5rem;
  24   font-size: 1.25rem;
  25 }
  26
  27 h4, h5, h6 {
  28   margin-top: 1rem;
  29   font-size: 1rem;
  30 }
  31
  32 p {
  33   margin-top: 0;
  34   margin-bottom: 1rem;
  35 }
  36
  37 strong {
  38   color: #303030;
  39 }
  40
  41 ul, ol, dl {
  42   margin-top: 0;
  43   margin-bottom: 1rem;
  44 }
  45
  46 dt {
  47   font-weight: bold;
  48 }
  49
  50 dd {
  51   margin-bottom: .5rem;
  52 }
  53
  54 hr {
  55   position: relative;
  56   margin: 1.5rem 0;
  57   border: 0;
  58   border-top: 1px solid #eee;
  59   border-bottom: 1px solid #fff;
  60 }
  61
  62 abbr {
  63   font-size: 85%;
  64   font-weight: bold;
  65   color: #555;
  66   text-transform: uppercase;
  67
  68   &[title] {
  69     cursor: help;
  70     border-bottom: 1px dotted #e5e5e5;
  71   }
  72 }
  73
  74 blockquote {
  75   padding: .5rem 1rem;
  76   margin: .8rem 0;
  77   color: #7a7a7a;
  78   border-left: .25rem solid #e5e5e5;
  79
  80   p:last-child {
  81     margin-bottom: 0;
  82   }
  83
  84   @media (min-width: 30em) {
  85     padding-right: 5rem;
  86     padding-left: 1.25rem;
  87   }
  88 }
  89
  90
  91 // Markdown footnotes
  92 //
  93 // See the example content post for an example.
  94
  95 // Footnote number within body text
  96 a[href^="#fn:"],
  97 // Back to footnote link
  98 a[href^="#fnref:"] {
  99   display: inline-block;
 100   margin-left: .1rem;
 101   font-weight: bold;
 102 }
 103
 104 // List of footnotes
 105 .footnotes {
 106   margin-top: 2rem;
 107   font-size: 85%;
 108 }
 109
 110 // Custom type
 111 //
 112 // Extend paragraphs with `.lead` for larger introductory text.
 113
 114 .lead {
 115   font-size: 1.25rem;
 116   font-weight: 300;
 117 }