blog/_src/_assets/styl/_kremalicious/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                 = #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%)
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`//`
			`// kremalicious3`
			`// --------------`
			`// Global variables & settings`
			`//`


			`// Settings`
			`/////////////////////////////////////`

remove nib dependency 2015-08-09 18:11:26 +02:00			`vendors = official // Stylus' @keyframes settings`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00

			`// Asset Paths`
			`/////////////////////////////////////`

kinda responsive typography 2015-06-10 22:53:29 +02:00			`$img-path = '/assets/img/'`
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`$font-path = '/assets/fonts/'`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00

			`// Colors`
			`/////////////////////////////////////`

			`$brand-dark = #015565`
			`$brand-light = #e7eef4`
styleguide tweaks 2016-05-16 20:25:57 +02:00			`$brand-cyan = #43a699`

			`$brand-grey = #6b7f88`
switch gray tones 2016-10-03 22:16:19 +02:00			`$brand-grey-light = lighten($brand-grey, 20%)`
			`$brand-grey-dimmed = lighten($brand-grey, 60%)`
kinda responsive typography 2015-06-10 22:53:29 +02:00

			`// Text Colors`
			`/////////////////////////////////////`

styleguide tweaks 2016-05-16 20:25:57 +02:00			`$text-color = $brand-grey`
			`$text-color-light = $brand-grey-light`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00

			`// Typography`
			`/////////////////////////////////////`

better link usability 2016-10-03 23:36:15 +02:00			`$font-size-root-xs = 16px`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`$font-size-root = 18px`
			`$font-size-root-lg = 20px`

			`$font-size-base = 1rem`
better link usability 2016-10-03 23:36:15 +02:00			`$font-size-large-xs = 1.15rem`
fixes - fix modals - fix bitcoin modal - more spacious code - different lead paragraph style 2016-10-02 02:55:04 +02:00			`$font-size-large = 1.45rem`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`$font-size-small = 0.8rem`
add actions section under each post - comment vi tweet, thanks through bitcoin - add vex modals with custom theme - add bitcoin icon - fix footer layout 2016-04-17 20:01:42 +02:00			`$font-size-mini = 0.6rem`
rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00
			`$font-size-h1 = 3rem`
			`$font-size-h2 = 2rem`
			`$font-size-h3 = 1.75rem`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`$font-size-h4 = $font-size-large`
			`$font-size-h5 = $font-size-base`
			`$font-size-h6 = $font-size-small`

rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`$line-height = 1.5`
fixes - fix modals - fix bitcoin modal - more spacious code - different lead paragraph style 2016-10-02 02:55:04 +02:00			`$line-height-large = 1.4`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`$line-height-small = 1.1428571429`

nicer font fallbacks 2015-12-05 16:15:24 +01:00			`$font-family-base = 'ff-tisa-sans-web-pro', 'Trebuchet MS', 'Helvetica Neue', Helvetica, Arial, sans-serif`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`$font-weight-base = 400`
kinda responsive typography 2015-06-10 22:53:29 +02:00			`$font-color-base = $text-color`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
			`$font-family-monospace = Menlo, Monaco, Consolas, 'Courier New', monospace`

nicer font fallbacks 2015-12-05 16:15:24 +01:00			`$headings-font-family = 'brandon-grotesque', 'Avenir Next', 'Helvetica Neue',Helvetica,Arial,sans-serif`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`$headings-font-weight = 500 // Medium`
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`$headings-line-height = 1.1`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`$headings-color = $brand-dark`


			`// Scaffolding`
			`/////////////////////////////////////`

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


			`// Links`
			`/////////////////////////////////////`

styleguide tweaks 2016-05-16 20:25:57 +02:00			`$link-color = $brand-cyan`
typography tweaks 2015-08-20 00:19:58 +02:00			`$link-color-hover = lighten($link-color, 15%)`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00

another grid rewrite, now exercise it 2015-08-10 00:48:31 +02:00			`// Grid`
			`/////////////////////////////////////`

rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`$gutter-space = $spacer`
another grid rewrite, now exercise it 2015-08-10 00:48:31 +02:00
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`// Components spacing`
			`/////////////////////////////////////`

rem all the things - switch to rem based typography - switch to rem based spacing - responsive typography through root font size change 2016-04-16 19:32:58 +02:00			`$spacer = ($font-size-base * $line-height)`

first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`$border-radius-base = 3px`
			`$border-radius-small = $border-radius-base`
			`$border-radius-large = $border-radius-base`

new flexbox based grid system 2015-08-09 21:50:06 +02:00			`$padding-base-vertical = 8px`
add simple styleguide page - modify lots of typographic elements - activate all the redcarpet extensions 2016-05-05 17:33:57 +02:00			`$padding-base-horizontal = 12px`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
			`$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`
			`/////////////////////////////////////`

add simple styleguide page - modify lots of typographic elements - activate all the redcarpet extensions 2016-05-05 17:33:57 +02:00			`$input-bg = alpha(#fff, .85)`
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`$input-bg-focus = #fff`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`$input-bg-disabled = $brand-grey-light`

			`$input-font-size = $font-size-base`
MEGA COMMIT, final stylus refactoring 2014-07-12 21:22:47 +02:00			`$input-font-weight = $font-weight-base`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00
			`$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`
			`/////////////////////////////////////`

nicer syntax highlighting 2015-07-26 21:41:59 +02:00			`$code-bg = #343642`
tor.sh: fix resetting proxy settings 2016-05-15 18:20:39 +02:00			`$code-color = $brand-light`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`$kbd-bg = $code-bg`
			`$kbd-color = $code-color`

fixes, full width teasers 2015-08-20 20:06:14 +02:00
first batch of stylus reorg 2014-07-12 02:00:18 +02:00			`// Responsive breakpoints`
			`/////////////////////////////////////`

layout tweaks 2016-06-09 19:25:01 +02:00			`$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)'`
first batch of stylus reorg 2014-07-12 02:00:18 +02:00

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

			`$highDPI = 'print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) '`
kinda responsive typography 2015-06-10 22:53:29 +02:00			`$highDPI_3x = 'print, (-webkit-min-device-pixel-ratio: 3), (min-resolution: 344dpi) '`
icon tooltips 2015-12-02 00:19:46 +01:00

			`// Tooltips`
			`/////////////////////////////////////`

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