path: root/src/scss/utils/_variables.scss

// Global settings
// --------------------------------------------

// Font families
$open-sans:            'Open Sans';
$open-sans-sans-serif: 'Open Sans', sans-serif;
$merriweather-serif:   'Merriweather', serif;
$menlo:                 Menlo, Consolas, monospace;

$font-family-base: $open-sans-sans-serif;

$font-families: (
   // base
   'headings':          $open-sans-sans-serif,
   // components
   'code':              $menlo,
   'caption':           $merriweather-serif,
   'image-gallery':     $open-sans,
   'post-header-cover': $merriweather-serif,
   'post-meta':         $open-sans-sans-serif,
   'post-content':      $merriweather-serif,
   'post-excerpt-link': $open-sans-sans-serif,
   'highlight':         $menlo,
   // layout
   'sidebar':           $open-sans-sans-serif
);

// equal to 15px
$font-size-base:      1.6rem;
$font-color-base:     #5d686f;
$line-height-base:    1.9em;
$letter-spacing-base: 0.01em;

// Reduction of font size base on small screen and down
$font-size-base-sm-screen-reduction-factor: 0.1rem;

// Font size : (X.Xrem = XXpx, 1.0rem = 10px)
$font-size: (
    'xxlarge': 2rem,
    'xlarge': 1.8rem,
    'large':  1.7rem,
    'base':   $font-size-base,
    'medium': 1.5rem,
    'small':  1.3rem,
    'xsmall': 1rem
);

// Colors
$colors: (
    'success': #4dc657,
    'danger':  #f5311d,
    'primary': #349ef3,
    'purple':  #cf6ae0,
    'base':    $font-color-base,
    'warning':  #f5aa0a,
    'light':   #9eabb3,
     // use for tag `a`
    'link':    #349ef3
);

// Z-indexes
// `l-` prefix for layout
// `c-` prefix for components
$z-indexes: (
    // position the cover below the whole blog
    'l-cover':             -1,
    'l-main':              10,
    'c-post-header-cover': 15,
    'l-header':            20,
    'l-sidebar':           20,
    'l-about':             30,
    'c-mask':              30,
    'c-post-bottom-bar':   40,
    'c-share-options-bar': 50,
    'c-tooltip':           1000,
    'c-overlay':           1009,
    'c-modal':             1010
);

// Media Query Ranges
// If you want to change ranges screen size, you can do it easily by changing only `$screen-min` values
$screen-min: (
    'xs-min': 320px,
    'sm-min': 480px,
     // If you change value of `md-min`,
     // you have to change value of `mediumScreenWidth` too in `source/_js/sidebar.js`
    'md-min': 768px,
    'lg-min': 1024px,
    'xlg-min': 1280px
);
$screen-max: (
    'xs-max': map-get($screen-min, sm-min) - 1,
    'sm-max': map-get($screen-min, md-min) - 1,
    'md-max': map-get($screen-min, lg-min) - 1,
    'lg-max': map-get($screen-min, xlg-min) - 1
);
// Merged screen-* Maps
$screen: map-merge($screen-min, $screen-max);
// Shortcuts for medias
$xsmall-and-down: "only screen and (max-width : #{map-get($screen, xs-max)})" !default;
$xsmall-and-up: "only screen and (min-width : #{map-get($screen, xs-min)})" !default;
$small-and-down:  "only screen and (max-width : #{map-get($screen, sm-max)})" !default;
$small-only:      "only screen and (min-width : #{map-get($screen, sm-min)}) and (max-width : #{map-get($screen, sm-max)})" !default;
$small-and-up:    "only screen and (min-width : #{map-get($screen, sm-min)})" !default;
$medium-and-down: "only screen and (max-width : #{map-get($screen, md-max)})" !default;
$medium-only:     "only screen and (min-width : #{map-get($screen, md-min)}) and (max-width : #{map-get($screen, md-max)})" !default;
$medium-and-up:   "only screen and (min-width : #{map-get($screen, md-min)})" !default;
$large-and-down:  "only screen and (max-width : #{map-get($screen, lg-max)})" !default;
$large-only:      "only screen and (min-width : #{map-get($screen, lg-min)}) and (max-width : #{map-get($screen, lg-max)})" !default;
$large-and-up:    "only screen and (min-width : #{map-get($screen, lg-min)})" !default;
$xlarge-and-up:   "only screen and (min-width : #{map-get($screen, xlg-min)})" !default;

