Slight aesthetic changes

index.html

@@ -23,15 +23,20 @@ body{
 	font-size: 12px;
 	-webkit-text-size-adjust: none;
 	position: relative;
+	overflow: hidden;
 }
 a{
 	color: #fff;
 }
 header{
-	position: fixed;
+	z-index: 2;
+	background-color: rgba(56, 64, 71, .75);
+	-webkit-backdrop-filter: blur(5px);
+	backdrop-filter: blur(5px);
+	position: absolute;
 	bottom: 0;
 	margin: 0;
-	padding: 20px;
+	padding: 10px;
 }
 header a{
 	margin-left: 1em;
@@ -53,23 +58,50 @@ h1{
 	white-space: nowrap;
 }
 #life{
-	padding-top: 40px;
-	padding-bottom: 5em;
-}
-#life section.year{
-	min-height: 100%;
+	position: absolute;
+	width: 100%;
+	height: 100%;
 	box-sizing: border-box;
-	-moz-box-sizing: border-box;
-	border-left: 1px dashed rgba(255,255,255,.1);
-	color: rgba(255,255,255,.3);
+	overflow: auto;
+	-webkit-overflow-scrolling: touch;
+}
+#life-years{
 	position: absolute;
 	top: 0;
 	bottom: 0;
-	padding-left: 10px;
-	padding-top: 10px;
+	white-space: nowrap;
+}
+#life-years section.year{
+	display: inline-block;
+	box-sizing: border-box;
+	-moz-box-sizing: border-box;
+	color: #fff;
 	pointer-events: none;
 	font-weight: 300;
 	white-space: nowrap;
+	box-sizing: border-box;
+	height: 100%;
+}
+#life-years section.year:nth-child(even){
+	background: linear-gradient(to bottom, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 100%);
+}
+#life-years section.year span{
+	background-color: rgba(56, 64, 71, .75);
+	-webkit-backdrop-filter: blur(5px);
+	backdrop-filter: blur(5px);
+	display: block;
+	padding: 10px;
+	position: -webkit-sticky;
+	position: sticky;
+	top: 0;
+}
+#life-years section.year span i{
+	opacity: .5;
+	font-style: normal;
+}
+#life-events{
+	margin-top: 40px;
+	padding-bottom: 5em;
 }
 #life .event{
 	padding-right: 20px;
@@ -271,7 +303,6 @@ h1{
 				+ '<div class="time" style="width: ' + width.toFixed(2) + 'px"></div>'
 				+ '<b>' + d.time.title + '</b> ' + d.text + '&nbsp;&nbsp;'
 				+ '</div>';
-			return '';
 		},
 		renderYears: function(firstYear, lastYear){
 			var dayLength = life.config.yearLength/12/30;
@@ -279,10 +310,10 @@ h1{
 			var days = 0;
 			var hideAge = life.config.hideAge;
 			for (var y=firstYear, age = 0; y<=lastYear+1; y++, age++){
-				html += '<section class="year" style="left: ' + (days*dayLength).toFixed(2) + 'px">'
-					+ y + (hideAge ? '' : (' (' + age + ')'))
-					+ '</section>';
-				days += (y % 4 == 0) ? 366 : 365;
+				var days = (y % 4 == 0) ? 366 : 365;
+				html += '<section class="year" style="width: ' + (days*dayLength).toFixed(2) + 'px"><span>'
+					+ y + (hideAge ? '' : (' <i>(' + age + ')</i>'))
+					+ '</span></section>';
 			}
 			return html;
 		},
@@ -302,26 +333,28 @@ h1{
 			});
 			life.firstYear = firstYear;
 
-			var html = life.renderYears(firstYear, lastYear);
+			var html = '<div id="life-years">' + life.renderYears(firstYear, lastYear) + '</div>';
+			html += '<div id="life-events">';
 			data.forEach(function(d){
 				html += life.renderEvent(d);
 			});
+			html += '</div>';
 			life.$el.innerHTML = html;
 		}
 	};
 
 	var slider = {
 		startingMousePostition: {},
-		startingPagePosition: {},
+		containerOffset: {},
 		init: function(){
-			window.addEventListener('mousedown', function(event){
+			life.$el.addEventListener('mousedown', function(event){
 				slider.startingMousePostition = {
 					x: event.clientX,
 					y: event.clientY
 				};
-				slider.startingPagePosition = {
-					x: window.pageXOffset,
-					y: window.pageYOffset
+				slider.containerOffset = {
+					x: life.$el.scrollLeft,
+					y: life.$el.scrollTop
 				};
 				window.addEventListener('mousemove', slider.slide);
 			});
@@ -331,9 +364,9 @@ h1{
 		},
 		slide: function(event){
 			event.preventDefault();
-			var x = slider.startingPagePosition.x + (slider.startingMousePostition.x - event.clientX);
-			var y = slider.startingPagePosition.y + (slider.startingMousePostition.y - event.clientY);
-			window.scrollTo(x, y);
+			var x = slider.containerOffset.x + (slider.startingMousePostition.x - event.clientX);
+			var y = slider.containerOffset.y + (slider.startingMousePostition.y - event.clientY);
+			life.$el.scrollTo(x, y);
 		}
 	};