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