Beautifully crafted timelines that are easy and intuitive to use. http://timeline.knightlab.com/
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
199 lines
3.6 KiB
199 lines
3.6 KiB
/* Typography.less |
|
* Headings, body text, lists, etc |
|
* ---------------------------------------------------------------------------------------- */ |
|
|
|
.vco-storyjs { |
|
font-size: @base-font; |
|
font-weight: normal; |
|
line-height: @base-line; |
|
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ |
|
-webkit-text-size-adjust: 100%; |
|
|
|
p { |
|
font-size: @base-font; |
|
font-weight: normal; |
|
line-height: @base-line; |
|
margin-bottom: @base-line; |
|
color: @color-feature-description; |
|
|
|
small { |
|
font-size: @base-font - 3; |
|
line-height: @base-line - 3; |
|
} |
|
} |
|
p:first-child { |
|
margin-top:@base-line; |
|
} |
|
.vco-navigation { |
|
p { |
|
color: @color-nav-description; |
|
} |
|
} |
|
.vco-feature { |
|
h3, h4, h5, h6 { |
|
margin-bottom: @base-space; |
|
} |
|
p { |
|
color: @color-feature-description; |
|
} |
|
blockquote, blockquote p { |
|
color:@color-feature-title; |
|
} |
|
} |
|
.date, .title { |
|
a { |
|
color: @color-nav-description; |
|
} |
|
} |
|
.hyphenate { |
|
.hyphens(auto); |
|
word-wrap:break-word; |
|
} |
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
font-weight: normal; |
|
color: @color-feature-title; |
|
text-transform: none; |
|
a { |
|
color: @color-nav-description; |
|
} |
|
small { |
|
color: @color-nav-title; |
|
} |
|
} |
|
h1.date, h2.date, h3.date, h4.date, h5.date, h6.date { |
|
font-weight: bold; |
|
} |
|
h2.start { |
|
//font-size: 42px; |
|
//line-height: 44px; |
|
font-size: 36px; |
|
line-height: 38px; |
|
|
|
margin-bottom: @base-space; |
|
} |
|
h1 { |
|
margin-bottom: @base-space; |
|
font-size: 32px; |
|
line-height: 34px; |
|
small { |
|
font-size: 18px; |
|
} |
|
} |
|
h2 { |
|
margin-bottom: @base-space; |
|
font-size: 28px; |
|
line-height: 30px; |
|
|
|
small { |
|
font-size: 14px; |
|
line-height: 16px; |
|
|
|
//margin-left:5px; |
|
} |
|
} |
|
h2.date { |
|
font-size: 16px; |
|
line-height:18px; |
|
margin-bottom: @base-space/4; |
|
color:@color-feature-date; |
|
|
|
//margin-bottom: @base-space; |
|
} |
|
h3, h4, h5, h6 { |
|
line-height: @base-line * 2; |
|
.active { |
|
color: @color-theme; |
|
} |
|
} |
|
h3 { |
|
font-size: 28px; |
|
line-height: 30px; |
|
//font-size: 24px; |
|
//line-height:26px; |
|
small { |
|
font-size: 14px; |
|
} |
|
} |
|
h4 { |
|
font-size: 20px; |
|
line-height: 22px; |
|
//font-size: 16px; |
|
//line-height:18px; |
|
small { |
|
font-size: 12px; |
|
} |
|
} |
|
h5 { |
|
font-size: 16px; |
|
line-height:18px; |
|
|
|
//font-size: 14px; |
|
//line-height:16px; |
|
} |
|
h6 { |
|
font-size: 13px; |
|
line-height:14px; |
|
text-transform: uppercase; |
|
} |
|
strong { |
|
font-weight:bold; |
|
font-style:inherit; |
|
} |
|
em { |
|
font-style: italic; |
|
font-weight: inherit; |
|
} |
|
Q { |
|
quotes: '„' '“'; |
|
font-style: italic; |
|
} |
|
|
|
/* BLOCKQUOTES |
|
================================================== */ |
|
blockquote, blockquote p { |
|
font-size: @base-font-large; |
|
line-height: @base-line-large; |
|
text-align:left; |
|
margin-bottom: 6px; |
|
padding-top: 10px; |
|
background-color:@white; |
|
color:@color-feature-title; |
|
|
|
} |
|
|
|
/* Caption and Credits |
|
================================================== */ |
|
.credit { |
|
color: @color-credit; |
|
text-align: right; |
|
font-size: 10px; |
|
line-height: 10px; |
|
display: block; |
|
margin: 0 auto; |
|
clear:both; |
|
} |
|
.caption { |
|
text-align:left; |
|
margin-top:5px; |
|
color: @color-caption; |
|
font-size: 11px; |
|
line-height: 14px; |
|
clear:both; |
|
} |
|
|
|
|
|
} |
|
|
|
/* Right to Left |
|
* ---------------------------------------------------------------------------------------- */ |
|
.vco-storyjs.vco-right-to-left { |
|
[dir=rtl] &, &[dir=rtl] { |
|
direction: ltr; |
|
} |
|
|
|
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, cite, code, del, dfn, em, img, q, s, samp, small, strike, strong, |
|
sub, sup, tt, var, dd, dl, dt, li, ol, ul, fieldset, form, label, legend, button, table, caption, tbody, tfoot, thead, tr, th, td, { |
|
direction: rtl; |
|
} |
|
}
|
|
|