assets/sass/base/_typography.scss

   1 ///
   2 /// Forty 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: 17pt;
  13                 font-weight: _font(weight);
  14                 letter-spacing: _font(letter-spacing);
  15                 line-height: 1.65;
  16
  17                 @include breakpoint('<=xlarge') {
  18                         font-size: 14pt;
  19                 }
  20
  21                 @include breakpoint('<=large') {
  22                         font-size: 12pt;
  23                 }
  24
  25                 @include breakpoint('<=xxsmall') {
  26                         font-size: 11pt;
  27                 }
  28         }
  29
  30         a {
  31                 @include vendor('transition', (
  32                         'color #{_duration(transition)} ease-in-out',
  33                         'border-bottom-color #{_duration(transition)} ease-in-out'
  34                 ));
  35                 border-bottom: dotted 1px;
  36                 color: inherit;
  37                 text-decoration: none;
  38
  39                 &:hover {
  40                         border-bottom-color: transparent;
  41                         color: _palette(highlight) !important;
  42                 }
  43
  44                 &:active {
  45                         color: desaturate(darken(_palette(highlight), 15), 5) !important;
  46                 }
  47         }
  48
  49         strong, b {
  50                 color: _palette(fg-bold);
  51                 font-weight: _font(weight-bold);
  52         }
  53
  54         em, i {
  55                 font-style: italic;
  56         }
  57
  58         p {
  59                 margin: 0 0 _size(element-margin) 0;
  60         }
  61
  62         h1, h2, h3, h4, h5, h6 {
  63                 color: _palette(fg-bold);
  64                 font-weight: _font(weight-bold);
  65                 line-height: 1.65;
  66                 margin: 0 0 (_size(element-margin) * 0.5) 0;
  67
  68                 a {
  69                         color: inherit;
  70                         border-bottom: 0;
  71                 }
  72         }
  73
  74         h1 {
  75                 font-size: 2.5em;
  76         }
  77
  78         h2 {
  79                 font-size: 1.75em;
  80         }
  81
  82         h3 {
  83                 font-size: 1.35em;
  84         }
  85
  86         h4 {
  87                 font-size: 1.1em;
  88         }
  89
  90         h5 {
  91                 font-size: 0.9em;
  92         }
  93
  94         h6 {
  95                 font-size: 0.7em;
  96         }
  97
  98         @include breakpoint('<=small') {
  99                 h1 {
 100                         font-size: 2em;
 101                 }
 102
 103                 h2 {
 104                         font-size: 1.5em;
 105                 }
 106
 107                 h3 {
 108                         font-size: 1.25em;
 109                 }
 110         }
 111
 112         sub {
 113                 font-size: 0.8em;
 114                 position: relative;
 115                 top: 0.5em;
 116         }
 117
 118         sup {
 119                 font-size: 0.8em;
 120                 position: relative;
 121                 top: -0.5em;
 122         }
 123
 124         blockquote {
 125                 border-left: solid 4px _palette(border);
 126                 font-style: italic;
 127                 margin: 0 0 _size(element-margin) 0;
 128                 padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
 129         }
 130
 131         code {
 132                 background: _palette(border-bg);
 133                 font-family: _font(family-fixed);
 134                 font-size: 0.9em;
 135                 margin: 0 0.25em;
 136                 padding: 0.25em 0.65em;
 137         }
 138
 139         pre {
 140                 -webkit-overflow-scrolling: touch;
 141                 font-family: _font(family-fixed);
 142                 font-size: 0.9em;
 143                 margin: 0 0 _size(element-margin) 0;
 144
 145                 code {
 146                         display: block;
 147                         line-height: 1.75;
 148                         padding: 1em 1.5em;
 149                         overflow-x: auto;
 150                 }
 151         }
 152
 153         hr {
 154                 border: 0;
 155                 border-bottom: solid 1px _palette(border);
 156                 margin: _size(element-margin) 0;
 157
 158                 &.major {
 159                         margin: (_size(element-margin) * 1.5) 0;
 160                 }
 161         }
 162
 163         .align-left {
 164                 text-align: left;
 165         }
 166
 167         .align-center {
 168                 text-align: center;
 169         }
 170
 171         .align-right {
 172                 text-align: right;
 173         }
 174
 175         .screen-reader-text,
 176         .hidden {
 177                 @include hide-visually;
 178         }
 179
 180         // large code blocks are wrapped in the highlight shortcode
 181         .highlight {
 182                 max-width: 100%;
 183                 overflow-x: auto;
 184         }
 185
 186         .has-dropcap:first-letter {
 187                 font-family: _font(family-fixed);
 188                 font-weight: 900;
 189                 float: left;
 190                 font-size: 6rem;
 191                 line-height: 0.65;
 192                 margin: 0.1em 0.1em 0.2em 0;
 193         }
 194