Permalink
Switch branches/tags
Find file Copy path
Fetching contributors…
Cannot retrieve contributors at this time
executable file 176 lines (146 sloc) 5.36 KB
// =====================================================
// ------------ Siegmeyer II Core Variables ------------
// =====================================================
// @author Thomas Bredin-Grey <tom@studiothick>
// Siegmeyer II: https://github.com/tbredin/Siegmeyer2
// =====================================================
// colors
$site-colors: (
blue: #3a5ca4,
yellow: #fac011,
green: #267f67,
grey: #f1f8fa,
steel: #4b4c57,
steel_light: #707287,
white: #fff
) !default;
$site-color-names: map-keys($site-colors) !default;
// color variable helper
@function site-color($color) {
@return map-get($site-colors, $color);
}
// debug grids
$debug-color: tomato !default;
//interior gutters
$gutter: 2rem !default;
// susy settings
$susy: (
global-box-sizing: border-box,
math: fluid,
container-position: auto,
gutter-position: inside-static,
debug: (
color: transparentize($debug-color,0.6)
),
use-custom: (
rem: true
)
);
// Root font-sizes for each breakpoint. Set to half desired line-height of body text.
$rootsizes: (
break-0: 13, // 26px line-height body text
break-1: 15, // 30px line-height body text
break-2: 17 // 34px line-height body text
) !default;
// rootsizes
$sizes: map-values($rootsizes) !default;
// can be read at any breakpoint to get root size
$base-font-size: nth($sizes, 1) !default;
// set the initial breakpoint information referenced by type mixins
// you can use these to retrieve current breakpoint info within breakpoint-layout mixins
$current-root: map-get($rootsizes, break-0) !default;
// responsive grid settings
// column base width
$column-width: 6rem !default;
// column number at each breakpoint
$break-0-cols: 6 !default;
$break-1-cols: 9 !default;
$break-2-cols: 12 !default;
// breakpoint position - where the breakpoint starts
// basic formula: $column-width * $break-cols, manually converted to px (+20px to compensate for scroll bars)
$break-0-width: 0px !default;
$break-1-width: ($column-width / 1rem) * nth($sizes, 2) * 1px * $break-1-cols + 20px !default; // 20px compensate for a scrollbar (approx)
$break-2-width: ($column-width / 1rem) * nth($sizes, 3) * 1px * $break-2-cols + 20px !default; // 20px compensate for a scrollbar (approx)
// max width of grid container
// basic formula: $column-width * $break-cols, manually converted to px
$break-0-max: ($column-width / 1rem) * nth($sizes, 1) * 1px * $break-0-cols !default;
$break-1-max: ($column-width / 1rem) * nth($sizes, 2) * 1px * $break-1-cols !default;
$break-2-max: ($column-width / 1rem) * nth($sizes, 3) * 1px * $break-2-cols !default;
// susy breakpoint layouts
// format: [column-number] ([relative proportion of column] [relative proportion of gutter]) [any other susy settings]
$break-0-layout: $break-0-cols ($column-width $gutter) inside-static !default;
$break-1-layout: $break-1-cols ($column-width $gutter) inside-static !default;
$break-2-layout: $break-2-cols ($column-width $gutter) inside-static !default;
// enable responsive baseline & type scaling.
// increases root font size from each breakpoint, starting from the min size specified in $rootsizes below
$type-scaling: true !default;
// map for flexible retrieval of breakpoint info
$breakpoint-map: (
break-0: (
cols: $break-0-cols,
start: $break-0-width,
max: $break-0-max,
layout: $break-0-layout,
size: map-get($rootsizes, break-0)
),
break-1: (
cols: $break-1-cols,
start: $break-1-width,
max: $break-1-max,
layout: $break-1-layout,
size: map-get($rootsizes, break-1)
),
break-2: (
cols: $break-2-cols,
start: $break-2-width,
max: $break-2-max,
layout: $break-2-layout,
size: map-get($rootsizes, break-2)
)
) !default;
// breakpoint count
$breakpoint-count: length(map-keys($breakpoint-map)) !default;
// breakpoint names
$breaks: map-keys($breakpoint-map) !default;
// store current breakpoint for reference withiin breakpoint mixins
$current-breakpoint: break-0 !default;
// debug grid columns, baseline grid & breakpoints
$debug-grid: true !default;
$debug-baseline: true !default;
$debug-breakpoints: true !default;
// grid opacity
$grid-opacity: 0.1 !default;
// image settings
$image-path: '../images' !default;
$retina-suffix: '@2x' !default;
// Add typefaces here.
// Add weight and style details too.
// Set cap height to set to the baseline.
// Here are some cap-height sizes to get you started:
// Georgia: 0.66, Times / Times New Roman: 0.65, Palatino: 0.52
// Lucida Grande: 0.72, Helvetica: 0.65, Helvetica Neue: 0.77, Verdana: 0.76, Tahoma: 0.76
$body-type: (
font-family: 'Helvetica, sans-serif',
regular: normal,
bold: bold,
cap-height: 0.65
) !default;
$display-type: (
font-family: 'Helvetica, sans-serif',
regular: normal,
bold: bold,
cap-height: 0.69
) !default;
$monospace-type: (
font-family: 'Menlo, monospace',
regular: 400,
cap-height: 0.68
) !default;
// for debugging rem fallback; prevents rem from being output, exposing px fallbacks
$parse-rem: true !default;
// type info variables
$current-type-trailer: 0 !default;
$current-type-leader: 0 !default;
$current-type-size: 0 !default;
$current-type-lineheight: 0 !default;
$current-type-multiplier: 1 !default;