variables.scss 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
  1. /* ==========================================================================
  2. Sass variables
  3. ========================================================================== */
  4. /*
  5. Typography
  6. ========================================================================== */
  7. $doc-font-size: 16;
  8. $doc-line-height: 26;
  9. $paragraph-indent: true !default;
  10. $base-font: 'Alegreya', serif;
  11. $heading-font: 'Junction', sans-serif;
  12. $code-font: Monaco, "Courier New", "DejaVu Sans Mono", "Bitstream Vera Sans Mono", monospace;
  13. $alt-font: $base-font;
  14. /*
  15. Colors
  16. ========================================================================== */
  17. $bodycolor : #fff;
  18. $body-color : $bodycolor;
  19. $textcolor : #333332;
  20. $text-color : $textcolor;
  21. $border-color : $text-color;
  22. $basecolor : #343434;
  23. $compcolor : spin($basecolor, 180);
  24. $bordercolor : $basecolor;
  25. $white : #fff;
  26. $black : #111;
  27. $accentcolor : $black;
  28. /* buttons */
  29. $primary : $black;
  30. $success : #5cb85c;
  31. $warning : #dd8338;
  32. $danger : #C64537;
  33. $info : #308cbc;
  34. /* brands */
  35. $facebook-color : #3b5998;
  36. $flickr-color : #ff0084;
  37. $foursquare-color : #0cbadf;
  38. $google-plus-color : #dd4b39;
  39. $instagram-color : #4e433c;
  40. $linkedin-color : #4875b4;
  41. $pinterest-color : #cb2027;
  42. $rss-color : #fa9b39;
  43. $tumblr-color : #2c4762;
  44. $twitter-color : #55acee;
  45. $vimeo-color : #1ab7ea;
  46. $youtube-color : #ff3333;
  47. /* links */
  48. $linkcolor : #343434;
  49. $link-color : $linkcolor;
  50. $linkcolorhover : darken($linkcolor, 10);
  51. $linkcolorvisited : lighten($linkcolorhover, 20);
  52. $linkcolorfocus : darken($linkcolorvisited, 10);
  53. /*
  54. Breakpoints
  55. ========================================================================== */
  56. $micro : "only screen and (min-width: 30em)";
  57. $small : "only screen and (min-width: 37.5em)";
  58. $medium : "only screen and (min-width: 48em)";
  59. $large : "only screen and (min-width: 62em)";
  60. $x-large : "only screen and (min-width: 86.375em)";