ARCHIVE/xrpl-dev-portal
1
0
Fork 0
mirror of https://github.com/XRPLF/xrpl-dev-portal.git synced 2025-11-21 04:05:49 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix responsiveness and code snippets overflow

Browse Source
This commit is contained in:
Mesrop Minasyan
2014-03-04 21:11:55 +04:00
parent ae43dab666
commit 110f7d320d
3 changed files with 152 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
www/css/main.css
View File

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

7
www/index.html
View File

@@ -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'>

90
www/less/main.less
View File

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