<header class="header">
  <div class="header__title">
    <h1>
      <code>counter()</code>
    </h1>
  </div>
  <div class="header__reference">
    <ul class="reference-list">
      <li><a class="reference-list__link" href="https://developer.mozilla.org/en-US/docs/Web/CSS/counter">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=mdn-css_types_counter">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, the "CHAPTER" and ": " portions of the chapter numbers for <a href="https://www.gutenberg.org/ebooks/2701">Moby Dick</a> are being generated via the <code>content</code> property. The chapter numbers are being generated via a declaration of <code>counter(list-item)</code>.
    </p>
    <p class="support-warning">It looks like your browser does not suppport this feature. Try viewing it in <a href="https://www.mozilla.org/en-US/firefox/new/">Firefox</a>.</p>

    <div class="example__demo example__demo--counter">
      <h2 class="book__title">Moby Dick; or The Whale</h2>
      <p class="book__author">Herman Melville</p>
      <nav aria-label="Table of contents">
        <ol class="table-of-contents">
          <li>Loomings.</li>
          <li>The Carpet-Bag.</li>
          <li>The Spouter-Inn.</li>
          <li>The Counterpane.</li>
          <li>Breakfast.</li>
          <li>The Street.</li>
          <li>The Chapel.</li>
          <li>The Pulpit.</li>
          <li>The Sermon.</li>
          <li>A Bosom Friend.</li>
          <li>Nightgown.</li>
          <li>Biographical.</li>
          <li>Wheelbarrow.</li>
          <li>Nantucket.</li>
          <li>Chowder.</li>
          <li>The Ship.</li>
          <li>&hellip;</li>
        </ol>
      </nav>
    </div>
  </div>
</main>

// Demo
.table-of-contents ::marker {
  content: "CHAPTER " counter(list-item) ": ";
  font-size: 0.75rem;
}


// Pen Setup
.example__demo--counter {
  background-color: #fff8d9;
  color: #604b45;
  font-family: 'Gelasio', serif;
  text-align: center;
}

.book__title {
  font-size: var(--size-epsilon);
  margin-bottom: 0;
}

.book__author {
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

ol {
  margin-top: var(--size-delta);
}

li {
  margin-top: 0.5rem;
  padding-left: 0.5ch;
}

onload = () => {
  const supportWarning = document.querySelector('.support-warning');

  if (navigator.userAgent.includes("Firefox")) {
    supportWarning.setAttribute('style', 'display: none;');
  }
}