3 files changed, 72 insertions, 0 deletions
diff --git a/doc-tool/resources/_layouts/doc-page.html b/doc-tool/resources/_layouts/doc-page.html
new file mode 100644
index 000000000..876e90c95
--- /dev/null
+++ b/doc-tool/resources/_layouts/doc-page.html
@@ -0,0 +1,8 @@
+---
+layout: doc
+---
+
+<h1 id="doc-page-title">{{ page.title }}</h1>
+<div id="doc-page-container">
+    {{ content }}
+</div>
diff --git a/doc-tool/resources/_layouts/doc.html b/doc-tool/resources/_layouts/doc.html
new file mode 100644
index 000000000..cf66225d7
--- /dev/null
+++ b/doc-tool/resources/_layouts/doc.html
@@ -0,0 +1,42 @@
+---
+layout: main
+---
+
+<div id="content-wrapper">
+    <div class="index-wrapper">
+        {% include "toc" %}
+        <ul class="index-entities">
+        {% if docs.size > 0 %}
+        <li class="index-entity">
+            <a class="title" href="#">API</a>
+        </li>
+        {% endif %}
+        {% for item in docs %}
+            <li class="index-entity entity-package">
+                <a href="#">{{ item.name }}</a>
+            </li>
+            {% for child in item.members %}
+                {% if child.kind != "package" %}
+                <li class="index-entity">
+                    <a href="#">{{ child.kind }} {{ child.name }}</a>
+                </li>
+                {% endif %}
+            {% endfor %}
+        {% endfor %}
+        </ul>
+    </div>
+    <div id="content-body">
+        <div id="top-drawer">
+            <a href="#menu-toggle" id="menu-toggle" onclick="toggleMenu()"><i class="fa fa-bars" aria-hidden="true"></i></a>
+        </div>
+        {{ content }}
+    </div>
+</div>
+
+
+<script>
+function toggleMenu() {
+    var wrapper = document.getElementById("content-wrapper");
+    wrapper.classList.toggle("toggled");
+}
+</script>
diff --git a/doc-tool/resources/_layouts/main.html b/doc-tool/resources/_layouts/main.html
index 1920f9ce7..0cc1bafb8 100644
--- a/doc-tool/resources/_layouts/main.html
+++ b/doc-tool/resources/_layouts/main.html
@@ -13,6 +13,20 @@
             integrity="sha384-AysaV+vQoT3kOAXZkl02PThvDr8HYKPZhNT5h/CXfBThSRXQ6jW5DO2ekP5ViFdi"
             crossorigin="anonymous"
         >
+        <link
+            rel="stylesheet"
+            href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"
+        >
+
+        <link
+            rel="stylesheet"
+            href="{{ site.baseUrl }}/css/dottydoc.css"
+        >
+
+        <link
+            rel="stylesheet"
+            href="{{ site.baseUrl }}/css/color-brewer.css"
+        >
     </head>
     <body>
 
@@ -33,5 +47,13 @@
             integrity="sha384-BLiI7JTZm+JWlgKa0M0kGRpJbF2J8q+qreVrKBC47e3K6BW78kGLrCkeRX6I9RoK"
             crossorigin="anonymous"
         ></script>
+        <script src="{{ site.baseUrl }}/js/highlight.pack.js"></script>
+        <script>
+            $(document).ready(function() {
+                $('pre code').each(function(i, block) {
+                    hljs.highlightBlock(block);
+                });
+            });
+        </script>
     </body>
 </html>