README.md

@@ -3,7 +3,7 @@ Life
 
 This is something that I've wanted to build for a long time. It's a **timeline of important events** in my life, visualized in a way my mind always imagine it. There was something called [**Lifepath.me**](http://dcurt.is/facebook-timelines-and-lifepath-me-4) but now it's gone. How about Facebook timeline? Meh.
 
-So, this is it. Have a look at [cheeaun.life](http://cheeaun.life/).
+So, this is it. Have a look at [cheeaun.github.io/life](http://cheeaun.github.io/life).
 
 Features
 --------
@@ -28,12 +28,9 @@ How to setup your own *Life*
 2. `git checkout -b gh-pages` (or any branch name you like)
 3. Make a copy of `life.example.md`, rename it to `life.md`.
 4. Add your life events into `life.md`.
-5. Preview it on a local server. Use [`python -m http.server`](https://docs.python.org/3/library/http.server.html) or [`http-server`](https://github.com/nodeapps/http-server).
+5. Preview it on a local server. Use [`python -m SimpleHTTPServer`](http://docs.python.org/2/library/simplehttpserver.html) or [`http-server`](https://github.com/nodeapps/http-server).
 6. Commit `life.md` (not in `master` branch).
-7. `git push origin gh-pages -f` and publish to [GitHub Pages](http://pages.github.com/).
+6. `git push origin gh-pages -f` and publish to [GitHub Pages](http://pages.github.com/).
-8. Update the website link in your GitHub repo description.
-9. Tell the world about your Life.
-10. Add your Life to the [Lives](https://github.com/cheeaun/life/wiki/Lives) page.
 
 How to upgrade your *Life*
 --------------------------
@@ -63,7 +60,6 @@ The configuration:
 
 - `customStylesheetURL` - (*string*, default to `null`) Path to a custom stylesheet file, for those who doesn't like the default *theme*.
 - `yearLength` - (*number*, default to `120`) The width of the year grids, in pixels.
-- `hideAge` - (*boolean*, default to `false`) Option to hide age from year axis.
 
 Datetime "syntax"
 -----------------
@@ -78,7 +74,7 @@ Datetime "syntax"
 Other people's Lives
 --------------------
 
-Here's [a compilation of Lives from the people who have forked Life](https://github.com/cheeaun/life/wiki/Lives).
+Here's [a compilation of Lives from the people who has forked Life](https://github.com/cheeaun/life/wiki/Lives).
 
 License
 -------

index.html

@@ -3,33 +3,28 @@
 <title>Life</title>
 <meta name="viewport" content="width=device-width, initial-scale=1">
 <meta name="format-detection" content="telephone=no">
-<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans:400,300">
+<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400,300">
 <style>
-body{
+*{
 	font-family: Open Sans, Helvetica, Arial, sans-serif;
+}
+body{
 	color: #fff;
 	background-color: #384047;
 	margin: 0;
 	padding: 0;
 	font-size: 12px;
 	-webkit-text-size-adjust: none;
-	-webkit-user-select: none;
+	position: relative;
-	-moz-user-select: none;
-	-ms-user-select: none;
-	user-select: none;
-	cursor: default;
 }
 a{
 	color: #fff;
 }
 header{
-	z-index: 3;
-	background: linear-gradient(to bottom, rgba(56,64,71,0) 0%,rgba(56,64,71,.5) 20%,rgba(56,64,71,1) 50%,rgba(56,64,71,.5) 80%,rgba(56,64,71,0) 100%);
 	position: fixed;
 	bottom: 0;
-	left: 0;
 	margin: 0;
-	padding: 10px;
+	padding: 20px;
 }
 header a{
 	margin-left: 1em;
@@ -43,6 +38,7 @@ header a:hover{
 h1{
 	display: inline;
 	font-size: 20px;
+	font-weight: normal;
 	line-height: 1em;
 	opacity: .5;
 	z-index: 3;
@@ -50,67 +46,27 @@ h1{
 	white-space: nowrap;
 }
 #life{
-	position: absolute;
-	top: 0;
-	right: 0;
-	bottom: 0;
-	left: 0;
-	overflow: auto;
-	-webkit-overflow-scrolling: touch;
-	cursor: -webkit-grab;
-	cursor: -moz-grab;
-	cursor: grab;
-}
-#life-years{
-	position: absolute;
-	top: 0;
-	bottom: 0;
-	white-space: nowrap;
-	pointer-events: none;
-}
-#life-years .year{
-	display: inline-block;
-	box-sizing: border-box;
-	color: #fff;
-	font-weight: 300;
-	white-space: nowrap;
-	box-sizing: border-box;
-	height: 100%;
-	border-left: 1px dashed rgba(255,255,255,.2);
-}
-#life-years .year:first-child{
-	border-left: 0;
-}
-#life-years .year span{
-	background: linear-gradient(to bottom, rgba(56,64,71,1) 30%,rgba(56,64,71,0) 100%);
-	display: block;
-	padding: 10px;
-	position: -webkit-sticky;
-	position: sticky;
-	top: 0;
-	z-index: 3;
-}
-#life-years .year span i{
-	opacity: .5;
-	font-style: normal;
-}
-#life-events{
 	padding-top: 40px;
 	padding-bottom: 5em;
-	position: relative;
 }
-#life-events:after{
+#life section.year{
-	content: '';
+	box-sizing: border-box;
-	display: block;
+	border-left: 1px dashed rgba(255,255,255,.1);
-	clear: left;
+	color: rgba(255,255,255,.3);
+	position: absolute;
+	top: 0;
+	bottom: 0;
+	padding-left: 10px;
+	padding-top: 10px;
+	pointer-events: none;
+	font-weight: 300;
+	white-space: nowrap;
 }
 #life .event{
 	padding-right: 20px;
 	padding-bottom: 5px;
 	vertical-align: middle;
 	white-space: nowrap;
-	float: left;
-	clear: left;
 }
 #life .event b{
 	font-weight: normal;
@@ -291,21 +247,11 @@ h1{
 				}
 			}
 
-			// Parse Markdown links in the text
-			// credit: http://stackoverflow.com/a/9268827
-			var link = null;
-			while(link = d.text.match(/\[([^\]]+)\]\(([^)"]+)(?: \"([^\"]+)\")?\)/)) {
-				var link_attr = "";
-				if (link[3] !== undefined) {
-					link_attr = " title='" + link[3] + "'";
-				}
-				d.text = d.text.replace(link[0], "<a href='" + link[2] + "'" + link_attr + ">" + link[1] + "</a>");
-			}
-
 			return '<div class="event" style="margin-left: ' + offset.toFixed(2) + 'px">'
 				+ '<div class="time" style="width: ' + width.toFixed(2) + 'px"></div>'
-				+ '<b>' + d.time.title + '</b> ' + d.text
+				+ '<b>' + d.time.title + '</b> ' + d.text + '&nbsp;&nbsp;'
 				+ '</div>';
+			return '';
 		},
 		renderYears: function(firstYear, lastYear){
 			var dayLength = life.config.yearLength/12/30;
@@ -313,10 +259,10 @@ h1{
 			var days = 0;
 			var hideAge = life.config.hideAge;
 			for (var y=firstYear, age = 0; y<=lastYear+1; y++, age++){
-				var days = (y % 4 == 0) ? 366 : 365;
+				html += '<section class="year" style="left: ' + (days*dayLength).toFixed(2) + 'px">'
-				html += '<div class="year" style="width: ' + (days*dayLength).toFixed(2) + 'px"><span>'
+					+ y + (hideAge ? '' : (' (' + age + ')'))
-					+ y + (hideAge ? '' : (' <i>(' + age + ')</i>'))
+					+ '</section>';
-					+ '</span></div>';
+				days += (y % 4 == 0) ? 366 : 365;
 			}
 			return html;
 		},
@@ -336,46 +282,14 @@ h1{
 			});
 			life.firstYear = firstYear;
 
-			var html = '<div id="life-events">';
+			var html = life.renderYears(firstYear, lastYear);
-			// 'comment_' class name is to hide it from Safari Reader
-			html += '<div id="life-years" class="comment_">' + life.renderYears(firstYear, lastYear) + '</div>';
 			data.forEach(function(d){
 				html += life.renderEvent(d);
 			});
-			html += '</div>';
 			life.$el.innerHTML = html;
 		}
 	};
 
-	var slider = {
-		startingMousePostition: {},
-		containerOffset: {},
-		init: function(){
-			window.addEventListener('mousedown', function(event){
-				slider.startingMousePostition = {
-					x: event.clientX,
-					y: event.clientY
-				};
-				slider.containerOffset = {
-					x: life.$el.scrollLeft,
-					y: life.$el.scrollTop
-				};
-				window.addEventListener('mousemove', slider.slide);
-			});
-			window.addEventListener('mouseup', function(event){
-				window.removeEventListener('mousemove', slider.slide);
-			});
-		},
-		slide: function(event){
-			event.preventDefault();
-			var x = slider.containerOffset.x + (slider.startingMousePostition.x - event.clientX);
-			var y = slider.containerOffset.y + (slider.startingMousePostition.y - event.clientY);
-			life.$el.scrollLeft = x;
-			life.$el.scrollTop = y;
-		}
-	};
-
 	life.start();
-	slider.init();
 })();
 </script>

life.example.md

@@ -1,8 +1,8 @@
-@USERNAME's life
+@USERNAME' life
 ===============
 
 - 24/02/1955 Born
 - ~1968 Summer job
 - 03/1976 Built a computer
-- 01/04/1976 Started a [company](http://en.wikipedia.org/wiki/Apple_Inc. "Apple Inc.")
+- 01/04/1976 Started a company
 - 04/1976-2011 Whole bunch of interesting events