From mboxrd@z Thu Jan  1 00:00:00 1970
From: Mike McLean <mike.mclean@pobox.com>
Subject: Re: Online manual
Date: Sun, 24 Feb 2013 11:37:28 -0500
Message-ID: <00EA73C7-7BFE-429F-A371-10945A808618@pobox.com>
References: <CALf2awQgRqpQEj0hZKyhq=76RgcvVTCymvw4SXn=LcS-W=Mivw@mail.gmail.com>
Mime-Version: 1.0 (Mac OS X Mail 6.2 \(1499\))
Content-Type: text/plain; charset=us-ascii
Content-Transfer-Encoding: quoted-printable
Return-path: <emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org>
Received: from eggs.gnu.org ([208.118.235.92]:40450)
	by lists.gnu.org with esmtp (Exim 4.71)
	(envelope-from <mike.mclean@pobox.com>) id 1U9eZx-0001V7-Ks
	for emacs-orgmode@gnu.org; Sun, 24 Feb 2013 11:37:35 -0500
Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71)
	(envelope-from <mike.mclean@pobox.com>) id 1U9eZv-0001Zm-RJ
	for emacs-orgmode@gnu.org; Sun, 24 Feb 2013 11:37:33 -0500
Received: from a-pb-sasl-quonix.pobox.com ([208.72.237.25]:47370
	helo=sasl.smtp.pobox.com) by eggs.gnu.org with esmtp (Exim 4.71)
	(envelope-from <mike.mclean@pobox.com>) id 1U9eZv-0001ZM-Kv
	for emacs-orgmode@gnu.org; Sun, 24 Feb 2013 11:37:31 -0500
In-Reply-To: <CALf2awQgRqpQEj0hZKyhq=76RgcvVTCymvw4SXn=LcS-W=Mivw@mail.gmail.com>
List-Id: "General discussions about Org-mode." <emacs-orgmode.gnu.org>
List-Unsubscribe: <https://lists.gnu.org/mailman/options/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=unsubscribe>
List-Archive: <http://lists.gnu.org/archive/html/emacs-orgmode>
List-Post: <mailto:emacs-orgmode@gnu.org>
List-Help: <mailto:emacs-orgmode-request@gnu.org?subject=help>
List-Subscribe: <https://lists.gnu.org/mailman/listinfo/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=subscribe>
Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org
Sender: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org
To: Sebastian Wiesner <lunaryorn@gmail.com>
Cc: emacs-orgmode@gnu.org


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

> Hello,
>=20
> 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=3D"stylesheet" type=3D"text/css" =
href=3D"/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