playground
/
TimelineJS
mirror of https://github.com/NUKnightLab/TimelineJS.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Refactored LESS file structure and small bug fixes

pull/23/merge
Zach Wise 13 years ago
parent
b33c4c9ee8
commit
ad977bb583
40 changed files with 537 additions and 630 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 4
      locale/de.js
  2. 4
      locale/en.js
  3. 4
      locale/es.js
  4. 4
      locale/fr.js
  5. 4
      locale/is.js
  6. 4
      locale/it.js
  7. 4
      locale/kr.js
  8. 4
      locale/nl.js
  9. 4
      locale/pt-br.js
  10. 4
      locale/zh-ch.js
  11. 4
      locale/zh-tw.js
  12. BIN
      source/gfx/timeline.backup.png
  13. BIN
      source/gfx/timeline.png
  14. BIN
      source/gfx/timeline.png.backup.png
  15. BIN
      source/gfx/timeline.psd
  16. 6
      source/js/VMM.Slider.js
  17. 10
      source/less/Font.Arvo.PTSans.less
  18. 21
      source/less/Font.Default.less
  19. 10
      source/less/Font.Merriweather.NewsCycle.less
  20. 10
      source/less/Font.PoiretOne.Molengo.less
  21. 0
      source/less/GFX.Dark.less
  22. 72
      source/less/Typography.less
  23. 80
      source/less/VMM.Slider.less
  24. 26
      source/less/VMM.Timeline.Core.less
  25. 92
      source/less/VMM.Timeline.Theme.Dark.less
  26. 6
      source/less/VMM.Timeline.TimeNav.less
  27. 0
      source/less/VMM.Timeline.Tooltip.less
  28. 57
      source/less/VMM.Timeline.less
  29. 0
      source/less/Variables.Dark.less
  30. 16
      source/less/elements.less
  31. 13
      source/less/fonts.less
  32. 7
      source/less/gfx.less
  33. 53
      source/less/structure-feature.less
  34. 26
      source/less/timeline-dark.less
  35. 12
      source/less/variables.less
  36. 390
      timeline-dark.css
  37. 4
      timeline-min.js
  38. 206
      timeline.css
  39. 6
      timeline.js
  40. BIN
      timeline.png

4
locale/de.js
View File

File diff suppressed because one or more lines are too long

4
locale/en.js
View File

File diff suppressed because one or more lines are too long

4
locale/es.js
View File

File diff suppressed because one or more lines are too long

4
locale/fr.js
View File

File diff suppressed because one or more lines are too long

4
locale/is.js
View File

File diff suppressed because one or more lines are too long

4
locale/it.js
View File

File diff suppressed because one or more lines are too long

4
locale/kr.js
View File

File diff suppressed because one or more lines are too long

4
locale/nl.js
View File

File diff suppressed because one or more lines are too long

4
locale/pt-br.js
View File

File diff suppressed because one or more lines are too long

4
locale/zh-ch.js
View File

File diff suppressed because one or more lines are too long

4
locale/zh-tw.js
View File

File diff suppressed because one or more lines are too long

BIN
source/gfx/timeline.backup.png
View File

Binary file not shown.
Side by Side

Before

Width:  |  Height:  |  Size: 12 KiB

BIN
source/gfx/timeline.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

BIN
source/gfx/timeline.png.backup.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 10 KiB

BIN
source/gfx/timeline.psd
View File

Binary file not shown.

6
source/js/VMM.Slider.js
Unescape View File

@ -356,7 +356,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* FIX FOR NON-WEBKIT BROWSERS /* FIX FOR NON-WEBKIT BROWSERS
================================================== */ ================================================== */
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", ((config.slider.content.width/100) * 60) ); VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", ((config.slider.content.width/100) * 60) );
VMM.Element.css(".slider-item .layout-text-media .media .media-container .twitter .avatar img", "max-width", 32 );
VMM.Element.css(".slider-item .layout-text-media .media .media-container .twitter .avatar img", "max-height", 32 );
/* SOUNDCLOUD /* SOUNDCLOUD
================================================== */ ================================================== */
VMM.Element.css(".slider-item .media .media-container .soundcloud", "max-height", 168 ); VMM.Element.css(".slider-item .media .media-container .soundcloud", "max-height", 168 );
@ -386,7 +387,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Element.width(".slider-item .layout-text-media .media .media-container .soundcloud", _iframe_width); VMM.Element.width(".slider-item .layout-text-media .media .media-container .soundcloud", _iframe_width);
// MAPS // MAPS
VMM.Element.height(".slider-item .media .media-container .map", _iframe_height_full); VMM.Element.height(".slider-item .layout-media .media .media-container .map", _iframe_height_full+60);
VMM.Element.height(".slider-item .layout-text-media .media .media-container .map", _iframe_height_full+120);
// MAX WIDTH // MAX WIDTH
VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.slider.content.width ); VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.slider.content.width );

10
source/less/Font.Arvo.PTSans.less
Unescape View File

@ -0,0 +1,10 @@
/*
FONT
Merriweather and NewsCycle
http://www.google.com/webfonts#UsePlace:use/Collection:News+Cycle:400,700|Merriweather:400,700,900
------------------------------------------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Arvo:400,700,400italic|PT+Sans:400,700);
@font-serif: 'Arvo', serif;
@font-sansserif: 'PT Sans', sans-serif;

21
source/less/Font.Default.less
Unescape View File

@ -0,0 +1,21 @@
/*
FONT
Default
------------------------------------------------------------------------------------------- */
@font-sansserif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-serif: "Georgia", Times New Roman, Times, serif;
//@font-serif: 'Merriweather', serif;
//@font-sansserif: 'News Cycle', sans-serif;
#timeline {
font-family: @font-serif;
.twitter, .messege, .credit, .caption, h1.date, h2.date, h3.date, h4.date, h5.date, h6.date {
font-family: @font-sansserif;
}
p, blockquote, .twitter blockquote p {
font-family: @font-serif;
}
}

10
source/less/Font.Merriweather.NewsCycle.less
Unescape View File

