A glance at the future

00-readme.md

Some snippets.

basic-html.html

<main>
    
  <img class="logo" src="images/jazz-fest-logo.png">
  <header>
    <h1>Jazz at Lincoln Center</h1>
    <h2>Spring 2007</h2>
  </header>

  <section>
    <h1 class="element-invisible">Schedule of Events</h1>
    <ul>
      <li>
        <h3>Bebop Lives!</h3>
        <p>Celebrating the best of Dizzy Gillespie and Charlie Parker</p>
        <h5>January 26–27, 8pm</h5>
      </li>
      <li>
        <h3>Jazz and Art</h3>
        <p>The Jazz at Lincoln Center Orchestra with Wynton Marsalis & special guest Mark O'Connor</p>
        <h5>February 22–24, 8pm</h5>
      </li>
      ...
    </ul>
  </section>
</main>

css-locks.css

h1 {
  font-size: 16px;
}

@media (min-width: 400px) {
  h1 {
    font-size: calc( 16px + (24 - 16) * (100vw - 400px) / (800-400) );
  }
}

@media (min-width: 800px) {
  h1 {
    font-size: 24px;
  }
}