hacks-guide-minimal-mistake.../assets/_scss/_variables.scss

148 lines
4.6 KiB
SCSS
Raw Normal View History

2015-01-20 21:25:57 +01:00
/* ==========================================================================
Variables
2015-01-20 21:25:57 +01:00
========================================================================== */
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Typography
========================================================================== */
2016-03-25 14:33:28 +01:00
$doc-font-size : 16;
2016-03-25 14:11:13 +01:00
/* paragraph indention */
2016-03-25 14:33:28 +01:00
$paragraph-indent : false; // true, false (default)
$indent-var : 1.3em;
2016-03-10 17:13:54 +01:00
/* system typefaces */
2016-03-25 14:33:28 +01:00
$serif : Georgia, Times, serif;
$sans-serif : -apple-system, ".SFNSText-Regular", "San Francisco", "Roboto", "Segoe UI", "Helvetica Neue", "Lucida Grande", Arial, sans-serif;
$monospace : Monaco, Consolas, "Lucida Console", monospace;
/* sans serif typefaces */
2016-03-25 14:33:28 +01:00
$sans-serif-narrow : $sans-serif;
$helvetica : Helvetica, "Helvetica Neue", Arial, sans-serif;
/* serif typefaces */
2016-03-25 14:33:28 +01:00
$georgia : Georgia, serif;
$times : Times, serif;
$bodoni : "Bodoni MT", serif;
$calisto : "Calisto MT", serif;
$garamond : Garamond, serif;
$global-font-family : $sans-serif;
$header-font-family : $sans-serif;
2016-04-05 22:14:52 +02:00
$caption-font-family : $serif;
/* type scale */
2016-04-01 03:47:10 +02:00
$type-size-1 : 2.441em; // ~39.056px
$type-size-2 : 1.953em; // ~31.248px
$type-size-3 : 1.563em; // ~25.008px
$type-size-4 : 1.25em; // ~20px
$type-size-5 : 1em; // ~16px
$type-size-6 : 0.75em; // ~12px
$type-size-7 : 0.6875em; // ~11px
$type-size-8 : 0.625em; // ~10px
2014-07-31 19:09:32 +02:00
2015-04-17 12:43:36 +02:00
/*
2015-01-20 21:25:57 +01:00
Colors
========================================================================== */
$gray : #7a8288;
$dark-gray : mix(#000, $gray, 40%);
$darker-gray : mix(#000, $gray, 60%);
$light-gray : mix(#fff, $gray, 50%);
2016-03-25 14:33:28 +01:00
$lighter-gray : mix(#fff, $gray, 90%);
2016-03-10 17:13:54 +01:00
2016-03-25 14:33:28 +01:00
$body-color : #fff;
2016-04-01 21:14:54 +02:00
$background-color : #fff;
2016-04-10 18:07:00 +02:00
$code-background-color : #fafafa;
$code-background-color-dark : $light-gray;
$text-color : $dark-gray;
2016-03-25 14:33:28 +01:00
$border-color : $lighter-gray;
2014-07-31 19:09:32 +02:00
$primary-color : #7a8288;
$success-color : #62c462;
$warning-color : #f89406;
$danger-color : #ee5f5b;
2016-04-06 21:50:30 +02:00
$info-color : #52adc8;
2014-07-31 19:09:32 +02:00
/* brands */
2016-03-25 14:33:28 +01:00
$behance-color : #1769FF;
$dribbble-color : #ea4c89;
$facebook-color : #3b5998;
$flickr-color : #ff0084;
$foursquare-color : #0072b1;
$github-color : #171516;
$google-plus-color : #dd4b39;
$instagram-color : #517fa4;
$lastfm-color : #d51007;
$linkedin-color : #007bb6;
$pinterest-color : #cb2027;
$rss-color : #fa9b39;
$soundcloud-color : #ff3300;
$stackoverflow-color : #fe7a15;
$tumblr-color : #32506d;
$twitter-color : #55acee;
$vimeo-color : #1ab7ea;
$vine-color : #00bf8f;
$youtube-color : #bb0000;
$xing-color : #006567;
2016-03-23 03:59:39 +01:00
2015-01-20 21:25:57 +01:00
/* links */
2016-04-06 03:37:16 +02:00
$link-color : $info-color;
$link-color-hover : mix(#000, $link-color, 25%);
$link-color-visited : mix(#fff, $link-color, 25%);
2016-04-06 03:37:16 +02:00
$masthead-link-color : $primary-color;
$masthead-link-color-hover : mix(#000, $primary-color, 25%);
2016-03-10 17:13:54 +01:00
/*
Breakpoints
2016-03-10 17:13:54 +01:00
========================================================================== */
@include breakpoint-set("to ems", true);
2016-03-25 14:33:28 +01:00
$small : 600px;
$medium : 768px;
$medium-wide : 900px;
$large : 1024px;
$x-large : 1280px;
2014-07-31 19:09:32 +02:00
2015-04-17 12:43:36 +02:00
/*
Grid
2015-01-20 21:25:57 +01:00
========================================================================== */
2015-04-17 12:43:36 +02:00
2016-03-25 14:33:28 +01:00
$right-sidebar-width-narrow : 200px;
$right-sidebar-width : 300px;
$right-sidebar-width-wide : 400px;
$susy: (
columns: 12,
// column-width: 90px,
gutters: 1/4,
math: fluid,
output: float,
gutter-position: after,
container: $large,
global-box-sizing: border-box,
2016-03-17 20:50:22 +01:00
// debug: (
// image: show,
// color: blue,
// output: overlay,
// toggle: top right,
// ),
2016-04-04 03:23:24 +02:00
);
/*
Other
========================================================================== */
$border-radius : 4px;
$box-shadow : 0 1px 1px rgba(0, 0, 0, 0.125);
$navicon-width : 28px;
$navicon-height : 4px;
$global-transition : all 0.2s ease-in-out;