// 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 { @extend %xlarge; @extend %light; line-height: 1.5; margin-bottom: 1rem; text-transform: uppercase; span { @extend %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 { @extend %larger; @extend %text; line-height: 1.2; margin-bottom: 1rem; } p { line-height: 1.5; margin: 0 0 20px; img { margin: 0; } } em { font-style: italic; } 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; } } // Taiga Icons [data-icon]::before { // scss-lint:disable ImportantRule 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 { // scss-lint:disable ImportantRule 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-bug::before { content: 'a'; } .icon-copy::before { content: 'b'; } .icon-minimize::before { content: 'c'; } .icon-maximize::before { content: 'd'; } .icon-comment::before { content: 'e'; } .icon-plus::before { content: 'f'; } .icon-attachments::before { content: 'g'; } .icon-edit::before { content: 'h'; } .icon-documents::before { content: 'i'; } .icon-delete::before { content: 'j'; } .icon-arrow-bottom::before { content: 'k'; } .icon-arrow-left::before { content: 'l'; } .icon-arrow-right::before { content: 'm'; } .icon-arrow-up::before { content: 'n'; } .icon-briefcase::before { content: 'o'; } .icon-caret-down::before { content: 'p'; } .icon-caret-up::before { content: 'q'; } .icon-check-square::before { content: 'r'; } .icon-notification-error::before { content: 's'; } .icon-settings::before { content: 't'; } .icon-document::before { content: 'u'; } .icon-warning::before { content: 'v'; } .icon-move::before { content: 'w'; } .icon-drag-v::before { content: 'x'; } .icon-filter::before { content: 'y'; } .icon-help::before { content: 'z'; } .icon-reload::before { content: 'A'; } .icon-writer::before { content: 'B'; } .icon-stats::before { content: 'C'; } .icon-floppy::before { content: 'D'; } .icon-warning-alt::before { content: 'E'; } .icon-video::before { content: 'F'; } .icon-bulk::before { content: 'G'; } .icon-vunfold::before { content: 'H'; } .icon-tasks::before { content: 'I'; } .icon-kanban::before { content: 'J'; } .icon-search::before { content: 'K'; } .icon-wiki::before { content: 'L'; } .icon-team::before { content: 'M'; } .icon-vfold::before { content: 'N'; } .icon-issues::before { content: 'O'; } .icon-iocaine::before { content: 'P'; } .icon-archive::before { content: 'Q'; } .icon-capslock::before { content: 'R'; } .icon-upload::before { content: 'S'; } .icon-github::before { content: 'T'; } .icon-timeline::before { content: 'U'; } .icon-scrum::before { content: 'V'; } .icon-project::before { content: 'W'; } .icon-heart::before { content: 'X'; } .icon-eye::before { content: 'Y'; }