variables.scss

//------------------------------
// PARAMETERS, VARIABLES AND FUNCTIONS


// MEDIA QUERIES
$tablet: 640px;
$desktop: 960px; 


// COLORS
$grey: 	#EDEDED;
$black: #202020;
$white: #FFFFFF;
$green: #43B5A3;
$light-green: #C6E9E3;

// TEXT
$text-color: 	$black;
$link-color: 	$black;
$bg-color: 		$white;

// BORDER
$border-color: $black;
$border-size: 1px;
$border: $border-size solid $border-color;

// FONT
$sans: "soleil", Arial, sans-serif;
$serif: 'Playfair Display', 'Times New Roman', Georgia, serif;
$baseline: 16px;

$grid-padding-S: 4%;
$grid-padding-M: 4%;
$grid-padding-L: 12%;

//------------------------------
// MIXINS

@mixin font-size( $pixels, $lineheight: $pixels, $default: $baseline ) {
	// NOTE this function works only if you put 
	// 'font-size: $baseline' in 'body' styles
  font-size: #{$pixels/$default}em;
	line-height: #{$lineheight/$pixels}em;
}

@function kerning( $kerning ) {
	@return #{ $kerning / 1000 }em;
}

@mixin border-on-link() {
	a:link, a:visited, a:active {
		border-bottom: 1px solid $text-color;
		transition: opacity 0.3s ease-out;
	}
	a:hover {
		text-decoration: none;
		opacity: 0.4;
	}
}