packages/styles/scss/base/_typo.scss

   1 @use 'sass:math';
   2
   3 html {
   4         /* Introduce `--setting-font-size` to make the font size setting possible. */
   5
   6         /* chosen size * browser default size / app default size * 100% / browser default size */
   7         font-size: calc(var(--setting-font-size) * #{math.div(16, 14) * math.div(100%, 16)});
   8 }
   9
  10 body {
  11         color: var(--text-norm);
  12         line-height: $base-line-height;
  13         font-size: em($base-font-size, $root-default-font-size);
  14 }
  15
  16 @each $tag, $size in $title-sizes {
  17         #{$tag},
  18         .#{$tag} {
  19                 display: block;
  20                 margin: 0;
  21                 font-size: em($size);
  22                 font-weight: var(--font-weight-normal);
  23         }
  24 }
  25
  26 /* Hyphenation: Thou shalt not pass (Moïse or Gandalf, don’t remember) */
  27 @if $hyphenation == true {
  28         textarea,
  29         table,
  30         td,
  31         th,
  32         code,
  33         pre,
  34         samp,
  35         div,
  36         p {
  37                 word-break: break-word;
  38
  39                 @supports (-webkit-hyphens: auto) or (hyphens: auto) {
  40                         word-break: normal;
  41                         @include vendor-prefix(hyphens, auto, webkit);
  42                 }
  43         }
  44 }