_markdown.scss 1.7 KB

12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576777879808182838485868788
  1. @import 'variables';
  2. $block-border-radius: 4px;
  3. .markdown {
  4. line-height: 1.7;
  5. > :first-child {
  6. margin-top: 0;
  7. line-height: 1em;
  8. }
  9. h1:first-of-type {
  10. text-transform: capitalize;
  11. }
  12. h2 {
  13. margin-top: 48px;
  14. }
  15. h3 {
  16. margin-top: 36px;
  17. color: $gray-700;
  18. }
  19. h1, h2, h3, h4, h5 {
  20. font-weight: 600;
  21. line-height: 1.25;
  22. &[id]:target:before {
  23. display: block;
  24. content: " ";
  25. margin-top: -75px; // Set the Appropriate Height
  26. height: 75px; // Set the Appropriate Height
  27. visibility: hidden;
  28. }
  29. &[id]:target {
  30. text-decoration: underline;
  31. }
  32. }
  33. b, optgroup, strong {
  34. font-weight: 700;
  35. }
  36. a {
  37. text-decoration: none;
  38. &:hover {
  39. text-decoration: underline;
  40. }
  41. }
  42. code {
  43. font-family: 'Oxygen Mono', monospace;
  44. padding: 0 $padding-4;
  45. background: $gray-100;
  46. color: darken($brand-color, 30%);
  47. border-radius: $block-border-radius;
  48. }
  49. pre {
  50. padding: $padding-16;
  51. background: $gray-100;
  52. border-radius: $block-border-radius;
  53. font-size: $font-size-14;
  54. overflow-x: auto;
  55. code {
  56. color: $gray-200;
  57. background: none;
  58. padding: none;
  59. }
  60. }
  61. blockquote {
  62. border-left: $padding-1*2 solid $gray-300;
  63. margin: 0;
  64. padding: $padding-1 $padding-16;
  65. :first-child { margin-top: 0; }
  66. :last-child { margin-bottom: 0; }
  67. }
  68. table tr td {
  69. padding: $padding-8;
  70. }
  71. }