@ -0,0 +1,10 @@
/*
FONT
Merriweather and NewsCycle
http://www.google.com/webfonts#UsePlace:use/Collection:News+Cycle:400,700|Merriweather:400,700,900
------------------------------------------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=News+Cycle:400,700|Merriweather:400,700,900);
@font-serif: 'Merriweather', serif;
@font-sansserif: 'News Cycle', sans-serif;

10
source/less/Font.PoiretOne.Molengo.less
Unescape View File

@ -0,0 +1,10 @@
/*
FONT
Poiret One and Molengo
http://www.google.com/webfonts#UsePlace:use/Collection:News+Cycle:400,700|Merriweather:400,700,900
------------------------------------------------------------------------------------------- */
@import url(http://fonts.googleapis.com/css?family=Poiret+One|Molengo);
@font-serif: 'Poiret One', serif;
@font-sansserif: 'Molengo', sans-serif;

0
source/less/gfx-dark.less → source/less/GFX.Dark.less
Unescape View File

72
source/less/type.less → source/less/Typography.less
Unescape View File

@ -3,17 +3,21 @@
* ---------------------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------------------- */
#timeline { #timeline {
//font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: @base-font;
font-family: @font-serif; font-weight: normal;
line-height: @base-line;
-webkit-font-smoothing: antialiased; /* Fix for webkit rendering */ -webkit-font-smoothing: antialiased; /* Fix for webkit rendering */
-webkit-text-size-adjust: 100%; -webkit-text-size-adjust: 100%;
#font > .shorthand(normal,@base-font,@base-line);
p { p {
#font > .shorthand(normal,@base-font,@base-line); font-size: @base-font;
font-weight: normal;
line-height: @base-line;
margin-bottom: @base-line; margin-bottom: @base-line;
color: @color-feature-description; color: @color-feature-description;
small { small {
font-size: @base-font - 2; font-size: @base-font - 2;
} }
@ -34,6 +38,12 @@
color: @color-feature-description; color: @color-feature-description;
} }
} }
.date, .title {
a {
color: @color-nav-description;
}
}
h1, h2, h3, h4, h5, h6 { h1, h2, h3, h4, h5, h6 {
font-weight: normal; font-weight: normal;
@ -47,7 +57,6 @@
} }
} }
h1.date, h2.date, h3.date, h4.date, h5.date, h6.date { h1.date, h2.date, h3.date, h4.date, h5.date, h6.date {
font-family: @font-sansserif;
font-weight: bold; font-weight: bold;
} }
h2.start { h2.start {
@ -77,7 +86,7 @@
h2.date { h2.date {
font-size: 16px; font-size: 16px;
line-height:18px; line-height:18px;
margin-bottom: 0px; margin-bottom: @base-space/4;
color:@color-feature-date; color:@color-feature-date;
//margin-bottom: @base-space; //margin-bottom: @base-space;
@ -116,48 +125,29 @@
strong { strong {
font-weight:bold; 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 { Q {
quotes: '„' '“'; quotes: '„' '“';
font-style: italic; font-style: italic;
} }
/* Caption and Credits /* BLOCKQUOTES
================================================== */ ================================================== */
.credit, .caption {
font-family: @font-sansserif; blockquote {
font-size: 28px;
text-align:left;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color:@white;
color:@color-feature-title;
} }
/* Caption and Credits
================================================== */
.credit { .credit {
color: @color-credit; color: @color-credit;
text-align: right; text-align: right;

80
source/less/slider.less → source/less/VMM.Slider.less
Unescape View File

@ -1,10 +1,5 @@
/* /* Slider
* Slider ------------------------------------------------------------------------------------------- */
*
* ------------------------------------------------------------------------------------------- */
/* SLIDER CONTAINERS /* SLIDER CONTAINERS
================================================== */ ================================================== */
@ -12,26 +7,20 @@
width:100%; width:100%;
height:100%; height:100%;
overflow:hidden; overflow:hidden;
//-webkit-overflow-scrolling: touch;
.slider-container-mask { .slider-container-mask {
text-align: center; text-align: center;
width:100%; width: 100%;
height:100%; height: 100%;
overflow:hidden; overflow: hidden;
.slider-container { .slider-container {
position:absolute; position: absolute;
top:0px; top: 0px;
left: -2160px; left: -2160px;
width: 100%;
//overflow:hidden; height: 100%;
width:100%;
height:100%;
text-align: center; text-align: center;
display: block;
display:block;
background-color: @white; background-color: @white;
@ -154,63 +143,42 @@
/* SLIDE CONTENT /* SLIDE CONTENT
================================================== */ ================================================== */
.slider { .slider {
.slider-item { .slider-item {
//top: 0px;
position:absolute; position:absolute;
width:700px; width:700px;
height:100%; height:100%;
//border: 1px solid #CCC;
padding:0px; padding:0px;
margin:0px; margin:0px;
overflow: hidden; overflow: hidden;
//overflow:scroll;
display:table; display:table;
//margin-left: auto;
//margin-right: auto;
.content { .content {
display:table-cell; display:table-cell;
vertical-align:middle; vertical-align:middle;
/* Layouts
================================================== */
/* All Slides /* All Slides
================================================== */ ================================================== */
.content-container { .content-container {
display:table; display:table;
vertical-align:middle; vertical-align:middle;
.text { .text {
//float: left;
//height:100%;
width:40%; width:40%;
max-width:50%; max-width:50%;
min-width:120px; min-width:120px;
display:table-cell; display:table-cell;
vertical-align:middle; vertical-align:middle;
//overflow:auto;
.container { .container {
display:table-cell; display:table-cell;
vertical-align:middle; vertical-align:middle;
text-align:left; text-align:left;
padding-right: @base-space; padding-right: @base-space;
//overflow:hidden;
} }
} }
.media { .media {
width:100%; width:100%;
min-width:50%; min-width:50%;
float: left; float: left;
.media-wrapper { .media-wrapper {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
.media-container { .media-container {
display:inline-block; display:inline-block;
overflow: hidden; overflow: hidden;
@ -268,10 +236,6 @@
} }
} }
} }
.credit, .caption {
font-family: @font-sansserif;
}
.credit { .credit {
color: @color-credit; color: @color-credit;
text-align: right; text-align: right;
@ -289,7 +253,6 @@
line-height: 14px; line-height: 14px;
} }
} }
} }
} }
.media.text-media { .media.text-media {
@ -300,8 +263,6 @@
} }
} }
} }
} }
/* Text Only Slides /* Text Only Slides
@ -311,7 +272,6 @@
.text { .text {
width:100%; width:100%;
max-width:100%; max-width:100%;
//.content-columns(2, @base-space);
.container { .container {
display:block; display:block;
vertical-align:middle; vertical-align:middle;
@ -321,7 +281,6 @@
text-align:left; text-align:left;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
} }
} }
@ -335,7 +294,6 @@
height:100%; height:100%;
max-width:100%; max-width:100%;
display:block; display:block;
//margin-left:10%;
text-align:center; text-align:center;
.container { .container {
display:block; display:block;
@ -349,33 +307,19 @@
width:100%; width:100%;
min-width:50%; min-width:50%;
float: none; float: none;
.media-wrapper { .media-wrapper {
//width:100%;
display:block; display:block;
//margin-left: none;
//margin-right: none;
.media-container { .media-container {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
//display:block;
overflow: hidden; overflow: hidden;
line-height:0px; line-height:0px;
padding:0px; padding:0px;
//max-height:400px;
} }
} }
} }
} }
} }
} }
} }

26
source/less/structure.less → source/less/VMM.Timeline.Core.less
Unescape View File

@ -1,5 +1,5 @@
/* /*
* Structure * VMM Timeline Core
* Basic and global styles for generating structural layout * Basic and global styles for generating structural layout
* ------------------------------------------------------------------------------------------- */ * ------------------------------------------------------------------------------------------- */
@ -19,7 +19,7 @@
-webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25); -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.25);
box-shadow: 1px 2px 6px rgba(0,0,0,.25); box-shadow: 1px 2px 6px rgba(0,0,0,.25);
} }
/* TIMELINE /* TIMELINE
================================================== */ ================================================== */
@ -38,6 +38,20 @@
overflow:hidden; overflow:hidden;
/* FEATURE
================================================== */
.feature {
width: 100%;
.slider {
width: 100%;
float: left;
position: relative;
z-index:10;
padding-top:@base-space;
.box-shadow();
}
}
/* FEEDBACK /* FEEDBACK
================================================== */ ================================================== */
@ -57,7 +71,6 @@
display:table-cell; display:table-cell;
vertical-align:middle; vertical-align:middle;
font-size: 28px; font-size: 28px;
font-family:@font-sansserif;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
line-height: 36px; line-height: 36px;
@ -109,8 +122,6 @@
} }
.twitter { .twitter {
text-align:left; text-align:left;
//max-width:500px;
font-family: @font-sansserif;
background-color:@white; background-color:@white;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -126,7 +137,6 @@
margin-bottom: 6px; margin-bottom: 6px;
padding-top: 10px; padding-top: 10px;
background-color:@white; background-color:@white;
font-family: @font-serif;
color:@color-feature-title; color:@color-feature-title;
//margin-left:10px; //margin-left:10px;
} }
@ -236,9 +246,5 @@
@import "structure-feature.less";
@import "slider.less";
@import "structure-navigation.less";

92
source/less/VMM.Timeline.Theme.Dark.less
Unescape View File

@ -0,0 +1,92 @@
/*
Timeline
Theme: Dark
Copyright 2012 Zach Wise
Designed and built by Zach Wise digitalartwork.net
----------------------------------------------------- */
// CSS Reset
@import "Reset.less";
// Core variables and mixins
@import "Font.Default.less";
@import "Variables.less";
@import "Mixins.less";
@import "GFX.less";
// Grid system and page structure
@import "VMM.Timeline.Core.less";
@import "VMM.Slider.less";
@import "VMM.Timeline.TimeNav.less";
// Typography
@import "Typography.less";
// Grid system and page structure
@import "VMM.Timeline.Tooltip.less";
/* MEDIA QUERIES
================================================== */
/* Mobile and iPhone
================================================== */
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
}
/* BELOW 600px
================================================== */
@media (max-width: 600px) {
.slider {
.slider-item {
.content {
.content-container {
display:block;
.text {
width:100%;
max-width:100%;
min-width:120px;
display:block;
.container {
display:block;
}
}
.media {
width:100%;
min-width:50%;
float: none;
.media-wrapper {
margin-left:0px;
margin-right:0px;
width:100%;
display:block;
.media-container {
img, iframe {
width:100%;
//max-height:350px;
}
}
}
}
.media.text-media {
.media-wrapper {
.media-container {
border: none;
background-color: @white;
}
}
}
}
.content-container.layout-text {
}
.content-container.layout-media {
}
}
}
}
}

6
source/less/structure-navigation.less → source/less/VMM.Timeline.TimeNav.less
Unescape View File

@ -1,7 +1,7 @@
/* /*
* Navigation Navigation
* UI for Navigation UI for Navigation
* ------------------------------------------------------------------------------------------- */ ------------------------------------------------------------------------------------------- */
#timeline { #timeline {

0
source/less/tooltip.less → source/less/VMM.Timeline.Tooltip.less
Unescape View File

57
source/less/timeline.less → source/less/VMM.Timeline.less
Unescape View File

@ -1,29 +1,31 @@
/* Timeline /*
* Default Timeline
* Copyright 2012 Zach Wise Theme: Default
* Designed and built by Zach Wise digitalartwork.net Copyright 2012 Zach Wise
* ----------------------------------------------------- */ Designed and built by Zach Wise digitalartwork.net
----------------------------------------------------- */
// CSS Reset // CSS Reset
@import "reset.less"; @import "Reset.less";
// Core variables and mixins // Core variables and mixins
@import "variables.less"; @import "Font.Default.less";
@import "mixins.less"; @import "Variables.less";
@import "gfx.less"; @import "Mixins.less";
@import "GFX.less";
// Grid system and page structure // Grid system and page structure
@import "structure.less"; @import "VMM.Timeline.Core.less";
@import "VMM.Slider.less";
@import "VMM.Timeline.TimeNav.less";
// Typography // Typography
@import "type.less"; @import "Typography.less";
// Elements
@import "elements.less"; // UI Elements etc
// Grid system and page structure // Grid system and page structure
@import "tooltip.less"; @import "VMM.Timeline.Tooltip.less";
/* MEDIA QUERIES /* MEDIA QUERIES
================================================== */ ================================================== */
@ -38,21 +40,11 @@
================================================== */ ================================================== */
@media (max-width: 600px) { @media (max-width: 600px) {
.slider { .slider {
.slider-item { .slider-item {
.content { .content {
/* Layouts
================================================== */
/* All Slides
================================================== */
.content-container { .content-container {
display:block; display:block;
.text { .text {
width:100%; width:100%;
max-width:100%; max-width:100%;
@ -60,15 +52,12 @@
display:block; display:block;
.container { .container {
display:block; display:block;
} }
} }
.media { .media {
width:100%; width:100%;
min-width:50%; min-width:50%;
float: none; float: none;
.media-wrapper { .media-wrapper {
margin-left:0px; margin-left:0px;
margin-right:0px; margin-right:0px;
@ -80,7 +69,6 @@
//max-height:350px; //max-height:350px;
} }
} }
} }
} }
.media.text-media { .media.text-media {
@ -91,24 +79,15 @@
} }
} }
} }
} }
/* Text Only Slides
================================================== */
.content-container.layout-text { .content-container.layout-text {
} }
/* Media Only Slides
================================================== */
.content-container.layout-media { .content-container.layout-media {
} }
} }
} }
} }
} }

