# this ensures Jekyll reads the file to be transformed into CSS later # only Main files contain this front matter, not partials


// Variables ===================================================================

// Space & Borders $gutter: {% if site.gutter %}{{ site.gutter }}{% else %}50px{% endif %}; $borderRadius: {% if site.border_radius %}{{ site.border_radius }}{% else %}2px{% endif %}; $borderWeight: {% if site.border_weight %}{{ site.border_weight }}{% else %}2px{% endif %}; $borderStyle: {% if site.border_style %}{{ site.border_style }}{% else %}solid{% endif %}; $linkStyle: {% if site.link_style %}{{ site.link_style }}{% else %}underline{% endif %};

// Palette $colorWhite: fbfbfb; $colorLightGray: f8f8f2; $colorGray: #44475a; $colorDarkGray: #282a36; $colorPink: FF79C6; $colorPurple: bd93f9; $colorCyan: #64D9EF; $colorBlue: #6272a4; $colorYellow: F1FA8C; $colorGreen: #50fa7b; $colorOrange: ffb86c; $colorRed: ff5555;

// Color mixer. $colorOne: $colorRed; $colorTwo: $colorBlue; $colorThree: $colorGreen; $colorFour: $colorOrange; $colorFive: $colorPurple; $colorSix: $colorCyan; $colorSeven: $colorYellow; $colorEight: $colorPink;

// Colors $colorBrand: {% if site.color_brand %}{{ site.color_brand }}{% else %}$colorCyan{% endif %}; $colorText: {% if site.color_text %}{{ site.color_text }}{% else %}$colorWhite{% endif %}; $colorForeground: {% if site.color_foreground %}{{ site.color_foreground }}{% else %}$colorGray{% endif %}; $colorBackground: {% if site.color_background %}{{ site.color_background }}{% else %}$colorDarkGray{% endif %}; $colorHighlight: {% if site.color_highlight %}{{ site.color_highlight }}{% else %}$colorPink{% endif %}; $colorAlternate: {% if site.color_alternate %}{{ site.color_alternate }}{% else %}$colorGreen{% endif %};

// Typography $fontLight: 300; $fontRegular: 400; $fontBold: 600; $lineHeight: 1.75; $baseFontSize: 16px;

// Font bases $headingFontMargin: $gutter/2; $h1Base: 2.5; $h2Base: 2; $h3Base: 1.75; $h4Base: 1.25; $h5Base: 1; $h6Base: 0.875; $pBase: 0.01;

$bodyFontStack: {% if site.body_font_stack %}{{ site.body_font_stack }}{% else %}Helvetica, Arial, sans-serif{% endif %}; $headingFontStack: {% if site.heading_font_stack %}{{ site.heading_font_stack }}{% else %}Helvetica, Arial, sans-serif{% endif %}; $bodyFontWeight: {% if site.body_font_weight %}{{ site.body_font_weight }}{% else %}$fontRegular{% endif %}; $headingFontWeight: {% if site.heading_font_weight %}{{ site.heading_font_weight }}{% else %}$fontBold{% endif %}; $headingFontTransform: {% if site.heading_font_transform %}{{ site.heading_font_transform }}{% else %}none{% endif %};

// Screen Sizes $s: 650px; $m: 850px; $l: 1050px; $xl: 1450px;

// Miscellaneous $transition: all .3s ease-out;

// Icons $baseIconSize: 32px; $iconLinecap: square;

// Mixins ======================================================================

// Prefixer (See github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/addons/_prefixer.scss) @mixin prefixer($property, $value, $prefixes) {

@each $prefix in $prefixes {
  @if $prefix == webkit {
    -webkit-#{$property}: $value;
  } @else if $prefix == moz {
    -moz-#{$property}: $value;
  } @else if $prefix == ms {
    -ms-#{$property}: $value;
  } @else if $prefix == o {
    -o-#{$property}: $value;
  } @else if $prefix == spec {
    #{$property}: $value;
  } @else  {
    @warn "Unrecognized prefix: #{$prefix}";
  }
}

}

// Clearfix @mixin clearfix() {

display: block; // TBC - is this OK? Seems to help
&:after {
  content: '';
  display: table;
  clear: both;
}
*zoom: 1;

}

// Verically Align @mixin vertical-align() {

position: relative;
top: 50%;
-webkit-transform: perspective(1px) translateY(-50%);
-ms-transform: perspective(1px) translateY(-50%);
transform: perspective(1px) translateY(-50%);

}

// Transition Property (for legacy support) @mixin transition-property() {

-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;

}

// Transitions @mixin transition() {

@include prefixer(transition, $transition, webkit moz ms spec);

}

// Overlays @mixin overlay() {

position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;

}

// Flex @mixin flex() {

display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-box;
display: -webkit-flexbox;
display: -webkit-flex;
display: flex;

} @mixin box-orient–vertical() {

@include prefixer(box-orient, vertical, webkit moz spec);

} @mixin flex-direction($flex-direction) {

@include prefixer(flex-direction, $flex-direction, webkit moz ms spec);

}

// Screen Sizes & Types @mixin s() {

@media (max-width: $s) {
  @content;
}

} @mixin m() {

@media (min-width: $s) and (max-width: $l - 1px) {
  @content;
}

} @mixin l() {

@media (min-width: $l) and (max-width: $xl - 1px) {
  @content;
}

} @mixin xl() {

@media (min-width: $xl) {
  @content;
}

}

// Table Grids @mixin table() {

display: table;
table-layout: fixed;
width: 100%;
margin: 0 0 $gutter;
.column {
  float: none;
  display: table-cell;
  vertical-align: middle;
  &.middle {
    vertical-align: middle;
  }
  &.top {
    vertical-align: top;
  }
  &.bottom {
    vertical-align: bottom;
  }
  &:first-of-type {
    padding-left: 0;
  }
  &:last-of-type {
    padding-right: 0;
  }
}

}

// Reverse Grids @mixin reverse() {

direction: rtl;
.column {
  direction: ltr;
  float: right;
}

}

// Background images @mixin background-image() {

background-size: cover;
background-repeat: no-repeat;
background-position: center;

}

// Responsive Typography @mixin responsive-type($minFont, $viewport, $default, $kerning) {

font-size: em($default); // em fallback
font-size: -moz-calc(#{$minFont} + #{$viewport}vw);
font-size: -webkit-calc(#{$minFont} + #{$viewport}vw);
font-size: -o-calc(#{$minFont} + #{$viewport}vw);
font-size: calc(#{$minFont} + #{$viewport}vw);
letter-spacing: $kerning;

}

// Imports =====================================================================

@import “reset”; @import “global”; @import “typography”; @import “tables”; @import “forms”; @import “grid”; @import “header”; @import “footer”; @import “main”; @import “navigation”; @import “helpers”; @import “code”; @import “icons”;

// Add your additional css to the additions file if you wish to update easily // later. @import “additions”;