*: docs pass
Change-Id: I87ca80d3f7728ed407071468ac233e6ad4574929
diff --git a/devtools/hackdoc/tpl/base.html b/devtools/hackdoc/tpl/base.html
index 5fd861a..8b93b39 100644
--- a/devtools/hackdoc/tpl/base.html
+++ b/devtools/hackdoc/tpl/base.html
@@ -3,9 +3,358 @@
<head>
<meta charset="utf-8">
<title>hackdoc:{{ .Title }}</title>
- {{ template "head" . }}
+ <style type="text/css">
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed,
+figure, figcaption, footer, header, hgroup,
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+ margin: 0;
+ padding: 0;
+ border: 0;
+ font-size: 100%;
+ font: inherit;
+ vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure,
+footer, header, hgroup, menu, nav, section {
+ display: block;
+}
+body {
+ line-height: 1;
+}
+ol, ul {
+ list-style: none;
+}
+blockquote, q {
+ quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+ content: '';
+ content: none;
+}
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
+
+body {
+ font-size: 14px;
+ line-height: 1.25em;
+ background-color: #f0f0f0;
+}
+
+html {
+ /* Cursed snippet to prevent entire page being shifted left when scrollbar
+ appears. */
+ overflow-x: hidden;
+ margin-right: calc(-1 * (100vw - 100%));
+}
+
+.wrapper {
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ width: 100%;
+ font-family: 'Open Sans', sans-serif;
+}
+
+.column {
+ width: 80em;
+ padding: 1rem 0 1rem 0;
+}
+
+.page {
+ background-color: #fefefe;
+ width: 100%;
+
+ display: flex;
+ flex-direction: row;
+ justify-content: space-between;
+}
+
+.content {
+ order: 1;
+ padding: 1rem 1rem 3rem 3rem;
+ width: 55em;
+}
+
+.sidebar {
+ order: 2;
+ width: 20em;
+ margin-left: 1em;
+ padding-top: 1rem;
+ padding-bottom: 3rem;
+}
+
+.sidebar ul {
+ padding: .5em;
+ border: 1px solid #ddd;
+ margin-top: 1em;
+ margin-right: 2em;
+ background-color: #f8f8f8;
+ font-size: 1em;
+}
+
+
+.header {
+ font-size: 1.2em;
+ font-family: Consolas, monospace;
+ margin-top: 1rem;
+ display: inline-flex;
+ background-color: #fefefe;
+ width: 100%;
+}
+
+.headerInner {
+ padding: 1em 1em 1em 3em;
+}
+
+.header a {
+ text-decoration: none;
+}
+.header a:hover {
+ text-decoration: underline;
+}
+
+.header span.red {
+ color: #b30014;
+}
+
+.header span.part {
+ color: #666;
+ padding-left: 0.2em;
+}
+
+.header span.part a {
+ color: rgb(27, 106, 203);
+}
+.header span.part a:visited {
+ color: rgb(27, 106, 203);
+}
+
+.topbar {
+ min-height: 1em;
+ padding: 1em 1em 1em 3.5em;
+}
+
+.topbar a {
+ text-decoration: none;
+ color: #333;
+ font-size: 1em;
+}
+.topbar a:hover {
+ text-decoration: underline;
+}
+
+.topbar span {
+ margin-right: 2em;
+}
+
+.footer {
+ font-size: 0.8em;
+ color: #ccc;
+ font-weight: 800;
+ padding: 0.5em 1em 1em;
+ text-align: right;
+}
+
+.footer .left {
+ float: left;
+}
+
+.footer .right {
+ float: right;
+}
+
+.footer a {
+ color: #bbb;
+}
+
+.page h1 {
+ font-size: 1.9em;
+ padding: 1em 0 0 0;
+ font-weight: 400;
+ color: #000;
+}
+
+.page p + h1 {
+ padding: 2em 0 0 0;
+}
+
+.page h2 {
+ font-size: 1.5em;
+ padding: 1.6em 0 0 0;
+ color: #000;
+ font-weight: 400;
+}
+
+.page h3 {
+ font-size: 1.4em;
+ padding: 0.4em 0 0 0;
+ color: #333;
+}
+
+.page h4 {
+ font-size: 1.0em;
+ color: #444;
+}
+
+.page strong {
+ font-weight: 600;
+}
+
+.page code {
+ font-family: Consolas, monospace;
+ background-color: #f8f8f8;
+}
+
+.page pre {
+ background-color: #f8f8f8;
+ border: 1px solid #d8d8d8;
+ margin: 2em 1em 2em 1em;
+ padding: 0.5em;
+ overflow: auto;
+ max-width: 60em;
+}
+
+.page h1 + p {
+ margin-top: 2em;
+}
+
+.page h2 + p {
+ margin-top: 1em;
+}
+
+.page h3 + p {
+ margin-top: 1em;
+}
+
+.page h4 + p {
+ margin-top: 1em;
+}
+
+
+.page p + p {
+ margin-top: 1em;
+}
+
+.page p {
+ line-height: 1.6em;
+}
+
+.page :not(li) > ul {
+ padding-top: 0.5em;
+ line-height: 1.5em;
+}
+
+.page ul li {
+ padding-left: 1em;
+}
+
+.page :not(li) > ul > li::before {
+ content: "•";
+ color: #333;;
+ display: inline-block;
+ width: 1em;
+ margin-left: -0.5em;
+}
+
+.page li > ul > li::before {
+ content: "◦";
+ color: #333;;
+ display: inline-block;
+ width: 1em;
+ margin-left: -0.5em;
+}
+
+.page img {
+ max-width: 50em;
+ margin: 1em 0 1em 0;
+ display: block;
+}
+
+.page table {
+ border: 1px solid #ddd;
+ width: 100%;
+ max-width: 100%;
+ margin-bottom: 20px;
+ margin-top: 20px;
+}
+
+.page table th {
+ border-bottom-width: 2px;
+ border: 1px solid #ddd;
+ border: 1px solid #e36372;
+ padding: 5px;
+ text-align: left;
+ vertical-align: bottom;
+ background-color: #e36372;
+ font-weight: 800;
+ color: #fff;
+}
+.page table td {
+ border: 1px solid #e36372;
+ padding: 5px;
+ vertical-align: top;
+ background-color: #ffdbdf;
+}
+
+.page table code {
+ font-family: Consolas, monospace;
+ background-color: #fcedef;
+}
+
+.toc {
+ padding: .5em;
+ border: 1px solid #ddd;
+ background-color: #f8f8f8;
+ margin: 2em;
+ max-width: 30em;
+ font-size: 1em;
+}
+
+.toc a {
+ text-decoration: none;
+}
+
+ </style>
</head>
<body>
- {{ template "body" . }}
+ <div class="wrapper">
+ <div class="column">
+ <div class="header">
+ <div class="headerInner">
+ {{ template "header" . }}
+ </div>
+ </div>
+ <div class="topbar">
+ {{ template "topbar" . }}
+ </div>
+
+ <div class="page">
+ <div class="sidebar">
+ <h3>Page Info</h3>
+ <ul>
+ {{ range .WebLinks }}
+ <li><a href="{{.LinkURL}}">View {{.Kind}} ({{ .LinkLabel }})</a></li>
+ {{ end }}
+ <li><a href="{{ .HackdocURL }}/devtools/hackdoc">Generated by hackdoc</a></li>
+ </ul>
+ </div>
+ {{ .Rendered }}
+ </div>
+ </div>
+ </div>
</body>
</html>
diff --git a/devtools/hackdoc/tpl/default.html b/devtools/hackdoc/tpl/default.html
index 6e1434e..24439bb 100644
--- a/devtools/hackdoc/tpl/default.html
+++ b/devtools/hackdoc/tpl/default.html
@@ -1,280 +1,14 @@
-{{ define "head" }}
-<style type="text/css">
-html, body, div, span, applet, object, iframe,
-h1, h2, h3, h4, h5, h6, p, blockquote, pre,
-a, abbr, acronym, address, big, cite, code,
-del, dfn, em, img, ins, kbd, q, s, samp,
-small, strike, strong, sub, sup, tt, var,
-b, u, i, center,
-dl, dt, dd, ol, ul, li,
-fieldset, form, label, legend,
-table, caption, tbody, tfoot, thead, tr, th, td,
-article, aside, canvas, details, embed,
-figure, figcaption, footer, header, hgroup,
-menu, nav, output, ruby, section, summary,
-time, mark, audio, video {
- margin: 0;
- padding: 0;
- border: 0;
- font-size: 100%;
- font: inherit;
- vertical-align: baseline;
-}
-/* HTML5 display-role reset for older browsers */
-article, aside, details, figcaption, figure,
-footer, header, hgroup, menu, nav, section {
- display: block;
-}
-body {
- line-height: 1;
-}
-ol, ul {
- list-style: none;
-}
-blockquote, q {
- quotes: none;
-}
-blockquote:before, blockquote:after,
-q:before, q:after {
- content: '';
- content: none;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-
-body {
- font-size: 14px;
- line-height: 1.25em;
- background-color: #f0f0f0;
-}
-
-.wrapper {
- display: flex;
- flex-direction: row;
- justify-content: center;
- width: 100%;
-}
-
-.column {
- width: 80em;
- padding: 1rem 0 1rem 0;
-}
-
-.page {
- background-color: #fefefe;
- padding: 0.5rem 2rem 3rem 2rem;
-}
-
-.header {
- font-size: 1.2em;
- font-family: Consolas, monospace;
- margin-top: 1rem;
- padding: 0.5em 0 0.5em 0;
- display: inline-flex;
-}
-
-.header a {
- text-decoration: none;
-}
-.header a:hover {
- text-decoration: underline;
-}
-
-.header span.red {
- color: #b30014;
-}
-
-.header span.part {
- color: #666;
- padding-left: 0.2em;
-}
-
-.header span.part a {
- color: rgb(27, 106, 203);
-}
-.header span.part a:visited {
- color: rgb(27, 106, 203);
-}
-
-.footer {
- font-size: 0.8em;
- color: #ccc;
- font-weight: 800;
- font-family: helvetica, arial, sans-serif;
- padding: 0.5em 1em 1em;
- text-align: right;
-}
-
-.footer .left {
- float: left;
-}
-
-.footer .right {
- float: right;
-}
-
-.footer a {
- color: #bbb;
-}
-
-h1,h2,h3,h4 {
- font-family: helvetica, arial, sans-serif;
-}
-
-.content h1 {
- font-size: 1.6em;
- padding: 1em 0 0 0;
- font-weight: 800;
-}
-
-.content h2 {
- font-size: 1.3em;
- padding: 0.8em 0 0 0;
- color: #333;
- font-weight: 800;
-}
-
-.content h3 {
- font-size: 1.2em;
- padding: 0.4em 0 0 0;
- color: #444;
-}
-
-.content h4 {
- font-size: 1.0em;
- color: #555;
-}
-
-.content strong {
- font-weight: 600;
-}
-
-.content code {
- font-family: Consolas, monospace;
- background-color: #f8f8f8;
-}
-
-.content pre {
- background-color: #f8f8f8;
- border: 1px solid #d8d8d8;
- margin: 1em;
- padding: 0.5em;
- overflow: auto;
-}
-
-.content p {
- margin-top: 0.8em;
- line-height: 1.5em;
-}
-
-.content :not(li) > ul {
- padding-top: 0.5em;
- line-height: 1.5em;
-}
-
-.content ul li {
- padding-left: 1em;
-}
-
-.content :not(li) > ul > li::before {
- content: "•";
- color: #333;;
- display: inline-block;
- width: 1em;
- margin-left: -0.5em;
-}
-
-.content li > ul > li::before {
- content: "◦";
- color: #333;;
- display: inline-block;
- width: 1em;
- margin-left: -0.5em;
-}
-
-.content img {
- max-width: 90%;
- margin: 1em auto 1em auto;
- display: block;
-}
-
-.content table {
- border: 1px solid #ddd;
- width: 100%;
- max-width: 100%;
- margin-bottom: 20px;
- margin-top: 20px;
-}
-
-.content table th {
- border-bottom-width: 2px;
- border: 1px solid #ddd;
- border: 1px solid #e36372;
- padding: 5px;
- text-align: left;
- vertical-align: bottom;
- background-color: #e36372;
- font-weight: 800;
- font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
- color: #fff;
-}
-.content table td {
- border: 1px solid #e36372;
- padding: 5px;
- vertical-align: top;
- background-color: #ffdbdf;
- font-family: "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-}
-
-.content table code {
- font-family: Consolas, monospace;
- background-color: #fcedef;
-}
-
-.toc {
- padding: .5em;
- border: 1px solid #ddd;
- background-color: #f8f8f8;
- margin: 2em;
- max-width: 30%;
- font-size: 1em;
- font-family: sans-serif;
-}
-
-.toc a {
- text-decoration: none;
-}
-
-</style>
+{{ define "header" }}
+<span class="red">hackdoc://</span>
+<span>HSCloud Docs</span>
{{ end }}
-{{ define "body" }}
-<div class="wrapper">
- <div class="column">
- <div class="page">
- <div class="header">
- <span class="red">hackdoc:</span>
- {{ range .PathParts }}
- {{ if ne .Path "" }}
- <span class="part"><a href="{{ .Path }}">{{ .Label }}</a></span>
- {{ else }}
- <span class="part">{{ .Label }}</span>
- {{ end }}
- {{ end }}
- <span class="red" style="margin-left: 1em;">shortcuts:</span> <a href="/">root</a>, <a href="/cluster/doc">cluster docs</a>, <a href="/doc/codelabs">codelabs</a>
- </div>
- {{ .Rendered }}
- </div>
- <div class="footer">
- <div class="left">
- View in:
- {{ range .WebLinks }}
- <span class="muted">[{{ .Kind }} <a href="{{ .LinkURL }}">{{ .LinkLabel }}</a>]</span>
- {{ end }}
- </div>
- <div class="right">Generated by <a href="{{ .HackdocURL }}/devtools/hackdoc">hackdoc</a>.</div>
- </div>
- </div>
-</div>
+
+{{ define "topbar" }}
+<span><a href="/">Home</a></span>
+<span><a href="/cluster/">Cluster</a></span>
+<span><a href="/dc/">DC</a></span>
+<span><a href="/doc/codelabs">Codelabs</a></span>
+{{ end }}
+
+{{ define "sidebar" }}
{{ end }}