area.html

{% assign path = '/areas/' | append: area_id %}
{% assign area = site.areas | where:'id', path | first %}
<li class="area">
  <script type="text/javascript">
    areaTitles['{{ area_id }}'] = {{ area.title | jsonify }}
  </script>
  <div>
    <div class="page trigger-area trigger-geojson" data-area-id="{{ area_id }}">
      <div class="sticky centered">
        <div class="title-container">
          <h2 class="wavy">
            <a name="{{ area_id }}" id="{{ area_id }}" class="pointer-events">
              {{ area.title }}
            </a>
          </h2>
        </div>
      </div>
    </div>
  </div>
  <section class="box">
    <div class="box-contents">
    {{ area.output }}
    </div>
    <div class="page-controls">
      <a href="#"><span>⟵ </span><span class="link">Back to top</span></a>
      <a href="#table-of-contents"><span class="link">Table of contents</span><span> ⟶</span></a>
    </div>
  </section>
  <div class="page trigger-mapwarper" data-area-id="{{ area_id }}" data-map-id="{{ area.map.id }}">
    <div class="box sticky">
      <div class="box-contents">
        <p>
          Map: <a href="http://digitalcollections.nypl.org/items/{{ area.map.uuid }}"><i>{{ area.map.title }} ({{ area.map.year }})</i></a>, opacity: <input class="opacity-slider" type="range" value="100" min="0" max="100">
        </p>
      </div>
    </div>
  </div>
  <div class="page"></div>
</li>