HTML- Layout file, for use with Sinatra Framework.

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title><%= @title %></title>

    <link rel="stylesheet" href="/stylesheets/pure-min.css">
    <link rel="stylesheet" href="/stylesheets/fonts.css">
    <link rel="stylesheet" href="/stylesheets/book_viewer.css">
  </head>

  <body>
    <div id="layout">
      <a href="#menu" id="menuLink" class="menu-link"><span></span></a>

      <div id="menu">
        <div class="pure-menu">
          <a class="pure-menu-heading" href="/">Table of Contents</a>

          <ul class="pure-menu-list">
            <% @contents.each_with_index do |chapter, index| %>
              <li class="pure-menu-item">
                <a href="/chapters/<%= index + 1 %>" class="pure-menu-link"><%= chapter %></a>
              </li>
            <% end %>
          </ul>
        </div>
      </div>

      <div id="main">
        <div class="header">
          <h1>The Adventures of Sherlock Holmes</h1>
          <h2>by Sir Arthur Doyle</h2>
        </div>

        <div class="content">
          <%= yield %>
        </div>
      </div>
    </div>

    <script type="text/javascript" src="javascripts/ui.js"></script>
  </body>
</html>