_typography.scss 1.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. html {
  2. @include fluid-type($size-xs, $size-xl, $min-responsive-font-size, $html-font-size);
  3. }
  4. // Header Overrides
  5. h1, h2, h3, h4, h5, h6 {
  6. margin-top: 2rem;
  7. font-family: $title-font-family;
  8. color: darken($body-font-color, 10%);
  9. }
  10. h1, .h1 {
  11. font-size: 3rem;
  12. }
  13. h2, .h2 {
  14. font-size: 1.8rem;
  15. }
  16. h6, .h6 {
  17. font-weight: 400;
  18. }
  19. .title-center {
  20. h1, h2 {
  21. text-align: center;
  22. }
  23. }
  24. .title-h1h2 {
  25. h1 {
  26. font-weight: 100;
  27. margin-bottom: 0;
  28. line-height: 1.1;
  29. strong, bold {
  30. font-weight: 400;
  31. }
  32. }
  33. h1 + h2 {
  34. line-height: 1.1;
  35. margin-top: 0;
  36. }
  37. }
  38. // Typography Hints
  39. .title-h1h2, .title-center {
  40. h1 + h2 {
  41. margin-bottom: 50px;
  42. font-weight: 700;
  43. }
  44. }
  45. a:focus {
  46. outline: none !important;
  47. box-shadow: none !important;
  48. }
  49. img {
  50. max-width: 100%;
  51. }
  52. // Codeblocks
  53. pre code, pre.xdebug-var-dump{
  54. background: #fafafa;
  55. display: block;
  56. padding: 1rem !important;
  57. line-height: 1.5;
  58. color: inherit;
  59. border-radius: 2px;
  60. overflow-x: auto;
  61. }
  62. pre {
  63. code:not(.hljs) {
  64. background: #f8f8f8;
  65. }
  66. }
  67. // Icon Tweaks
  68. i.fa {
  69. &.fa-heart, &.fa-heart-o {
  70. &.pulse {
  71. color: #920
  72. }
  73. }
  74. }
  75. // Font Weights
  76. b,
  77. strong {
  78. font-weight: 700;
  79. }
  80. .heavy {
  81. font-weight: 700;
  82. }
  83. .light {
  84. font-weight: 200;
  85. }
  86. // Colors
  87. .text-light {
  88. color: rgba($light-color, 0.8);
  89. h1, h2, h3, h4, h5, h6 {
  90. color: rgba($light-color, 0.9);
  91. }
  92. }
  93. // Error configuration
  94. #error {
  95. text-align: center;
  96. position: relative;
  97. margin-top: 5rem;
  98. .icon {
  99. font-size: 50px;
  100. }
  101. }
  102. // Messages
  103. #messages {
  104. margin-bottom: 1rem;
  105. .icon {
  106. font-size: 1rem;
  107. }
  108. }
  109. // Lists
  110. ul,
  111. ol {
  112. margin-left: $unit-8;
  113. ul,
  114. ol {
  115. margin-left: $unit-8;
  116. }
  117. }
  118. ul {
  119. list-style: disc outside;
  120. }
  121. ol {
  122. list-style: decimal outside;
  123. }
  124. // Notices
  125. .notices {
  126. margin: 1.5rem 0;
  127. p {
  128. margin: 1rem 0;
  129. }
  130. }