// Base settings
// Files are located in `base` folder
// --------------------------------------------

// Headings font-size : (X.Xrem = XXpx, 1.0rem = 10px)
$headings-font-size: (
    'h1': 2.8rem,
    'h2': 2.4rem,
    'h3': 2.0rem,
    'h4': 1.8rem,
    'h5': 1.7rem,
    'h6': 1.6rem
);
// Reduction of headings font size on small screen and down
$headings-font-size-sm-screen-reduction-factor: 0.2rem;
// Reduction of headings font size on medium screen only
$headings-font-size-md-screen-reduction-factor: 0.15rem;

// Layout settings
// Files are located in `layout` folder
// --------------------------------------------

// Main
$about: (
    'background': rgba(17, 26, 35, 0),
);

// Header
$header:(
    'height':     55px,
    'background': #fff,
    'color':      #88909a,
    'border':     1px solid #eef2f8
);

// Sidebar
$sidebar: (
    'md-screen-width':  75px,
    'lg-screen-width':  250px,
    'xlg-screen-width': 500px,
    'background':       rgba(17, 26, 35, 0),
    'color':            #ebebeb
);

// Main
$main: (
    'padding-top':      15px,
    'background-color': #fff
);

// Components settings
// Files are located in `components` folder
// --------------------------------------------

// Highlight code
$highlight: (
    'background':  #f7f8f8,
    'font-size':   1.4rem,
    'border':      1px solid,
    'line-height': 2.3rem
);

// Highlight colors
// name of colors: http://www.color-blindness.com
$highlight-colors: (
    // Background
    'white':           #fff,
    // General color
    'night-rider':     #333,
    'bondi-blue':      #0086b3,
    'persimmon':       #df5000,
    'asparagus':       #63a35c,
    // Comment
    'pewter':          #969896,
    'cardinal':        #a71d5d,
    'scampi':          #795da3,
    'bahama-blue':     #1d3e81,
    'egyptian-blue':   #183691,
    // Deletion color for .diff file
    'free-speech-red': #bd2c00,
    // Deletion background color for .diff file
    'misty-rose':      #ffecec,
    // Addition color for .diff file
    'limeade':         #55a532,
    // Addition background color for .diff file
    'honeydew':        #eaffea
);
// Highlight text
$highlight-text-bg-colors: (
    'red':     lighten(red, 45%),
    'green':   lighten(green, 65%),
    'blue':    lighten(blue, 45%),
    'purple':  lighten(purple, 70%),
    'orange':  lighten(orange, 40%),
    'yellow':  lighten(yellow, 40%),
    'cyan':    lighten(cyan, 40%),
    'primary': lighten(map-get($colors, 'primary'), 35%),
    'success': lighten(map-get($colors, 'success'),35%),
    'warning': lighten(map-get($colors, 'warning'), 40%),
    'danger':  lighten(map-get($colors, 'danger'), 40%),
);
// Image gallery photos
// Space between 2 photos
$image-gallery-photos-margin: 2px;

// Main content
$main-content: (
    'max-width':          750px,
    'padding-right-left': 20px,
);

// Mardown
// These variables are use to have headings smaller than general headings title
// and use correctly headings in a post instead of use only header below h2
// because they are larger than the post title or something like that
// font-size : (X.Xrem = XXpx, 1.0rem = 10px)
$markdown-headings-font-size: (
    'h1': 3rem,
    'h2': 2.7rem,
    'h3': 2.4rem,
    'h4': 2.1rem,
    'h5': 1.9rem,
    'h6': 1.7rem
);
// Reduction of markdwon headings on small screen and down
$markdown-headings-font-size-sm-screen-reduction-factor: 0.35rem;
// Reduction of markdwon headings on medium screen only
$markdown-headings-font-size-md-screen-reduction-factor: 0.2rem;

// Pagination
$pagination-height: 60px;

// Post thumbnail image
// Width and height of post's thumbnail image
$post-thumbnail-image-width: 140px;
$post-bottom-thumbnail-image-max-height: 250px;

// Tooltip
$tooltip: (
    'min-width':    180px,
    'background':   rgba(0, 0, 20, 0.93),
    // Don't change this value, used to horizontally center the tooltip content
    'arrow-width':  15px,
    // Don't change this value, used to vertically center the tooltip content
    'arrow-height': 12px
);