91 lines
2.6 KiB
SCSS
91 lines
2.6 KiB
SCSS
// @section Configuration Settings
|
|
// Adjust colors, font stacks, breakpoints and sizing.
|
|
//
|
|
// Typographic Scale
|
|
// (For math purposes. Actual font sizes in ems.)
|
|
// 1px, 4px, 5px, 8px, 9px, 11px, 12px, 13px, 15px, 16px, 19px, 21px, 24px, 28px, 32px, 48px, 64px, 80px, 96px
|
|
// line height: 1.5em on small screens, 1.5625em on big screens
|
|
|
|
|
|
// Colors
|
|
$color-primary: #0088cc;
|
|
$color-secondary: #fa7176;
|
|
$color-tertiary: #343d4d;
|
|
$color-accent: #800080;
|
|
$color-black: #272727;
|
|
$color-black-dark: #000000;
|
|
$color-white: #ffffff;
|
|
|
|
// $color-info: #0088cc; // Blue
|
|
// $color-success: #377f31; // Green
|
|
// $color-danger: #880e14; // Red
|
|
// $color-warning: #dba909; // Yellow
|
|
$color-code: #dd1144;
|
|
|
|
$color-gray-dark: #808080;
|
|
$color-gray-medium: #b2b2b2;
|
|
$color-gray-light: #e5e5e5;
|
|
|
|
|
|
// Font Stacks
|
|
$font-primary: Georgia, serif;
|
|
// $font-primary: "Helvetica Neue", Arial, sans-serif;
|
|
$font-enhanced: "PT Serif", serif;
|
|
// $font-enhanced: "Source Sans Pro", sans-serif;
|
|
// $font-secondary: "Helvetica Neue", Arial, sans-serif;
|
|
$font-monospace: Menlo, Monaco, "Courier New", monospace;
|
|
|
|
|
|
// Breakpoints
|
|
$bp-xsmall: 19em;
|
|
$bp-small: 28em;
|
|
$bp-medium: 38em;
|
|
$bp-large: 60em;
|
|
$bp-xlarge: 80em;
|
|
|
|
|
|
// Sizing
|
|
$font-size: 112.5%;
|
|
$spacing: 1.5625em;
|
|
$container-width: 88%;
|
|
$container-max-width: $bp-medium;
|
|
$container-large-max-width: $bp-large;
|
|
|
|
|
|
// Grid
|
|
$grid-margins: 1.4%;
|
|
$grid-sizes: (
|
|
// Grid width options
|
|
// Add/remove grid's as needed
|
|
// $name: $width
|
|
// $name - {string} class suffix
|
|
// $width - {string} width of the grid
|
|
fourth: 25%,
|
|
third: 33.33333333333%,
|
|
half: 50%,
|
|
two-thirds: 66.666666666667%,
|
|
three-fourths: 75%,
|
|
// full: 100%
|
|
);
|
|
$grid-breakpoints: (
|
|
// Breakpoints at which to activate grid
|
|
// Add/remove breakpoints as needed
|
|
// ($breakpoint, $prefix-class, $include-offsets)
|
|
// $breakpoint - {string|variable} the breakpoint
|
|
// $prefix-class - {string|optional} class to be used with `.row` to activate grid
|
|
// $include-offsets - {boolean} if true, include offset classes at this breakpoint
|
|
// ($bp-xsmall, ".row-start-xsmall", false),
|
|
// ($bp-small, ".row-start-small", false),
|
|
($bp-medium, null, true),
|
|
);
|
|
$grid-dynamic: (
|
|
// Create grid classes that vary in size at different breakpoints
|
|
// Add/remove classes, breakpoints, and sizes as needed
|
|
// ($class, $breakpoint, $width)
|
|
// $class - {string} the grid class
|
|
// $breakpoint - {string|variable} the breakpoint
|
|
// $width - {string|variable} width of the grid at the breakpoint
|
|
// (".grid-dynamic", $bp-xsmall, map-get($grid-sizes, half))
|
|
// (".grid-dynamic", $bp-small, map-get($grid-sizes, third))
|
|
// (".grid-dynamic", $bp-medium, map-get($grid-sizes, fourth))
|
|
); |