{% extends "layout.html" %}
{% block page %}
{% include 'header.html' %}

<div class="container my-5 pt-5">
  <div class="text-center">
    <h1>Join the Queerscriptors</h1>
  </div>

  <div class="card mt-4" id="getting-started">
    <div class="card-header">
      Getting setup
    </div>
    <div class="card-body">
      {{ this.gettingstarted }}
    </div>
  </div>

  <div class="card mt-4" id="learn-tech">
    <div class="card-header">
      Learn the quirks
    </div>
    <div class="card-body">
      <p>Various game engines have some techincal stuff you need to know, e.g. in Ren'Py <code>%</code> is a special character, so you need to write <code>%%</code> instead</p>
      <details>
        <summary>Ren'Py</summary>
        <ul>
          <li>As said above, there are characters that are special and therefore need special treatment, e.g. %% instead of %</li>
          <li>Ren'Py uses <code>{}</code> and <code>{/}</code> to denote styling, so <code>{b}bold{/b}</code> would display as <b>bold</b>.
            <ul>
              <li>A full list of what chars and names corrospond to what output <a href="https://www.renpy.org/doc/html/text.html">can be found in the Ren'Py documentation</a>.</li>
            </ul>
          </li>
        </ul>
    </div>
  </div>
</div>
{% endblock %}