1
0
mirror of https://github.com/kremalicious/blog.git synced 2024-11-15 17:45:31 +01:00
blog/_src/_assets/styl/_kremalicious/variables.styl

165 lines
4.4 KiB
Stylus

//
// 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 = #43a699
$brand-grey = #6b7f88
$brand-grey-light = #96a6ad
$brand-grey-dimmed = #D8E0E5
// Text Colors
/////////////////////////////////////
$text-color = $brand-grey
$text-color-light = $brand-grey-light
// Typography
/////////////////////////////////////
$font-size-root = 18px
$font-size-root-lg = 20px
$font-size-base = 1rem
$font-size-large = 1.35rem
$font-size-small = 0.8rem
$font-size-mini = 0.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-large = 1.5
$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 = $brand-cyan
$link-color-hover = lighten($link-color, 15%)
// Grid
/////////////////////////////////////
$gutter-space = $spacer
// Components spacing
/////////////////////////////////////
$spacer = ($font-size-base * $line-height)
$border-radius-base = 3px
$border-radius-small = $border-radius-base
$border-radius-large = $border-radius-base
$padding-base-vertical = 8px
$padding-base-horizontal = 12px
$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 = alpha(#fff, .85)
$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
// Code
/////////////////////////////////////
$code-bg = #343642
$code-color = $brand-light
$kbd-bg = $code-bg
$kbd-color = $code-color
// Responsive breakpoints
/////////////////////////////////////
$screen-xs-min = 30em
$screen-sm-min = 40.625em
$screen-md-min = 60em
$screen-lg-min = 87.500em
$screen-xs = 'only screen and (min-width: 30em)'
$screen-sm = 'only screen and (min-width: 40.625em)'
$screen-md = 'only screen and (min-width: 60em)'
$screen-lg = '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%)