# 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”;