add new list of elements to documentation, improve documentation structure

  url = parent["id"] + "/" + prop["name"]

  print("> Building page: /reference/%s" % url)

  print(prop)

  title = "%s | %s | API Reference" % (prop["name"], parent["path"])

  tpl = Path("extra/web/reference_detail.tpl.html").read_text()

  path = "/reference/" + url

  tree = yaml.load(open('manual/properties.yml'))

  html = ""

  print(tree)

  for elem in tree["elements"]:

    html += build_prop_overview(elem)

        <a href="/"><img src="/logo.png" alt="PlotFX" class="logo" /></a>

        <a class="menu {{menu_active_documentation}}" href="/">Documentation</a>

        <a class="menu {{menu_active_examples}}" href="/examples">Examples</a>

        <a class="menu {{menu_active_reference}}" href="/reference">API Reference</a>

        <a class="menu {{menu_active_reference}}" href="/reference">Reference</a>

        <a class="menu {{menu_active_download}}" href="/download">Download</a>

        <a class="menu" href="http://github.com/plotfx/plotfx" target="_blank">Github</a>

      </div>

              {{#pages}}

                <li>

                  <a href="{{url}}">{{title}}</a>

                  <ul>

                    {{#pages}}

                      <li>

                        <a href="{{url}}">{{title}}</a>

                      </li>

                    {{/pages}}

                  </ul>

                </li>

              {{/pages}}

            </ul>

</html>

"""

def extend_toc(entry):

  if "pages" in entry:

    entry["pages"] = map(lambda x: extend_toc(x), entry["pages"])

  else:

    entry["pages"] = []

  return entry

def build_layout(url, content, title=""):

  toc = yaml.load(Path("manual/toc.yaml").read_text())["documentation"]

  toc = map(lambda x: extend_toc(x), toc)

  return TPL.render(tpl, {

    "content": content,

    "url": url,

  margin-bottom: .4em;

  list-style-type: disc;

  border-left: none;

  display: none;

}

#navigation ul ul li {

Axes

====

## Ticks & Labels

The axis layout setting allows you to control how ticks and labels are placed

on the axis.

    axis-top: <axis-layout> <label-format>;

    axis-right: <axis-layout> <label-format>;

    axis-bottom: <axis-layout> <label-format>;

    axis-left: <axis-layout> <label-format>;

Alternatively, you can configure the layout and formater separately:

    axis-top-layout: <axis-layout>;

    axis-top-format: <label-format>;

### Tick Placement

The layout of an axis controls where how ticks an labels are placed. The list of

valid `<axis-layout>` values is:

---

#### `linear`

#### `linear(N)`

The `linear` layout will place a 'tick' every `N` units. If no `N` parameter

is provided it will be chosen automatically.

![axis_linear.svg](/documentation/figures/axis_linear.svg)

---

#### `linear(N, align A)`

The same as the `linear` layout, but the ticks will be aligned to an arbitrary

start value `A`.

![axis_linear_align.svg](/documentation/figures/axis_linear_aligned.svg)

---

#### `discrete`

The `discrete` layout marks a number of discrete groups on the axis. It

is usually used when plotting bar/column charts.

![axis_discrete.svg](/documentation/figures/axis_discrete.svg)

---

#### `subdivide`

#### `subdivide(N)`

The `subdivide` layout will divide the axis into N evenly sized divisions

and then mark each region boundary.

![axis_discrete.svg](/documentation/figures/axis_subdivide.svg)

### Label Formatter

The `<label-format>` setting controls how values are formatted for display. For

example, you can use it to set the floating point display precision, add a unit

of measurement to display values or display values as human-readable date strings.

Fore more information on setting the label label format, please refer to the

[Formatter](/documentation/formatter) page.

Plot: Lines

============

Element: `lines`

================

Lorem ipsum dolor sit amet.