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