Improve formatting for auto-generated index pages.

_docs/index.md

@@ -19,11 +19,6 @@ is where you can learn about what Istio does and how it does it.
 
 - [Tasks](/docs/tasks). Tasks show you how to do a single directed activity with Istio.
 
-<!--
-- [Tutorials](/docs/tutorials). Tutorials are more involved, composing many individual tasks together
-to show you how to perform more complex activities.
--->
-
 - [Samples](/docs/samples). Samples are fully working stand-alone examples
 intended to highlight a particular set of Istio's features.
 

_docs/tasks/egress.md

@@ -1,6 +1,7 @@
 ---
 title: Accessing a Service with Egress Envoy
 headline: Accessing a Service with Egress Envoy
+overview: Describes how to configure Istio to expose an external service to a Kubernetes cluster.
 
 order: 10
 
@@ -89,4 +90,5 @@ $ kubectl exec -it {APP_POD_NAME} curl http://securegoogle:443
 Here's an interesting thing to know about the steps you just did.
 
 ## What's next
-* See how to make requests to services inside a cluster by using the [Ingress Controller]({{site.bareurl}}/docs/tasks/ingress.html).
+
+* See how to make requests to services inside a cluster by using the [Ingress Controller](/docs/tasks/ingress.html).

_includes/section-index.html

@@ -1,7 +1,10 @@
 {% assign components = page.path | downcase | split: '/' %}
 
-<div class="section-index">
-<h1 class="title">{{page.title}}</h1>
+<div class="container">
+    <div class="row">
+        <div class="col-sm-7">
+
+<h1>{{page.title}}</h1>
 <p>{{page.overview}}</p>
 
 <script type="text/javascript">
@@ -43,4 +46,6 @@
 	genSectionNavTree(docs)
 </script>
 
-</div>
+        </div>
+    </div>
+</div>

_sass/modules/_section-index.scss

@@ -1,40 +1,16 @@
-.section-index {
-    margin-bottom: 0px;
+
+li.section-index-directory {
+    margin: 0px;
+    padding: 0px;
+    margin-top: 15px;
     margin-left: 0px;
-
-    @media (min-width: $tablet) {
-        margin-bottom: 0;
-        padding: $spacing--xs 0 $spacing--xl;
-    }
-
-    .title {
-        margin-bottom: 20px;
-    }
-
-    ul {
-        margin: 0px;
-        padding: 0px;
-        margin-top: 10px;
-    }
-
-	.area {
-		display: inline-block;
-		width: 100%;
-		font-size: 120%;
-		margin-left: 0px;
-		margin-top: 20px;
-	}
-
-	.item {
-		display: inline-block;
-		padding: 2px;
-		width: 100%;
-		margin-bottom: 5px;
-		margin-left: 25px;
-	}
-
-	.child-link {
-	    font-size: 120%;
-	    font-weight: 400;
-	}
+    font-size: 15px;
+}
+
+li.section-index-file {
+    margin: 0px;
+    padding: 0px;
+    margin-top: 10px;
+    list-style: none;
+    font-size: 14px;
 }

css/style.scss

@@ -2,7 +2,6 @@
 # Front matter comment to ensure Jekyll properly reads file.
 sitemap_exclude: y
 ---
-
 @import url("https://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css");
 
 @import "base/_config";

js/navtree.js

@@ -70,6 +70,20 @@ function makeNavTree(parent, docs, depth) {
 
 function outputNavBarTree(items) {
     document.writeln("<ul class='list-unstyled tree'>");
+
+    for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+
+        if (item.children.length == 0) {
+            document.write("<li class='doc-side-nav-list-item'><a href='");
+            document.write("{{home}}");
+            document.write(item.doc.url);
+            document.write("'>");
+            document.write(item.doc.title);
+            document.writeln("</a></li>");
+        }
+    }
+
     for (var i = 0; i < items.length; i++) {
         var item = items[i];
 
@@ -86,15 +100,9 @@ function outputNavBarTree(items) {
 
             outputNavBarTree(item.children);
             document.writeln("</li>");
-        } else {
-            document.write("<li class='doc-side-nav-list-item'><a href='");
-            document.write("{{home}}");
-            document.write(item.doc.url);
-            document.write("'>");
-            document.write(item.doc.title);
-            document.writeln("</a></li>");
         }
     }
+
     document.writeln("</ul>");
 }
 
@@ -106,12 +114,27 @@ function genNavBarTree(docs) {
 
 
 function outputSectionNavTree(items) {
-    document.writeln("<ul class='section-index'>");
+    document.writeln("<ul>");
+    for (var i = 0; i < items.length; i++) {
+        var item = items[i];
+
+        if (item.children.length == 0) {
+            document.write("<li class='section-index-file'>");
+            document.write("<a href='{{home}}");
+            document.write(item.doc.url);
+            document.write("'>");
+            document.write(item.doc.title);
+            document.write("</a>. " + item.doc.overview);
+            document.writeln("</li>");
+        }
+    }
+
     for (var i = 0; i < items.length; i++) {
         var item = items[i];
 
         if (item.children.length > 0) {
-            document.writeln("<li class='area'>");
+            document.write("<li class='section-index-directory'>");
+
             if (item.doc == null) {
                 document.writeln(item.name);
             } else {
@@ -121,19 +144,14 @@ function outputSectionNavTree(items) {
                 document.write("'>");
                 document.write(item.doc.title);
                 document.write("</a>");
+                document.writeln("");
             }
 
             outputSectionNavTree(item.children);
             document.writeln("</li>");
-        } else {
-            document.write("<li class='item'><a class='child-link' href='");
-            document.write("{{home}}");
-            document.write(item.doc.url);
-            document.write("'>");
-            document.write(item.doc.title);
-            document.writeln("</a>. " + item.doc.overview + "</li>");
         }
     }
+
     document.writeln("</ul>");
 }