Skip to content

Commit

Permalink
Added some responsive css
Browse files Browse the repository at this point in the history
  • Loading branch information
@paveljanda
paveljanda committed Nov 22, 2017
1 parent 8382db9 commit 3f97e29
Show file tree
Hide file tree
Showing 3 changed files with 86 additions and 30 deletions.
112 changes: 83 additions & 29 deletions assets/layout.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,23 +18,93 @@ body {
max-width: 100vw;
height: 100vh;
max-height: 100vh;
display: grid;
grid-template-rows: 80px auto 80px;
grid-template-areas:
"header header header header"
"empty-left nav main empty-right"
"footer footer footer footer";
grid-column-gap: 25px;
}

@media screen and (min-width: 992px) and (max-width: 1274px) {
body {
text-align: center;
}

main {
text-align: left;
}

nav {
width: auto;
display: inline-block;
min-width: 33%;
}
}

@media screen and (max-width: 1274px) {
header > h1 {
font-size: 1.5em;
}
}

@media screen and (min-width: 0px) {
body {
font-size: 12px;
}

.empty-left, .empty-right {
display: none;
}

main {
font-size: 14px;
}

code {
font-size: 12px;
}

button.section-method, a.section-site {
font-size: 12px;
}

pre {
font-size: 13px;
}
}

