_fonts.scss 3.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112
  1. // Font Family
  2. $font-family-default: "Raleway", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  3. $font-family-header: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
  4. $font-family-mono: "Inconsolata", monospace;
  5. $font-family-serif: "Georgia", "Times", "Times New Roman", serif;
  6. $icons: "FontAwesome";
  7. // @font-face
  8. $Regular: "Montserrat-Regular";
  9. $family: "Montserrat/webfonts";
  10. $file-regular: "Montserrat-Regular";
  11. $category: "sans-serif";
  12. @mixin Montserrat-Regular($Regular, $file-regular, $family, $category:"") {
  13. $filepath: "../fonts/" + $family + "/" + $file-regular;
  14. @font-face {
  15. font-family: "#{$Regular}";
  16. src: url($filepath + ".eot");
  17. src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
  18. url($filepath + ".woff") format('woff'),
  19. url($filepath + ".ttf") format('truetype'),
  20. url($filepath + ".svg#" + $Regular + "") format('svg');
  21. }
  22. %#{$Regular} {
  23. font: {
  24. @if $category != "" {
  25. family: "#{$Regular}", #{$category};
  26. }
  27. @else {
  28. family: "#{$Regular}";
  29. weight: normal;
  30. }
  31. }
  32. }
  33. }
  34. $light: "Montserrat-Light";
  35. $family: "Montserrat/webfonts";
  36. $file-light: "Montserrat-Light";
  37. $category: "sans-serif";
  38. @mixin Montserrat-light($light, $file-light, $family, $category:"") {
  39. $filepath: "../fonts/" + $family + "/" + $file-light;
  40. @font-face {
  41. font-family: "#{$light}";
  42. src: url($filepath + ".eot");
  43. src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
  44. url($filepath + ".woff") format('woff'),
  45. url($filepath + ".ttf") format('truetype'),
  46. url($filepath + ".svg#" + $light + "") format('svg');
  47. }
  48. %#{$light} {
  49. font: {
  50. @if $category != "" {
  51. family: "#{$light}", #{$category};
  52. }
  53. @else {
  54. family: "#{$light}";
  55. weight: normal;
  56. }
  57. }
  58. }
  59. }
  60. $Thin: "Montserrat-Thin";
  61. $family: "Montserrat/webfonts";
  62. $file-Thin: "Montserrat-Thin";
  63. $category: "sans-serif";
  64. @mixin Montserrat-Thin($Thin, $file-Thin, $family, $category:"") {
  65. $filepath: "../fonts/" + $family + "/" + $file-Thin;
  66. @font-face {
  67. font-family: "#{$Thin}";
  68. src: url($filepath + ".eot");
  69. src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
  70. url($filepath + ".woff") format('woff'),
  71. url($filepath + ".ttf") format('truetype'),
  72. url($filepath + ".svg#" + $Thin + "") format('svg');
  73. }
  74. %#{$Thin} {
  75. font: {
  76. @if $category != "" {
  77. family: "#{$Thin}", #{$category};
  78. }
  79. @else {
  80. family: "#{$Thin}";
  81. weight: normal;
  82. }
  83. }
  84. }
  85. }
  86. // font-size
  87. $font14: 0.882rem;
  88. $font16: 1rem;
  89. $font18: 1.134rem;
  90. $font21: 1.323rem;
  91. $font22: 1.375rem;
  92. $font24: 1.512rem;
  93. $font32: 2rem;
  94. $font36: 2.268rem;
  95. $font48: 3.024rem;
  96. $font72: 4.5rem;
  97. // $fonth1: 2rem;
  98. // $fonth2: 1.5rem;
  99. // $fonth3: 1rem;
  100. // $fontp: 1rem;