1 files changed, 40 insertions, 23 deletions

diff --git a/src/guff/views/api-docs.ecr b/src/guff/views/api-docs.ecr
index d31be21..bda25f5 100644
--- a/src/guff/views/api-docs.ecr
+++ b/src/guff/views/api-docs.ecr
@@ -1,9 +1,12 @@
 <h1><%= h(TITLE) %></h1>
 
-<div class='section'>
+<div id='toc' class='section'>
   <h2>Table of Contents</h2>
-  <ul><% namespaces.each do |namespace| %>
-    <li>
+
+  <ul><%
+    namespaces.each do |namespace|
+  %>
+    <li class='namespace'>
       <a
         href='#n-<%= namespace %>'
         title='View <%= namespace %> details.'
@@ -11,46 +14,60 @@
         <%= namespace %>
       </a>
 
-      <ul><% methods(namespace).each do |method| %>
-        <li>
+      <ul class='methods'><%
+        methods(namespace).each do |method|
+      %>
+        <li class='method'>
           <a
             href='#m-<%= namespace %>-<%= method %>'
             title='View <%= namespace %>/<%= method %> details.'
           >
             <%= method %>
           </a>
-        </li>
-      <% end %></ul>
-    </li>
+        </li><!-- method -->
+      <% end %></ul><!-- methods -->
+    </li><!-- namespace -->
   <% end %></ul>
-</div><!-- section -->
+</div><!-- toc -->
 
 <% namespaces.each do |namespace| %>
   <div
     id='n-<%= namespace %>'
-    class='section'
+    class='namespace section'
   >
-    <h2><%= namespace %> methods</h2>
+    <h2 class='namespace title'>
+      <%= namespace %> methods
+    </h2><!-- namespace title -->
+
     <% methods(namespace).each do |method| %>
       <div
         id='m-<%= namespace %>-<%= method %>'
-        class='section'
+        class='method section'
       >
-        <h3><%= namespace %>/<%= method %></h3>
+        <h3 class='method title'>
+          <%= namespace %>/<%= method %>
+        </h3><!-- method title -->
 
         <h4>Description</h4>
-        <p>
+        <p class='method text'>
           <%= h(method_text(namespace, method)) %>
-        </p>
+        </p><!-- method text -->
 
         <h4>Parameters</h4>
-        <ul><% method_args(namespace, method).each do |arg| %>
-          <li>
-            <%= arg %>:
-            <%= h(arg_text(namespace, method, arg)) %>
-          </li>
-        <% end %></ul>
-      </div><!-- section -->
+        <ul class='args'><%
+          method_args(namespace, method).each do |arg|
+        %>
+          <li class='arg'>
+            <span class='arg name'><%=
+              arg
+            %></span><!-- arg name -->
+
+            <span class='arg text'><%=
+              h(arg_text(namespace, method, arg))
+            %></span><!-- arg text -->
+          </li><!-- arg -->
+        <% end %></ul><!-- args -->
+      </div><!-- method section -->
     <% end %>
-  </div><!-- section -->
+  </div><!-- namespace section -->
 <% end %>