Responsive design for mobile devices.

Signed-off-by: Haocen Xu <haocen.xu@gmail.com>

static/index.html

@@ -4,6 +4,7 @@
 
 		<title>hastebin</title>
 		<meta charset="utf-8" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
 		<link rel="stylesheet" type="text/css" href="solarized_dark.css"/>
 		<link rel="stylesheet" type="text/css" href="application.css"/>
 
@@ -33,7 +34,38 @@
 			$(function() {
 				app = new haste('hastebin', { twitter: true });
 				handlePop({ target: window });
+				responsive();
 			});
+
+			function responsive() {
+				// apply touch device specific style
+				if ("ontouchstart" in document.documentElement) {
+					var mTextAreaStyle = document.createElement('style');
+					mTextAreaStyle.setAttribute('rel', 'stylesheet')
+					mTextAreaStyle.setAttribute('type', 'text/css');
+					document.head.appendChild(mTextAreaStyle);
+					mTextAreaStyle.sheet.insertRule('textarea{ padding-bottom: 95px; }', 0);
+
+					var key = document.getElementById('key');
+					key.style.top = 'auto';
+					key.style.bottom = '0px';
+
+					var box1 = document.getElementById('box1');
+					box1.style.transition = 'opacity 1s';
+					setTimeout(() => {
+						box1.style.opacity = 0;
+						box1.addEventListener('transitionend', function(event) {
+							box1.parentElement.removeChild(box1)
+						}, {
+							capture: false,
+							once: true
+						});
+
+						var tArea = document.querySelector('textarea');
+						tArea.style.paddingBottom = '95px';
+					}, 1000);
+				}
+			}
 		</script>
 
 	</head>