index.rhtml

<header id="main">
  <div class="content">
    <section id="intro">
      <div id="logo"></div>
      <h2>The <span>dynamic</span> stylesheet <span>language</span>.</h2>
      <h3>
        LESS extends CSS with dynamic behavior such as <span>variables</span>, <span>mixins</span>,
        <span>operations</span> and <span>functions</span>. LESS runs on both the <span>client-side</span> (Chrome, Safari, Firefox) and
        server-side, with <span>Node.js</span> and <span>Rhino</span>.
      </h3>
      <a id="download" href="http://cloud.github.com/downloads/cloudhead/less.js/less-1.3.1.min.js">
        <img src="/images/download-button.png" /></a><div id="download-info">version <code>1.3.1</code></div>
    </section>

    <section id="example">
    <%= markdown File.read(Toto::Paths[:pages] + '/example.md') %>
    </section>
  </div>
  <div style="clear: both"></div>
</header>

<section id="menu">
  <div class="content">
    <nav>
      <a href="#synopsis">overview</a>
      <a href="#usage">usage</a>
      <a href="#docs" id="guide-link">language</a>
      <a href="http://github.com/cloudhead/less.js">source</a>
      <a href="#about">about</a>
    </nav>
    <a href="https://twitter.com/cloudhead" class="twitter-follow-button" data-show-screen-name="false" data-width="80px" data-show-count="false" data-lang="en">Follow on twitter</a>
    <div id="dropdown">
      <ul>
        <li><a href="#-variables">Variables</a></li>
        <li><a href="#-mixins">Mixins</a></li>
        <li><a href="#-parametric-mixins">Parametric Mixins</a></li>
        <li><a href="#-pattern-matching-and-guard-expressions">Pattern-matching</a></li>
        <li><a href="#-nested-rules">Nested Rules</a></li>
        <li><a href="#-operations">Operations</a></li>
        <li><a href="#-color-functions">Color functions</a></li>
        <li><a href="#-namespaces">Namespaces</a></li>
        <li><a href="#-scope">Scope</a></li>
        <li><a href="#-comments">Comments</a></li>
        <li><a href="#-importing">Importing</a></li>
      </ul>
    </div>
  </div>
</section>

<section id="synopsis" class="page">
  <div class="content">
    <%= markdown File.read(Toto::Paths[:pages] + '/synopsis.md') %>
  </div>
</section>

<section id="usage" class="page">
  <div class="content">
    <%= markdown File.read(Toto::Paths[:pages] + '/usage.md') %>
  </div>
</section>

<section id="docs" class="page">
  <h1>The Language</h1>
  <div class="content">
      <%= markdown File.read(Toto::Paths[:pages] + '/doc.md') %>
  </div>
</section>

<section id="translations" class="page">
  <div class="content">
    <h1>In Other Languages</h1>
    <ul>
        <li>Russian: <a href="http://lesscss.ru">http://lesscss.ru</a></li>
        <li>Chinese: <a href="http://lesscss.net">http://lesscss.net</a></li>
        <li>Japanese: <a href="http://less-ja.studiomohawk.com/">http://less-ja.studiomohawk.com/</a></li>
        <li>Belorussian: <a href="http://www.designcontest.com/show/lesscss-be">http://www.designcontest.com/show/lesscss-be</a></li>
        <li>Portugese: <a href="http://lesscss.loopinfinito.com.br/">http://lesscss.loopinfinito.com.br/</a></li>
        <li>Polish: <a href="http://ciembor.github.com/lesscss.org/">http://ciembor.github.com/lesscss.org/</a></li>
    </ul>
  </div>
</section>

<section id="about" class="page">
  <div class="content">
    <%= markdown File.read(Toto::Paths[:pages] + '/about.md') %>
    <footer>
        <p>powered by <a href="http://github.com/cloudhead/less.js">LESS</a></p>
        <p id="copy">Copyright &copy; Alexis Sellier 2010-2012</p>
    </footer>
  </div>
</section>

<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>