portfolio/src/stylesheets/_variables.scss

55 lines
1.6 KiB
SCSS

// Colors
/////////////////////////////////////
$brand-main: #015565;
$brand-cyan: #43a699;
$brand-light: #e7eef4;
$brand-grey: #6b7f88;
$brand-grey-light: lighten($brand-grey, 20%);
$brand-grey-dimmed: lighten($brand-grey, 60%);
// Text Colors
/////////////////////////////////////
$text-color: $brand-grey;
$text-color-light: $brand-grey-light;
// Typography
/////////////////////////////////////
$font-size-root : 16px;
$font-size-base : 1rem;
$font-size-large : 1.45rem;
$font-size-small : .8rem;
$font-size-mini : .6rem;
$font-size-h1 : 3rem;
$font-size-h2 : 2rem;
$font-size-h3 : 1.75rem;
$font-size-h4 : $font-size-large;
$font-size-h5 : $font-size-base;
$font-size-h6 : $font-size-small;
$line-height : 1.5;
$line-height-small : 1.1428571429;
$font-family-base : 'ff-tisa-sans-web-pro', 'futura-pt', 'le-havre', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif;
$font-weight-base : 400;
$font-color-base : $text-color;
$font-family-monospace : Menlo, Monaco, Consolas, 'Courier New', monospace;
$font-family-headings : 'brandon-grotesque', 'futura-pt', 'le-havre', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif;
$font-weight-headings : 700;
$line-height-headings : 1.1;
$color-headings: $brand-main;
// Components spacing
/////////////////////////////////////
$spacer: ($font-size-base * $line-height);