No Description
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

_typography.scss 1.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. @mixin expected-sans-serif-fonts {
  2. @extend .sans-serif;
  3. @at-root {
  4. html.wf-active & {
  5. font-family: "Lato";
  6. }
  7. }
  8. }
  9. @mixin expected-serif-fonts {
  10. @extend .serif;
  11. @at-root {
  12. html.wf-active & {
  13. font-family: "Titillium Web";
  14. }
  15. }
  16. }
  17. @mixin expected-monospace-fonts {
  18. @extend .code;
  19. @at-root {
  20. html.wf-active & {
  21. font-family: "Inconsolata";
  22. }
  23. }
  24. }
  25. @mixin expected-display-fonts {
  26. @at-root {
  27. html.wf-active & {
  28. font-family: beyno;
  29. font-weight: 400;
  30. }
  31. }
  32. }
  33. h1, h2, h3, h4, h5, h6 {
  34. @include expected-serif-fonts;
  35. }
  36. p, body, div, li, blockquote {
  37. @include expected-sans-serif-fonts;
  38. @extend .f5;
  39. }
  40. pre, code, kbd {
  41. @include expected-monospace-fonts;
  42. }
  43. main[role=group] > p:first-child,
  44. p.lead {
  45. @extend .f4;
  46. @extend .lh-copy;
  47. text-align: justify;
  48. text-align-last: left;
  49. }
  50. ul {
  51. @extend .list;
  52. padding-inline-start: 0rem;
  53. padding-inline-end: 0rem;
  54. margin-block-start: 0rem;
  55. margin-block-end: 0rem;
  56. &.arrows {
  57. li:before {
  58. content: "\2192";
  59. @extend .pa2;
  60. }
  61. }
  62. li {
  63. @extend .pa1;
  64. }
  65. }
  66. a {
  67. &,
  68. &:visited,
  69. &:hover,
  70. &:visited:hover
  71. {
  72. @extend .link;
  73. color: $blue!important;
  74. }
  75. }
  76. .fontFamily__special {
  77. @at-root {
  78. html.wf-active & {
  79. @include expected-display-fonts;
  80. }
  81. }
  82. }
  83. blockquote {
  84. @extend .gray;
  85. @extend .lh-copy;
  86. @extend .mh4;
  87. }
  88. mark {
  89. white-space: nowrap;
  90. line-height: 1.5;
  91. }
  92. dt + dd {
  93. @extend .mb2;
  94. }