0
source/less/variables-dark.less → source/less/Variables.Dark.less
Unescape View File

16
source/less/elements.less
Unescape View File

@ -1,16 +0,0 @@
/* Elements.less
* UI Elements etc
* ---------------------------------------------------------------------------------------- */
#timeline {
.navigation {
}
.feature {
}
}

13
source/less/fonts.less
Unescape View File

@ -1,13 +0,0 @@
/*!
* Fonts
*/
// External Fonts
@import "font-ProximaNova.less";
body {
font: "ProximaNova", sans-serif;
}
// New Stuff

7
source/less/gfx.less
Unescape View File

@ -1,6 +1,7 @@
/* Icons.less /*
* Base64 Icons GFX
* ----------------------------------------------------------------- */ Base64 Icons etc
----------------------------------------------------------------- */
// Next and Back Icons // Next and Back Icons
.icon-previous() { .icon-previous() {

53
source/less/structure-feature.less
Unescape View File

@ -1,53 +0,0 @@
/*
* 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;
}
}
/* BLOCKQUOTES
================================================== */
blockquote {
font-size: 28px;
text-align:left;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color:@white;
font-family: @font-serif;
color:@color-feature-title;
}
}
}
}

26
source/less/timeline-dark.less
Unescape View File

@ -1,26 +0,0 @@
/* Timeline
* Dark
* Copyright 2012 Zach Wise
* Designed and built by Zach Wise digitalartwork.net
* ----------------------------------------------------- */
// CSS Reset
@import "reset.less";
// Core variables and mixins
@import "variables-dark.less";
@import "mixins.less";
@import "gfx-dark.less";
// Grid system and page structure
@import "structure.less";
// Typography
@import "type.less";
// Elements
@import "elements.less"; // UI Elements etc
// Grid system and page structure
@import "tooltip.less";

12
source/less/variables.less
Unescape View File

@ -1,9 +1,8 @@
/* Variables.less /* VARIABLES
* Variables to customize the look and feel ----------------------------------------------------- */
* ----------------------------------------------------- */
/* Colors /* COLORS
================================================== */ ================================================== */
@color-base: #FFF; @color-base: #FFF;
@color-line: #CCC; @color-line: #CCC;
@ -69,6 +68,7 @@
@era-background: #E2E2E2; //#E3E3E3; // 11% @era-background: #E2E2E2; //#E3E3E3; // 11%
@era-line: @color-line; @era-line: @color-line;
@era-text: @color-feature-date; @era-text: @color-feature-date;
/* Sizes /* Sizes
================================================== */ ================================================== */
@ -94,7 +94,3 @@
// Marker // Marker
@navigation-marker-height:6px; @navigation-marker-height:6px;
@font-sansserif: "Helvetica Neue", Helvetica, Arial, sans-serif;
@font-serif: "Georgia", Times New Roman, Times, serif;

