fix responsiveness and code snippets overflow

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;
+		}
+		
+	}
 }