//————————————————– // 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; }
}