Project Variables for BREC Project

gistfile1.txt

/***
 * Fonts
 */

// Body font
$primary-font: 'Lato', sans-serif;
$header-font: $primary-font;

// Font Weights
$font-light: 400;
$font-regular: 400;
$font-medium: 700;
$font-bold: 900;

// Font sizes
$font-size: 1em;
$font-small: .9em;

/***
 * Colors
 */
 
// Color names
$white: #ffffff;
$light-gray: #f5f5f5;
$gray: #888888;
$black: #444444;
$yellow: #f8991d;
$light-blue: #DEE7F1;
$blue: #175294;
$red: #F20F01;

// Social media icons
$instagram: #9b6954;
$facebook: #3b5998;
$twitter: #00aced;
$youtube: #bb0000;
$pinterest: #cb2027;
$googleplus: #dd4b39;

// Branding colors
$primary-brand-color: $blue;
$brand-color-1: $yellow;
$brand-color-2: $black;
$brand-color-3: $gray;
$brand-color-4: $light-blue;
$brand-light: $white;
$brand-dark: $black;

// Background colors
$main-background: $white;
$single-background: $white;

// Text colors
$body-color: $brand-dark;
$link-color: $primary-brand-color;
$link-hover-color: darken( $primary-brand-color, 5 );

// Other colors
$border-color: $gray;
$border-focus-color: darken( $gray, 5 );

/***
 * Spacing
 */
$block-inside-padding: 20px;
$block-outside-padding: 20px;
$block-mobile-padding: 20px;
$container-mobile-padding: 3%;

$block-margin-full: 40px;
$block-margin-small: $block-margin-full/2;
$inline-margin: 10px;

$paragraph-margin: 24px;

$container-width: 1000px;
$full-width: 1600px;

$content-padding: $block-inside-padding;

/***
 * Screen sizes
 */
$rain-drop: 320px;
$puddle: 481px; //small
$pond: 769px; // medium
$river: 1024px; // large
$lake: 1201px; // x-large
$ocean: 1600px;