spaCy/website/assets/css/_variables.scss

94 lines
2.4 KiB
SCSS

// Variables
// ============================================================================
// Settings and Sizes
$theme : blue !default;
$base-font-size : 10px !default;
$width-logo : 500px, 250px, 100px, 65px !default;
$width-content : 800px;
$width-aside : 300px;
$width-sidebar : 230px;
$width-profile : 160px;
$height-navbar : 55px;
$border-radius : 4px;
$image-ratio : 3 / 1;
$transition : all 0.2s;
$social-buttons : twitter, reddit, hackernews, producthunt;
$screen-size-small : 480px;
$screen-size-medium : 800px;
$screen-size-large : 1200px;
// Grid Columns
$columns: ( fifth, 20% ),
( quarter, 25% ),
( third, (100% / 3) ),
( half, 50% ),
( two-thirds, (100% / 1.5) ),
( full, 100% );
// Fonts
$font-primary : Lato, Tahoma, Geneva, sans-serif !default;
$font-secondary : 'Work Sans', 'Arial Black', Gadget, sans-serif !default;
$font-code : 'Source Code Pro', Consolas, 'Andale Mono', Menlo, Monaco, Courier, monospace !default;
$font-icons : Icomoon !default;
// Colors
// only to be used with the color() function, i.e. color(blue, light)
$colors: (
blue : ( base: #09a3d5, dark: #008ebc, light: #e2f7fe ),
red : ( base: #e4514f, dark: #dd2422, light: #fceeed ),
grey : ( base: #dddddd, dark: #999999, light: #f6f6f6 ),
black : ( base: #222222, dark: #000000 ),
white : ( base: #ffffff ),
yellow : ( base: #f4c025 ),
green : ( base: #3ec930 ),
purple : ( base: #8130c9 ),
orange : ( base: #f47725 ),
social: (
twitter : #5ea9dd,
hackernews : #ff6600,
reddit : #ff4500,
producthunt : #da552f,
github : #000000,
linkedin : #0077b5,
facebook : #3b5999,
medium : #02b875,
),
);
// Icons
$icons: (
website : '\1f310',
search : '\1f50d',
feed : '\1f525',
quote : '\275d',
twitter : '\e900',
github : '\e901',
producthunt : '\e902',
linkedin : '\e903',
hackernews : '\e904',
reddit : '\e905',
facebook : '\e906',
medium : '\e907',
codepen : '\e908',
dash : '\2014',
bullet : '\2022',
menu : '\2261',
close : '\2715',
copyright : '\00a9',
permalink : '\0023',
);