From 110f7d320d860ca645c35f95f01ee21650fde2cd Mon Sep 17 00:00:00 2001
From: Mesrop Minasyan <mesrop.minasyan@gmail.com>
Date: Tue, 4 Mar 2014 21:11:55 +0400
Subject: [PATCH] fix responsiveness and code snippets overflow

---
 www/css/main.css   | 61 +++++++++++++++++++++++++++++++
 www/index.html     |  7 ++--
 www/less/main.less | 90 ++++++++++++++++++++++++++++++++++++++++++++--
 3 files changed, 152 insertions(+), 6 deletions(-)

diff --git a/www/css/main.css b/www/css/main.css
index 713c5c5f1a..5f45b53ec9 100644
--- a/www/css/main.css
+++ b/www/css/main.css
@@ -38,6 +38,11 @@ body {
   color: #898788;
   font-family: 'Open Sans', sans-serif;
 }
+body .content-root {
+  background-color: #f3f6fb;
+  -webkit-box-shadow: inset 780px 0 #ffffff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0, 0, 0, 0.1);
+  box-shadow: inset 780px 0 #ffffff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0, 0, 0, 0.1);
+}
 body:not(.no-literate) .content-root {
   background: #4a4a4c;
 }
@@ -82,7 +87,32 @@ body:not(.no-literate) .content h3 {
   font-size: 17px;
 }
 body:not(.no-literate) .content pre {
+  display: block;
+  position: relative;
   float: left;
+  width: 40%;
+  width: -moz-calc(100% - 550px);
+  width: -webkit-calc(100% - 550px);
+  width: -o-calc(100% - 550px);
+  width: calc(100% - 550px);
+  overflow-x: auto;
+}
+body:not(.no-literate) .content pre:after {
+  content: ".";
+  display: block;
+  visibility: hidden;
+  line-height: 0;
+  height: 0;
+}
+body:not(.no-literate) .content ul + pre {
+  width: -moz-calc(100% - 570px);
+  width: -webkit-calc(100% - 570px);
+  width: -o-calc(100% - 570px);
+  width: calc(100% - 570px);
+}
+body:not(.no-literate) .content li pre {
+  padding-left: 112%;
+  overflow: inherit;
 }
 a {
   color: #517ab8;
@@ -186,3 +216,34 @@ a {
 .header h1 + ul li:hover a {
   background: rgba(255, 255, 255, 0.1);
 }
+@media (max-width: 1180px) {
+  body:not(.no-literate) .body .content-root {
+    background: #fff;
+    box-shadow: none;
+    width: 100%;
+  }
+  body:not(.no-literate) .content pre {
+    width: 100%;
+    overflow-x: auto;
+    float: none;
+  }
+  body:not(.no-literate) .content pre code {
+    padding-left: 0;
+  }
+  body:not(.no-literate) .content li pre {
+    width: 100%;
+    padding-left: 0;
+  }
+  body:not(.no-literate) .content ul + pre {
+    width: 100%;
+  }
+  .content {
+    width: 100%;
+    max-width: 100%;
+    background: #fff;
+  }
+  .content pre {
+    width: 100%;
+    padding-left: 0;
+  }
+}
diff --git a/www/index.html b/www/index.html
index d2533c5dd4..844e415cf4 100644
--- a/www/index.html
+++ b/www/index.html
@@ -18,7 +18,7 @@
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
   <meta name="viewport" content="width=device-width">
 
-  <title>Ripple Developer Portal</title>
+  <title>Ripple Web Client</title>
 
   <!-- Flatdoc -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
@@ -41,8 +41,8 @@
   <!-- Initializer -->
   <script>
     Flatdoc.run({
-      fetcher: Flatdoc.github('n0rmz/ripple-dev-portal', 'API.md')
-      // fetcher: Flatdoc.file('API.md')
+      // fetcher: Flatdoc.github('n0rmz/ripple-dev-portal', 'API.md')
+      fetcher: Flatdoc.file('API.md')
     });
   </script>
 </head>
@@ -54,6 +54,7 @@
       <ul>
         <li class="active"><a href='#'>Documentation</a></li>
         <li><a href='#'>Developer blog</a></li>
+        <li><a href='#'>API tool</a></li>
       </ul>
     </div>
     <div class='right'>
diff --git a/www/less/main.less b/www/less/main.less
index f2a1dc9fd4..b6bb228f07 100644
--- a/www/less/main.less
+++ b/www/less/main.less
@@ -4,9 +4,15 @@
 	-webkit-box-sizing:border-box;
 	-moz-box-sizing:border-box;
 }
+
 body{
 	color: #898788;
 	font-family: 'Open Sans', sans-serif;
+	.content-root {
+		background-color: #f3f6fb;
+		-webkit-box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1);
+		 box-shadow: inset 780px 0 #fff, inset 781px 0 #dfe2e7, inset 790px 0 5px -10px rgba(0,0,0,0.1); 
+		}
 	&:not(.no-literate){ 
 		.content-root{
 			background: #4a4a4c;
@@ -15,6 +21,7 @@ body{
 			color: #fff;
 		}
 		.content{
+
 			width: 100%;
 			overflow-x: hidden;
 			padding-top: 10px;
@@ -40,12 +47,46 @@ body{
 				font-size: 17px; 
 			}
 			/**********************       CODE      *****************/ 
+			
 			pre {
-
-				
+				display: block;
+				position: relative;
 				float: left;
-			}
+				width:40%;
+			    width: -moz-calc(~"100% - 550px");
+			    width: -webkit-calc(~"100% - 550px");
+			    width: -o-calc(~"100% - 550px");
+			    width: calc(~"100% - 550px");
+			    overflow-x: auto;
+				
+				&:after {
+					content: ".";
+					display: block;
+					
+					visibility: hidden;
+					line-height: 0;
+					height: 0;
+				}
 
+			}
+			ul + pre {
+				width: -moz-calc(~"100% - 570px");
+				width: -webkit-calc(~"100% - 570px");
+				width: -o-calc(~"100% - 570px");
+				width: calc(~"100% - 570px");
+			}
+			li {
+				pre {
+					padding-left: 112%;
+					// 
+				 overflow: inherit;
+				   
+				}
+			}
+			ul,p,pre,h1,h2,h3,h4,h5,h6,blockquote {
+				
+			}
+			
 			/**********************       CODE      *****************/ 
 		}
 	}
@@ -165,4 +206,47 @@ a{
 		}
 	}
 
+}
+@media (max-width: 1180px){
+	body{
+		&:not(.no-literate){ 
+			.body .content-root {
+				background: #fff;
+				box-shadow: none;
+				width: 100%;
+			}
+			.content {
+				pre {
+					width: 100%;
+					
+					overflow-x: auto;
+					float: none;
+					code {
+						padding-left: 0;
+					}
+				}
+				li {
+					pre {
+						width: 100%;
+						padding-left: 0;
+					}
+				}
+				ul + pre {
+					width: 100%;
+				}
+
+			}
+		}
+		
+	}
+	.content {
+		width: 100%;
+		max-width: 100%;
+		background: #fff;
+		pre {
+			width: 100%;
+			padding-left: 0;
+		}
+		
+	}
 }
\ No newline at end of file