<header class="header">
  <div class="header__title">
    <h1>
      <code>sepia()</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/filter-function/sepia">MDN reference</a></li>
      <li><a class="reference-list__link" href="https://caniuse.com/#feat=css-filters">caniuse Support</a></li>
    </ul>
  </div>
</header>

<main>
  <div class="example">
    <p>
      In this example, we can toggle an <code>is-old-timey</code> class to change the image's modern appearance to something that looks more old-fashioned:
    </p>

    <button
      aria-pressed="false"
      class="button"
      type="button">
      Toggle sepia
    </button>

    <div class="example__demo example__demo--sepia">
      <p class="timeless">
        Timeless
      </p>
      <img 
        class="wristwatch" 
        alt="A close-up photograph of wrist wearing a minimal, analog watch." 
        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/11907/mitch-lensink-0Dm7wLo2DHo-unsplash.jpg" />
    </div>
  </div>
  
  <aside>
    <p>
      <small>Photo by <a href="https://unsplash.com/photos/0Dm7wLo2DHo">Mitch Lensink</a> on <a href="https://unsplash.com/">Unsplash</a>.</small>
    </p>
  </aside>
</main>

// Demo
.is-old-timey {
  background-color: #FFEECF;

  .timeless {
    color: #5c5240;
    font-family: 'Abril Fatface', cursive;
    letter-spacing: 0.2em;
    font-size: 2rem;
  }
  
  .wristwatch {
    filter: sepia(1);
    margin-top: 0.45rem;
  }
}

.timeless {
  color: var(--color-cinder);
  font-family: 'Raleway', sans-serif;
  font-size: 1.5rem;
  letter-spacing: 0.75em;
  text-transform: uppercase;
  transition: color var(--transition-duration-short) ease-in-out;
}


// Pen Setup
.example__demo--sepia {
  align-items: center;
  display: flex;
  flex-direction: column;
  transition: background-color var(--transition-duration-short) ease-in-out;
}

.wristwatch {
  height: auto;
  margin-top: 1.25rem;
  width: 100%;
  transition: filter var(--transition-duration-short) ease-in-out;
}

const button = document.querySelector('button');

function toggleSepia() {
  var example = document.querySelector('.example__demo--sepia');

  example.classList.toggle('is-old-timey');
}

button.addEventListener('click', toggleSepia);

button.addEventListener('click', event => {
  if (button.getAttribute('aria-pressed') === "false") {
    button.setAttribute('aria-pressed', 'true');
  }
  else {
    button.setAttribute('aria-pressed', 'false');
  }
});