Re: Online manual

[Mike McLean <mike.mclean@pobox.com>]

On Feb 24, 2013, at 11:03 AM, Sebastian Wiesner <lunaryorn@gmail.com> wrote:

> Hello,
> 
> how is the online manual of Org mode [1] rendered?  Especially, how is
> the awesome table of contents on the right sight created?

It is done through CSS and I do something similar with most of my HTML exports. I have a custom CSS that I load by having the following in every Org file.

#+begin_example
#+HTML_STYLE: <link rel="stylesheet" type="text/css" href="/Users/mlm/Documents/OrgMaster/org/css/org-html.css" />
#+end_example

Into my custom CSS I copied the TOC CSS from the Org mode home page (see below). I may have altered it slightly from what is on Org for colors and such, but I don't recall.

#+begin_example
@media screen {

    /* TOC inspired by http://jashkenas.github.com/coffee-script */
    #table-of-contents {
        font-size: 10pt;
        position: fixed;
        right: 0em;
        top: 0em;
        background-color: #F3F5F7;
        -webkit-box-shadow: 0 0 1em #777777;
        -moz-box-shadow: 0 0 1em #777777;
        -webkit-border-bottom-left-radius: 5px;
        -moz-border-radius-bottomleft: 5px;
        text-align: right;
        /* ensure doesn't flow off the screen when expanded */
        max-height: 80%;
        overflow: auto;
    }

    #table-of-contents h2 {
        font-size: 10pt;
        max-width: 10em;
        text-decoration: underline;
        padding-left: 0.5em;
        padding-left: 0.5em;
        padding-top: 0.05em;
        padding-bottom: 0.05em;
        margin-bottom: 15px;
        border: none;
    }

    #table-of-contents ul {
        list-style-type: none;
    }

    #table-of-contents #text-table-of-contents {
        display: none;
        text-align: left;
    }

    #table-of-contents:hover #text-table-of-contents {
        display: block;
        padding: 0.5em;
        margin-top: -1.5em;
    }
}

@media print {
    /* TOC inspired by http://jashkenas.github.com/coffee-script */
    #table-of-contents {
        font-size: 10pt;
        background: white;
    }

    #table-of-contents h2 {
        font-size: 10pt;
        max-width: 10em;
        text-decoration: underline;
        padding-left: 0.5em;
        padding-left: 0.5em;
        padding-top: 0.05em;
        padding-bottom: 0.05em;
        margin-bottom: 15px;
        border: none;
    }

    #table-of-contents ul {
        list-style-type: none;
    }

    #table-of-contents #text-table-of-contents {
        text-align: left;
    }

    #table-of-contents:hover #text-table-of-contents {
        display: block;
        padding: 0.5em;
        margin-top: -1.5em;
    }

}
#+end_example