static/scss/_fonts.scss

   1 body {
   2         -webkit-font-smoothing: antialiased;
   3         font-size: 16px;
   4 }
   5
   6 h1 {
   7         line-height: 3rem;
   8 }
   9
  10 h2 {
  11         line-height: 2.75rem;
  12 }
  13
  14 h3 {
  15         font-size: 20px;
  16         line-height: 28px;
  17         @include media-breakpoint-up(md) {
  18                 font-size: 24px;
  19                 line-height: 32px;
  20                 font-weight: 300;
  21                 margin-bottom: 0;
  22         }
  23         &.headline {
  24                 text-align: center;
  25                 font-size: 32px;
  26                 line-height: 44px;
  27                 color: $blue-grey-900;
  28                 @include media-breakpoint-up(sm) {
  29                         font-size: 36px;
  30                         line-height: 48px;
  31                 }
  32         }
  33 }
  34
  35 h4 {
  36         font-weight: 500;
  37         font-size: 16px;
  38         line-height: 24px;
  39         @include media-breakpoint-up(sm) {
  40                 font-size: 20px;
  41                 line-height: 28px;
  42         }
  43         &.secondHeadline {
  44                 font-size: 24px;
  45                 line-height: 32px;
  46                 text-align: left;
  47                 margin-top: 24px;
  48         }
  49 }
  50
  51 h5,
  52 .h5 {
  53         font-size: 16px;
  54         line-height: 24px;
  55         @include media-breakpoint-up(md) {
  56                 font-size: 24px;
  57                 line-height: 32px;
  58         }
  59         &.subheadline {
  60                 text-align: center;
  61                 font-size: 16px;
  62                 line-height: 24px;
  63                 color: $blue-grey-600;
  64         }
  65 }
  66
  67 p {
  68         font-size: 16px;
  69         line-height: 24px;
  70         &.lead {
  71                 font-size: inherit;
  72                 line-height: inherit;
  73                 @include media-breakpoint-up(md) {
  74                         font-size: 24px;
  75                         line-height: 32px;
  76                 }
  77         }
  78         &.copy {
  79                 margin-top: 16px;
  80                 @include media-breakpoint-up(sm) {
  81                         margin-top: 24px;
  82                 }
  83         }
  84 }
  85
  86 .display-1 {
  87         font-size: 120px;
  88         line-height: 144px;
  89 }
  90
  91 .display-2 {
  92         font-size: 32px;
  93         line-height: 44px;
  94         margin-bottom: 40px;
  95         @include media-breakpoint-up(md) {
  96                 font-size: 40px;
  97                 line-height: 56px;
  98                 margin-bottom: 3rem;
  99         }
 100 }
 101
 102 .display-3 {
 103         font-size: 24px;
 104         line-height: 32px;
 105         @include media-breakpoint-up(md) {
 106                 font-size: 32px;
 107                 line-height: 44px;
 108         }
 109 }
 110
 111 .display-4 {
 112         font-size: 14px;
 113         line-height: 20px;
 114         font-weight: 400;
 115         @include media-breakpoint-up(sm) {
 116                 font-size: 24px;
 117                 line-height: 32px;;
 118         }
 119 }
 120
 121 .display-5 {
 122         font-size: 20px;
 123         line-height: 28px;
 124 }
 125
 126 small,
 127 .small {
 128         font-size: 14px;
 129         line-height: 20px;
 130         @include media-breakpoint-up(md) {
 131                 font-size: 16px;
 132                 line-height: 24px;
 133         }
 134 }
 135
 136 .truncate {
 137   width: 100%;
 138   white-space: nowrap;
 139   overflow: hidden;
 140   text-overflow: ellipsis;
 141 }
 142
 143
 144 // fireInfo
 145 .fireinfo_cat {
 146         font-size: 14px;
 147         line-height: 20px;
 148 }
 149
 150 h5.fireinfo {
 151         font-size: 16px;
 152         line-height: 28px;
 153         font-weight: 500;
 154         @include media-breakpoint-up(md) {
 155                 font-size: 20px;
 156         }
 157 }
 158
 159 .fireinfo_per {
 160         font-size: 20px;
 161         line-height: 28px;
 162 }