mirror of
https://github.com/kremalicious/blog.git
synced 2024-12-24 02:06:17 +01:00
167 lines
4.5 KiB
Stylus
167 lines
4.5 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 = 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-xs = 16px
|
|
$font-size-root = 18px
|
|
$font-size-root-lg = 20px
|
|
|
|
$font-size-base = 1rem
|
|
$font-size-large-xs = 1.15rem
|
|
$font-size-large = 1.45rem
|
|
$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.4
|
|
$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%)
|