_typography.scss 1.5 KB

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