// Typography

// Font face

@each $font-face in DroidSans, DroidSans-Bold, ostrichSans, OpenSans-CondLight-webfont, taiga {
    @font-face {
        font-family: '#{$font-face}';
        src: url('../fonts/#{$font-face}.eot?#iefix') format('embedded-opentype'),
        url('../fonts/#{$font-face}.woff') format('woff'),
        url('../fonts/#{$font-face}.ttf')  format('truetype'),
        url('../fonts/#{$font-face}.svg#{$font-face}') format('svg');
    }
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: $blackish;
    font-weight: normal;
    a {
        font-weight: inherit;
    }
}

// __Font Sizes__ //
%xsmall {font-size: .5rem;}
%small {font-size: .8rem;}
%medium {font-size: 1rem;}
%large {font-size: 1.2rem;}
%larger {font-size: 1.6rem;}
%xlarge {font-size: 2rem;}
%xxlarge {font-size: 3rem;}

// __Font Types__ //
%title {font-family: 'OpenSans-CondLight-webfont';}
%text {font-family: 'DroidSans';}
%bold {font-family: 'DroidSans-Bold';}
%taiga {font-family: 'taiga';}

h1 {
    @extend %xxlarge;
    @extend %title;
    line-height: 2.7rem;
    margin-bottom: 1rem;
    text-transform: uppercase;
    span {
        @include ellipsis(250px);
        display: inline;
        margin-right: .5rem;
    }
    .green {
        color: $green-taiga;
    }
    .date {
        color: $gray-light;
        @include ellipsis(500px);
    }
}

h2 {
    @extend %xlarge;
    @extend %title;
    margin-bottom: 1rem;
}

p {
    margin: 0 0 20px;
    img {
        margin: 0;
    }
  }

em { font-style: italic; }
strong {
    font-weight: bold;
}

hr {
    border: solid #ddd;
    border-width: 1px 0 0;
    clear: both;
    height: 0;
    margin: 10px 0 30px;
}

// __Links__

a,
a:visited {
    color: #333;
    text-decoration: none;
}

// Taiga Icons

[data-icon]:before {
    content: attr(data-icon);
    font-family: 'taiga' !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: normal !important;
    line-height: 1;
    speak: none;
    text-transform: none !important;
}

[class^='icon-']:before,
[class*=' icon-']:before {
    font-family: 'taiga' !important;
    -moz-osx-font-smoothing: grayscale;
    -webkit-font-smoothing: antialiased;
    font-style: normal !important;
    font-variant: normal !important;
    font-weight: normal !important;
    line-height: 1;
    speak: none;
    text-transform: none !important;
}

.icon-backlog:before {
    content: 'a';
}
.icon-issues:before {
    content: 'b';
}
.icon-kanban:before {
    content: 'c';
}
.icon-search:before {
    content: 'd';
}
.icon-video:before {
    content: 'e';
}
.icon-wiki:before {
    content: 'f';
}
.icon-settings:before {
    content: 'g';
}
.icon-move:before {
    content: 'i';
}
.icon-filter:before {
    content: 'j';
}
.icon-tag:before {
    content: 'k';
}
.icon-bulk:before {
    content: 'l';
}
.icon-arrow-up:before {
    content: 'h';
}
.icon-arrow-right:before {
    content: 'm';
}
.icon-arrow-left:before {
    content: 'n';
}
.icon-arrow-bottom:before {
    content: 'o';
}
.icon-edit:before {
    content: 'p';
}
.icon-delete:before {
    content: 'q';
}
.icon-iocaine:before {
    content: 'r';
}
.icon-drag-h:before {
    content: 's';
}
.icon-drag-v:before {
    content: 't';
}
.icon-fontawesome-webfont:before {
    content: 'u';
}
.icon-document:before {
    content: 'v';
}
.icon-clipboard-notes:before {
    content: 'w';
}
.icon-male:before {
    content: 'x';
}
.icon-plus:before {
    content: 'y';
}
.icon-attachment:before {
    content: 'A';
}
.icon-reload:before {
    content: 'z';
}
.icon-graph:before {
    content: 'B';
}
.icon-warning:before {
    content: 'C';
}
.icon-notification-success:before {
    content: 'D';
}
.icon-notification-error:before {
    content: 'E';
}
.icon-floppy:before {
    content: 'F';
}
.icon-github:before {
    content: 'G';
}
.icon-check-square:before {
    content: 'H';
}