390
timeline-dark.css
Unescape View File

@ -1,8 +1,9 @@
/* Timeline /*
* Dark Timeline
* Copyright 2012 Zach Wise Theme: Dark
* Designed and built by Zach Wise digitalartwork.net Copyright 2012 Zach Wise
* ----------------------------------------------------- */ Designed and built by Zach Wise digitalartwork.net
----------------------------------------------------- */
/* Reset.less /* 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). * 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).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@ -162,10 +163,33 @@
overflow: auto; overflow: auto;
vertical-align: top; vertical-align: top;
} }
/* Variables.less /*
* Variables to customize the look and feel FONT
* ----------------------------------------------------- */ Default
/* Colors ------------------------------------------------------------------------------------------- */
#timeline {
font-family: "Georgia", Times New Roman, Times, serif;
}
#timeline .twitter,
#timeline .messege,
#timeline .credit,
#timeline .caption,
#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;
}
#timeline p,
#timeline blockquote,
#timeline .twitter blockquote p {
font-family: "Georgia", Times New Roman, Times, serif;
}
/* VARIABLES
----------------------------------------------------- */
/* COLORS
================================================== */ ================================================== */
/* COLOR SCHEME /* COLOR SCHEME
================================================== */ ================================================== */
@ -176,19 +200,20 @@
/* Mixins.less /* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable * Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */ * ----------------------------------------------------------------- */
/* Icons.less
* Base64 Icons
* ----------------------------------------------------------------- */
/* /*
* Structure GFX
Base64 Icons etc
----------------------------------------------------------------- */
/*
* VMM Timeline Core
* Basic and global styles for generating structural layout * Basic and global styles for generating structural layout
* ------------------------------------------------------------------------------------------- */ * ------------------------------------------------------------------------------------------- */
/* TIMELINE EMBED /* TIMELINE EMBED
================================================== */ ================================================== */
#timeline-embed { #timeline-embed {
background-color: #1a1a1a; background-color: #ffffff;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid #333333; border: 1px solid #cccccc;
padding-top: 20px; padding-top: 20px;
padding-bottom: 20px; padding-bottom: 20px;
clear: both; clear: both;
@ -206,11 +231,14 @@
height: 100%; height: 100%;
padding: 0px; padding: 0px;
margin: 0px; margin: 0px;
background-color: #1a1a1a; background-color: #ffffff;
position: absolute; position: absolute;
z-index: 100; z-index: 100;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
/* FEATURE
================================================== */
/* FEEDBACK /* FEEDBACK
================================================== */ ================================================== */
@ -218,6 +246,19 @@
================================================== */ ================================================== */
} }
#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 .feedback { #timeline .feedback {
position: absolute; position: absolute;
display: table; display: table;
@ -227,14 +268,13 @@
z-index: 2000; z-index: 2000;
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: #262626; background-color: #e9e9e9;
border: 1px solid #333333; border: 1px solid #cccccc;
} }
#timeline .feedback .messege { #timeline .feedback .messege {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
font-size: 28px; font-size: 28px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
line-height: 36px; line-height: 36px;
@ -267,17 +307,16 @@
border: 1px solid #999999; border: 1px solid #999999;
} }
#timeline a { #timeline a {
color: #0bd4e3; color: #0088cc;
text-decoration: none; text-decoration: none;
} }
#timeline a:hover { #timeline a:hover {
color: #07909a; color: #005580;
text-decoration: underline; text-decoration: underline;
} }
#timeline .twitter { #timeline .twitter {
text-align: left; text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; background-color: #ffffff;
background-color: #1a1a1a;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
margin-bottom: 15px; margin-bottom: 15px;
@ -286,22 +325,21 @@
#timeline .twitter blockquote { #timeline .twitter blockquote {
font-size: 15px; font-size: 15px;
line-height: 20px; line-height: 20px;
color: #aaaaaa; color: #666666;
} }
#timeline .twitter blockquote p { #timeline .twitter blockquote p {
font-size: 28px; font-size: 28px;
line-height: 36px; line-height: 36px;
margin-bottom: 6px; margin-bottom: 6px;
padding-top: 10px; padding-top: 10px;
background-color: #1a1a1a; background-color: #ffffff;
font-family: "Georgia", Times New Roman, Times, serif; color: #000000;
color: #ffffff;
} }
#timeline .twitter blockquote .quote-mark { #timeline .twitter blockquote .quote-mark {
color: #aaaaaa; color: #666666;
} }
#timeline .twitter .created-at { #timeline .twitter .created-at {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -889px; background-position: 0 -889px;
width: 24px; width: 24px;
@ -328,7 +366,7 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
#timeline .twitter .vcard a { #timeline .twitter .vcard a {
color: #aaaaaa; color: #333333;
} }
#timeline .twitter .vcard a:hover { #timeline .twitter .vcard a:hover {
text-decoration: none; text-decoration: none;
@ -347,7 +385,7 @@
#timeline .twitter .vcard .nickname { #timeline .twitter .vcard .nickname {
margin-top: 3px; margin-top: 3px;
display: block; display: block;
color: #aaaaaa; color: #666666;
} }
#timeline .twitter .vcard .avatar { #timeline .twitter .vcard .avatar {
float: left; float: left;
@ -369,45 +407,45 @@
overflow: hidden; overflow: hidden;
float: left; float: left;
margin-right: 5px; margin-right: 5px;
border: 1px solid #333333; border: 1px solid #cccccc;
} }
#timeline .thumbnail.twitter { #timeline .thumbnail.twitter {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -889px; background-position: 0 -889px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
#timeline .thumbnail.vimeo { #timeline .thumbnail.vimeo {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -963px; background-position: 0 -963px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
#timeline .thumbnail.youtube { #timeline .thumbnail.youtube {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -1111px; background-position: 0 -1111px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
#timeline .thumbnail.soundcloud { #timeline .thumbnail.soundcloud {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -659px; background-position: 0 -659px;
width: 24px; width: 24px;
height: 24px; height: 24px;
} }
#timeline .thumbnail.map { #timeline .thumbnail.map {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -514px; background-position: 0 -514px;
width: 26px; width: 26px;
height: 21px; height: 21px;
} }
#timeline .thumbnail.website { #timeline .thumbnail.website {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -1037px; background-position: 0 -1037px;
width: 24px; width: 24px;
@ -416,52 +454,8 @@
#timeline .zFront { #timeline .zFront {
z-index: 500; z-index: 500;
} }
/* /* Slider
* Feature ------------------------------------------------------------------------------------------- */
*
* ------------------------------------------------------------------------------------------- */
#timeline {
/* Feature
================================================== */
}
#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);
/* BLOCKQUOTES
================================================== */
}
#timeline .feature .slider h2.date {
line-height: 24px;
}
#timeline .feature .slider .date a,
#timeline .feature .slider .title a {
color: #999999;
}
#timeline .feature .slider blockquote {
font-size: 28px;
text-align: left;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color: #1a1a1a;
font-family: "Georgia", Times New Roman, Times, serif;
color: #ffffff;
}
/*
* Slider
*
* ------------------------------------------------------------------------------------------- */
/* SLIDER CONTAINERS /* SLIDER CONTAINERS
================================================== */ ================================================== */
.slider { .slider {
@ -483,7 +477,7 @@
height: 100%; height: 100%;
text-align: center; text-align: center;
display: block; display: block;
background-color: #1a1a1a; background-color: #ffffff;
} }
.slider .slider-container-mask .slider-container .slider-item-container { .slider .slider-container-mask .slider-container .slider-item-container {
display: table-cell; display: table-cell;
@ -522,7 +516,7 @@
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 15px; font-size: 15px;
font-weight: bold; font-weight: bold;
line-height: #262626; line-height: #e9e9e9;
text-transform: uppercase; text-transform: uppercase;
margin-bottom: 5px; margin-bottom: 5px;
} }
@ -546,7 +540,7 @@
} }
.slider .nav-previous:hover, .slider .nav-previous:hover,
.slider .nav-next:hover { .slider .nav-next:hover {
color: #aaaaaa; color: #333333;
cursor: pointer; cursor: pointer;
} }
.slider .nav-previous { .slider .nav-previous {
@ -605,9 +599,6 @@
.slider .slider-item .content { .slider .slider-item .content {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
/* Layouts
================================================== */
/* All Slides /* All Slides
================================================== */ ================================================== */
@ -646,14 +637,14 @@
} }
.slider .slider-item .content .content-container .media .media-wrapper .media-container img, .slider .slider-item .content .content-container .media .media-wrapper .media-container img,
.slider .slider-item .content .content-container .media .media-wrapper .media-container iframe { .slider .slider-item .content .content-container .media .media-wrapper .media-container iframe {
border: 1px solid #333333; border: 1px solid #cccccc;
} }
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map { .slider .slider-item .content .content-container .media .media-wrapper .media-container .map {
line-height: normal; line-height: normal;
border: 1px solid #333333; border: 1px solid #cccccc;
z-index: 500; z-index: 500;
text-align: left; text-align: left;
background-color: #1a1a1a; background-color: #ffffff;
} }
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map img { .slider .slider-item .content .content-container .media .media-wrapper .media-container .map img {
max-height: none !important; max-height: none !important;
@ -681,16 +672,12 @@
font-size: 10px; font-size: 10px;
color: #444; color: #444;
white-space: nowrap; white-space: nowrap;
color: #1a1a1a; color: #ffffff;
text-shadow: 1px 1px 1px #aaaaaa; text-shadow: 1px 1px 1px #333333;
text-align: center; text-align: center;
} }
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text a { .slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text a {
color: #1a1a1a !important; color: #ffffff !important;
}
.slider .slider-item .content .content-container .media .media-wrapper .credit,
.slider .slider-item .content .content-container .media .media-wrapper .caption {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
} }
.slider .slider-item .content .content-container .media .media-wrapper .credit { .slider .slider-item .content .content-container .media .media-wrapper .credit {
color: #999999; color: #999999;
@ -704,13 +691,13 @@
.slider .slider-item .content .content-container .media .media-wrapper .caption { .slider .slider-item .content .content-container .media .media-wrapper .caption {
text-align: left; text-align: left;
margin-top: 10px; margin-top: 10px;
color: #aaaaaa; color: #666666;
font-size: 11px; font-size: 11px;
line-height: 14px; line-height: 14px;
} }
.slider .slider-item .content .media.text-media .media-wrapper .media-container { .slider .slider-item .content .media.text-media .media-wrapper .media-container {
border: none; border: none;
background-color: #1a1a1a; background-color: #ffffff;
} }
.slider .slider-item .content-container.layout-text { .slider .slider-item .content-container.layout-text {
width: 100%; width: 100%;
@ -762,15 +749,15 @@
padding: 0px; padding: 0px;
} }
/* /*
* Navigation Navigation
* UI for Navigation UI for Navigation
* ------------------------------------------------------------------------------------------- */ ------------------------------------------------------------------------------------------- */
#timeline .navigation { #timeline .navigation {
clear: both; clear: both;
cursor: move; cursor: move;
width: 100%; width: 100%;
height: 200px; height: 200px;
border-top: 1px solid #333333; border-top: 1px solid #cccccc;
position: relative; position: relative;
} }
#timeline .navigation .toolbar { #timeline .navigation .toolbar {
@ -778,8 +765,8 @@
top: 45px; top: 45px;
left: 0px; left: 0px;
z-index: 1000; z-index: 1000;
background-color: #1a1a1a; background-color: #ffffff;
border: 1px solid #333333; border: 1px solid #cccccc;
-webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
-moz-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); box-shadow: 1px 1px 0px rgba(0, 0, 0, 0.2);
@ -795,10 +782,10 @@
z-index: 1000; z-index: 1000;
width: 18px; width: 18px;
height: 18px; height: 18px;
color: #aaaaaa; color: #333333;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
border: 1px solid #1a1a1a; border: 1px solid #ffffff;
padding: 5px; padding: 5px;
filter: alpha(opacity=50); filter: alpha(opacity=50);
-khtml-opacity: 0.5; -khtml-opacity: 0.5;
@ -808,7 +795,7 @@
#timeline .navigation .toolbar .zoom-in:hover, #timeline .navigation .toolbar .zoom-in:hover,
#timeline .navigation .toolbar .zoom-out:hover, #timeline .navigation .toolbar .zoom-out:hover,
#timeline .navigation .toolbar .back-home:hover { #timeline .navigation .toolbar .back-home:hover {
color: #0bd4e3; color: #0088cc;
cursor: pointer; cursor: pointer;
filter: alpha(opacity=100); filter: alpha(opacity=100);
-khtml-opacity: 1; -khtml-opacity: 1;
@ -816,21 +803,21 @@
opacity: 1; opacity: 1;
} }
#timeline .navigation .toolbar .zoom-in .icon { #timeline .navigation .toolbar .zoom-in .icon {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -1507px; background-position: 0 -1507px;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
#timeline .navigation .toolbar .zoom-out .icon { #timeline .navigation .toolbar .zoom-out .icon {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -1647px; background-position: 0 -1647px;
width: 16px; width: 16px;
height: 16px; height: 16px;
} }
#timeline .navigation .toolbar .back-home .icon { #timeline .navigation .toolbar .back-home .icon {
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -1303px; background-position: 0 -1303px;
width: 16px; width: 16px;
@ -843,13 +830,13 @@
left: 0px; left: 0px;
height: 150px; height: 150px;
width: 100%; width: 100%;
background-color: #262626; background-color: #e9e9e9;
} }
#timeline .navigation .timenav-background .timenav-interval-background { #timeline .navigation .timenav-background .timenav-interval-background {
position: absolute; position: absolute;
top: 151px; top: 151px;
left: 0px; left: 0px;
background: #1a1a1a; background: #ffffff;
width: 100%; width: 100%;
height: 49px; height: 49px;
} }
@ -860,7 +847,7 @@
z-index: 30; z-index: 30;
width: 100%; width: 100%;
height: 1px; height: 1px;
background: #1a1a1a; background: #ffffff;
filter: alpha(opacity=50); filter: alpha(opacity=50);
-khtml-opacity: 0.5; -khtml-opacity: 0.5;
-moz-opacity: 0.5; -moz-opacity: 0.5;
@ -875,7 +862,7 @@
left: 50%; left: 50%;
width: 3px; width: 3px;
height: 150px; height: 150px;
background: #0bd4e3; background: #0088cc;
z-index: 500; z-index: 500;
-webkit-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); -webkit-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 7px rgba(0, 0, 0, 0.3);
@ -894,16 +881,16 @@
display: none; display: none;
} }
#timeline .navigation .timenav .content .marker.active .dot { #timeline .navigation .timenav .content .marker.active .dot {
background: #0bd4e3; background: #0088cc;
z-index: 200; z-index: 200;
} }
#timeline .navigation .timenav .content .marker.active .line { #timeline .navigation .timenav .content .marker.active .line {
z-index: 199; z-index: 199;
background: #0bd4e3; background: #0088cc;
width: 1px; width: 1px;
} }
#timeline .navigation .timenav .content .marker.active .line .event-line { #timeline .navigation .timenav .content .marker.active .line .event-line {
background: #0bd4e3; background: #0088cc;
filter: alpha(opacity=75); filter: alpha(opacity=75);
-khtml-opacity: 0.75; -khtml-opacity: 0.75;
-moz-opacity: 0.75; -moz-opacity: 0.75;
@ -911,14 +898,14 @@
} }
#timeline .navigation .timenav .content .marker.active .flag { #timeline .navigation .timenav .content .marker.active .flag {
z-index: 200; z-index: 200;
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -110px; background-position: 0 -110px;
width: 153px; width: 153px;
height: 60px; height: 60px;
} }
#timeline .navigation .timenav .content .marker.active .flag .flag-content h3 { #timeline .navigation .timenav .content .marker.active .flag .flag-content h3 {
color: #0bd4e3; color: #0088cc;
} }
#timeline .navigation .timenav .content .marker.active .flag.row1, #timeline .navigation .timenav .content .marker.active .flag.row1,
#timeline .navigation .timenav .content .marker.active .flag.row2, #timeline .navigation .timenav .content .marker.active .flag.row2,
@ -929,7 +916,7 @@
cursor: default; cursor: default;
} }
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h3 { #timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h3 {
color: #0bd4e3; color: #0088cc;
} }
#timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4 { #timeline .navigation .timenav .content .marker.active:hover .flag .flag-content h4 {
color: #999999; color: #999999;
@ -951,7 +938,7 @@
display: block; display: block;
width: 6px; width: 6px;
height: 6px; height: 6px;
background: #aaaaaa; background: #333333;
-webkit-border-radius: 3px; -webkit-border-radius: 3px;
-moz-border-radius: 3px; -moz-border-radius: 3px;
border-radius: 3px; border-radius: 3px;
@ -963,10 +950,10 @@
left: 3px; left: 3px;
width: 1px; width: 1px;
height: 150px; height: 150px;
background: #333333; background: #cccccc;
-moz-box-shadow: 1px 0 0 #1a1a1a; -moz-box-shadow: 1px 0 0 #ffffff;
-webkit-box-shadow: 1px 0 0 #1a1a1a; -webkit-box-shadow: 1px 0 0 #ffffff;
box-shadow: 1px 0 0 #1a1a1a; box-shadow: 1px 0 0 #ffffff;
z-index: 22; z-index: 22;
} }
#timeline .navigation .timenav .content .marker .line .event-line { #timeline .navigation .timenav .content .marker .line .event-line {
@ -975,7 +962,7 @@
left: 0px; left: 0px;
height: 1px; height: 1px;
width: 1px; width: 1px;
background: #0bd4e3; background: #0088cc;
filter: alpha(opacity=15); filter: alpha(opacity=15);
-khtml-opacity: 0.15; -khtml-opacity: 0.15;
-moz-opacity: 0.15; -moz-opacity: 0.15;
@ -990,7 +977,7 @@
z-index: 23; z-index: 23;
width: 153px; width: 153px;
height: 56px; height: 56px;
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 0; background-position: 0 0;
width: 153px; width: 153px;
@ -1032,14 +1019,14 @@
} }
#timeline .navigation .timenav .content .marker .flag:hover { #timeline .navigation .timenav .content .marker .flag:hover {
cursor: pointer; cursor: pointer;
background-image: url(timeline-dark.png); background-image: url(timeline.png);
background-repeat: no-repeat; background-repeat: no-repeat;
background-position: 0 -110px; background-position: 0 -110px;
width: 153px; width: 153px;
height: 60px; height: 60px;
} }
#timeline .navigation .timenav .content .marker .flag:hover .flag-content h3 { #timeline .navigation .timenav .content .marker .flag:hover .flag-content h3 {
color: #aaaaaa; color: #333333;
} }
#timeline .navigation .timenav .content .marker .flag:hover .flag-content h4 { #timeline .navigation .timenav .content .marker .flag:hover .flag-content h4 {
color: #aaaaaa; color: #aaaaaa;
@ -1065,11 +1052,11 @@
left: 150px; left: 150px;
height: 12px; height: 12px;
display: block; display: block;
background: #0bd4e3; background: #0088cc;
overflow: hidden; overflow: hidden;
border-left: 1px solid #333333; border-left: 1px solid #cccccc;
border-right: 1px solid #333333; border-right: 1px solid #cccccc;
border-top: 1px solid #333333; border-top: 1px solid #cccccc;
filter: alpha(opacity=75); filter: alpha(opacity=75);
-khtml-opacity: 0.75; -khtml-opacity: 0.75;
-moz-opacity: 0.75; -moz-opacity: 0.75;
@ -1087,7 +1074,7 @@
font-size: 10px; font-size: 10px;
font-weight: bold; font-weight: bold;
line-height: 10px; line-height: 10px;
color: #1a1a1a; color: #ffffff;
position: absolute; position: absolute;
top: -1px; top: -1px;
left: 9px; left: 9px;
@ -1097,7 +1084,7 @@
left: 0px; left: 0px;
top: 150px; top: 150px;
height: 50px; height: 50px;
background-color: #1a1a1a; background-color: #ffffff;
} }
#timeline .navigation .timenav .time .time-interval-minor { #timeline .navigation .timenav .time .time-interval-minor {
height: 6px; height: 6px;
@ -1116,7 +1103,7 @@
height: 6px; height: 6px;
background-position: center top; background-position: center top;
white-space: nowrap; white-space: nowrap;
color: #aaaaaa; color: #666666;
margin-top: 0px; margin-top: 0px;
padding-top: 0px; padding-top: 0px;
} }
@ -1143,7 +1130,7 @@
text-align: left; text-align: left;
text-indent: 0px; text-indent: 0px;
white-space: nowrap; white-space: nowrap;
color: #aaaaaa; color: #666666;
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
margin-top: 1px; margin-top: 1px;
@ -1151,7 +1138,7 @@
} }
#timeline .navigation .timenav .time .time-interval div strong { #timeline .navigation .timenav .time .time-interval div strong {
font-weight: bold; font-weight: bold;
color: #ffffff; color: #000000;
} }
#timeline .navigation .timenav .time .time-interval-major { #timeline .navigation .timenav .time .time-interval-major {
white-space: nowrap; white-space: nowrap;
@ -1176,7 +1163,7 @@
text-align: left; text-align: left;
text-indent: 0px; text-indent: 0px;
white-space: nowrap; white-space: nowrap;
color: #aaaaaa; color: #333333;
margin-left: 0px; margin-left: 0px;
margin-right: 0px; margin-right: 0px;
margin-top: 1px; margin-top: 1px;
@ -1184,51 +1171,21 @@
} }
#timeline .navigation .timenav .time .time-interval-major div strong { #timeline .navigation .timenav .time .time-interval-major div strong {
font-weight: bold; font-weight: bold;
color: #ffffff; color: #000000;
} }
/* Typography.less /* Typography.less
* Headings, body text, lists, etc * Headings, body text, lists, etc
* ---------------------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------------------- */
#timeline { #timeline {
font-family: "Georgia", Times New Roman, Times, serif;
-webkit-font-smoothing: antialiased;
/* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
font-size: 15px; font-size: 15px;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
/* -webkit-font-smoothing: antialiased;
blockquote { /* Fix for webkit rendering */
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;
} -webkit-text-size-adjust: 100%;
} /* BLOCKQUOTES
*/ ================================================== */
/* Caption and Credits /* Caption and Credits
================================================== */ ================================================== */
@ -1239,7 +1196,7 @@
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
margin-bottom: 20px; margin-bottom: 20px;
color: #aaaaaa; color: #666666;
} }
#timeline p small { #timeline p small {
font-size: 13px; font-size: 13px;
@ -1257,7 +1214,11 @@
margin-bottom: 15px; margin-bottom: 15px;
} }
#timeline .feature p { #timeline .feature p {
color: #aaaaaa; color: #666666;
}
#timeline .date a,
#timeline .title a {
color: #999999;
} }
#timeline h1, #timeline h1,
#timeline h2, #timeline h2,
@ -1266,7 +1227,7 @@
#timeline h5, #timeline h5,
#timeline h6 { #timeline h6 {
font-weight: normal; font-weight: normal;
color: #ffffff; color: #000000;
text-transform: none; text-transform: none;
} }
#timeline h1 a, #timeline h1 a,
@ -1291,7 +1252,6 @@
#timeline h4.date, #timeline h4.date,
#timeline h5.date, #timeline h5.date,
#timeline h6.date { #timeline h6.date {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold; font-weight: bold;
} }
#timeline h2.start { #timeline h2.start {
@ -1318,8 +1278,8 @@
#timeline h2.date { #timeline h2.date {
font-size: 16px; font-size: 16px;
line-height: 18px; line-height: 18px;
margin-bottom: 0px; margin-bottom: 3.75px;
color: #aaaaaa; color: #999999;
} }
#timeline h3, #timeline h3,
#timeline h4, #timeline h4,
@ -1331,7 +1291,7 @@
#timeline h4 .active, #timeline h4 .active,
#timeline h5 .active, #timeline h5 .active,
#timeline h6 .active { #timeline h6 .active {
color: #0bd4e3; color: #0088cc;
} }
#timeline h3 { #timeline h3 {
font-size: 28px; font-size: 28px;
@ -1363,9 +1323,14 @@
quotes: '„' '“'; quotes: '„' '“';
font-style: italic; font-style: italic;
} }
#timeline .credit, #timeline blockquote {
#timeline .caption { font-size: 28px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color: #ffffff;
color: #000000;
} }
#timeline .credit { #timeline .credit {
color: #999999; color: #999999;
@ -1379,14 +1344,11 @@
#timeline .caption { #timeline .caption {
text-align: left; text-align: left;
margin-top: 5px; margin-top: 5px;
color: #aaaaaa; color: #666666;
font-size: 11px; font-size: 11px;
line-height: 14px; line-height: 14px;
clear: both; clear: both;
} }
/* Elements.less
* UI Elements etc
* ---------------------------------------------------------------------------------------- */
/* /*
* TOOLTIP * TOOLTIP
* Styles for tooltip * Styles for tooltip
@ -1470,3 +1432,45 @@
width: 0; width: 0;
height: 0; height: 0;
} }
/* MEDIA QUERIES
================================================== */
/* Mobile and iPhone
================================================== */
@media only screen and (max-width: 480px), only screen and (max-device-width: 480px) {
}
/* BELOW 600px
================================================== */
@media (max-width: 600px) {
.slider .slider-item .content .content-container {
display: block;
}
.slider .slider-item .content .content-container .text {
width: 100%;
max-width: 100%;
min-width: 120px;
display: block;
}
.slider .slider-item .content .content-container .text .container {
display: block;
}
.slider .slider-item .content .content-container .media {
width: 100%;
min-width: 50%;
float: none;
}
.slider .slider-item .content .content-container .media .media-wrapper {
margin-left: 0px;
margin-right: 0px;
width: 100%;
display: block;
}
.slider .slider-item .content .content-container .media .media-wrapper .media-container img,
.slider .slider-item .content .content-container .media .media-wrapper .media-container iframe {
width: 100%;
}
.slider .slider-item .content .content-container .media.text-media .media-wrapper .media-container {
border: none;
background-color: #ffffff;
}
}

