|
@@ -0,0 +1,129 @@
|
|
|
+// Font Family
|
|
|
+$font-family-default: "Raleway", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
|
|
|
+$font-family-header: "Montserrat", "Helvetica", "Tahoma", "Geneva", "Arial", sans-serif;
|
|
|
+$font-family-mono: "Inconsolata", monospace;
|
|
|
+$font-family-serif: "Georgia", "Times", "Times New Roman", serif;
|
|
|
+$icons: "FontAwesome";
|
|
|
+
|
|
|
+// @font-face
|
|
|
+$style-name-regular: "amiri-regular";
|
|
|
+$file-regular: "amiri-regular-webfont";
|
|
|
+$family: "amiri";
|
|
|
+
|
|
|
+$category: serif;
|
|
|
+
|
|
|
+@mixin font-face-regular($style-name-regular, $file-regular, $family, $category:"") {
|
|
|
+ $filepath: "../fonts/" + $family + "/" + $file-regular;
|
|
|
+ @font-face {
|
|
|
+ font-family: "#{$style-name-regular}";
|
|
|
+ src: url($filepath + ".eot");
|
|
|
+ src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
|
|
|
+ url($filepath + ".woff") format('woff'),
|
|
|
+ url($filepath + ".ttf") format('truetype'),
|
|
|
+ url($filepath + ".svg#" + $style-name-regular + "") format('svg');
|
|
|
+ }
|
|
|
+
|
|
|
+ %#{$style-name-regular} {
|
|
|
+ font: {
|
|
|
+ @if $category != "" {
|
|
|
+ family: "#{$style-name-regular}", #{$category};
|
|
|
+ }
|
|
|
+ @else {
|
|
|
+ family: "#{$style-name-regular}";
|
|
|
+ weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+$style-name-slanted: "amiri-slanted";
|
|
|
+$file-slanted: "amiri-slanted-webfont";
|
|
|
+
|
|
|
+@mixin font-face-slanted($style-name-slanted, $file-slanted, $family, $category:"") {
|
|
|
+ $filepath: "../fonts/" + $family + "/" + $file-slanted;
|
|
|
+ @font-face {
|
|
|
+ font-family: "#{$style-name-slanted}";
|
|
|
+ src: url($filepath + ".eot");
|
|
|
+ src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
|
|
|
+ url($filepath + ".woff") format('woff'),
|
|
|
+ url($filepath + ".ttf") format('truetype'),
|
|
|
+ url($filepath + ".svg#" + $style-name-slanted + "") format('svg');
|
|
|
+ }
|
|
|
+
|
|
|
+ %#{$style-name-slanted} {
|
|
|
+ font: {
|
|
|
+ @if $category != "" {
|
|
|
+ family: "#{$style-name-slanted}", #{$category};
|
|
|
+ }
|
|
|
+ @else {
|
|
|
+ family: "#{$style-name-slanted}";
|
|
|
+ weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+$style-name-bold: "amiri-bold";
|
|
|
+$file-bold: "amiri-bold-webfont";
|
|
|
+
|
|
|
+@mixin font-face-bold($style-name-bold, $file-bold, $family, $category:"") {
|
|
|
+ $filepath: "../fonts/" + $family + "/" + $file-bold;
|
|
|
+ @font-face {
|
|
|
+ font-family: "#{$style-name-bold}";
|
|
|
+ src: url($filepath + ".eot");
|
|
|
+ src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
|
|
|
+ url($filepath + ".woff") format('woff'),
|
|
|
+ url($filepath + ".ttf") format('truetype'),
|
|
|
+ url($filepath + ".svg#" + $style-name-bold + "") format('svg');
|
|
|
+ }
|
|
|
+
|
|
|
+ %#{$style-name-bold} {
|
|
|
+ font: {
|
|
|
+ @if $category != "" {
|
|
|
+ family: "#{$style-name-bold}", #{$category};
|
|
|
+ }
|
|
|
+ @else {
|
|
|
+ family: "#{$style-name-bold}";
|
|
|
+ weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+$style-name-boldslanted: "amiri-boldslanted";
|
|
|
+$file-boldslanted: "amiri-boldslanted-webfont";
|
|
|
+
|
|
|
+@mixin font-face-boldslanted($style-name-boldslanted, $file-boldslanted, $family, $category:"") {
|
|
|
+ $filepath: "../fonts/" + $family + "/" + $file-boldslanted;
|
|
|
+ @font-face {
|
|
|
+ font-family: "#{$style-name-boldslanted}";
|
|
|
+ src: url($filepath + ".eot");
|
|
|
+ src: url($filepath + ".eot?#iefix") format('embedded-opentype'),
|
|
|
+ url($filepath + ".woff") format('woff'),
|
|
|
+ url($filepath + ".ttf") format('truetype'),
|
|
|
+ url($filepath + ".svg#" + $style-name-boldslanted + "") format('svg');
|
|
|
+ }
|
|
|
+
|
|
|
+ %#{$style-name-boldslanted} {
|
|
|
+ font: {
|
|
|
+ @if $category != "" {
|
|
|
+ family: "#{$style-name-boldslanted}", #{$category};
|
|
|
+ }
|
|
|
+ @else {
|
|
|
+ family: "#{$style-name-boldslanted}";
|
|
|
+ weight: normal;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@include font-face-regular($style-name-regular, $file-regular, $family, $category);
|
|
|
+@include font-face-slanted($style-name-slanted, $file-slanted, $family, $category);
|
|
|
+@include font-face-bold($style-name-bold, $file-bold, $family, $category);
|
|
|
+@include font-face-boldslanted($style-name-boldslanted, $file-boldslanted, $family, $category);
|
|
|
+
|
|
|
+// font-size
|
|
|
+$fonth1: 2rem;
|
|
|
+$fonth2: 1.5rem;
|
|
|
+$fonth3: 1rem;
|
|
|
+$fontp: 1rem;
|