index.html

---
js:
- /scripts/index.js
carousel_items:
- name: Red Alert
  video_base_name: red-alert-sizzle
  abbr: ra
- name: Command & Conquer
  video_base_name: command-and-conquer-sizzle
  abbr: cnc
- name: Dune 2000
  video_base_name: dune-2000-sizzle
  abbr: d2k
---

<section class="hero site-section">
  <div class="site-section__content">
    <header class="hero__header">
      <h1 class="hero__intro-text">
        <span id="game-carousel" class="hero__intro-text__games carousel">
          <span class="carousel__items">
            {% for carousel_item in page.carousel_items %}
              <span class="hero__intro-text__{{ carousel_item.abbr }} hero__intro-text__game carousel__item carousel__item">
                {{carousel_item.name}},&nbsp;
              </span>
            {% endfor %}
          </span>
        </span>
        <span class="hero__intro-text__tagline color--gold">Rebuilt for the Modern Era.</span>
      </h1>
      <div class="install">
        <a class="button button--large button--primary" href="{{ '/download/' | relative_url }}">
          Install Now
          <svg class="button__icon icon">
            <use xlink:href="{{ '/images/icons/icons.svg#icon-download' | relative_url }}"></use>
          </svg>
        </a>
      </div>
    </header>
    <div id="hero-carousel" class="hero-carousel carousel">
      <div class="hero-carousel__items">
        <div class="carousel__items" style="width: {{ 100  | times: page.carousel_items.size }}%">
          {% for carousel_item in page.carousel_items %}
            <div id="hero-{{carousel_item.abbr}}" class="carousel__item">
              <div class="carousel__item__content aspect-16-9">
                <video
                  class="hero-carousel__image"
                  autoplay="true"
                  muted="true"
                  playsinline="true"
                  preload="auto">
                  <source src="{{ '/videos/' | relative_url }}{{carousel_item.video_base_name}}.webm" type="video/webm" />
                  <source src="{{ '/videos/' | relative_url }}{{carousel_item.video_base_name}}.mp4" type="video/mp4" />
                </video>
              </div>
            </div>
          {% endfor %}
        </div>
      </div>
      <span class="carousel__previous">
        <button class="carousel__previous__button" aria-label="Previous Item">
          <svg class="icon">
            <use xlink:href="{{ '/images/icons/icons.svg#icon-chevron-left' | relative_url }}"></use>
          </svg>
        </button>
      </span>
      <span class="carousel__next">
        <button class="carousel__next__button" aria-label="Next Item">
          <svg class="icon">
            <use xlink:href="{{ '/images/icons/icons.svg#icon-chevron-right' | relative_url }}"></use>
          </svg>
        </button>
      </span>
      <nav class="carousel__pages">
        {% for carousel_item in page.carousel_items %}
          <a href="#" class="carousel__page">
            <span class="carousel__page__indicator">Jump to {{carousel_item.name}}</span>
          </a>
        {% endfor %}
        </li>
      </nav>
    </div>

    <div class="additional-info">
      <div class="features">
        <h3>Built for Modern Expectations</h3>
        <ul>
          <li>Updated gameplay designed around modern features like <strong>attack-move</strong>, <strong>unit veterancy</strong>, and the <strong>fog of war</strong></li>
          <li>Online play with <strong>full support</strong> for mods and custom maps</li>
          <li>Updated campaigns with <strong>new objectives</strong> and difficulties</li>
          <li><strong>Natively supported</strong> on Windows, macOS and Linux</strong>
        </ul>
      </div>
      
      <div class="community">
        <h3>Made Better By The Community</h3>
        <ul>
          <li>Fully <strong>open source</strong> and developed in the open with <strong>community input</strong> into updates and balance</li>
          <li>User created and curated maps</li>
          <li>Includes a <strong>Mod SDK</strong> to create <strong>new RTS games</strong></li>
          <li>Regular <strong>community streams</strong> and <strong>tournaments</strong></li>
        </ul>
      </div>
    </div>
  </div>
</section>

<hr class="site-section__divider" />

<section class="home__developer-updates site-section">
  <div class="site-section__content">
    <div class="dark-panel">
      <div class="dark-panel__header">
        <strong class="text--caps text--medium">Updates from the Developers</strong>
        <a class="home__developer-updates__view-all" href="{{ '/news/' | relative_url }}">[View All Updates]</a>
      </div>
      {% for post in site.posts limit:1 %}
        {% include developer-update.html title=post.title author=post.author created_at=post.created_at body=post.content disqus_id=post.disqus_id disqus_link=post.permalink %}
      {% endfor %}
    </div>
  </div>
</section>