typography.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495
  1. // Typography
  2. body {
  3. -webkit-font-smoothing: antialiased;
  4. text-rendering: optimizeLegibility; /* stylelint-disable-line value-keyword-case */
  5. -moz-osx-font-smoothing: grayscale;
  6. }
  7. // Headings
  8. h1,
  9. h2,
  10. h3,
  11. h4,
  12. h5,
  13. h6,
  14. .h1,
  15. .h2,
  16. .h3,
  17. .h4,
  18. .h5,
  19. .h6 {
  20. // Apply margin above the heading only when it has a preceding sibling or is inside a row with a preceding sibling
  21. * > * + &,
  22. * + .row & {
  23. margin-top: $spacing-08;
  24. }
  25. }
  26. h1,
  27. .h1 {
  28. @include heading-xl;
  29. }
  30. h2,
  31. .h2 {
  32. @include heading-md;
  33. }
  34. h3,
  35. .h3 {
  36. @include heading-sm;
  37. }
  38. h4,
  39. .h4 {
  40. @include heading-xs;
  41. }
  42. h5,
  43. .h5 {
  44. @include body-base;
  45. }
  46. h6,
  47. .h6 {
  48. @include body-sm;
  49. }
  50. // Miscellaneous
  51. .small {
  52. @include body-sm;
  53. }
  54. // Peformatted text, sample output, code, keyboard input elements
  55. // E.g.: Git authentication token
  56. code,
  57. kbd,
  58. pre,
  59. samp {
  60. @include body-base;
  61. }
  62. .list-style-check-green {
  63. list-style-image: url('../../../../public/img/fa-check-green.svg');
  64. }
  65. .text-muted {
  66. color: var(--content-disabled) !important;
  67. }
  68. .dm-mono {
  69. @include font-mono;
  70. }
  71. @include media-breakpoint-up(lg) {
  72. .text-center-only-desktop {
  73. text-align: center;
  74. }
  75. }
  76. @include media-breakpoint-down(lg) {
  77. .text-center-only-mobile {
  78. text-align: center;
  79. }
  80. }