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.
172 lines
3.1 KiB
172 lines
3.1 KiB
/* Typography.less |
|
* Headings, body text, lists, etc |
|
* ---------------------------------------------------------------------------------------- */ |
|
|
|
|
|
#timeline { |
|
//font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; |
|
font-family: @font-serif; |
|
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ |
|
-webkit-text-size-adjust: 100%; |
|
|
|
#font > .shorthand(normal,@base-font,@base-line); |
|
p { |
|
#font > .shorthand(normal,@base-font,@base-line); |
|
margin-bottom: @base-line; |
|
color: @color-feature-description; |
|
small { |
|
font-size: @base-font - 2; |
|
} |
|
} |
|
p:first-child { |
|
margin-top:@base-line; |
|
} |
|
.navigation { |
|
p { |
|
color: @color-nav-description; |
|
} |
|
} |
|
.feature { |
|
h3, h4, h5, h6 { |
|
margin-bottom: @base-space; |
|
} |
|
p { |
|
color: @color-feature-description; |
|
} |
|
} |
|
|
|
h1, h2, h3, h4, h5, h6 { |
|
font-weight: normal; |
|
color: @color-feature-title; |
|
a { |
|
color: @color-nav-description; |
|
} |
|
small { |
|
color: @color-nav-title; |
|
} |
|
} |
|
h1.date, h2.date, h3.date, h4.date, h5.date, h6.date { |
|
font-family: @font-sansserif; |
|
font-weight: bold; |
|
} |
|
h2.start { |
|
font-size: 42px; |
|
line-height: 44px; |
|
} |
|
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: 18px; |
|
//line-height: 20px; |
|
//color:@color-feature-date; |
|
//margin-bottom: @base-space; |
|
} |
|
h3, h4, h5, h6 { |
|
line-height: @base-line * 2; |
|
.active { |
|
color: @color-theme; |
|
} |
|
} |
|
h3 { |
|
font-size: 24px; |
|
line-height:24px; |
|
small { |
|
font-size: 14px; |
|
} |
|
} |
|
h4 { |
|
font-size: 16px; |
|
line-height:18px; |
|
small { |
|
font-size: 12px; |
|
} |
|
} |
|
h5 { |
|
font-size: 14px; |
|
line-height:16px; |
|
} |
|
h6 { |
|
font-size: 13px; |
|
line-height:14px; |
|
text-transform: uppercase; |
|
} |
|
strong { |
|
font-weight:bold; |
|
} |
|
/* |
|
blockquote { |
|
border-top: 1px solid @color-dark-fifth; |
|
border-bottom: 1px solid @color-dark-fifth; |
|
padding-top:@base-space; |
|
padding-bottom:@base-space; |
|
margin-left:@base-space; |
|
margin-right:@base-space; |
|
//border-style: none/hidden/dotted/dashed/solid/double/groove/ridge/inset/outset; |
|
font-size: @base-font*2; |
|
line-height: @base-line; |
|
font-family: @font-sansserif; |
|
color:@color-feature-description; |
|
p:first-child { |
|
margin-top:0px; |
|
} |
|
p { |
|
|
|
font-size: @base-font; |
|
line-height: @base-line; |
|
margin-bottom: 6px; |
|
padding-top: 10px; |
|
margin-left:@base-space; |
|
margin-right:@base-space; |
|
font-family: @font-serif; |
|
color:@color-feature-title; |
|
font-style: italic; |
|
|
|
} |
|
} |
|
*/ |
|
Q { |
|
quotes: '„' '“'; |
|
font-style: italic; |
|
} |
|
|
|
/* Caption and Credits |
|
================================================== */ |
|
.credit, .caption { |
|
font-family: @font-sansserif; |
|
|
|
} |
|
.credit { |
|
color: @color-credit; |
|
text-align: right; |
|
font-size: 10px; |
|
line-height: 10px; |
|
display: block; |
|
margin: 0 auto; |
|
} |
|
.caption { |
|
text-align:left; |
|
margin-top:5px; |
|
color: @color-caption; |
|
font-size: 11px; |
|
line-height: 14px; |
|
} |
|
|
|
|
|
} |