index.ejs

<div class="sidebar">
  <ul class="main-menu">
    <%- partial('partials/main_menu', { context: 'sidebar' }) %>
  </ul>
</div>

<div id="hero">
  <div class="inner">
    <div class="left">
      <img class="hero-logo" src="/images/logo.png">
    </div><div class="right">
      <h2 class="vue">Vue.js</h2>
      <h1>
        The Progressive<br>JavaScript Framework
      </h1>
      <p>
        <a class="button" href="/v2/guide/">GET STARTED</a>
        <a class="button white" href="https://github.com/vuejs/vue" target="_blank">GITHUB</a>
      </p>
    </div>
  </div>
</div>

<div id="highlights">
  <div class="inner">
    <div class="point">
      <h2>Approachable</h2>
      <p>Already know HTML, CSS and JavaScript? Read the guide and start building things in no time!</p>
    </div>

    <div class="point">
      <h2>Versatile</h2>
      <p>Simple, minimal core with an incrementally adoptable stack that can handle apps of any scale.</p>
    </div>

    <div class="point">
      <h2>Performant</h2>
      <p>
        17kb min+gzip Runtime<br>
        Blazing Fast Virtual DOM<br>
        Minimal Optimization Efforts
      </p>
    </div>
  </div>
</div>

<div id="sponsors">
  <div class="inner">
    <h3>PROUDLY SPONSORED BY</h3>
    <%- partial('partials/sponsors') %>
    <br>
    <a class="become-sponsor button white" href="/support-vuejs/">Become a Backer</a>
  </div>
</div>

<div id="footer">
  Released under the <a href="https://opensource.org/licenses/MIT" href="_blank">MIT License</a><br>
  Copyright &copy; 2014-<%- new Date().getFullYear() %> Evan You
</div>

<script>
var topScrolled = false
window.addEventListener('scroll', function () {
  if (window.pageYOffset > 165 && !topScrolled) {
    topScrolled = true
    document.getElementById('mobile-bar').classList.remove('top')
  } else if (window.pageYOffset <= 165 && topScrolled) {
    topScrolled = false
    document.getElementById('mobile-bar').classList.add('top')
  }
})
</script>