Permalink
Fetching contributors…
Cannot retrieve contributors at this time
120 lines (91 sloc) 2.79 KB
/********************VARIABLES********************/
$edit-mode: true; // [ true / false ] - Enables/disables the grid toggle button.
// Custom fonts example (modify as needed)
@import url("https://fonts.googleapis.com/css?family=Alegreya:400italic,400,700|Alegreya+Sans:300,400,700,300italic,400italic");
// Theme / Fonts
$theme: custom; // [ Merriweather / OpenSans / custom ]
$custom-font-body: "Alegreya", "Georgia", serif; // [ "Libre Baskerville", Georgia, serif ]
$custom-font-headings: "Alegreya Sans", sans-serif;
// Paragraph indenting
$paragraph-indent: false; // [ true / false ]
// Base sizes
$base-font-size: 112.5; // In %. Also used for mobile. Number only, no units. Value here equates to 18px.
$base-font-size-desktop: 125; // In %. Used to calculate the desktop font size. Number only, no units. Value here equates to 20px.
$line-height: 1.5; // In REMs. Value here equates to 27px.
$line-height-desktop: 1.625; // In REMs. Value here equates to 32.5px.
$max-width: 35; // Number only, no units. Gets converted to REMs.
// Modular Scale
$modular-scale: (
xxxl: 4.3,
xxl: 3.5,
xl: 3,
l: 2.5,
m: 2,
s: 1.6875,
xs: 1.4375,
xxs: 1.2,
xxxs: 1,
xxxxs: .8125
);
/* Calculations
========================================================================== */
// Mobile base & leading
$base: 16 * ($base-font-size / 100);
$leading-rem: $line-height;
// Desktop base & leading
$base-desktop: 16 * ($base-font-size-desktop / 100);
$leading-rem-desktop: $line-height-desktop;
/* Font themes
========================================================================== */
$font-body: null;
$font-headings: null;
@if $theme == Merriweather {
// Import Merriweather
@import url(https://fonts.googleapis.com/css?family=Merriweather:400,700,400italic);
// Set body font
$font-body: Merriweather, Georgia, serif;
} @else if $theme == OpenSans {
// Import Open Sans
@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700,400italic);
// Set body font
$font-body: Open Sans, Arial, Helvetica, Sans-serif;
} @else if $theme == custom {
// Set custom body font
$font-body: $custom-font-body;
// Set custom headings font
@if $custom-font-headings != $custom-font-body {
$font-headings: $custom-font-headings;
}
}
/********* Custom colors example (modify as needed) *********/
/*
Cool
*/
$aqua: #7fdbff;
$blue: #0074d9;
$navy: #001f3f;
$teal: #39cccc;
$green: #2ecc40;
$olive: #3d9970;
$lime: #01ff70;
/*
Warm
*/
$yellow: #ffdc00;
$orange: #ff851b;
$red: #ff4136;
$fuchsia: #f012be;
$purple: #b10dc9;
$maroon: #85144b;
/*
Gray Scale
*/
$white: white;
$gray: #eeeeee;
$silver: #cccccc;
$black: #444444;
// Set font colors
$color-font-body: $black;
$color-font-headings: $color-font-body;
$color-font-light: lighten($black, 20%);
$color-font-figcaption: $color-font-body;