mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-27 04:10:03 +01:00
167 lines
5.2 KiB
Stylus
167 lines
5.2 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 = #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', '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','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) '
|