Start sorting examples into subcategories.

Allow H2 to be normal size now we're using H3 as well.

diff --git a/tools/htdocs/index.html b/tools/htdocs/index.html
index 697eb35..d87d1cf 100644 (file)
--- a/tools/htdocs/index.html
+++ b/tools/htdocs/index.html
@@ -7,7 +7,6 @@
       font-family: Gill Sans, "Gillius ADF", Gillius, GilliusADF, Sans-Serif;
       }
       h1 { font-weight: normal; color: #606060 }
-      h2 { font-size: 100% }
       .pane { padding: 0em 1em; margin: 0.75em;
               border: 0.5em solid #eee;
               border-radius: 1em;
@@ -130,6 +129,7 @@
         It's worth viewing the source of these to see how small they
         are and how various things are done.
       </p>
+      <h3>Simple examples</h3>
       <ul>
        <li>
           A very simple application at
@@ -149,6 +149,16 @@
           the application in Arabic.
        </li>
        <li>
+          <a href="http://example.indexdata.com/mobile.html"
+             >A version suitable for mobile devices</a>,
+         with a responsive design that moves components around
+          depending on the screen size.
+       </li>
+      </ul>
+
+      <h3>Intermediate examples</h3>
+      <ul>
+       <li>
           The
           <a href="http://example.indexdata.com/jquery.html"
              >jQuery plugin</a>
@@ -170,12 +180,6 @@
             >the templating language</a>.)
        </li>
        <li>
-          <a href="http://example.indexdata.com/mobile.html"
-             >A version suitable for mobile devices</a>,
-         with a responsive design that moves components around
-          depending on the screen size.
-       </li>
-       <li>
           <a href="http://example.indexdata.com/popup.html"
              >A version that uses a jQuery popup</a>.
        </li>