// Typography
// Font face

@each $font-face in
OpenSans-CondLight,
OpenSans-Light,
OpenSans-Regular,
OpenSans-Semibold {
    @font-face {
        font-family: '#{$font-face}';
        src: url('../fonts/#{$font-face}.ttf') format('truetype');
    }
}

@font-face {
    font-family: taiga; font-style: normal; font-weight: normal;
    src: url('../fonts/taiga.eot');
    src: url('../fonts/taiga.eot?') format('eot'),
        url('../fonts/taiga.woff') format('woff'),
        url('../fonts/taiga.ttf')  format('truetype');
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: $blackish;
    font-weight: normal;
    line-height: 1.5;

    a {
        font-weight: inherit;
    }
}

h1 {
    @include font-size(xlarge);
    @include font-type(light);
    line-height: 1.5;
    margin-bottom: 1rem;
    text-transform: uppercase;

    span {
        @include font-size(larger);
        margin-right: .5rem;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: bottom;
        white-space: nowrap;

        &.green,
        &:last-child {
            flex-shrink: 0;
        }
    }

    .project-name {
        display: inline-block;
        margin-bottom: 0;
    }

    .project-name-short {
        display: inline-block;
        max-width: 40%;
    }

    .green {
        color: $primary;
    }

    .date {
        @include ellipsis(500px);
        color: $gray-light;
    }
}

h2 {
    @include font-size(larger);
    @include font-type(text);
    line-height: 1.2;
    margin-bottom: 1rem;
}

p {
    line-height: 1.5;
    margin: 0 0 20px;

    img {
        margin: 0;
    }
}

em {
    font-style: italic;
}

small {
    @include font-size(x-small);
}

strong {
    font-weight: bold;
}

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

// __Links__
a,
a:visited {
    text-decoration: none;

    &:hover {
        transition: color .3s linear;
    }
}