// Typography // Font face @each $font-face in OpenSans-CondLight, OpenSans-Light, opensans-regular, opensans-semibold, 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; line-height: 1.5; a { font-weight: inherit; } } h1 { @extend %xxlarge; @extend %title; line-height: 1.5; margin-bottom: 1rem; text-transform: uppercase; span { @extend %xxlarge; 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; max-width: 60%; } .project-name-short { display: inline-block; max-width: 40%; } .green { color: $primary; } .date { @include ellipsis(500px); color: $gray-light; } } h2 { @extend %xlarge; @extend %title; 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: 'y'; } .icon-filter:before { content: 'z'; } .icon-help:before { content: 'B'; } .icon-reload:before { content: 'C'; } .icon-writer:before { content: 'D'; } .icon-stats:before { content: 'E'; } .icon-floppy:before { content: 'F'; } .icon-warning-alt:before { content: 'H'; } .icon-video:before { content: 'I'; } .icon-bulk:before { content: 'K'; } .icon-vunfold:before { content: 'M'; } .icon-tasks:before { content: 'O'; } .icon-kanban:before { content: 'P'; } .icon-search:before { content: 'Q'; } .icon-wiki:before { content: 'L'; } .icon-team:before { content: 'T'; } .icon-vfold:before { content: 'N'; } .icon-issues:before { content: 'U'; } .icon-backlog:before { content: 'R'; } .icon-iocaine:before { content: 'S'; } .icon-closed-eye:before { content: 'V'; } .icon-open-eye:before { content: 'W'; } .icon-archive:before { content: 'X'; } .icon-capslock:before { content: 'Y'; } .icon-upload:before { content: 'Z'; } .icon-github:before { content: 'A'; } .icon-timeline:before { content: 'x'; } .icon-project:before { content: 'G'; } .icon-star-fill:before { content: 'J'; } .icon-star:before { content: '0'; }