doc: Add toc to design guidelines

modules/doc/application/views/scripts/style/guide.phtml

@@ -3,16 +3,43 @@
 </div>
 
 <div class="content styleguide">
+    <div class="section">
+        <h1>Icinga Web 2 Design Guidelines</h1>
+
+        <ul class="toc">
+            <li><a href="#headings">Headings</a></li>
+            <li><a href="#block-content">Block Content</a></li>
+            <li><a href="#tables">Tables</a></li>
+        </ul>
+    </div>
+
+    <div class="section">
+        <h2 id="headings">Headings</h2>
         <h1>Header h1</h1>
         <h2>Header h2</h2>
         <h3>Header h3</h3>
         <h4>Header h4</h4>
         <h5>Header h5</h5>
         <h6>Header h6</h6>
+    </div>
 
-<p>This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. A <a href="#">link pointing somewhere</a>. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph.</p>
+    <div class="section">
+        <h2 id="block-content">Block Content</h2>
+        <h3>Paragraph</h3>
+        <p>
+            This is a paragraph. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor
+            invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo
+            dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+            A <a href="#">link inside a paragraph</a>.
+            Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et
+            dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
+            Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.
+        </p>
+    </div>
 
-<table class="avp">
+    <div class="section">
+        <h2 id="tables">Tables</h2>
+        <table class="common-table">
         <thead>
             <tr>
                 <th>Table Head - th in thead</th>
@@ -35,3 +62,4 @@
         </tbody>
         </table>
     </div>
+</div>

public/css/icinga/main.less

@@ -52,6 +52,10 @@
   }
 }
 
+.section {
+  margin-bottom: 2em;
+}
+
 a:hover > .icon-cancel {
   color: @color-critical;
 }