assets/main/sass/base/_typography.scss

   1 ///
   2 /// Editorial by HTML5 UP
   3 /// html5up.net | @ajlkn
   4 /// Free for personal and commercial use under the CCA 3.0 license (html5up.net/license)
   5 ///
   6
   7 /* Type */
   8
   9         body, input, select, textarea {
  10                 color: _palette(fg);
  11                 font-family: _font(family);
  12                 font-size: 13pt;
  13                 font-weight: _font(weight);
  14                 line-height: 1.65;
  15
  16                 @include breakpoint('<=xlarge') {
  17                         font-size: 11pt;
  18                 }
  19
  20                 @include breakpoint('<=large') {
  21                         font-size: 10pt;
  22                 }
  23
  24                 @include breakpoint('<=xxsmall') {
  25                         font-size: 9pt;
  26                 }
  27         }
  28
  29         a {
  30                 @include vendor('transition', (
  31                         'color #{_duration(transition)} ease-in-out',
  32                         'border-bottom-color #{_duration(transition)} ease-in-out'
  33                 ));
  34                 border-bottom: dotted 1px;
  35                 color: _palette(accent);
  36                 text-decoration: none;
  37
  38                 &:hover {
  39                         border-bottom-color: _palette(accent);
  40                         color: _palette(accent) !important;
  41
  42                         strong {
  43                                 color: inherit;
  44                         }
  45                 }
  46         }
  47
  48         strong, b {
  49                 color: _palette(fg-bold);
  50                 font-weight: _font(weight-bold);
  51         }
  52
  53         em, i {
  54                 font-style: italic;
  55         }
  56
  57         p {
  58                 margin: 0 0 _size(element-margin) 0;
  59         }
  60
  61         h1, h2, h3, h4, h5, h6 {
  62                 color: _palette(fg-bold);
  63                 font-family: _font(family-heading);
  64                 font-weight: _font(weight-heading);
  65                 line-height: 1.5;
  66                 margin: 0 0 (_size(element-margin) * 0.5) 0;
  67
  68                 a {
  69                         color: inherit;
  70                         text-decoration: none;
  71                         border-bottom: 0;
  72                 }
  73         }
  74
  75         h1 {
  76                 font-size: 4em;
  77                 margin: 0 0 (_size(element-margin) * 0.25) 0;
  78                 line-height: 1.3;
  79         }
  80
  81         h2 {
  82                 font-size: 1.75em;
  83         }
  84
  85         h3 {
  86                 font-size: 1.25em;
  87         }
  88
  89         h4 {
  90                 font-size: 1.1em;
  91         }
  92
  93         h5 {
  94                 font-size: 0.9em;
  95         }
  96
  97         h6 {
  98                 font-size: 0.7em;
  99         }
 100
 101         @include breakpoint('<=xlarge') {
 102                 h1 {
 103                         font-size: 3.5em;
 104                 }
 105         }
 106
 107         @include breakpoint('<=medium') {
 108                 h1 {
 109                         font-size: 3.25em;
 110                 }
 111         }
 112
 113         @include breakpoint('<=small') {
 114                 h1 {
 115                         font-size: 2em;
 116                         line-height: 1.4;
 117                 }
 118
 119                 h2 {
 120                         font-size: 1.5em;
 121                 }
 122         }
 123
 124         sub {
 125                 font-size: 0.8em;
 126                 position: relative;
 127                 top: 0.5em;
 128         }
 129
 130         sup {
 131                 font-size: 0.8em;
 132                 position: relative;
 133                 top: -0.5em;
 134         }
 135
 136         blockquote {
 137                 border-left: solid 3px _palette(border);
 138                 font-style: italic;
 139                 margin: 0 0 _size(element-margin) 0;
 140                 padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
 141         }
 142
 143         code {
 144                 background: _palette(border-bg);
 145                 border-radius: _size(border-radius);
 146                 border: solid 1px _palette(border);
 147                 font-family: _font(family-fixed);
 148                 font-size: 0.9em;
 149                 margin: 0 0.25em;
 150                 padding: 0.25em 0.65em;
 151         }
 152
 153         pre {
 154                 -webkit-overflow-scrolling: touch;
 155                 font-family: _font(family-fixed);
 156                 font-size: 0.9em;
 157                 margin: 0 0 _size(element-margin) 0;
 158
 159                 code {
 160                         display: block;
 161                         line-height: 1.75;
 162                         padding: 1em 1.5em;
 163                         overflow-x: auto;
 164                 }
 165         }
 166
 167         hr {
 168                 border: 0;
 169                 border-bottom: solid 1px _palette(border);
 170                 margin: _size(element-margin) 0;
 171
 172                 &.major {
 173                         margin: (_size(element-margin) * 1.5) 0;
 174                 }
 175         }
 176
 177         .align-left {
 178                 text-align: left;
 179         }
 180
 181         .align-center {
 182                 text-align: center;
 183         }
 184
 185         .align-right {
 186                 text-align: right;
 187         }