blog/_src/_assets/styl/variables.styl

//
// kremalicious3
// --------------
// Global variables & settings
//


// Settings
/////////////////////////////////////

vendors                     = official   // Stylus' @keyframes settings


// Asset Paths
/////////////////////////////////////

$img-path                    = '/assets/img/'
$font-path                   = '/assets/fonts/'


// Colors
/////////////////////////////////////

$brand-dark                 = #015565
$brand-light                = #e7eef4
$brand-cyan                 = #3a9085
$brand-grey                 = #56666e
$brand-grey-light           = lighten($brand-grey, 15%)


// Text Colors
/////////////////////////////////////

$text-color                 = $brand-grey-light
$text-color-light           = lighten($brand-grey-light, 30%)
$text-color-dimmed          = lighten($brand-grey-light, 50%)


// Typography
/////////////////////////////////////

$font-size-base             = 18px
$font-size-large            = ceil($font-size-base * 1.35) // ~24px
$font-size-small            = ceil($font-size-base * 0.8)  // ~14px
$font-size-mini             = ceil($font-size-base * 0.7)  // ~12px

$font-size-h1               = floor(($font-size-base * 2.75))
$font-size-h2               = floor(($font-size-base * 2))
$font-size-h3               = ceil(($font-size-base * 1.75))
$font-size-h4               = $font-size-large
$font-size-h5               = $font-size-base
$font-size-h6               = $font-size-small

$font-size-h1-large         = floor(($font-size-large * 2.75))
$font-size-h2-large         = floor(($font-size-large * 2))
$font-size-h3-large         = ceil(($font-size-large * 1.75))
$font-size-h4-large         = ceil(($font-size-large * 1.25))
$font-size-h5-large         = $font-size-large
$font-size-h6-large         = $font-size-base

$font-size-h1-small         = floor(($font-size-small * 2.75))
$font-size-h2-small         = floor(($font-size-small * 2))
$font-size-h3-small         = ceil(($font-size-small * 1.75))
$font-size-h4-small         = ceil(($font-size-small * 1.25))

$line-height-base           = 1.4444444444  // 26px/18px
$line-height-computed       = floor($font-size-base * $line-height-base)
$line-height-large          = 1.5           // 36px/24px
$line-height-small          = 1.1428571429

$font-family-base           = 'ff-tisa-sans-web-pro', '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

$headings-font-family       = 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif
$headings-font-weight       = 500 // Medium
$headings-line-height       = 1.1
$headings-color             = $brand-dark


// Scaffolding
/////////////////////////////////////

$body-bg                    = #dfe8ef
$page-bg                    = $brand-light


// Links
/////////////////////////////////////

$link-color                 = lighten($brand-cyan, 10%)
$link-color-hover           = lighten($link-color, 15%)


// Grid
/////////////////////////////////////

$gutter-space               = $line-height-computed

// Components spacing
/////////////////////////////////////

$border-radius-base         = 3px
$border-radius-small        = $border-radius-base
$border-radius-large        = $border-radius-base

$padding-base-vertical      = 8px
$padding-base-horizontal    = 18px

$padding-small-vertical     = ($padding-base-vertical / 2)
$padding-small-horizontal   = ($padding-base-horizontal / 2)

$padding-large-vertical     = ($padding-base-vertical * 2)
$padding-large-horizontal   = ($padding-base-horizontal * 2)


// Forms
/////////////////////////////////////

$input-bg                   = #fff
$input-bg-focus             = #fff
$input-bg-disabled          = $brand-grey-light

$input-font-size            = $font-size-base
$input-font-weight          = $font-weight-base

$input-color                = $font-color-base
$input-color-placeholder    = rgba(46, 79, 92, .3)

$input-border               = $brand-grey-light
$input-border-radius        = $border-radius-base
$input-border-focus         = $brand-cyan

$input-height-base          = ($line-height-computed + ($padding-base-vertical * 2) + 2)
$input-height-large         = (ceil($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 1)
$input-height-small         = (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2)


// Code
/////////////////////////////////////

$code-bg                    = #343642
$code-color                 = #C1C2C3
$kbd-bg                     = $code-bg
$kbd-color                  = $code-color


// Responsive breakpoints
/////////////////////////////////////

$screen-small-min           = 30em
$screen-medium-min          = 40.625em
$screen-large-min           = 87.500em

$breakpoint1                = 'only screen and (min-width: 30em)'
$breakpoint2                = 'only screen and (min-width: 40.625em)'
$breakpoint3                = 'only screen and (min-width: 87.500em)'


// High dpi media query
/////////////////////////////////////

$highDPI                    = 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) '
$highDPI_3x                 = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) '


// Tooltips
/////////////////////////////////////

$tooltip-color              = #fff
$tooltip-bg                 = darken($brand-dark, 15%)