docserverk - Visual redesign.
Bug: skia:
Change-Id: I3b04c0c8e0f5fce9dc449663cb4bf90c6fc45a17
Reviewed-on: https://skia-review.googlesource.com/c/178862
Reviewed-by: Heather Miller <hcm@google.com>
Commit-Queue: Joe Gregorio <jcgregorio@google.com>
diff --git a/docserverk/res/css/docs.css b/docserverk/res/css/docs.css
index f7ecee6..76cd93e 100644
--- a/docserverk/res/css/docs.css
+++ b/docserverk/res/css/docs.css
@@ -3,8 +3,10 @@
Do not edit docs.css, it is generaed from main.css.
*/
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,700,700i&subset=greek,greek-ext,latin-ext');
+
body {
- font-family: Arial, sans-serif;
+ font-family: 'Roboto', Arial, sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
@@ -14,27 +16,14 @@
color: #1f78b4;
}
-#page {
- display: -ms-flexbox;
- display: flex;
-}
-#body {
+main {
padding: 1em;
padding-left: 2em;
overflow-y: auto;
max-width: 90em;
}
-#content {
- padding: 2em;
- margin-left: 280px;
-}
-
-#content ul {
- margin-top: 0.2em;
-}
-
pre {
margin-left: 1em;
padding: 1em;
@@ -50,10 +39,15 @@
color: darkgreen;
}
-h1, h2, h3, h4 {
+h2, h3, h4 {
font-weight: normal;
}
+h1 {
+ font-size: 3rem;
+ font-weight: 300;
+}
+
h2 {
margin-top: 1em;
margin-bottom: 0.2em;
@@ -61,14 +55,9 @@
#drawer {
min-width: 250px;
- max-width: 280px; /*do not overlap #content*/
background: #fafafa;
padding: 10px;
overflow-y: scroll;
- height: 98vh;
- position: fixed;
- top: 0;
- left: 0;
}
img {
@@ -115,8 +104,14 @@
display: none;
}
-div#___gcse_0 {
+#___gcse_0 {
width: 260px;
+ display: inline-block;
+ margin: 0.4em;
+}
+
+#___gcse_0 button {
+ height: 25px;
}
.float {
@@ -135,33 +130,110 @@
padding: 0;
}
+#rhs,
+#lhs {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ font-size: 18px;
+ font-weight: 300;
+}
+
+#rhs > *,
+#lhs > * {
+ margin-left: 0.6em;
+}
+
+header {
+ grid-area: header;
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ -ms-flex-pack: justify;
+ justify-content: space-between;
+ border-bottom: solid 24px #4285F4;
+ background: #f8f8f8;
+ position: -webkit-sticky;
+ position: sticky;
+ top: 0;
+}
+
+header img {
+ width: auto;
+ height: 32px;
+ margin: 0;
+}
+
+main {
+ grid-area: main;
+ margin: 0 auto;
+ padding-bottom: 2em;
+}
+
+aside {
+ grid-area: aside;
+}
+
+footer {
+ grid-area: footer;
+ background: #f8f8f8;
+}
+
+body {
+ height: 100vh;
+ width: 100vw;
+ display: grid;
+ grid-template-columns: 250px 1fr;
+ grid-template-rows: 92px 1fr 24px;
+ grid-template-areas:
+ "header header"
+ "aside main"
+ "footer footer";
+}
+
@media (max-width: 900px) {
+
+ body {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 92px 1fr 24px;
+ grid-template-areas:
+ "header"
+ "main"
+ "footer";
+ }
+
#menu {
width: 30px;
height: 30px;
border: 0;
padding: 0;
margin: 0;
- background: white;
- display: block;
+ background: #f8f8f8;
+ display: inline-block;
}
- #drawer {
- left: -100%;
+ aside {
+ display: block;
+ left: -350px;
position: absolute;
transition: left 0.5s;
+ width: 300px;
}
#menu:hover {
background: lightgray;
}
- #drawer.opened {
+ aside.opened {
left: 0%;
}
- #content {
+ main {
margin-left: 10px;
}
}
+
.pln{color:#000}@media screen{.str{color:#080}.kwd{color:#008}.com{color:#800}.typ{color:#606}.lit{color:#066}.pun,.opn,.clo{color:#660}.tag{color:#008}.atn{color:#606}.atv{color:#080}.dec,.var{color:#606}.fun{color:red}}@media print,projection{.str{color:#060}.kwd{color:#006;font-weight:bold}.com{color:#600;font-style:italic}.typ{color:#404;font-weight:bold}.lit{color:#044}.pun,.opn,.clo{color:#440}.tag{color:#006;font-weight:bold}.atn{color:#404}.atv{color:#060}}pre.prettyprint{padding:2px;border:1px solid #888}ol.linenums{margin-top:0;margin-bottom:0}li.L0,li.L1,li.L2,li.L3,li.L5,li.L6,li.L7,li.L8{list-style-type:none}li.L1,li.L3,li.L5,li.L7,li.L9{background:#eee}
\ No newline at end of file
diff --git a/docserverk/res/css/main.css b/docserverk/res/css/main.css
index 61f6c92..7a05c10 100644
--- a/docserverk/res/css/main.css
+++ b/docserverk/res/css/main.css
@@ -3,8 +3,10 @@
Do not edit docs.css, it is generaed from main.css.
*/
+@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,700,700i&subset=greek,greek-ext,latin-ext');
+
body {
- font-family: Arial, sans-serif;
+ font-family: 'Roboto', Arial, sans-serif;
font-size: 15px;
margin: 0;
padding: 0;
@@ -14,26 +16,14 @@
color: #1f78b4;
}
-#page {
- display: flex;
-}
-#body {
+main {
padding: 1em;
padding-left: 2em;
overflow-y: auto;
max-width: 90em;
}
-#content {
- padding: 2em;
- margin-left: 280px;
-}
-
-#content ul {
- margin-top: 0.2em;
-}
-
pre {
margin-left: 1em;
padding: 1em;
@@ -49,10 +39,15 @@
color: darkgreen;
}
-h1, h2, h3, h4 {
+h2, h3, h4 {
font-weight: normal;
}
+h1 {
+ font-size: 3rem;
+ font-weight: 300;
+}
+
h2 {
margin-top: 1em;
margin-bottom: 0.2em;
@@ -63,10 +58,6 @@
background: #fafafa;
padding: 10px;
overflow-y: scroll;
- height: 98vh;
- position: fixed;
- top: 0;
- left: 0;
}
img {
@@ -113,8 +104,14 @@
display: none;
}
-div#___gcse_0 {
+#___gcse_0 {
width: 260px;
+ display: inline-block;
+ margin: 0.4em;
+}
+
+#___gcse_0 button {
+ height: 25px;
}
.float {
@@ -133,32 +130,103 @@
padding: 0;
}
+#rhs,
+#lhs {
+ display: flex;
+ align-items: center;
+ font-size: 18px;
+ font-weight: 300;
+}
+
+#rhs > *,
+#lhs > * {
+ margin-left: 0.6em;
+}
+
+header {
+ grid-area: header;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: solid 24px #4285F4;
+ background: #f8f8f8;
+ position: sticky;
+ top: 0;
+}
+
+header img {
+ width: auto;
+ height: 32px;
+ margin: 0;
+}
+
+main {
+ grid-area: main;
+ margin: 0 auto;
+ padding-bottom: 2em;
+}
+
+aside {
+ grid-area: aside;
+}
+
+footer {
+ grid-area: footer;
+ background: #f8f8f8;
+}
+
+body {
+ height: 100vh;
+ width: 100vw;
+ display: grid;
+ grid-template-columns: 250px 1fr;
+ grid-template-rows: 92px 1fr 24px;
+ grid-template-areas:
+ "header header"
+ "aside main"
+ "footer footer";
+}
+
@media (max-width: 900px) {
+
+ body {
+ display: grid;
+ grid-template-columns: 1fr;
+ grid-template-rows: 92px 1fr 24px;
+ grid-template-areas:
+ "header"
+ "main"
+ "footer";
+ }
+
#menu {
width: 30px;
height: 30px;
border: 0;
padding: 0;
margin: 0;
- background: white;
- display: block;
+ background: #f8f8f8;
+ display: inline-block;
}
- #drawer {
- left: -100%;
+ aside {
+ display: block;
+ left: -350px;
position: absolute;
transition: left 0.5s;
+ width: 300px;
}
#menu:hover {
background: lightgray;
}
- #drawer.opened {
+ aside.opened {
left: 0%;
}
- #content {
+ main {
margin-left: 10px;
}
}
+
diff --git a/docserverk/res/js/docs.js b/docserverk/res/js/docs.js
index 7593217..54c85b6 100644
--- a/docserverk/res/js/docs.js
+++ b/docserverk/res/js/docs.js
@@ -43,8 +43,8 @@
} else {
window.history.pushState(null, null, url);
highlightNav();
- $$$('html #content').innerHTML = content;
- $$$('html #page').scrollIntoView();
+ $$$('main').innerHTML = content;
+ window.scrollTo(0,0);
prettyPrint();
}
});
diff --git a/docserverk/templates/index.html b/docserverk/templates/index.html
index 7026eda..29916d5 100644
--- a/docserverk/templates/index.html
+++ b/docserverk/templates/index.html
@@ -13,27 +13,32 @@
<link href="/res/css/docs.css" rel="stylesheet" />
</head>
<body>
- <div id=page>
- <div id=drawer drawer vertical layout>
- <img src="/res/img/logo.png" width=204 height=91>
-
- <gcse:searchbox-only></gcse:searchbox-only>
-
- {{.Nav}}
- </div>
-
- <div id=body main>
+ <header>
+ <div id=lhs>
<button id=menu title="Menu">
- <svg viewBox="0 0 24 24" height="24px" width="24px">
+ <svg viewBox="0 0 24 24" height="24px" width="24px">
<g>
- <path d="M3 18h18v-2h-18v2zm0-5h18v-2h-18v2zm0-7v2h18v-2h-18z"></path>
+ <path d="M3 18h18v-2h-18v2zm0-5h18v-2h-18v2zm0-7v2h18v-2h-18z"></path>
</g>
</svg>
</button>
- <div id=content>
- {{.Body}}
- </div>
+ <img src="/res/img/logo.png">
</div>
- </div>
+ <div id=rhs>
+ <a href="https://groups.google.com/forum/#!forum/skia-discuss">Community</a>
+ <a href="https:bugs.skia.org">Issues</a>
+ <a href="/user/api">Reference</a>
+ <a href="https://fiddle.skia.org">Playground</a>
+ <gcse:searchbox-only></gcse:searchbox-only>
+ </div>
+ </header>
+ <aside id=drawer>
+ {{.Nav}}
+ </aside>
+ <main>
+ {{.Body}}
+ </main>
+ <footer>
+ </footer>
</body>
</html>
