|
|
|
|
//these are the main variables used in the sass file
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// G R I D
|
|
|
|
|
|
|
|
|
|
$grid_width : 50% // grid width %
|
|
|
|
|
$grid_max_width : 100% // max width
|
|
|
|
|
$grid_cols : 12 // cols number
|
|
|
|
|
$grid_gut : 2.5% // gut width %
|
|
|
|
|
$grid_col : ($grid_width - ($grid_gut * ($grid_cols - 1))) / $grid_cols
|
|
|
|
|
$class-col : col !default
|
|
|
|
|
|
|
|
|
|
.col
|
|
|
|
|
float: left
|
|
|
|
|
margin: 0 $grid_gut 0 0
|
|
|
|
|
+box-sizing(border-box)
|
|
|
|
|
@extend .clear-fix
|
|
|
|
|
&.last
|
|
|
|
|
margin-right: 0
|
|
|
|
|
@for $i from 1 through $grid_cols
|
|
|
|
|
$j: $i - 1
|
|
|
|
|
.#{$class-col}-#{$i}
|
|
|
|
|
width: ($i * $grid_col) + ($j * $grid_gut)
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// vars used for the website
|
|
|
|
|
|
|
|
|
|
$site-width : $grid_max_width
|
|
|
|
|
$gut-width : $grid_gut
|
|
|
|
|
$space : 1rem
|
|
|
|
|
// colors
|
|
|
|
|
|
|
|
|
|
$light-grey: #C3C3C3
|
|
|
|
|
$color-green: #B4C669
|
|
|
|
|
$color-red: #EF5D43
|
|
|
|
|
$color-blue: #39434F
|
|
|
|
|
$dark-grey : #444
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
$main-color-light: #aaa
|
|
|
|
|
$main-color-dark: #222
|
|
|
|
|
$main-color-color: $color-green
|
|
|
|
|
$main-background-color: lighten($light-grey, 10% )
|
|
|
|
|
$bloc-light-color : lighten($light-grey, 20% )
|
|
|
|
|
|
|
|
|
|
$bloc-background-color: white
|
|
|
|
|
|
|
|
|
|
$defaut-font-color: $dark-grey
|
|
|
|
|
|
|
|
|
|
$global-font-size : 15px
|
|
|
|
|
$main-font-size : 1rem
|
|
|
|
|
$main-line-height : 1.4rem
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/* FONTS */
|
|
|
|
|
|
|
|
|
|
$main-font-family: "Roboto", sans-serif
|
|
|
|
|
$symbol-font-family: "fontello"
|
|
|
|
|
$serif-font-family: "Droid", serif
|