@media screen and (min-width: 1275px) {
body {
display: grid;
grid-column-gap: 25px;
grid-template-columns: auto 300px 900px auto;
grid-template-rows: 80px auto 25px;
grid-template-areas:
"header header header header"
"empty-left nav main empty-right"
"footer footer footer footer";
font-size: 12px;
}

header {
grid-area: header;
}

nav {
grid-area: nav;
align-self: start;
}

main {
font-size: 14px;
border-radius: 2px;
}

.empty-left {
grid-area: empty-left;
}

.empty-right {
grid-area: empty-right;
}

footer {
grid-area: footer;
}

code {
Expand All @@ -53,6 +123,11 @@ body {
@media screen and (min-width: 1500px) {
body {
grid-template-columns: auto 350px 1050px auto;
grid-template-rows: 80px auto 25px;
grid-template-areas:
"header header header header"
"empty-left nav main empty-right"
"footer footer footer footer";
font-size: 13px;
}

Expand All @@ -73,32 +148,12 @@ body {
}
}

header {
grid-area: header;
}

header > h1 {
color: #eee;
text-align: center;
line-height: 80px;
vertical-align: middle;
}

nav {
grid-area: nav;
align-self: start;
}

.empty-left {
grid-area: empty-left;
}

.empty-right {
grid-area: empty-right;
}

footer {
grid-area: footer;
margin: 0 !important;
}

button.section-method, a.section-site {
Expand Down Expand Up @@ -214,7 +269,6 @@ a:hover {
main {
background-color: #fff;
padding: 25px;
border-radius: 2px;
box-sizing: border-box;
grid-area: main;
align-self: start;
Expand Down
2 changes: 2 additions & 0 deletions assets/layout.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,8 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>{title}</title>
<style>{styles}</style>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/>
Expand Down
2 changes: 1 addition & 1 deletion demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
<!DOCTYPE html> <html> <head> <title>Awesome cookbook JSON-RPC API doc</title> <style>html{margin:0;padding:0;height:100%;width:100%}body{margin:0;padding:0;background-color:#2980b9;background-color:#34495e;font-family:Arial,Helvetica,sans-serif;color:#2c3e50;overflow:auto;box-sizing:border-box;width:100vw;max-width:100vw;height:100vh;max-height:100vh;display:grid;grid-template-rows:80px auto 80px;grid-template-areas:"header header header header" "empty-left nav main empty-right" "footer footer footer footer";grid-column-gap:25px}@media screen and (min-width:0){body{grid-template-columns:auto 300px 900px auto;font-size:12px}main{font-size:14px}code{font-size:12px}button.section-method,a.section-site{font-size:12px}pre{font-size:13px}}@media screen and (min-width:1500px){body{grid-template-columns:auto 350px 1050px auto;font-size:13px}main{font-size:15px}code{font-size:13px}button.section-method,a.section-site{font-size:13px}pre{font-size:14px}}header{grid-area:header}header>h1{color:#eee;text-align:center;line-height:80px;vertical-align:middle}nav{grid-area:nav;align-self:start}.empty-left{grid-area:empty-left}.empty-right{grid-area:empty-right}footer{grid-area:footer}button.section-method,a.section-site{display:block;width:100%;border:0;margin:0;line-height:32px;vertical-align:middle;padding:0 1em;background-color:#fff;color:#505050;box-sizing:border-box;text-align:left;border-radius:0;cursor:pointer;border-left:4px solid transparent}button.section-method:hover,a.section-site:hover,button.section-method:active,a.section-site:active,button.section-method:focus,a.section-site:focus,button.section-method:target,a.section-site:target{background-color:#eee;cursor:pointer;outline:none;text-decoration:none}button.section-method.active,a.section-site.active{background-color:#eee;border-left:4px solid #f39c12}.section-site:first-of-type{font-weight:700}.section-method:first-of-type,.section-site:first-of-type{border-top-right-radius:2px;border-top-left-radius:2px}.section-method:last-of-type,.section-site:last-of-type{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.section-method:first-of-type{margin-top:1em}h1,h2,h3,h4,h5,h6{margin:1.2em 0;font-weight:600}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin:0 0 1em 0}p{margin:0 0 1em 0}h1{font-size:2.2em}h2{font-size:1.7em}h3{font-size:1.37em}h4{font-size:1em}h5{font-size:1.03em}h6{font-size:.87em}ul{margin:1em 0 1.5em}h2:first-of-type::before{content:"Section: ";font-weight:400;color:#949aa0}a{color:#3498db;text-decoration:none}a:visited{color:#3498db}a:hover{text-decoration:underline}main{background-color:#fff;padding:25px;border-radius:2px;box-sizing:border-box;grid-area:main;align-self:start}pre{background-color:#ecf0f1;padding:.5em;font-family:"Lucida Console",Monaco,monospace}code{background-color:#ecf0f1;color:#8e44ad;padding:2px 4px;font-family:"Lucida Console",Monaco,monospace}pre code{background-color:#ecf0f1;color:#2c3e50;padding:none}pre:last-child{margin-bottom:0}.language-json-string{color:#e67e22}.language-json-number{color:#138C58}.language-json-key{color:#4a51bf}</style> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> </head> <body> <header><h1>Awesome cookbook JSON-RPC API doc</h1></header> <div class="empty-left"></div> <nav> <p><a data-section-src="home.html" class="section-site" data-target="home">Home</a> <a data-section-src="about.html" class="section-site" data-target="about-project">About project</a> <button data-section-src="methods/user.login.html" class="section-method" data-target="user-login">user.login</button> <button data-section-src="methods/user.logout.html" class="section-method" data-target="user-logout">user.logout</button></p></nav> <div class="empty-right"></div> <main id="section"></main> <footer></footer> <script type="text/javascript">var initSyntaxHighlighting=function(){var jsonAreas=document.getElementById("section").getElementsByClassName("language-json");for(var i=0;i<jsonAreas.length;i++){var content=jsonAreas[i].innerHTML;content=content.replace(/"([^"]+)":/g,"<span class=language-json-key>&quot;$1&quot;:</span>");content=content.replace(/"([^"]+)"([^:])/g,"<span class=language-json-string>&quot;$1&quot;</span>$2");content=content.replace(/([ ,:{\n])(\d+)/g,"$1<span class=language-json-number>$2</span>");jsonAreas[i].innerHTML=content}};document.addEventListener("DOMContentLoaded",function(event){var buttons=document.querySelectorAll("[data-section-src]");for(var i=0;i<buttons.length;i++){buttons[i].addEventListener("click",function(event){event.stopPropagation();event.preventDefault();window.location.hash=this.getAttribute("data-target")})} if(buttons.length){if(window.location.hash){onHashChangeRouter()}else{window.location.hash=buttons[0].getAttribute("data-target")}}});var onHashChangeRouter=function(){if(window.location.hash){var hash=window.location.hash.replace(/#/,"");var sectionLink=document.querySelectorAll('[data-target="'+hash+'"]');var activeLinks=document.querySelectorAll('.active[data-target]');for(var i=0;i<activeLinks.length;i++){activeLinks[i].classList.remove('active')} if(sectionLink.length){sectionLink=sectionLink[0];var xhr=new XMLHttpRequest();xhr.addEventListener("load",function(e){document.getElementById("section").innerHTML=this.response;sectionLink.classList.add('active');initSyntaxHighlighting()});xhr.open("GET",sectionLink.getAttribute("data-section-src"));xhr.send()}}};window.addEventListener("hashchange",onHashChangeRouter)</script> </body> </html>
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"> <title>Awesome cookbook JSON-RPC API doc</title> <style>html{margin:0;padding:0;height:100%;width:100%}body{margin:0;padding:0;background-color:#2980b9;background-color:#34495e;font-family:Arial,Helvetica,sans-serif;color:#2c3e50;overflow:auto;box-sizing:border-box;width:100vw;max-width:100vw;height:100vh;max-height:100vh}@media screen and (min-width:992px) and (max-width:1274px){body{text-align:center}main{text-align:left}nav{width:auto;display:inline-block;min-width:33%}}@media screen and (max-width:1274px){header>h1{font-size:1.5em}}@media screen and (min-width:0){body{font-size:12px}.empty-left,.empty-right{display:none}main{font-size:14px}code{font-size:12px}button.section-method,a.section-site{font-size:12px}pre{font-size:13px}}@media screen and (min-width:1275px){body{display:grid;grid-column-gap:25px;grid-template-columns:auto 300px 900px auto;grid-template-rows:80px auto 25px;grid-template-areas:"header header header header" "empty-left nav main empty-right" "footer footer footer footer";font-size:12px}header{grid-area:header}nav{grid-area:nav;align-self:start}main{font-size:14px;border-radius:2px}.empty-left{grid-area:empty-left}.empty-right{grid-area:empty-right}footer{grid-area:footer}code{font-size:12px}button.section-method,a.section-site{font-size:12px}pre{font-size:13px}}@media screen and (min-width:1500px){body{grid-template-columns:auto 350px 1050px auto;grid-template-rows:80px auto 25px;grid-template-areas:"header header header header" "empty-left nav main empty-right" "footer footer footer footer";font-size:13px}main{font-size:15px}code{font-size:13px}button.section-method,a.section-site{font-size:13px}pre{font-size:14px}}header>h1{color:#eee;text-align:center;line-height:80px;vertical-align:middle;margin:0!important}button.section-method,a.section-site{display:block;width:100%;border:0;margin:0;line-height:32px;vertical-align:middle;padding:0 1em;background-color:#fff;color:#505050;box-sizing:border-box;text-align:left;border-radius:0;cursor:pointer;border-left:4px solid transparent}button.section-method:hover,a.section-site:hover,button.section-method:active,a.section-site:active,button.section-method:focus,a.section-site:focus,button.section-method:target,a.section-site:target{background-color:#eee;cursor:pointer;outline:none;text-decoration:none}button.section-method.active,a.section-site.active{background-color:#eee;border-left:4px solid #f39c12}.section-site:first-of-type{font-weight:700}.section-method:first-of-type,.section-site:first-of-type{border-top-right-radius:2px;border-top-left-radius:2px}.section-method:last-of-type,.section-site:last-of-type{border-bottom-right-radius:2px;border-bottom-left-radius:2px}.section-method:first-of-type{margin-top:1em}h1,h2,h3,h4,h5,h6{margin:1.2em 0;font-weight:600}h1:first-child,h2:first-child,h3:first-child,h4:first-child,h5:first-child,h6:first-child{margin:0 0 1em 0}p{margin:0 0 1em 0}h1{font-size:2.2em}h2{font-size:1.7em}h3{font-size:1.37em}h4{font-size:1em}h5{font-size:1.03em}h6{font-size:.87em}ul{margin:1em 0 1.5em}h2:first-of-type::before{content:"Section: ";font-weight:400;color:#949aa0}a{color:#3498db;text-decoration:none}a:visited{color:#3498db}a:hover{text-decoration:underline}main{background-color:#fff;padding:25px;box-sizing:border-box;grid-area:main;align-self:start}pre{background-color:#ecf0f1;padding:.5em;font-family:"Lucida Console",Monaco,monospace}code{background-color:#ecf0f1;color:#8e44ad;padding:2px 4px;font-family:"Lucida Console",Monaco,monospace}pre code{background-color:#ecf0f1;color:#2c3e50;padding:none}pre:last-child{margin-bottom:0}.language-json-string{color:#e67e22}.language-json-number{color:#138C58}.language-json-key{color:#4a51bf}</style> <link rel="shortcut icon" type="image/x-icon" href="favicon.ico"/> </head> <body> <header><h1>Awesome cookbook JSON-RPC API doc</h1></header> <div class="empty-left"></div> <nav> <p><a data-section-src="home.html" class="section-site" data-target="home">Home</a> <a data-section-src="about.html" class="section-site" data-target="about-project">About project</a> <button data-section-src="methods/user.login.html" class="section-method" data-target="user-login">user.login</button> <button data-section-src="methods/user.logout.html" class="section-method" data-target="user-logout">user.logout</button></p></nav> <div class="empty-right"></div> <main id="section"></main> <footer></footer> <script type="text/javascript">var initSyntaxHighlighting=function(){var jsonAreas=document.getElementById("section").getElementsByClassName("language-json");for(var i=0;i<jsonAreas.length;i++){var content=jsonAreas[i].innerHTML;content=content.replace(/"([^"]+)":/g,"<span class=language-json-key>&quot;$1&quot;:</span>");content=content.replace(/"([^"]+)"([^:])/g,"<span class=language-json-string>&quot;$1&quot;</span>$2");content=content.replace(/([ ,:{\n])(\d+)/g,"$1<span class=language-json-number>$2</span>");jsonAreas[i].innerHTML=content}};document.addEventListener("DOMContentLoaded",function(event){var buttons=document.querySelectorAll("[data-section-src]");for(var i=0;i<buttons.length;i++){buttons[i].addEventListener("click",function(event){event.stopPropagation();event.preventDefault();window.location.hash=this.getAttribute("data-target")})} if(buttons.length){if(window.location.hash){onHashChangeRouter()}else{window.location.hash=buttons[0].getAttribute("data-target")}}});var onHashChangeRouter=function(){if(window.location.hash){var hash=window.location.hash.replace(/#/,"");var sectionLink=document.querySelectorAll('[data-target="'+hash+'"]');var activeLinks=document.querySelectorAll('.active[data-target]');for(var i=0;i<activeLinks.length;i++){activeLinks[i].classList.remove('active')} if(sectionLink.length){sectionLink=sectionLink[0];var xhr=new XMLHttpRequest();xhr.addEventListener("load",function(e){document.getElementById("section").innerHTML=this.response;sectionLink.classList.add('active');initSyntaxHighlighting()});xhr.open("GET",sectionLink.getAttribute("data-section-src"));xhr.send()}}};window.addEventListener("hashchange",onHashChangeRouter)</script> </body> </html>

0 comments on commit 3f97e29

Please sign in to comment.