ready
This commit is contained in:
@@ -0,0 +1,79 @@
|
||||
// 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
|
||||
|
||||
$Regular: "Montserrat-Regular";
|
||||
$family: "Montserrat/webfonts";
|
||||
$file-regular: "Montserrat-Regular";
|
||||
$category: "sans-serif";
|
||||
|
||||
@mixin Montserrat-Regular($Regular, $file-regular, $family, $category:"") {
|
||||
$filepath: "../fonts/" + $family + "/" + $file-regular;
|
||||
@font-face {
|
||||
font-family: "#{$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#" + $Regular + "") format('svg');
|
||||
}
|
||||
|
||||
%#{$Regular} {
|
||||
font: {
|
||||
@if $category != "" {
|
||||
family: "#{$Regular}", #{$category};
|
||||
}
|
||||
@else {
|
||||
family: "#{$Regular}";
|
||||
weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
$light: "Montserrat-Light";
|
||||
$family: "Montserrat/webfonts";
|
||||
$file-light: "Montserrat-Light";
|
||||
$category: "sans-serif";
|
||||
|
||||
@mixin Montserrat-light($light, $file-light, $family, $category:"") {
|
||||
$filepath: "../fonts/" + $family + "/" + $file-light;
|
||||
@font-face {
|
||||
font-family: "#{$light}";
|
||||
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#" + $light + "") format('svg');
|
||||
}
|
||||
|
||||
%#{$light} {
|
||||
font: {
|
||||
@if $category != "" {
|
||||
family: "#{$light}", #{$category};
|
||||
}
|
||||
@else {
|
||||
family: "#{$light}";
|
||||
weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// font-size
|
||||
$font16: 1rem;
|
||||
$font18: 1.134rem;
|
||||
$font21: 1.323rem;
|
||||
$font24: 1.512rem;
|
||||
$font36: 2.268rem;
|
||||
$font48: 3.024rem;
|
||||
|
||||
// $fonth1: 2rem;
|
||||
// $fonth2: 1.5rem;
|
||||
// $fonth3: 1rem;
|
||||
// $fontp: 1rem;
|
||||
@@ -1,17 +0,0 @@
|
||||
// Variables and mixins
|
||||
// @import "spectre/variables";
|
||||
// @import "spectre/mixins";
|
||||
//
|
||||
// /*! Spectre.css Experimentals v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// // Experimentals
|
||||
// @import "spectre/autocomplete";
|
||||
// @import "spectre/calendars";
|
||||
// @import "spectre/carousels";
|
||||
// @import "spectre/comparison-sliders";
|
||||
// @import "spectre/filters";
|
||||
// @import "spectre/meters";
|
||||
// @import "spectre/off-canvas";
|
||||
// @import "spectre/parallax";
|
||||
// @import "spectre/progress";
|
||||
// @import "spectre/sliders";
|
||||
// @import "spectre/timelines";
|
||||
@@ -1,10 +0,0 @@
|
||||
// // Variables and mixins
|
||||
// @import "spectre/variables";
|
||||
// @import "spectre/mixins";
|
||||
//
|
||||
// /*! Spectre.css Icons v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// // Icons
|
||||
// @import "spectre/icons/icons-core";
|
||||
// @import "spectre/icons/icons-navigation";
|
||||
// @import "spectre/icons/icons-action";
|
||||
// @import "spectre/icons/icons-object";
|
||||
@@ -1,59 +0,0 @@
|
||||
// // Variables and mixins
|
||||
// @import "spectre/variables";
|
||||
// @import "spectre/mixins";
|
||||
//
|
||||
// /*! Spectre.css v#{$version} | MIT License | github.com/picturepan2/spectre */
|
||||
// // Reset and dependencies
|
||||
// @import "spectre/normalize";
|
||||
// @import "spectre/base";
|
||||
//
|
||||
// // Elements
|
||||
// @import "spectre/typography";
|
||||
// @import "spectre/asian";
|
||||
// @import "spectre/tables";
|
||||
// @import "spectre/buttons";
|
||||
// @import "spectre/forms";
|
||||
// @import "spectre/labels";
|
||||
// @import "spectre/codes";
|
||||
// @import "spectre/media";
|
||||
//
|
||||
// // Layout
|
||||
// @import "spectre/layout";
|
||||
// @import "spectre/navbar";
|
||||
//
|
||||
// // Components
|
||||
// @import "spectre/accordions";
|
||||
// @import "spectre/autocomplete";
|
||||
// @import "spectre/avatars";
|
||||
// @import "spectre/badges";
|
||||
// @import "spectre/breadcrumbs";
|
||||
// @import "spectre/bars";
|
||||
// @import "spectre/cards";
|
||||
// @import "spectre/chips";
|
||||
// @import "spectre/dropdowns";
|
||||
// @import "spectre/empty";
|
||||
// @import "spectre/menus";
|
||||
// @import "spectre/modals";
|
||||
// @import "spectre/navs";
|
||||
// @import "spectre/pagination";
|
||||
// @import "spectre/panels";
|
||||
// @import "spectre/popovers";
|
||||
// @import "spectre/steps";
|
||||
// @import "spectre/tabs";
|
||||
// @import "spectre/tiles";
|
||||
// @import "spectre/toasts";
|
||||
// @import "spectre/tooltips";
|
||||
//
|
||||
// // Utility classes
|
||||
// @import "spectre/animations";
|
||||
// @import "spectre/utilities";
|
||||
//
|
||||
// // Extras
|
||||
// .search-input {
|
||||
// @extend .form-input;
|
||||
// }
|
||||
//
|
||||
// .button {
|
||||
// @extend .btn;
|
||||
// }
|
||||
//
|
||||
@@ -1,129 +0,0 @@
|
||||
// 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;
|
||||
@@ -10,8 +10,12 @@
|
||||
// @import 'theme/mobile';
|
||||
// @import 'theme/animation';
|
||||
//
|
||||
//
|
||||
|
||||
@import 'theme/reset';
|
||||
@import 'config/mixins/fonts';
|
||||
@import 'theme/fonts';
|
||||
|
||||
@import 'theme/header';
|
||||
@import 'theme/nav';
|
||||
@import 'theme/section';
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
@include Montserrat-Regular($Regular, $file-regular, $family, $category);//1
|
||||
@include Montserrat-light($light, $file-light, $family, $category);//1
|
||||
|
||||
body{
|
||||
#header{
|
||||
a{
|
||||
font-family: $Regular;
|
||||
font-size: $font36;
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,3 @@
|
||||
#header{
|
||||
position: fixed;
|
||||
}
|
||||
|
||||
@@ -8,6 +8,7 @@ html, body{
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
height: 100%;
|
||||
font-size: 1rem;
|
||||
}
|
||||
|
||||
ul, li, ol{
|
||||
|
||||
Reference in New Issue
Block a user