123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110 |
- // *************************************
- //
- // Config
- // -> Fonts, Variables
- //
- // *************************************
- // -------------------------------------
- // @font-face
- // -------------------------------------
- // ----- Open Sans ----- //
- // +font-face('OpenSans', 'OpenSans')
- // +font-face('OpenSans', 'OpenSansBold', bold)
- // +font-face('OpenSans', 'OpenSansItalic', normal, italic)
- // -------------------------------------
- // Colors
- // -------------------------------------
- // ----- Palette ----- //
- $blue: #12a9d5
- $black: #131518
- $dark: #171b1f
- // ----- Base ----- //
- $c-background-invert: #F7F9FA
- $c-background: $dark
- $c-border: lighten($dark, 5%)
- $c-highlight: #0F6A85
- $c-subdue: lighten($dark, 5%)
- $c-text-invert: #fff
- $c-text: #919191
- // -------------------------------------
- // Base
- // -------------------------------------
- // ----- Borders & Box Shadow ----- //
- $b-borderRadius: 3px
- $b-borderStyle: solid
- $b-borderWidth: 2px
- $b-border: $b-borderWidth $b-borderStyle $c-border
- $b-boxShadow: 0 2px 0 rgba($c-text, 0.25)
- // ----- Typography ----- //
- $b-fontFamily-heading: sans-serif
- $b-fontFamily: sans-serif
- $b-fontSize: 16px
- $b-fontSize-xs: 60%
- $b-fontSize-s: 75%
- $b-fontSize-m: 90%
- $b-fontSize-l: 115%
- $b-fontSize-xl: 150%
- $b-fontSize-xxl: 360%
- $b-lineHeight: 1.5
- // ----- Sizing ----- //
- $b-maxWidth: em(1024px)
- $b-maxWidth-m: em(900px)
- $b-maxWidth-s: em(700px)
- $b-space: em(20px)
- $b-space-xs: 0.25 * $b-space
- $b-space-s: 0.5 * $b-space
- $b-space-m: 0.75 * $b-space
- $b-space-l: 2 * $b-space
- $b-space-xl: 4 * $b-space
- // ----- Button Sizing ----- //
- $btn-space: em(10px)
- // -------------------------------------
- // Components
- // -------------------------------------
- // ----- Grid ----- //
- // Breakpoints
- $g-s: em(480px)
- $g-m: em(800px)
- $g-l: em(1024px)
- // Settings
- $g-columns: 12
- $g-defaults: 's' $g-s, 'm' $g-m, 'l' $g-l
- $g-gutter: 40px
- $g-silent: true
- // Selector
- $g-selector: if($g-silent, unquote("%"), unquote("."))
- // -------------------------------------
- // Structures
- // -------------------------------------
- // ----- Hero ----- //
- $hero-background: #000000
- $hero-minHeight: 320px
|