_variables.scss 5.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174
  1. /* ==========================================================================
  2. Variables
  3. ========================================================================== */
  4. /*
  5. Typography
  6. ========================================================================== */
  7. $doc-font-size: 16 !default;
  8. /* paragraph indentation */
  9. $paragraph-indent: false !default; // true, false (default)
  10. $indent-var: 1.3em !default;
  11. /* system typefaces */
  12. $serif: Georgia, Times, serif !default;
  13. $sans-serif: -apple-system, BlinkMacSystemFont, "Roboto", "Segoe UI",
  14. "Helvetica Neue", "Lucida Grande", Arial, sans-serif !default;
  15. $monospace: Monaco, Consolas, "Lucida Console", monospace !default;
  16. /* sans serif typefaces */
  17. $sans-serif-narrow: $sans-serif !default;
  18. $helvetica: Helvetica, "Helvetica Neue", Arial, sans-serif !default;
  19. /* serif typefaces */
  20. $georgia: Georgia, serif !default;
  21. $times: Times, serif !default;
  22. $bodoni: "Bodoni MT", serif !default;
  23. $calisto: "Calisto MT", serif !default;
  24. $garamond: Garamond, serif !default;
  25. $global-font-family: $sans-serif !default;
  26. $header-font-family: $sans-serif !default;
  27. $caption-font-family: $serif !default;
  28. /* type scale */
  29. $type-size-1: 2.441em !default; // ~39.056px
  30. $type-size-2: 1.953em !default; // ~31.248px
  31. $type-size-3: 1.563em !default; // ~25.008px
  32. $type-size-4: 1.25em !default; // ~20px
  33. $type-size-5: 1em !default; // ~16px
  34. $type-size-6: 0.75em !default; // ~12px
  35. $type-size-7: 0.6875em !default; // ~11px
  36. $type-size-8: 0.625em !default; // ~10px
  37. /* headline scale */
  38. $h-size-1: 1.563em !default; // ~25.008px
  39. $h-size-2: 1.25em !default; // ~20px
  40. $h-size-3: 1.125em !default; // ~18px
  41. $h-size-4: 1.0625em !default; // ~17px
  42. $h-size-5: 1.03125em !default; // ~16.5px
  43. $h-size-6: 1em !default; // ~16px
  44. /*
  45. Colors
  46. ========================================================================== */
  47. $gray: #7a8288 !default;
  48. $dark-gray: mix(#000, $gray, 50%) !default;
  49. $darker-gray: mix(#000, $gray, 60%) !default;
  50. $light-gray: mix(#fff, $gray, 50%) !default;
  51. $lighter-gray: mix(#fff, $gray, 90%) !default;
  52. $background-color: #fff !default;
  53. $code-background-color: #fafafa !default;
  54. $code-background-color-dark: $light-gray !default;
  55. $text-color: $dark-gray !default;
  56. $muted-text-color: mix(#fff, $text-color, 20%) !default;
  57. $border-color: $lighter-gray !default;
  58. $form-background-color: $lighter-gray !default;
  59. $footer-background-color: $lighter-gray !default;
  60. $primary-color: #6f777d !default;
  61. $success-color: #3fa63f !default;
  62. $warning-color: #d67f05 !default;
  63. $danger-color: #ee5f5b !default;
  64. $info-color: #3b9cba !default;
  65. $focus-color: $primary-color !default;
  66. $active-color: mix(#fff, $primary-color, 80%) !default;
  67. /* YIQ color contrast */
  68. $yiq-contrasted-dark-default: $dark-gray !default;
  69. $yiq-contrasted-light-default: #fff !default;
  70. $yiq-contrasted-threshold: 175 !default;
  71. $yiq-debug: false !default;
  72. /* brands */
  73. $behance-color: #1769ff !default;
  74. $bitbucket-color: #205081 !default;
  75. $dribbble-color: #ea4c89 !default;
  76. $facebook-color: #3b5998 !default;
  77. $flickr-color: #ff0084 !default;
  78. $foursquare-color: #0072b1 !default;
  79. $github-color: #171516 !default;
  80. $gitlab-color: #e24329 !default;
  81. $instagram-color: #517fa4 !default;
  82. $keybase-color: #ef7639 !default;
  83. $lastfm-color: #d51007 !default;
  84. $linkedin-color: #007bb6 !default;
  85. $mastodon-color: #2b90d9 !default;
  86. $pinterest-color: #cb2027 !default;
  87. $reddit-color: #ff4500 !default;
  88. $rss-color: #fa9b39 !default;
  89. $soundcloud-color: #ff3300 !default;
  90. $stackoverflow-color: #fe7a15 !default;
  91. $tumblr-color: #32506d !default;
  92. $twitter-color: #55acee !default;
  93. $vimeo-color: #1ab7ea !default;
  94. $vine-color: #00bf8f !default;
  95. $youtube-color: #bb0000 !default;
  96. $xing-color: #006567 !default;
  97. /* links */
  98. $link-color: mix(#000, $info-color, 20%) !default;
  99. $link-color-hover: mix(#000, $link-color, 25%) !default;
  100. $link-color-visited: mix(#fff, $link-color, 15%) !default;
  101. $masthead-link-color: $primary-color !default;
  102. $masthead-link-color-hover: mix(#000, $primary-color, 25%) !default;
  103. $navicon-link-color-hover: mix(#fff, $primary-color, 75%) !default;
  104. /* notices */
  105. $notice-background-mix: 80% !default;
  106. $code-notice-background-mix: 90% !default;
  107. /* syntax highlighting (base16) */
  108. $base00: #263238 !default;
  109. $base01: #2e3c43 !default;
  110. $base02: #314549 !default;
  111. $base03: #546e7a !default;
  112. $base04: #b2ccd6 !default;
  113. $base05: #eeffff !default;
  114. $base06: #eeffff !default;
  115. $base07: #ffffff !default;
  116. $base08: #f07178 !default;
  117. $base09: #f78c6c !default;
  118. $base0a: #ffcb6b !default;
  119. $base0b: #c3e88d !default;
  120. $base0c: #89ddff !default;
  121. $base0d: #82aaff !default;
  122. $base0e: #c792ea !default;
  123. $base0f: #ff5370 !default;
  124. /*
  125. Breakpoints
  126. ========================================================================== */
  127. $small: 600px !default;
  128. $medium: 768px !default;
  129. $medium-wide: 900px !default;
  130. $large: 1024px !default;
  131. $x-large: 1920px !default;
  132. $max-width: $x-large !default;
  133. /*
  134. Grid
  135. ========================================================================== */
  136. $right-sidebar-width-narrow: 200px !default;
  137. $right-sidebar-width: 300px !default;
  138. $right-sidebar-width-wide: 400px !default;
  139. /*
  140. Other
  141. ========================================================================== */
  142. $border-radius: 4px !default;
  143. $box-shadow: 0 1px 1px rgba(0, 0, 0, 0.125) !default;
  144. $nav-height: 2em !default;
  145. $nav-toggle-height: 2rem !default;
  146. $navicon-width: 1.5rem !default;
  147. $navicon-height: 0.25rem !default;
  148. $global-transition: all 0.2s ease-in-out !default;
  149. $intro-transition: intro 0.3s both !default;