//————————————————– // flexi-typo mixin // created by : Mr.Flexi // date: 15 May 2014 // Source : sass-flexi.com/ //————————————————–

// 1- Modular scale for (tablet,desktop, and large media) // 2:3 perfect fifth // 16px @ 1:1.5 ideal text size // 95px @ 1:1.5 important number - choosen from column width //————————————————— $scale-ratio : 1.5 !default; $font-size : 16 !default; $line-height : 24 !default; // the line height is >=150% of font size

// calculate the headingline elements $h1 : $font-size * 3.375; $h2 : $font-size * 2.25 ; $h3 : $font-size * 1.5 ; $h4 : $font-size * 1.0 ; $h5 : $font-size / 1.5 ; $h6 : $font-size / 2.25 ; //—————————————————

// 2- Modular scale for mobile media // 2:3 perfect fifth // 13px @ 1:1.5 ideal text size // 480px @ 1:1.5 important number - choosen from column width //————————————————— $scale-ratio : 1.5 !default; $font-size-mob: 13 !default; $line-height-mob : 21 !default; // the line height is >=150% of font size

// calculate the headingline elements $h1-mob : $font-size-mob * 2.25; $h2-mob : $font-size-mob * 1.5 ; $h3-mob : $font-size-mob * 1.44 ; $h4-mob : $font-size-mob * 1.0 ; $h5-mob : $font-size-mob / 1.5 ; $h6-mob : $font-size-mob / 2.25 ;

// 3- Functions //—————————————————

// html font size in % @function font-html($font-size,$base:16){

@return ($base / $font-size) * 100%;

}

// px function @function px($font-size){

@return $font-size +px;

}

// rem function @function rem($font-size,$base:16){

@return ($font-size / $base) *1rem;

}

//—————————————————

// 4- placeholders //————————————————— %head-family{

font-family: 'Myriad Pro',"Arial Narrow",Arial,sans-serif;
color: #033649;
text-transform :capitalize;
letter-spacing : px(-1);
text-shadow: 0 1px 1px rgba(255,255,255,0.6);
font-weight: 700;
line-height: 1.1;

}

%margin{

margin: 0 0 px($font-size) 0;

}

// 5- Mixin //—————————————————

// html font size in % - the root of typo system, because we are going to use rem size for the font @mixin html($font-size,$base:16){

font-size: font-html($font-size,$base);
-webkit-font-smoothing:antialiased !important;

}

// body and headline font size and font-family @mixin body-headline($font-size,$base:16){

body{
    font-family: Helvetica, Arial, sans-serif;
    font-size: px($font-size);
    font-size: rem($font-size,$base);
    line-height: $line-height / $font-size ;
    color: #031634;
}

h1, .h1{
    font-size: px($h1);
    font-size: rem($h1,$base);
    @extend %head-family;
}
h2, .h2{
    font-size: px($h2);
    font-size: rem($h2,$base);
    @extend %head-family;
}
h3, .h3{
    font-size: px($h3);
    font-size: rem($h3,$base);
    @extend %head-family;
}
h4, .h4{
    font-size: px($h4);
    font-size: rem($h4,$base);
    @extend %head-family;
}
h5, .h5{
    font-size: px($h5);
    font-size: rem($h5,$base);
    @extend %head-family;
}
h6, .h6{
    font-size: px($h6);
    font-size: rem($h6,$base);
    @extend %head-family;
}
.lead{
    font-size: px($font-size * 1.125);
    font-size: rem(($font-size *1.125) ,$base);
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;
}
p{
    @extend %margin;
}

}

// define the link elements @mixin link($color){

color  : $color;
text-decoration: none;
&:visited{
    text-decoration: none;
}
&:hover{
    color : lighten($color,15%);
    border-bottom: 1px solid lighten($color,15%);
}

}

// define the blockquote elements @mixin blockquote($padding-left,$color){

border-left : 5px solid rgba(0, 0, 0, 0.1);
padding-left: px($padding-left);
color: $color;

}

// define pre,code, and kbd elements @mixin pre(){

display: block;
padding: 1rem;
font-size: 1.3rem;
line-height: 1.43;
color: #031634;
word-break: break-all;
word-wrap: break-word;
background-color: #f5f5f5;
border: 1px solid #ccc;
border-radius: 4px;

}

@mixin code(){

padding: 2px 4px;
font-size: 90%;
color: #c7254e;
white-space: nowrap;
background-color: #f9f2f4;
border-radius: 4px;

}

@mixin kbd(){

padding: 2px 4px;
font-size: 90%;
color: #fff;
background-color:#033649;
border-radius: 3px;
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .25);

}

@mixin mobile($fon-size-mob,$base:16){

body{
    font-size: px($font-size-mob);
    font-size: rem($font-size-mob,$base);
    line-height: $line-height-mob / $font-size-mob;
}

h1, .h1{
    font-size: px($h1-mob);
    font-size: rem($h1-mob,$base);

}
h2, .h2{
    font-size: px($h2-mob);
    font-size: rem($h2-mob,$base);

}
h3, .h3{
    font-size: px($h3-mob);
    font-size: rem($h3-mob,$base);

}
h4, .h4{
    font-size: px($h4-mob);
    font-size: rem($h4-mob,$base);

}
h5, .h5{
    font-size: px($h5-mob);
    font-size: rem($h5-mob,$base);

}
h6, .h6{
    font-size: px($h6-mob);
    font-size: rem($h6-mob,$base);

}
.lead{
    font-size: px($font-size-mob * 1.125);
    font-size: rem(($font-size-mob *1.125) ,$base);
    font-weight: 700;
    margin-left: auto;
    margin-right: auto;
}

p,ul,ol,blockquote,pre{
    margin: 0 0 px($font-size-mob) 0;
}

}