reset the width percentage; use media query to adapt layout based on …

…screen size;buttons on hover; move buttons to the left

manifest.json

@@ -1,7 +1,7 @@
 {
 	"manifest_version": 2,
 	"name": "Markdown Viewer ",
-	"version": "1.0.4",
+	"version": "1.0.5",
 	"description": "View markdown file in Chrome.",
 	"icons": {
 		"128": "images/favicon.png",

markdownviewer.css

@@ -1,14 +1,13 @@
 *{margin:0;padding:0;}
 #markdown-container{
-	width: 748px;
-	margin:10px auto;
-	background-color: #F8F8F8;
-	border:1px solid #ccc;
-	box-shadow:0 0 10px #999;
-	padding:2em;
+	display: inline;
+	float: left;
+	width: 65%;
+    padding: 10px 40px 10px 60px;
 	line-height:1.4em;
     font:13.34px helvetica,arial,freesans,clean,sans-serif;
-    color:black;
+
+	color:black;
 }
 p {
     margin:1em 0;
@@ -46,14 +45,14 @@ dt{font-weight:bold;margin-left:1em;}
 dd{margin-left:2em;margin-bottom:1em;}
 
 #markdown-outline{
-	display:none;
+	float: left;
+	display: inline;
 	position:fixed;
-	top:10px;
-	left:-999px;
-	border:1px solid #ccc;
-	box-shadow:5px 5px 2px #ccc;
-	padding: 5px 10px;
-	background-color: #fff;
+	width: 25%;
+	min-height: 100%;
+	padding: 25px 30px;
+	background-color: rgb(248, 248, 248);
+	border-left: 1px solid rgb(236, 236, 236);
 }
 #markdown-outline ul{
 	margin:5px 0 5px 0;
@@ -70,43 +69,58 @@ dd{margin-left:2em;margin-bottom:1em;}
 }
 
 #markdown-backTop{
-	position: fixed;
-	right:5px;
-	bottom:5px;
-	padding:5px;
+	padding: 15px 5px 5px 5px;
 	width:20px;
 	height:20px;
-	background:url(images/top-icon.png) no-repeat 5px 5px;
-	border:1px solid #ccc;
+	background: url(images/top-icon.png) no-repeat 5px 15px;
 	cursor:pointer;
 }
+#markdown-backTop:hover {
+    background: #fff url(images/top-icon.png) no-repeat 5px 15px;
+}
 
 #markdown-raw{
-	position: fixed;
-	right:60px;
-	bottom:5px;
 	padding:5px;
 	width:20px;
 	height:20px;
 	background:url(images/source-s-icon.png) no-repeat 5px 5px;
-	border:1px solid #ccc;
 	cursor:pointer;
 }
+#markdown-raw:hover {
+    background: #fff url(images/source-s-icon.png) no-repeat 5px 5px;
+}
 
 #markdown-bottom{
-	position: fixed;
-	right:120px;
-	bottom:5px;
-	padding:5px;
+	padding: 5px 5px 12px 5px;
 	width:20px;
 	height:20px;
 	background:url(images/bottom-icon.png) no-repeat 5px 5px;
-	border:1px solid #ccc;
 	cursor:pointer;
 }
+#markdown-bottom:hover {
+    background: #fff url(images/bottom-icon.png) no-repeat 5px 5px;
+}
+
+
+#markdown-buttons-container {
+    position : fixed;
+    top: 40%;
+    border: 1px solid rgb(236, 236, 236);
+    background: rgb(248, 248, 248);
+}
 
 @media print{
 	#markdown-container{
 		border-width:0;
 	}
 }
+
+@media (max-width: 979px) {
+    #markdown-outline{
+        visibility: hidden;
+    }
+
+    #markdown-container{
+        width: auto;
+    }
+}

markdownviewer.js

@@ -11,10 +11,15 @@
 	link.rel = 'stylesheet';
 	link.href = chrome.extension.getURL('prettify.css');
 	document.head.appendChild(link);
-	document.body.innerHTML = '<div id="markdown-container"></div><div id="markdown-outline">'+
-                            '</div><div id="markdown-backTop" onclick="window.scrollTo(0,0);">'+
-                            '</div><div id="markdown-bottom" onclick="window.scrollTo(0, document.body.scrollHeight);"></div>'+
-                            '<div id="markdown-raw" onclick="window.location=\'view-source:\' + window.location.href;"></div>';
+	document.body.innerHTML = 
+       '<div id="markdown-container"></div>'+
+	'<div id="markdown-outline"></div>'+
+	'<div id="markdown-buttons-container">'+
+		'<div id="markdown-backTop" onclick="window.scrollTo(0,0);"></div>'+
+		'<div id="markdown-raw" onclick="window.location=\'view-source:\' + window.location.href;"></div>'+
+		'<div id="markdown-bottom" onclick="window.scrollTo(0, document.body.scrollHeight);"></div>'+
+	'</div>';
+
 
 	window.onresize = showOutline;