Category navigation

<nav class="nav">
  <ul>
    <li class="nav__link nav__link--fixed">
      <a href="..">
        <svg role="img" title="Cuttlebelle" viewbox="0 0 650.2 134.5" class="nav__link__logo">
          <title>Cuttlebelle</title>
          <desc>The word Cuttlebelle</desc>
          <path fill="#06262D" d="M639.6,108.9c-13.1-3.5-23.4,6.1-35.5,8.6c-3,0.6-5.8,0.4-8.6-1.1c-0.3-0.2-2.2-1.7-3-2.3 c-3.2-3.9-2.7-10-1.8-14.2c0.8-3.2,2.6-4.5,5.7-4.4c16.9,1.2,28.5-3.3,35.7-18.5c8.7-18.1,1.2-31-13.6-31 c-18.9,0-33.6,21.1-39.9,40.8C568.5,103.7,557,118,549.5,118c-3.3,0-6.2-2.9,0.5-19.3L580.1,24c2.8-6.7-3.9-6.7-3.9-6.7H573 c0,0-6.1,0-8.7,6.7l-25.2,62.4c-10.1,17.1-21.8,31.5-29.3,31.5c-3.3,0-6.2-2.9,0.5-19.3l30.1-74.7c1.5-3.8,1.5-6.7-3.9-6.7h-3.2 c-5.4,0-6.9,2.5-8.7,6.7l-25.2,62.4c-11.3,18.7-26.7,31.6-41.1,31.6c-13.6,0-13.1-11.4-11.7-18.1c0.8-3.2,2.6-4.5,5.7-4.4 c16.9,1.2,28.5-3.3,35.7-18.5c8.7-18.1,1.2-31-13.6-31c-19,0-33.8,21.2-39.9,41c-4.5,7.6-10.3,15.6-20,18.3 c-2.7,0.6-3.9-0.8-2.6-3.3c8.6-16.4,11.1-31.5,11.1-38.8c0-10.5-4.8-17-14.8-17c-5.4,0-10.4,2.9-13.6,5.1c-1.7,1.4-2.6,0.6-1.8-1.4 l10.4-25.7c1.5-3.8,0.2-5.9-3.9-5.8h-3.2c-4.7-0.1-6.9,1.6-8.7,5.8l-21.1,52.2c-1.4,3.5-2.6,6.9-3.7,10.1 c-11.3,18.7-26.7,31.5-41.1,31.5c-13.6,0-13.1-11.4-11.7-18.1c0.8-3.2,2.6-4.5,5.7-4.4c16.9,1.2,28.5-3.3,35.7-18.5 c8.7-18.1,1.2-31-13.6-31c-18.9,0-33.6,21.1-39.9,40.8c-10.1,16.9-21.6,31.2-29.1,31.2c-3.3,0-6.2-2.9,0.5-19.3l30.1-74.7 c2.4-5.7-3.9-6.7-3.9-6.7h-3.2c0,0-6.5,0-8.7,6.7l-25.2,62.4c-10.4,17.7-22.7,31.5-31.4,31.5c-3.5,0-6.9-2.1,0-19.3l18.7-46.2 c1.4-3.3,6.6-4.2,6.6-4.2h4.3c3,0,4.6-1,5.8-3.9c1-2.8,0.1-4.1-2.5-4.1H256c-3.2,0-4.3-1.7-3.1-4.6l4.6-11.5c1.5-3.8,0.2-6-4-6h-3.2 c-4.7,0-7,1.7-8.9,6l-4.6,11.5c-1.4,3.4-3.2,4.6-6.7,4.6H213c-3.2,0-4.3-1.7-3.1-4.6l4.6-11.5c1.5-3.8,0.2-6-4-6h-3.2 c-4.7,0-7,1.7-8.9,6l-4.6,11.5c-1.4,3.4-3.2,4.6-6.7,4.6h-4.4c-3,0-4.6,1-5.8,3.9c-1,2.8-0.1,4.1,2.5,4.1h4.8c0,0,4.2,1.3,3,4.2 L174,86.4c-10.1,17.1-21.8,31.6-29.2,31.6c-3.9,0-5.9-3.9,0.3-19.3l18.1-44.9c1.5-3.8,0.2-5.9-3.9-5.5h-3.2 c-4.7-0.4-6.9,1.3-8.7,5.5l-12.2,30.6c-0.9,2.1-2.6,5.6-3.6,7.5c-6.2,11-15.5,24.5-23.3,24.5c-3.2,0-5.1-2.6,1.1-17.8l18.1-44.9 c1.5-3.8,0.2-5.9-3.9-5.5h-3.2c-4.7-0.4-6.9,1.3-8.7,5.5L98.6,86.3c-13.7,22.8-34,36.2-48.6,36.2c-11.1,0-14.5-7.4-14.5-16.4 c0-4.8,0.8-11.6,2.6-18.7c0.6-2.5,1.4-5.2,2.2-7.8c11.8-0.5,24.4-1.7,34.6-6.6c18.2-8.8,27-26.1,27-26.1s0-0.1-0.1-0.2 c4.4-7.8,6.4-16.2,6.4-22.6C108.2,11,100.8,0,87,0C63.4,0,41.4,31.5,29.6,63.2c-4.5,0-9,0.3-13.7,1.4C-2.4,68.8-3.2,95.4,5.1,85.4 c3.1-3.7,10.2-4.8,19.1-5.2c-0.8,3.1-1.3,5.1-1.3,5.1c-1.7,7.4-2.4,14.3-2.4,20.3c0,14.8,5.3,28.9,26,28.9 c16.9,0,31.9-9.5,44.4-23.8c-1.4,13,5.3,17.2,13.5,17.2c7.1,0,13.2-4.1,18.8-9.6c2-2,3.2-1.5,4.1,1.1c1.8,6,6.9,8.6,13.2,8.6 c9.2,0,17.9-6.5,25.8-16c-0.8,11.8,5.4,16,14.4,16c10.1,0,19.4-6.6,27.9-16.4c-0.9,12.2,5.3,16.4,14.5,16.4c10.2,0,19.6-6.7,28-16.5 c-1,12.2,5.2,16.5,13.9,16.5c10.9,0,20.9-8.8,30.2-21.6c0.4,14.1,8.6,21.6,23.4,21.6c17,0,30.4-9.8,40.5-21.9 c-0.6,14.7,6.3,22,18.8,22c9.2,0,16.9-3.9,23-10.1c2.7-2.9,4.2-3.5,8.1-3.9c10.1-1,17.1-4.6,22.6-9.9c0,0.4,0,0.7,0,1.1 c0,14.9,8.3,22.7,23.5,22.7c15.1,0,27.4-7.7,37-17.9c-1.7,13.3,4.7,17.9,13.7,17.9c9.2,0,17.8-6.3,25.8-16c-0.8,11.8,5.3,16,13.9,16 c10.9,0,20.9-8.8,30.2-21.6c0.1,4.5,1.1,8.3,2.8,11.5c0,1.3,1.8,3.7,2.5,4.6c2.2,2.9,5.2,5.2,8.5,6.6c5.2,2.2,11,2.4,16.6,1.5 c6.1-1,11.8-3.5,17.1-6.8c3.3-2.1,6.7-4.6,10.6-4.7c4.6-0.1,8.6,3.2,11.6,6.8c1.3,1.6,3.6,3.7,4.4,0.5 C650.5,123.1,652.1,112.2,639.6,108.9z M596.5,82.4c3.5-7.8,11.3-23.5,21.1-23.5c5.3,0,5.9,4.4,1.4,14c-3.5,7.4-8.3,14.5-19.3,14.2 C596.6,87.1,595.3,85.1,596.5,82.4z M452.4,82.4c3.5-7.8,11.3-23.5,21.1-23.5c5.3,0,5.9,4.4,1.4,14c-3.5,7.4-8.3,14.5-19.3,14.2 C452.5,87.1,451.2,85.1,452.4,82.4z M315.8,82.4c3.5-7.8,11.3-23.5,21.1-23.5c5.3,0,5.9,4.4,1.4,14c-3.5,7.4-8.3,14.5-19.3,14.2 C316,87.1,314.6,85.1,315.8,82.4z M84.4,15.4c5.4,0,8.1,4.5,8.1,10.8c0,0.3,0,0.5,0,0.8c-0.2,0.1-0.3,0.4-0.3,1.2 c0,1.1-0.1,2.3-0.3,3.8c-1.6,7.1-5.8,15.3-12.4,22.2c-2.3,1.9-4.9,3.5-8,4.8c-9.5,3.9-17.7,4.8-25.3,4.8 C56.4,39.2,72,15.4,84.4,15.4z M216.3,86.8c-10.5,17.6-22.7,31.5-31.5,31.5c-3.5,0-6.9-2.1,0-19.3l18.7-46.2 c1.4-3.3,3.2-4.5,6.6-4.5H227c3.2,0,4.2,1.7,3,4.5L216.3,86.8z M385.5,114.6c-2.3,1.8-4.7,2.9-6.9,2.9c-7.1,0-6.6-9.3-4.2-18.5 c0.6-2.4,2-2.6,3-0.3c2.1,4.1,5,7.1,8.1,9.5C388.4,110.2,388.4,112.5,385.5,114.6z M396.8,99.5c-1.5,2.9-4.4,3.5-6.9,1.5 c-4.4-3.6-7.7-9-7.7-17.2c0-17,13.1-24.4,18.5-24.4c4.8,0,6.8,2.6,6.8,7.1C407.5,72.3,403.2,87.3,396.8,99.5z"></path>
        </svg>
      </a>
    </li>
    <li class="nav__link nav__link--generated">
      <a href="..">home</a>
    </li>
    <li class="nav__link nav__link--generated">
      <a href="../docs">docs</a>
    </li>
    <li class="nav__link nav__link--generated">
      <a href="https://github.com/cuttlebelle/cuttlebelle">
        <span>
          <svg role="img" title="GitHub" viewbox="0 0 32.6 31.8" class="nav__link__github">
            <title>GitHub</title>
            <desc>The GitHub logo</desc>
            <path fill-rule="evenodd" clip-rule="evenodd" fill="#191717" d="M16.3,0C7.3,0,0,7.3,0,16.3c0,7.2,4.7,13.3,11.1,15.5 c0.8,0.1,1.1-0.4,1.1-0.8c0-0.4,0-1.4,0-2.8c-4.5,1-5.5-2.2-5.5-2.2c-0.7-1.9-1.8-2.4-1.8-2.4c-1.5-1,0.1-1,0.1-1 c1.6,0.1,2.5,1.7,2.5,1.7c1.5,2.5,3.8,1.8,4.7,1.4c0.1-1.1,0.6-1.8,1-2.2c-3.6-0.4-7.4-1.8-7.4-8.1c0-1.8,0.6-3.2,1.7-4.4 C7.4,10.7,6.8,9,7.7,6.8c0,0,1.4-0.4,4.5,1.7c1.3-0.4,2.7-0.5,4.1-0.5c1.4,0,2.8,0.2,4.1,0.5c3.1-2.1,4.5-1.7,4.5-1.7 c0.9,2.2,0.3,3.9,0.2,4.3c1,1.1,1.7,2.6,1.7,4.4c0,6.3-3.8,7.6-7.4,8c0.6,0.5,1.1,1.5,1.1,3c0,2.2,0,3.9,0,4.5 c0,0.4,0.3,0.9,1.1,0.8c6.5-2.2,11.1-8.3,11.1-15.5C32.6,7.3,25.3,0,16.3,0z"></path>
          </svg>
          <span class="nav__link__github__text">github</span>
        </span>
      </a>
    </li>
  </ul>
