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         }
  73
  74         h1, h2, h3, h4, h5, h6 {
  75                 color: _palette_light(fg-bold);
  76                 @media screen and (prefers-color-scheme: dark) {
  77                         color: _palette_dark(fg-bold);
  78                 }
  79                 font-weight: _font(weight-bold);
  80                 line-height: 1.65;
  81                 margin: 0 0 (_size(element-margin) * 0.5) 0;
  82
  83                 a {
  84                         color: inherit;
  85                         border-bottom: 0;
  86                 }
  87         }
  88
  89         h1 {
  90                 font-size: 2.5em;
  91         }
  92
  93         h2 {
  94                 font-size: 1.75em;
  95         }
  96
  97         h3 {
  98                 font-size: 1.35em;
  99         }
 100
 101         h4 {
 102                 font-size: 1.1em;
 103         }
 104
 105         h5 {
 106                 font-size: 0.9em;
 107         }
 108
 109         h6 {
 110                 font-size: 0.7em;
 111         }
 112
 113         @include breakpoint('<=small') {
 114                 h1 {
 115                         font-size: 2em;
 116                 }
 117
 118                 h2 {
 119                         font-size: 1.5em;
 120                 }
 121
 122                 h3 {
 123                         font-size: 1.25em;
 124                 }
 125         }
 126
 127         sub {
 128                 font-size: 0.8em;
 129                 position: relative;
 130                 top: 0.5em;
 131         }
 132
 133         sup {
 134                 font-size: 0.8em;
 135                 position: relative;
 136                 top: -0.5em;
 137         }
 138
 139         blockquote {
 140                 border-left: solid 4px _palette_light(border);
 141                 @media screen and (prefers-color-scheme: dark) {
 142                         border-left: solid 4px _palette_dark(border);
 143                 }
 144                 font-style: italic;
 145                 margin: 0 0 _size(element-margin) 0;
 146                 padding: (_size(element-margin) / 4) 0 (_size(element-margin) / 4) _size(element-margin);
 147         }
 148
 149         code {
 150                 background: _palette_light(border-bg);
 151                 @media screen and (prefers-color-scheme: dark) {
 152                         background: _palette_dark(border-bg);
 153                 }
 154                 font-family: _font(family-fixed);
 155                 font-size: 0.9em;
 156                 margin: 0 0.25em;
 157                 padding: 0.25em 0.65em;
 158         }
 159
 160         pre {
 161                 -webkit-overflow-scrolling: touch;
 162                 font-family: _font(family-fixed);
 163                 font-size: 0.9em;
 164                 margin: 0 0 _size(element-margin) 0;
 165
 166                 code {
 167                         display: block;
 168                         line-height: 1.75;
 169                         padding: 1em 1.5em;
 170                         overflow-x: auto;
 171                 }
 172         }
 173
 174         hr {
 175                 border: 0;
 176                 border-bottom: solid 1px _palette_light(border);
 177                 @media screen and (prefers-color-scheme: dark) {
 178                         border-bottom: solid 1px _palette_dark(border);
 179                 }
 180                 margin: _size(element-margin) 0;
 181
 182                 &.major {
 183                         margin: (_size(element-margin) * 1.5) 0;
 184                 }
 185         }
 186
 187         .align-left {
 188                 text-align: left;
 189         }
 190
 191         .align-center {
 192                 text-align: center;
 193         }
 194
 195         .align-right {
 196                 text-align: right;
 197         }
 198
 199         .screen-reader-text,
 200         .hidden,
 201         .js-hidden {
 202                 @include hide-visually;
 203         }
 204
 205         // large code blocks are wrapped in the highlight shortcode
 206         .highlight {
 207                 max-width: 100%;
 208                 overflow-x: auto;
 209         }
 210
 211         .has-dropcap:first-letter {
 212                 font-family: _font(family-fixed);
 213                 font-weight: 900;
 214                 float: left;
 215                 font-size: 6rem;
 216                 line-height: 0.65;
 217                 margin: 0.1em 0.1em 0.2em 0;
 218         }
 219