Zach Wise
13 years ago
commit
b8452caa26
70 changed files with 8273 additions and 0 deletions
Binary file not shown.
@ -0,0 +1,172 @@
|
||||
|
||||
{ |
||||
"timeline": |
||||
{ |
||||
"headline":"The Kitchen Sink, Évier de la Cuisine ", |
||||
"type":"default", |
||||
"startDate":"1888", |
||||
"text":"An example of the different kinds of stuff you can do.", |
||||
"asset": |
||||
{ |
||||
"media":"http://2.bp.blogspot.com/-dxJbW0CG8Zs/TmkoMA5-cPI/AAAAAAAAAqw/fQpsz9GpFdo/s1600/voyage-dans-la-lune-1902-02-g.jpg", |
||||
"credit":"", |
||||
"caption":"" |
||||
}, |
||||
"date": [ |
||||
{ |
||||
"startDate":"2012,1,18", |
||||
"headline":"YouTube", |
||||
"text":"To add a YouTube video, just add a link to it.", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/yRvJylbSg7o", |
||||
"credit":"", |
||||
"caption":"Directed and Edited by Matt Mayer, Produced by Seth Keim, Written by Eliot Glazer. Featuring Eliot and Ilana Glazer, who are siblings, not married." |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"1980,1,18", |
||||
"headline":"Google Map", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://maps.google.com/?ll=42.054932,-87.674654&spn=0.014785,0.023754&hnear=1630+Lake+Ave,+Wilmette,+Illinois+60091&t=v&z=16", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2000,1,18", |
||||
"headline":"Google Map", |
||||
"text":"Just add the link to the map!", |
||||
"asset": |
||||
{ |
||||
"media":"http://maps.google.com/maps?q=Northwestern+University,+Sheridan+Road,+Evanston,+IL&hl=en&ll=42.056972,-87.676907&spn=0.02957,0.047507&sll=42.054932,-87.674654&sspn=0.014785,0.023754&oq=northwestern+&t=v&hq=Northwestern+University,+Sheridan+Road,+Evanston,+IL&z=15", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
|
||||
{ |
||||
"startDate":"1899", |
||||
"headline":"Le portrait mystérieux ", |
||||
"text":"To add a YouTube video, just add a link to it.", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/lIvftGgps24", |
||||
"credit":"Georges Méliès", |
||||
"caption":"Le portrait mystérieux" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"1902", |
||||
"headline":"L'oeuf du sorcier", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/JdBqHgwN7Pg", |
||||
"credit":"Georges Méliès", |
||||
"caption":"L'oeuf du sorcier" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"1905", |
||||
"headline":"Le juif errant", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/SvmM_YSnWX8", |
||||
"credit":"Georges Méliès", |
||||
"caption":"Le juif errant" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"1903", |
||||
"headline":"Le tonnerre de Jupiter", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/nIylL8ufx3Y", |
||||
"credit":"Georges Méliès", |
||||
"caption":"Le tonnerre de Jupiter" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"1980,2,7", |
||||
"headline":"Flickr", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://www.flickr.com/photos/zachwise/6856858425/in/photostream", |
||||
"credit":"Zach Wise", |
||||
"caption":"Feels like Siberia again" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"1990,2,7", |
||||
"headline":"Flickr", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://www.flickr.com/photos/zachwise/6687123779/in/photostream", |
||||
"credit":"Zach Wise", |
||||
"caption":"Enjoying the snow while sheltered at the train station" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,2,7", |
||||
"headline":"A Tweet", |
||||
"text":"To add a tweet, just add the link.", |
||||
"asset": |
||||
{ |
||||
"media":"https://twitter.com/#!/neonmarg/status/167006310850760706", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
|
||||
{ |
||||
"startDate":"2012,1,18", |
||||
"headline":"SoundCloud ", |
||||
"text":"Just add a link to the track", |
||||
"asset": |
||||
{ |
||||
"media":"http://soundcloud.com/radiohead/radiohead_separator-anstam-rmx", |
||||
"credit":"Radiohead Separator - Anstam RMX", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2011,12,23", |
||||
"headline":"Vimeo", |
||||
"text":"<p>Whitestone Motion Pictures proudly presents ‘Jack and the Dustbowl’, a short film about overcoming adversity and making the impossible, possible.</p><p>Jack Spriggs, a poor dust bowl farmer from Alabama, is determined to keep his family’s land. Set during the Great Depression, record heat waves and over-farming have turned the once fertile soil into worthless dust. Refusing to become a victim of his circumstances, Jack embraces his surroundings and digs in. Jack’s tenacious spirit and ingenuity will either keep his family together or he'll lose everything trying.</p>", |
||||
"asset": |
||||
{ |
||||
"media":"https://vimeo.com/34724990", |
||||
"credit":"Whitestone Motion Pictures", |
||||
"caption":"Whitestone Motion Pictures proudly presents ‘Jack and the Dustbowl’, a short film about overcoming adversity and making the impossible, possible." |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2011,2,10", |
||||
"headline":"Some Tweet Response also", |
||||
"asset": |
||||
{ |
||||
"media":"http://twitter.com/alykat/status/164184609519697920", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2011,12,10", |
||||
"headline":"Some Tweet Response", |
||||
"asset": |
||||
{ |
||||
"media":"http://twitter.com/ArjunaSoriano/status/164181156147900416", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
} |
||||
] |
||||
} |
||||
} |
||||
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Kitchen Sink Timeline</title> |
||||
<meta name="description" content="Template Description"> |
||||
<meta name="author" content="Zach Wise"> |
||||
|
||||
<!-- Set the viewport for mobile devices --> |
||||
<!-- <meta name="viewport" content="width=device-width,maximum-scale=1.0" /> --> |
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"/> |
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements --> |
||||
<!--[if lt IE 9]> |
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> |
||||
<![endif]--> |
||||
|
||||
<!-- CSS --> |
||||
<link href="../../timeline.css" rel="stylesheet"> |
||||
|
||||
<!-- JavaScript --> |
||||
<script type="text/javascript" src="../../jquery-min.js"></script> |
||||
<!-- <script type="text/javascript" src="jquery.mobile-1.0.min.js"></script> --> |
||||
<script type="text/javascript" src="../../timeline-min.js"></script> |
||||
<script> |
||||
$(document).ready(function() { |
||||
timeline = new VMM.Timeline(); |
||||
timeline.init("data.json"); |
||||
}); |
||||
</script> |
||||
|
||||
<!-- Icons --> |
||||
<link rel="shortcut icon" href="../../gfx/favicons/favicon.ico"> |
||||
<link rel="apple-touch-icon" href="../../gfx/favicons/apple-touch-icon.png"> |
||||
<link rel="apple-touch-icon" sizes="72x72" href="../../gfx/favicons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon" sizes="114x114" href="../../gfx/favicons/apple-touch-icon-114x114.png"> |
||||
<script type="text/javascript"> |
||||
|
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-537357-18']); |
||||
_gaq.push(['_setDomainName', 'verite.co']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
|
||||
</script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="timeline"></div> |
||||
</body> |
||||
</html> |
||||
Binary file not shown.
@ -0,0 +1,59 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Timeline Google Spreadsheet Template</title> |
||||
<meta name="description" content="Template Description"> |
||||
<meta name="author" content="Zach Wise"> |
||||
|
||||
<!-- Set the viewport for mobile devices --> |
||||
<!-- <meta name="viewport" content="width=device-width,maximum-scale=1.0" /> --> |
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"/> |
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements --> |
||||
<!--[if lt IE 9]> |
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> |
||||
<![endif]--> |
||||
|
||||
<!-- CSS --> |
||||
<link href="../../timeline.css" rel="stylesheet"> |
||||
|
||||
<!-- JavaScript --> |
||||
<script type="text/javascript" src="../../jquery-min.js"></script> |
||||
<!-- <script type="text/javascript" src="jquery.mobile-1.0.min.js"></script> --> |
||||
<script type="text/javascript" src="../../timeline-min.js"></script> |
||||
<script> |
||||
$(document).ready(function() { |
||||
timeline = new VMM.Timeline(); |
||||
timeline.init("https://docs.google.com/a/digitalartwork.net/spreadsheet/ccc?hl=en_US&key=0Agl_Dv6iEbDadGRwZjJSRTR4RHJpanE2U3lkb0lyYUE&rm=full#gid=0"); |
||||
}); |
||||
</script> |
||||
|
||||
<!-- Icons --> |
||||
<link rel="shortcut icon" href="../../gfx/favicons/favicon.ico"> |
||||
<link rel="apple-touch-icon" href="../../gfx/favicons/apple-touch-icon.png"> |
||||
<link rel="apple-touch-icon" sizes="72x72" href="../../gfx/favicons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon" sizes="114x114" href="../../gfx/favicons/apple-touch-icon-114x114.png"> |
||||
|
||||
<!-- Google Analytics --> |
||||
<script type="text/javascript"> |
||||
|
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-537357-18']); |
||||
_gaq.push(['_setDomainName', 'verite.co']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
|
||||
</script> |
||||
|
||||
</head> |
||||
|
||||
<body> |
||||
<div id="timeline"></div> |
||||
</body> |
||||
</html> |
||||
Binary file not shown.
@ -0,0 +1,180 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Elizabeth Taylor 1932-2011 - Timeline</title> |
||||
<meta name="description" content="Template Description"> |
||||
<meta name="author" content="Zach Wise"> |
||||
|
||||
<!-- Set the viewport for mobile devices --> |
||||
<!-- <meta name="viewport" content="width=device-width,maximum-scale=1.0" /> --> |
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"/> |
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements --> |
||||
<!--[if lt IE 9]> |
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> |
||||
<![endif]--> |
||||
|
||||
<!-- CSS --> |
||||
<link href="../../timeline.css" rel="stylesheet"> |
||||
|
||||
<!-- JavaScript --> |
||||
<script type="text/javascript" src="../../jquery-min.js"></script> |
||||
<!-- <script type="text/javascript" src="jquery.mobile-1.0.min.js"></script> --> |
||||
<script type="text/javascript" src="../../timeline-min.js"></script> |
||||
<script> |
||||
$(document).ready(function() { |
||||
timeline = new VMM.Timeline(); |
||||
timeline.init(); |
||||
}); |
||||
</script> |
||||
|
||||
<!-- Icons --> |
||||
<link rel="shortcut icon" href="../../gfx/favicons/favicon.ico"> |
||||
<link rel="apple-touch-icon" href="../../gfx/favicons/apple-touch-icon.png"> |
||||
<link rel="apple-touch-icon" sizes="72x72" href="../../gfx/favicons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon" sizes="114x114" href="../../gfx/favicons/apple-touch-icon-114x114.png"> |
||||
<script type="text/javascript"> |
||||
|
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-537357-18']); |
||||
_gaq.push(['_setDomainName', 'verite.co']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
|
||||
</script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="timeline"> |
||||
|
||||
<section> <!-- Timeline Start Screen --> |
||||
<time>1977,5,11</time> <!-- Timeline Begins Date --> |
||||
<h2>The Main Timeline Headline</h2> <!-- Main Headline --> |
||||
<article> <!-- Main Text --> |
||||
<p>The main text goes here. You can have p tags or anything really.</p> |
||||
</article> |
||||
<figure> |
||||
<img src="../taylor/final.jpg"> <!-- Media, can also be a link to youtube video etc (optional) --> |
||||
<cite>John Doe/Millennium Magazine</cite> <!-- Credit for media (optional) --> |
||||
<figcaption>Caption goes here.</figcaption> <!-- Caption for media (optional) --> |
||||
</figure> |
||||
</section> |
||||
|
||||
<ul> |
||||
|
||||
<!-- Event --> |
||||
<li> |
||||
<time>1978,5,11</time> <!-- Event Date --> |
||||
<time>1978,8,11</time> <!-- End of Event (optional) --> |
||||
<h3>Headline Goes Here</h3> <!-- Headline --> |
||||
<article> <!-- Main Text --> |
||||
<p>The main text goes here. You can have p tags too.</p> |
||||
</article> |
||||
<figure> |
||||
<img src="../taylor/final.jpg"> <!-- Media, can also be a link to youtube video etc (optional) --> |
||||
<cite>John Doe/Millennium Magazine</cite> <!-- Credit for media (optional) --> |
||||
<figcaption>Caption goes here.</figcaption> <!-- Caption for media (optional) --> |
||||
</figure> |
||||
</li> |
||||
<!-- / Event --> |
||||
|
||||
<li> |
||||
<time>1978,5,13</time> |
||||
<time>1978,5,19</time> |
||||
<h3>Headline Goes Here</h3> |
||||
<article> |
||||
<p>The main text goes here. You can have p tags too.</p> |
||||
</article> |
||||
<figure> |
||||
<a href="http://youtu.be/vjVfu8-Wp6s">Anything</a> |
||||
<cite>John Doe/Millennium Magazine</cite> |
||||
<figcaption>Caption goes here.</figcaption> |
||||
</figure> |
||||
</li> |
||||
<li> |
||||
<time>1978,5,16</time> |
||||
<time>1978,5,11</time> |
||||
<h3>Headline Goes Here</h3> |
||||
<article> |
||||
<p>The main text goes here. You can have p tags too.</p> |
||||
</article> |
||||
<figure> |
||||
<img src="../taylor/final.jpg"> |
||||
<cite>John Doe/Millennium Magazine</cite> |
||||
<figcaption>Caption goes here.</figcaption> |
||||
</figure> |
||||
</li> |
||||
<li> |
||||
<time>1978,5,18</time> |
||||
<h3>Headline Goes Here</h3> |
||||
<article> |
||||
<p>The main text goes here. You can have p tags too.</p> |
||||
</article> |
||||
<figure> |
||||
<img src="../taylor/final.jpg"> |
||||
<cite>John Doe/Millennium Magazine</cite> |
||||
<figcaption>Caption goes here.</figcaption> |
||||
</figure> |
||||
</li> |
||||
<li> |
||||
<time>1978,6,18</time> |
||||
<h3>Headline Goes Here</h3> |
||||
<article> |
||||
<p>The main text goes here. You can have p tags too.</p> |
||||
</article> |
||||
<figure> |
||||
<img src="../taylor/final.jpg"> |
||||
<cite>John Doe/Millennium Magazine</cite> |
||||
<figcaption>Caption goes here.</figcaption> |
||||
</figure> |
||||
</li> |
||||
<li> |
||||
<time>1978,5,19</time> |
||||
<h3>Headline Goes Here</h3> |
||||
<article> |
||||
<p>The main text goes here. You can have p tags too.</p> |
||||
</article> |
||||
<figure> |
||||
<img src="../taylor/final.jpg"> |
||||
<cite>John Doe/Millennium Magazine</cite> |
||||
<figcaption>Caption goes here.</figcaption> |
||||
</figure> |
||||
</li> |
||||
<li> |
||||
<time>1978,8,18</time> |
||||
<h3>Headline Goes Here</h3> |
||||
<article> |
||||
<p>The main text goes here. You can have p tags too.</p> |
||||
</article> |
||||
<figure> |
||||
<img src="../taylor/final.jpg"> |
||||
<cite>John Doe/Millennium Magazine</cite> |
||||
<figcaption>Caption goes here.</figcaption> |
||||
</figure> |
||||
</li> |
||||
<li> |
||||
<time>1979,8,18</time> |
||||
<h3>Headline Goes Here</h3> |
||||
<article> |
||||
<p>The main text goes here. You can have p tags too.</p> |
||||
</article> |
||||
<figure> |
||||
<img src="../taylor/final.jpg"> |
||||
<cite>John Doe/Millennium Magazine</cite> |
||||
<figcaption>Caption goes here.</figcaption> |
||||
</figure> |
||||
</li> |
||||
</ul> |
||||
|
||||
|
||||
</div> |
||||
|
||||
|
||||
</body> |
||||
</html> |
||||
@ -0,0 +1,248 @@
|
||||
|
||||
{ |
||||
"timeline": |
||||
{ |
||||
"headline":"The Kitchen Sink", |
||||
"type":"default", |
||||
"startDate":"2011,9,1", |
||||
"text":"An example of the different kinds of stuff you can do.", |
||||
"date": [ |
||||
{ |
||||
"startDate":"2012,1,26", |
||||
"headline":"Sh*t Politicians Say", |
||||
"text":"<p>Sh*t Politicians Say landed just hours before Thursday night’s Republican presidential debate and stars actor Joe Leon. In true political fashion, his character rattles off common jargon heard from people running for office.</p><p>Do these ring a bell? Moral fiber, family values, trust me, three-point plan, earmarks, tough question, children are our future, Washington outsider, jobs, my opponent — all sound familiar.</p>", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/u4XpeU9erbg", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,10", |
||||
"headline":"Sh*t Nobody Says", |
||||
"text":"<p>Have you ever heard someone say “can I burn a copy of your Nickelback CD?” or “my Bazooka gum still has flavor!” Nobody says that.</p>", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/f-x8t0JOnVw", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,26", |
||||
"headline":"Sh*t Chicagoans Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/Ofy5gNkKGOo", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2011,12,12", |
||||
"headline":"Sh*t Girls Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/u-yLGIH7W9Y", |
||||
"credit":"", |
||||
"caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,4", |
||||
"headline":"Sh*t Broke People Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/zyyalkHjSjo", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
|
||||
{ |
||||
"startDate":"2012,1,4", |
||||
"headline":"Sh*t Silicon Valley Says", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/BR8zFANeBGQ", |
||||
"credit":"", |
||||
"caption":"written, filmed, and edited by Kate Imbach & Tom Conrad" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2011,12,25", |
||||
"headline":"Sh*t Vegans Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/OmWFnd-p0Lw", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,23", |
||||
"headline":"Sh*t Graphic Designers Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/KsT3QTmsN5Q", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2011,12,30", |
||||
"headline":"Sh*t Wookiees Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/vJpBCzzcSgA", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,17", |
||||
"headline":"Sh*t People Say About Sh*t People Say Videos", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/c9ehQ7vO7c0", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,20", |
||||
"headline":"Sh*t Social Media Pros Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/eRQe-BT9g_U", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,11", |
||||
"headline":"Sh*t Old People Say About Computers", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/HRmc5uuoUzA", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,11", |
||||
"headline":"Sh*t College Freshmen Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/rwozXzo0MZk", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2011,12,16", |
||||
"headline":"Sh*t Girls Say - Episode 2", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/kbovd-e-hRg", |
||||
"credit":"", |
||||
"caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2011,12,24", |
||||
"headline":"Sh*t Girls Say - Episode 3 Featuring Juliette Lewis", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/bDHUhT71JN8", |
||||
"credit":"", |
||||
"caption":"Writers & Creators: Kyle Humphrey & Graydon Sheppard" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,27", |
||||
"headline":"Sh*t Web Designers Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/MEOb_meSHhQ", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,12", |
||||
"headline":"Sh*t Hipsters Say", |
||||
"text":"No meme is complete without a bit of hipster-bashing.", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/FUhrSVyu0Kw", |
||||
"credit":"", |
||||
"caption":"Written, Directed, Conceptualized and Performed by Carrie Valentine and Jessica Katz" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,6", |
||||
"headline":"Sh*t Cats Say", |
||||
"text":"No meme is complete without cats. This had to happen, obviously.", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/MUX58Vi-YLg", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2012,1,21", |
||||
"headline":"Sh*t Cyclists Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/GMCkuqL9IcM", |
||||
"credit":"", |
||||
"caption":"Video script, production, and editing by Allen Krughoff of Hardcastle Photography" |
||||
} |
||||
}, |
||||
{ |
||||
"startDate":"2011,12,30", |
||||
"headline":"Sh*t Yogis Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/IMC1_RH_b3k", |
||||
"credit":"", |
||||
"caption":"" |
||||
} |
||||
}, |
||||
|
||||
|
||||
|
||||
|
||||
{ |
||||
"startDate":"2012,1,18", |
||||
"headline":"Sh*t New Yorkers Say", |
||||
"text":"", |
||||
"asset": |
||||
{ |
||||
"media":"http://youtu.be/yRvJylbSg7o", |
||||
"credit":"", |
||||
"caption":"Directed and Edited by Matt Mayer, Produced by Seth Keim, Written by Eliot Glazer. Featuring Eliot and Ilana Glazer, who are siblings, not married." |
||||
} |
||||
} |
||||
] |
||||
} |
||||
} |
||||
@ -0,0 +1,56 @@
|
||||
<!DOCTYPE html> |
||||
<html lang="en"> |
||||
<head> |
||||
<meta charset="utf-8"> |
||||
<title>Timeline JSON Template</title> |
||||
<meta name="description" content="Template Description"> |
||||
<meta name="author" content="Zach Wise"> |
||||
|
||||
<!-- Set the viewport for mobile devices --> |
||||
<!-- <meta name="viewport" content="width=device-width,maximum-scale=1.0" /> --> |
||||
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> |
||||
<meta name="apple-mobile-web-app-capable" content="yes"/> |
||||
<!-- Le HTML5 shim, for IE6-8 support of HTML elements --> |
||||
<!--[if lt IE 9]> |
||||
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script> |
||||
<![endif]--> |
||||
|
||||
<!-- CSS --> |
||||
<link href="../../timeline.css" rel="stylesheet"> |
||||
|
||||
<!-- JavaScript --> |
||||
<script type="text/javascript" src="../../jquery-min.js"></script> |
||||
<!-- <script type="text/javascript" src="jquery.mobile-1.0.min.js"></script> --> |
||||
<script type="text/javascript" src="../../timeline-min.js"></script> |
||||
<script> |
||||
$(document).ready(function() { |
||||
timeline = new VMM.Timeline(); |
||||
timeline.init("data.json"); |
||||
}); |
||||
</script> |
||||
|
||||
<!-- Icons --> |
||||
<link rel="shortcut icon" href="../../gfx/favicons/favicon.ico"> |
||||
<link rel="apple-touch-icon" href="../../gfx/favicons/apple-touch-icon.png"> |
||||
<link rel="apple-touch-icon" sizes="72x72" href="../../gfx/favicons/apple-touch-icon-72x72.png"> |
||||
<link rel="apple-touch-icon" sizes="114x114" href="../../gfx/favicons/apple-touch-icon-114x114.png"> |
||||
<script type="text/javascript"> |
||||
|
||||
var _gaq = _gaq || []; |
||||
_gaq.push(['_setAccount', 'UA-537357-18']); |
||||
_gaq.push(['_setDomainName', 'verite.co']); |
||||
_gaq.push(['_trackPageview']); |
||||
|
||||
(function() { |
||||
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true; |
||||
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js'; |
||||
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s); |
||||
})(); |
||||
|
||||
</script> |
||||
</head> |
||||
|
||||
<body> |
||||
<div id="timeline"></div> |
||||
</body> |
||||
</html> |
||||
File diff suppressed because one or more lines are too long
Binary file not shown.
@ -0,0 +1,20 @@
|
||||
#timeline h1,#timeline h2,#timeline h3,#timeline h4,#timeline h5,#timeline h6,#timeline p,#timeline blockquote,#timeline pre,#timeline a,#timeline abbr,#timeline acronym,#timeline address,#timeline cite,#timeline code,#timeline del,#timeline dfn,#timeline em,#timeline img,#timeline q,#timeline s,#timeline samp,#timeline small,#timeline strike,#timeline strong,#timeline sub,#timeline sup,#timeline tt,#timeline var,#timeline dd,#timeline dl,#timeline dt,#timeline li,#timeline ol,#timeline ul,#timeline fieldset,#timeline form,#timeline label,#timeline legend,#timeline button,#timeline table,#timeline caption,#timeline tbody,#timeline tfoot,#timeline thead,#timeline tr,#timeline th,#timeline td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;} |
||||
#timeline table{border-collapse:collapse;border-spacing:0;} |
||||
#timeline ol,#timeline ul{list-style:none;} |
||||
#timeline q:before,#timeline q:after,#timeline blockquote:before,#timeline blockquote:after{content:"";} |
||||
#timeline a:focus{outline:thin dotted;} |
||||
#timeline a:hover,#timeline a:active{outline:0;} |
||||
#timeline article,#timeline aside,#timeline details,#timeline figcaption,#timeline figure,#timeline footer,#timeline header,#timeline hgroup,#timeline nav,#timeline section{display:block;} |
||||
#timeline audio,#timeline canvas,#timeline video{display:inline-block;*display:inline;*zoom:1;} |
||||
#timeline audio:not([controls]){display:none;} |
||||
#timeline sub,#timeline sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} |
||||
#timeline sup{top:-0.5em;} |
||||
#timeline sub{bottom:-0.25em;} |
||||
#timeline img{border:0;-ms-interpolation-mode:bicubic;} |
||||
#timeline button,#timeline input,#timeline select,#timeline textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} |
||||
#timeline button,#timeline input{line-height:normal;*overflow:visible;} |
||||
#timeline button::-moz-focus-inner,#timeline input::-moz-focus-inner{border:0;padding:0;} |
||||
#timeline button,#timeline input[type="button"],#timeline input[type="reset"],#timeline input[type="submit"]{cursor:pointer;-webkit-appearance:button;} |
||||
#timeline input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} |
||||
#timeline input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} |
||||
#timeline textarea{overflow:auto;vertical-align:top;} |
||||
@ -0,0 +1,119 @@
|
||||
#timeline h1,#timeline h2,#timeline h3,#timeline h4,#timeline h5,#timeline h6,#timeline p,#timeline blockquote,#timeline pre,#timeline a,#timeline abbr,#timeline acronym,#timeline address,#timeline cite,#timeline code,#timeline del,#timeline dfn,#timeline em,#timeline img,#timeline q,#timeline s,#timeline samp,#timeline small,#timeline strike,#timeline strong,#timeline sub,#timeline sup,#timeline tt,#timeline var,#timeline dd,#timeline dl,#timeline dt,#timeline li,#timeline ol,#timeline ul,#timeline fieldset,#timeline form,#timeline label,#timeline legend,#timeline button,#timeline table,#timeline caption,#timeline tbody,#timeline tfoot,#timeline thead,#timeline tr,#timeline th,#timeline td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;} |
||||
#timeline table{border-collapse:collapse;border-spacing:0;} |
||||
#timeline ol,#timeline ul{list-style:none;} |
||||
#timeline q:before,#timeline q:after,#timeline blockquote:before,#timeline blockquote:after{content:"";} |
||||
#timeline a:focus{outline:thin dotted;} |
||||
#timeline a:hover,#timeline a:active{outline:0;} |
||||
#timeline article,#timeline aside,#timeline details,#timeline figcaption,#timeline figure,#timeline footer,#timeline header,#timeline hgroup,#timeline nav,#timeline section{display:block;} |
||||
#timeline audio,#timeline canvas,#timeline video{display:inline-block;*display:inline;*zoom:1;} |
||||
#timeline audio:not([controls]){display:none;} |
||||
#timeline sub,#timeline sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} |
||||
#timeline sup{top:-0.5em;} |
||||
#timeline sub{bottom:-0.25em;} |
||||
#timeline img{border:0;-ms-interpolation-mode:bicubic;} |
||||
#timeline button,#timeline input,#timeline select,#timeline textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} |
||||
#timeline button,#timeline input{line-height:normal;*overflow:visible;} |
||||
#timeline button::-moz-focus-inner,#timeline input::-moz-focus-inner{border:0;padding:0;} |
||||
#timeline button,#timeline input[type="button"],#timeline input[type="reset"],#timeline input[type="submit"]{cursor:pointer;-webkit-appearance:button;} |
||||
#timeline input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} |
||||
#timeline input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} |
||||
#timeline textarea{overflow:auto;vertical-align:top;} |
||||
#timeline{font-family:"Georgia",Times New Roman,Times,serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;font-size:14px;font-weight:normal;line-height:20px;}#timeline p{font-size:14px;font-weight:normal;line-height:20px;margin-bottom:20px;color:#666666;}#timeline p small{font-size:12px;} |
||||
#timeline p:first-child{margin-top:20px;} |
||||
#timeline .navigation p{color:#999999;} |
||||
#timeline .feature h3,#timeline .feature h4,#timeline .feature h5,#timeline .feature h6{margin-bottom:15px;} |
||||
#timeline .feature p{color:#666666;} |
||||
#timeline h1,#timeline h2,#timeline h3,#timeline h4,#timeline h5,#timeline h6{font-weight:normal;color:#000000;}#timeline h1 small,#timeline h2 small,#timeline h3 small,#timeline h4 small,#timeline h5 small,#timeline h6 small{color:#999999;} |
||||
#timeline h1.date,#timeline h2.date,#timeline h3.date,#timeline h4.date,#timeline h5.date,#timeline h6.date{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;} |
||||
#timeline h1{margin-bottom:15px;font-size:28px;line-height:30px;}#timeline h1 small{font-size:18px;} |
||||
#timeline h2{margin-bottom:15px;font-size:24px;line-height:28px;}#timeline h2 small{font-size:14px;} |
||||
#timeline h3,#timeline h4,#timeline h5,#timeline h6{line-height:40px;}#timeline h3 .active,#timeline h4 .active,#timeline h5 .active,#timeline h6 .active{color:#ff0000;} |
||||
#timeline h3{font-size:18px;line-height:22px;}#timeline h3 small{font-size:14px;} |
||||
#timeline h4{font-size:16px;line-height:18px;}#timeline h4 small{font-size:12px;} |
||||
#timeline h5{font-size:14px;line-height:16px;} |
||||
#timeline h6{font-size:13px;line-height:14px;text-transform:uppercase;} |
||||
#timeline .credit,#timeline .caption{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} |
||||
#timeline .credit{color:#999999;text-align:right;font-size:10px;line-height:5px;display:block;margin:0 auto;} |
||||
#timeline .caption{text-align:left;margin-top:10px;color:#666666;font-size:11px;line-height:14px;} |
||||
html,body{height:100%;padding:0px;margin:0px;} |
||||
#timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#ffffff;position:absolute;overflow:hidden;}#timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:2000;width:100%;height:100%;background-color:#e9e9e9;border:1px solid #cccccc;}#timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:28px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;text-transform:uppercase;line-height:36px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;} |
||||
#timeline .container.main{position:absolute;top:0px: left:0px;padding-bottom:3px;padding-top:15px;width:auto;height:auto;margin:0px;clear:both;} |
||||
#timeline img,#timeline embed,#timeline object,#timeline video,#timeline iframe{max-width:100%;} |
||||
#timeline img{max-height:100%;} |
||||
#timeline a{color:#0069d6;text-decoration:none;} |
||||
#timeline a:hover{color:#00438a;text-decoration:underline;} |
||||
#timeline .twitter{max-width:500px;background-color:#ffffff;margin-left:auto;margin-right:auto;}#timeline .twitter blockquote{font-size:14px;line-height:20px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#666666;}#timeline .twitter blockquote p{font-size:28px;line-height:36px;margin-bottom:6px;padding-top:10px;background-color:#ffffff;font-family:"Georgia",Times New Roman,Times,serif;color:#000000;} |
||||
#timeline .twitter a{color:#0084b4;text-decoration:none;} |
||||
#timeline .twitter a:hover{color:#004c68;text-decoration:underline;} |
||||
#timeline .thumbnail{width:24px;height:24px;overflow:hidden;float:left;margin-right:5px;border:1px solid #cccccc;} |
||||
#timeline .thumbnail.twitter{background-image:url(gfx/icons/twitter.png);background-repeat:no-repeat;} |
||||
#timeline .thumbnail.vimeo{background-image:url(gfx/icons/vimeo.png);background-repeat:no-repeat;} |
||||
#timeline .thumbnail.youtube{background-image:url(gfx/icons/youtube.png);background-repeat:no-repeat;} |
||||
#timeline .zFront{z-index:500;} |
||||
#timeline{}#timeline .slider .slider-container-mask{width:720px;height:400px;overflow:hidden;position:relative;margin-right:100px;margin-left:100px;display:block;margin-left:auto;margin-right:auto;}#timeline .slider .slider-container-mask .slider-container{position:absolute;top:0px;left:-2160px;background-color:#ffffff;}#timeline .slider .slider-container-mask .slider-container .slider-item-container .slider-item{width:720px;top:0px;position:absolute;} |
||||
#timeline .slider .nav-previous,#timeline .slider .nav-next{position:absolute;top:0px;width:100px;color:#cccccc;font-size:11px;}#timeline .slider .nav-previous .nav-container,#timeline .slider .nav-next .nav-container{height:100px;position:absolute;} |
||||
#timeline .slider .nav-previous .icon,#timeline .slider .nav-next .icon{margin-bottom:15px;} |
||||
#timeline .slider .nav-previous .date,#timeline .slider .nav-next .date{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:bold;line-height:20px;text-transform:uppercase;margin-bottom:5px;} |
||||
#timeline .slider .nav-previous .date,#timeline .slider .nav-next .date,#timeline .slider .nav-previous .title,#timeline .slider .nav-next .title{line-height:14px;} |
||||
#timeline .slider .nav-previous:hover,#timeline .slider .nav-next:hover{color:#333333;cursor:pointer;} |
||||
#timeline .slider .nav-previous{float:left;text-align:left;}#timeline .slider .nav-previous .icon{margin-left:10px;padding-left:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAAB1SURBVHjafNFXDsAgDAPQAKWDUd//tq2EnS6p+eNJECcYWLmzklFq2Ud1iAKlVNFG2c/zoCiJIJlkA6lOlFBFXU+vIM26lkHypxvzmCnjgg91J6TPRaDJktMVwvATFc+ur7Gb02MCrfA2py/6amGe2b/jEGAA5cYUouw7P64AAAAASUVORK5CYII=) no-repeat scroll 0% 50%;} |
||||
#timeline .slider .nav-previous .date,#timeline .slider .nav-previous .title{text-align:left;padding-left:10px;} |
||||
#timeline .slider .nav-previous:hover .icon{margin-left:5px;padding-left:20px;} |
||||
#timeline .slider .nav-next{float:right;text-align:right;}#timeline .slider .nav-next .icon{margin-right:10px;padding-right:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAABySURBVHjabNFLEoAgDAPQAiJ/ev/buqCJONjlm5GkVcKwEbWR5uaaq4E0V7NB0mg0b5J2mCdpMqpC+kasaNkjrE3Ac530RgSSDkaQ0kFbN6N9g0X5KPFTteAzLuSPtQVScJyGpx1PyNo8NH9HxB6PAAMAzkAUorcBvvAAAAAASUVORK5CYII=) no-repeat scroll 100% 50%;} |
||||
#timeline .slider .nav-next .date,#timeline .slider .nav-next .title{text-align:right;padding-right:10px;} |
||||
#timeline .slider .nav-next:hover .icon{margin-right:5px;padding-right:20px;} |
||||
#timeline .slider .slider-item{padding:0px;overflow:hidden;}#timeline .slider .slider-item .content{background-color:#ffffff;padding:0px;zoom:1;width:720px;margin-left:auto;margin-right:auto;}#timeline .slider .slider-item .content:before,#timeline .slider .slider-item .content:after{display:table;content:"";zoom:1;} |
||||
#timeline .slider .slider-item .content:after{clear:both;} |
||||
#timeline .slider .slider-item .content .layout-text .text{width:100%;height:100%;}#timeline .slider .slider-item .content .layout-text .text .container{width:75%;margin-left:auto;margin-right:auto;} |
||||
#timeline .slider .slider-item .content .layout-media .text{width:100%;height:100%;}#timeline .slider .slider-item .content .layout-media .text .container{width:100%;margin-left:auto;margin-right:auto;} |
||||
#timeline .slider .slider-item .content .layout-media .media{width:100%;}#timeline .slider .slider-item .content .layout-media .media .container{width:auto;} |
||||
#timeline .slider .slider-item .content .layout-text-media{height:100%;zoom:1;display:table;}#timeline .slider .slider-item .content .layout-text-media:before,#timeline .slider .slider-item .content .layout-text-media:after{display:table;content:"";zoom:1;} |
||||
#timeline .slider .slider-item .content .layout-text-media:after{clear:both;} |
||||
#timeline .slider .slider-item .content .layout-text-media .text{width:33%;min-width:150px;display:table-cell;vertical-align:middle;}#timeline .slider .slider-item .content .layout-text-media .text .container{display:table-cell;vertical-align:middle;float:right;padding-right:15px;} |
||||
#timeline .slider .slider-item .content .layout-text-media .media{width:100%;display:inline-block;}#timeline .slider .slider-item .content .layout-text-media .media .media-wrapper{margin-left:auto;margin-right:auto;display:table;vertical-align:middle;}#timeline .slider .slider-item .content .layout-text-media .media .media-wrapper .media-container{overflow:hidden;line-height:0px;padding:0px;border:1px solid #cccccc;margin-left:auto;margin-right:auto;background-color:#cccccc;} |
||||
#timeline .slider .slider-item .content .layout-text-media .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;} |
||||
#timeline .feature{width:100%;}#timeline .feature .slider{width:100%;float:left;position:relative;} |
||||
#timeline .navigation{clear:both;width:100%;height:200px;overflow:hidden;border-top:1px solid #cccccc;position:relative;}#timeline .navigation .timenav-background{position:absolute;top:0px;left:0px;height:150px;width:100%;background-color:#e9e9e9;}#timeline .navigation .timenav-background .timenav-line{position:absolute;top:0px;left:50%;width:2px;height:150px;background:#ff0000;z-index:500;} |
||||
#timeline .navigation .timenav{position:absolute;top:0px;left:-250px;z-index:1;}#timeline .navigation .timenav .content{position:relative;}#timeline .navigation .timenav .content .marker.active .dot{background:#ff0000;} |
||||
#timeline .navigation .timenav .content .marker.active .line .event-line{background:#ff0000;} |
||||
#timeline .navigation .timenav .content .marker.active .flag{z-index:200;}#timeline .navigation .timenav .content .marker.active .flag .flag-content h3{color:#ff0000;} |
||||
#timeline .navigation .timenav .content .marker.active:hover{cursor:default;}#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h3{color:#ff0000;} |
||||
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4{color:#999999;} |
||||
#timeline .navigation .timenav .content .marker{position:absolute;top:0px;left:150px;display:block;}#timeline .navigation .timenav .content .marker .dot{position:absolute;top:150px;left:0px;display:block;width:6px;height:6px;background:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:21;} |
||||
#timeline .navigation .timenav .content .marker .line{position:absolute;top:0px;left:3px;width:1px;height:150px;background:#cccccc;z-index:22;}#timeline .navigation .timenav .content .marker .line .event-line{position:absolute;z-index:22;left:0px;height:1px;width:1px;background:#666666;filter:alpha(opacity=10);-khtml-opacity:0.1;-moz-opacity:0.1;opacity:0.1;} |
||||
#timeline .navigation .timenav .content .marker .flag{position:absolute;top:15px;left:3px;padding:0px;display:block;z-index:23;width:153px;height:56px;overflow:hidden;background-image:url(gfx/TimeFlag.png);background-repeat:no-repeat;}#timeline .navigation .timenav .content .marker .flag .flag-content{padding:5px 7px 17px 5px;overflow:hidden;}#timeline .navigation .timenav .content .marker .flag .flag-content h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:bold;line-height:20px;font-size:11px;line-height:12px;color:#666666;margin-bottom:2px;} |
||||
#timeline .navigation .timenav .content .marker .flag .flag-content h4{font-size:10px;line-height:11px;color:#999999;} |
||||
#timeline .navigation .timenav .content .marker .flag .flag-content .thumbnail{margin-bottom:15px;} |
||||
#timeline .navigation .timenav .content .marker .flag:hover{cursor:pointer;}#timeline .navigation .timenav .content .marker .flag:hover .flag-content h3{color:#333333;} |
||||
#timeline .navigation .timenav .content .marker .flag:hover .flag-content h4{color:#666666;} |
||||
#timeline .navigation .timenav .content .marker .flag.row1{z-index:25;top:48px;} |
||||
#timeline .navigation .timenav .content .marker .flag.row2{z-index:24;top:96px;} |
||||
#timeline .navigation .timenav .content .marker .flag.row3{z-index:23;top:1px;} |
||||
#timeline .navigation .timenav .content .marker .flag.zFront{z-index:100;} |
||||
#timeline .navigation .timenav .time{position:absolute;left:0px;top:150px;height:50px;background-color:#ffffff;}#timeline .navigation .timenav .time .time-interval-minor{height:6px;white-space:nowrap;position:absolute;top:-9px;left:8px;z-index:10;}#timeline .navigation .timenav .time .time-interval-minor .minor{position:relative;top:0px;display:inline-block;background:#ffffff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC);width:15px;height:6px;background-position:center top;white-space:nowrap;color:#333333;margin-top:0px;padding-top:0px;} |
||||
#timeline .navigation .timenav .time .time-interval{white-space:nowrap;position:absolute;top:5px;left:0px;}#timeline .navigation .timenav .time .time-interval h5{background:#ffffff url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC);background-position:center top;background-repeat:no-repeat;padding-top:15px;display:inline-block;width:150px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-weight:normal;line-height:20px;text-transform:uppercase;text-align:center;white-space:nowrap;color:#333333;margin-left:0px;margin-right:0px;margin-top:1px;} |
||||
.slider{width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask{text-align:center;width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask .slider-container{position:absolute;top:0px;left:80px;overflow:hidden;text-align:center;width:100%;height:100%;width:800px;height:600px;text-align:center;display:table;}.slider .slider-container-mask .slider-container .slider-item-container{overflow:hidden;display:table-cell;vertical-align:middle;} |
||||
.slider img,.slider embed,.slider object,.slider video,.slider iframe{max-width:100%;} |
||||
.slider a{color:#0069d6;text-decoration:none;} |
||||
.slider a:hover{color:#00438a;text-decoration:underline;} |
||||
.slider .nav-previous,.slider .nav-next{position:absolute;top:0px;width:100px;color:#cccccc;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;position:absolute;} |
||||
.slider .nav-previous .icon,.slider .nav-next .icon{margin-bottom:15px;} |
||||
.slider .nav-previous .date,.slider .nav-next .date{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:bold;line-height:20px;text-transform:uppercase;margin-bottom:5px;} |
||||
.slider .nav-previous .date,.slider .nav-next .date,.slider .nav-previous .title,.slider .nav-next .title{line-height:14px;} |
||||
.slider .nav-previous:hover,.slider .nav-next:hover{color:#333333;cursor:pointer;} |
||||
.slider .nav-previous{float:left;text-align:left;}.slider .nav-previous .icon{margin-left:10px;padding-left:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAAB1SURBVHjafNFXDsAgDAPQAKWDUd//tq2EnS6p+eNJECcYWLmzklFq2Ud1iAKlVNFG2c/zoCiJIJlkA6lOlFBFXU+vIM26lkHypxvzmCnjgg91J6TPRaDJktMVwvATFc+ur7Gb02MCrfA2py/6amGe2b/jEGAA5cYUouw7P64AAAAASUVORK5CYII=) no-repeat scroll 0% 50%;} |
||||
.slider .nav-previous .date,.slider .nav-previous .title{text-align:left;padding-left:10px;} |
||||
.slider .nav-previous:hover .icon{margin-left:5px;padding-left:20px;} |
||||
.slider .nav-next{float:right;text-align:right;}.slider .nav-next .icon{margin-right:10px;padding-right:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAABySURBVHjabNFLEoAgDAPQAiJ/ev/buqCJONjlm5GkVcKwEbWR5uaaq4E0V7NB0mg0b5J2mCdpMqpC+kasaNkjrE3Ac530RgSSDkaQ0kFbN6N9g0X5KPFTteAzLuSPtQVScJyGpx1PyNo8NH9HxB6PAAMAzkAUorcBvvAAAAAASUVORK5CYII=) no-repeat scroll 100% 50%;} |
||||
.slider .nav-next .date,.slider .nav-next .title{text-align:right;padding-right:10px;} |
||||
.slider .nav-next:hover .icon{margin-right:5px;padding-right:20px;} |
||||
.slider .slider-item{width:700px;border:1px solid #CCC;padding:0px;margin:0px;overflow:hidden;display:table;margin-left:auto;margin-right:auto;}.slider .slider-item .content{} |
||||
.slider .slider-item .content .layout-text .text{width:100%;height:100%;}.slider .slider-item .content .layout-text .text .container{width:75%;margin-left:auto;margin-right:auto;} |
||||
.slider .slider-item .content .layout-media .text{width:100%;height:100%;}.slider .slider-item .content .layout-media .text .container{width:100%;margin-left:auto;margin-right:auto;} |
||||
.slider .slider-item .content .layout-media .media{width:100%;}.slider .slider-item .content .layout-media .media .container{width:auto;} |
||||
.slider .slider-item .content .layout-text-media{display:table;vertical-align:middle;}.slider .slider-item .content .layout-text-media .text{width:25%;min-width:120px;display:table-cell;vertical-align:middle;}.slider .slider-item .content .layout-text-media .text .container{display:table-cell;vertical-align:middle;text-align:left;padding-right:15px;} |
||||
.slider .slider-item .content .layout-text-media .media{width:100%;float:left;}.slider .slider-item .content .layout-text-media .media .media-wrapper{margin-left:auto;margin-right:auto;}.slider .slider-item .content .layout-text-media .media .media-wrapper .media-container{display:inline-block;overflow:hidden;line-height:0px;padding:0px;}.slider .slider-item .content .layout-text-media .media .media-wrapper .media-container img{border:1px solid #cccccc;max-height:350px;} |
||||
.slider .slider-item .content .layout-text-media .media .media-wrapper .media-container .credit,.slider .slider-item .content .layout-text-media .media .media-wrapper .media-container .caption{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} |
||||
.slider .slider-item .content .layout-text-media .media .media-wrapper .media-container .credit{color:#999999;text-align:right;font-size:10px;line-height:5px;display:block;margin:0 auto;margin-top:2px;} |
||||
.slider .slider-item .content .layout-text-media .media .media-wrapper .media-container .caption{text-align:left;margin-top:10px;color:#666666;font-size:11px;line-height:14px;} |
||||
.slider .slider-item .content .layout-text-media .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;} |
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 376 B |
|
After Width: | Height: | Size: 677 B |
|
After Width: | Height: | Size: 352 B |
|
After Width: | Height: | Size: 334 B |
|
After Width: | Height: | Size: 339 B |
|
After Width: | Height: | Size: 3.1 KiB |
|
After Width: | Height: | Size: 3.2 KiB |
|
After Width: | Height: | Size: 2.9 KiB |
|
After Width: | Height: | Size: 372 B |
|
After Width: | Height: | Size: 286 B |
|
After Width: | Height: | Size: 533 B |
|
After Width: | Height: | Size: 3.0 KiB |
|
After Width: | Height: | Size: 366 B |
|
After Width: | Height: | Size: 257 B |
|
After Width: | Height: | Size: 279 B |
|
After Width: | Height: | Size: 455 B |
|
After Width: | Height: | Size: 144 B |
|
After Width: | Height: | Size: 144 B |
|
After Width: | Height: | Size: 270 B |
|
After Width: | Height: | Size: 233 B |
|
After Width: | Height: | Size: 724 B |
|
After Width: | Height: | Size: 467 B |
|
After Width: | Height: | Size: 663 B |
|
After Width: | Height: | Size: 449 B |
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
Binary file not shown.
@ -0,0 +1,645 @@
|
||||
/* Core |
||||
================================================== */ |
||||
|
||||
|
||||
/* Sequence |
||||
================================================== */ |
||||
if(typeof VMM != 'undefined' && typeof VMM.Sequence == 'undefined') { |
||||
|
||||
|
||||
VMM.Sequence = Class.extend({ |
||||
|
||||
initialize: function(length,index) { |
||||
trace('sequence init'); |
||||
|
||||
// PUBLIC
|
||||
this.increment = 1; |
||||
this.decrement = 1; |
||||
this.wrap = false; |
||||
|
||||
// PRIVATE
|
||||
this.length = (length == null) ? 0 : length; |
||||
this.index = (index == null) ? ((length == 0) ? -1 : 0) : (index >= length) ? length-1 : index; |
||||
this.synced = []; |
||||
}, |
||||
setLength: function(i) { |
||||
|
||||
this.length = i; |
||||
|
||||
this.setIndex(this.index); |
||||
}, |
||||
|
||||
getLength: function() { |
||||
|
||||
return this.length; |
||||
},
|
||||
|
||||
setIndex: function(i) { |
||||
|
||||
if(this.length <= 0) { |
||||
|
||||
this.index = -1; |
||||
|
||||
return; |
||||
} |
||||
|
||||
if(i < 0) i = (this.wrap) ? this.length - (i%this.length) : 0; |
||||
else if(i >= this.length) i = (this.wrap) ? (i%this.length) : this.length-1; |
||||
|
||||
var pi = this.index; |
||||
|
||||
this.index = i; |
||||
|
||||
if(pi != this.index) { |
||||
|
||||
// update sequences
|
||||
for(var j=0; j<this.synced.length; j++) { |
||||
|
||||
var s = this.synced[j]; |
||||
|
||||
if(s.getIndex() != this.index) s.setIndex(this.index); |
||||
} |
||||
} |
||||
}, |
||||
|
||||
getIndex: function() { |
||||
|
||||
return this.index; |
||||
}, |
||||
|
||||
next: function() { |
||||
|
||||
this.setIndex(this.index+this.increment); |
||||
}, |
||||
|
||||
prev: function () { |
||||
|
||||
this.setIndex(this.index-this.decrement); |
||||
}, |
||||
|
||||
sync: function(s,bothWays) { |
||||
|
||||
if(s instanceof NYTMM.Sequence && s != this) { |
||||
|
||||
this.synced.push(s); |
||||
|
||||
if(bothWays) s.sync(this); |
||||
|
||||
return true; |
||||
} |
||||
|
||||
return false; |
||||
}, |
||||
|
||||
unsync: function(s,bothWays) { |
||||
|
||||
// update sequences
|
||||
for(var i=0; i<this.synced.length; i++) { |
||||
|
||||
if(this.synced[i] == s) { |
||||
|
||||
this.synced.splice(i,1); |
||||
|
||||
if(bothWays) s.unsync(this); |
||||
|
||||
return true; |
||||
} |
||||
} |
||||
|
||||
return false; |
||||
} |
||||
|
||||
}); |
||||
|
||||
} |
||||
|
||||
/* Slider |
||||
================================================== */ |
||||
if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') { |
||||
|
||||
VMM.Slider = function(parent, content_width, content_height, is_timeline) { |
||||
|
||||
/* DEVICE |
||||
================================================== */ |
||||
/* |
||||
trace("VMM.Browser.OS"); |
||||
trace(VMM.Browser.browser); |
||||
trace(VMM.Browser.version); |
||||
trace(VMM.Browser.OS); |
||||
trace(VMM.Browser.device); |
||||
*/ |
||||
|
||||
/* PRIVATE VARS |
||||
================================================== */ |
||||
var _private_var = "private"; |
||||
var events = {}; // CUSTOM EVENT HOLDER
|
||||
var data = []; // HOLDS SLIDE DATA
|
||||
var slides_content = ""; |
||||
var slides = []; |
||||
var medias = []; |
||||
var current_slide = 0; |
||||
var current_width = 960; |
||||
var touch = { |
||||
move: false, |
||||
x: 10, |
||||
y:0, |
||||
off: 0, |
||||
dampen: 48 |
||||
}; |
||||
var slide_positions = []; |
||||
|
||||
var config = { |
||||
interval: 10, |
||||
something: 0, |
||||
width: 720, |
||||
height: 400, |
||||
content_width: 720, |
||||
content_height: 400, |
||||
content_padding: 130, |
||||
ease: "easeInOutExpo", |
||||
duration: 1000, |
||||
nav_width: 100, |
||||
nav_height: 200, |
||||
timeline: false, |
||||
spacing: 15, |
||||
}; |
||||
|
||||
|
||||
|
||||
var slider_width = 1000; |
||||
|
||||
if (content_width != null && content_width != "") { |
||||
config.width = content_width; |
||||
}
|
||||
if (content_height != null && content_height != "") { |
||||
config.height = content_height; |
||||
}
|
||||
if (is_timeline != null && is_timeline != "") { |
||||
config.timeline = is_timeline; |
||||
} |
||||
|
||||
var content = ""; |
||||
var _active = false; |
||||
|
||||
/* ELEMENTS |
||||
================================================== */ |
||||
var $slider = ""; |
||||
var $slider_mask = ""; |
||||
var $slider_container = ""; |
||||
var $slides_items = ""; |
||||
//var $slide = "";
|
||||
var navigation = {}; |
||||
// Nav Items
|
||||
navigation.nextBtn; |
||||
navigation.prevBtn; |
||||
navigation.nextDate; |
||||
navigation.prevDate; |
||||
navigation.nextTitle; |
||||
navigation.prevTitle; |
||||
|
||||
/* PUBLIC VARS |
||||
================================================== */ |
||||
this.ver = "0.1"; |
||||
var layout = parent; // expecting slider div
|
||||
|
||||
|
||||
/* PUBLIC FUNCTIONS |
||||
================================================== */ |
||||
this.init = function(d) { |
||||
if(typeof d != 'undefined') { |
||||
this.setData(d); |
||||
} else { |
||||
trace("WAITING ON DATA"); |
||||
} |
||||
}; |
||||
|
||||
this.width = function(w) { |
||||
if (w != null && w != "") { |
||||
config.width = w; |
||||
reSize(); |
||||
} else { |
||||
return config.width; |
||||
} |
||||
} |
||||
|
||||
this.height = function(h) { |
||||
if (h != null && h != "") { |
||||
config.height = h; |
||||
reSize(); |
||||
} else { |
||||
return config.height; |
||||
} |
||||
} |
||||
/* GETTERS AND SETTERS |
||||
================================================== */ |
||||
this.setData = function(d) { |
||||
if(typeof d != 'undefined') { |
||||
data = d; |
||||
build(); |
||||
} else{ |
||||
trace("NO DATA"); |
||||
} |
||||
}; |
||||
|
||||
this.getData = function() { |
||||
return data; |
||||
}; |
||||
|
||||
this.setConfig = function(d) { |
||||
if(typeof d != 'undefined') { |
||||
config = d; |
||||
// TO DO
|
||||
// FIRE AN EVENT ETC
|
||||
} else{ |
||||
trace("NO CONFIG DATA"); |
||||
} |
||||
} |
||||
|
||||
this.getConfig = function() { |
||||
return config; |
||||
}; |
||||
|
||||
this.setSize = function(w, h) { |
||||
if (w != null) {config.width = w}; |
||||
if (h != null) {config.height = h}; |
||||
if (_active) { |
||||
reSize(); |
||||
} |
||||
|
||||
} |
||||
|
||||
this.active = function() { |
||||
return _active; |
||||
}; |
||||
|
||||
this.getCurrentNumber = function() { |
||||
return current_slide; |
||||
}; |
||||
|
||||
this.setSlide = function(n) { |
||||
goToSlide(n); |
||||
}; |
||||
|
||||
|
||||
/* ON EVENT |
||||
================================================== */ |
||||
|
||||
function onConfigSet() { |
||||
trace("onConfigSet"); |
||||
}; |
||||
|
||||
|
||||
function reSize(go_to_slide, from_start) { |
||||
|
||||
var _go_to_slide = true; |
||||
var _from_start = false; |
||||
|
||||
if (go_to_slide != null) {_go_to_slide = go_to_slide}; |
||||
if (from_start != null) {_from_start = from_start}; |
||||
|
||||
current_width = config.width; |
||||
|
||||
config.nav_height = VMM.Element.height(navigation.prevBtnContainer); |
||||
|
||||
config.content_width = current_width - (config.content_padding *2); |
||||
|
||||
VMM.Element.width($slides_items, (slides.length * config.content_width)); |
||||
|
||||
if (_from_start) { |
||||
var _pos = VMM.Element.position(slides[current_slide]); |
||||
VMM.Element.css($slider_container, "left", _pos.left); |
||||
} |
||||
|
||||
|
||||
// Position slides
|
||||
positionSlides(); |
||||
|
||||
// Position Nav
|
||||
VMM.Element.css(navigation.nextBtn, "left", (current_width - config.nav_width)); |
||||
VMM.Element.height(navigation.prevBtn, config.height); |
||||
VMM.Element.height(navigation.nextBtn, config.height); |
||||
VMM.Element.css(navigation.nextBtnContainer, "top", ( (config.height/2) - (config.nav_height/2) ) ); |
||||
VMM.Element.css(navigation.prevBtnContainer, "top", ( (config.height/2) - (config.nav_height/2) ) ); |
||||
|
||||
// Animate Changes
|
||||
VMM.Element.height($slider_mask, config.height); |
||||
VMM.Element.width($slider_mask, current_width); |
||||
|
||||
if (_go_to_slide) { |
||||
goToSlide(current_slide, "linear", 1); |
||||
}; |
||||
|
||||
if (current_slide == 0) { |
||||
VMM.Element.visible(navigation.prevBtn, false); |
||||
} |
||||
|
||||
} |
||||
|
||||
function onNextClick(e) { |
||||
if (current_slide == slides.length - 1) { |
||||
VMM.Element.animate($slider_container, config.duration, config.ease, {"left": -(VMM.Element.position(slides[current_slide]).left)}); |
||||
} else { |
||||
goToSlide(current_slide+1); |
||||
upDate(); |
||||
} |
||||
|
||||
} |
||||
|
||||
function onPrevClick(e) { |
||||
if (current_slide == 0) { |
||||
goToSlide(current_slide); |
||||
} else { |
||||
goToSlide(current_slide-1); |
||||
upDate(); |
||||
} |
||||
|
||||
} |
||||
|
||||
function onTouchUpdate(e, b) { |
||||
if (slide_positions.length == 0) { |
||||
for(var i = 0; i < slides.length; i++) { |
||||
var sp = VMM.Element.position(slides[i]); |
||||
slide_positions.push(sp.left); |
||||
} |
||||
} |
||||
if (typeof b.left == "number") { |
||||
var _pos = b.left; |
||||
if (_pos < -(VMM.Element.position(slides[current_slide]).left) - (config.width/3)) { |
||||
onNextClick(); |
||||
} else if (_pos > -(VMM.Element.position(slides[current_slide]).left) + (config.width/3)) { |
||||
onPrevClick(); |
||||
} else { |
||||
VMM.Element.animate($slider_container, config.duration, config.ease, {"left": -(VMM.Element.position(slides[current_slide]).left)}); |
||||
} |
||||
} else { |
||||
VMM.Element.animate($slider_container, config.duration, config.ease, {"left": -(VMM.Element.position(slides[current_slide]).left)}); |
||||
} |
||||
|
||||
if (typeof b.top == "number") { |
||||
VMM.Element.animate($slider_container, config.duration, config.ease, {"top": -b.top}); |
||||
//VMM.Element.animate(layout, _duration, _ease, {scrollTop: VMM.Element.prop(layout, "scrollHeight") + b.top });
|
||||
//VMM.Element.animate(layout, _duration, _ease, {scrollTop: VMM.Element.prop(layout, "scrollHeight") + VMM.Element.height(layout) });
|
||||
//VMM.Element.animate($slider_container, config.duration, config.ease, {"top": -400});
|
||||
} else { |
||||
|
||||
} |
||||
}; |
||||
|
||||
function upDate() { |
||||
VMM.fireEvent(layout, "UPDATE"); |
||||
}; |
||||
/* PRIVATE FUNCTIONS |
||||
================================================== */ |
||||
|
||||
var getData = function(d) { |
||||
data = d; |
||||
}; |
||||
|
||||
/* SLIDES |
||||
================================================== */ |
||||
// BUILD SLIDES
|
||||
var buildSlides = function(d) { |
||||
|
||||
// Clear out existing content
|
||||
VMM.attachElement($slides_items, ""); |
||||
|
||||
for(var i = 0; i < d.length; i++) { |
||||
var bw = ""; |
||||
var _slide; |
||||
var _media; |
||||
|
||||
bw = VMM.createElement("div", d[i].content, "content"); |
||||
_slide = VMM.appendAndGetElement($slides_items, "<div>", "slider-item" , bw); |
||||
slides.push(_slide); |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
// POSITION SLIDES AND SIZE THEM
|
||||
var positionSlides = function() { |
||||
|
||||
/* SIZE SLIDES |
||||
================================================== */ |
||||
|
||||
VMM.Element.css(".slider-item", "width", config.content_width ); |
||||
VMM.Element.height(".slider-item", config.height); |
||||
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-height", config.height - 50 ); |
||||
VMM.Element.css(".slider-item .layout-media .media .media-container img", "max-height", config.height - 150 ); |
||||
|
||||
|
||||
|
||||
VMM.Element.css(".slider-item .media .media-container .soundcloud", "max-height", 168 ); |
||||
|
||||
/* RESIZE IFRAME MEDIA ELEMENTS |
||||
================================================== */ |
||||
//var _iframe_height = Math.round(config.height) - 60;
|
||||
var _iframe_height_full = Math.round(config.height) - 160; |
||||
//var _iframe_width = Math.round((_iframe_height / 9) * 16);
|
||||
var _iframe_width_full = Math.round((_iframe_height_full / 9) * 16); |
||||
|
||||
var _iframe_width = (config.content_width/100)*60 ; |
||||
var _iframe_height = Math.round((_iframe_width / 16) * 9) + 25; |
||||
|
||||
|
||||
// NORMAL
|
||||
VMM.Element.height(".slider-item .media .media-container .media-frame", _iframe_height); |
||||
VMM.Element.width(".slider-item .media .media-container .media-frame", _iframe_width); |
||||
//VMM.Element.width(".slider-item .media .media-container .media-frame", _iframe_width);
|
||||
//VMM.Element.css(".slider-item .media .media-container .media-frame", "max-width", config.content_width );
|
||||
|
||||
// IFRAME FULL SIZE VIDEO
|
||||
VMM.Element.height(".slider-item .layout-media .media .media-container .media-frame", _iframe_height_full); |
||||
VMM.Element.width(".slider-item .layout-media .media .media-container .media-frame", _iframe_width_full); |
||||
|
||||
// IFRAME FULL SIZE NON VIDEO
|
||||
VMM.Element.height(".slider-item .layout-media .media .media-container .soundcloud", config.height - 150); |
||||
VMM.Element.width(".slider-item .layout-media .media .media-container .soundcloud", config.content_width); |
||||
VMM.Element.width(".slider-item .layout-text-media .media .media-container .soundcloud", _iframe_width); |
||||
|
||||
// MAPS
|
||||
VMM.Element.height(".slider-item .media .media-container .map", _iframe_height_full); |
||||
|
||||
// MAX WIDTH
|
||||
VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.content_width ); |
||||
//VMM.Element.width(".slider-item .layout-text-media .media .media-container .media-frame", _iframe_width);
|
||||
//VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-height", _iframe_height );
|
||||
|
||||
/* POSITION SLIDES |
||||
================================================== */ |
||||
var pos = 0; |
||||
for(var i = 0; i < slides.length; i++) { |
||||
pos = i * (config.width+config.spacing); |
||||
VMM.Element.css(slides[i], "left", pos); |
||||
} |
||||
|
||||
} |
||||
|
||||
var opacitySlides = function(n) { |
||||
var _ease = "linear"; |
||||
for(var i = 0; i < slides.length; i++) { |
||||
if (i == current_slide) { |
||||
VMM.Element.animate(slides[i], config.duration, _ease, {"opacity": 1}); |
||||
} else if (i == current_slide - 1) { |
||||
VMM.Element.animate(slides[i], config.duration, _ease, {"opacity": 0.1});
|
||||
} else if (i == current_slide + 1) { |
||||
VMM.Element.animate(slides[i], config.duration, _ease, {"opacity": 0.1});
|
||||
} else { |
||||
VMM.Element.css(slides[i], "opacity", n);
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
// Go to slide
|
||||
//goToSlide(n, ease, duration);
|
||||
var goToSlide = function(n, ease, duration, fast, firstrun) { |
||||
|
||||
/* STOP ANY VIDEO PLAYERS ACTIVE |
||||
================================================== */ |
||||
VMM.ExternalAPI.youtube.stopPlayers(); |
||||
|
||||
// Set current slide
|
||||
current_slide = n; |
||||
|
||||
var _ease = config.ease; |
||||
var _duration = config.duration; |
||||
var is_last = false; |
||||
var is_first = false; |
||||
|
||||
if (current_slide == 0) { |
||||
is_first = true; |
||||
} |
||||
if (current_slide +1 == slides.length) { |
||||
is_last = true |
||||
} |
||||
|
||||
if (ease != null && ease != "") {_ease = ease}; |
||||
if (duration != null && duration != "") {_duration = duration}; |
||||
|
||||
/* get slide position |
||||
================================================== */ |
||||
var _pos = VMM.Element.position(slides[current_slide]); |
||||
|
||||
/* set proper nav titles and dates etc. |
||||
================================================== */ |
||||
if (is_first) { |
||||
VMM.Element.visible(navigation.prevBtn, false); |
||||
} else { |
||||
VMM.Element.visible(navigation.prevBtn, true); |
||||
if (config.timeline) { |
||||
VMM.attachElement(navigation.prevDate, data[current_slide - 1].date); |
||||
} |
||||
VMM.attachElement(navigation.prevTitle, VMM.Util.unlinkify(data[current_slide - 1].title)); |
||||
} |
||||
if (is_last) { |
||||
VMM.Element.visible(navigation.nextBtn, false); |
||||
} else { |
||||
VMM.Element.visible(navigation.nextBtn, true); |
||||
if (config.timeline) { |
||||
VMM.attachElement(navigation.nextDate, data[current_slide + 1].date); |
||||
} |
||||
VMM.attachElement(navigation.nextTitle, VMM.Util.unlinkify(data[current_slide + 1].title) ); |
||||
} |
||||
|
||||
/* ANIMATE SLIDE |
||||
================================================== */ |
||||
if (fast) { |
||||
VMM.Element.css($slider_container, "left", -(_pos.left - config.content_padding));
|
||||
} else{ |
||||
VMM.Element.stop($slider_container); |
||||
VMM.Element.animate($slider_container, _duration, _ease, {"left": -(_pos.left - config.content_padding)}); |
||||
} |
||||
|
||||
if (firstrun) { |
||||
VMM.fireEvent(layout, "LOADED"); |
||||
} |
||||
|
||||
/* SET Vertical Scoll |
||||
================================================== */ |
||||
//opacitySlides(0.85);
|
||||
if (VMM.Element.height(slides[current_slide]) > config.height) { |
||||
VMM.Element.css(".slider", "overflow-y", "scroll" ); |
||||
} else { |
||||
VMM.Element.css(layout, "overflow-y", "hidden" ); |
||||
VMM.Element.animate(layout, _duration, _ease, {scrollTop: VMM.Element.prop(layout, "scrollHeight") - VMM.Element.height(layout) }); |
||||
|
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
/* NAVIGATION |
||||
================================================== */ |
||||
var buildNavigation = function() { |
||||
|
||||
var temp_icon = "<div class='icon'> </div>"; |
||||
|
||||
navigation.nextBtn = VMM.appendAndGetElement($slider, "<div>", "nav-next"); |
||||
navigation.prevBtn = VMM.appendAndGetElement($slider, "<div>", "nav-previous"); |
||||
navigation.nextBtnContainer = VMM.appendAndGetElement(navigation.nextBtn, "<div>", "nav-container", temp_icon); |
||||
navigation.prevBtnContainer = VMM.appendAndGetElement(navigation.prevBtn, "<div>", "nav-container", temp_icon); |
||||
if (config.timeline) { |
||||
navigation.nextDate = VMM.appendAndGetElement(navigation.nextBtnContainer, "<div>", "date", "1957"); |
||||
navigation.prevDate = VMM.appendAndGetElement(navigation.prevBtnContainer, "<div>", "date", "1957"); |
||||
} |
||||
navigation.nextTitle = VMM.appendAndGetElement(navigation.nextBtnContainer, "<div>", "title", "Title Goes Here"); |
||||
navigation.prevTitle = VMM.appendAndGetElement(navigation.prevBtnContainer, "<div>", "title", "Title Goes Here"); |
||||
|
||||
VMM.bindEvent(".nav-next", onNextClick); |
||||
VMM.bindEvent(".nav-previous", onPrevClick); |
||||
} |
||||
|
||||
/* BUILD |
||||
================================================== */ |
||||
var build = function() { |
||||
|
||||
// Clear out existing content
|
||||
VMM.attachElement(layout, ""); |
||||
|
||||
// Get DOM Objects to local objects
|
||||
$slider = VMM.getElement("div.slider"); |
||||
$slider_mask = VMM.appendAndGetElement($slider, "<div>", "slider-container-mask"); |
||||
$slider_container = VMM.appendAndGetElement($slider_mask, "<div>", "slider-container"); |
||||
$slides_items = VMM.appendAndGetElement($slider_container, "<div>", "slider-item-container"); |
||||
|
||||
// BUILD NAVIGATION
|
||||
buildNavigation(); |
||||
|
||||
// ATTACH SLIDES
|
||||
buildSlides(data); |
||||
|
||||
/* MAKE SLIDER TOUCHABLE |
||||
================================================== */ |
||||
|
||||
var __duration = 3000; |
||||
|
||||
if (VMM.Browser.device == "tablet" || VMM.Browser.device == "mobile") { |
||||
config.duration = 500; |
||||
__duration = 1000; |
||||
VMM.TouchSlider.createPanel($slider_container, $slider_container, VMM.Element.width(slides[0]), config.spacing, true); |
||||
VMM.bindEvent($slider_container, onTouchUpdate, "TOUCHUPDATE"); |
||||
} else if (VMM.Browser.device == "mobile") { |
||||
|
||||
} else { |
||||
//VMM.DragSlider.createPanel($slider_container, $slider_container, VMM.Element.width(slides[0]), config.spacing, true);
|
||||
} |
||||
|
||||
reSize(false, true); |
||||
VMM.Element.visible(navigation.prevBtn, false); |
||||
// GO TO FIRST SLIDE
|
||||
goToSlide(0, "easeOutExpo", __duration, true, true); |
||||
|
||||
_active = true; |
||||
}; |
||||
|
||||
}; |
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
@ -0,0 +1,491 @@
|
||||
/* Utilities and Useful Functions |
||||
================================================== */ |
||||
if(typeof VMM != 'undefined' && typeof VMM.Util == 'undefined') { |
||||
|
||||
VMM.Util = ({ |
||||
|
||||
init: function() { |
||||
return this; |
||||
}, |
||||
|
||||
/* RANDOM BETWEEN |
||||
================================================== */ |
||||
//VMM.Util.randomBetween(1, 3)
|
||||
randomBetween: function(min, max) { |
||||
return Math.floor(Math.random() * (max - min + 1) + min); |
||||
}, |
||||
/* CUSTOM SORT |
||||
================================================== */ |
||||
|
||||
customSort: function(a, b) { |
||||
var a1= a, b1= b; |
||||
if(a1== b1) return 0; |
||||
return a1> b1? 1: -1; |
||||
}, |
||||
|
||||
/* Given an int or decimal, turn that into string in $xxx,xxx.xx format. |
||||
================================================== */ |
||||
number2money: function(n, symbol, padding) { |
||||
var symbol = (symbol !== null) ? symbol : true; // add $
|
||||
var padding = (padding !== null) ? padding : false; //pad with .00
|
||||
var number = VMM.Math2.floatPrecision(n,2); // rounded correctly to two digits, if decimals passed
|
||||
var formatted = this.niceNumber(number); |
||||
// no decimal and padding is enabled
|
||||
if (!formatted.split(/\./g)[1] && padding) formatted = formatted + ".00"; |
||||
// add money sign
|
||||
if (symbol) formatted = "$"+formatted; |
||||
return formatted; |
||||
}, |
||||
|
||||
|
||||
/* Returns a word count number |
||||
================================================== */ |
||||
wordCount: function(s) { |
||||
var fullStr = s + " "; |
||||
var initial_whitespace_rExp = /^[^A-Za-z0-9\'\-]+/gi; |
||||
var left_trimmedStr = fullStr.replace(initial_whitespace_rExp, ""); |
||||
var non_alphanumerics_rExp = /[^A-Za-z0-9\'\-]+/gi; |
||||
var cleanedStr = left_trimmedStr.replace(non_alphanumerics_rExp, " "); |
||||
var splitString = cleanedStr.split(" "); |
||||
var word_count = splitString.length -1; |
||||
if (fullStr.length <2) { |
||||
word_count = 0; |
||||
} |
||||
return word_count; |
||||
}, |
||||
/* Parse Date |
||||
================================================== */ |
||||
// VMM.Util.parseDate(str)
|
||||
parseDate: function(d) { |
||||
var _date; |
||||
|
||||
if ( d.match(/,/gi) ) { |
||||
|
||||
|
||||
var _d_array = d.split(","); |
||||
|
||||
|
||||
for(var i = 0; i < _d_array.length; i++) { |
||||
_d_array[i] = parseInt(_d_array[i]); |
||||
|
||||
} |
||||
|
||||
_date = new Date(); |
||||
if (_d_array[0] ) { _date.setFullYear(_d_array[0]); } |
||||
if (_d_array[1] > 1 ) { _date.setMonth(_d_array[1] - 1); } else { _date.setMonth(0); } |
||||
if (_d_array[2] > 1 ) { _date.setDate(_d_array[2]); } else { _date.setDate(1); } |
||||
if (_d_array[3] > 1 ) { _date.setHours(_d_array[3]); } else { _date.setHours(0); } |
||||
if (_d_array[4] > 1 ) { _date.setMinutes(_d_array[4]); } else { _date.setMinutes(0); } |
||||
if (_d_array[5] > 1 ) { _date.setSeconds(_d_array[5]); } else { _date.setSeconds(0); } |
||||
if (_d_array[6] > 1 ) { _date.setMilliseconds(_d_array[6]); } else { _date.setMilliseconds(0); } |
||||
} else if (d.match("/")) { |
||||
_date = new Date(d); |
||||
} else if (d.length < 5) { |
||||
_date = new Date(); |
||||
_date.setFullYear(parseInt(d)); |
||||
_date.setMonth(0); |
||||
_date.setDate(1); |
||||
_date.setHours(0); |
||||
_date.setMinutes(0); |
||||
_date.setSeconds(0); |
||||
_date.setMilliseconds(0); |
||||
}else { |
||||
_date = new Date( |
||||
parseInt(d.slice(0,4)),
|
||||
parseInt(d.slice(4,6)) - 1,
|
||||
parseInt(d.slice(6,8)),
|
||||
parseInt(d.slice(8,10)),
|
||||
parseInt(d.slice(10,12)) |
||||
); |
||||
} |
||||
|
||||
return _date; |
||||
}, |
||||
/* Get the corresponding ratio number |
||||
================================================== */ |
||||
// VMM.Util.ratio.r16_9(w, h) // Returns corresponding number
|
||||
ratio: { |
||||
r16_9: function(w,h) { |
||||
if (w !== null && w !== "") { |
||||
return Math.round((h / 16) * 9); |
||||
} else if (h !== null && h !== "") { |
||||
return Math.round((w / 9) * 16); |
||||
} |
||||
}, |
||||
r4_3: function(w,h) { |
||||
if (w !== null && w !== "") { |
||||
return Math.round((h / 4) * 3); |
||||
} else if (h !== null && h !== "") { |
||||
return Math.round((w / 3) * 4); |
||||
} |
||||
} |
||||
}, |
||||
// VMM.Util.date.day[0];
|
||||
// VMM.Util.date.get12HRTime(time, seconds_true);
|
||||
date: { |
||||
// somestring = VMM.Util.date.month[2]; // Returns March
|
||||
month: ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"], |
||||
// somestring = VMM.Util.date.month_abbrev[1]; // Returns Feb.
|
||||
month_abbr: ["Jan.", "Feb.", "March", "April", "May", "June", "July", "Aug.", "Sept.", "Oct.", "Nov.", "Dec."], |
||||
day: ["Sunday","Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"], |
||||
day_abbr: ["Sun.","Mon.", "Tues.", "Wed.", "Thurs.", "Fri.", "Sat."], |
||||
hour: [1,2,3,4,5,6,7,8,9,10,11,12,1,2,3,4,5,6,7,8,9,10,11,12], |
||||
hour_suffix: ["am"], |
||||
//VMM.Util.date.prettyDate(d, is_abbr)
|
||||
prettyDate: function(d, is_abbr, date_type) { |
||||
var _date = ""; |
||||
|
||||
if (type.of(d) == "date") { |
||||
if (d.getMonth() === 0 && d.getDate() == 1 && d.getHours() === 0 && d.getMinutes() === 0 ) { |
||||
// trace("YEAR ONLY");
|
||||
_date = d.getFullYear(); |
||||
} else { |
||||
if (d.getDate() <= 1 && d.getHours() === 0 && d.getMinutes() === 0) { |
||||
// trace("YEAR MONTH");
|
||||
if (is_abbr) { |
||||
_date = VMM.Util.date.month_abbr[d.getMonth()]; |
||||
|
||||
} else { |
||||
_date = VMM.Util.date.month[d.getMonth()] + " " + d.getFullYear() ; |
||||
} |
||||
|
||||
} else if (d.getHours() === 0 && d.getMinutes() === 0) { |
||||
// trace("YEAR MONTH DAY");
|
||||
if (is_abbr) { |
||||
_date = VMM.Util.date.month_abbr[d.getMonth()] + " " + d.getDate(); |
||||
} else { |
||||
_date = VMM.Util.date.month[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() ; |
||||
} |
||||
} else if (d.getMinutes() === 0) { |
||||
// trace("YEAR MONTH DAY HOUR");
|
||||
if (is_abbr){ |
||||
//_date = VMM.Util.date.get12HRTime(d) + " " + (d.getMonth()+1) + "/" + d.getDate() + "/" + d.getFullYear() ;
|
||||
_date = VMM.Util.date.get12HRTime(d); |
||||
} else { |
||||
_date = VMM.Util.date.get12HRTime(d) + "<br/><small>" + VMM.Util.date.month[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " </small> "; |
||||
} |
||||
} else { |
||||
// trace("YEAR MONTH DAY HOUR MINUTE");
|
||||
if (is_abbr){ |
||||
_date = VMM.Util.date.day[d.getDay()] + ", " + VMM.Util.date.month_abbr[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " at " + VMM.Util.date.get12HRTime(d); |
||||
} else { |
||||
_date = VMM.Util.date.get12HRTime(d) + "<br/><small>" + VMM.Util.date.day[d.getDay()] + ", " + VMM.Util.date.month[d.getMonth()] + " " + d.getDate() + ", " + d.getFullYear() + " </small> "; |
||||
} |
||||
} |
||||
|
||||
}
|
||||
//_date = d.getFullYear();
|
||||
|
||||
|
||||
} else { |
||||
trace("NOT A VALID DATE?"); |
||||
trace(d); |
||||
} |
||||
|
||||
return _date; |
||||
}, |
||||
|
||||
prettyMonth: function(m, is_year) { |
||||
var _month = ""; |
||||
if (type.of(t) == "date") { |
||||
|
||||
|
||||
} |
||||
return _month; |
||||
}, |
||||
|
||||
get12HRTime: function(t, is_seconds) { |
||||
var _time = ""; |
||||
|
||||
if (type.of(t) == "date") { |
||||
|
||||
_time = VMM.Util.date.theHour(t.getHours()) + ":" + VMM.Util.date.minuteZeroFill(t.getMinutes()); |
||||
|
||||
if (is_seconds) { |
||||
_time = _time + ":" + VMM.Util.date.minuteZeroFill(t.getSeconds()); |
||||
} |
||||
|
||||
_time = _time + VMM.Util.date.hourSuffix(t.getHours()); |
||||
|
||||
} |
||||
|
||||
return _time; |
||||
}, |
||||
|
||||
theHour: function(hr) { |
||||
if (hr > 0 && hr < 13) { |
||||
return (hr); |
||||
} |
||||
if (hr == "0") { |
||||
hr = 12; |
||||
return (hr); |
||||
} |
||||
if (hr === 0) { |
||||
return (12); |
||||
} |
||||
return (hr-12); |
||||
}, |
||||
minuteZeroFill: function(v) { |
||||
if (v > 9) { |
||||
return "" + v; |
||||
} |
||||
return "0" + v; |
||||
}, |
||||
hourSuffix: function(t) { |
||||
if (t < 12) { |
||||
return (" am"); |
||||
} |
||||
return (" pm"); |
||||
} |
||||
}, |
||||
|
||||
// VMM.Util.doubledigit(number).
|
||||
doubledigit: function(n) { |
||||
return (n < 10 ? '0' : '') + n; |
||||
}, |
||||
|
||||
|
||||
/* Returns a truncated segement of a long string of between min and max words. If possible, ends on a period (otherwise goes to max). |
||||
================================================== */ |
||||
truncateWords: function(s, min, max) { |
||||
|
||||
if (!min) min = 30; |
||||
if (!max) max = min; |
||||
|
||||
var initial_whitespace_rExp = /^[^A-Za-z0-9\'\-]+/gi; |
||||
var left_trimmedStr = s.replace(initial_whitespace_rExp, ""); |
||||
var words = left_trimmedStr.split(" "); |
||||
|
||||
var result = []; |
||||
|
||||
min = Math.min(words.length, min); |
||||
max = Math.min(words.length, max); |
||||
|
||||
for (var i = 0; i<min; i++) { |
||||
result.push(words[i]); |
||||
}
|
||||
|
||||
for (var j = min; i<max; i++) { |
||||
var word = words[i]; |
||||
|
||||
result.push(word); |
||||
|
||||
if (word.charAt(word.length-1) == '.') { |
||||
break; |
||||
} |
||||
}
|
||||
|
||||
return (result.join(' ')); |
||||
}, |
||||
|
||||
/* Turns plain text links into real links |
||||
================================================== */ |
||||
// VMM.Util.linkify();
|
||||
linkify: function(text,targets,is_touch) { |
||||
|
||||
if(!text) return text; |
||||
|
||||
text = text.replace(/((https?\:\/\/|ftp\:\/\/)|(www\.))(\S+)(\w{2,4})(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/gi, function(url) { |
||||
|
||||
var nice = url; |
||||
var _touch = ""; |
||||
if(url.search('^https?:\/\/') < 0) url = 'http://'+url; |
||||
_touch = "onclick = 'void(0)'"; |
||||
if(is_touch) { |
||||
_touch = "onclick = 'void(0)'"; |
||||
} |
||||
|
||||
onclick = "void(0)"; |
||||
if(targets === null || targets === "") return '<a href="'+ url + " " + _touch + '">'+ url +'</a>'; |
||||
else return "<a href='"+ url + " " + _touch + " target='" +targets+"'>'" + url + "</a>" ; |
||||
}); |
||||
|
||||
return text; |
||||
}, |
||||
/* Turns plain text links into real links |
||||
================================================== */ |
||||
// VMM.Util.unlinkify();
|
||||
unlinkify: function(text) { |
||||
if(!text) return text; |
||||
text = text.replace(/<a\b[^>]*>/i,""); |
||||
text = text.replace(/<\/a>/i, ""); |
||||
return text; |
||||
}, |
||||
|
||||
/* TK |
||||
================================================== */ |
||||
nl2br: function(text) { |
||||
return text.replace(/(\r\n|[\r\n]|\\n|\\r)/g,"<br/>"); |
||||
}, |
||||
|
||||
/* Generate a Unique ID |
||||
================================================== */ |
||||
// VMM.Util.unique_ID(size);
|
||||
unique_ID: function(size) { |
||||
|
||||
var getRandomNumber = function(range) { |
||||
return Math.floor(Math.random() * range); |
||||
}; |
||||
|
||||
var getRandomChar = function() { |
||||
var chars = "abcdefghijklmnopqurstuvwxyzABCDEFGHIJKLMNOPQURSTUVWXYZ"; |
||||
return chars.substr( getRandomNumber(62), 1 ); |
||||
}; |
||||
|
||||
var randomID = function(size) { |
||||
var str = ""; |
||||
for(var i = 0; i < size; i++) { |
||||
str += getRandomChar(); |
||||
} |
||||
return str; |
||||
}; |
||||
|
||||
return randomID(size); |
||||
}, |
||||
/* Tells you if a number is even or not |
||||
================================================== */ |
||||
// VMM.Util.isEven(n)
|
||||
isEven: function(n){ |
||||
return (n%2 === 0) ? true : false; |
||||
}, |
||||
/* Get URL Variables |
||||
================================================== */ |
||||
// var somestring = VMM.Util.getUrlVars(str_url)["varname"];
|
||||
getUrlVars: function(str) { |
||||
var vars = [], hash; |
||||
var hashes = str.slice(str.indexOf('?') + 1).split('&'); |
||||
for(var i = 0; i < hashes.length; i++) { |
||||
hash = hashes[i].split('='); |
||||
vars.push(hash[0]); |
||||
vars[hash[0]] = hash[1]; |
||||
} |
||||
trace(vars); |
||||
return vars; |
||||
}, |
||||
|
||||
/* Cleans up strings to become real HTML |
||||
================================================== */ |
||||
toHTML: function(text) { |
||||
|
||||
text = this.nl2br(text); |
||||
text = this.linkify(text); |
||||
|
||||
return text.replace(/\s\s/g," "); |
||||
}, |
||||
|
||||
/* Returns text strings as CamelCase |
||||
================================================== */ |
||||
toCamelCase: function(s,forceLowerCase) { |
||||
|
||||
if(forceLowerCase !== false) forceLowerCase = true; |
||||
|
||||
var sps = ((forceLowerCase) ? s.toLowerCase() : s).split(" "); |
||||
|
||||
for(var i=0; i<sps.length; i++) { |
||||
|
||||
sps[i] = sps[i].substr(0,1).toUpperCase() + sps[i].substr(1); |
||||
} |
||||
|
||||
return sps.join(" "); |
||||
}, |
||||
|
||||
/* Given an int or decimal, return a string with pretty commas in the correct spot. |
||||
================================================== */ |
||||
niceNumber: function(n){ |
||||
|
||||
var amount = String( Math.abs(Number(n) ) ); |
||||
|
||||
var leftOfDecimal = amount.split(/\./g)[0]; |
||||
var rightOfDecimal = amount.split(/\./g)[1]; |
||||
|
||||
var formatted_text = ''; |
||||
|
||||
var num_a = leftOfDecimal.toArray(); |
||||
num_a.reverse(); |
||||
|
||||
for (var i=1; i <= num_a.length; i++) { |
||||
if ( (i%3 == 0) && (i < num_a.length ) ) { |
||||
formatted_text = "," + num_a[i-1] + formatted_text; |
||||
} else { |
||||
formatted_text = num_a[i-1] + formatted_text; |
||||
} |
||||
} |
||||
if (rightOfDecimal != null && rightOfDecimal != '' && rightOfDecimal != undefined) { |
||||
return formatted_text + "." + rightOfDecimal; |
||||
} else { |
||||
return formatted_text; |
||||
} |
||||
}, |
||||
|
||||
/* Transform text to Title Case |
||||
================================================== */ |
||||
toTitleCase: function(t){ |
||||
|
||||
var __TitleCase = { |
||||
__smallWords: ['a', 'an', 'and', 'as', 'at', 'but','by', 'en', 'for', 'if', 'in', 'of', 'on', 'or','the', 'to', 'v[.]?', 'via', 'vs[.]?'], |
||||
|
||||
init: function() { |
||||
this.__smallRE = this.__smallWords.join('|'); |
||||
this.__lowerCaseWordsRE = new RegExp('\\b(' + this.__smallRE + ')\\b', 'gi'); |
||||
this.__firstWordRE = new RegExp('^([^a-zA-Z0-9 \\r\\n\\t]*)(' + this.__smallRE + ')\\b', 'gi'); |
||||
this.__lastWordRE = new RegExp('\\b(' + this.__smallRE + ')([^a-zA-Z0-9 \\r\\n\\t]*)$', 'gi'); |
||||
}, |
||||
|
||||
toTitleCase: function(string) { |
||||
var line = ''; |
||||
|
||||
var split = string.split(/([:.;?!][ ]|(?:[ ]|^)["“])/); |
||||
|
||||
for (var i = 0; i < split.length; ++i) { |
||||
var s = split[i]; |
||||
|
||||
s = s.replace(/\b([a-zA-Z][a-z.'’]*)\b/g,this.__titleCaseDottedWordReplacer); |
||||
|
||||
// lowercase the list of small words
|
||||
s = s.replace(this.__lowerCaseWordsRE, this.__lowerReplacer); |
||||
|
||||
// if the first word in the title is a small word then capitalize it
|
||||
s = s.replace(this.__firstWordRE, this.__firstToUpperCase); |
||||
|
||||
// if the last word in the title is a small word, then capitalize it
|
||||
s = s.replace(this.__lastWordRE, this.__firstToUpperCase); |
||||
|
||||
line += s; |
||||
} |
||||
|
||||
// special cases
|
||||
line = line.replace(/ V(s?)\. /g, ' v$1. '); |
||||
line = line.replace(/(['’])S\b/g, '$1s'); |
||||
line = line.replace(/\b(AT&T|Q&A)\b/ig, this.__upperReplacer); |
||||
|
||||
return line; |
||||
}, |
||||
|
||||
__titleCaseDottedWordReplacer: function (w) { |
||||
return (w.match(/[a-zA-Z][.][a-zA-Z]/)) ? w : __TitleCase.__firstToUpperCase(w); |
||||
}, |
||||
|
||||
__lowerReplacer: function (w) { return w.toLowerCase() }, |
||||
|
||||
__upperReplacer: function (w) { return w.toUpperCase() }, |
||||
|
||||
__firstToUpperCase: function (w) { |
||||
var split = w.split(/(^[^a-zA-Z0-9]*[a-zA-Z0-9])(.*)$/); |
||||
split[1] = split[1].toUpperCase(); |
||||
return split.join(''); |
||||
}, |
||||
}; |
||||
|
||||
__TitleCase.init(); |
||||
|
||||
t = t.replace(/_/g," "); |
||||
t = __TitleCase.toTitleCase(t); |
||||
|
||||
return t; |
||||
}, |
||||
|
||||
}).init(); |
||||
|
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,205 @@
|
||||
/* |
||||
* jQuery Easing v1.3 - http://gsgd.co.uk/sandbox/jquery/easing/
|
||||
* |
||||
* Uses the built in easing capabilities added In jQuery 1.1 |
||||
* to offer multiple easing options |
||||
* |
||||
* TERMS OF USE - jQuery Easing |
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2008 George McGinley Smith |
||||
* All rights reserved. |
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met: |
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer. |
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution. |
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission. |
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF |
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE |
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE |
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING |
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
* |
||||
*/ |
||||
|
||||
// t: current time, b: begInnIng value, c: change In value, d: duration
|
||||
jQuery.easing['jswing'] = jQuery.easing['swing']; |
||||
|
||||
jQuery.extend( jQuery.easing, |
||||
{ |
||||
def: 'easeOutQuad', |
||||
swing: function (x, t, b, c, d) { |
||||
//alert(jQuery.easing.default);
|
||||
return jQuery.easing[jQuery.easing.def](x, t, b, c, d); |
||||
}, |
||||
easeInQuad: function (x, t, b, c, d) { |
||||
return c*(t/=d)*t + b; |
||||
}, |
||||
easeOutQuad: function (x, t, b, c, d) { |
||||
return -c *(t/=d)*(t-2) + b; |
||||
}, |
||||
easeInOutQuad: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return c/2*t*t + b; |
||||
return -c/2 * ((--t)*(t-2) - 1) + b; |
||||
}, |
||||
easeInCubic: function (x, t, b, c, d) { |
||||
return c*(t/=d)*t*t + b; |
||||
}, |
||||
easeOutCubic: function (x, t, b, c, d) { |
||||
return c*((t=t/d-1)*t*t + 1) + b; |
||||
}, |
||||
easeInOutCubic: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return c/2*t*t*t + b; |
||||
return c/2*((t-=2)*t*t + 2) + b; |
||||
}, |
||||
easeInQuart: function (x, t, b, c, d) { |
||||
return c*(t/=d)*t*t*t + b; |
||||
}, |
||||
easeOutQuart: function (x, t, b, c, d) { |
||||
return -c * ((t=t/d-1)*t*t*t - 1) + b; |
||||
}, |
||||
easeInOutQuart: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t + b; |
||||
return -c/2 * ((t-=2)*t*t*t - 2) + b; |
||||
}, |
||||
easeInQuint: function (x, t, b, c, d) { |
||||
return c*(t/=d)*t*t*t*t + b; |
||||
}, |
||||
easeOutQuint: function (x, t, b, c, d) { |
||||
return c*((t=t/d-1)*t*t*t*t + 1) + b; |
||||
}, |
||||
easeInOutQuint: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return c/2*t*t*t*t*t + b; |
||||
return c/2*((t-=2)*t*t*t*t + 2) + b; |
||||
}, |
||||
easeInSine: function (x, t, b, c, d) { |
||||
return -c * Math.cos(t/d * (Math.PI/2)) + c + b; |
||||
}, |
||||
easeOutSine: function (x, t, b, c, d) { |
||||
return c * Math.sin(t/d * (Math.PI/2)) + b; |
||||
}, |
||||
easeInOutSine: function (x, t, b, c, d) { |
||||
return -c/2 * (Math.cos(Math.PI*t/d) - 1) + b; |
||||
}, |
||||
easeInExpo: function (x, t, b, c, d) { |
||||
return (t==0) ? b : c * Math.pow(2, 10 * (t/d - 1)) + b; |
||||
}, |
||||
easeOutExpo: function (x, t, b, c, d) { |
||||
return (t==d) ? b+c : c * (-Math.pow(2, -10 * t/d) + 1) + b; |
||||
}, |
||||
easeInOutExpo: function (x, t, b, c, d) { |
||||
if (t==0) return b; |
||||
if (t==d) return b+c; |
||||
if ((t/=d/2) < 1) return c/2 * Math.pow(2, 10 * (t - 1)) + b; |
||||
return c/2 * (-Math.pow(2, -10 * --t) + 2) + b; |
||||
}, |
||||
easeInCirc: function (x, t, b, c, d) { |
||||
return -c * (Math.sqrt(1 - (t/=d)*t) - 1) + b; |
||||
}, |
||||
easeOutCirc: function (x, t, b, c, d) { |
||||
return c * Math.sqrt(1 - (t=t/d-1)*t) + b; |
||||
}, |
||||
easeInOutCirc: function (x, t, b, c, d) { |
||||
if ((t/=d/2) < 1) return -c/2 * (Math.sqrt(1 - t*t) - 1) + b; |
||||
return c/2 * (Math.sqrt(1 - (t-=2)*t) + 1) + b; |
||||
}, |
||||
easeInElastic: function (x, t, b, c, d) { |
||||
var s=1.70158;var p=0;var a=c; |
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; |
||||
if (a < Math.abs(c)) { a=c; var s=p/4; } |
||||
else var s = p/(2*Math.PI) * Math.asin (c/a); |
||||
return -(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
||||
}, |
||||
easeOutElastic: function (x, t, b, c, d) { |
||||
var s=1.70158;var p=0;var a=c; |
||||
if (t==0) return b; if ((t/=d)==1) return b+c; if (!p) p=d*.3; |
||||
if (a < Math.abs(c)) { a=c; var s=p/4; } |
||||
else var s = p/(2*Math.PI) * Math.asin (c/a); |
||||
return a*Math.pow(2,-10*t) * Math.sin( (t*d-s)*(2*Math.PI)/p ) + c + b; |
||||
}, |
||||
easeInOutElastic: function (x, t, b, c, d) { |
||||
var s=1.70158;var p=0;var a=c; |
||||
if (t==0) return b; if ((t/=d/2)==2) return b+c; if (!p) p=d*(.3*1.5); |
||||
if (a < Math.abs(c)) { a=c; var s=p/4; } |
||||
else var s = p/(2*Math.PI) * Math.asin (c/a); |
||||
if (t < 1) return -.5*(a*Math.pow(2,10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )) + b; |
||||
return a*Math.pow(2,-10*(t-=1)) * Math.sin( (t*d-s)*(2*Math.PI)/p )*.5 + c + b; |
||||
}, |
||||
easeInBack: function (x, t, b, c, d, s) { |
||||
if (s == undefined) s = 1.70158; |
||||
return c*(t/=d)*t*((s+1)*t - s) + b; |
||||
}, |
||||
easeOutBack: function (x, t, b, c, d, s) { |
||||
if (s == undefined) s = 1.70158; |
||||
return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b; |
||||
}, |
||||
easeInOutBack: function (x, t, b, c, d, s) { |
||||
if (s == undefined) s = 1.70158;
|
||||
if ((t/=d/2) < 1) return c/2*(t*t*(((s*=(1.525))+1)*t - s)) + b; |
||||
return c/2*((t-=2)*t*(((s*=(1.525))+1)*t + s) + 2) + b; |
||||
}, |
||||
easeInBounce: function (x, t, b, c, d) { |
||||
return c - jQuery.easing.easeOutBounce (x, d-t, 0, c, d) + b; |
||||
}, |
||||
easeOutBounce: function (x, t, b, c, d) { |
||||
if ((t/=d) < (1/2.75)) { |
||||
return c*(7.5625*t*t) + b; |
||||
} else if (t < (2/2.75)) { |
||||
return c*(7.5625*(t-=(1.5/2.75))*t + .75) + b; |
||||
} else if (t < (2.5/2.75)) { |
||||
return c*(7.5625*(t-=(2.25/2.75))*t + .9375) + b; |
||||
} else { |
||||
return c*(7.5625*(t-=(2.625/2.75))*t + .984375) + b; |
||||
} |
||||
}, |
||||
easeInOutBounce: function (x, t, b, c, d) { |
||||
if (t < d/2) return jQuery.easing.easeInBounce (x, t*2, 0, c, d) * .5 + b; |
||||
return jQuery.easing.easeOutBounce (x, t*2-d, 0, c, d) * .5 + c*.5 + b; |
||||
} |
||||
}); |
||||
|
||||
/* |
||||
* |
||||
* TERMS OF USE - EASING EQUATIONS |
||||
*
|
||||
* Open source under the BSD License.
|
||||
*
|
||||
* Copyright © 2001 Robert Penner |
||||
* All rights reserved. |
||||
*
|
||||
* Redistribution and use in source and binary forms, with or without modification,
|
||||
* are permitted provided that the following conditions are met: |
||||
*
|
||||
* Redistributions of source code must retain the above copyright notice, this list of
|
||||
* conditions and the following disclaimer. |
||||
* Redistributions in binary form must reproduce the above copyright notice, this list
|
||||
* of conditions and the following disclaimer in the documentation and/or other materials
|
||||
* provided with the distribution. |
||||
*
|
||||
* Neither the name of the author nor the names of contributors may be used to endorse
|
||||
* or promote products derived from this software without specific prior written permission. |
||||
*
|
||||
* THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND ANY
|
||||
* EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF |
||||
* MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE |
||||
* COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, |
||||
* EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE |
||||
* GOODS OR SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED
|
||||
* AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING |
||||
* NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, EVEN IF ADVISED
|
||||
* OF THE POSSIBILITY OF SUCH DAMAGE.
|
||||
* |
||||
*/ |
||||
@ -0,0 +1,16 @@
|
||||
/* Elements.less |
||||
* UI Elements etc |
||||
* ---------------------------------------------------------------------------------------- */ |
||||
|
||||
|
||||
#timeline { |
||||
|
||||
|
||||
.navigation { |
||||
|
||||
} |
||||
.feature { |
||||
|
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,13 @@
|
||||
/*! |
||||
* Fonts |
||||
*/ |
||||
|
||||
// External Fonts |
||||
@import "font-ProximaNova.less"; |
||||
|
||||
body { |
||||
font: "ProximaNova", sans-serif; |
||||
} |
||||
|
||||
// New Stuff |
||||
|
||||
@ -0,0 +1,135 @@
|
||||
/* Icons.less |
||||
* Base64 Icons |
||||
* ----------------------------------------------------------------- */ |
||||
|
||||
// Next and Back Icons |
||||
.icon-previous() { |
||||
//background-image: url(timeline.png); |
||||
//background-repeat:no-repeat; |
||||
//background-position: 0 -292px; width: 18px; height: 22px; |
||||
//background: url(gfx/chevron-prev.png) no-repeat scroll 0% 50%; |
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAAB1SURBVHjafNFXDsAgDAPQAKWDUd//tq2EnS6p+eNJECcYWLmzklFq2Ud1iAKlVNFG2c/zoCiJIJlkA6lOlFBFXU+vIM26lkHypxvzmCnjgg91J6TPRaDJktMVwvATFc+ur7Gb02MCrfA2py/6amGe2b/jEGAA5cYUouw7P64AAAAASUVORK5CYII=) no-repeat scroll 0% 50%; |
||||
} |
||||
|
||||
.icon-next() { |
||||
//background-image: url(timeline.png); |
||||
//background-repeat:no-repeat; |
||||
//background-position: 0 -220px; width: 18px; height: 22px; |
||||
//background: url(gfx/chevron-next.png) no-repeat scroll 100% 50%; |
||||
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAABySURBVHjabNFLEoAgDAPQAiJ/ev/buqCJONjlm5GkVcKwEbWR5uaaq4E0V7NB0mg0b5J2mCdpMqpC+kasaNkjrE3Ac530RgSSDkaQ0kFbN6N9g0X5KPFTteAzLuSPtQVScJyGpx1PyNo8NH9HxB6PAAMAzkAUorcBvvAAAAAASUVORK5CYII=) no-repeat scroll 100% 50%; |
||||
} |
||||
|
||||
.icon-twitter() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -889px; width: 24px; height: 24px; |
||||
} |
||||
|
||||
.icon-vimeo() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -963px; width: 24px; height: 24px; |
||||
} |
||||
|
||||
.icon-youtube() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -1111px; width: 24px; height: 24px; |
||||
} |
||||
|
||||
.icon-soundcloud() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -659px; width: 24px; height: 24px; |
||||
} |
||||
|
||||
.icon-map() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -514px; width: 26px; height: 21px; |
||||
} |
||||
|
||||
.icon-map-pin() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -438px; width: 16px; height: 26px; |
||||
} |
||||
|
||||
.icon-zoom-in() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
//background-position: 0 -1433px; width: 24px; height: 24px; |
||||
background-position: 0 -1507px; width: 16px; height: 16px; |
||||
} |
||||
|
||||
.icon-zoom-out() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
//background-position: 0 -1573px; width: 24px; height: 24px; |
||||
background-position: 0 -1647px; width: 16px; height: 16px; |
||||
} |
||||
|
||||
.icon-back-home() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -1303px; width: 16px; height: 12px; |
||||
//background-position: 0 -1365px; width: 24px; height: 18px; |
||||
} |
||||
|
||||
.icon-microphone() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -585px; width: 12px; height: 24px; |
||||
} |
||||
|
||||
.time-flag() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 0; width: 153px; height: 60px; |
||||
} |
||||
|
||||
.time-flag-active() { |
||||
background-image: url(timeline.png); |
||||
background-repeat:no-repeat; |
||||
background-position: 0 -110px; width: 153px; height: 60px; |
||||
} |
||||
|
||||
.background-time-tic() { |
||||
background: @color-background url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAGCAMAAAA8JaR5AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBrwkQIABAAHIABkHeR3aAAAAAElFTkSuQmCC); |
||||
} |
||||
|
||||
.background-time-interval() { |
||||
//background: @color-base url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC); |
||||
//background-repeat: no-repeat; |
||||
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC); |
||||
|
||||
} |
||||
|
||||
/* Sprite Reference |
||||
================================================== */ |
||||
/* |
||||
.sprite-TimeFlagSmall{ background-position: 0 0; width: 153px; height: 60px; } |
||||
.sprite-TimeFlagSmallActive{ background-position: 0 -110px; width: 153px; height: 60px; } |
||||
.sprite-chevron-next{ background-position: 0 -220px; width: 18px; height: 22px; } |
||||
.sprite-chevron-prev{ background-position: 0 -292px; width: 18px; height: 22px; } |
||||
.sprite-icon-facebook{ background-position: 0 -364px; width: 24px; height: 24px; } |
||||
.sprite-icon-map-pin{ background-position: 0 -438px; width: 16px; height: 26px; } |
||||
.sprite-icon-map{ background-position: 0 -514px; width: 26px; height: 21px; } |
||||
.sprite-icon-microphone{ background-position: 0 -585px; width: 12px; height: 24px; } |
||||
.sprite-icon-music{ background-position: 0 -659px; width: 24px; height: 24px; } |
||||
.sprite-icon-soundcloud{ background-position: 0 -733px; width: 32px; height: 32px; } |
||||
.sprite-icon-speaker{ background-position: 0 -815px; width: 24px; height: 24px; } |
||||
.sprite-icon-twitter{ background-position: 0 -889px; width: 24px; height: 24px; } |
||||
.sprite-icon-vimeo{ background-position: 0 -963px; width: 24px; height: 24px; } |
||||
.sprite-icon-youtube{ background-position: 0 -1037px; width: 24px; height: 24px; } |
||||
.sprite-icon-youtube_alt{ background-position: 0 -1111px; width: 24px; height: 24px; } |
||||
.sprite-time-interval-bg{ background-position: 0 -1185px; width: 5px; height: 12px; } |
||||
.sprite-time-interval{ background-position: 0 -1247px; width: 5px; height: 6px; } |
||||
.sprite-zback-to-begin-16{ background-position: 0 -1303px; width: 16px; height: 12px; } |
||||
.sprite-zback-to-begin-24{ background-position: 0 -1365px; width: 24px; height: 18px; } |
||||
.sprite-zoom-in-24{ background-position: 0 -1433px; width: 24px; height: 24px; } |
||||
.sprite-zoom-in{ background-position: 0 -1507px; width: 16px; height: 16px; } |
||||
.sprite-zoom-out-24{ background-position: 0 -1573px; width: 24px; height: 24px; } |
||||
.sprite-zoom-out{ background-position: 0 -1647px; width: 16px; height: 16px; } |
||||
*/ |
||||
|
||||
@ -0,0 +1,216 @@
|
||||
/* Mixins.less |
||||
* Snippets of reusable CSS to develop faster and keep code readable |
||||
* ----------------------------------------------------------------- */ |
||||
|
||||
|
||||
// Clearfix for clearing floats like a boss h5bp.com/q |
||||
.clearfix() { |
||||
zoom: 1; |
||||
&:before, |
||||
&:after { |
||||
display: table; |
||||
content: ""; |
||||
zoom: 1; |
||||
} |
||||
&:after { |
||||
clear: both; |
||||
} |
||||
} |
||||
|
||||
// Center-align a block level element |
||||
.center-block() { |
||||
display: block; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
} |
||||
|
||||
// Sizing shortcuts |
||||
.size(@height: 5px, @width: 5px) { |
||||
height: @height; |
||||
width: @width; |
||||
} |
||||
.square(@size: 5px) { |
||||
.size(@size, @size); |
||||
} |
||||
|
||||
// Input placeholder text |
||||
.placeholder(@color: @grayLight) { |
||||
:-moz-placeholder { |
||||
color: @color; |
||||
} |
||||
::-webkit-input-placeholder { |
||||
color: @color; |
||||
} |
||||
} |
||||
|
||||
// Font Stacks |
||||
#font { |
||||
.shorthand(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.sans-serif(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @font-sansserif; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.font-body(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @fontBody, Helvetica, Arial, sans-serif; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.font-header(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @fontHeader; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.serif(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @font-serif; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
.monospace(@weight: normal, @size: 12px, @lineHeight: 20px) { |
||||
font-family: "Monaco", Courier New, monospace; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
|
||||
.navigation(@weight: normal, @size: 14px, @lineHeight: 20px) { |
||||
font-family: @font-sansserif; |
||||
font-size: @size; |
||||
font-weight: @weight; |
||||
line-height: @lineHeight; |
||||
} |
||||
} |
||||
|
||||
// Border Radius |
||||
.border-radius(@radius: 5px) { |
||||
-webkit-border-radius: @radius; |
||||
-moz-border-radius: @radius; |
||||
border-radius: @radius; |
||||
} |
||||
|
||||
// Drop shadows |
||||
.box-shadow(@shadow: 1px 1px 7px rgba(0,0,0,.30)) { |
||||
-webkit-box-shadow: @shadow; |
||||
-moz-box-shadow: @shadow; |
||||
box-shadow: @shadow; |
||||
} |
||||
|
||||
// Transitions |
||||
.transition(@transition) { |
||||
-webkit-transition: @transition; |
||||
-moz-transition: @transition; |
||||
-ms-transition: @transition; |
||||
-o-transition: @transition; |
||||
transition: @transition; |
||||
} |
||||
|
||||
// Background clipping |
||||
.background-clip(@clip) { |
||||
-webkit-background-clip: @clip; |
||||
-moz-background-clip: @clip; |
||||
background-clip: @clip; |
||||
} |
||||
|
||||
// CSS3 Content Columns |
||||
.content-columns(@columnCount, @columnGap: 20px) { |
||||
-webkit-column-count: @columnCount; |
||||
-moz-column-count: @columnCount; |
||||
column-count: @columnCount; |
||||
-webkit-column-gap: @columnGap; |
||||
-moz-column-gap: @columnGap; |
||||
column-gap: @columnGap; |
||||
} |
||||
|
||||
// Make any element resizable for prototyping |
||||
.resizable(@direction: both) { |
||||
resize: @direction; // Options are horizontal, vertical, both |
||||
overflow: auto; // Safari fix |
||||
} |
||||
|
||||
// Add an alphatransparency value to any background or border color (via Elyse Holladay) |
||||
#translucent { |
||||
.background(@color: @white, @alpha: 1) { |
||||
background-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); |
||||
} |
||||
.border(@color: @white, @alpha: 1) { |
||||
border-color: hsla(hue(@color), saturation(@color), lightness(@color), @alpha); |
||||
background-clip: padding-box; |
||||
} |
||||
} |
||||
|
||||
// Gradient Bar Colors for buttons and allerts |
||||
.gradientBar(@primaryColor, @secondaryColor) { |
||||
#gradient > .vertical(@primaryColor, @secondaryColor); |
||||
text-shadow: 0 -1px 0 rgba(0,0,0,.25); |
||||
border-color: @secondaryColor @secondaryColor darken(@secondaryColor, 15%); |
||||
border-color: rgba(0,0,0,.1) rgba(0,0,0,.1) fadein(rgba(0,0,0,.1), 15%); |
||||
} |
||||
|
||||
// Gradients |
||||
#gradient { |
||||
.horizontal (@startColor: #555, @endColor: #333) { |
||||
background-color: @endColor; |
||||
background-repeat: repeat-x; |
||||
background-image: -khtml-gradient(linear, left top, right top, from(@startColor), to(@endColor)); // Konqueror |
||||
background-image: -moz-linear-gradient(left, @startColor, @endColor); // FF 3.6+ |
||||
background-image: -ms-linear-gradient(left, @startColor, @endColor); // IE10 |
||||
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ |
||||
background-image: -webkit-linear-gradient(left, @startColor, @endColor); // Safari 5.1+, Chrome 10+ |
||||
background-image: -o-linear-gradient(left, @startColor, @endColor); // Opera 11.10 |
||||
background-image: linear-gradient(left, @startColor, @endColor); // Le standard |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=1)",@startColor,@endColor)); // IE9 and down |
||||
} |
||||
.vertical (@startColor: #555, @endColor: #333) { |
||||
background-color: @endColor; |
||||
background-repeat: repeat-x; |
||||
background-image: -khtml-gradient(linear, left top, left bottom, from(@startColor), to(@endColor)); // Konqueror |
||||
background-image: -moz-linear-gradient(top, @startColor, @endColor); // FF 3.6+ |
||||
background-image: -ms-linear-gradient(top, @startColor, @endColor); // IE10 |
||||
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, @startColor), color-stop(100%, @endColor)); // Safari 4+, Chrome 2+ |
||||
background-image: -webkit-linear-gradient(top, @startColor, @endColor); // Safari 5.1+, Chrome 10+ |
||||
background-image: -o-linear-gradient(top, @startColor, @endColor); // Opera 11.10 |
||||
background-image: linear-gradient(top, @startColor, @endColor); // The standard |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down |
||||
} |
||||
.directional (@startColor: #555, @endColor: #333, @deg: 45deg) { |
||||
background-color: @endColor; |
||||
background-repeat: repeat-x; |
||||
background-image: -moz-linear-gradient(@deg, @startColor, @endColor); // FF 3.6+ |
||||
background-image: -ms-linear-gradient(@deg, @startColor, @endColor); // IE10 |
||||
background-image: -webkit-linear-gradient(@deg, @startColor, @endColor); // Safari 5.1+, Chrome 10+ |
||||
background-image: -o-linear-gradient(@deg, @startColor, @endColor); // Opera 11.10 |
||||
background-image: linear-gradient(@deg, @startColor, @endColor); // The standard |
||||
} |
||||
.vertical-three-colors(@startColor: #00b3ee, @midColor: #7a43b6, @colorStop: 50%, @endColor: #c3325f) { |
||||
background-color: @endColor; |
||||
background-repeat: no-repeat; |
||||
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(@startColor), color-stop(@colorStop, @midColor), to(@endColor)); |
||||
background-image: -webkit-linear-gradient(@startColor, @midColor @colorStop, @endColor); |
||||
background-image: -moz-linear-gradient(top, @startColor, @midColor @colorStop, @endColor); |
||||
background-image: -ms-linear-gradient(@startColor, @midColor @colorStop, @endColor); |
||||
background-image: -o-linear-gradient(@startColor, @midColor @colorStop, @endColor); |
||||
background-image: linear-gradient(@startColor, @midColor @colorStop, @endColor); |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@startColor,@endColor)); // IE9 and down, gets no color-stop at all for proper fallback |
||||
} |
||||
} |
||||
|
||||
// Reset filters for IE |
||||
.reset-filter() { |
||||
filter: e(%("progid:DXImageTransform.Microsoft.gradient(enabled = false)")); |
||||
} |
||||
|
||||
// Opacity |
||||
.opacity(@opacity: 100) { |
||||
filter: e(%("alpha(opacity=%d)", @opacity)); |
||||
-khtml-opacity: @opacity / 100; |
||||
-moz-opacity: @opacity / 100; |
||||
opacity: @opacity / 100; |
||||
} |
||||
@ -0,0 +1,132 @@
|
||||
/* Reset.less |
||||
* Props to Eric Meyer (meyerweb.com) for his CSS reset file. We're using an adapted version here that cuts out some of the reset HTML elements we will never need here (i.e., dfn, samp, etc). |
||||
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ |
||||
|
||||
|
||||
#timeline { |
||||
// Normalize.css |
||||
// Pulling in select resets form the normalize.css project |
||||
// -------------------------------------------------- |
||||
|
||||
// Display in IE6-9 and FF3 |
||||
// ------------------------- |
||||
// Source: http://github.com/necolas/normalize.css |
||||
|
||||
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 { margin: 0; padding: 0; border: 0; font-weight: normal; font-style: normal; font-size: 100%; line-height: 1; font-family: inherit; } |
||||
table { border-collapse: collapse; border-spacing: 0; } |
||||
ol, ul { list-style: none; } |
||||
q:before, q:after, blockquote:before, blockquote:after { content: ""; } |
||||
// Focus states |
||||
a:focus { |
||||
outline: thin dotted; |
||||
} |
||||
// Hover & Active |
||||
a:hover, |
||||
a:active { |
||||
outline: 0; |
||||
} |
||||
|
||||
// Display in IE6-9 and FF3 |
||||
// ------------------------- |
||||
// Source: http://github.com/necolas/normalize.css |
||||
article, |
||||
aside, |
||||
details, |
||||
figcaption, |
||||
figure, |
||||
footer, |
||||
header, |
||||
hgroup, |
||||
nav, |
||||
section { |
||||
display: block; |
||||
} |
||||
|
||||
// Display block in IE6-9 and FF3 |
||||
// ------------------------- |
||||
// Source: http://github.com/necolas/normalize.css |
||||
audio, |
||||
canvas, |
||||
video { |
||||
display: inline-block; |
||||
*display: inline; |
||||
*zoom: 1; |
||||
} |
||||
|
||||
// Prevents modern browsers from displaying 'audio' without controls |
||||
// ------------------------- |
||||
// Source: http://github.com/necolas/normalize.css |
||||
audio:not([controls]) { |
||||
display: none; |
||||
} |
||||
|
||||
// Prevents sub and sup affecting line-height in all browsers |
||||
// ------------------------- |
||||
// Source: http://github.com/necolas/normalize.css |
||||
sub, |
||||
sup { |
||||
font-size: 75%; |
||||
line-height: 0; |
||||
position: relative; |
||||
vertical-align: baseline; |
||||
} |
||||
sup { |
||||
top: -0.5em; |
||||
} |
||||
sub { |
||||
bottom: -0.25em; |
||||
} |
||||
|
||||
// Img border in a's and image quality |
||||
// ------------------------- |
||||
// Source: http://github.com/necolas/normalize.css |
||||
img { |
||||
border: 0; |
||||
-ms-interpolation-mode: bicubic; |
||||
} |
||||
|
||||
// Forms |
||||
// ------------------------- |
||||
// Source: http://github.com/necolas/normalize.css |
||||
|
||||
// Font size in all browsers, margin changes, misc consistency |
||||
button, |
||||
input, |
||||
select, |
||||
textarea { |
||||
font-size: 100%; |
||||
margin: 0; |
||||
vertical-align: baseline; |
||||
*vertical-align: middle; |
||||
} |
||||
button, |
||||
input { |
||||
line-height: normal; // FF3/4 have !important on line-height in UA stylesheet |
||||
*overflow: visible; // Inner spacing ie IE6/7 |
||||
} |
||||
button::-moz-focus-inner, |
||||
input::-moz-focus-inner { // Inner padding and border oddities in FF3/4 |
||||
border: 0; |
||||
padding: 0; |
||||
} |
||||
button, |
||||
input[type="button"], |
||||
input[type="reset"], |
||||
input[type="submit"] { |
||||
cursor: pointer; // Cursors on all buttons applied consistently |
||||
-webkit-appearance: button; // Style clicable inputs in iOS |
||||
} |
||||
input[type="search"] { // Appearance in Safari/Chrome |
||||
-webkit-appearance: textfield; |
||||
-webkit-box-sizing: content-box; |
||||
-moz-box-sizing: content-box; |
||||
box-sizing: content-box; |
||||
} |
||||
input[type="search"]::-webkit-search-decoration { |
||||
-webkit-appearance: none; // Inner-padding issues in Chrome OSX, Safari 5 |
||||
} |
||||
textarea { |
||||
overflow: auto; // Remove vertical scrollbar in IE6-9 |
||||
vertical-align: top; // Readability and alignment cross-browser |
||||
} |
||||
} |
||||
@ -0,0 +1,330 @@
|
||||
/* |
||||
* Slider |
||||
* |
||||
* ------------------------------------------------------------------------------------------- */ |
||||
|
||||
|
||||
|
||||
|
||||
/* SLIDER CONTAINERS |
||||
================================================== */ |
||||
.slider { |
||||
width:100%; |
||||
height:100%; |
||||
overflow:hidden; |
||||
//-webkit-overflow-scrolling: touch; |
||||
.slider-container-mask { |
||||
text-align: center; |
||||
width:100%; |
||||
height:100%; |
||||
overflow:hidden; |
||||
|
||||
.slider-container { |
||||
position:absolute; |
||||
top:0px; |
||||
left: -2160px; |
||||
|
||||
//overflow:hidden; |
||||
|
||||
width:100%; |
||||
height:100%; |
||||
|
||||
text-align: center; |
||||
|
||||
display:block; |
||||
|
||||
background-color: @white; |
||||
|
||||
.slider-item-container { |
||||
//overflow:hidden; |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
/* SLIDER ELEMENTS |
||||
================================================== */ |
||||
.slider { |
||||
img, embed, object, video, iframe { |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
|
||||
/* SLIDER NAV |
||||
================================================== */ |
||||
.slider { |
||||
//position: relative; |
||||
|
||||
.nav-previous, .nav-next { |
||||
position:fixed; |
||||
top: 0px; |
||||
//background-color: #f5f5f5; // TEMP |
||||
width: @feature-nav-width; |
||||
//height: @feature-nav-height; |
||||
color: #DBDBDB; |
||||
font-size:@base-font-small; |
||||
.nav-container { |
||||
height:100px; |
||||
position:absolute; |
||||
} |
||||
.icon { |
||||
//line-height:@feature-nav-height; |
||||
margin-bottom:@base-space; |
||||
} |
||||
.date { |
||||
//#font > .navigation(bold,@base-font,@base-line); |
||||
#font > .navigation(bold,@base-font,@color-background-dark); |
||||
text-transform: uppercase; |
||||
margin-bottom:5px; |
||||
} |
||||
.date, .title { |
||||
line-height:14px; |
||||
a { |
||||
color: @color-nav-description; |
||||
} |
||||
small { |
||||
display:none; |
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
.nav-previous:hover, .nav-next:hover { |
||||
color: @color-dark-second; |
||||
cursor: pointer; |
||||
} |
||||
|
||||
.nav-previous { |
||||
float: left; |
||||
text-align:left; |
||||
|
||||
|
||||
//margin-left: -100%; |
||||
|
||||
.icon { |
||||
margin-left: 10px; |
||||
padding-left: 20px; |
||||
.icon-previous(); |
||||
} |
||||
.date, .title { |
||||
text-align:left; |
||||
padding-left:10px; |
||||
} |
||||
} |
||||
|
||||
.nav-previous:hover { |
||||
.icon { |
||||
margin-left: 5px; |
||||
padding-left: 20px; |
||||
} |
||||
} |
||||
|
||||
.nav-next { |
||||
float: right; |
||||
text-align:right; |
||||
|
||||
//margin-left: -@feature-nav-width; |
||||
|
||||
.icon { |
||||
margin-right: 10px; |
||||
padding-right: 20px; |
||||
.icon-next() |
||||
} |
||||
.date, .title { |
||||
text-align:right; |
||||
padding-right:10px; |
||||
} |
||||
} |
||||
|
||||
.nav-next:hover { |
||||
.icon { |
||||
margin-right: 5px; |
||||
padding-right: 20px; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
|
||||
/* SLIDE CONTENT |
||||
================================================== */ |
||||
.slider { |
||||
|
||||
.slider-item { |
||||
//top: 0px; |
||||
position:absolute; |
||||
width:700px; |
||||
height:100%; |
||||
//border: 1px solid #CCC; |
||||
padding:0px; |
||||
margin:0px; |
||||
overflow: hidden; |
||||
//overflow:scroll; |
||||
|
||||
display:table; |
||||
//margin-left: auto; |
||||
//margin-right: auto; |
||||
.content { |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
|
||||
/* Layouts |
||||
================================================== */ |
||||
|
||||
/* All Slides |
||||
================================================== */ |
||||
.content-container { |
||||
|
||||
display:table; |
||||
vertical-align:middle; |
||||
|
||||
.text { |
||||
//float: left; |
||||
//height:100%; |
||||
width:40%; |
||||
max-width:50%; |
||||
min-width:120px; |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
//overflow:auto; |
||||
.container { |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
text-align:left; |
||||
padding-right: @base-space; |
||||
//overflow:hidden; |
||||
|
||||
} |
||||
|
||||
} |
||||
.media { |
||||
width:100%; |
||||
min-width:50%; |
||||
float: left; |
||||
|
||||
.media-wrapper { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
|
||||
.media-container { |
||||
display:inline-block; |
||||
overflow: hidden; |
||||
line-height:0px; |
||||
padding:0px; |
||||
//max-height:400px; |
||||
img, iframe { |
||||
border: 1px solid @color-line; |
||||
//max-height:350px; |
||||
} |
||||
.credit, .caption { |
||||
font-family: @font-sansserif; |
||||
|
||||
} |
||||
.credit { |
||||
color: @color-credit; |
||||
text-align: right; |
||||
font-size: 10px; |
||||
line-height: 10px; |
||||
display: block; |
||||
margin: 0 auto; |
||||
margin-top:4px; |
||||
} |
||||
.caption { |
||||
text-align:left; |
||||
margin-top:10px; |
||||
color: @color-caption; |
||||
font-size: 11px; |
||||
line-height: 14px; |
||||
} |
||||
} |
||||
|
||||
} |
||||
} |
||||
.media.text-media { |
||||
.media-wrapper { |
||||
.media-container { |
||||
border: none; |
||||
background-color: @white; |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
/* Text Only Slides |
||||
================================================== */ |
||||
.content-container.layout-text { |
||||
width:100%; |
||||
.text { |
||||
width:100%; |
||||
max-width:100%; |
||||
//.content-columns(2, @base-space); |
||||
.container { |
||||
display:block; |
||||
vertical-align:middle; |
||||
text-align:left; |
||||
padding:0px; |
||||
width: 60%; |
||||
text-align:left; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
/* Media Only Slides |
||||
================================================== */ |
||||
.content-container.layout-media { |
||||
width:100%; |
||||
.text { |
||||
width:100%; |
||||
height:100%; |
||||
max-width:100%; |
||||
display:block; |
||||
//margin-left:10%; |
||||
text-align:center; |
||||
.container { |
||||
display:block; |
||||
text-align:center; |
||||
width:100%; |
||||
margin-left: none; |
||||
margin-right: none; |
||||
} |
||||
} |
||||
.media { |
||||
width:100%; |
||||
min-width:50%; |
||||
float: none; |
||||
|
||||
.media-wrapper { |
||||
//width:100%; |
||||
display:block; |
||||
//margin-left: none; |
||||
//margin-right: none; |
||||
|
||||
.media-container { |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
//display:block; |
||||
overflow: hidden; |
||||
line-height:0px; |
||||
padding:0px; |
||||
//max-height:400px; |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
} |
||||
} |
||||
@ -0,0 +1,39 @@
|
||||
/* |
||||
* Feature |
||||
* |
||||
* ------------------------------------------------------------------------------------------- */ |
||||
|
||||
#timeline { |
||||
|
||||
/* Feature |
||||
================================================== */ |
||||
.feature { |
||||
width: 100%; |
||||
//min-width:960px; |
||||
|
||||
.slider { |
||||
width: 100%; |
||||
float: left; |
||||
position: relative; |
||||
z-index:10; |
||||
padding-top:@base-space; |
||||
.box-shadow(); |
||||
|
||||
h2.date { |
||||
|
||||
line-height: 24px; |
||||
} |
||||
.date, .title { |
||||
a { |
||||
color: @color-nav-description; |
||||
} |
||||
|
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,486 @@
|
||||
/* |
||||
* Navigation |
||||
* UI for Navigation |
||||
* ------------------------------------------------------------------------------------------- */ |
||||
|
||||
#timeline { |
||||
|
||||
.navigation { |
||||
clear:both; |
||||
cursor:move; |
||||
width: 100%; |
||||
height:@navigation-height; |
||||
//overflow: hidden; |
||||
border-top: 1px solid @color-line; |
||||
position: relative; |
||||
//.background-time-tic(); |
||||
.toolbar { |
||||
position:absolute; |
||||
//top: -1px; |
||||
top:45px; |
||||
left:0px; |
||||
z-index:1000; |
||||
background-color: @white; |
||||
//width:59px; |
||||
//height:150px; |
||||
border: 1px solid @color-line; |
||||
//border-top: 1px solid @color-line; |
||||
//border-bottom: 1px solid @color-line; |
||||
//border-right: 1px solid @color-line; |
||||
//.box-shadow(); |
||||
.box-shadow(1px 1px 0px rgba(0,0,0,.20)); |
||||
|
||||
.zoom-in, .zoom-out, .back-home { |
||||
#font > .navigation(normal,10px); |
||||
//line-height:5px; |
||||
//position:absolute; |
||||
//display:inline-block; |
||||
top: 0px; |
||||
z-index:1000; |
||||
width: 18px; |
||||
height: 18px; |
||||
color: @color-navigation-major-time;//@color-nav-description; |
||||
text-align:center; |
||||
//font-size:16px; |
||||
font-weight: bold; |
||||
border: 1px solid @white; |
||||
padding:5px; |
||||
//.box-shadow(1px 1px 0px #666); |
||||
//.box-shadow(); |
||||
.opacity(50); |
||||
|
||||
} |
||||
.zoom-in:hover, .zoom-out:hover, .back-home:hover { |
||||
//background-color: @color-line; //@color-nav-description; |
||||
color: @color-theme; |
||||
cursor: pointer; |
||||
.opacity(100); |
||||
} |
||||
.zoom-in { |
||||
//left:30px; |
||||
.icon { |
||||
//display:inline-block; |
||||
//padding-right:5px; |
||||
.icon-zoom-in(); |
||||
} |
||||
|
||||
} |
||||
.zoom-out { |
||||
//left:0px; |
||||
.icon { |
||||
//display:inline-block; |
||||
//padding-right:5px; |
||||
.icon-zoom-out(); |
||||
} |
||||
|
||||
} |
||||
.back-home { |
||||
.icon { |
||||
.icon-back-home(); |
||||
} |
||||
} |
||||
} |
||||
|
||||
|
||||
.timenav-background { |
||||
position:absolute; |
||||
//z-index:2; |
||||
cursor:move; |
||||
top:0px; |
||||
left:0px; |
||||
height: @navigation-content-height; |
||||
width:100%; |
||||
background-color:@color-background-dark; |
||||
|
||||
.timenav-interval-background { |
||||
position:absolute; |
||||
top:@navigation-content-height + 1; |
||||
left:0px; |
||||
|
||||
background:@white; |
||||
width:100%; |
||||
height:@navigation-time-height - 1; |
||||
|
||||
//.box-shadow(1px -1px 0px rgba(255,255,255,.70)); |
||||
.top-highlight { |
||||
position:absolute; |
||||
top:-1px; |
||||
left:0px; |
||||
z-index:30; |
||||
width:100%; |
||||
height:1px; |
||||
background:@white; |
||||
.opacity(50); |
||||
.box-shadow(1px 1px 5px rgba(0,0,0,.20)); |
||||
} |
||||
|
||||
} |
||||
|
||||
.timenav-line { |
||||
position:absolute; |
||||
top: 0px; |
||||
left: 50%; |
||||
width:3px; |
||||
height:150px; |
||||
background: @color-theme; |
||||
z-index:500; |
||||
.box-shadow(); |
||||
} |
||||
} |
||||
|
||||
.timenav { |
||||
//height:@navigation-height; |
||||
position:absolute; |
||||
top: 0px; |
||||
//left: 0px; |
||||
left: -250px; |
||||
z-index:1; |
||||
//.background-time-tic(); |
||||
|
||||
|
||||
.content { |
||||
//height: @navigation-content-height; |
||||
position: relative; |
||||
//z-index:10; |
||||
|
||||
.marker.start { |
||||
display:none; |
||||
} |
||||
|
||||
.marker.active { |
||||
|
||||
.dot { |
||||
background: @color-theme; |
||||
//.box-shadow(); |
||||
z-index:200; |
||||
} |
||||
.line { |
||||
z-index:199; |
||||
background: @color-theme; |
||||
width:1px; |
||||
.event-line { |
||||
background: @color-theme; |
||||
.opacity(75 ); |
||||
//.box-shadow(); |
||||
} |
||||
} |
||||
.flag { |
||||
//.opacity(100); |
||||
z-index:200; |
||||
.time-flag-active(); |
||||
//.box-shadow(); |
||||
.flag-content { |
||||
h3 { |
||||
color: @color-theme; |
||||
} |
||||
} |
||||
} |
||||
.flag.row1, .flag.row2, .flag.row3 { |
||||
z-index:200; |
||||
} |
||||
|
||||
} |
||||
.marker.active:hover { |
||||
cursor: default; |
||||
|
||||
.flag { |
||||
|
||||
.flag-content { |
||||
h3 { |
||||
color: @color-theme; |
||||
} |
||||
h4 { |
||||
color:@color-nav-title; |
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
.marker:hover { |
||||
.line { |
||||
z-index:500; |
||||
background:@color-nav-title; |
||||
} |
||||
} |
||||
.marker { |
||||
|
||||
position:absolute; |
||||
top: 0px; |
||||
left: 150px; |
||||
display: block; |
||||
//z-index:20; |
||||
|
||||
.dot { |
||||
position:absolute; |
||||
top: 150px; |
||||
left: 0px; |
||||
display: block; |
||||
width: @navigation-marker-height; |
||||
height: @navigation-marker-height; |
||||
background: @color-dark-second; |
||||
.border-radius((@navigation-marker-height)/2); |
||||
z-index:21; |
||||
} |
||||
.line { |
||||
position:absolute; |
||||
top: 0px; |
||||
left: (@navigation-marker-height/2); |
||||
width:1px; |
||||
height:150px; |
||||
background: @color-line; |
||||
//background:@color-line-hover; |
||||
//.opacity(25); |
||||
z-index:22; |
||||
.event-line { |
||||
position:absolute; |
||||
z-index:22; |
||||
left:0px; |
||||
height:1px; |
||||
width:1px; |
||||
//background:@color-line-hover; |
||||
background: @color-theme; |
||||
.opacity(15); |
||||
} |
||||
} |
||||
.flag { |
||||
position:absolute; |
||||
top: 15px; |
||||
left: (@navigation-marker-height/2); |
||||
padding:0px; |
||||
display: block; |
||||
z-index:23; |
||||
width:153px; |
||||
height:56px; |
||||
//overflow:hidden; |
||||
.time-flag(); |
||||
//.opacity(33); |
||||
//border: 1px solid @color-line; |
||||
//.border-radius(5px); |
||||
//.box-shadow(0px 1px 0px @color-line); |
||||
.flag-content { |
||||
padding: 5px 7px 2px 5px; |
||||
overflow:hidden; |
||||
height:33px; |
||||
|
||||
h3 { |
||||
#font > .navigation(bold,@base-font,@base-line); |
||||
//font-weight: bold; |
||||
font-size: 10px; |
||||
line-height:10px; |
||||
//color:@color-nav-date; |
||||
color:@color-nav-title; |
||||
margin-bottom:2px; |
||||
small { |
||||
display:none; |
||||
} |
||||
} |
||||
h4 { |
||||
display:none; |
||||
#font > .navigation(normal,@base-font,@base-line); |
||||
font-size: 10px; |
||||
line-height:10px; |
||||
//color:@color-nav-title; |
||||
color:@color-nav-date; |
||||
small { |
||||
display:none; |
||||
} |
||||
} |
||||
.thumbnail { |
||||
//border: 1px solid @color-line; |
||||
margin-bottom:15px; |
||||
} |
||||
|
||||
} |
||||
} |
||||
.flag:hover { |
||||
cursor: pointer; |
||||
//.opacity(100); |
||||
.time-flag-active(); |
||||
.flag-content { |
||||
h3 { |
||||
color:@color-dark-second; |
||||
} |
||||
h4 { |
||||
color:@color-nav-date; |
||||
} |
||||
.thumbnail { |
||||
//border: 1px solid @color-nav-date; |
||||
} |
||||
} |
||||
} |
||||
|
||||
.flag.row1 { |
||||
z-index:25; |
||||
top:48px; |
||||
} |
||||
.flag.row2 { |
||||
z-index:24; |
||||
top:96px; |
||||
} |
||||
.flag.row3 { |
||||
z-index:23; |
||||
top:1px; |
||||
} |
||||
.flag.zFront { |
||||
z-index:100; |
||||
} |
||||
|
||||
} |
||||
|
||||
.era { |
||||
|
||||
position:absolute; |
||||
top: 138px; |
||||
left: 150px; |
||||
//height:17px; |
||||
height:12px; |
||||
display: block; |
||||
//background-color:@era-background; |
||||
background: @color-theme; |
||||
//.opacity(15); |
||||
overflow:hidden; |
||||
border-left: 1px solid @era-line; |
||||
border-right: 1px solid @era-line; |
||||
border-top: 1px solid @era-line; |
||||
//background:@color-line-hover; |
||||
|
||||
.opacity(75); |
||||
//.border-radius(20); |
||||
-moz-border-radius-topleft: 7px; |
||||
-webkit-border-top-left-radius: 7px; |
||||
border-top-left-radius: 7px; |
||||
|
||||
-moz-border-radius-topright: 7px; |
||||
-webkit-border-top-right-radius: 7px; |
||||
border-top-right-radius: 7px; |
||||
|
||||
|
||||
|
||||
z-index:-10; |
||||
h3 { |
||||
#font > .navigation(bold,10px,10px); |
||||
color:@white; |
||||
position:absolute; |
||||
top:-1px; |
||||
left:9px; |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.time { |
||||
position:absolute; |
||||
left:0px; |
||||
top: @navigation-content-height; |
||||
height:@navigation-time-height; |
||||
background-color:@color-background; |
||||
|
||||
.time-interval-minor { |
||||
|
||||
height: @navigation-marker-height; |
||||
//display:block; |
||||
white-space:nowrap; |
||||
//overflow:hidden; |
||||
position: absolute; |
||||
top:-9px; |
||||
left:8px; |
||||
z-index:10; |
||||
//padding-left:7px; |
||||
.minor { |
||||
position: relative; |
||||
top:0px; |
||||
display:inline-block; |
||||
.background-time-interval(); |
||||
width:100px; |
||||
//width:15px; |
||||
height: @navigation-marker-height; |
||||
background-position: center top; |
||||
white-space:nowrap; |
||||
color: @color-navigation-time; |
||||
margin-top:0px; |
||||
padding-top:0px; |
||||
} |
||||
|
||||
} |
||||
.time-interval { |
||||
white-space:nowrap; |
||||
position:absolute; |
||||
top: @navigation-marker-height - 1; |
||||
left:0px; |
||||
|
||||
div { |
||||
.background-time-interval(); |
||||
background-position:left top; |
||||
background-repeat:no-repeat; |
||||
padding-top:3px;//@base-space; |
||||
position:absolute; |
||||
height:3px;//15px; |
||||
//top:-5px;//@base-space; |
||||
left:0px; |
||||
display:block; |
||||
//width:150px; |
||||
#font > .navigation(normal,10px,@base-line); |
||||
text-transform: uppercase; |
||||
text-align:left; |
||||
text-indent: 0px; |
||||
white-space:nowrap; |
||||
color: @color-navigation-time; |
||||
margin-left:0px; |
||||
margin-right:0px; |
||||
margin-top:1px; |
||||
z-index:2; |
||||
strong { |
||||
font-weight:bold; |
||||
color:@color-navigation-time-strong; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
.time-interval-major { |
||||
white-space:nowrap; |
||||
position:absolute; |
||||
top: @navigation-marker-height - 1; |
||||
left:0px; |
||||
|
||||
div { |
||||
.background-time-interval(); |
||||
background-position:left top; |
||||
background-repeat:no-repeat; |
||||
padding-top:@base-space; |
||||
position:absolute; |
||||
height:15px; |
||||
//top:-5px;//@base-space; |
||||
left:0px; |
||||
display:block; |
||||
//width:150px; |
||||
#font > .navigation(bold,12px,@base-line); |
||||
text-transform: uppercase; |
||||
text-align:left; |
||||
text-indent: 0px; |
||||
white-space:nowrap; |
||||
color: @color-navigation-major-time; |
||||
margin-left:0px; |
||||
margin-right:0px; |
||||
margin-top:1px; |
||||
z-index:5; |
||||
strong { |
||||
font-weight:bold; |
||||
color:@color-navigation-time-strong; |
||||
} |
||||
} |
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
|
||||
|
||||
|
||||
|
||||
} |
||||
|
||||
} |
||||
@ -0,0 +1,165 @@
|
||||
/* |
||||
* Structure |
||||
* Basic and global styles for generating structural layout |
||||
* ------------------------------------------------------------------------------------------- */ |
||||
|
||||
/* TESTING PURPOSES |
||||
================================================== */ |
||||
html, body { |
||||
height:100%; |
||||
padding: 0px; |
||||
margin: 0px; |
||||
} |
||||
/* IPHONE ETC |
||||
================================================== */ |
||||
|
||||
|
||||
|
||||
#timeline { |
||||
width: 100%; |
||||
height:100%; |
||||
//border: 1px solid @color-line; |
||||
padding:0px; |
||||
margin:0px; |
||||
background-color:@color-background; |
||||
position: absolute; |
||||
//border: 1px solid @color-line; |
||||
overflow:hidden; |
||||
|
||||
|
||||
|
||||
/* FEEDBACK |
||||
================================================== */ |
||||
.feedback { |
||||
position: absolute; |
||||
display:table; |
||||
overflow:hidden; |
||||
top:0px; |
||||
left:0px; |
||||
z-index:2000; |
||||
width: 100%; |
||||
height:100%; |
||||
background-color:@color-background-dark; |
||||
border: 1px solid @color-line; |
||||
//.opacity(80); |
||||
.messege { |
||||
display:table-cell; |
||||
vertical-align:middle; |
||||
font-size: 28px; |
||||
font-family:@font-sansserif; |
||||
font-weight: bold; |
||||
text-transform: uppercase; |
||||
line-height: 36px; |
||||
width:75%; |
||||
margin-left:auto; |
||||
margin-right:auto; |
||||
margin-top:auto; |
||||
margin-bottom:auto; |
||||
text-align: center; |
||||
|
||||
} |
||||
} |
||||
|
||||
/* Container |
||||
================================================== */ |
||||
.container.main { |
||||
//margin-bottom:@base-space; |
||||
//margin-top:@base-space; |
||||
position: absolute; |
||||
top:0px: |
||||
left:0px; |
||||
padding-bottom:3px; |
||||
//margin-top:@base-space; |
||||
width: auto; |
||||
height: auto; |
||||
margin:0px; |
||||
clear:both; |
||||
} |
||||
img, embed, object, video, iframe { |
||||
max-width: 100%; |
||||
} |
||||
iframe { |
||||
//margin-bottom:5px; |
||||
} |
||||
img { |
||||
max-height:100%; |
||||
//border: 1px solid @color-line; |
||||
border: 1px solid @color-credit; |
||||
} |
||||
a { |
||||
color:@color-theme; |
||||
text-decoration: none; |
||||
} |
||||
a:hover { |
||||
color:@color-theme-dark; |
||||
text-decoration: underline; |
||||
} |
||||
.twitter { |
||||
text-align:left; |
||||
//max-width:500px; |
||||
background-color:@white; |
||||
margin-left: auto; |
||||
margin-right: auto; |
||||
blockquote { |
||||
font-size: @base-font; |
||||
line-height: @base-line; |
||||
font-family: @font-sansserif; |
||||
color:@color-feature-description; |
||||
p { |
||||
font-size: 28px; |
||||
line-height: 36px; |
||||
margin-bottom: 6px; |
||||
padding-top: 10px; |
||||
background-color:@white; |
||||
font-family: @font-serif; |
||||
color:@color-feature-title; |
||||
|
||||
} |
||||
} |
||||
|
||||
} |
||||
|
||||
.layout-media { |
||||
.twitter { |
||||
max-width:70%; |
||||
} |
||||
} |
||||
|
||||
.thumbnail { |
||||
width:24px; |
||||
height:24px; |
||||
overflow:hidden; |
||||
float:left; |
||||
margin-right:5px; |
||||
border: 1px solid @color-line; |
||||
} |
||||
.thumbnail.twitter { |
||||
.icon-twitter(); |
||||
} |
||||
.thumbnail.vimeo { |
||||
.icon-vimeo(); |
||||
} |
||||
.thumbnail.youtube { |
||||
.icon-youtube(); |
||||
} |
||||
.thumbnail.soundcloud { |
||||
.icon-soundcloud(); |
||||
} |
||||
.thumbnail.map { |
||||
.icon-map(); |
||||
//.icon-map-pin(); |
||||
} |
||||
.zFront { |
||||
z-index:500; |
||||
} |
||||
|
||||
} |
||||
|
||||
|
||||
|
||||
@import "structure-feature.less"; |
||||
|
||||
@import "slider.less"; |
||||
|
||||
@import "structure-navigation.less"; |
||||
|
||||
@ -0,0 +1,26 @@
|
||||
/* Timeline |
||||
* CSS |
||||
* Version: 0.1 |
||||
* Date: January 12, 2011 |
||||
* Copyright 2012 Zach Wise |
||||
* Designed and built by Zach Wise digitalartwork.net |
||||
* ----------------------------------------------------- */ |
||||
|
||||
|
||||
// CSS Reset |
||||
@import "reset.less"; |
||||
|
||||
// Core variables and mixins |
||||
@import "variables.less"; // Modify this for custom colors, font-sizes, etc |
||||
@import "mixins.less"; |
||||
@import "gfx.less"; |
||||
|
||||
// Grid system and page structure |
||||
@import "structure.less"; |
||||
|
||||
// Typography |
||||
@import "type.less"; |
||||
|
||||
// Elements |
||||
@import "elements.less"; // UI Elements etc |
||||
|
||||
@ -0,0 +1,172 @@
|
||||
/* 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; |
||||
} |
||||
|
||||
|
||||
} |
||||
@ -0,0 +1,100 @@
|
||||
/* Variables.less |
||||
* Variables to customize the look and feel |
||||
* ----------------------------------------------------- */ |
||||
|
||||
|
||||
/* Colors |
||||
================================================== */ |
||||
|
||||
@color-line: #CCC; |
||||
@color-line-hover: #666; |
||||
|
||||
@color-dark:#000; |
||||
@color-dark-second: #333; |
||||
@color-dark-third: #666; |
||||
@color-dark-fourth: #999; |
||||
@color-dark-fifth: #E3E3E3; |
||||
@color-dark-fifth: #E3E3E3; |
||||
|
||||
|
||||
/* COLOR SCHEME |
||||
================================================== */ |
||||
|
||||
@color-theme: #08C; //#FF3712; //#FF0000; |
||||
@color-theme-dark: darken(@color-theme, 15); |
||||
@color-theme-complement: spin(@color-theme, 180); |
||||
@color-theme-complement-dark: darken(@color-theme-complement, 15); |
||||
|
||||
@color-theme-split1: spin(@color-theme, -158); |
||||
@color-theme-split2: spin(@color-theme, 158); |
||||
|
||||
@color-theme-triad1: spin(@color-theme, -135); |
||||
@color-theme-triad2: spin(@color-theme, 135); |
||||
|
||||
@color-theme-tetra1: spin(@color-theme, -90); |
||||
@color-theme-tetra2: spin(@color-theme, 90); |
||||
|
||||
@color-theme-analog1: spin(@color-theme, -22); |
||||
@color-theme-analog2: spin(@color-theme, 22); |
||||
|
||||
@color-background: #FFF; |
||||
@color-background-dark: #E9E9E9; |
||||
|
||||
@white: #FFF; |
||||
|
||||
|
||||
/* CLEANUP IN PROGRESS |
||||
================================================== */ |
||||
|
||||
// Navigation |
||||
@color-nav-date: #AAA; // 33% |
||||
@color-nav-description: #999; // 40% |
||||
@color-nav-title: #999; |
||||
|
||||
// Feature |
||||
@color-feature-date: #666; |
||||
@color-feature-description: #666; |
||||
@color-feature-title: #000; |
||||
|
||||
|
||||
@color-caption:#666; |
||||
@color-credit:#999; |
||||
|
||||
// Navigation |
||||
@color-navigation-time: #666; // 60% |
||||
@color-navigation-major-time: #333; // 80% |
||||
@color-navigation-time-strong: #000; // 100% |
||||
|
||||
|
||||
@era-background: #E2E2E2; //#E3E3E3; // 11% |
||||
@era-line:@color-line; |
||||
@era-text:@color-feature-date; |
||||
/* Sizes |
||||
================================================== */ |
||||
|
||||
// Baseline grid |
||||
@base-font: 14px; |
||||
@base-line: 20px; |
||||
@base-space: 15px; |
||||
@base-font-small: 11px; |
||||
|
||||
// Feature Element Sizes |
||||
@feature-content-text: 200px; |
||||
@feature-content-width: 720px; |
||||
@feature-content-height: 400px; |
||||
|
||||
// Feature Navigation |
||||
@feature-nav-width: 100px; |
||||
@feature-nav-height: 200px; |
||||
|
||||
// Navigation |
||||
@navigation-height: 200px; |
||||
@navigation-time-height: 50px; |
||||
@navigation-content-height: @navigation-height - @navigation-time-height; |
||||
|
||||
// Marker |
||||
@navigation-marker-height:6px; |
||||
|
||||
@font-sansserif: "Helvetica Neue", Helvetica, Arial, sans-serif; |
||||
@font-serif: "Georgia", Times New Roman, Times, serif; |
||||
|
||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,112 @@
|
||||
#timeline h1,#timeline h2,#timeline h3,#timeline h4,#timeline h5,#timeline h6,#timeline p,#timeline blockquote,#timeline pre,#timeline a,#timeline abbr,#timeline acronym,#timeline address,#timeline cite,#timeline code,#timeline del,#timeline dfn,#timeline em,#timeline img,#timeline q,#timeline s,#timeline samp,#timeline small,#timeline strike,#timeline strong,#timeline sub,#timeline sup,#timeline tt,#timeline var,#timeline dd,#timeline dl,#timeline dt,#timeline li,#timeline ol,#timeline ul,#timeline fieldset,#timeline form,#timeline label,#timeline legend,#timeline button,#timeline table,#timeline caption,#timeline tbody,#timeline tfoot,#timeline thead,#timeline tr,#timeline th,#timeline td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;} |
||||
#timeline table{border-collapse:collapse;border-spacing:0;} |
||||
#timeline ol,#timeline ul{list-style:none;} |
||||
#timeline q:before,#timeline q:after,#timeline blockquote:before,#timeline blockquote:after{content:"";} |
||||
#timeline a:focus{outline:thin dotted;} |
||||
#timeline a:hover,#timeline a:active{outline:0;} |
||||
#timeline article,#timeline aside,#timeline details,#timeline figcaption,#timeline figure,#timeline footer,#timeline header,#timeline hgroup,#timeline nav,#timeline section{display:block;} |
||||
#timeline audio,#timeline canvas,#timeline video{display:inline-block;*display:inline;*zoom:1;} |
||||
#timeline audio:not([controls]){display:none;} |
||||
#timeline sub,#timeline sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;} |
||||
#timeline sup{top:-0.5em;} |
||||
#timeline sub{bottom:-0.25em;} |
||||
#timeline img{border:0;-ms-interpolation-mode:bicubic;} |
||||
#timeline button,#timeline input,#timeline select,#timeline textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle;} |
||||
#timeline button,#timeline input{line-height:normal;*overflow:visible;} |
||||
#timeline button::-moz-focus-inner,#timeline input::-moz-focus-inner{border:0;padding:0;} |
||||
#timeline button,#timeline input[type="button"],#timeline input[type="reset"],#timeline input[type="submit"]{cursor:pointer;-webkit-appearance:button;} |
||||
#timeline input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;box-sizing:content-box;} |
||||
#timeline input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;} |
||||
#timeline textarea{overflow:auto;vertical-align:top;} |
||||
html,body{height:100%;padding:0px;margin:0px;} |
||||
#timeline{width:100%;height:100%;padding:0px;margin:0px;background-color:#ffffff;position:absolute;overflow:hidden;}#timeline .feedback{position:absolute;display:table;overflow:hidden;top:0px;left:0px;z-index:2000;width:100%;height:100%;background-color:#e9e9e9;border:1px solid #cccccc;}#timeline .feedback .messege{display:table-cell;vertical-align:middle;font-size:28px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;text-transform:uppercase;line-height:36px;width:75%;margin-left:auto;margin-right:auto;margin-top:auto;margin-bottom:auto;text-align:center;} |
||||
#timeline .container.main{position:absolute;top:0px: left:0px;padding-bottom:3px;width:auto;height:auto;margin:0px;clear:both;} |
||||
#timeline img,#timeline embed,#timeline object,#timeline video,#timeline iframe{max-width:100%;} |
||||
#timeline img{max-height:100%;border:1px solid #999999;} |
||||
#timeline a{color:#0088cc;text-decoration:none;} |
||||
#timeline a:hover{color:#005580;text-decoration:underline;} |
||||
#timeline .twitter{text-align:left;background-color:#ffffff;margin-left:auto;margin-right:auto;}#timeline .twitter blockquote{font-size:14px;line-height:20px;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#666666;}#timeline .twitter blockquote p{font-size:28px;line-height:36px;margin-bottom:6px;padding-top:10px;background-color:#ffffff;font-family:"Georgia",Times New Roman,Times,serif;color:#000000;} |
||||
#timeline .layout-media .twitter{max-width:70%;} |
||||
#timeline .thumbnail{width:24px;height:24px;overflow:hidden;float:left;margin-right:5px;border:1px solid #cccccc;} |
||||
#timeline .thumbnail.twitter{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -889px;width:24px;height:24px;} |
||||
#timeline .thumbnail.vimeo{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -963px;width:24px;height:24px;} |
||||
#timeline .thumbnail.youtube{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -1111px;width:24px;height:24px;} |
||||
#timeline .thumbnail.soundcloud{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -659px;width:24px;height:24px;} |
||||
#timeline .thumbnail.map{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -514px;width:26px;height:21px;} |
||||
#timeline .zFront{z-index:500;} |
||||
#timeline{}#timeline .feature{width:100%;}#timeline .feature .slider{width:100%;float:left;position:relative;z-index:10;padding-top:15px;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);}#timeline .feature .slider h2.date{line-height:24px;} |
||||
#timeline .feature .slider .date a,#timeline .feature .slider .title a{color:#999999;} |
||||
.slider{width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask{text-align:center;width:100%;height:100%;overflow:hidden;}.slider .slider-container-mask .slider-container{position:absolute;top:0px;left:-2160px;width:100%;height:100%;text-align:center;display:block;background-color:#ffffff;}.slider .slider-container-mask .slider-container .slider-item-container{display:table-cell;vertical-align:middle;} |
||||
.slider img,.slider embed,.slider object,.slider video,.slider iframe{max-width:100%;} |
||||
.slider .nav-previous,.slider .nav-next{position:fixed;top:0px;width:100px;color:#DBDBDB;font-size:11px;}.slider .nav-previous .nav-container,.slider .nav-next .nav-container{height:100px;position:absolute;} |
||||
.slider .nav-previous .icon,.slider .nav-next .icon{margin-bottom:15px;} |
||||
.slider .nav-previous .date,.slider .nav-next .date{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:bold;line-height:#e9e9e9;text-transform:uppercase;margin-bottom:5px;} |
||||
.slider .nav-previous .date,.slider .nav-next .date,.slider .nav-previous .title,.slider .nav-next .title{line-height:14px;}.slider .nav-previous .date a,.slider .nav-next .date a,.slider .nav-previous .title a,.slider .nav-next .title a{color:#999999;} |
||||
.slider .nav-previous .date small,.slider .nav-next .date small,.slider .nav-previous .title small,.slider .nav-next .title small{display:none;} |
||||
.slider .nav-previous:hover,.slider .nav-next:hover{color:#333333;cursor:pointer;} |
||||
.slider .nav-previous{float:left;text-align:left;}.slider .nav-previous .icon{margin-left:10px;padding-left:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAAB1SURBVHjafNFXDsAgDAPQAKWDUd//tq2EnS6p+eNJECcYWLmzklFq2Ud1iAKlVNFG2c/zoCiJIJlkA6lOlFBFXU+vIM26lkHypxvzmCnjgg91J6TPRaDJktMVwvATFc+ur7Gb02MCrfA2py/6amGe2b/jEGAA5cYUouw7P64AAAAASUVORK5CYII=) no-repeat scroll 0% 50%;} |
||||
.slider .nav-previous .date,.slider .nav-previous .title{text-align:left;padding-left:10px;} |
||||
.slider .nav-previous:hover .icon{margin-left:5px;padding-left:20px;} |
||||
.slider .nav-next{float:right;text-align:right;}.slider .nav-next .icon{margin-right:10px;padding-right:20px;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAWCAMAAAD6gTxzAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADBQTFRF2dnZWVlZsrKyv7+/TU1NzMzMjY2Nc3Nz5eXlgICAQEBA8vLymZmZZmZmMzMz////CXz3iwAAABB0Uk5T////////////////////AOAjXRkAAABySURBVHjabNFLEoAgDAPQAiJ/ev/buqCJONjlm5GkVcKwEbWR5uaaq4E0V7NB0mg0b5J2mCdpMqpC+kasaNkjrE3Ac530RgSSDkaQ0kFbN6N9g0X5KPFTteAzLuSPtQVScJyGpx1PyNo8NH9HxB6PAAMAzkAUorcBvvAAAAAASUVORK5CYII=) no-repeat scroll 100% 50%;} |
||||
.slider .nav-next .date,.slider .nav-next .title{text-align:right;padding-right:10px;} |
||||
.slider .nav-next:hover .icon{margin-right:5px;padding-right:20px;} |
||||
.slider .slider-item{position:absolute;width:700px;height:100%;padding:0px;margin:0px;overflow:hidden;display:table;}.slider .slider-item .content{display:table-cell;vertical-align:middle;}.slider .slider-item .content .content-container{display:table;vertical-align:middle;}.slider .slider-item .content .content-container .text{width:40%;max-width:50%;min-width:120px;display:table-cell;vertical-align:middle;}.slider .slider-item .content .content-container .text .container{display:table-cell;vertical-align:middle;text-align:left;padding-right:15px;} |
||||
.slider .slider-item .content .content-container .media{width:100%;min-width:50%;float:left;}.slider .slider-item .content .content-container .media .media-wrapper{margin-left:auto;margin-right:auto;}.slider .slider-item .content .content-container .media .media-wrapper .media-container{display:inline-block;overflow:hidden;line-height:0px;padding:0px;}.slider .slider-item .content .content-container .media .media-wrapper .media-container img,.slider .slider-item .content .content-container .media .media-wrapper .media-container iframe{border:1px solid #cccccc;} |
||||
.slider .slider-item .content .content-container .media .media-wrapper .media-container .credit,.slider .slider-item .content .content-container .media .media-wrapper .media-container .caption{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} |
||||
.slider .slider-item .content .content-container .media .media-wrapper .media-container .credit{color:#999999;text-align:right;font-size:10px;line-height:10px;display:block;margin:0 auto;margin-top:4px;} |
||||
.slider .slider-item .content .content-container .media .media-wrapper .media-container .caption{text-align:left;margin-top:10px;color:#666666;font-size:11px;line-height:14px;} |
||||
.slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container{border:none;background-color:#ffffff;} |
||||
.slider .slider-item .content .content-container.layout-text{width:100%;}.slider .slider-item .content .content-container.layout-text .text{width:100%;max-width:100%;}.slider .slider-item .content .content-container.layout-text .text .container{display:block;vertical-align:middle;text-align:left;padding:0px;width:60%;text-align:left;margin-left:auto;margin-right:auto;} |
||||
.slider .slider-item .content .content-container.layout-media{width:100%;}.slider .slider-item .content .content-container.layout-media .text{width:100%;height:100%;max-width:100%;display:block;text-align:center;}.slider .slider-item .content .content-container.layout-media .text .container{display:block;text-align:center;width:100%;margin-left:none;margin-right:none;} |
||||
.slider .slider-item .content .content-container.layout-media .media{width:100%;min-width:50%;float:none;}.slider .slider-item .content .content-container.layout-media .media .media-wrapper{display:block;}.slider .slider-item .content .content-container.layout-media .media .media-wrapper .media-container{margin-left:auto;margin-right:auto;overflow:hidden;line-height:0px;padding:0px;} |
||||
#timeline .navigation{clear:both;cursor:move;width:100%;height:200px;border-top:1px solid #cccccc;position:relative;}#timeline .navigation .toolbar{position:absolute;top:45px;left:0px;z-index:1000;background-color:#ffffff;border:1px solid #cccccc;-webkit-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);-moz-box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);box-shadow:1px 1px 0px rgba(0, 0, 0, 0.2);}#timeline .navigation .toolbar .zoom-in,#timeline .navigation .toolbar .zoom-out,#timeline .navigation .toolbar .back-home{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:10px;font-weight:normal;line-height:20px;top:0px;z-index:1000;width:18px;height:18px;color:#333333;text-align:center;font-weight:bold;border:1px solid #ffffff;padding:5px;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;} |
||||
#timeline .navigation .toolbar .zoom-in:hover,#timeline .navigation .toolbar .zoom-out:hover,#timeline .navigation .toolbar .back-home:hover{color:#0088cc;cursor:pointer;filter:alpha(opacity=100);-khtml-opacity:1;-moz-opacity:1;opacity:1;} |
||||
#timeline .navigation .toolbar .zoom-in .icon{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -1507px;width:16px;height:16px;} |
||||
#timeline .navigation .toolbar .zoom-out .icon{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -1647px;width:16px;height:16px;} |
||||
#timeline .navigation .toolbar .back-home .icon{background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -1303px;width:16px;height:12px;} |
||||
#timeline .navigation .timenav-background{position:absolute;cursor:move;top:0px;left:0px;height:150px;width:100%;background-color:#e9e9e9;}#timeline .navigation .timenav-background .timenav-interval-background{position:absolute;top:151px;left:0px;background:#ffffff;width:100%;height:49px;}#timeline .navigation .timenav-background .timenav-interval-background .top-highlight{position:absolute;top:-1px;left:0px;z-index:30;width:100%;height:1px;background:#ffffff;filter:alpha(opacity=50);-khtml-opacity:0.5;-moz-opacity:0.5;opacity:0.5;-webkit-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);-moz-box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);box-shadow:1px 1px 5px rgba(0, 0, 0, 0.2);} |
||||
#timeline .navigation .timenav-background .timenav-line{position:absolute;top:0px;left:50%;width:3px;height:150px;background:#0088cc;z-index:500;-webkit-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);-moz-box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);box-shadow:1px 1px 7px rgba(0, 0, 0, 0.3);} |
||||
#timeline .navigation .timenav{position:absolute;top:0px;left:-250px;z-index:1;}#timeline .navigation .timenav .content{position:relative;}#timeline .navigation .timenav .content .marker.start{display:none;} |
||||
#timeline .navigation .timenav .content .marker.active .dot{background:#0088cc;z-index:200;} |
||||
#timeline .navigation .timenav .content .marker.active .line{z-index:199;background:#0088cc;width:1px;}#timeline .navigation .timenav .content .marker.active .line .event-line{background:#0088cc;filter:alpha(opacity=75);-khtml-opacity:0.75;-moz-opacity:0.75;opacity:0.75;} |
||||
#timeline .navigation .timenav .content .marker.active .flag{z-index:200;background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -110px;width:153px;height:60px;}#timeline .navigation .timenav .content .marker.active .flag .flag-content h3{color:#0088cc;} |
||||
#timeline .navigation .timenav .content .marker.active .flag.row1,#timeline .navigation .timenav .content .marker.active .flag.row2,#timeline .navigation .timenav .content .marker.active .flag.row3{z-index:200;} |
||||
#timeline .navigation .timenav .content .marker.active:hover{cursor:default;}#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h3{color:#0088cc;} |
||||
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4{color:#999999;} |
||||
#timeline .navigation .timenav .content .marker:hover .line{z-index:500;background:#999999;} |
||||
#timeline .navigation .timenav .content .marker{position:absolute;top:0px;left:150px;display:block;}#timeline .navigation .timenav .content .marker .dot{position:absolute;top:150px;left:0px;display:block;width:6px;height:6px;background:#333333;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;z-index:21;} |
||||
#timeline .navigation .timenav .content .marker .line{position:absolute;top:0px;left:3px;width:1px;height:150px;background:#cccccc;z-index:22;}#timeline .navigation .timenav .content .marker .line .event-line{position:absolute;z-index:22;left:0px;height:1px;width:1px;background:#0088cc;filter:alpha(opacity=15);-khtml-opacity:0.15;-moz-opacity:0.15;opacity:0.15;} |
||||
#timeline .navigation .timenav .content .marker .flag{position:absolute;top:15px;left:3px;padding:0px;display:block;z-index:23;width:153px;height:56px;background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 0;width:153px;height:60px;}#timeline .navigation .timenav .content .marker .flag .flag-content{padding:5px 7px 2px 5px;overflow:hidden;height:33px;}#timeline .navigation .timenav .content .marker .flag .flag-content h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:bold;line-height:20px;font-size:10px;line-height:10px;color:#999999;margin-bottom:2px;}#timeline .navigation .timenav .content .marker .flag .flag-content h3 small{display:none;} |
||||
#timeline .navigation .timenav .content .marker .flag .flag-content h4{display:none;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:14px;font-weight:normal;line-height:20px;font-size:10px;line-height:10px;color:#aaaaaa;}#timeline .navigation .timenav .content .marker .flag .flag-content h4 small{display:none;} |
||||
#timeline .navigation .timenav .content .marker .flag .flag-content .thumbnail{margin-bottom:15px;} |
||||
#timeline .navigation .timenav .content .marker .flag:hover{cursor:pointer;background-image:url(timeline.png);background-repeat:no-repeat;background-position:0 -110px;width:153px;height:60px;}#timeline .navigation .timenav .content .marker .flag:hover .flag-content h3{color:#333333;} |
||||
#timeline .navigation .timenav .content .marker .flag:hover .flag-content h4{color:#aaaaaa;} |
||||
#timeline .navigation .timenav .content .marker .flag.row1{z-index:25;top:48px;} |
||||
#timeline .navigation .timenav .content .marker .flag.row2{z-index:24;top:96px;} |
||||
#timeline .navigation .timenav .content .marker .flag.row3{z-index:23;top:1px;} |
||||
#timeline .navigation .timenav .content .marker .flag.zFront{z-index:100;} |
||||
#timeline .navigation .timenav .content .era{position:absolute;top:138px;left:150px;height:12px;display:block;background:#0088cc;overflow:hidden;border-left:1px solid #cccccc;border-right:1px solid #cccccc;border-top:1px solid #cccccc;filter:alpha(opacity=75);-khtml-opacity:0.75;-moz-opacity:0.75;opacity:0.75;-moz-border-radius-topleft:7px;-webkit-border-top-left-radius:7px;border-top-left-radius:7px;-moz-border-radius-topright:7px;-webkit-border-top-right-radius:7px;border-top-right-radius:7px;z-index:-10;}#timeline .navigation .timenav .content .era h3{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:10px;font-weight:bold;line-height:10px;color:#ffffff;position:absolute;top:-1px;left:9px;} |
||||
#timeline .navigation .timenav .time{position:absolute;left:0px;top:150px;height:50px;background-color:#ffffff;}#timeline .navigation .timenav .time .time-interval-minor{height:6px;white-space:nowrap;position:absolute;top:-9px;left:8px;z-index:10;}#timeline .navigation .timenav .time .time-interval-minor .minor{position:relative;top:0px;display:inline-block;background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC);width:100px;height:6px;background-position:center top;white-space:nowrap;color:#666666;margin-top:0px;padding-top:0px;} |
||||
#timeline .navigation .timenav .time .time-interval{white-space:nowrap;position:absolute;top:5px;left:0px;}#timeline .navigation .timenav .time .time-interval div{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC);background-position:left top;background-repeat:no-repeat;padding-top:3px;position:absolute;height:3px;left:0px;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:10px;font-weight:normal;line-height:20px;text-transform:uppercase;text-align:left;text-indent:0px;white-space:nowrap;color:#666666;margin-left:0px;margin-right:0px;margin-top:1px;z-index:2;}#timeline .navigation .timenav .time .time-interval div strong{font-weight:bold;color:#000000;} |
||||
#timeline .navigation .timenav .time .time-interval-major{white-space:nowrap;position:absolute;top:5px;left:0px;}#timeline .navigation .timenav .time .time-interval-major div{background-image:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAMCAMAAACdvocfAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAAZQTFRFzMzM////040VdgAAAAJ0Uk5T/wDltzBKAAAAEklEQVR42mJgYAQCBopJgAADAAbwADHy2qHzAAAAAElFTkSuQmCC);background-position:left top;background-repeat:no-repeat;padding-top:15px;position:absolute;height:15px;left:0px;display:block;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-size:12px;font-weight:bold;line-height:20px;text-transform:uppercase;text-align:left;text-indent:0px;white-space:nowrap;color:#333333;margin-left:0px;margin-right:0px;margin-top:1px;z-index:5;}#timeline .navigation .timenav .time .time-interval-major div strong{font-weight:bold;color:#000000;} |
||||
#timeline{font-family:"Georgia",Times New Roman,Times,serif;-webkit-font-smoothing:antialiased;-webkit-text-size-adjust:100%;font-size:14px;font-weight:normal;line-height:20px;}#timeline p{font-size:14px;font-weight:normal;line-height:20px;margin-bottom:20px;color:#666666;}#timeline p small{font-size:12px;} |
||||
#timeline p:first-child{margin-top:20px;} |
||||
#timeline .navigation p{color:#999999;} |
||||
#timeline .feature h3,#timeline .feature h4,#timeline .feature h5,#timeline .feature h6{margin-bottom:15px;} |
||||
#timeline .feature p{color:#666666;} |
||||
#timeline h1,#timeline h2,#timeline h3,#timeline h4,#timeline h5,#timeline h6{font-weight:normal;color:#000000;}#timeline h1 a,#timeline h2 a,#timeline h3 a,#timeline h4 a,#timeline h5 a,#timeline h6 a{color:#999999;} |
||||
#timeline h1 small,#timeline h2 small,#timeline h3 small,#timeline h4 small,#timeline h5 small,#timeline h6 small{color:#999999;} |
||||
#timeline h1.date,#timeline h2.date,#timeline h3.date,#timeline h4.date,#timeline h5.date,#timeline h6.date{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;font-weight:bold;} |
||||
#timeline h2.start{font-size:42px;line-height:44px;} |
||||
#timeline h1{margin-bottom:15px;font-size:32px;line-height:34px;}#timeline h1 small{font-size:18px;} |
||||
#timeline h2{margin-bottom:15px;font-size:28px;line-height:30px;}#timeline h2 small{font-size:14px;line-height:16px;} |
||||
#timeline h3,#timeline h4,#timeline h5,#timeline h6{line-height:40px;}#timeline h3 .active,#timeline h4 .active,#timeline h5 .active,#timeline h6 .active{color:#0088cc;} |
||||
#timeline h3{font-size:24px;line-height:24px;}#timeline h3 small{font-size:14px;} |
||||
#timeline h4{font-size:16px;line-height:18px;}#timeline h4 small{font-size:12px;} |
||||
#timeline h5{font-size:14px;line-height:16px;} |
||||
#timeline h6{font-size:13px;line-height:14px;text-transform:uppercase;} |
||||
#timeline strong{font-weight:bold;} |
||||
#timeline Q{quotes:'„' '“';font-style:italic;} |
||||
#timeline .credit,#timeline .caption{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;} |
||||
#timeline .credit{color:#999999;text-align:right;font-size:10px;line-height:10px;display:block;margin:0 auto;} |
||||
#timeline .caption{text-align:left;margin-top:5px;color:#666666;font-size:11px;line-height:14px;} |
||||
|
After Width: | Height: | Size: 12 KiB |
Loading…
Reference in new issue