</nav>

<div class="toc">
  <nav class="toc__section toc__section--0">
    <h2 class="toc__section__headline">
      <a href="../page1">Page 1</a>
    </h2>
    <ul>
      <li>
        <a href="../page1#how-to-get-started">How to get started</a>
      </li>
      <li>
        <a href="../page1#install-your-software">Install your software</a>
      </li>
      <li>
        <a href="../page1#profit">Profit</a>
      </li>
    </ul>
  </nav>
  <nav class="toc__section toc__section--1 toc__section--active">
    <h2 class="toc__section__headline">
      <a href=".">Page 2</a>
    </h2>
    <ul>
      <li>
        <a href=".#how-to-get-started">How to get started</a>
      </li>
      <li>
        <a href=".#install-your-software">Install your software</a>
      </li>
      <li>
        <a href=".#profit">Profit</a>
      </li>
    </ul>
  </nav>
  <nav class="toc__section toc__section--2">
    <h2 class="toc__section__headline">
      <a href="nested">Nested in page 2</a>
    </h2>
    <ul>
      <li>
        <a href="nested#how-to-get-started">How to get started</a>
      </li>
      <li>
        <a href="nested#install-your-software">Install your software</a>
      </li>
      <li>
        <a href="nested#profit">Profit</a>
      </li>
    </ul>
  </nav>
</div>