taiga-front/app/styles/core/typography.scss

124 lines
1.9 KiB
SCSS
Executable File

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