_config.sass 2.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110
  1. // *************************************
  2. //
  3. // Config
  4. // -> Fonts, Variables
  5. //
  6. // *************************************
  7. // -------------------------------------
  8. // @font-face
  9. // -------------------------------------
  10. // ----- Open Sans ----- //
  11. // +font-face('OpenSans', 'OpenSans')
  12. // +font-face('OpenSans', 'OpenSansBold', bold)
  13. // +font-face('OpenSans', 'OpenSansItalic', normal, italic)
  14. // -------------------------------------
  15. // Colors
  16. // -------------------------------------
  17. // ----- Palette ----- //
  18. $blue: #12a9d5
  19. $black: #131518
  20. $dark: #171b1f
  21. // ----- Base ----- //
  22. $c-background-invert: #F7F9FA
  23. $c-background: $dark
  24. $c-border: lighten($dark, 5%)
  25. $c-highlight: #0F6A85
  26. $c-subdue: lighten($dark, 5%)
  27. $c-text-invert: #fff
  28. $c-text: #919191
  29. // -------------------------------------
  30. // Base
  31. // -------------------------------------
  32. // ----- Borders & Box Shadow ----- //
  33. $b-borderRadius: 3px
  34. $b-borderStyle: solid
  35. $b-borderWidth: 2px
  36. $b-border: $b-borderWidth $b-borderStyle $c-border
  37. $b-boxShadow: 0 2px 0 rgba($c-text, 0.25)
  38. // ----- Typography ----- //
  39. $b-fontFamily-heading: sans-serif
  40. $b-fontFamily: sans-serif
  41. $b-fontSize: 16px
  42. $b-fontSize-xs: 60%
  43. $b-fontSize-s: 75%
  44. $b-fontSize-m: 90%
  45. $b-fontSize-l: 115%
  46. $b-fontSize-xl: 150%
  47. $b-fontSize-xxl: 360%
  48. $b-lineHeight: 1.5
  49. // ----- Sizing ----- //
  50. $b-maxWidth: em(1024px)
  51. $b-maxWidth-m: em(900px)
  52. $b-maxWidth-s: em(700px)
  53. $b-space: em(20px)
  54. $b-space-xs: 0.25 * $b-space
  55. $b-space-s: 0.5 * $b-space
  56. $b-space-m: 0.75 * $b-space
  57. $b-space-l: 2 * $b-space
  58. $b-space-xl: 4 * $b-space
  59. // ----- Button Sizing ----- //
  60. $btn-space: em(10px)
  61. // -------------------------------------
  62. // Components
  63. // -------------------------------------
  64. // ----- Grid ----- //
  65. // Breakpoints
  66. $g-s: em(480px)
  67. $g-m: em(800px)
  68. $g-l: em(1024px)
  69. // Settings
  70. $g-columns: 12
  71. $g-defaults: 's' $g-s, 'm' $g-m, 'l' $g-l
  72. $g-gutter: 40px
  73. $g-silent: true
  74. // Selector
  75. $g-selector: if($g-silent, unquote("%"), unquote("."))
  76. // -------------------------------------
  77. // Structures
  78. // -------------------------------------
  79. // ----- Hero ----- //
  80. $hero-background: #000000
  81. $hero-minHeight: 320px