typography.scss 1.2 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  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. pre {
  57. @include body-base;
  58. }
  59. code,
  60. kbd,
  61. samp {
  62. font-size: 1em;
  63. }
  64. .list-style-check-green {
  65. list-style-image: url('../../../public/img/fa-check-green.svg');
  66. }
  67. .text-muted {
  68. color: var(--content-disabled) !important;
  69. }
  70. .dm-mono {
  71. @include font-mono;
  72. }
  73. @include media-breakpoint-up(lg) {
  74. .text-center-only-desktop {
  75. text-align: center;
  76. }
  77. }
  78. @include media-breakpoint-down(lg) {
  79. .text-center-only-mobile {
  80. text-align: center;
  81. }
  82. }