_content.scss 1.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120
  1. //
  2. // Style Markdown content
  3. //
  4. .td-content {
  5. order: 1;
  6. p,
  7. li,
  8. td {
  9. font-weight: $font-weight-body-text;
  10. }
  11. > h1 {
  12. font-weight: $font-weight-bold;
  13. margin-bottom: 1rem;
  14. }
  15. > h2 {
  16. margin-bottom: 1rem;
  17. }
  18. > h2:not(:first-child) {
  19. margin-top: 3rem;
  20. }
  21. > h2 + h3 {
  22. margin-top: 1rem;
  23. }
  24. > h3,
  25. > h4,
  26. > h5,
  27. > h6 {
  28. margin-bottom: 1rem;
  29. margin-top: 2rem;
  30. }
  31. img {
  32. @extend .img-fluid;
  33. }
  34. table {
  35. @extend .td-table;
  36. }
  37. blockquote {
  38. padding: 0 0 0 1rem;
  39. margin-bottom: $spacer;
  40. color: var(--bs-secondary-color);
  41. border-left: 6px solid var(--bs-primary);
  42. }
  43. ul li,
  44. ol li {
  45. margin-bottom: 0.25rem;
  46. }
  47. strong {
  48. font-weight: $font-weight-bold;
  49. }
  50. .footnotes,
  51. > .alert,
  52. > .highlight,
  53. > .lead,
  54. > .td-table,
  55. > blockquote,
  56. > dl dd,
  57. > h1,
  58. > h2,
  59. > ol,
  60. > p,
  61. > pre,
  62. > ul {
  63. @extend .td-max-width-on-larger-screens;
  64. }
  65. .alert:not(:first-child) {
  66. margin-top: 2 * $spacer;
  67. margin-bottom: 2 * $spacer;
  68. }
  69. .lead {
  70. margin-bottom: 1.5rem;
  71. }
  72. }
  73. .td-title {
  74. margin-top: 1rem;
  75. margin-bottom: 0.5rem;
  76. @include media-breakpoint-up(sm) {
  77. font-size: 3rem;
  78. }
  79. }
  80. .td-heading-self-link {
  81. &::before {
  82. content: '#';
  83. }
  84. font-size: 90%;
  85. padding-left: 0.25em;
  86. text-decoration: none;
  87. visibility: hidden;
  88. // Always visible on touch devices and small screens
  89. @media (hover: none) and (pointer: coarse),
  90. (max-width: map-get($grid-breakpoints, sm)) {
  91. visibility: visible;
  92. }
  93. }
  94. @for $i from 1 through 6 {
  95. h#{$i}:hover > .td-heading-self-link {
  96. visibility: visible;
  97. }
  98. }