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: 500;
  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                 font-weight: 500;
  98                 line-height: 56px;
  99                 margin-bottom: 3rem;
 100         }
 101 }
 102
 103 .display-3 {
 104         font-size: 24px;
 105         line-height: 32px;
 106         @include media-breakpoint-up(md) {
 107                 font-size: 32px;
 108                 line-height: 44px;
 109         }
 110 }
 111
 112 .display-4 {
 113         font-size: 14px;
 114         line-height: 20px;
 115         font-weight: 400;
 116         @include media-breakpoint-up(sm) {
 117                 font-size: 24px;
 118                 line-height: 32px;;
 119         }
 120 }
 121
 122 .display-5 {
 123         font-size: 20px;
 124         line-height: 28px;
 125 }
 126
 127 small,
 128 .small {
 129         font-size: 14px;
 130         line-height: 20px;
 131         @include media-breakpoint-up(md) {
 132                 font-size: 16px;
 133                 line-height: 24px;
 134         }
 135 }
 136
 137 .truncate {
 138   width: 100%;
 139   white-space: nowrap;
 140   overflow: hidden;
 141   text-overflow: ellipsis;
 142 }
 143
 144
 145 // fireInfo
 146 .fireinfo_cat {
 147         font-size: 14px;
 148         line-height: 20px;
 149 }
 150
 151 h5.fireinfo {
 152         font-size: 16px;
 153         line-height: 28px;
 154         font-weight: 500;
 155         @include media-breakpoint-up(md) {
 156                 font-size: 20px;
 157         }
 158 }
 159
 160 .fireinfo_per {
 161         font-size: 20px;
 162         line-height: 28px;
 163 }