4
timeline-min.js vendored
View File

File diff suppressed because one or more lines are too long

206
timeline.css
Unescape View File

@ -1,8 +1,9 @@
/* Timeline /*
* Default Timeline
* Copyright 2012 Zach Wise Theme: Default
* Designed and built by Zach Wise digitalartwork.net Copyright 2012 Zach Wise
* ----------------------------------------------------- */ Designed and built by Zach Wise digitalartwork.net
----------------------------------------------------- */
/* Reset.less /* 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). * 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).
* ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */ * ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- */
@ -162,10 +163,33 @@
overflow: auto; overflow: auto;
vertical-align: top; vertical-align: top;
} }
/* Variables.less /*
* Variables to customize the look and feel FONT
* ----------------------------------------------------- */ Default
/* Colors ------------------------------------------------------------------------------------------- */
#timeline {
font-family: "Georgia", Times New Roman, Times, serif;
}
#timeline .twitter,
#timeline .messege,
#timeline .credit,
#timeline .caption,
#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;
}
#timeline p,
#timeline blockquote,
#timeline .twitter blockquote p {
font-family: "Georgia", Times New Roman, Times, serif;
}
/* VARIABLES
----------------------------------------------------- */
/* COLORS
================================================== */ ================================================== */
/* COLOR SCHEME /* COLOR SCHEME
================================================== */ ================================================== */
@ -176,11 +200,12 @@
/* Mixins.less /* Mixins.less
* Snippets of reusable CSS to develop faster and keep code readable * Snippets of reusable CSS to develop faster and keep code readable
* ----------------------------------------------------------------- */ * ----------------------------------------------------------------- */
/* Icons.less
* Base64 Icons
* ----------------------------------------------------------------- */
/* /*
* Structure GFX
Base64 Icons etc
----------------------------------------------------------------- */
/*
* VMM Timeline Core
* Basic and global styles for generating structural layout * Basic and global styles for generating structural layout
* ------------------------------------------------------------------------------------------- */ * ------------------------------------------------------------------------------------------- */
/* TIMELINE EMBED /* TIMELINE EMBED
@ -211,6 +236,9 @@
z-index: 100; z-index: 100;
clear: both; clear: both;
overflow: hidden; overflow: hidden;
/* FEATURE
================================================== */
/* FEEDBACK /* FEEDBACK
================================================== */ ================================================== */
@ -218,6 +246,19 @@
================================================== */ ================================================== */
} }
#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 .feedback { #timeline .feedback {
position: absolute; position: absolute;
display: table; display: table;
@ -234,7 +275,6 @@
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
font-size: 28px; font-size: 28px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold; font-weight: bold;
text-transform: uppercase; text-transform: uppercase;
line-height: 36px; line-height: 36px;
@ -276,7 +316,6 @@
} }
#timeline .twitter { #timeline .twitter {
text-align: left; text-align: left;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
background-color: #ffffff; background-color: #ffffff;
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
@ -294,7 +333,6 @@
margin-bottom: 6px; margin-bottom: 6px;
padding-top: 10px; padding-top: 10px;
background-color: #ffffff; background-color: #ffffff;
font-family: "Georgia", Times New Roman, Times, serif;
color: #000000; color: #000000;
} }
#timeline .twitter blockquote .quote-mark { #timeline .twitter blockquote .quote-mark {
@ -416,52 +454,8 @@
#timeline .zFront { #timeline .zFront {
z-index: 500; z-index: 500;
} }
/* /* Slider
* Feature ------------------------------------------------------------------------------------------- */
*
* ------------------------------------------------------------------------------------------- */
#timeline {
/* Feature
================================================== */
}
#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);
/* BLOCKQUOTES
================================================== */
}
#timeline .feature .slider h2.date {
line-height: 24px;
}
#timeline .feature .slider .date a,
#timeline .feature .slider .title a {
color: #999999;
}
#timeline .feature .slider blockquote {
font-size: 28px;
text-align: left;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color: #ffffff;
font-family: "Georgia", Times New Roman, Times, serif;
color: #000000;
}
/*
* Slider
*
* ------------------------------------------------------------------------------------------- */
/* SLIDER CONTAINERS /* SLIDER CONTAINERS
================================================== */ ================================================== */
.slider { .slider {
@ -605,9 +599,6 @@
.slider .slider-item .content { .slider .slider-item .content {
display: table-cell; display: table-cell;
vertical-align: middle; vertical-align: middle;
/* Layouts
================================================== */
/* All Slides /* All Slides
================================================== */ ================================================== */
@ -688,10 +679,6 @@
.slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text a { .slider .slider-item .content .content-container .media .media-wrapper .media-container .map .map-attribution .attribution-text a {
color: #ffffff !important; color: #ffffff !important;
} }
.slider .slider-item .content .content-container .media .media-wrapper .credit,
.slider .slider-item .content .content-container .media .media-wrapper .caption {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.slider .slider-item .content .content-container .media .media-wrapper .credit { .slider .slider-item .content .content-container .media .media-wrapper .credit {
color: #999999; color: #999999;
text-align: right; text-align: right;
@ -762,9 +749,9 @@
padding: 0px; padding: 0px;
} }
/* /*
* Navigation Navigation
* UI for Navigation UI for Navigation
* ------------------------------------------------------------------------------------------- */ ------------------------------------------------------------------------------------------- */
#timeline .navigation { #timeline .navigation {
clear: both; clear: both;
cursor: move; cursor: move;
@ -1190,45 +1177,15 @@
* Headings, body text, lists, etc * Headings, body text, lists, etc
* ---------------------------------------------------------------------------------------- */ * ---------------------------------------------------------------------------------------- */
#timeline { #timeline {
font-family: "Georgia", Times New Roman, Times, serif;
-webkit-font-smoothing: antialiased;
/* Fix for webkit rendering */
-webkit-text-size-adjust: 100%;
font-size: 15px; font-size: 15px;
font-weight: normal; font-weight: normal;
line-height: 20px; line-height: 20px;
/* -webkit-font-smoothing: antialiased;
blockquote { /* Fix for webkit rendering */
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;
} -webkit-text-size-adjust: 100%;
} /* BLOCKQUOTES
*/ ================================================== */
/* Caption and Credits /* Caption and Credits
================================================== */ ================================================== */
@ -1259,6 +1216,10 @@
#timeline .feature p { #timeline .feature p {
color: #666666; color: #666666;
} }
#timeline .date a,
#timeline .title a {
color: #999999;
}
#timeline h1, #timeline h1,
#timeline h2, #timeline h2,
#timeline h3, #timeline h3,
@ -1291,7 +1252,6 @@
#timeline h4.date, #timeline h4.date,
#timeline h5.date, #timeline h5.date,
#timeline h6.date { #timeline h6.date {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-weight: bold; font-weight: bold;
} }
#timeline h2.start { #timeline h2.start {
@ -1318,7 +1278,7 @@
#timeline h2.date { #timeline h2.date {
font-size: 16px; font-size: 16px;
line-height: 18px; line-height: 18px;
margin-bottom: 0px; margin-bottom: 3.75px;
color: #999999; color: #999999;
} }
#timeline h3, #timeline h3,
@ -1363,9 +1323,14 @@
quotes: '„' '“'; quotes: '„' '“';
font-style: italic; font-style: italic;
} }
#timeline .credit, #timeline blockquote {
#timeline .caption { font-size: 28px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; text-align: left;
line-height: 36px;
margin-bottom: 6px;
padding-top: 10px;
background-color: #ffffff;
color: #000000;
} }
#timeline .credit { #timeline .credit {
color: #999999; color: #999999;
@ -1384,9 +1349,6 @@
line-height: 14px; line-height: 14px;
clear: both; clear: both;
} }
/* Elements.less
* UI Elements etc
* ---------------------------------------------------------------------------------------- */
/* /*
* TOOLTIP * TOOLTIP
* Styles for tooltip * Styles for tooltip
@ -1480,20 +1442,6 @@
/* BELOW 600px /* BELOW 600px
================================================== */ ================================================== */
@media (max-width: 600px) { @media (max-width: 600px) {
.slider .slider-item .content {
/* Layouts
================================================== */
/* All Slides
================================================== */
/* Text Only Slides
================================================== */
/* Media Only Slides
================================================== */
}
.slider .slider-item .content .content-container { .slider .slider-item .content .content-container {
display: block; display: block;
} }

6
timeline.js
Unescape View File

@ -2782,7 +2782,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
/* FIX FOR NON-WEBKIT BROWSERS /* FIX FOR NON-WEBKIT BROWSERS
================================================== */ ================================================== */
VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", ((config.slider.content.width/100) * 60) ); VMM.Element.css(".slider-item .layout-text-media .media .media-container img", "max-width", ((config.slider.content.width/100) * 60) );
VMM.Element.css(".slider-item .layout-text-media .media .media-container .twitter .avatar img", "max-width", 32 );
VMM.Element.css(".slider-item .layout-text-media .media .media-container .twitter .avatar img", "max-height", 32 );
/* SOUNDCLOUD /* SOUNDCLOUD
================================================== */ ================================================== */
VMM.Element.css(".slider-item .media .media-container .soundcloud", "max-height", 168 ); VMM.Element.css(".slider-item .media .media-container .soundcloud", "max-height", 168 );
@ -2812,7 +2813,8 @@ if(typeof VMM != 'undefined' && typeof VMM.Slider == 'undefined') {
VMM.Element.width(".slider-item .layout-text-media .media .media-container .soundcloud", _iframe_width); VMM.Element.width(".slider-item .layout-text-media .media .media-container .soundcloud", _iframe_width);
// MAPS // MAPS
VMM.Element.height(".slider-item .media .media-container .map", _iframe_height_full); VMM.Element.height(".slider-item .layout-media .media .media-container .map", _iframe_height_full+60);
VMM.Element.height(".slider-item .layout-text-media .media .media-container .map", _iframe_height_full+120);
// MAX WIDTH // MAX WIDTH
VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.slider.content.width ); VMM.Element.css(".slider-item .layout-text-media .media .media-container .media-frame", "max-width", config.slider.content.width );

BIN
timeline.png
View File

Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 10 KiB

After

Width:  |  Height:  |  Size: 11 KiB

Write Preview
Loading…
Cancel
Save