<div class="app">
  <div class="app__nav">
    
  </div><!-- @end app__nav -->
  <div class="app__main">
    <nav class="nav--toc">
      <h2>Table of Contents</h2>
      <ol class="menu menu--toc">
        <li class="menu__item"><a href="#section_01">Section 01</a></li>
        <li class="menu__item"><a href="#section_02">Section 02</a></li>
        <li class="menu__item"><a href="#section_03">Section 03</a></li>
      </ol>
    </nav><!-- @end nav--toc -->
    <main class="main">
      <article class="article">
        <div class="article__header">
          <h1 class="article__title">Playing with CSS Animations on Scroll</h1>
          <p class="article__lead">The question is can <code>:target</code> psuedo be used to create CSS animations on scroll.</p>
        </div>
        <section id="section_01" name="section_01" class="article__section">
          <h2 class="section__title">Section 01</h2>
        </section>
        <section id="section_02" name="section_02" class="article__section">
          <h2 class="section__title">Section 02</h2>
        </section>
        <section id="section_03" name="section_03" class="article__section">
          <h2 class="section__title">Section 03</h2>
        </section>
      </article>
    </main><!-- @end main -->
    <footer class="footer">
      
    </footer><!-- @end footer -->
  </div>
  <div class="app__footer">
    
  </div><!-- @end app__footer -->
</div><!-- @end app -->

/**********
 * Layout *
 **********/

.app {
  display: grid;
  grid-template-areas:
    '.... nav nav nav nav ....',
    '.... main main main main ....',
    '.... footer footer footer footer ....';
  grid-template-rows: minmax(60px, 80px) auto auto;
  grid-template-columns: minmax(1rem, 1fr) repeat(4, 2fr) minmax(1rem, 1fr);
  height: 100vh;
  width: 100vw;
  
  // .app__nav
  &__nav {
    grid-column: 1 / span 6;
    background-color: hsl(0, 0%, 25%);
  } // @end .app__nav
  
  // .app__main
  &__main {
    grid-column: 2 / span 4;
    background-color: #F7F7F7;
  } // @end .app__main
  
  ///
}

.article {
  // .article__header
  &__header {
    text-align: center;
  }
  
  .section__title {
    transition: all 1s ease;
  }
  
  // .article__section
  &__section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    
    &:target {
      .section__title {
        font-size: 40px;
        color: red;
      }
    }
  } // @end .article__section
}

/*
 * Menus & Navigations
 */

.menu {
  // Browser Overrides
  padding-left: 0;
  list-style-type: none;
  
  a {
    text-decoration: none;
  }
  
  // .menu--toc
  &--toc {
    display: flex;
    justify-content: space-evenly;
    max-width: 400px;
    margin: 0 auto;
    
    a {
      display: block;
      padding: 1rem;
      
      &:link {
        
      }
      
      &:focus,
      &:hover {
        
      }
    }
  }
}

.nav {
  
  // .nav--toc
  &--toc {
    box-sizing: border-box;
    
    position: sticky;
    top: 0;
    background-color: hsl(0, 0%, 100%);
    
    > h2 {
      // NOT ACCESSIBLE, DO NOT USE IN PRODUCTION
      display: none;
    }
  }
}