mirror of
https://github.com/kremalicious/blog.git
synced 2024-09-24 18:18:49 +02:00
Matthias Kretschmann
384b364a63
- switch to rem based typography - switch to rem based spacing - responsive typography through root font size change
166 lines
4.7 KiB
Stylus
166 lines
4.7 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-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.7rem
|
|
|
|
$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 = lighten($brand-cyan, 10%)
|
|
$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 = 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 = ($spacer + ($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%)
|